Hello, in this video we are going to be looking at using AEM core components as part of an AEM Sites implementation.

So, what are AEM core components? Well, they are a standard set of AEM Sites components that can be used to build out a website or webpage and these components cover some of the most common use cases like tittle, text and image components and they also cover some more advanced use cases like Carousel or Accordion or Social Inter-Sharing. Now, all these core components, they’re build with best practices so when it comes to accessibility, search engine optimization as well as even CSS class naming conventions, this are all built with best practices in mind. And each of the components in your built to be used by customer implementations so they’re pretty robust and versatile and they can be used directly as this without any customizations or they can be extended to meet customer implementation requirements. Some other features of core components is that they’re localized automatically. They can output content in either HTML or JSON and they’re part of an open sourced project. So, it’s really easy to gain visibility into how these components were build.

So, some standard features of AEM core components. Well from one thing, our core components have a configurable authoring dialog and also our core components are compatible with AEM style system which allows the content authors to choose different visual variations for each of the components. Finally, many of the AEM core components offer advanced policy configurations via AEM Template Editor. Lastly, there is a proxy component pattern which supports versioning and extensibility of AEM core components. So, AEM core components is an open source project and you can find it here on GitHub. Now, the project tries to be as transparent as possible so, this is where you can see the code, file any issues or questions and see what the team is working on next.

Now, the other thing that you can find on GitHub is all of the different released versions of AEM core components. And so, if you want to download and install these on a local instance of AEM, you can actually just download this zip file right here, this core.wsm.components.examples.

Now, on my local machine, I’ve actually installed the WKND site which includes these core component examples. So, let’s check that out. So, if we click into this component library, you’ll see that there’s a page for everyone of the core components. So, I’m just going to go ahead and open up this Teaser page and if we look at this page, you can see that it’s an example of all of the different configurations that are possible with the Teaser component.

Now, what’s cool about the component library examples is we actually have some extra information beneath each of the component example so, on this first tab we see all of the GCR properties for this component. On the second tab we can see the static markup that’s outputted by this component and then on that third tab, you can also see the JSON representation of that component.

Now, one of the you know, big advantages of installing these core component examples on a local instance, is we can actually go into edit mode and start authoring these components just like a content author would. So, we can click into the Teaser component, open up the dialog, we can go ahead and switch out this image, maybe we’ll go ahead and update this tittle. And so you know, by doing this, this is almost like a live documentation page that you can update and mess around with and get an idea of all of this different functionality for each of these components.

Now, the WKND reference site is another great example of AEM core components since the site is almost entirely built using these AEM core components. So, if we go ahead and open up the WKND reference homepage, we can navigate into our side panel and here you can see it just met all of these different components that are available. They’re all derived from AEM core components. So, in the middle we’ve got this Teaser component. It’s certainly styled to look like the WKND site but we can perform all of the same authoring activities. So, we can sub out that image with just a little bit of drag and drop. If we open up the component dialog, you’ll notice it matches identically to the Teaser component that we saw in the component library.

Now, the other feature of AEM core components we want to highlight is that, all these components are enabled to work with AEM style system. So, with this Teaser component, you can see all of the different styles that are available and we’re currently using this featured style.

Or we can go ahead and click into this list style and you’ll see that the visual representation of the Teaser component is changing and again, if we switch into Hero or List, all of the elements remain the same. So, the same picture, tittle and description but we just get a different visual looking feel.

So now, let’s look at another really powerful feature of core components and that’s the ability to work with AEM’s editable templates. So, from the page of properties menu, if we click edit template, so, this is going to bring up the editable template that our page was based of and so, you can see we’ve got a couple of layout containers with all of the allowed components configured.

Now, if we go ahead and click the little pale icon next to the component, this is going to bring up our advanced policy configuration for that component and here is where we can enable or disable certain features about that component. So for example, we’ve enabled lazy loading for this image component and the image component is really cool because it’s also built to be used with responsive design. So, here we can establish a different, several different widths that the image component can take and AEM is smart enough to render the appropriate sides width based on the viewport or device size.

Now, some other advanced configurations. If we click into the features tab, we can actually turn on and off certain features for authors. So for example, we can allow authors to crop the image component and we can also define the different aspect ratios available for the crop.

And we’re not going to go through every single different configuration of every single different core component but hopefully, this gives you an idea of some of the granular control and flexibility you have by notifying these policy configurations. So, we’ll just quickly look at the policy configuration for the text component and here’s where we can actually enable a bunch of rich text editor options. So, we can choose until it show you know, copy and paste, find and replace, we can choose to enable all of these different features through the RTE.

Now, we can also enable some formatting features like bold, italic, custom alignment and we can also define which paragraph elements are available. So right now, it’s just a P tag. We can also allow H one, H two, any other different HTML elements for an author to use.

And you can also potentially enable special characters as part of the RTE. And the last thing, this is the style tab and you’ll find the style tab on every single one of the core components and this is where you’ll enable those style system features that we looked at as part of the Teaser component.

Alright, and the last thing that I want to highlight is the proxy component pattern or the mechanism for including AEM core components as part of a custom project. And we’re just going to use the WKND reference project to take a look at this example.

So, from the AEM start menu I’ll go to tools, general, CRXDE Lite.

And I’m just going to zoom in here a little bit.

And so, all of our code for the WKND code base is under Apps WKND.

Now, if we go ahead and expand this WKND folder and under components and under content, we can look at some of the component definitions that are part of the WKND code base. And let’s inspect this image component. So, if we click the image component and then inspect the properties, we can see that there is a property called sling resource super type which is pointing to a path, core.wsm.components.image.vtwo.image. And so, this is what we mean by proxying AEM core components. Instead of copying all of the core component files into our own project, instead we just reference them using this sling resource super type.

Now, we can go ahead and actually inspect the AEM core component definition by just using their path that we referenced and here you can see under V two which is the version two, we can see a lot more files and this is the true core component definition that’s defined by AEM core components. So, that’s just an introduction to the proxy component pattern. In the WKND developer tutorial, you’ll go through all of the steps to start a new project, proxy with the AEM core components, include them in the project and also learn how to style and customize them to meet business specific needs. So in the mean time, definitely check out some of the other core components that you can play with as part of the core component examples and the WKND reference site. So, thanks for watching. -