Liferay Theme and Velocity Template

velocity-template


aim

Without Velocity Templates we can not think of Liferay Theme development. Though there are FTL (FreeMarker Template Language) also available for theme development, velocity template is more popular. This article is explains the basics of velocity templates and its uses in liferay theme. While developing liferay theme we need to deal with lots of velocity templates. So this article will be helpful for understanding velocity aspects of Liferay Theme Development. 


[focus]

Whats Velocity:

Velocity is an open source templating technology. It is a project of the Apache Software Foundation. Velocity is java based template engine. We can reference objects defined in Java code with the Velocity template language. A Velocity template thus can be used for user interface in web applications. As a result, Velocity helps to achieve the separation of the presentation layer and the business logic implementation. It provides an alternative to JavaServer Page (JSP) and Hypertext Preprocessor (PHP).Velocity can also be used to generate source code, format emails and transform XML files.

[/focus]

We will discuss various syntax of Velocity template language (VTL) one by one.  

1. Statements :

In velocity template a statement starts with #. For example 

#set ($temp = “Hello”)

Here 

  • set is a directive 
  • temp is a variable which starts with $
  • Hello is String assigned to temp variable. A String is enclosed in double quote

To use this variable in our velocity template (for example porta_normal.vm) we can directly use  as $temp

2. Conditional statements

The below code is self explanatory

#set ($temp = 99)
#if( $temp > 100 )
	<b>The variable is greater than </b>
#elseif( $temp < 100 )
	<b>The variable is less than 100</b>
#else
	<b>Not matching any conditions</b>
#end

 3. Loop 

In the below code collection is an arbitrary collection. In each iteration $obj holds the item. 

#set($collection = [100, "hello", 10, "proliferay"])
#foreach( $obj in $collection )
	<br/>
	$obj
#end

4. Directives

i) include: This directive is used to include velocity template file. However the included template file wont be parsed by the velocity engine. For example:

#include( “sample.html” )

ii) parse: This directive takes a template file as an argument. The template engine will parse this template file and render its content. For example:

#parse (“template.vm”)

iii) stop: The stop directive stops the running of the template engine. Its used as 

#stop

5. Velocimacros

Velocimacros are just like a function. It may or may not take parameter as input. Velocimacros does not return any value. 

Example 1: Without input parameter 

#macro (printHello)
	<h3>Hello Macro</h3>
#end

Call the above velociymacro as #printHello in your VM file. 
Example 2: Velocimacros  with input parameter 

#macro (sayAnything $someString)
	<h3>$someString</h3>
#end

Call the above velociymacro as #sayAnything(“hello Pro Liferay”) in your VM file.

6. Comments

Comments in velocity template written as 

## Single line comment.

#*
multi-line
comment.
*#

[focus]

What’s Velocity Template?

A velocity template file is a file which has vm as file extension (for example porta_normal.vm). This template file contains velocity related directives, variable, loops etc. In run time velocity engine translate it into web page so that browser can understand it. Below is the sample template file which contains $variable_name and $my_name and those will be resolved in the run time. 

[/focus]

<html>
	<head>
		<title>Velocity Template File</title>
	</head>
	<body>
		<p>Hello $variable_name.</p>
		<p>I am $my_name.</p>
	</body>
</html>

velocity-templates-in-a-theme

Velocity is the default template engine in Liferay Portal. Liferay extensively uses velocity templates in the theme. In the templates directory of a given theme all the template files are available. You can implement your own logic in those template files. 

About The Author

2 thoughts on “Liferay Theme and Velocity Template”

  1. how to implement your site footer “By continuing to use the site, you agree to the use of cookies. more information Accept”?

    my requirement is same can you help me

  2. Hi, i want to say you that your site is very helpful and i take advantage for several post to resolve issues in my work. Thanks, thank you very much.

    Regards from Colombia,

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
%d