Archive for April, 2015

Apply a design to the AEM Sightly template

In this session, you will learn about adding a design to the template. You will use Sightly, because it’s HTML5 and very easy to use.

This is in continuation of my previous blog posts. As usual, I have provided the video and transcripts below. Video can be watched in the Full screen mode. The sample design and package are in my GitHub repository. Let me know what you think.

Let us take a sample design. Assume that following is what your designer came up with.

design

Now, we need to update the AEM template, so that authors will be able to create pages that look similar to this. You can see some sample texts in the design. The sample text is what authors add in their pages.

For creating any design, you should have a CSS file. Let us see the CSS file first. It’s there in the assets/css location.

First step is to get this CSS in CRX repository (Oak repository). In this case, we have only one file to upload. We can upload it using the CRXDELite itself. In real-time, you may have lots of files to upload to CRX repository. There are many ways to do it. We will see them later.

  1. Go to http://localhost:4502/miscadmin.
    This is a new web console for you. You generally use it for creating pages for designs.
  2. Now go to Designs.
  3. Create a page AEM Company.
  4. Go to CRXDE Lite.
    The page you created is available under the designs folder.
  5. Go to designs > aem-company.
  6. Create an empty file static.css.
    Note that the css name should be static.css.
  7. Expand the file node that you created.
  8. Double-click jcr:data property.
  9. Browse to the CSS location and select it.
  10. Click OK.
    Note that static.css is updated with the css that your designer prepared.
  11. Go to the template we created earlier.
  12. Open body.html.
  13. Update it with the html pages with the html page that your designer provided.
  14. Remove the CSS link. (Assigning the CSS to a page is done at a later stage.)

This is the beauty of Sightly. In earlier versions of AEM, you had to convert the design into JSP, which could be time consuming. Adobe also provides a Brackets extension – a tool for designers. This tool allows designers to work directly with AEM templates. We will explore it later.

  1. Now open the Site Admin.
  2. Under AEM Company, create a new page with name home.
  3. Open the page, the page appears with the sample texts.
    Ideally, that should be removed from the sample page. It’s for authors to fill.
    We have seen how to do it earlier. You need to provide the parsys component for author to add component.
  4. Let us do it in the template.
  5. Remove the sample texts by adding the parsys component.
    <div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/parsys'}"></div>
  6. Remove the sample text for the side content using iparsys.
    <div data-sly-resource="${'side-content' @ resourceType='wcm/foundation/components/iparsys'}"></div>
  7. Note that I changed the name to side-content. This is a mistake that I made in the video.
    The iparsys will not appear propery if you don’t change the name.
  8. Now open the page.

Enable components in the Components tab

In the last session, we have added a space in the template that allows us to drag and drop a component to the web page. One of the shortcomings in the template was that it didn’t
have any components in the Components tab. In this session, we will add components to the Components tab.

  1. Open the web page we created.
  2. Click the Page Information icon and select Classic UI.
    The same page appears with a different look and feel.
    It’s called Classic UI. Classic UI is specifically designed for viewing in Desktops.
    (The UI you were using is designed for Touch Optimized devices.)
  3. From the sidekick, click the Design tab.
  4. Click Edit from the Design of Content.
    edit-design-par
    You can see various categories of components.
    select-component-category
  5. Select a category or go inside the category and select specific components.
  6. Open the page again and go to the Components tab.
    You will see all the components listed.
  7. Drag and drop the component to the web page and start editing.

Happy editing.

In the next session, we will update the template with a design.

Add the Parsys component to template

In this session, let us try to modify the template we created earlier. We will add a parsys component in the template to provide a space in the web page to drag and drop components.

Let us once again see how a page created using this template looks like.

  1. Log into to SiteAdmin. (http://localhost:4502/siteadmin)
  2. Double-click AEM Company page that you created. (If you have not created it, download the package that I provided in the previous session. And, then install it.)

The page appears with the text we entered in the template. There are three issues associated with this page:

  •  There is no place where you can drag and drop a component. (If you are not really able to make out that, I suggest you to visit my previous post. You could also open one of the pages from the sample websites to compare.)
  • The Component tab doesn’t display any components.
  • The template is not associated with any design. (Our page is really blank. It doesn’t have anything like header, footer, and so on.)

Let us solve these issues one-by-one. First, we will provide a place in the web page to add components.

  1. Go to CRXDE Lite. (http://localhost:4504/crx/de)
  2. Open the template’s rendering script. (/apps/aem-company/components/homepage/body.html)
  3. Add the following code:
    <div data-sly-resource=”${‘content’ @ resourceType=’wcm/foundation/components/parsys’}”></div>

This is a Sightly code. data-sly-resource is a tag to specify the component that you need to add to the page. It has a resourceType parameter that points to a parsys component. You would had noticed it points to a location where we saw a page component, which we inherited while creating a template. Note that this is the standard procedure to provide a location to add components in a template.

Now refresh the web page. Notice that now it provides you with a space where you can add components.

parsys

I have provided a new package in GitHub. (TemplateWithParsys.zip) Download and use it if you want to.

Summary: Use the parsys component to add space for addition or deletion of components in a web page. You don’t need to create a parsys component. Always reuse the component that exists.

Summary – Create templates and use packages

In this session, let us summarize what we learned in the previous session: Create the  first template. We created a template in three steps:

  • Step 1: Created the company folder inside apps. Created a folder for components and templates.
  • Step 2: Created a template inside the templates folder. Provided allowed paths as /content(/.*)?. And, we provided resourseType as aem-company/components/homepage. This was a component that didn’t exist at that time.
    resourceType
  • Step 3: We created a homepage component inside the components folder. This is the component that has the rendering script which decides the layout of the page. We named it as homepage, so that we can identify it as a page component (a component that decides the layout of the page, not the component you drag and drop to a web page.) We specified resourceSuperType of this component as wcm/foundation/components/page. Our intention was to inherit the page component. This is a must to get various functionalities in the webpage that authors create. We renamed the default script of component as body.html, so that we override only body.html that existed in wcm/foundation/components/page. Rest of the scripts we inherited.
    resourceSuperType1

This is the standard process to create  a template. I have created a package (FirstTemplate.zip) and shared in my GutHub account. Feel free to download, install, and experiment with it. You need to log into PackageManager to install a package. Packages in AEM helps you to share codes across AEM instances.

  1. Download the package from GitHub. Use FirstTemplate.zip.
  2. Log into PackageManager as admin/admin. (http://localhost:4502/crx/packmgr/index.jsp)
  3. Select Upload Package.
  4. Locate the package you downloaded. Click OK.
  5. All we have done in the previous session will be replicated to your AEM instance.