Liferay Development

Liferay Consulting

Liferay Training

Your Trusted Liferay Solutions Partner

Thursday, June 26, 2014

Liferay 6.2 Web Content AUI Carousel Structure and Template / Image Slide Show

Introduction:

Liferay have very good content management system we can design and publish content in the web page very easy.

Along with that it’s also have structures and templates feature so that we can design common designs as structures and templates then we can reuse it many places with different data.

Same design if we want uses many places with different data then we will use structures and templates.

Liferay 6.2 structure templates have very user-friendly design to create structures and templates rather than liferay 6.1

But conceptually basic idea is same for liferay 6.2 and Liferay 6.1 but way of using they make simpler in Liferay 6.2 with very good User Interface.

Liferay 6.1 we have used velocity for coding in templates but in liferay 6.2 they have used free marker templates in addition velocity while designing templates and they have given very good UI and Template editor so that we can see all variables with respect to Structure which we have used for template.


Follow above tutorial then you can understand more about Structures and Templates in liferay web content. Same thing but way of usage is different in Liferay 6.2.


Objective:

We are going to create Carousel Image Slide show in website.

We will use AUI Carousel to design image slide show in liferay and we will use Web content 
Structures and templates feature to implement Image Slide Show


Assumptions:
  • In the image slide show we have many images so we able to upload or use many images
  • We need Slide show width and Height it should be configurable.
  • We need to specify time interval to change images so it should be configurable.
  • Each slide image have hyperlink when we click it should go to respective page and links should be configurable.

To consider all above now we will design structure and template to design web content.

Steps
  1. Create Structure
  2. Create Template and associate with Respective Structure
  3. Create web content by using Template
  4. Using Web content

Before start this we need to login as Admin

Liferay have default super admin so we need to login into liferay portal by following credentials


User Name:  test@liferay.com
Password:     test


Following is login screen




Once login as Admin go to Admin >> Site Administration


Once you go to Site Administration select Content Panel there you can click on web content



Create Structure

In the web content top navigation Manu you can see manage option menu there you can select 
structure link as follows




Once click on Structures then window pop up will be launch there you can enter your structure name and description


The following is Structure Creation Screen


In the bottom of pop up window you can see User Interface Design to Design Structure as follows



We have many controls so we can use all elements and we can design. Now we already have code for Image Slide show Structure so you simply click on source and in editor use following source code.


<root available-locales="en_US" default-locale="en_US">
<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" name="images" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width="">
<dynamic-element dataType="link-to-page" fieldNamespace="ddm" indexType="keyword" name="imagelink" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-link-to-page" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Link to Page]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Image]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" name="containerwidth" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Container Width]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" name="containerhight" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Container Hight]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" name="intervaltime" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Interval Time]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
</root>

The following screen after use source in editor



The following is Graphical view of Structure



Finally click on save button then your structure will be created


Finally close pop up window and go back to Web content Manage Screen

Create Template and associate with Respective Structure

Now we need create template and it will use above created structure. In the web content screen top navigation goes manage option menu there you can find Templates Link



Once we click on template then pop window will be open there we can see +Add to create new template.

Now we need to fill the name and description along with that we need select respective structure. In our case we already create structure i.e. Image Slide Show Structure we need to select that.

We already know we are using free market template so we need to select Language as Free Marker (ftl) and its default language, apart from that we can use velocity and XSLT



In the bottom of pop up you can see Template editor and its respective Structure variables /fields and other available variables was shown in left side.

In the structure we have used some fields all fields you can see left side as follows



We already have Free Marker Template code for Image Slide Show please use following code in Editor and save then template will be created.


<script>
AUI({ filter: 'raw' }).use('aui-carousel', function(A) {
new A.Carousel({
intervalTime:${intervaltime.getData()},
contentBox: '#myCarousel',
activeIndex:0,
height:${containerhight.getData()},
width:${containerwidth.getData()}
}).render();

});
</script>
<#if images.getSiblings()?has_content>
<div id="myCarousel">
<#list images.getSiblings() as cur_images>

<#if cur_images_index==0>
<a href="${cur_images.imagelink.getData()}">
<div class="carousel-item" style="background: url(${cur_images.getData()})width:${containerwidth.getData()}px; height:${containerhight.getData()}px;" class="carousel-item carousel-item-active";">
</div>
</a>
</#if>
<a href="${cur_images.imagelink.getData()}"> <div class="carousel-item" style="background: url(${cur_images.getData()});width:${containerwidth.getData()}px; height:${containerhight.getData()}px;" class="carousel-item""></div></a>
</#list>

</div>
</#if>



In the Template Design we use html and AUI Script to design template. And we will use stricture variable or fields to fill with dynamic content. These all design was made using Free Market Templates (FTL)

However use above template code in editor and finally save it then template will be create and it will be associated with one structure that is we created previously.

Note:

When we click in fields and variables in left side those will be added in the editor automatically where your cursor point in the editor. Templates editor is every flexible to code or design free marker templates in editor.

Each template should be associated with one structure and based in structure we need to code free market template to use structure variables and based on template design we will get input elements to design web content with dynamic data.

The following free marker template code in editor




Now finally save then your template will be created and it will be in the templates list as follows.



Now close pop up window and go back to web content screen.

Create web content by using Template

Well we are ready with Template and Structure and we will create web content using above template.

In the web content screen you can see +Add button option menu in the top navigation there you can see newly created template name that is Image Slide Show Template


Now you will get web content creation screen with selected template. We need to fill name for web content.

Based on template we need to fill the content and in our scenario we are using images element as repeatable so we can add more images by click + icon apposite to images file input element.

And we are using Height, Width and Interval we need to fill those values and it should be numbers and we can also select hyper link for each image


Once we fill the content in the web content template finally click on publish button then content will be available to use and it will be shown in web content list.


Using Web Content

We have done all steps now the content will be available to use. We will use web content display portlet to display web content in the pages.

Navigate to desirable page where you simply drag and drop web content display portlet in the page.

In the admin mode you can see left side + Icon click on the you can get the toggle there in the applications tab you can select Web content Display Portlet simply click on Add Link then blank web content display portlet will be added to page.


In the blank web content display portlet you can see toggle control in the bottom.


You can click on Select Web content there you can see list of web content articles.



You can select and click on respective web content and finally save it then web content will be displayed in portlet.


For better look and feel remove border for portlet then you can see image slide show as follows.


When we login as admin bottom of web content display portlet you can see edit controls to edit content and template. We can add more images, change height, width of slide show and we change slide interval time.


Download Image Slide Show Structure and Template Source 


Environment:

Liferay IDE 2.x+Eclipse (Kepler) +Liferay Plugins SDK 6.2+Tomcat 7.x Liferay Portal Bundle

Deployment and its Working.

You can source code in the template and Structure as said above in your portal.

I also given web content export file as lar. You simply drag and drop web content display portlet in the portlet configuration you can see export/import option and import downloaded lar file using file browses then web content will be created in your portal.

When we import lar file respective used template and structure will be created automatically.

Related Links



Author

Monday, June 23, 2014

Install Portlet Applications in Liferay Portal

Introduction:

Liferay offers many portlet applications by default with portal. When we install liferay portlet we can get more than 80 portlet applications with portal.

Apart from those applications we can also install new portlet application in portal very easy.
We have two ways to install or deploy new portlet applications in liferay portal.
  1. Manual Deployment
  2. Using Liferay Market Place in Admin Control Panel

How to use Default Portlet Applications?

Liferay offers more and more portlet application so that we can achieve dynamic functionality in websites.

Liferay have many categories and each category have many portlets it’s based on usage and need.
The following are the categories available in liferay and each category have multiple portlet application.


Add portlet application to page.

Access Portal using following URL in the local machine


Liferay have default super admin so we need to login into liferay portal by following credentials


User Name:  test@liferay.com
Password:     test


Following is login screen





Once we login as Admin then we have 3 controls in Left side there we can see many options to do like add new page, edit page and add applications to page.


To add Portlet to page click on Add (+) icon


Once we click ADD icon then will get small section in Left side as follows.




In the above we can see all portlet application categories if we click on category then we can see respective portlets.

Each portlet have Add link when we click on portlet add link then portlet will be added to page. We have many portlets and we can add many portlets to page as below.

The following screen which shows you add portlets in the page




Remove portlet application from page.

Well we have known how to add portlet to page. Now we will see remove portlet from page. Each portlet have configuration menu there we have link to remove portlet from page.

Configuration icon will be positioned in the top right corner when we click on that we will get many of links there we can fin remove portlet.



Well we are very familiar with using default portlet application in the site pages.

Now we will install new portlet application in liferay portal and its using.

As I said we have two ways
  1. Manual Deployment
  2. Liferay Market Place in Admin Control Panel

Manual Deployment

In the manual deployment we need to download portlet application from liferay or some other portlet application vendors then we need to deploy the application in our liferay portal.

Generally portlet application is web application so its packaging of application is .war file.

So liferay portlet application is also packaged as .war file apart from that liferay have packages with another extension called .lpkg

Liferay portlet application package extensions as follows


.war
.lpkg

Note:

When we download any application from liferay market place we can see portlet application extension as .lpkg and internally .lpkg contains one or more .war files.


Whenever we deploy application in manual process each time we should make sure our liferay portal version we already installed.

We should download portlet application which version should be same as that portal we installed.

Generally portlet package war files as follows the version syntax


[Portlet Name]-portlet-[Version Number].war

Example:

Liferay 6.2 portal

GoogleSearch-portlet-6.2.0.1.war
chat-portlet-6.2.0.1.war

Liferay 6.1 GA2 portal

GoogleSeach-portlet-6.1.20.1.war
LiferayBootStrap-theme-6.1.20.1.war

The following is .lpkg extension

chat.lpkg
social-networking.lpkg


When we download application from liferay market place then we can see .lpkg extension and each .lpkg files consist of one or more .war portlet applications.

Example .lpkg file



One more thing we have two types of applications in market place
  1. Community Edition Portlet
  2. Enterprise Edition Portlets

Community Edition Portlets developed by liferay community or other vendors who are using CE version of liferay.

Enterprise Edition Portlets are developed by liferay and those applications meant for paid customers.

In liferay market place they mentioned very clearly CE version and EE version portlet applications.

Example Naming Convention of EE and CE portlets as follows


EE Portlet Application

social-networking-portlet-6.1.20.3-ee-ga3-20130812170130063.war

CE Portlet Application

web-form-portlet-6.1.1.3-ce-ga3-20130821151823748.war


Final point is we need to download appropriate version of portlet application from either market place or some other places.

Deploying Portlet Application

One we download the portlet application .war extension or .lpkg then we need to copy application to server deploy directory.

In each portal server have deploy directory so there we need to place the portlet applications i.e. .war and .lpkg

As soon as we place the application in deploy directory then it will be deployed or installed application in liferay portal.

Liferay have deployment scanner capabilities so that when we place portlet application in deploy directory it will be deployed/ installed into server actual deployment directory.

The application will be copied form deploy directory to actual sever deployment directory, in the process of deployment there are many things was happened.

The following are the links to download portlets.



The following is liferay portal deploy directory



Note:

The deploy directory always along with portal server directory that is you can see in the above screen.

The following is screen show copy portlet application into deploy directory.


Note:

After place the portlet application in the deploy directory then see the log file you can log information how portlet is deploying or installing.

Assume we are deploying Google Search portlet into liferay portal then following is example log file info.


Once portlet is successfully deployed then its shows message like portlet is available to use.
Once we saw that message then login as admin and add portlet to page as I said earlier.

The following is adding portlet to page



The following is deployed Google Search portlet in the page.


Using Liferay Market Place in Admin Control Panel

In liferay portal control panel we have apps section there we can see Store link

Login as Admin and go to control panel as follows



The following is Store in Apps section



When we click store then we can see Liferay Market Place and there are we can find many portlet applications.

In the market place we can see all Applications like EE portlets and CE portlets. So based on our portal we have to choose version and portlet type like CE or EE

Of course we need Enterprise Account to download EE portlets from store and CE portlet we can download as Free.

The following Liferay Apps Store




Now assume our portal is Liferay 6.2 CE version and we will install Web Form CE portlet from market place.

Now click on Web Form CE


Now we can see full details of Web Form CE portlet in the market place as follows



Now click on free button in the right side top and fill the appropriate details and click on select for personal use only and click on purchase



Now you navigate to purchased receipt page screen as follows



Now click on see purchased button then you navigate purchased tab in the application. There you can see all purchased application and right side each portlet application has install button.
Simply click on install button



Now you can see the Installation screen there you need accept terms and condition and check the radio button accordingly finally click on install.


Now you can see Web form portlet as installed (Uninstall link) statues as follows



Similarly we can click purchased tab in market place portlet then we can see all purchased apps with install button .As soon as we install then portlet application will be installed into liferay portal.

Now we can add portlet as I said earlier and add portlet to any desired page.


The following is web form portlet in the contact us page.


This is the way we can install or deploy any available portlet applications from market place using Admin Market Place Portlet Application.

It’s pretty easy way to install and use liferay portlet application so any one can easily install liferay portlet applications in the portal and they can use it.

Author

Popular Posts

Recent Posts

Recent Posts Widget