PacktLib: Liferay 6.2 User Interface Development

Liferay 6.2 User Interface Development


About the Author


About the Author


About the Reviewers


Customizing Your Liferay Portal

Liferay functionalities

Documents and Media – CMS

Integrating with Liferay Sync

Leveraging framework and architecture for user interface development

Service Oriented Architecture

Customization and development strategies

Customizing the user interface through theme development frameworks

Developing the user interface through layout template development frameworks

Alloy UI customization

JavaScript frameworks

Responsive themes

More useful information


Basic Theme

Structure of a Liferay Portal page

Creating a theme

Analyzing the portal_normal.vm file

Velocity variables available in a theme

Rendering a theme


Layout Template

Out of the box layout templates

Creating our first layout template

Rendering a layout template

Available variables in a layout template

Developing a layout template based on the client's requirements

Multiple layout templates in one package

Embedding portlets in a layout template

Responsive layout templates

Source code


Content Collaboration and Publishing

Before we start

Static content versus dynamic content

Basic web content

Web content based on structure

Developing web content based on client's requirements

Velocity variables available for web content

Web content that accesses a database

Web content for interoperability


Source code



Before we start

Understanding a simple JSR-286 portlet

The Spring MVC portlet

About the Vaadin portlet

Source code


JavaScript Frameworks and Portlets

Before we start

The jQuery UI

Understanding Ext JS

Dojo Toolkit

OpenXava for autocoding

Source code


Advanced Theme

Creating a theme as per client requirements

Embedding portlets in a theme

Creating a responsive theme

Upgrading themes

Multiple-level navigation menus in themes

Implementing browser support in themes

Integrating Google Analytics

Source code


Understanding Alloy UI/YUI

Knowing the background

Peeping into HTML5

Trying out CSS3

Working with YUI3

Learning Alloy UI tags

Getting familiar with Node and Nodelist

Making Ajax calls in Alloy UI

Understanding a plugin

Finding out widgets in Alloy UI

Learning other Alloy UI features

Source code


Using UI Taglib

Getting started with the UI tag

Understanding the asset tag and category

Using the search container

Adding custom attributes

Using tabs, toggle, and calendar

Using breadcrumb, navigation, and panel

Adding social activity tracking and social bookmarks

Using the discussion, ratings, diff, and flags tags

Adding icons and input forms

Updating content with inline editing

Something more


Responsive Mobile Theme, Reporting, Searching, and More

Using jQuery in plugins

Knowing workflow capabilities in plugins

Custom attributes in plugins

OpenSocial, Social Activity, and Social Equity in plugins

Friendly URL routing and mapping in plugins

Knowing reporting portlets

Getting to know Lucene indexing, search API, and faceted search in plugins

The responsive theme approach

Building a mobile theme

Deploying themes