why do we have multiple jsp's for a single component in CQ5?

Question

I am new to CQ5. While learning its concepts i came to know that CQ5 uses Sling framework for request processing and resolves scripts based on best match. I have seen few components( most of them are page or top level components) in CQ5 which are having more than one jsp under a single component(e.g page component have page.jsp, body.jsp, header.jsp similary redirect component have redirect.jsp, body.jsp, content.jsp) . So i wanted to ask in what scenarios, we will be having multiple jsp's and which script will be resolved by sling to display the content?

Answer 1

The possibility to have more than one jsp under a component has a bit more to do with sling than with CQ (although cq also provides some extensions on the framework). The reason for having more jsp's in a top level component (like a page component for example) is often to catch the cases of an include happening on a lower level somewhere (so the definition of the included file is there, but the actual file is not present in the component).

In my opinion there are 3 main reasons for having multiple jsp's under a single component (no matter what level) and all of those reasons can be applied to the same component at once

1. Breaking up the component in smaller (more maintainable) pieces
2. Overriding rendering
3. Using the power of sling selectors

Scenario 1: Breaking up the component in smaller (more maintainable) pieces

As the title states here, we can use multiple jsp's in a component to split up the rendering of that component into seperate sections which are easier to maintain and easier to override or a combination of both. The "both" case is what is happening in foundation page component. But check Scenario 2 for details on that.

The rendering of a standard page starts with that cq page having a template which in its turn specifies the component to use for rendering. So skipping the template part and going directly to the actual foundation page component. Rendering for the page start's in page.jsp. In it's broken up further by including a "head.jsp" and "body.jsp". They in turn split it up even further. This allows you to override specific parts of the page component in a child component (see scenario 2).

Scenario 2: Overriding rendering

Say you made your own base page component (common practise) which inherits from the foundation page component (through sling:resourceSuperType property), and you are only interested in spitting out a specific html structure in the body. In this case you just create a body.jsp file inside that "base page" component (nothing else). This actually overrides the rendering for the body (in the foundation page component), but defaults for everything else (for example head, headlibs) and so on, on the availability of those files in the parent chain somewhere. In our case it will default on the files specified in the foundation page component. The chain will resolve to your base component, then to the foundation page component (as you only have body.jsp in there and no base.jsp). Inside the foundation page component, page.jsp is found which includes body.jsp (which will be the body.jsp defined in base component).

What we do here works on all levels. This concept will also work when inherit from other components than a "page" componente. For example, I've used it to override rendering of the foundation list component where I included a jsp (sling.jsp) which in its turn uses a sling include with a specific selector, and than made components that inherit from that list component and override the sling include selector to something else.

Scenario 3: Using the power of sling selectors

Since sling has the concept of "selectors", sling will go up the sling chain to find the correct component to render the content. Sling will always use the most specific selector to render.

For example say I've created a title component that inherits from the foundation title component. Say I have this structure inside the title component.

title.jsp
h2.jsp
fancy.jsp

It should be obvious that h2 and fancy are actual selectors for the title component

It's a commonly used practise to have multiple jsp's is in combination with selectors. These are used to display basically the same component in a different way.

You could also put that h2.jsp inside your page component. Sling will find it if you set the chain corretly.

There is more to selectors then what I described here. But this is just part that matters to the question.

Answer 2

Typically a component is rendered by one script matching the request, let's call it GET.jsp.

However, inside that script you will only find include calls to other scripts, like body.jsp, header.jsp. This is done so that you can overlay another header.jsp (for instance ) in /apps without overwriting the complete GET.jsp script.