SitemapBlog
Community

 

download jahia

Search in the Documentation:

Creating the content zones

In this part we will present two solutions to create templates, the first by using the built-in Jahia components, and the second by building custom structure components. The choice will depend on the complexity of the mockup we need to integrate.

As previously seen, we will need to define the future content zones. These zones may be declared using the <template:area/> tag. This tag has a mandatory path attribute that will define the name of the list associated with the area.

Using Jahia’s built-in components
If the mockup only contains HTML div tag associated with a class and/or an ID, we will use the List and Area component and the base JSP will only need to contain a single area declaration.

The JSP for the base template will therefore look something like this:

<html>
<head></head>
<body>
<template:area path=”pagecontent”/>
</body>
</html>

[image]All the rest of the integration can now be done using the Studio. First we will activate the pagecontent area:
[image]We then add the header, content and footer lists in the area. These lists will allow us to start working on the layout, thanks to skins, of the various areas. So we first add the header content list:
[image]
Then we define the list’s name:

[image]

In the layout tab, we select the custom div skin:

[image]
We set the desired ID on the div, in this case « header »:

[image]

And we then drop an area in the created list:

[image]

We then repeat the same operation for the content and footer lists:

[image]

The basis of our mockup is now properly integrated.

Directly defining the areas in the JSP

It is also possible to define the principal areas directly in the JSP instead of creating them in the Studio, as in the following example:

<html>
<head></head>
<body>
<div id=”header”><template:area path=”header”/></div>
<div id=”content”><template:area path=”pagecontent”/></div>
<div id=”footer”><template:area path=”footer”/></div>
</body>
</html>


[image]

It is also possible to combine both methods to define zones that must filled directly in the base template (declared in the JSP) and some that will be declared using the Studio that will be filled in the sub-templates.

In the following screenshots, areas were defined in the JSP, activated and filled in the base template (menus for example):

[image]

Defining layout objects

In the case of a complex mockup or when using rendering frameworks (such as Grid 960 or Blueprint), it might be interesting to build a component associated with multiple JSP views to define the parameters of the areas to be displayed. This solution allows centralization of the layout while retaining flexibility in the Studio. We provide here an example of the custom row component that uses the Grid 960 framework:

[image]

The two last parameters are the ones we need to fill. The size of row parameter will define the number of areas that will be created by the component, while the custom name for the column will provide the name for each area. This last property is called customColumn.

In the JSP view for the custom row component, you can see that we actually iterate on the customColumn names and create the areas with the proper corresponding name:

<jsp:useBean id="colMap" class="java.util.LinkedHashMap"/>
<jcr:nodeProperty node="${currentNode}" name="customColumn" var="customColumn"/>
<c:forTokens items="${customColumn.string}" delims="," varStatus="vs" var="col">
<c:set target="${colMap}" property="col${vs.count}" value="${col}"/>
</c:forTokens>
<c:forEach items="${colMap}" var="col" varStatus="count">
<template:area path="${currentNode.name}-${col.key}"/>
</c:forEach>


Once the layout structure of our base is completed, we can then insert all the common elements for a web site such as the menu, the logo, a footer, and so on.

The last step will involve defining a specific layout for the home and other pages templates (the simple template has been automatically created to provide by default a different layout than the home page template which will usually be used only once on the home page of a specific web site).

All the areas that are not filled in the base template will be accessible and may be activated in any sub-template. It is then possible to use the layout components to populate the templates with structural or even content objects.

It is, for example, possible for an object to have two views, a default one and an inner one as in the following example:

[testTpl:structure] >jnt:content, jmix:layoutComponentContent
We can then created the associated views:

[image]

The component can then be used in both templates (home and simple) as illustrated here:

[image]

Upon installation in the page, we can change the view by alterning the component’s properties:

[image]

We therefore achieve the goal of having two different HTML renderings for each of the templates:


[image]

[image]

In order to retrieve all the modifications performed in the Studio, the next step is to export (from the Export menu, choose export and XML export) and copy the generated XML into the import directory using a repository.xml file name. So first we perform the export:

[image]

The generated XML will look something like this:

[image]

We finally save the generated XML using the repository.xml file name into the module’s import directory:

[image]
That’s it, we have completed the integration of our mockup, using different integration techniques. From here, you can imagine all types of more or less complex layout, components. Jahia is a very modular platform and we look forward to see what you can think up.

As you may guess there is a lot more we couldn’t cover in this integration guide, as the platform is very rich. We invite you to check the references section that points to further reading, or to go to our www.jahia.com website for more documentation, examples and post messages in our community forum (which by the way is implemented as a Jahia module).