Liferay Master: Article,Structures and Templates

What is Web Content Management (WCM)?

Web Content Management is a system which allows non-technical users to publish content into the website without having advanced knowledge of web technology or programming of any sort. Liferay WCM empowers you to publish your content with a simple point and click interface and it helps you to keep your site content fresh. You’ll find yourself easily creating, editing and publishing content within just a few minutes of being exposed to its features.

For creating complex presentation layer templates you require developer skills, Once these templates have been deployed into the portal, your non-technical users can manage content using these templates as easily as they would manage content.

What is Article or Web Content?

Web content is the textual, visual or aural content that is encountered as part of the user experience on websites. It may include text, images, sounds, videos and animations. Web content management (WCM) in Liferay is used to create, manage, store and deploy content on Web pages. In Liferay we can create two types of web-contents, they are

1.Static Web-Content

2.Dynamic Web-Content

We can create Static Web-Content using Web-Content portlet. In static web-content we directly paste our code/data into the Ck-editor.

We can Create Dynamic web-content by using structures and templates.

What is 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.

a. Example Scenario To Understand what is Structure:

Let us assume that we want to display image in a page with proper width and height, to display image we need image URL, width and height. So here structure will provide required data like image URL, width and height to display image. 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.

What is Template?

Template provides look and feel for the structure (data). For one structure we can apply different templates. For look and feel we can use HTML,CSS and JQuery.

a. Example Scenario To Understand what is Template:

In template we are telling how to display the data, in the above Scenario, using structure we are just displaying the image by taking the data like image URL, height, width. By using template we will provide look and feel for the image like alignment of the image, etc.

Example:

Each human look (template) different even though every human skeleton (structure) is same.

How to create Structure?

Before we are creating structures we need specify what type of data we are passing to the template. For example if i want to display image on to the page, first i need to choose type for image as image or image_gallery. If I choose “image” as type it allows to upload the image from the local system. If I choose type as “image_gallery” it allows us to choose image from image gallery. For taking width and height we will choose type as “text”. When we are designing a structure we have several options to input the data like we have text box, text, document and media and image.

To create structure, first we have to go to control panel, next we have to choose web content then in the right hand side tab we have to choose structures, then we have to give the structure name and id for structure(auto generate), now we have to mention the structure for our web content in the following 2 ways:

1. Directly adding structure code in launch editor.

Example: copy the below code and click on Launch Editor and paste the code into the editor and click on save button, now structure is ready.

<dynamic-element name=”mywidth” type=”text” index-type=”” repeatable=”false”/>

<dynamic-element name=”myheight” type=”text” index-type=”” repeatable=”false”/>
</root>

2. In XmlSchema definition choose add row, then specify the name and type, is the data is repeatable or not etc. We can say structure is simple XML tags which consist of predefined tags according to DTD.

How to create Template?

Once structure is created, Now in the same tab we can see template, now click on the template tab, then give the name of the template and then choose the structure you created previously, then click on Launch on Editor, Now access the structure data in template.

How to retrieve(access)structure data in templates?

To access the Structure data in the template, first we have to know the names for each type, for example in the above structure we gave name “myimage” for the type “image_gallery” and name is “mywidth” for type “text”, similarly name is “myheight” for type “text”.

To access the structure data in the template we will use the velocity Markup Language. Velocity language is used to separate the presentation logic from business logic. Here we use $

Symbol to access the structure data in the template.

Syntax:

$elementName.getData()

Template:

<h1> simple WCM with Sturcures and Templates</h1>

<img src="$myimage.getData()"

width="$mywidth.getData()" height="$myheight.getData()"/>

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

Technical Stuff required for Structures and Templates:

1. Types (data) in Structure:

a. Image_Gallery

b. Image

c. Text

d. Text Box

e. Link To Page

f. Text Area

f. Document Library etc.

ü To access image from image gallery we use type as image_gallery.

ü To access image from desktop we use type as image.

ü To access document from document library we use type as document_library.

ü To access text, we have different options we can choose any of these types Text,Text Box, Text Area.

ü To add the hyper links to the text we use this

How to retrieve the Structure related data/information from the template?

In Structure:

<dynamic-element name=”main-text” type=”text_area”>

In template:

In template we have different methods to get all the details of the structure.

$main-text.getName() - The name “main-text”

$main-text.getData() - The data in the article for main-text

$main-text.getType() - The type “text-area”

$main-text.getChildren() - A collection with two nodes (sub-image and sub-text) that can be used in
the #foreach clause

$main-text.getSiblings() - A collection of elements with the name “main-text”. This will only return more than one element if this element is repeatable.

Repeatable Data example:

In structures if we mark as repeatable as “true”, we can use that element multiple times, for example if we want display multiple images on to the page one by one, then take the structure like this, here allimages is the top most element and the oneimage,width, height are the child elements. If we check repeatable as true for the “allimages” then every element inside in that is repeatable. By using foreach we can retrieve the data one by one.

Structure:

<root>

<dynamic-element name='allimages' type='text' index-type='' repeatable='true'>

<dynamic-element name='oneimage' type='image_gallery' index-type='' repeatable='false'> </dynamic-element>

<dynamic-element name='width' type='text' index-type='' repeatable='false'> </dynamic-element>

<dynamic-element name='height' type='text' index-type='' repeatable='false'></dynamic-element>

</dynamic-element>

</root>

Template:

ü To get siblings we can use for each.

ü Syntax is as follows:

#foreach($currentElement in $elementName.getSiblings())

##write code here

#end

ü here the currentElement is any name and the elementName is on which element you want siblings.

ü In templates we can get the siblings like this:

#foreach($cet in $allimages.getSiblings())

<img src="$cet.oneimage.getData()"

height="$cet.height.getData()"

width="$cet.width.getData()"> </img>

<br>

#end

As we know that for one structure we can apply multiple templates. Template main purpose is how we are displaying the data on to the page, in templates we can use Html,Css,jQuery for better design.

How we can add CSS in Templates?

When we design velocity template we can use all HTML tags and css styles to make better look and feel. To include CSS Simply use <style> tag in template and write styles in side <style> tag.

Example:

Inside template:

<style>

Your CSS Code

</style>

#foreach($cet in $allimages.getSiblings())

<img src="$cet.oneimage.getData()"

height="$cet.height.getData()"

width="$cet.width.getData()">

</img> <br>

#end

How to include JQuery in Templates?

We can also use JavaScript 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 JavaScript. Whenever we write JavaScript we will use <script> tag to place JavaScript in templates.

Example:

$(document).ready(function(){

$("#myTemplateImage ").click(function(){

alert("Hi You have clicked on Template Image");

});

</script>

<div>

How to include AUI in Templates?

Example:

AUI().use('aui-base',function(A){

A.one("#myTemplateImage").on('click',function(){

alert("Hi You have clicked on Template Image");

});

</script>

</div>

When do we opt for Structures and Templates?

Business Scenario Example of Image slide show:

For example i want to display image slide show using jquery in Liferay, for this I can create static web content or dynamic web content.

a. creating image slide show using static web content:

In Liferay any web content is created using web content portlet,For creating static web content, these are the steps we have to follow.

1. Login as test@liferay.com

2. Create a page “imagslide”,for this goto docbar click on Add--->Page, give page name “imagslide”.

3. Go to Add in the docbar then click on Web Content Display, then it will add this web content display to the page, now click on Add web content icon in the web content display. It will show CK Editor.

4. Click on the Source button in the CK Editor, now copy the following code:

</script><script>

$(document).ready(function(){

$("#slideshow > div:gt(0)").hide();

setInterval(function() {

$('#slideshow > div:first')

.fadeOut(1000)

.next()

.fadeIn(1000)

.end()

.appendTo('#slideshow');

}, 3000);

});

</script>

#slideshow {

margin: 50px auto;

position: relative;

width: 240px;

height: 240px;

padding: 10px;

box-shadow: 0 0 20px rgba(0,0,0,0.4);

}

#slideshow > div {

position: absolute;

top: 10px;

left: 10px;

right: 10px;

bottom: 10px;

}</style>

<div>

</div>

<div>

</div>

<div>

</div>

5. Give the name of the Web content, now click on publish button, then image slide show will start using given images.

Disadvantages of the above static web content:

1. To add images in the slide show, we need to edit the web content every time. For example if we want to add 2 images, first we have to edit the web content and next we will click Source button , then in the source code we will add two more image url's before the last closing </div>

<div>

</div>

<div>

</div>

Now then click on publish button and then refresh the page. If I want to add one more image again we need to edit the web content and place the above code.

2. While editing the web content if we perform any small modifications to the code entire web content will be effected and sometimes Ck Editor will add its own tags to the our code. This affects our code.

3. Editing web content requires some technical knowledge, if we place JQuery, CSS and HTML code in the web content directly, content writer can't understand where he has to add the content.

To overcome above disadvantage Liferay has given one option Structures and Templates, by using structures and templates we can separate the content from the code. Technical developer will write the structures and template and content Writers write the content using structures and templates. Simply structure will decide what kind of data we are going to use and template will decide look and feel for data. One Structure can have many templates.

Here structures means what type of data we are using and template means how we are displaying data (look and feel).

b. Creating Image slide show using structures and template:

1. Creating Structure:

1. Login as test@liferay.com , goto Manage in the docbar then click on control panel, it will take go to control panel screen, In the left hand side of the control panel click on web content.

2.In the right hand side click on the Structures tab then click on Add Structures tab it will open structures related information, now for Id select check box Auto generate ID, next give Name as “slideview” and Description as “slideview”, now click on Launch Editor button it will open an editor.

3. Remove the existing code in the editor and then paste the below code into it and next click on update button.

<root>

<dynamic-element name='name' type='text' index-type='' repeatable='true'>

<dynamic-element name='image' type='image_gallery' index-type='' repeatable='false'>

</dynamic-element>

</root>

4. Now click on Save button.

Creating Template:

1. Go to control panel select web content now click on Template tab now for ID select Auto Generate check box, next give Name and description as “slideview”.

2. Choose structure with the name “slideview” then click on the Launch Editor button adds the following code into the editor.

</script><script>

$(document).ready(function(){

$("#slideshow > div:gt(0)").hide();

setInterval(function() {

$('#slideshow > div:first')

.fadeOut(1000)

.next()

.fadeIn(1000)

.end()

.appendTo('#slideshow');

}, 3000);

});

</script>

#slideshow {

margin: 50px auto;

position: relative;

width: 277px;

height: 181px;

padding: 10px;

box-shadow: 0 0 20px rgba(0,0,0,0.4);

}

#slideshow > div {

position: absolute;

top: 10px;

left: 10px;

right: 10px;

bottom: 10px;

}</style>

#foreach($e_url in $name.getSiblings())

<div>

</div>

#end

</div>

Click on update then click on save button. Now template is created, next step is create a page, then Add Web Content Display from the Add in the docbar. Click on Add Web content, in the right hand side choose structure for the web content, next give name for the web content and then lastly give name and choose images from the image gallery.

Advantages with Structures and Templates:

1. Every time we no need to edit the code, just choose image from image gallery.

2. If we want to add two more images we just edit the web content and click on + symbol right side 2 times and choose images then publish.

3. It is very easy to add the content, because we have separated the code from the content.

Liferay Master

Friday, 22 August 2014

Article,Structures and Templates

No comments:

Post a Comment