PacktLib: Liferay User Interface Development

Liferay User Interface Development

Credits

About the Authors

About the Reviewer

Preface

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

Summary

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

AlloyUI

Images

Velocity templates

Updating the theme with your own files

Building the theme as WAR file and deploying It

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Plugin

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

Summary

UI Taglib

Introduction

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

Summary

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

Summary

Index