Liferay User Interface Development

Develop a powerful and rich user interface with Liferay Portal 6.0

Liferay User Interface Development

Progressing
Jonas X. Yuan, Xinsheng Chen, Frank Yu

Develop a powerful and rich user interface with Liferay Portal 6.0
$24.00
$49.99
RRP $29.99
RRP $49.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781849512626
Paperback388 pages

About This Book

  • Design usable and great-looking user interfaces for Liferay portals
  • Get familiar with major theme development tools to help you create a striking new look for your Liferay portal
  • Learn the techniques and tools to help you improve the look and feel of any Liferay portal
  • A practical guide with lots of sample code included from real Liferay Portal Projects free for use for developing your own projects

Who This Book Is For

If you have basic knowledge of Java Web applications, know the basic operational functionality of Liferay, and have written a servlet or JSP file, you are ready to get the most out of this book. Whether you are a web portal engineer or an experienced Liferay Portal developer, you can benefit from this book. You are not expected to have prior knowledge of Liferay theming.

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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

What You Will Learn

  • Learn Liferay themes inside out in a procedural way with real project example code
  • Develop variations of a theme through its color schemes by getting familiar with major theme development tools
  • Customize the Dockbar using Velocity templates, CSS, and the Alloy API
  • Upgrade a theme from an older Liferay version to Liferay Portal 6 and change the default theme in Liferay
  • Use AJAX to change page content and generate PDF and Excel reports
  • Take advantage of Liferay portlet UI tags to save development time
  • Use Velocity templates to control different parts of a Liferay Portal web page
  • Get introduced to the latest Liferay user interface – Alloy UI
  • Get acquainted with Liferay Alloy form tags and become a fan of the Alloy API
  • Use UI tag libraries in your pages or portlets including CKEditor, reCAPTCHA, and more
  • Design themes in WAP and production including jQuery, WAP theme, Friendly URLs, deployment, and performance tuning

In Detail

Liferay employs a specialized theming system, which allows you to change the look and feel of the user interfaces. As a developer, by using the right tools to create and manipulate themes with Liferay Portal, you can get your site to look any way you want it to; but the Liferay theming system can be difficult to get started with. This practical guide provides you with a well organized manual for working with Liferay as a programmer to help you get started.

Liferay User Interface Development is a pioneer in explaining Liferay's powerful theming system by taking you through examples to get you to create your own themes as quickly as possible. It focuses on how portal pages are created and styled and also discusses some simple configuration and customization to change the look and feel of a portal page. Its explicit instructions are accompanied by plenty of source code. With the open source nature of Liferay, you will find a user-friendly environment to design themes with the latest user interface technologies.

Liferay User Interface Development unlocks the potential of using Liferay as a framework to develop a rich user interface.

The book starts off with how you should go about structuring a Liferay Portal web page. It identifies the components of a portal page: theme, layout, and portlets. This hands-on tutorial explains themes, portlets, and Alloy UI, which is the latest output from the Alloy Project of Liferay, in an easy-to-understand way. It covers all aspects of a theme from its inception and rendering through its consumption by an end user, with in-depth discussion.

By the end of this book, you will clearly understand themes, layouts, and the Alloy API. Most importantly you will obtain the skills to write a theme and layout templates, apply them to a portal, and also control the portlet UI through different mechanisms.

This clear, concise, and practical tutorial will ensure that you have developed skills to become a competent Liferay themer. The detailed text is accompanied with source code that allows you to play with the examples, update the code, and add custom features.

Authors

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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

Book Details

ISBN 139781849512626
Paperback388 pages
Read More