Creating a CQ5 Component

A component is a reusable block of code. It can be anything from a page to an image. The best part about cq5 is that it will let the content manager drag and drop the components into the page and configure the content easily with the help of dialogs.

I'll be showing how to create a 'Hello world' component. All this simple component will do is display hello world where ever the author uses it.

In CRXDE lite, traverse to the components folder of your project, right-click on it and choose the 'create component' option. Give the component a name, label, and a group name. Leave the other fields blank for now[for adapting an existing component check out this link].

The name is what the authors (non-technical business users) will see. The label is for the developer (similar to a variable name, it cannot have spaces and has some rules). On hitting OK you will see the component in the components folder.

The component will have a jsp file that has the exact name as your label. The naming convention matters as sling resolution depend on it. The jsp with the same name as the component will be selected by the sling engine to render the component.

You'll see that the jsp will have another jsp namely 'global.jsp' included in it. This is very helpful because the global.jsp has code that exposes a lot of objects and tag libraries. Make it a point to include global.jsp in all your jsps.[for more on global.jsp check out this link]

Now just type in the magic words of computer programming in the component's jsp, 'Hello World'. Now the component is ready. It'll take some more steps to use it. Components can be used in two ways

1) Dropped by the author onto a page
2)Included programmatically

1. For the author to be able to drop it onto the page there must be a container. The container in cq is called 'parsys' short for paragraph system[/libs/foundation/components/parsys]. So the page must have this component included and this is done programmatically in the jsp that renders the page. Follow the steps below if your page doesn't have one.

2. Components are programmatically added with the help of <cq:include> tag. Go to the jsp of the page render-er of your template and write

<cq:include path="hello" resourceType="/apps/yourproject/components/helloWorld"/>

path: is the location under the page's jcr node where a node for the component will be created
resourceType: is the path of the component that has to be created

cq5 creates a div around the component with the class the same as the path you have given.

If you have tried option 2, you must be seeing 'Hello World' on the page. Option 1 needs a few more steps before the author can find it in the 'Sidekick' and use it. I'll be taking up these configurations in the next post.