Liferay 6.2 User Interface Development

Liferay 6.2 User Interface Development
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Create eye-catching themes, develop responsive layouts, and write portlets with various technologies that ensure efficiency and performance
  • Showcase the latest features in the user interface of Liferay 6.2 and provide solutions to real problems on recent projects
  • Implement Alloy User Interface to achieve the best page appearance and generate reports
  • This comprehensive guide is packed with screenshots for illustration and a lot of code examples that are ready to run

Book Details

Language : English
Paperback : 356 pages [ 235mm x 191mm ]
Release Date : November 2013
ISBN : 1782162348
ISBN 13 : 9781782162346
Author(s) : Xinsheng Chen, Jonas X. Yuan
Topics and Technologies : All Books, CMS and eCommerce, Open Source

Table of Contents

Chapter 1: Customizing Your Liferay Portal
Chapter 2: Basic Theme
Chapter 3: Layout Template
Chapter 4: Content Collaboration and Publishing
Chapter 5: Portlet
Chapter 6: JavaScript Frameworks and Portlets
Chapter 7: Advanced Theme
Chapter 8: Understanding Alloy UI/YUI
Chapter 9: Using UI Taglib
Chapter 10: Responsive Mobile Theme, Reporting, Searching, and More
  • Chapter 1: Customizing Your Liferay Portal
    • Liferay functionalities
    • Documents and Media – CMS
      • Dynamic data lists and site/page/display templates
      • Web content management
      • Personalization and internalization
      • Workflow, staging, scheduling, and publishing
      • Social networking and Social Office
      • Understanding the tagging system
    • Integrating with Liferay Sync
      • Integrating with other systems easily
    • Leveraging framework and architecture for user interface development
    • Service Oriented Architecture
      • Understanding Enterprise Service Bus
      • Staging on standards
    • Customization and development strategies
      • Knowing about Ext plugins
      • Knowing about Hook plugins
      • Knowing about portlet and web plugins
    • Customizing the user interface through theme development frameworks
      • Building custom themes
    • Developing the user interface through layout template development frameworks
    • Alloy UI customization
      • Structure – HTML5
      • Style – CSS 3
      • Behavior – YUI 3
      • Alloy UI forms
    • JavaScript frameworks
    • Responsive themes
    • More useful information
    • Summary
    • Chapter 2: Basic Theme
      • Structure of a Liferay Portal page
      • Creating a theme
        • The default content of a custom theme
        • Theme inheritance
        • Theme folders and files
          • The docroot/_diffs folder
          • The docroot/css folder
          • The docroot/images folder
          • The docroot/templates folder
          • The docroot/WEB-INF folder
        • Deployment of the beet theme
        • Cloning the classic theme
      • Analyzing the portal_normal.vm file
      • Velocity variables available in a theme
      • Rendering a theme
      • Summary
      • Chapter 3: 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
          • One more solution
        • Multiple layout templates in one package
        • Embedding portlets in a layout template
        • Responsive layout templates
          • It works like this
        • Source code
          • Adding source code into the Liferay IDE
        • Summary
        • Chapter 4: Content Collaboration and Publishing
          • Before we start
          • Static content versus dynamic content
          • Basic web content
          • Web content based on structure
            • Defining a structure
            • Templates
            • Regarding the web content
          • Developing web content based on a client's requirements
            • Design
            • Implementing the design
            • Analyzing the code
            • Self-contained web content
          • Velocity variables available for web content
          • Web content that accesses a database
            • Reading from a database
              • Code analysis
            • Writing to a database
              • Code analysis
          • Web content for interoperability
            • Displaying XML-formatted data
              • Code explanation
            • Displaying JSON-formatted data
              • JSON solutions
              • JSONP solutions
          • Publishing
          • Source code
          • Summary
          • Chapter 5: Portlet
            • Before we start
            • Understanding a simple JSR-286 portlet
            • The Spring MVC portlet
            • About the Vaadin portlet
              • Vaadin support in Liferay Portal
              • Vaadin portlet for CRUD operations
              • Vaadin portlet for retrieving portal information
              • Characteristics of Vaadin portlets
            • Source code
            • Summary
            • Chapter 6: JavaScript Frameworks and Portlets
              • Before we start
              • The jQuery UI
                • Creating a localized calendar with jQuery
                • User input masking
              • Understanding Ext JS
                • About the grid
                • Drawing charts
              • Dojo Toolkit
                • Ajax calls
                • Animation
              • OpenXava for autocoding
                • Analyzing OpenXava
              • Source code
              • Summary
              • Chapter 7: Advanced Theme
                • Creating a theme as per client requirements
                  • The client's requirements
                  • Analysis and design
                  • Implementing the custom theme
                • Embedding portlets in a theme
                  • Embedding a non-instanceable portlet
                  • Embedding an instanceable portlet
                • Creating a responsive theme
                • Upgrading themes
                • Multiple-level navigation menus in themes
                • Implementing browser support in themes
                • Integrating Google Analytics
                • Source code
                • Summary
                • Chapter 8: Understanding Alloy UI/YUI
                  • Knowing the background
                  • Peeping into HTML5
                  • Trying out CSS3
                  • Working with YUI3
                  • Learning Alloy UI tags
                    • The Button tag
                    • The Button row tag
                    • The Column tag
                    • The Fieldset tag
                    • The Input tag
                    • The Layout tag
                    • The Link tag
                    • The Model-context tag
                    • The Option tag
                    • The Select tag
                  • Getting familiar with Node and Nodelist
                    • Learning Node properties
                      • Creating events
                      • More Node methods
                      • Manipulating Nodelist
                      • Exploring Node queries
                  • Making Ajax calls in Alloy UI
                  • Understanding a plugin
                  • Finding out widgets in Alloy UI
                    • Creating a TreeView instance
                    • Creating a data table instance
                    • Starting an animation
                    • Creating a drag-and-drop instance
                    • Coding a delayed task
                    • Implementing Overlay and OverlayManager
                    • Creating an image gallery
                    • Coding SWF file playback
                  • Learning other Alloy UI features
                    • Implementing the autocomplete feature
                    • Creating a character counter
                    • Resizing a DOM element
                    • Coding a sortable list
                    • Creating a tooltip instance
                    • Knowing the benefits of using Alloy UI
                  • Source code
                  • Summary
                  • Chapter 9: Using UI Taglib
                    • Getting started with the UI tag
                    • Understanding the asset tag and category
                      • Setting up related assets
                      • Asset tags and category settings
                      • Getting to know the configuration
                        • Things that happened
                    • Using the search container
                      • Displaying search results
                      • Adding columns
                      • Search form and search toggle
                      • Understanding columns within columns
                      • Adding a paginator
                      • Speed and iterator
                      • Getting to know the configuration
                        • Let's find out what happened
                    • Adding custom attributes
                      • Understanding the settings for custom attributes
                      • Getting to know the configuration
                        • Knowing what happened
                    • Using tabs, toggle, and calendar
                      • Using the liferay-ui:tabs and liferay-ui:section tags
                      • Applying the liferay-ui:toggle and liferay-ui:toggle-area tags
                      • Applying the liferay-ui:calendar tag in a JSP page
                    • Using breadcrumb, navigation, and panel
                      • Understanding the settings
                      • Getting to know the configuration
                    • Adding social activity tracking and social bookmarks
                      • Understanding the settings
                      • Getting to know the configuration
                        • Understanding what happened
                    • Using the discussion, ratings, diff, and flags tags
                      • Understanding the settings
                      • Getting to know the configuration
                    • Adding icons and input forms
                      • Getting to know the icon tag settings
                      • Learning the input tag and its settings
                      • Integrating with CKEditor
                        • Enabling SCAYT settings
                        • What just happened?
                      • Getting to know the configuration
                    • Updating content with inline editing
                      • Features of inline editing
                      • Implementing inline editing
                      • Using inline editing
                    • Something more
                      • Getting to know the configuration
                      • Integrating with special sound UI reCAPTCHA
                        • Things that happened
                    • Summary
                    • Chapter 10: Responsive Mobile Theme, Reporting, Searching, and More
                      • Using jQuery in plugins
                        • Building jQuery portlets
                        • Adding jQuery in themes
                        • Using jQuery in Alloy UI
                      • Knowing workflow capabilities in plugins
                        • Preparing a plugin – Knowledge Base
                          • Understanding the folder structure
                          • Services and models
                        • Adding a workflow instance link
                        • Adding a workflow handler
                        • Updating workflow status
                        • Adding workflow-related AUI tags
                        • The point of download for the Knowledge Base plugin
                      • Custom attributes in plugins
                        • Adding custom attribute capabilities
                        • Adding custom attributes in plugins
                          • Adding custom attributes as references
                          • Adding custom attribute display
                          • Adding custom attribute capabilities when creating, updating, and indexing custom entities
                          • Adding custom attribute UI tags
                        • Finding the sample code
                      • OpenSocial, Social Activity, and Social Equity in plugins
                        • Knowing OpenSocial
                          • Getting to know the working
                          • Using OpenSocial
                          • Finding the sample code
                        • Understanding Social Activity
                          • Registering social activity tracking in plugins
                        • Using Social Equity
                          • Adding Social Equity capabilities to plugins
                          • Things that happened
                      • Friendly URL routing and mapping in plugins
                        • Understanding URL routing
                        • Things that happened
                      • Getting to know reporting portlets
                        • Bringing JasperReports into your portal
                      • Getting to know Lucene indexing, search API, and faceted search in plugins
                        • Experiencing Lucene indexing and search API
                        • Understanding faceted search
                        • Building faceted search in plugins
                      • The responsive theme approach
                        • Getting to know about the AUI responsive theme
                          • Understanding what happened
                        • Understanding the Bootstrap responsive theme
                          • Building the Bootstrap responsive theme
                        • Knowing device detection rules
                          • Mobile device API
                          • Bringing WURFL into your portal
                      • Building a mobile theme
                        • Delving into jQuery Mobile
                          • Benefits of the jQuery Mobile theme
                          • Building a jQuery Mobile theme
                      • Deploying themes
                        • Deploying themes as static content
                        • UI performance tuning
                      • Summary

                      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.

                      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.

                      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.

                      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 6.2 User Interface Development +    Unreal Development Kit Game Design Cookbook =
                      50% Off
                      the second eBook
                      Price for both: €34.10

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

                      What you will learn from this book

                      • Set up Liferay IDE for rapid development of plugins
                      • Use Compass to write Syntactically Awesome Stylesheets
                      • Develop a responsive theme
                      • Integrate Google Analytics in a theme
                      • Create a page layout that responds to the change in width of the browser screen
                      • Write generic-style portlets, Spring MVC portlets, and Vaadin portlets
                      • Use jQuery, Ext JS, and Dojo Toolkit in a portlet
                      • Develop a portlet using tools like OpenXava
                      • Create an image gallery with Alloy UI
                      • Construct an Alloy UI video player
                      • Use Liferay tags for rich page rendering
                      • Develop a mobile user interface, create reports, and enable searching

                      In Detail

                      Liferay employs a specialized theming system that allows you to change the look and feel of the user interfaces. Liferay Portal provides layout templates in order to describe how various columns and rows are arranged to display portlets. It also provides themes that can be used to customize the overall look and feel of web sites and web pages. As a developer, by using the right tools to create and manipulate themes with Liferay Portal 6.2, you can get your site to look any way you want it to; however the Liferay theming system can be difficult to get started with. This practical guide is a well organized manual to help you get started with Liferay as a programmer.

                      "Liferay 6.2 User Interface Development" will show you the efficient ways to develop custom user interface components for a Liferay Portal website. You will learn how to create themes, write page layouts, develop portlets, and use Alloy User Interface widgets. This book will prepare you with a full set of tools and skills for the development of Liferay user interfaces.

                      "Liferay 6.2 User Interface Development" guides you through the components of the Liferay Portal user interface step-by-step.The Liferay tags, analysis of the Alloy UI widgets, and the anatomy of a theme are explained in detail. Explanations are accompanied with screenshots and code that executes smoothly. This book explains how the components are rendered one after another into a complete HTML file.

                      You will learn how to create and upgrade a theme, how to write a responsive page layout and how to develop generic-style portlets, Spring MVC portlets, and Vaadin portlets. The book will help you in using Alloy UI, jQuery, Ext JS, and Dojo Toolkit in Liferay.

                      By the end of this book, you will have gained experience in developing all the user interface components for the Liferay Portal and know the latest ways of using tags, composing widgets, and writing Ajax calls and developing portlets, page layouts, and themes efficiently.


                      A step-by-step tutorial, targeting the Liferay 6.2 version. This book takes a step-by-step approach to customizing the look and feel of your website, and shows you how to build a great looking user interface as well.

                      Who this book is for

                      "Liferay 6.2 User Interface Development" is for anyone who is interested in the Liferay Portal. It contains text that explicitly introduces you to the Liferay Portal. You will benefit most from this book if you have Java programming experience and have coded servlets or JavaServer Pages before. Experienced Liferay portal developers will also find this book useful because it explains the latest technologies used in the Liferay Portal. This book is a good reference for Liferay architects as the book also explains different technologies for portlet development and their strong and weak points.

                      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