• Liferay Theme and Velocity Template

    Posted on March 26, 2015 by Hamidul Islam in Liferay.

    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. 


    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.

    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.
    *#
    
    

    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. 

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

2 Responses so far.

  1. suneel says:

    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. Harvey Tamayo says:

    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

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close