JGuru
When you need a guru
  • Home
  • About
  • Services
  • Blog
  • Projects
    • Liferay Backup
    • Photo Carousel Portlet
    • Social Comments Portlet
    • Liferay Yubikey OTP Login
  • Contact
August 24 2010

Using Freemarker in your theme templates

Mika Koivisto Liferay freemarker, liferay, theme

Freemarker is a template language very similar to Velocity. Starting from Liferay 6.0 Liferay supports also Freemarker templates in themes and Web Content templates. In this post I will show how you can use Freemarker in your themes.

Getting started

To get started you’ll need Liferay Portal 6.0 GA3 as well as corresponding Plugins SDK. Once you have setup your Portal and Plugins SDK we can start by creating a new theme plugin in PLUGINS_SDK_ROOT/themes folder.

To create the theme issue following command:

./create.[sh|bat] my-freemarker "My Freemarker"

Then go to my-freemarker-theme directory and open build.xml in your favorite editor.

In build.xml add theme.type property with value ftl above theme.parent property like this:

<property name="theme.type" value="ftl"></property>
<property name="theme.parent" value="_styled"></property>

Then you need to create docroot/WEB-INF/liferay-look-and-feel.xml with following contents:

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.0.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_0_0.dtd">

<look-and-feel>
	<compatibility>
		<version>6.0.0+</version>
	</compatibility>
	<theme id="my-freemarker-theme" name="My Freemarker">
		<template-extension>ftl</template-extension>
	</theme>
</look-and-feel>

Now you run:

ant deploy

Congratulations you’ve just made your first Freemarker based theme. Now you can override base theme files in docroot/_diffs folder just as you would normally except template files now have extension .ftl instead of .vm.

Freemarker syntax

Freemarker syntax is slightly different from Velocity and it is much more strict. With Freemarker you won’t be able to get a way with trying to use undefined variables and you should also note that null value means it’s undefined. To test if value exists you can use double question mark after the variable name like this:

<#if someVariableName??>
Variable exists
</#if>

For full syntax reference check out Freemarker website.

Pre-defined theme variables

Most of the variables present for Velocity templates are also available for Freemarker templates. Only Velocity specific tools were removed you can accomplish everything and more with Freemarker build-ins. Here’s some examples how to format a java.util.Date type variable with Freemarker build-ins:

${lastUpdated?string("yyyy-MM-dd HH:mm:ss zzzz")}
${lastUpdated?string("EEE, MMM d, ''yy")}
${lastUpdated?string("EEEE, MMMM dd, yyyy, hh:mm:ss a '('zzz')'")}

You can find all the variables available for Freemarker templates from com.liferay.portal.freemarker.FreeMarkerVariables class and docroot/html/themes/_unstyled/init.ftl

Macro libraries

Most of the macros available to Velocity templates are also available for Freemarker templates. The only difference is the syntax how they are used. We provide a macro library with namespace liferay so that it won’t get mixed with your own macros. You can take a look at portal-impl/src/FTL_liferay.ftl to see full list of macros and use it as an example to build your own macros. Here are some commonly used macros:

<@liferay.css file_name=“some.css” />

<@liferay.js file_name=“some.js” />

<@liferay.language key=“my-key” />

<@liferay.breadcrumb />

<@liferay.docbar />

Tag libraries

Yes, you read it correctly. You can use taglibs in your Freemarker templates. This is something unique to Freemarker and it is limited to only templates in themes. To import a portal taglib to your template just add following line to your template:

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

Now you can use any tag within that taglib just if it was a macro library. Here’s an example how to add a Alloy UI input field:

<@aui.input name=“aStringLiteral” label=“Test” />

Have fun trying this out and if you find any glitches do report them to our issue tracker.

This post was originally published on Liferay blog.

Share this:

  • Tweet
  • Share on Tumblr
Liferay Maven SDK How do I cluster Liferay with Terracotta?

Related Posts

fail

Liferay

Top 3 reasons why Liferay projects fail

FIDO-Yubico-YubiKeys-2-444x296

Liferay

Liferay Yubikey OTP Login

Liferay

Liferay Maven Support in Liferay 6.1 GA3

Tags

activemq apache backup c3p0 certificate connection pool debian debugging deployment git heap hook httpd https installer java jms jmx jmx4perl jndi jolokia jvm liferay mariadb maven memory monitoring mrtg mysql nagios newrelic nginx ngx_cache_purge pagespeed performance repository salesforce saml security spring ssl struts tls tomcat ubuntu

Categories

  • General
  • Howto
  • Liferay

Recent Posts

  • cyber_securityHow to get Tomcat to see HTTPS when it’s terminated elsewhere
  • failTop 3 reasons why Liferay projects fail
  • FIDO-Yubico-YubiKeys-2-444x296Liferay Yubikey OTP Login
  • nginxCreating a custom Nginx build for Ubuntu/Debian
  • getting-git-rightMoving a project from one git repository to another while retaining it’s history

Archives

  • October 2017
  • February 2017
  • January 2017
  • July 2016
  • June 2016
  • May 2016
  • August 2015
  • April 2015
  • January 2015
  • October 2013
  • June 2013
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • March 2012
  • February 2012
  • January 2012
  • January 2011
  • September 2010
  • August 2010
  • December 2009
  • October 2008
  • December 2007

Recent Posts

  • cyber_securityHow to get Tomcat to see HTTPS when it’s terminated elsewhere
  • failTop 3 reasons why Liferay projects fail
  • FIDO-Yubico-YubiKeys-2-444x296Liferay Yubikey OTP Login
  • nginxCreating a custom Nginx build for Ubuntu/Debian
  • getting-git-rightMoving a project from one git repository to another while retaining it’s history

Follow me on Twitter

My Tweets
© JGuru 2006 - 2017