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.

Meera Prince
Liferay Contributor of The Year 2014

Liferay Top Contributor Award Winner 2013

http://www.liferaysavvy.com 

Read More

Access Liferay Database Services in Themes/Velocity Templates

Objective:

Access liferay database services in themes. Means access Locals Service and Service classes in liferay themes.

Generally some time we need to show some dynamic data in theme, the data may be stored in any table in liferay database .When we get such requirement we need to access database from vm files.

In theme level liferay have given service locater feature to access database services.

Here we are talking about theme means we are access liferay services in portal_normal.vm file or other VM (velocity) files which is in liferay themes.

In liferay themes all VM (velocity) files available in templates directory. One of the  core velocity file is portal_normal.vm.

Liferay already providing many default velocity variables in theme level such as

$theme_display, $portlet_display, $layout, $company and $user.

These variables we can see in init.vm file we can use these variables anywhere in theme vm files when we include vm file in our working velocity file.

Liferay already include this in portal_notmal.vm file so that we can use any variable which is available in init.vm

Information about velocity

Velocity is a Java-based template engine. It permits anyone to use a simple yet powerful template language to reference objects defined in Java code.

Liferay uses velocity templates to aggregate dynamic content of  web page.

Here all variable which starts with $ symbol

The following is link to know more about velocity

http://velocity.apache.org/engine/devel/user-guide.html

Declare variable and assign value

#set( $a = "Velocity" )

Print variable  

<html> <body> #set( $foo = "Velocity" ) Hello $foo World! </body> <html>

In liferay we can see many declaration of variables in init.vm file for example as follows

#set ($user_name = $user.getFullName())

To print user Name

Hi I am $user_name

Note: 

Whenever it find the $ it will interpret as velocity variable by velocity engine while rendering.

This is enough for us to understand about velocity.

Now accessing liferay data base services in themes

1. Make it available of service jar file in liferay global class path
2. Use velocity service locater to find data base service in theme

Make it available of service jar file in liferay global class path

Foremost thing is your service jar file should be available in liferay portal global class path

Means liferay portal service (portal-service.jar) available in liferay portal global class path. By default this jar file available in global lib directory of portal.

For Tomcat:

The following is liferay portal global class path

tomcat-7.0.27\lib\ext

 If any jar file which is available in tomcat-7.0.27\lib\ext path then it can be available to liferay portal and plug-in portlets too.

By default liferay portal service jar file available in global lib so we can access all liferay portal services such as UserLocalService,GrouopLocalService and LayoutLolcaServices.

Note:

 There are many services available in liferay portal level all clasess you can find in portal-service.jar the following packages com.liferay.portal.service.

For JBoss:

The following is liferay portal global class path

jboss-7.1.1\modules\com\liferay\portal\main

When we work with Liferay JBoss Server this is something different from tomcat server.

For JBoss the service jar file should available in following location then it will be treated as global jar so that all liferay portlets can access these classes.

jboss-7.1.1\modules\com\liferay\portal\main

Once we place the jar in the location we need to entry the jar file name in module.xml file. The module.xml also in same location i.e. jboss7.1.1\modules\com\liferay\portal\main

Example for entries like follows

<resource-root path="portal-service.jar" />

module.xml file

<module xmlns="urn:jboss:module:1.0" name="com.liferay.portal">             <resources>                         <resource-root path="hsql.jar" />                         <resource-root path="jtds.jar" />                         <resource-root path="portal-service.jar" />                         <resource-root path="portlet.jar" />                         <resource-root path="postgresql.jar" />                         <resource-root path="mysql.jar" />                         <resource-root path="ojdbc6.jar" />                    </resources>             <dependencies>                         <module name="javax.api" />                         <module name="javax.mail.api" />                         <module name="javax.servlet.api" />                         <module name="javax.servlet.jsp.api" />                         <module name="javax.transaction.api" />             </dependencies> </module>

Note:

Liferay by default make the portal services in global class path level in JBoss .

So we need not do anything and we can use directly all portal service which in portal-service.jar file.

Use velocity service locater to find data base service in theme

We can access any portal service in them i.e. in portal_noraml.vm file or other vm files in liferay. Because liferay already provided porta-service.jar file in global class path , so we can access in liferay themes.

In Liferay theme all vm files included in portal_noraml.vm file this is core vm file for liferay to aggregate all web page content.

If you use any vm file then it should be included in portal_noram.vm file then only it will be rendered.

To access services in them liferay provided service locater in velocity by using this we can get the services in themes.

We have default velocity variable $serviceloacater we can use this variable to get the service.

The following is example code

#set ($userLocalService= $serviceLocator.findService("com.liferay.portal.service.UserLocalService"))

In above code we get the user Service and make sure we have to use full qualified path of java class means class name including package name.

Example like this

com.liferay.portal.service.UserLocalService this is nothing but com.liferay.portal.service.UserLocalService.java class in portal-service.jar file.

Once we get the service object we can apply any method which available in service class.

Example code as follows

#set ($userLocalService= $serviceLocator.findService("com.liferay.portal.service.UserLocalService")) #set ($user = $userLocalService.getUserById($request.get("theme-display").get("user-id"))) #set ($emailAddress = $user.getEmailAddress())

Now we can simple print email address like this in portal_noram.vm file as follows

<h1>$emailAddress</h1>

Note:

This just example snippet I showed and we already have direct $user object in theme we can use directly that to get user information.

Examples for Services in portal

#set ($userLocalService= $serviceLocator.findService("com.liferay.portal.service.UserLocalService")) #set ($groupLocalService= $serviceLocator.findService("com.liferay.portal.service.GroupLocalService")) #set ($layoutLocalService= $serviceLocator.findService("com.liferay.portal.service.LayoutLocalService")) #set ($roleLocalService= $serviceLocator.findService("com.liferay.portal.service.RoleLocalService"))

Like this we can access any portal services in portal_normal.vm file

Accessing plug-in portlet services in themes

We already know to access portal services but some time we may get requirement to access plug-in portlet services that is our custom services.

The following are the steps

1. Create plug-in portlet using Liferay IDE with eclipse.
2. Write entities in service.xml file
3. Run service builder
4. Once service builder successfully run then you will get service jar file in plug-in portlet WEB-INF/lib directory.
5. Copy the plug-in portlet service jar file and place this into liferay global lib directory based on your liferay server (JBoss/Tomcat)
6. Remove service jar file from plug-in portlet WEB-INF/lib directory
7. Now deploy portlet and  portlet should be successfully deployed
8. Now use service locater to get the plug-in service in theme or portal_normal.vm

 Example:

Portlet Name: Student-portlet

Table Name: Student

service.xml file as follows

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE service-builder PUBLIC "-//Liferay//DTD Service Builder 6.1.0//EN"  "http://www.liferay.com/dtd/liferay-service-builder_6_1_0.dtd"> <service-builder package-path="com.meera.db">             <author>E5410</author>             <namespace>meera</namespace>             <entity name="Student" local-service="true" remote-service="true">                         <column name="studentId" type="long" primary="true" />                         <column name="studentName" type="String" />                         <column name="studentAddress" type="String" />             </entity> </service-builder>

Now run service builder once run service builder successfully then you can get Student-portlet-service.jar in WEB-INF/lib

Now we have to copy Student-portlet-service.jar file to liferay global lib

If Tomcat

tomcat-7.0.27\lib\ext

If JBoss

jboss-7.1.1\modules\com\liferay\portal\main Register jar file name in module.xml as follows <resource-root path=" Student-portlet-service.jar" />

Remove Student-portlet-service.jar file form portlet WEB-INF/lib directory

Now deploy then portlet and portlet should be successfully deployed.

Now use following code in portal_normal.vm of your currently working theme

#set ($studentLocalService= $serviceLocator.findService("com.liferay.portal.service.UserLocalService")) #set ($student = $studentLocalService.getStudent(1) #set ($studentName= $student.getStudentName()) <div>Hi I am student  my name is <h1>($studentName</h1></div>

Note:

When we use plugin portlet services in then we have to apply above steps to each change/modification  in plug-in portlet services .so make sure you have to follow the steps properly for each change.

Important points

• Liferay provide many velocity variables to use in themes.
• Service locater is one velocity variable in liferay from that we can get any services from liferay.
• To access service in liferay all services should be in Liferay Global class path.

Reference Links:

https://www.liferay.com/community/wiki/-/wiki/Main/Access+to+Liferay+services+in+Velocity

https://www.liferay.com/ja/community/forums/-/message_boards/message/13172256

Author

Meera Prince

www.liferaysavvy.com

Read More