Multifield is a very important widget in CQ5. The biggest utility of it being the author can add many as he wants, even reorder with a very simple interface.This makes it an ideal choice for scenarios where there is no fixed count for how many records a component can have(no of items in a list for example). The multifield that comes out of the box is limited by the fact that it can handle a single xtype at a given time. This problem how ever is over come by creating a custom composite xtype that can hold multiple xtypes within it.The fields are converted into a string separated by a delimiter pattern. With this hack you can use the multifield that comes out of the box for a wider range of applications as it'd be still be dealing with a single xtype. You can check out these links for how a custom multifield can be created

http://cq.shishank.info/2011/12/19/multifield-with-custom-xtype/
http://forums.adobe.com/message/4332833

Something that would be even more better would be having a custom multifield in a multifield.My friend Hariprasad Marigowda came up with this brilliant solution.The approach involved in pulling off this is explained below:

Enabling authors to add images to pages is a very fundamental requirement of a CMS. CQ5 lets you do this in two ways. You can add images through the rich text editor by simply dragging the images onto it. There is also an image component that comes out of the box. This works for a lot of things , but there is always a situation that requires customization(a slider for example).

Lets take a look at creating an image component.

This post is a sequel to the post Creating cq5 component with a dialog (configurable component) - Part 1

Now that we have our dialog ready lets see how the data can be fetched in our jsp and displayed.

The data configured by the author are stored as properties of a node. Since cq5 is built on sling it treats everything as a content and content has resource. So instead of using the node,we can use resource to fetch the property. The properties are stored as a value map. We'll have to fetch the property from the value map.

CQ5 exposes valueMap of the components' resource as "properties" object (it is done in one of the files included in global.jsp . Make it a point to include global.jsp in every jsp). The valueMap has get() method which will return the value.

The steps in this tutorial will require knowledge of creating a component in cq5. If you do not know how its done , check out my post "creating cq5 component " .

Let us create a Blog post component. The component will enable the content authors to insert a blog post onto a page. The blog will have three parts viz title, short description and blog body.

step 1: In CRXDE lite navigate to apps/yourproject/components folder. Right click on the component folder and create a component with the label blogPost.

step 2: Right click on the component and select create dialog option. Give the name and title as dialog and dialog. This convention of naming it dialog is essential for it to work.

This post is continuation of my previous post : Creating a CQ5 component

After you have created a component, the next thing to do is to configure the component to be used with a parsys. Once configured the component will appear in the side kick. The content authors can then drag the component onto the page.

• If your page doesn't have a parsys, go to the page component and add this line in its body

 <cq:include path="par" resourceType="/libs/foundation/components/parsys"/>

[value of path can be anything, its the path under which all the nodes for the components dropped into the parsys will be stored]

 A component is a re-usable 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 to 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 depends 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 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 [for how to create a page check out my post ]. 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 class 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 few more steps before the author can find it in the 'Side kick' and use it. I'll be taking up these configurations in the next post.