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 User Interface Development

Book Description

Develop a powerful and rich user interface with Liferay Portal 6.0

  • 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

  • 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

    Table of Contents

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