How to Create a Fully Featured Internet Website

This tutorial enables you to create a fully featured website with CQ5. The website will be based on Geometrixx, the reference website that comes with your CQ5 installation.

This tutorial is targeted primarily at web developers. All development will take place within an author environment.

This tutorial describes how to:

  • Install CQ5
  • Set up CRXDE
  • Set up the project in CRXDE
  • Create the template, component and scripts used as the basis for creating 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:

Website_overview

Installing CQ and the CRXDE development environment

To install a CQ instance for developing your website, follow either the instructions for setting up a deployment environment with author and publish instances, or just perform a generic installation, which makes this step as easy as downloading the CQ Quickstart jar package,  placing the license.properties file in the same directory and double-clicking the downloaded CQ Quickstart jar package.  

Additionally, proceed as follows in order to setup and start the CRXDE development environment:

  1. Ensure that CQ is installed and running.

  2. Download the CRXDE package.

  3. Extract the package.

  4. Double-click the executable.

  5. Enter the location of your CQ installation; for example http://localhost:4502 for CQ Quickstart.

  6. Enter your username (default: admin) and password (default: admin). 

  7. Click OK.

Setting up the project structure in CRXDE

In this section, you will create the mygeometrixx application and its structure in CRXDE. Proceed as follows:

  1. In CRXDE, right-click apps, select New, then Folder. In the wizard dialog, type mygeometrixx as Folder name and click Finish.

  2. Right-click mygeometrixx, select New, then Folder. In the wizard dialog, type components as Folder name and click Finish.

  3. Right-click mygeometrixx, select New, then Folder. In the wizard dialog, type templates as Folder name and click Finish.

    The structure in CRXDE looks as follows:

Setting up the Designer

In this section, you will set up the designer for your application using the Designer. Proceed as follows:

  1. In your browser, open the Tools tab of CQ WCM.

  2. Under Designs, create a new page. Enter mygeometrixx as the Title and click Create.

  3. In CRXDE refresh the tree in Navigator.

  4. In CRXDE, right-click the file etc/designs/geometrixx/static.css, then select Copy. Right-click the node etc/designs/mygeometrixx and select Paste.

  5. In CRXDE, right-click the folder /etc/designs/geometrixx/images, select Copy. Right-click the node etc/designs/mygeometrixx, select Paste.

Creating the Contentpage Template, Component, Script and Pages

In this section, you will create:

  • The contentpage template which will be used to create content pages in the example website mygeometrixx.

  • The contentpage component which will be used to render pages of content.

  • The contentpage script.

  • Following pages which all use the contentpage template: My Geometrixx, English and Products, Services and Customers.

The Products page that you will create will look as follows:

Website_contentpage_English

Creating the Contentpage Template

To create the contentpage template, which will be used to create all the pages of the website, follow the steps:

  1. In CRXDE, right-click /apps/mygeometrixx/templates, select New, then Template.
  2. In the wizard dialog, type:
    • Label: contentpage
    • Title: My Geometrixx Content Page Template
    • Description: This is My Geometrixx Content Page Template
    • Resource Type: mygeometrixx/components/contentpage
    • Click Finish.
  3. To display the template in the Create Page dialog when creating a page right under Websites from the Websites console, set the allowedPaths property of the template node to: /content(/.*)?

Creating the Contentpage Component

To create the contentpage component, which will be used to render pages of content, follow the steps:

  1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

  2. In the wizard dialog, type:

    • Label: contentpage.

    • Title: My Geometrixx Content Page Component.

    • Description: This is My Geometrixx Content Page Component.

    • Click Finish.

  3. The structure now looks as follows:

Creating the Contentpage Script

This section describes how to create the first version of the contentpage script (it will be extended later):

Creating Contentpage based Pages

In order to create pages based on the contentpage template:

  1. In your browser,using the Websites tab, select Websites, click New... then select New Page....

  2. In the dialog enter:

    • Title: My Geometrixx.

    • Name: mygeometrixx.

    • Select the My Geometrixx Content Page Template.

    • Click Create.

  3. Select the My Geometrixx page (in the left pane), click New... then select New Page....

  4. In the dialog enter:

    • Title: English.

    • Name: en.

    • Select the My Geometrixx Content Page Template.

    • Click Create.

  5. Select the English page (in the left pane), click New... then select New Page....

  6. In the dialog enter:

    • Title: Products.

    • Select the My Geometrixx Content Page Template.

    • Click Create.

  7. Select the English page, click New... then select New Page....

  8. In the dialog enter:

    • Title: Services.

    • Select the My Geometrixx Content Page Template.

    • Click Create.

  9. Select the English page, click New... then select New Page....

  10. In the dialog enter:

    • Title: Customers.

    • Select the My Geometrixx Content Page Template.

    • Click Create.

  11. Your structure looks as follows:

  12. Link your pages to the mygeometrixx designer: in CRX Explorer, select the node /content/mygeometrixx/jcr:content. Double-click the property cq:designPath and set its Value to /etc/designs/mygeometrixx.

  13. In your browser, open a new tab and browse to http://localhost:4502/content/mygeometrixx/en/products.html. It looks as follows:

Enhancing the Contentpage Script

This section describes how to enhance the contentpage script:

  • first by using the foundation page scripts; the foundation components are those inbuilt in CQ

  • then by writing your own scripts

The Products page will look as follows:

Website_enhance_script_02

Using the Foundation Page Scripts

To include head.jsp and body.jsp from the foundation page component into your script:

Using your own scripts

In this section you will split the body part of the contentpage component into several parts. You will do this by creating script files for every part, then by including them into the script body.jsp that defines the body. Follow the steps:

Creating the Top Navigation Component

In this section you will create a component that displays links to all top level pages of the website as a mechanism for navigating the website. This component will be displayed at the top of all pages created using the contentpage template.

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

Your top navigation will then look as follows:

Website_topnav_image

Creating the Top Navigation Component

To create the topnav component:

  1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

  2. In the wizard dialog enter:

    • Label: topnav.

    • Title: My Top Navigation Component.

    • Description: This is My Top Navigation Component.

    • Click Finish.

Creating the Top Navigation Script with Textual Links

This section describes how to create the rendering script for the text-link based topnav component:

Including Top Navigation in the Contentpage Component

To include topnav in your contentpage Component:

  1. In CRXDE, open the file body.jsp under /apps/mygeometrixx/components/contentpage and replace:

    <div class="topnav">topnav</div>

    with:

    <cq:include path="topnav" resourceType="mygeometrixx/components/topnav" />

  2. Save the changes.

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

Enhancing Pages with Subtitles

To enhance the pages with subtitles that will be displayed in the top navigation:

  1. In your browser, navigate to the Products Page.

  2. In the Sidekick, select the Page tab and click Page Properties....

  3. In the dialog, in the Basic tab, expand the More Titles and Description frame, as Subtitle, enter what we do. Click OK.

  4. Repeat the former steps to add the subtitle about our services to the Services Page.

  5. Repeat the former steps to add the subtitle the trust we earn to the Customers Page.

Creating the Top Navigation Script with Image Links

In this section you will enhance the rendering script of the topnav component to use linked images for the navigation items. The image should display the title and the description of the page reference. Follow the steps:

Creating the List Children Component

In this section you will create the list children (listchildren) component which displays a list of links with the title, description and date of pages (for example, product pages) which are below either the current page or a root page defined in the component dialog.

It will look as follows:

Website_listchildren02

Creating Product Pages

In this section you will create two pages below the Products page, describing two specific products. For each page, you will set a title, a description and a date.

  1. In your browser, in the Websites tab, select the Products page in the left pane. Click New... then select New Page....

  2. In the dialog enter:

    • Title: Product 1.

    • Name: product1.

    • Select My Geometrixx Content Page Template.

    • Click Create.

  3. Select the Products page. Click New... then select New Page....

  4. In the dialog enter:

    • Title: Product 2.

    • Name: product2.

    • Select My Geometrixx Content Page Template.

    • Click Create.

  5. In CRX Explorer, set a description and a date for the Product 1 page:

    • Browse to the node /content/mygeometrixx/en/products/product1/jcr:content. Double-click the jcr:description property and set the Value to This is a description of the Product 1!. Save the update.

    • Right-click /content/mygeometrixx/en/products/product1/jcr:content, select New Property. Set Name to date and Value to 10/11/2008. Save the update.

  6. In CRX Explorer, set a description and a date for the Product 2 page:

    • Browse to the node /content/mygeometrixx/en/products/product2/jcr:content. Double-click the jcr:description property and set the Value to This is a description of the Product 2!. Save the update.

    • Right-click /content/mygeometrixx/en/products/product2/jcr:content, select New Property. Set Name to date and Value to 20/11/2008. Save the update.

Creating the List Children Component

To create the listchildren component:

  1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

  2. In the wizard dialog enter:

    • Label: listchildren.

    • Title: My Listchildren Component.

    • Description: This is My Listchildren Component.

    • Click Finish.

Creating the List Children Script

Creating the List Children Dialog

In this section, you will create the dialog for the listchildren component.

  1. Create the dialog node under the listchildren component:

    • In CRXDE, right-click the node /apps/mygeometrixx/components/listchildren, select New, then Dialog.

    • In the wizard dialog, as Name enter dialog and as Title, select List Children. Click Finish. The dialog generated looks as follows:

      With the following properties:

  2. With CRXDE edit the title property for tab1 node. Set it to Edit Component.

  3. With the CRX Explorer, create an items node under the tab1 node:

  4. With the CRX Explorer, create the listroot node under the items node:

  5. Add properties for the listroot node as follows:

Note

The previous procedure uses the default dialog structure.

It is possible to create dialogs (such as those seen in Geometrixx) by manually creating and configuring the individual nodes.

Including List Children in the Contentpage Component

In order to include the listchildren component in your contentpage component, proceed as follows:

  1. In CRXDE, open the file left.jsp under /apps/mygeometrixx/components/contentpage and replace:

    <div>newslist</div>

    with:

    <cq:include path="newslist" resourceType="mygeometrixx/components/listchildren" />

  2. Save the changes.

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.

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

  2. Double-click your component to open the edit dialog:

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

Creating the Logo Component

In this section you will create the component which displays the logo, with underlying link to the homepage of the example website mygeometrixx. The logo image and the home link can be configured globally (same for every page of the website). You will create a design mode dialog to provide the image and the link path. The logo component will be placed on the upper left side of all pages in the website.

It will look as follows:

Website_logo

Creating the Logo Component

To create the logo component, follow the steps:

  1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

  2. In the wizard dialog enter:

    • Label: logo.

    • Title: My Logo Component.

    • Description: This is My Logo Component.

    • Click Finish.

Creating the Logo Script

This section describes how to create the script to display the logo image with a link to the homepage.

Creating the Logo Design Dialog

In this section, you will create the design dialog for your logo component.

  1. In CRXDE, under the node /apps/mygeometrixx/components/logo, create a new dialog with:

    • Name: design_dialog.

    • Title: Logo (Design).

    • Properties as follows:

  2. For the node tab1 set the title property to General.

  3. Under the node tab1 create a node items (cq:WidgetCollection).

  4. Under the node design_dialog/i/items/tab1/items create a new node absParent (nt:unstructured) and set the following properties: 
  5. Under the node design_dialog/i/items/tab1/items create a new node margin (nt:unstructured) and set the following properties:

  6. Under the node design_dialog/items/items create a img node (cq:Widget) and set the following properties:

Including Logo in the Contentpage Component

In order to include the logo in your contentpage component, proceed as follows:

  1. In CRXDE, open the file left.jsp under /apps/mygeometrixx/components/contentpage and replace:

    <div>logo</div>

    with:

    <cq:include path="logo" resourceType="mygeometrixx/components/logo" />

  2. Save the changes.

  3. In your browser, reload the Products page. The logo looks as follows, though currently it only shows the underlying link:

Setting the Logo Image in a Page

This section describes how to set an image as your logo using the design mode dialog.

  1. In your browser, switch to design mode.

  2. In the Design of logo bar, click Edit to use the dialog to edit the settings for the logo component:

  3. In the dialog select the Image tab. Upload your image. Click OK. The logo looks as follows and is activated as a link:

Including the Breadcrumb Component

In this section, you will include the breadcrumb (trail) component, which is one of the foundation components.

  1. In CRXDE, browse to /apps/mygeometrixx/components/contentpage, open the file center.jsp and replace:<div>trail</div> with: <cq:include path="trail" resourceType="foundation/components/breadcrumb" />

  2. Save the changes.

  3. In your browser, reload the Products 1 page. The trail component looks as follows:

    Note: You have the possibility to define the Parent Level in design mode.

Including the Title Component

In this section, you will include the title component, which is one of the foundation components.

  1. In CRXDE, browse to /apps/mygeometrixx/components/contentpage, open the file center.jsp and replace:<div>title</div>with: <cq:include path="title" resourceType="foundation/components/title" />

  2. Save the changes.

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

    Note: You have the possibility to set a different Title and the Type / Size in edit mode.

Including the Paragraph System Component

The paragraph system (parsys) is a significant part of a website as it manages a list of paragraphs. It is used to structure the content parts on a website.

In this section, you will include the parsys component (one of the foundation components) in your contentpage component.

  1. In CRXDE, browse to /apps/mygeometrixx/components/contentpage, open the file center.jsp and replace:<div>parsys</div>with: <cq:include path="par" resourceType="foundation/components/parsys" />

  2. Save the changes.

  3. In your browser, refresh the Products page. It now has the parsys component, which is seen as follows:

Creating the Image Component

In this section you will create a component which displays images in the main paragraph system of the example website mygeometrixx. You will create a dialog enabling you to specify the image and other properties (title, description, size) when in edit mode. These will be stored in the paragraph resource. Users will have the possibility to crop, map and rotate the image.

Creating the Image Component

To create the image component, follow the steps:

  1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

  2. In the wizard dialog enter:

    • Label: image.

    • Title: My Image Component.

    • Description: This is My Image Component.

    • Group: MyGeometrixx.

    • Click Next.

    • Allowed Parents: */parsys.
    • Click Finish.

Creating the Image Script

Creating the Image Rendering Script

 This section describes how to create the script that renders the image:

Creating the Image Dialog

This section describes how to create the dialog for edit mode, so that the image and related properties (title, description, size) can be stored in the paragraph resource

You will copy the dialog from the foundation image component:

  1. In CRXDE, right-click the node /libs/foundation/components/image/dialog and select Copy.

  2. Right-click the node /apps/mygeometrixx/components/image and click Paste.

  3. Your dialog in /apps/mygeometrixx/components/image looks as follows:

Creating the Image cq:editConfig Node

In this section, you will create the cq:editConfig node structure. It enables you to drag assets from the Content Finder into your image component.

  1. Using the CRX Explorer, under the node /apps/mygeometrixx/components/image, create a new node as follows:

    • Name: cq:editConfig.

    • Type: cq:EditConfig.

  2. Under the node cq:editConfig, create a new node as follows:

    • Name: cq:dropTargets.

    • Type: cq:DropTargetConfig.

  3. Under the node cq:dropTargets, create a new node as follows:

    • Name: image.

    • Type: nt:unstructured.

  4. In CRXDE set the properties as follows:

Adding the icon

In this section, you will add the icon to appear beside the image component when it is listed in Sidekick:

  1. In CRXDE, right-click the file /libs/foundation/components/image/icon.png and select Copy.

  2. Right-click the node /apps/mygeometrixx/components/image and click Paste

Viewing Image in a Page

In this section, you will view the Products page and add your image component to the paragraph system.

  1. In your browser, reload the Products page.

  2. In the Sidekick, click the design mode icon.

  3. Click the Edit button to edit the design dialog of par.

  4. In the dialog, a list of Allowed Components is shown; check My Image Component and click OK.

  5. Return to edit mode.

  6. Double-click the parsys frame (on Drag components or assets here). The Insert New Component and Sidekick selectors look as follows:

The Text-Image Component

In this section you will create a component (textimage) which displays text and images in the main paragraph system of the example website mygeometrixx.

You will create a dialog for edit mode that enables you to specify the text and image, together with certain display properties (title, description, size) that are stored in the paragraph resource. Users will have the possibility to crop, map and rotate the image.

Creating the Text-Image Component

To create the textimage component, follow the steps:

  1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

  2. In the wizard dialog enter:

    • Label: textimage.

    • Title: My Text-Image Component.

    • Description: This is My Text-Image Component.

    • Super Resource Type: apps/mygeometrixx/components/image.

    • Group: MyGeometrixx.

    • Click Next.

    • As Allowed Parents, type */parsys.

    • Click Finish.

Creating the Text-Image Script

 This section describes how to create the textimage script:

Creating the Text-Image Dialog

This section describes how to create the edit mode dialog that will enable you to specify the text, image and display properties (title, description, size) to be stored in the paragraph resource.

You will copy the dialog from the corresponding foundation textimage component:

  1. In CRX Explorer, right-click the node /libs/foundation/components/textimage/dialog and select Copy.

  2. In the dialog, navigate to the node /apps/mygeometrixx/components/textimage and click Open. Click OK.

  3. The structure of your dialog in /apps/mygeometrixx/components/textimage looks as follows:

Creating the Text-Image cq:editConfig Node

In this section, you will create the cq:editConfig node structure. It enables you to drag assets from the Content Finder into the textimage component.

You will copy the cq:editConfig node from the foundation textimage component.

  1. In CRX Explorer, right-click the node /libs/foundation/components/textimage/cq:editConfig and select Copy.

  2. In the dialog, navigate to the node /apps/mygeometrixx/components/textimage and click Open. Click OK.

  3. The structure under /apps/mygeometrixx/components/textimage looks as follows:

  4. Select the node /apps/mygeometrixx/components/textimage/cq:editConfig/cq:dropTargets/image/parameters/image and set the Value of the sling:resourceType property to mygeometrixx/components/image. Save the change.

Adding the Icon

In this section, you will add the icon which appears in the Sidekick beside the textimage component :

  1. In CRX Explorer, right-click the file /libs/foundation/components/textimage/icon.png and select Copy.

  2. Navigate to the node /apps/mygeometrixx/components/textimage and click Open. Click OK.

Adding Text-Image to the Paragraph System

In this section, you will view the Products page and add your textimage component to the paragraph system.

  1. In your browser, reload the Products page.

  2. In the Sidekick, click the design mode icon.

  3. Click the Edit button to edit the design dialog of par.

  4. In the dialog, a list of Allowed Components is shown; check My Text-Image Component and click OK.

  5. Switch to edit mode.

  6. Double-click the parsys frame. The textimage component is now listed:

Including the Toolbar Component

In this section, you include the toolbar component, which is one of the foundation components.

You have several options, in edit mode as well as design mode.

  1. In CRXDE, navigate to /apps/mygeometrixx/components/contentpage, open the file body.jsp and replace:<div class="toolbar">toolbar</div>with: <cq:include path="toolbar" resourceType="foundation/components/toolbar"/><br>

  2. Save the changes.

  3. In the Websites tab, select the English page under My Geometrixx. Create the Toolbar page under English. Using the Page Properties... in Sidekick set Hide in Navigation (in Sidekick).

  4. Under Toolbar, create following pages:

    • Contacts

    • Feedback

    • Login

    • Search

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

Creating the Search Component

In this section you will 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).

Your search input box will look as follows in the English page:

Website_search

Your search input box will look as follows in the Search page:

Website_search03

Creating the Search Component

To create the search component:

  1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

  2. In the wizard dialog:

    • Label: search.

    • Title: My Search Component.

    • Description: This is My Search Component.

    • Group: MyGeometrixx.

    • Click Next.

    • As Allowed Parents, type */parsys.

    • Click Finish.

  3. In CRX Explorer, copy the node /libs/foundation/components/search/dialog to under /apps/mygeometrixx/components/search.

  4. In CRX Explorer, copy the node /libs/foundation/components/search/i18n to under /apps/mygeometrixx/components/search (for internationalization).

  5. In CRX Explorer, copy the node /libs/foundation/components/search/resources to under /apps/mygeometrixx/components/search (for the document format icons).

Creating the Search Script

 This section describes how to create the search script:

  1. In CRXDE, navigate to /apps/mygeometrixx/components/search and open the file search.jsp.

  2. Copy the following code to search.jsp:

  3. Save the changes.

Including a Search Box in the Contentpage Component

To include a search input box in the left section of your contentpage, proceed as follows:

Including the Search Component in the Search Page

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

  1. In your browser, open the Search page.

  2. In the Sidekick, click the design mode icon.

  3. Click the Edit button to edit the Design of par.

  4. In the dialog, a list of the Allowed Components is shown; check My Search Component and click OK.

  5. Return to edit mode.

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

  7. 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 will be shown in a similar format as the following:

Including the Iparsys Component

In this section, you include the iparsys component, which is one of the foundation components.

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

  1. In CRXDE, navigate to /apps/mygeometrixx/components/contentpage, open the file right.jsp and replace:<div>iparsys</div> with: <cq:include path="rightpar" resourceType="foundation/components/iparsys" />

  2. Save the changes.

  3. In your browser, reload the Products page. The included iparsys component looks as follows:

  4. The whole page looks as follows:


Any questions?
Find tips, tricks, and solutions to common issues in our support community:
https://helpx.adobe.com/marketing-cloud/experience-manager.html
​