How to create a page in CQ5

By | 08:07 2 comments
Creating a page in CQ5 requires two ingredients, Template and Script to render the template.Let's take a look at how pages are structured in cq5.

↑ Note: There  is no fixed pattern. This is how its generally done


The pages in cq5 are created in a tree structure. This helps in managing multi-language and multi-national websites.'i18n' features of cq5 are very easy to use when the pages are created in a tree structure. All the actual pages are created under the language node.



To create a page you have to pick a template. What the template actually does is specify the sling:ResourceType property for that page. 'sling:ResourceType' property is a sling concept that tells which script is going to render that node [check out this link for more].

Creating the template: On the templates folder of your project [for project structure, hit this link], right click and select create template [in crxde lite]. Give it a title and label and you'll see a field for resource type. Leave it blank for the time being and then fill in the other fields. Now you have a template, but its still not usable because there is no script to render it.

Creating the rendering script: To create a component that renders the template, go to components/page component of your project. Right click on that folder and select create new component. Give it a title and label. A jsp file ,with the same name as the label you give, will be created by default. While creating the component give the path of the foundation page component as sling:resourceSuperType.

What the sling:resourceSuperType tells is the place of the default script that handles the component. Sling engine will treat that as default and any code in your component's jsp is actually overriding the default script. When the default script has a lot of parts say body, header, footer and so on... to extend only one of them; lets say header for example, give the default script's path as sling:resourceSuperType in your custom component. Then copy the contents of the jsp that is of the same name as the default script component to your component's script. Now create a jsp with same name as the header in your component and write the code that you want.

The sling engine will come to the content node and check the resource type. This will make it use your component to render the content. In the content all it'll find is the default jsp and header jsp but the default jsp has includes to few other jsp's. The sling engine will then use the sling:resourceSuperType property to reach the default component and use the body, footer etc.. present in that component.


A sling node can have multiple scripts to render it; for example a page can be rendered in desktop view, printer friendly view, mobile view and so on. This can be done by creating multiple jsp files inside a component with proper selectors.


In the url, if sling doesn't find any selectors then it will use the jsp that has the same name as the component to render it by default. If there are selectors in the url and they match the ones on the scripts, then the content will be rendered by that script. For rules of url decomposition, hit this link .




2 comments: Leave Your Comments

  1. These are good introductions to CQ5. Thanks.
    I'm brand new in CQ5 (just attended a training course).
    When creating a new page you have the possibility to specify a "design" for the page. It is not clear to me how this works. Do you know more about this ?

    Wim

    ReplyDelete
    Replies
    1. Hi Wim,

      A design is a common storage location for a set of pages. In the design you could add the css for a set of pages or store data that is likely to remain same for a lot of pages like what image to use for header or color scheme for the page. Design dialogs are used to store user configurable data into the design. A page can be assigned a design through the page properties dialog. Check this post for more info http://cq5tutorials.blogspot.com/2014/05/creating-component-with-design-dialog.html .

      Sharath

      Delete