Liferay User Interface Development

Liferay User Interface Development
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 20%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
save 7%!
Anytime, Anywhere
Unlimited eBook downloads and up to 50% off the print version!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 388 pages [ 235mm x 191mm ]
Release Date : November 2010
ISBN : 1849512620
ISBN 13 : 9781849512626
Author(s) : Jonas X. Yuan, Xinsheng Chen, Frank Yu
Topics and Technologies : All Books, CMS and eCommerce, Content Management (CMS), jQuery, Open Source, PHP

Table of Contents

Chapter 1: Customizing your Liferay Portal
Chapter 2: Basic Theme Development
Chapter 3: Layout Templates
Chapter 4: Styling Pages
Chapter 5: Advanced Theme
Chapter 6: Portlet User Interface
Chapter 7: Velocity Templates
Chapter 8: Alloy User Interface
Chapter 9: UI Taglib
Chapter 10: User Interface in Production
  • Chapter 1: Customizing your Liferay Portal
    • Liferay functionalities
      • Document stores—CMS
      • Web Content Management—WCM
      • Personalization and internalization
      • Workflow, staging, scheduling, and publishing
      • Social network and Social Office
      • Tagging
    • Leveraging framework and architecture for user interface development
      • Service Oriented Architecture
      • Enterprise Service Bus
      • Standards
    • Customization and development strategies
      • Ext Plugins
      • Hook plugins
      • Portlet and web plugins
    • Customizing user interface through themes development framework
      • Build differences of themes
      • Developing user interface through layout templates development framework
    • Alloy UI customization
      • Structure - HTML 5
      • Style—CSS 3
      • Behavior—YUI 3
      • Forms
    • 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
      • Recommended tools
        • JDK
        • Ant
        • Maven
        • Eclipse
        • Liferay IDE
        • Other Eclipse Plugins
      • Downloading and installing Liferay files
        • Creating a common workspace folder
        • Liferay Portal bundle
        • Liferay Plugins SDK
        • Liferay Portal source codes
        • Database configuration
        • Starting Liferay Portal
    • How to build your own theme
      • Creating your own build properties
      • Creating a new theme skeleton
        • Running Liferay Plugins SDK to create the theme skeleton
        • Building and deploying the generated theme as WAR file
    • AlloyUI
      • Cascading Style Sheets – From CSS 2.1 to CSS3
      • JavaScript – From jQuery to YUI3
      • HTML5
    • Images
    • Velocity templates
      • Basic skeleton of themes
        • HTML5 DOCTYPE
        • Parsing template initialization file
        • HTML document structure elements
        • CSS and JavaScript includes
        • Portal page DockBar
        • Header
        • The logo of an organization or community
        • Navigation
        • Portal content
        • Global unified breadcrumb
        • Portlet chrome
        • Portlet content
        • Footer
      • Pop-up windows
    • Updating the theme with your own files
      • Changing the configuration to enable developer mode
      • Modifying the generated files
      • Adding your own theme files to subfolders of _diffs folder
        • Creating your own CSS definitions in /docroot/_diffs/css/custom.css
        • Creating your own JavaScript in /docroot/_diffs/js/main.js
        • Creating your own images in /docroot/_diffs/images folder or subfolders
        • Adding your own velocity templates in /docroot/_diffs/templates folder
    • Building the theme as WAR file and deploying It
      • Packaging the theme as WAR File
      • Hot deployment of theme
        • Deploying theme in file system
        • Deploying theme in Liferay Control Panel
        • Verifying the theme
    • 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
      • Liferay out-of-box standard layout templates
      • Liferay out-of-box custom layout templates
    • Creating a new custom layout template
      • Creating the skeleton of a layout template in Plugins SDK
        • Adding your own implementation to the layout template files
        • Building and registering the layout template
    • How is a layout template rendered in Liferay?
      • The Main Servlet in Liferay Portal
      • Page rendering as explained with code flow
    • Default configurations for layout template
      • Setting the default layout template ID
    • Summary
  • Chapter 4: Styling Pages
    • A review of some Liferay terminologies
      • Resources
      • Users
      • User groups
      • Roles
      • Team
      • Role-based access control (permission)
      • Organization
      • Location
      • Community
      • My Community
      • Public pages
      • Private pages
      • Page Templates
      • The difference between organization and community
    • Setting up an organization
      • Creating an empty Palm-Tree Publications organization
      • Creating a user as organization administrator
      • Adding the newly created user to organization administrator role
      • Finishing other configuration for the Palm-Tree Publications organization
      • UI configuration settings for the organization
    • UI and usability features in Liferay Portal 6
      • Concise and convenient navigation
        • Dockbar portlet
        • Multiple levels of navigation menus
        • Breadcrumb portlet
        • Site Map portlet
        • Navigation portlet
      • Easy page creation based on Page Template
      • Easy organization or community creation based on Site Template
    • Internationalization (i18n) and Localization (L10n)
      • Database configuration to support Liferay localization
      • Localization in the portal framework
        • Setting up a unique URL for different languages
      • Localization in custom portlets
      • Localization through configuration and customization
        • Remove languages that are not needed
        • Localization of page names in the navigation menus
        • Localization of page names in Breadcrumb portlet
        • Localization of portlet title
        • Localization of web contents
    • UI customizations
      • Changing the default theme
      • Changing the default layout
      • Customization of Dockbar
        • Adding or removing the Dockbar from a theme
        • Adding or removing functionalities in the Add option in Dockbar
        • Adding language selection to the Dockbar
      • Changing the logo in the header
      • Customization of Add Application pop-up panel
        • Registering portlets in a custom category on Add Application pop-up page
        • Removing some out-of-box portlets in Lifery Portal
        • Disabling some out-of-box portlets in Liferay Portal
        • Hiding a portlet when a user doesn't have the required permission
        • Role-based display of portlets in Add Application pop-up
        • Adding custom roles to access portlets in Add Application pop-up
    • Portlet UI customization
      • Portlet UI customization through configuration in chrome
      • Customization of Search Container
      • OpenOffice integration for document format conversion
      • Changing the default WYSIWYG online editor
      • Configuration with portlet preferences
      • Changing the default settings of some Liferay out-of-box portlets
      • Customization of Control Panel
        • Changing the default theme for Control Panel
        • Changing the portlet display category and order in Control Panel
        • Adding custom portlets to Control Panel
    • 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 Dockbar and Breadcrumb portlets in a theme
      • Embedding Language and Web Content Search portlets in a theme
      • Embedding Sign In portlet in the header area of a theme
    • Embedding instanceable portlets in theme
    • Theme upgrade
    • Creating a FreeMarker template theme
    • Theme coding conventions
      • Cascading style sheet conventions
      • Image folder and file conventions
      • JavaScript coding conventions
    • Brower compatibility
      • Specifying a DOCTYPE
      • Using CSS reset styles
      • Limited support of CSS3 in Internet Explorer 6, 7, and 8
      • Dealing with browser bugs
    • Development tools
      • Liferay IDE in Eclipse
      • ViewDesigner Dreamweaver plugin
      • W3school site
      • Firebug
      • Yslow
      • Google Chrome
    • Summary
  • Chapter 6: Portlet User Interface
    • The making of a portlet
    • Multiple portlets support
      • JSP portlets
      • Struts portlets
      • JSF portlets
      • Vaadin portlets
      • Spring MVC portlets
    • Deploying a portlet
    • Portlet and layout
    • Portlet content and portlet template
    • Customizing portlet chrome
      • What is portlet chrome?
        • How to customize the portlet icon
    • Normal view vs. maximized view
    • AJAX for portlet user interface
    • PDF and Excel reports
    • Vaadin portlets
      • Required software
      • Configuring Tomcat 6.0 in Eclipse
      • Installing Vaadin Eclipse plugin
      • Creating a Vaadin project
      • Deploying a Vaadin project as a portlet
      • Integrating Vaadin portlet and Liferay environment
      • What's happening?
    • Common Liferay tags in portlets
      • AUI tags
      • Liferay portlet tags
        • portlet:defineObjects
        • portlet:actionURL
        • portlet:param
        • portlet:renderURL
        • portlet:resourceURL
      • Liferay liferay-portlet tags
        • liferay-portlet:actionURL
        • liferay-portlet:renderURL
        • liferay-portlet:resourceURL
      • Liferay security tags
        • liferay-security:doAsURL
        • liferay-security:permissionsURL
      • Liferay theme tags
        • liferay-theme:defineObjects
        • liferay-theme:include
        • liferay-theme:layout-icon
        • liferay-theme:meta-tags
        • liferay-theme:wrap-portlet
      • Liferay UI tags
      • Liferay utility tags
        • liferay-util:buffer
        • liferay-util:html-top
        • liferay-util:include
        • liferay-util:param
    • 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
      • Statements and references
      • Conditional statements
      • Loops
      • Directives
      • Velocimacros
      • Comments
    • 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
      • init_custom.vm
      • navigation.vm
      • portal_normal.vm
      • portal_pop_up.vm
      • portlet.vm
    • Velocity templates and portal page performance
    • What we can do with Velocity templates
      • Adding a Velocity template
      • Updating Velocity templates
    • Customizing a theme through Velocity templates
      • Adding content through a template
      • Including a portlet in a theme
    • Using Liferay services in Velocity templates
    • Liferay API related to Velocity templates
    • Velocity template for e-mail
    • Velocity references for templates
      • References for both themes and web content
      • References for themes
      • References for web content
    • Web content templates
    • What is happening?
    • Freemarker templates
      • What is FreeMarker really about?
      • What's happening?
    • 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
      • The button tag
      • The button-row tag
      • The column tag
      • The fieldset tag
      • The input tag
      • The layout tag
      • The legend tag
      • The link tag
      • The model-context tag
      • The option tag
      • The select tag
    • Node and Nodelist
      • Node properties
      • Events
      • More Node methods
      • Manipulating nodelist
      • Node queries
    • 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
      • Auto-complete
      • Char counter
      • Resize
      • Sortable list
      • Tooltip
      • An overview of Alloy UI modules
      • Alloy UI contributing to YUI3
      • Source code
    • Summary
  • Chapter 9: UI Taglib
    • Introduction
    • Asset tag and category
      • Settings
      • Configuration
        • What's happening?
    • Search container
      • UI tag
      • Columns
      • Search form and search toggle
      • Columns inside columns
      • Paginator
      • Speed and iterator
      • Configuration
        • What's happening?
    • Custom attributes
      • Settings
      • Configuration
        • What's happening?
    • Tabs, toggle, and calendar
      • Using tags liferay-ui:tabs and liferay-ui:section
      • Applying tags liferay-ui:toggle and liferay-ui:toggle-area
      • Applying the tag liferay-ui:calendar in a JSP page
    • Breadcrumb, navigation, and panel
      • Settings
      • Configuration
    • Social activity and social bookmarks
      • Settings
      • Configuration
        • What's happening?
    • Discussion, ratings, diff, and flags
      • Settings
      • Configuration
    • Icon and input
      • Tag icon settings
      • Tag input settings
      • CKEditor
        • Settings
        • What's happening?
      • Configuration
    • Many other useful UI tags
      • Configuration
      • Special sound UI reCAPTCHA
        • What's happening?
    • Summary
  • Chapter 10: User Interface in Production
    • jQuery in plugins
      • jQuery in portlets
      • jQuery in Themes
      • jQuery in Alloy UI
    • Workflow capabilities in plugins
    • How to add workflow capabilities on custom assets in plugins
      • Preparing a plugin—Knowledge Base
      • What's Knowledge Base?
        • Structure
        • Services and models
      • Adding workflow instance link
      • Adding workflow handler
      • Updating workflow status
      • Adding workflow-related UI tags
      • Where would you find sample code—Knowledge Base plugin with workflow capabilities?
    • Custom attributes in plugins
      • Adding custom attributes capabilities
      • How to make custom attributes?
        • Adding custom attributes as references
        • Adding custom attributes display
        • Adding custom attributes capabilities when creating, updating, and indexing custom entities
        • Adding custom attributes UI tags
      • Where would you find sample code—Knowledge Base plugin with custom attributes capabilities?
    • OpenSocial, Social Activity, and Social Equity in Plugins
      • OpenSocial
        • How does it work?
        • How to use it?
        • Where do you find sample code?
      • Social Activity
        • Registering Social Activity tracking in plugins
      • Social Equity
        • Adding Social Equity capabilities in plugins
        • What's happening?
    • Friendly URL routing and mapping in plugins
      • URL routing
      • What's happening?
    • Data migration and portal upgrade
      • Data migration
      • Portal upgrade
        • Manual upgrade
        • Explicit auto upgrade
        • Implicit auto upgrade
        • What's happening?
        • Legacy portal properties
      • Plugins upgrade
        • Ext environment upgrade
        • Themes upgrade
        • Layout templates upgrade
        • Portlets and hooks upgrade
    • Themes deployment
      • Integrating UI CAPTCHA or reCAPTCHA with custom assets through plugins
      • Hooking portal core UI in plugins
        • Setting up hooks
      • Static content deployment
      • Performance tuning
    • Summary

Jonas X. Yuan

Jonas X. Yuan is a Chief Architect of ForgeLife LLC and an expert on Liferay Portal, e-commerce, and Content Management Systems (CMS). As an open source community contributor, he has published five Liferay books from 2008 to 2012. He is also an expert on Liferay integration with Ad Server OpenX, different search engines, enterprise content including videos, audio, images, documents, and web contents, and other technologies, such as BPM Intalio and Business Intelligence Pentaho, LDAP, and SSO. He holds a Ph.D. in Computer Science from the University of Zurich, where he focused on Integrity Control in federated database systems. He earned his M.S. and B.S. degrees from China, where he conducted research on expert systems for predicting landslides. Previously, he worked as a Project Manager and a Technical Architect in Web GIS (Geographic Information System). He is experienced in Systems Development Lifecycle (SDLC) and has deep, hands-on skills in J2EE technologies. He developed a BPEL (Business Process Execution Language) engine called BPELPower from scratch at the NASA data center. As the chief architect, Dr. Yuan successfully led and launched several large-scale Liferay/Alfresco e-commerce projects for millions of users each month. He has worked on the following books: Liferay Portal Enterprise Intranets, 2008; Liferay Portal 5.2 Systems Development, 2009; Liferay Portal 6 Enterprise Intranets, 2010; Liferay User Interface Development, 2010; Liferay Portal Systems Development, 2012.

Xinsheng Chen

Xinsheng Chen is a web application architect. He holds an MS degree in Computer Science from California State University, San Bernardino. His focus was on online banking applications. He also has a Bachelor's degree from Wuhan University, China. Mr. Chen was previously a QA engineer working at VMware, Inc. He later led a team in developing four educational computer games for a Florida school district. Mr. Chen has rich experience in J2EE technologies. He also has extensive experience in Content Management Systems (CMS), including Alfresco. He has worked on 23 Liferay Portal projects. He is also the co-author of Liferay Beginner's Guide and Liferay User Interface Development.

Frank Yu

Frank has 10 years of extensive experience in Vignette-based and Liferay-based portal design, development, architecture, and project management, particularly in healthcare portal application development. As a project lead and senior Liferay architect, he provides portal design and architecture consulting services and manages multiple onshore and offshore teams to build portal and CMS applications for his clients.

His team leadership and hand-on experience in areas such as portlets, portal themes and skins, the customization of portal frameworks, CMS, architecture, and performance tuning have been proven to be very valuable for his clients. He also has deep knowledge in system integration with multiple legacy systems, all major RDBMS and J2EE application servers. Previously, he worked on different portal products or applications at InterComponentWare, Pay By Touch, and McKesson, a Fortune-14 healthcare company. He holds an M.S. degree in Computer & Information Sciences and was a Ph.D. candidate in cancer research. He received his B.S. degree from Nanjing University, China.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 1 submitted: last submission 18 Jul 2013

Errata type: others | Page number: 65

In page 65 the picture is wrong. The steps on the page suggest that we try changing the layout manager on organization Palm-Tree Publication and the picture shows the result. But in the last chapter we used Palm-Tree Publications to try our automatically generated theme from the Plugin SDK. The theme used the default theme parent iheritance which is _styled. So the result is very different.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Liferay User Interface Development +    Programming Microsoft® Dynamics™ NAV =
50% Off
the second eBook
Price for both: $36.60

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • 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.

A practical guide to customizing the look and feel of Liferay-based portal applications


This is a basic tutorial that teaches you how to use the tools provided by Liferay to create your own applications. It covers a lot of the material that has API references and documentation of the architecture and illustrates its key concepts with examples.

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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software