O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Liferay 6.2 User Interface Development

Book Description

Breathe new life into the look and responsiveness of your website with Liferay Portal. With this tutorial you’ll learn everything you need to know about this versatile technology. Experience with Java would be a big help.

  • 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

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.

Table of Contents

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