PacktLib: Liferay User Interface Development

Liferay User Interface Development


About the Authors

About the Reviewer


Customizing your Liferay Portal

Liferay functionalities

Leveraging framework and architecture for user interface development

Customization and development strategies

Customizing user interface through themes development framework

Alloy UI customization

More useful information


Basic Theme Development

The basic structure of a Liferay Portal page

Setting up Liferay Plugins SDK for plugin development

How to build your own theme



Velocity templates

Updating the theme with your own files

Building the theme as WAR file and deploying It


Layout Templates

Using the out-of-box layout templates in Liferay Portal

Controlling the look and feel of a page with themes and layout template

The basic structure of a layout template

Creating a new custom layout template

How is a layout template rendered in Liferay?

Default configurations for layout template


Styling Pages

A review of some Liferay terminologies

Setting up an organization

UI and usability features in Liferay Portal 6

Internationalization (i18n) and Localization (L10n)

UI customizations

Portlet UI customization


Advanced Theme

Changing theme.parent property in theme

Adding color schemes to a theme

Configurable theme settings

Portal predefined settings in theme

Embedding non-instanceable portlets in theme

Embedding instanceable portlets in theme

Theme upgrade

Creating a FreeMarker template theme

Theme coding conventions

Brower compatibility

Development tools


Portlet User Interface

The making of a portlet

Multiple portlets support

Deploying a portlet

Portlet and layout

Portlet content and portlet template

Customizing portlet chrome

Normal view vs. maximized view

AJAX for portlet user interface

PDF and Excel reports

Vaadin portlets

Common Liferay tags in portlets

UI customization through hooks in Plugins SDK

Following Liferay UI coding conventions

Source code


Velocity Templates

Before we start

What is Velocity?

Velocity template language

What is a Velocity template?

Velocity portlet

Why is Velocity for Liferay?

Re-building Classic theme in Plugins SDK

Velocity templates in a Liferay theme

Velocity templates and portal page performance

What we can do with Velocity templates

Customizing a theme through Velocity templates

Using Liferay services in Velocity templates

Liferay API related to Velocity templates

Velocity template for e-mail

Velocity references for templates

Web content templates

What is happening?

Freemarker templates

Source code


Alloy User Interface

Story of Alloy UI

What Alloy UI consists of

Goals of Alloy UI

What is HTML5?

What is CSS3 about?

Why YUI3?

Alloy UI form tags

Node and Nodelist

Using Ajax in Alloy UI


Widgets in Alloy UI

How to do animation

Drag and drop

Delayed task example

Overlay and overlay manager

Image gallery

SWF file playback

Other Alloy UI features


UI Taglib


Asset tag and category

Search container

Custom attributes

Tabs, toggle, and calendar

Breadcrumb, navigation, and panel

Social activity and social bookmarks

Discussion, ratings, diff, and flags

Icon and input

Many other useful UI tags


User Interface in Production

jQuery in plugins

Workflow capabilities in plugins

How to add workflow capabilities on custom assets in plugins

Custom attributes in plugins

OpenSocial, Social Activity, and Social Equity in Plugins

Friendly URL routing and mapping in plugins

Data migration and portal upgrade

Themes deployment