This tutorial enables you to create a fully featured website with Adobe Experience Manager (AEM). The website will be based on a generic website and is targeted primarily at web developers. All development will take place within an author environment.

This tutorial describes how to:

Install AEM.

Access CRXDE Lite (the development environment).

Set up the project structure in CRXDE Lite.

Create the template, component, and scripts used as the basis for creating content pages.

Create the root page for your website and then content pages.

Create the following components for use on your pages:

Top Navigation

List Children

Logo

Image

Text-Image

Search

Include various foundation components.

After performing all the steps, your pages will look as follows:

Download the final result

To follow along with the tutorial rather than performing the exercises, download website-1.0.zip. This file is an AEM content package that contains the results of this tutorial. Use Package Manager to install the package to your author instance.

NOTE: Installing this package will overwrite any resources on your authoring instance that you have created using this tutorial.

In the folder tree, select the Designs folder and then click New > New Page. Type mywebsite as the title and click Create.

If the mywebsite item does not appear in the table, refresh the tree or the table.

Using WebDAV access to the URL at http://localhost:4502, copy the sample static.css file and images folder from the downloaded mywebsite.zip file into the /etc/designs/mywebsite folder.

Creating the Contentpage Template, Component and Script

In this section, you create the following:

The contentpage template that will be used to create content pages in the example website

The contentpage component that will be used to render pages of content

The contentpage script

Creating the Contentpage Template

Create a template to use as the basis of the web pages of your site.

A template defines the default content of a new page. Complex websites may use several templates for creating the different types of pages in the site. In this exercise, all pages are based on one simple template.

In the Create Template dialog, type the following values and then click Next:

Label: contentpage

Title: My Website Content Page Template

Description: This is my Website Content Page Template

Resource Type: mywebsite/components/contentpage

Use the default value for the Ranking property.

The resource type identifies the component that renders the page. In this case, all pages created using the contentpage template are rendered by the mywebsite/components/contentpage component.

To specify the paths of the pages that can use this template, click the plus button and type /content(/.*)? in the text box that appears. Then, click Next.

The value of the allowed path property is a regular expression. Pages that have a path that matches the expression can use the template. In this is case the regular expression matches the path of the /content folder and all subpages.

When an author creates a page below /content, the contentpage template appears in a list of available templates to use.

Click Next in the Allowed Parents and Allowed Children panels and click OK. In CRXDE Lite, click Save All.

Creating the Contentpage Component

Create the component that defines the content and renders the pages that use the contentpage template. The location of the component must correspond with the value of the Resource Type property of the contentpage template.

Enhancing the Contentpage Script

This section describes how to enhance the contentpage script using the AEM foundation component scripts and by writing your own scripts.

The Products page will look as follows:

Using the Foundation Page Scripts

In this exercise, you configure your pagecontent component so that its supertype is the AEM Page component. Because components inherit the features of their supertype, your pagecontent inherits the scripts and properties of the Page component.

For example, in your component JSP code, you can reference the scripts that the supertype component provides as though they are included in your component.

In CRXDE Lite, add a property to the /apps/mywebsite/components/contentpage node.

Select the /apps/mywebsite/components/contentpage node.

At the bottom of the Properties tab, type the following property values and then click Add:

Name: sling:resourceSuperType

Type: String

Value: foundation/components/page

Click Save All.

Open the contentpage.jsp file under /apps/mywebsite/components/contentpage and replace the existing code with the following code:

Using your own scripts

In this section you create several scripts that each generate a part of the page body. You then create the body.jsp file in the pagecontent component to override the body.jsp of the AEM Page component. In your body.jsp file, you include your scripts that generate the different parts of the page body.

Tip: When a component includes a file that has the same name and relative location as a file in the component's supertype, it is called overlaying.

In CRXDE Lite, create the file left.jsp under /apps/mywebsite/components/contentpage:

Right-click the node /apps/mywebsite/components/contentpage, then select Create then Create File.

In the window, type left.jsp as the Name and click OK.

Edit the file left.jsp to remove the existing content and replace with the following code:

Creating the Top Navigation Component

In this section, you create a component that displays links to all top level pages of the website as to ease navigation. This component content appears at the top of all pages that are created using the contentpage template.

In the first version of the top navigation component (topnav) the navigation items are text links only. In the second version you implement topnav with image navigation links.

In your browser, reload the Products Page. The top navigation appears as follows:

Enhancing Pages with Subtitles

The Page component defines properties that enable you to provide subtitles for pages. Add subtitles that provide information about the page content.

In your browser, open the Products page.

On the Sidekick Page tab, click Page Properties.

On the Basic tab of the dialog, expand More Titles and Description, and for the Subtitle property, type what we do. Click OK.

Repeat the previous steps to add the subtitle about our services to the Services page.

Repeat the previous steps to add the subtitle the trust we earn to the Customers page.

Tip: In CRXDE Lite, select the /content/mywebsite/en/products/jcr:content node to see that the subtitle property is added.

Enhance Top Navigation by Using Image Links

Enhance the rendering script of the topnav component to use image links instead of hypertext for the navigation controls. The image includes the title and subtitle of the link target.

This exercise demonstrates Sling request processing. The topnav.jsp script is modified to call a script that dynamically generates images to use for the page navigation links. In this exercise, Sling parses the URL of image source files to determine the script to use to render the images.

For example, the source for the image link to the Products page could be http://localhost:4502/content/mywebsite/en/products.navimage.png. Sling parses this URL to determine the resource type and the script to use to render the resource:

Sling determines the path of the resource to be /content/mwebysite/en/products.png.

Sling matches this path with the /content/mywebsite/en/products node.

Sling determines the sling:resourceType of this node to be mywebsite/components/contentpage.

Sling finds the script in this component that best matches the URL selector (navimage) and file name extension (png).

In this exercise, Sling matches these URLs to the /apps/mywebsite/components/contentpage/navimage.png.java script that you create.

In CRXDE Lite, open the topnav.jsp under /apps/mywebsite/components/topnav. Locate the content of the anchor element (line 14):

In your browser, reload the Products page. The top navigation now appears as follows:

Creating the List Children Component

Create the listchildren component that generates a list of page links that include the title, description, and date of pages (for example, product pages). The links target the child pages of the current page, or of a root page that is specified in the component dialog.

Creating Product Pages

Create two pages located below the Products page. For each page, which describe two specific products, you set a title, a description, and a date.

In the folder tree of the Websites page, select the Websites/My Website/English/Products item and click New > New Page.

In the dialog enter the following property values and then click Create:

Title: Product 1.

Name: product1.

Select My Website Content Page Template

Create another page below Products using the following property values:

Title: Product 2

Name: product2

Select My Website Content Page Template

In CRXDE Lite, set a description and a date for the Product 1 page:

Select the /content/mywebsite/en/products/product1/jcr:content node.

In the Properties tab, enter the following values:

Name: jcr:description

Type: String

Value: This is a description of the Product 1!.

Click Add.

In the Properties tab, create another property using the following values:

Name: date

Type: String

Value: 02/14/2008

Click Add.

Click Save All.

In CRXDE Lite, set a description and a date for the Product 2 page:

Select the /content/mywebsite/en/products/product2/jcr:content node.

In the Properties tab, enter the following values:

Name: jcr:description

Type: String

Value: This is a description of the Product 2!.

Click Add.

In the same text boxes, replace the previous values with the following values:

Viewing List Children in a Page

To see the full operation of this component you can view the Products page:

when the parent page ("Path of list root") is not defined.

when the parent page ("Path of list root") is defined.

In your browser, reload the Products Page. The listchildren component appears as follows:

As Path of list root, enter: /content/mywebsite/en. Click OK. The listchildren component on your page now looks as follows:

Creating the Logo Component

Create a component that displays the company logo and provides a link to the home page of the site. The component contains a design-mode dialog so that property values are stored in the site design (/etc/designs/mywebsite):

The property values apply to all instances of the component that are added to pages that use the design.

The properties can be configured using any instance of the component that is on a page that uses the design.

Your design-mode dialog contains properties for setting the image and the link path. The logo component will be placed on the upper left side of all pages in the website.

In the folder tree of the AEM Websites page, select Websites/My Website/English, then click New > New Page. Specify the following property values and click Create:

Title: Toolbar

Select My Website Content Page Template

In the list of pages, right-click the Toolbar page and click Properties. Select Hide In Navigation, and click OK.

The Hide in Navigation option prevents the page from appearing in navigation components, such as topnav and listchildren.

Under Toolbar, create following pages:

Contacts

Feedback

Login

Search

In your browser, reload the Products page. It looks as follows:

Creating the Search Component

In this section, you create the component to search for content on the website. This search component can be placed in the paragraph system of any page (for example, on a specialized search result page).

In your browser, reload the Products page. The search component looks as follows:

Including the Search Component in the Search Page

In this section, you add your search component to the paragraph system.

In your browser, open the Search page.

In the Sidekick, click the design mode icon.

In the Design of par block (below the Search title), click Edit.

In the dialog, scroll down to the My Websites group, select My Search Component and click OK.

On Sidekick, click the triangle to return to edit mode.

Drag the My Search Component from the Sidekick into the parsys frame. It looks as follows:

Navigate to your Products page. Search for customers in the input box and press Enter. You are redirected to the Search page. Switch to preview mode: the output is in a similar format as the following:

Including the Iparsys Component

In this section, you include the Inheritance Paragraph System (iparsys) component, which is one of the foundation components. This component enables you to create a structure of paragraphs on a parent page, and have child pages inherit the paragraphs.

For this component you can set several parameters in both edit mode and design mode.

In CRXDE Lite, navigate to /apps/mywebsite/components/contentpage, open the file right.jsp and replace: