Thursday, February 26, 2015

Liferay Themes Introduction

Liferay themes are the one of Liferay plugin to change look and feel of the Liferay portal.

Liferay have provided theme mechanism so that we can apply different look and feel to portal and it’s very easy to develop Liferay themes and we can change look and feel of portals. 

Liferay themes are working like independent application that is called plugin in Liferay terminology.
Liferay Portal already implemented some of default themes it will part of Liferay portal application and these themes have basic look and feel.

When we start to develop Liferay themes instead of starting from scratch we will inherited these basic theme into our newly developed themes so that we will change some CSS and some of templates files as for our requirement so that finally we can give new look and feel to the portals.

The following theme Hierarchy of Thames in Liferay Portal


The above themes are reside in in Liferay portal so that when we come from top to bottom in each theme Liferay added new styles so that finally it made good look and feel to the portal.

Liferay Portal use Classic theme is default theme so that when we install Liferay portal the portal look and feel is from classic theme.

The above specified themes are resided in the Liferay portal application which is in themes directory of porta (\tomcat-7.0.42\webapps\ROOT\html\themes)



The following is General Overview of Liferay Themes

Generally when we change the look and feel of application we need to use css, java scripts and templates. Same way Liferay themes consist of all files that are css, java script and templates.
CSS files used to apply look and feel related things like colors, font size, padding, margin and backgrounds to the pages.

Java Script is used to do some actions and some dynamically changes elements in the pages like when we click on button we want open popup, when we click on some text then some animated images need to show such a we will use java script.

Templates are used to design page structure like body section, header section, left menu and right menu such way we will use templates to design structures to the page.

Images are used to make user friendly understand in the pages like some of slide shows, some background for pages.



Generally when we start new theme we will use existed theme files then we will override as for our needs. To make original files safe Liferay have created new directory called _diff there we will maintain same files and folder structure that we can see in original theme.

So all modifications is take place in the _diff directory files so that at the time of deployment original files will be overridden by the _diff directory files so that new changes will be applied.

From source side it’s separated as original files, directory and also we have _diff but after packaging or deployment the original files reflected by new changes that we already made in the _diff. finally all together become as theme with original directory structure.

Liferay Portal Theme CSS files

The following is CSS files we will use to change the styles


Instead of writing CSS styles in each file Liferay have given one file called custom.css there we can write all new CSS styles so that it will be applied.

Liferay had made all portal with predefined CSS class names and ID for html elements. Whenever we are going to change the CSS properties we need identify the appropriate CSS class name and ID then we needs to write new CSS styles in custom.css file.

To know CSS class name for portal we can use browser inspect element feature so that we can identify the CSS class names and its CSS properties.

Liferay Portal Theme Template files

Liferay have used template implementation to aggregate dynamic content and to made portal structure as one page for this Liferay used Velocity Templates and Free Marker Templates.

When we develop custom theme we can use any one and that is based on our convenient. Before Liferay 6.2 we have only velocity templates and from Liferay 6.2 version we have another choice is free market templates while develop our custom themes.

portal_noraml.vm/portal_noraml.ftl:

We have many template files all files are included in portal_noraml.vm/  portal_noraml.ftl  and this will aggregate all content and make it as page.

navigation.vm/ navigation.ftl:

This file Liferay pages navigation is implemented.

portlet.vm/ portlet.ftl:

This is for aggregate Portlet content and added to main page.

init.vm/ init.ftl:

 This file consist all requited velocity variables and free marker variable that we will use in them get dynamic content like sign in user name and id like that.

The following is Templates files we will use to change page structure


main.js:

Theme related java script we will write in the main.js file this will be available in /js/main.js location.main.js java script is loaded at the time of page loading so we can write any java script that will be loaded at the time of page load.

Images:

We have images directory in theme to store all images related to theme and Liferay already used many images so this will be inherited from parent theme to our custom theme. Whenever we need new images we simply place in the images directory.

The following screen shows image directories which contain many sub directories inside they have images.


Wednesday, February 25, 2015

Liferay Application Display Templates (ADT) Introduction

Liferay Application Display Templates (ADT) is introduced from Liferay 6.2 version. ADT is the great way of changing Portlet display dynamically without changing code in Portlet JSP pages.

Generally before Liferay 6.2 to change view for the Portlet we need to use JSP hooks so that we can customize the Portlet views. But with ADT as administrator he/she can change Portlet views dynamically without changing any things in the JSP pages.

Liferay Application Display Templates (ADT) Overview Diagram


Existed:

We have Document and Media Portlet, it will store images and documents and images will be display as thumbnails and when we click on image thumbnail those will be display in image viewer. This functionality was done in Document Library Portlet JSP pages.

Requirement:

Now we wanted to display all images in the Carousel view so that images will be rotated in the loop.

Before Liferay 6.2 Solution

To meet above requirement we need to create Liferay JSP hook so that we need to change some code in the jsp pages so that we can display images in Carousel view.

Complexity:

In the above functionality can make by Liferay developer so developer only can do this job.

Need to deploy JSP hook and here also some deployment administration should involved

This functionality applicable to all Portlet where ever we use and we cannot change views as for the sites or organization in the Liferay and its have same view for all the places wherever I use this Portlet.

we need to deploy hook

After Liferay 6.2 Solution

Liferay 6.2 was come up with new concept called Application Display Templets so that we can change Portlet views dynamically and we need not do any programming to show different views for Portlet based on where we are using.
Complexity:

No complexity involved in this mechanism

Advantages:

We need not dependent on Liferay developer

No JSP hook and No deployment

Need not dependent on Deployment Administrator

Liferay Admin can prepare view and he can apply

Portlet can show different views in different places such as for each organization/site we can prepare views and we can display in different manner.

What Should Administrator to know the required things

Admin just aware of Velocity Templates OR Free Marker Templates Basics

Need to aware of some CSS and HTML

Application Display Templates:

ADT will use Velocity Templates (vm) or Free Marker Templates (ftl). Liferay have implemented ADT feature for few of the Portlets.

The following are Portlets which have ADT capability
  1. Asset Publisher
  2. Blogs
  3. Media Gallery
  4. Site Map
  5. Tags Navigation
  6. Wiki

ADT template can be developed with help of Velocity or Free Marker Templates and Liferay have provided good editor to prepare templates in velocity/free marker templates

How we can make dynamic view in ADT?

Liferay already defined required velocity variable and it will be loaded by velocity/free marker template engine so that all required objects will be available in the templates so that we can use and we can present data.

Liferay provided all required objects and Portlet specific objects as velocity variables/ ftl variable so that we can prepare dynamic views with the help of these variables.

Before moving to prepare velocity/ free marker templates we need to understand the basics of velocity template and free marker templates

In this article we will more focus on Free Marker Template design. Free Marker Template is very good template language and which is very popular in the market

Free Marker Templates Syntax

We are very familiar with JSP pages so the following syntax comparing with JSP and the same syntax produced in Free Marker Templates.

JSP vs Free Marker Templates

Assignment

JSP

<%
String name=”meera”;
%>

Free Marker Templates

<#assign name = “meera” /> 

Tag Library Import

JSP

 <%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %> 

Free Marker Templates

 <#assign aui = taglibLiferayHash["/WEB-INF/tld/aui.tld"] />
<#assign liferay_portlet = taglibLiferayHash["/WEB-INF/tld/liferay-portlet.tld"] />

Usage of  Tags

JSP

 <%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<div id="<portlet:namespace/>carousel"></div>

<aui.script use="aui-carousel">
</aui.script>

Free Marker Templates

 <#assign liferay_portlet = taglibLiferayHash["/WEB-INF/tld/liferay-portlet.tld"] />
<div id="<@liferay_portlet.namespace />carousel"></div>

<@aui.script use="aui-carousel">
</@aui.script>

For Loop

JSP

 <%
For(FileEntry curFileEntry: entries){%>
<div><%= curFileEntry:get Title ()%></div>
<%}%>

Free Marker Templates

 <#list entries as curFileEntry>
<div>${curFileEntry.title}</div>
</#list> 

IF

JSP

 <%if(entries.size()>0){%>
do something here
<%}%>

Free Marker Templates

<#if entries?has_content>
do something here
</#if>

As we know that Liferay will load required java objects as velocity variables and free marker template variables and the variables like request, response, renderRequest, renderResponse. Such a way all required java object are available as variables when we work with velocity / free marker.

The following are some of variables available in Velocity/Free Marker Templates and based on Portlet we will get Portlet specific variables.

 Variable Group
 Free Marker Templates
 Velocity

General Variables
 ${currentURL}
${locale}
${portletPreferences}
${template_id}
${themeDisplay} 
$currentURL
$locale
$portletPreferences
$template_id
$template_id
 Util Variables

 ${request}
${renderRequest}
${renderResponse}
 $request
$taglibLiferay
$renderRequest
$renderResponse

The above table we can see the General Variables, Util for velocity and Free Marker Templates

We can also have Portlet specific variables so that ADT will get some of variables based on for which Portlet we are going to design templates.

 Portlet
 Free Marker Templates
 Velocity
 Wikis
 ${assetEntry}
${entry}
${formattedContent} 
 $assetEntry
$formattedContent
$entry
 Asset Publisher
 ${entries}
${locale}
 $entries
$locale
 Blogs
${entries}
 $entries
Navigation 
${entries}
$entries
Site Map
${entries}
 $entries
 Documents and Media
 ${entries}
 $entries
 Tags Navigation 
 ${entries}
 $entries

Note:

 In the above table you can see entries variable which specify that list of objects and its type based on Portlet like list of wikis object, list of blog object and list of page objects etc.

Application Display Templates Editor

Liferay have provided Template Design Editor so that we can design Application Display Templates for above specifies Portlets by using velocity or free marker templates.

General Variables and Util variables are common for all Portlets when we create ADT but based on Portlet that we will get Portlet specific objects as entries variables.

Asset Publisher Portlet ADT Editor



Blogs Publisher Portlet  ADT Editor



Categories Navigation Portlet ADT Editor


Documents and Media Portlet ADT Editor


Site Map Portlet ADT Editor



Tags Navigation Portlet ADT Editor


Wiki Portlet ADT Editor




In the next Article we will create Application Display Templates in Liferay so that we can change display of Portlets. For each site in Liferay we can create one or more application display templates for above Portlets which are supported by ADT.

Tuesday, February 24, 2015

List of Velocity Variables in Liferay

When we are working with Liferay development and Liferay web content management system we will use many velocity variables.

Generally we will use velocity variables in theme and layout development. Apart from that we also use in the web content management system especially when we work with templates.  

From Liferay 6.2 onwards we have Liferay Application Display Templates (ADT) to implement this we will use velocity templates and its variables related to Liferay.

The following article  just shows the different velocity variables which are in Liferay

Variables Available to Layout a Template

Velocity Variable
Respective Java Class
$processor
com.liferay.portal.layoutconfiguration.util.velocity.TemplateProcessor
$request
javax.servlet.http.HttpServletRequest
$themeDisplay
com.liferay.portal.theme.ThemeDisplay
$company
com.liferay.portal.model.Company
$user
com.liferay.portal.model.User
$realUser
com.liferay.portal.model.User
$layout
com.liferay.portal.model.Layout
$layouts
java.util.List<com.liferay.portal.model.Layout>
$plid
java.lang.Long
$layoutTypePortlet
com.liferay.portal.model.LayoutTypePortlet
$portletGroupId
java.lang.Long
$locale
java.util.Locale
$timeZone
java.util.TimeZone
$theme
com.liferay.taglib.util.VelocityTaglib
$colorScheme
com.liferay.portal.model.ColorScheme
$portletDisplay
com.liferay.portal.theme.PortletDisplay
$processor
com.liferay.portal.layoutconfiguration.util.velocity.TemplateProcessor
$request
javax.servlet.http.HttpServletRequest
$themeDisplay
com.liferay.portal.theme.ThemeDisplay
$company
com.liferay.portal.model.Company
$user
com.liferay.portal.model.User
$realUser
com.liferay.portal.model.User
$layout
com.liferay.portal.model.Layout
$layouts
java.util.List<com.liferay.portal.model.Layout>

Using velocity Objects:

Assume if we have method in java like user.getUserId() then in the velocity we can use like $user.getUserId()

Example to Display User Id:

#set ($user_id = $user.getUserId())  // Assignment in velocity
<span>($user_id </span>

Liferay 6 theme variables

When we work with theme development we may need to use many velocity variable all these variables are declared in initi.vm and this file will be included in all theme velocity templates so that we can use any of the variable which has declared in the init.vm

If we want to declare new variables so that we can use init_custom.vm file and it will be available in theme templates directory

The following is init.vm file



$theme_display
$portlet_display
$theme_timestamp
$theme_settings
$root_css_class
$css_class
$htmlUtil
$languageUtil
$getterUtil
$portalUtil
$localeUtil
$liferay_toggle_controls
$sessionClicks
$request
$locale
$layout
$page_group
$liferay_dockbar_pinned
$layoutTypePortlet
$css_folder
$images_folder
$javascript_folder
$templates_folder
$full_css_path
$full_templates_path
$company_id
$company
$company_logo
$company_logo_height
$company_logo_width
$company_url
$user
$user_id
$is_default_user
$user_middle_name
$user_last_name
$user_name
$is_male
$is_female
$user_birthday
$user_email_address
$language
$language_id
$w3c_language_id
$time_zone
$user_greeting
$user_comments
$user_login_ip
$user_last_login_ip
$is_login_redirect_required
$is_signed_in
$group_id
$show_add_content
$add_content_text
$add_content_url
$layout_text
$layout_url
$show_control_panel
$control_panel_text
$control_panel_url
$show_home
$home_text
$home_url
$show_my_account
$my_account_text
$my_account_url
$show_page_settings
$page_settings_text
$page_settings_url
$show_sign_in
$sign_in_text
$sign_in_url
$show_sign_out
$sign_out_text
$sign_out_url
$show_toggle_controls
$toggle_controls_text
$toggle_controls_url
$update_available_url
$the_title
$selectable
$is_maximized
$is_freeform
$page_javascript_1
$page_javascript_2
$page_javascript_3
$layout
$page = $layout
$is_first_child
$is_first_parent
$the_title
$is_portlet_page
$all_portlets
$column_1_portlets
$column_2_portlets
$column_3_portlets
$column_4_portlets
$column_5_portlets
$maximized_portlet_id
$typeSettingsProperties
$page_javascript_1
$page_javascript_2
$page_javascript_3
$community_name
$css_class
$my_places_portlet_url
$community_default_public_url
$community_default_private_url
$community_default_url
$the_title
$layouts
$pages
$nav_items
$has_navigation
$show_staging
$staging_text
$show_my_places
$my_places_text
$dir_include
$bottom_include
$bottom_ext_include
$content_include
$top_head_include
$top_messages_include
$date
$current_time
$the_year


Velocity Variables Available in Web Content

The following are the velocity variable we can use in the Liferay web content manamgent when we create journal content/articles.


$reserved-article-id.data
$reserved-article-version.data
$reserved-article-title.data
$reserved-article-create-date.data
$reserved-article-modified-date.data
$reserved-article-display-date.data
$reserved-article-author-id
$reserved-article-author-name
$reserved-article-author-email-address
$reserved-article-author-comments
$reserved-article-author-organization
$reserved-article-author-location
$reserved-article-author-job-title


Some of relevant java class related to velocity templates which give us some understating about velocity variables.



Recent Posts

Recent Posts Widget

Popular Posts