Introduction to Liferay Structures and Templates

Introduction:

Structures and Templates is elegant feature in liferay web content management system. When we design web content some time we need same type of design in several places. Whenever we need such type of design and data multiple times in the web content then we will make that design as template.

Whenever we need in web content simple we will select template and we will fill with data then we can see new web content with fresh data.

Liferay have implemented this concept with two key points

1. Structure
2. Template

Structure:

Structure is simple xml data source which will provide dynamic data to template. This will decide what kind of data you need and what is the data design.

Let us assume I want to display image, when I want display image I need image source, width and height. So here our structure will provide required data to display image. Each time we will fill dynamic data in this structure.

Here structure is like skeleton of our body. Here skeleton have skull, chest and so on.

Note:

 Here skeleton structure may be same but for each human there is different appearance we can get different appearance based on the things we filled in skeleton.

Template:

Template will decide look and feel for structure. We can append multiple look and feel design for one structure.

We can develop template in different ways and we can use Velocity and XSLT.

Note:

Simple assume each human appearance is different even though every human skeleton structure is same.

In single word we can say structure will decide what kind of data we are going to use and template will decide look and feel for data.

Well we understand what is structure and template.

Liferay WCM management system has User Interface to create structures and templates so that we can use that to design web content with structures and templates.

When we design structure we have many options to input the data like we have text box, text, document and media and image.

We can say structure is simple xml tags which consist of predefined tags according to DTD.

Example for simple structure

<?xml version="1.0"?> <root> <dynamic-element name="image" type="document_library" index-type="" repeatable="false"/> <dynamic-element name="width" type="text" index-type="" repeatable="false"/> <dynamic-element name="height" type="text" index-type="" repeatable="false"/> </root>

Structure View in Liferay Web content Portlet

Note:

When you see the type it will have different types (document_library,text ..)

Use Structure data in Velocity Template

<h1> simple WCM with Sturcures and Templates</h1> <img src="$image.getData()" width="$width.getData()" height="$height.getData()"/>

Note:

Here we use getData() method on each element name to get the input data for element and in the velocity each variable start with $ symbol.

If the structure have following element <?xml version="1.0"?> <root> <dynamic-element name="title" type="text" index-type="" repeatable="false"/> </root> Then get the title value in  templates as follows <h1>$title.getData() </h1>

Important points:

When we design structure we have different types of elements like text, document-media, image and many

Example:

 We have option called element repeatable when we enable repeatable then we can use same element for multiples times

Example:

Assume I am going to design slide show then I may need multiple images for sidle show then I will use repeatable option for element.

In the structure we can use different levels for elements for parent element means we can define child elements.

Example:

Assume I want display image then image have some properties like width and height then we can design structure so that I will use width and height properties as child element to the image element i.e.  we can say parent element

The following is example structure with child elements

Xml Structure code for Parent and Childs

<?xml version="1.0"?> <root> <dynamic-element name="image" type="image" index-type="" repeatable="false">  <dynamic-element name="height" type="text" index-type=""   repeatable="false"></dynamic-element>  <dynamic-element name="width" type="text" index-type="" repeatable="false"/> </dynamic-element> </root>

Access data in Velocity (VM) Template

Get child element data Get root element data $image.getData() Get image element child element $image.height.getData() $image.width.getData() The final template to display Image <img src="$image.getData()" width="$image.height.getData()" height="$image. width.getData()" alt="No Image"/>

We already know each element have repeatable option then we can add multiple data example assume I want display multiple images 

Repeatable feature

In the above image element will be repeatable so that we can add multiple images and when we use repeatable for root tag then subsequent Childs also repeated.

The following is Structure XML

<?xml version="1.0"?> <root> <dynamic-element name="image" type="image" index-type="" repeatable="true">                         <dynamic-element name="height" type="text" index-type="" repeatable="false"></dynamic-element>                         <dynamic-element name="width" type="text" index-type="" repeatable="false"/> </dynamic-element> </root>

When the element have repeatable feature then we will use some methods in Velocity template to access structure data

The following method  give all image elements means it collected all same level repeatable elements $image.getSiblings() Iterate All image elements #foreach($currentElement in $image.getSiblings()) ##write code here #end

The following is complete Velocity Templates to display all Images

#foreach($currentImage in $image.getSiblings()) <img src="$currentImage.getData()" width="$currentImage.height.getData()" height="$currentImage. width.getData()" alt="No Image"/> #end

When we design velocity template we can use all HTML tags and css styles to make better look and feel

The following is example

<style> #image-container{ padding-left:10px; font-size: 12px; font-family: "Myriad Pro","Verdana","Arial","sans-serif"; font-size: small; color: gray; } #image-container list{ list-style:none; border:1px solid red; } </style> <div "image- container " > <ul> #foreach($currentImage in $image.getSiblings()) <li><img src="$currentImage.getData()" width="$ currentImage.height.getData()" height="$ currentImage. width.getData()" alt="No Image"/> </li> #end </ul> <div>

The final out line

Access Structure data for elements $elementName.getData() Access Child element of  parent element $parentElementName.ChidElementName.getData() Get All siblings like when we use repeatable to element $elementName.getSiblings() Iterate Elements #foreach($currentElement in $elementName.getSiblings()) ##access data of current data $currentImage.getData() ##access data of child element $ currentElement.childElementName.getData() #end

Use HTML and CSS in Templates

We can also use CSS styles in velocity templates so that we can give better look and feel for content.

We can use all HTML tags in velocity templates

Example Velocity Templates that contains CSS styles and HTML

<style> #image-container{ padding-left:10px; font-size: 12px; font-family: "Myriad Pro","Verdana","Arial","sans-serif"; font-size: small; color: gray; } #image-container list{ list-style:none; border:1px solid red; } </style> <div "image- container " > <ul> #foreach($currentImage in $docdowloadlinks.getSiblings()) <li><img src="$currentImage.getData()" width="$currentImage.height.getData()" height="$ currentImage. width.getData()" alt="No Image"/> </li> #end </ul> <div>

We can use styles in following ways

Tag level CSS as follows

<li><img src="$currentImage.getData()" width="$currentImage.height.getData()" height="$currentImage. width.getData()" alt="No Image" style=”border:1px solid red;”/>

Use style tag in Template

<style> ##write your styles here </style> <div "image- container " > <ul> #foreach($currentImage in $docdowloadlinks.getSiblings()) <li><img src="$currentImage.getData()" width="$currentImage.height.getData()" height="$currentImage.width.getData()" alt="No Image"/> </li> #end </ul> <div>

Use CSS link tag to load CSS

<link rel="stylesheet" type="text/css" href="/themeName/html/css/theme.css">

You can also directly use Liferay Theme level CSS classes

<div class=”custom-div”>$title.getData() </div> Note: We generally  define custom-div class CSS in theme custom.css file Example: . custom-div{ color:red; border:1px solid red; }

Use Java Script in Templates

We can also use java script in velocity template to perform some action or events/effects to the data.

Liferay have inbuilt Java Script library i.e. AUI so we can directly use. Simple we will use AUI use method to load required modules so that we can write java script

Whenever we write java script we will use <script> tag to place java script in templates.

Example As follows

Assume I want make alert message when I click on image

<script> AUI().use('aui-base',function(A){ A.one("#myTemplateImage").on('click',function(){  alert("Hi You have clicked on Template Image"); }); }); </script> <div "image- container " > <img src="$image.getData()" width="$image.height.getData()" height="$image. width.getData()" alt="No Image" id=”myTemplateImage”/> <div>

We can also Load script form script src tag as follows

Assume I want use JQuery Script in Velocity Template

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){   $("#myTemplateImage ").click(function(){   alert("Hi You have clicked on Template Image");   }); }); </script> <div "image- container " > <img src="$image.getData()" width="$image.height.getData()" height="$image. width.getData()" alt="No Image" id=”myTemplateImage”/> <div>

Use Structures and Templates in Liferay WCM

Login as Admin and go to control panel there we can web content link in lift side panel

Create Structure

Click Structure Button and give name and description

In the structure screen you can find launch editor option select that and place following xml in editor then update.

<?xml version="1.0"?> <root> <dynamic-element name="image" type="image" index-type="" repeatable="true">                         <dynamic-element name="height" type="text" index-type="" repeatable="false"></dynamic-element>                         <dynamic-element name="width" type="text" index-type="" repeatable="false"/> </dynamic-element> </root>

Once you add above xml then save the structure using save button

Create Velocity Template For Structure

Now create Template using add template button enterer template name and description.

Now select required Structure using Select structure button

Now click on launch editor button and place the following velocity code in editor then click on update finally save the template.

<div "image- container " > <ul> #foreach($currentImage in $docdowloadlinks.getSiblings()) <li><img src="$currentImage.getData()" width="$currentImage.height.getData()" height="$currentImage. width.getData()" alt="No Image"/> </li> #end </ul> <div>

Create Web content Using Structures and Templates

Now create new web content for this click on Web content tag and select add button there you can see your template then select template

Once you select template then it will ask web content name and then based on your structure you need fill data in input fields finally save web content.

Using Web content

Now we have done all we can use that web content on web content display portlet to display images.

Note:

Whenever we need same template with different data or images then simple create another web content article so that you can see new web content with different images.

Author

Meera Prince

Liferay Top Contributor Award Winner

http://www.liferaysavvy.com