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
- Structure
- 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
Posts
