Component Basics

Transcript

All right, so now we’re going to create a new page. So, from the AEM Sites console, I’m just going to navigate under weekend US. And then under the homepage, EN, we’ll create a new page and we’re just going to choose the content page template. And for the title, I’ll just call this component basics.

Then we can go ahead and create our page and open it up.

Now all AEM pages that are enabled for authoring. We’ll have this drop zone otherwise known as layout container. And this is the area of the page that a content author can add new components. So, open up the side panel and we’ll browse to the available components.

And I’m just going to select the hello world component. The hello world component is included by the archetype really just for illustration purposes in order to gain an understanding of how components work. So, you can see that it’s already outputting some information as soon as we add it to the page. And this is a result of some backend code that we’ll look at later in the tutorial. Now that I’ve added the component, we can configure it by selecting the component and clicking the wrench icon. In order to make components reusable, almost all of them have configurations. In this case, it’s a simple text field. So, I’ll enter some information in the text field and then save the changes by clicking done. Notice that the component now renders a simple message. This example shows how a component can take user entered information and render it as part of the page.

Let’s add a second hello world component.

And I’ll configure this one, except this time let’s enter a different message to be displayed. So, we’ll call it hello world two. And then we can see the result. So that’s an example of how dialogues facilitate authoring and how you can reuse the same component on the same page but with different outputs. Now let’s take a look at the JCR or the Java content repository and see how the text properties of these components are persisted.

Now, an easy way to do this is to switch into developer mode. And developer mode is a tool intended to be used really just on a local environment. And it provides a lot of useful information in diagnostics of all of the components that currently make up the page. So, you’ll notice that in this side panel, there’s a lot more components listed here than there are in the content tree.

And if we select the hello world component it will automatically expand the tree and show us that instance of the component.

And so, you can see we’ve got a responsive grid and then we’ve got our hello world component. Both of them listed here.

And if we select this button to view details it’ll actually show us the content path to this exact component.

And if we click that, that’s going to open up CRXDE Lite which is a view into the backend JCL repository of AEM.

And notice that we can see both the hello world components And it’s under our component basics page.

In the text, you can see that text property that we listed here, but that’s really the only data that’s stored. And if we click our second hello world component, you can see the second text property.

So where does the rest of the rendering information come from? Well, it actually gets derived from this line string resource type which points to weekend components, content, hello world. And so that is the actual rendering script that’s used to render the component on the page.

So, let’s take a look at where that rendering script lives. Now, since this is code it’s actually going to live under the apps folder. So, in CRXDE Lite, if you expand the apps folder under weekend components, content, and hello world you can actually see this is the hello world code component and you can see the hello world.HTML file in there. And so, this is the actual rendering script written in HTML. And this is responsible for outputting all of the content that you see when you add that component to the page. And that’s what we’re going to look at next. -