Liferay User Interface Development - Yuan Jonas X. - E-Book

Liferay User Interface Development E-Book

Yuan Jonas X.

0,0
26,04 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

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

Approach

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.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern

Seitenzahl: 449

Veröffentlichungsjahr: 2010

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Liferay User Interface Development
Credits
About the Authors
About the Reviewer
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Errata
Piracy
Questions
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
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
init_cutom.vm
portal_normal.vm
navigation.vm
portlet.vm
portal_pop_up.vm
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
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
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
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
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
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
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
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
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
Index

Liferay User Interface Development

Liferay User Interface Development

Copyright © 2010 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: November 2010

Production Reference: 1191110

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-849512-62-6

www.packtpub.com

Cover Image by Asher Wishkerman (<[email protected]>)

Credits

Authors

Jonas X. Yuan

Xinsheng Chen

Frank Yu

Reviewer

Milen Dyankov

Acquisition Editor

Eleanor Duffy

Development Editor

Hyacintha D'Souza

Technical Editors

Kavita Iyer

Pooja Pande

Indexers

Hemangini Bari

Monica Ajmera Mehta

Rekha Nair

Editorial Team Leader

Aanchal Kumar

Project Team Leader

Lata Basantani

Project Coordinator

Leena Purkait

Proofreaders

Lesley Harrison

Mario Cecere

Graphics

Nilesh Mohite

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

About the Authors

Dr. Jonas X. Yuan is an expert on Liferay Portal and Content Management Systems (CMS). As an open source community contributor, he had published three Liferay books from 2008 to 2010. He is also an expert on Liferay integration with Ad Server OpenX, different search engines, enterprise contents including videos, audios, 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 has 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 has developed a BPEL (Business Process Execution Language) Engine called BPELPower from scratch in NASA data center. As the chief architect, Dr. Yuan led and successfully launched several large scale Liferay/Alfresco projects which are used by millions of users each month.

He has worked on the following books: Liferay Portal Enterprise Intranets, 2008, ISBN 13: 978-1-847192-72-1; Liferay Portal 5.2 Systems Development, 2009, ISBN 13: 978-1-847194-70-1; and Liferay Portal 6 Enterprise Intranets, 2010, ISBN 13: 978-1-849510-38-7.

I would like to thank all my team members at Liferay, specially Raymond Auge, Brian Chan, Bryan Cheung, Jorge Ferrer, Michael Young, Jerry Niu, Ed Shin, Craig Kaneko, Brian Kim, Bruno Farache, Thiago Moreira, Amos Fong, Scott Lee, David Truong, Alexander Chow, Mika Koivisto, Julio Camarero, Douglas Wong, Ryan Park, Eric Min, John Langkusch, Marco Abamonga, Ryan Park, Eric Min, John Langkusch, Marco Abamonga, Michael Han, Samuel Kong, Nate Cavanaugh, Arcko Duan, Richard Sezov, Joshua Asbury, Shuyang Zhou, and Juan Fernández for providing all the support and valuable information. Much thanks to all the friends in the Liferay community.

I sincerely thank and appreciate Leena Purkait and Hyacintha D'Souza, Project Coordinator and Development Editor respectively, at Packt Publishing, for criticizing and fixing my writing style. Thanks to Priya Mukherji and the entire team at Packt Publishing; it was really joyful to work with them.

Last but not least, I would like to thank my parents and my wife, Linda, for their love, understanding and encouragement. My special thanks to my wonderful and understanding kid Joshua.

Xinsheng Chen is an architect for Liferay portal projects, a computer game developer, and a software testing engineer. 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 a QA engineer at VMware, Inc. He later led a team in developing four educational computer games for the Escambia County School District, Florida. He worked on Geographical Information Systems (GIS). Mr. Chen has rich experience in J2EE technologies. He has extensive experience in content management systems (CMS), including Alfreso. He is an expert in web portal technologies. Mr. Chen has hands-on experience in eight Liferay portal projects.

I would sincerely thank Leena Purkait, the Project Coordinator and Hyacintha D'Souza, the Development Editor at Packt Publishing. Thank you for reviewing my chapters. I appreciate your invaluable advice; it has helped me improve the quality of my writing. Also, I want to thank Priya Mukherji, Eleanor Duffy, and the team at Packt Publishing. It has been a happy experience working together with you!

I would also thank Dr. Jonas X. Yuan and Frank Yu for their friendship and encouragement along the way.

Frank Yu is a senior architect with 10 years of portal experience and co-founder of ForgeLife LLC, a San Francisco-based firm specializing in Liferay and CMS consulting and custom development. He manages multiple onshore and offshore teams to build portal and CMS applications. His team leadership, technical know-how, detail-oriented attitude, and result-driven approaches are highly valued by his clients.

Frank has extensive software engineering experience in Vignette-based and Liferay-based portal design, development, architecture, and project management, particularly in healthcare portal application development. He has hands-on experience of Liferay training, JSR 168, and JSR 286 portlets, portal themes and skins, the customization of portal frameworks, CMS, architecture, performance tuning, the administration of dozens of Amazon Elastic Compute Cloud (EC2) instances, and so on. He also has broad knowledge of system integration with multiple backends and major RDBMS and Java application servers. Previously, he worked on different portal products or applications at CIGNEX, InterComponentWare, Pay By Touch, and McKesson, a Fortune-14 healthcare company. Frank holds an M.S. degree in Computer & Information Sciences. He received his B.S. degree from Nanjing University, China.

I thank my co-authors, each of whom played a valuable role in ensuring that we were able to achieve coverage of a wide range of Liferay user interface feature set. It has been a great pleasure working with them.

I greatly appreciate the help from Milen Dyankov for reviewing my chapters. Thanks to Leena Purkait and Hyacintha D'Souza, the Production Coordinator and Development Editor respectively, at PACKT Publishing, for criticizing and editing my writing. Thanks also to Priya Mukherji and the entire team at PACKT Publishing.

I'm grateful for the many colleagues who have helped me over the years in different areas. Particularly, I would like to thank Alok Mathur, the CTO at Medicity, who hired me and introduced me to the portal technologies at McKesson in 2000.

I also thank my clients, my partners, and my team members across U.S. and China. It is they who make my projects successful and enjoyable. I thank the entire Liferay community, without them neither the project nor this book would be what it is today.

Last but not least, I would like to thank my wife, Yuting, for her continuing love and support, and for understanding that there is no separation between working time and spare time in the Liferay consulting world. My special thanks to my two wonderful daughters Marissa and Selina, who make me a proud father every single day.

About the Reviewer

Milen Dyankov is a Senior IT Architect at AMG.net specializing in designing corporate portals and e-commerce solutions for major telecommunication and financial companies in Poland and abroad. He is also owner of Commsen International, an IT consulting company providing open source solutions for middle size companies. He holds a master's degree of computer science from "Sv. Sv. Kiril i Metodi'" university in Veliko Turnovo, Bulgaria.

Since 1997, Milen has been monitoring, using and contributing to a number of Java and JEE open source initiatives. He is the author of "JStopwatch", "APropOS" and "JWebThumb" open source projects. Since 2008, Milen is active Liferay community member and in 2009 he released "liferay-maven-sdk" - an open source port of Liferay 5.2 SDK based on Maven2. In 2010 he started a "Commsen Liferay Plug-ins" project providing various open source portlets for Liferay Portal such like "Custom Global Markup" and "Tailgate".

Dr. Jonas X. Yuan

This book is dedicated to my wife Linda, my son Joshua, and my parents, Daxian and Zhengzi.

This book would not have been possible without your love and understanding.

Thank you from the bottom of my heart.

Xinsheng Chen

This book is dedicated to my elder sister Xinli Chen, who has always been supporting me behind the scene.

This book would not have been possible without your encouragement.

Thank you from the bottom of my heart

Frank Yu

This book is dedicated to my father and the memory of my mother.

Preface

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. However, 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.

Liferay User Interface Development is a pioneer in explaining Liferay's powerful theming system by leading 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

What this book covers

Chapter 1, Customizing your Liferay Portal, discussed Liferay architecture and framework, different kinds of plugins, and related development strategies.

Chapter 2, Basic Theme Development, addressed basic theme development, page structure, Plugins SDK, Liferay IDE, and so on. It also covered how to update each individual file in the subfolder, including CSS, images, JavaScript, and templates, and how to package, deploy, and test the themes.

Chapter 3, Layout Templates, addressed layout templates in detail. It introduced the basic concepts of Liferay Portal layout template, and how the theme, layout, and portlets work together to generate a portal page, how to create your own layout template, and page rendering code flow, and so on.

Chapter 4, Styling Pages, gave you specific and detailed answers on how to style your pages. It reviewed some Liferay terminologies, how to set up an organization, UI and usability features in Liferay Portal 6, internationalization (i18n) and localization (L10n) at different levels, UI customization of portal page, portlets, how to Add Application pop-up panel, use the Control Panel, and so on.

Chapter 5, Advanced Theme, provided details about what can be done for advanced themes. It covered how to change the value of the theme.parent property for theme creation, and addressed how to add color schemes, how to use Configurable settings in a theme and pre-defined theme settings, how to embed portlets in a theme, and other topics like theme upgrade, creating a FreeMarker-template theme, browser compatibility, Liferay IDE, and other development tools.

Chapter 6, Portlet User Interface, focused on how to customize portlet user interface. Of course, velocity templates will be useful. This chapter addressed multiple portlets support, portlet deployment, portlet and Layout, portlet content and portlet template, portlet chrome customization, Normal view and maximized view of a portlet, AJAX for portlet UI, Portable Document Format (PDF) reports and Excel reports, Vaadin portlets, common tags in portlets, portlet UI customization using hook.

Chapter 7, Velocity Templates, walked through velocity templates with you. This chapter introduced velocity template language, Velocity template, Velocimacro Velocity portlet, Five basic Velocity templates for a theme, Velocity templates and site performance, theme customization through Velocity templates, Velocity template for Web Content portlet, and freeMarker template.

Chapter 8, Alloy User Interface, focused on what's Alloy UI and how to use it. This chapter addressed the story of Alloy UI, What Alloy UI consists of, what Liferay wants to achieve with Alloy UI, Alloy form tags, node and nodelist, Ajax in Alloy UI, Alloy Plugin Widgets, and other Alloy UI features.

Chapter 9, UI Taglib gave specific details about UI tag libraries—what are they and how to use them in customization. Particularly, this chapter addressed important UI taglib, such as asset tag and categories, search container, custom attributes, tab, toggle, calendar, breadcrumb, navigation, panel, social activity, social bookmarks, discussion, ratings, diff, flags, icon, input, and many other useful UI tags.

Chapter 10, User Interface in Production, showed us how to use jQuery UI, Workflow capabilities, custom attributes capabilities in plugins; how to leverage friendly URL routing and mapping; how to use social UI, such as Open Social, Social Activities, and Social Equity; and how to add CAPTCHA or reCAPTCHA, to hook portal core UI and to deploy themes in production.

What you need for this book

This book uses Liferay portal version 6.0.5 with following settings:

MySQL database 5.1Java SE 6.0Liferay portal bundled with Tomcat 6.0

Although this book has explored in depth the various technologies used in Liferay user interface, it explains all the topics in an easy-to-understand way. This book is for any Java developers.

If you have some basic knowledge in web applications including servlets and portlets, you will understand better the discussions in this book.

Most importantly, if you like problem-solving and have an eye for perfection, this book is written for you.

We have opened our arms to welcome you to the Liferay world.

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.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "The layout is a fragment that fits inside a page generated by the velocity file portal_normal.vm of a Liferay theme "

A block of code is set as follows:

<div id="content"> <nav class="site-breadcrumbs" id="breadcrumbs"> <h1> <span>#language("breadcrumbs")</span> </h1> #breadcrumbs() </nav>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

#if ($selectable) $theme.include($content_include) #else $portletDisplay.recycle() $portletDisplay.setTitle($the_title)

Any command-line input or output is written as follows:

create <layout-template-name> "<layout template simple description>"

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Therefore, it is necessary for administrators or other users with ManagePages permission".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Tip

Downloading the example code for this book

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the erratasubmissionform link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Customizing your Liferay Portal

As the world's leading open source portal platform, Liferay portal provides a unified web interface to the data and tools scattered across many sources. Within Liferay portal, a portal interface is composed of a number of portlets, self-contained interactive elements that are written to a particular standard. As portlets are developed independently from the portal itself and are loosely coupled with the portal, they are apparently ServiceOrientedArchitecture (SOA).

This book will show you how to develop and / or customize user interface of intranets or Internets with Liferay. In this chapter, we will look at:

The features of the user interface you will have by the time you reach the end of this book The Liferay portal framework and architecture for customization The Liferay portal user interface customizing development strategies Theme, layout template, hook, and Alloy UI development customization How to find more technical information about what Liferay is and how it works

So let's begin by looking at exactly what Liferay portal and Social Office are, how to customize user interfaces, and how they work.

Liferay functionalities

Liferay currently has the following four main functionalities:

Liferayportal—JSR-168/JSR 286 enterprise portal platform LiferayCMSandWCM—JSR-170 content management system and web content managementLiferaycollaboration—collaboration software such as blogs, calendar, web mail, message boards, polls, RSS feeds, Wiki, presence (AJAX chat client, dynamic friend list, activity wall, and activity tracker), alerts and announcements, and so on LiferaySocialOffice—a social collaboration on top of the portal; a dynamic team workspace solution—all you have to do is log in and work the way you want to, at your convenience.

Generally speaking, a website built by Liferay might consist of a portal, CMS and WCM, collaboration, and / or social office.

Document stores—CMS

Image Gallery is a useful tool to manage images. For instance, within Image Gallery, you would be able to add folders and subfolders for images and moreover, manage folders and subfolders. You can also add images in folders and manage those images, and furthermore, set up permissions on folders and images. Document Library is a useful tool to manage any documents. For example, within Document Library, you can add folders and subfolders for documents to manage and publish documents. The Image Gallery and Document Library make up the ContentManagementSystems (CMS) available for intranets or Internet. Both of them are equipped with customizable folders and act as a web-based shared drive for all your team members, no matter where they are. As content is accessible only by those authorized by administrators, each individual file (document or image) is as open or as secure as you would need it to be.

Web Content Management—WCM

Your company may have a lot of HTML text, audios, videos, images, and documents using different structures and templates, and you may need to manage all these HTML text, images, and documents as well. Therefore, you require the ability to manage a lot of web content, and then publish web content in intranets or Internet.

We will see how to manage web content and how to publish web content within Liferay. Liferay Journal (called Web Content) does not only provide the availability to publish, manage, and maintain web content and documents, but it also separates content from layout. WCM allows us to create, edit, and publish web content (called Journal articles) as well as article templates for one-click changes in layout. It has built-in workflow, article versioning, search, and metadata features.

Personalization and internalization

All users can get a personal space that can be either made public (published as a website with a unique, friendly URL) or kept private. In fact users can have both private and public pages at the same time. You can also customize how the space looks, what tools and applications are included, what goes into the Document Library and Image Gallery, and who can view and access all of this content.

In addition, you can use your own language. Multilingual organizations get out-of-the-box support for up to 36 languages or called locales (such as Hindi, Hebrew, Ukrainian, and so on). Users can toggle among different language settings with just one click and produce/publish multilingual documents and web content. You can also easily add other languages in your public, private pages, or other organizations.

Workflow, staging, scheduling, and publishing

You can use workflow to manage definitions, instances, and tasks. You can also use the Web Content article two-step workflow, StagingWorkflow, jBPMworkflow, Kaleoworkflow, Activiti workflow and Intlio|BPMS. jBPMworkflow and / or Kaleoworkflow and / or Activiti workflow that can be applied on any assets such as Web Content articles, Document Library documents, Image Gallery images, and so on. In addition, Liferay portal allows you to define publishing workflow that tracks changes to web content as well as the pages of the site in which they live.

Social network and Social Office

Liferay portal supports social networking—you can easily own your accounts in Liferay with Facebook, MySpace, Twitter, and so on. In addition, you can easily manage your instant messenger accounts such as AIM, ICQ, Jabber, MSN, Skype, YM, and so on in Liferay portal.

SocialOffice gives us a social collaboration on top of the portal—a full virtual workspace that streamlines communication and builds up group cohesion. All components in Social Office are tied together seamlessly, getting everyone on the same page by sharing the same look and feel. More importantly, the dynamic activity tracking gives us a bird's-eye view of who has been doing what and when within each individual site.

Tagging

The portal tagging system allows us to tag web content, documents, message board threads, and more, and dynamically publish assets by tags. Tags provide a way of organizing and aggregating content. Folksonomies are a user-driven approach to organizing content through tags, cooperative classification, and communication through shared metadata. The portal implements folksonomies through tags. Taxonomies are a hierarchical structure used in scientific classification schemes. The portal implements taxonomies as vocabularies and categories, including category hierarchy, in order to tag contents and classify them.

In particular, the portal provides integrating framework so that you could integrate external applications easily. For example, you can integrate external applications such as Alfresco, OpenX, LDAP, SSO CAS, Orbeon Forms, KonaKart, PayPal, Solr, Coveo, Salesforce, SugarCRM, JasperForge, Drools, jBPM, and so on with the portal. Integrating standalone Java Web applications into the portal is not an easy task. However, Liferay makes it possible to achieve near-native integration with minimal effort via WAI (Web Application Integrator) portlet or IFrame portlet.

In addition, the portal uses the OSGi framework. That is, the portal is going to support a module system and service platform for the Java programming language that implements a complete and dynamic component model. For more information, refer to http://www.osgi.org.

In a word, the portal offers compelling benefits to today's enterprises—reduced operational costs, improved customer satisfaction, and streamlined business processes.

Leveraging framework and architecture for user interface development

Liferay portal architecture supports high availability for mission-critical applications using clustering fully–distributed cache and replication support across multiple servers. The following figure depicts the various architectural layers and functionality of portlets.

Service Oriented Architecture

Liferay portal uses Service Oriented Architecture (SOA) design principles throughout and provides the tools and framework to extend SOA to other enterprise applications. Under the Liferay enterprise architecture, not only can the users access the portal from traditional and / or wireless devices, but the developers can also access it from the exposed APIs via REST, SOAP, RMI, XML-RPC, XML, JSON, Hessian, Burlap, and custom-tunnel classes.

Liferay portal is designed to deploy portlets that adhere to the portlet API compliant with both JSR-168 and JSR-286. A set of useful portlets are bundled with the portal such as Image Gallery, Document Library, Calendar, Message Boards, Blogs, Wikis, and so on. They can be used as examples for adding custom portlets.

In a nutshell, the key features of Liferay include using SOA design principles throughout, such as reliable security, integrating with SSO and LDAP, multitier and limitless clustering, high availability, caching pages, dynamic virtual hosting, and so on. 

Enterprise Service Bus

The EnterpriseServiceBus (ESB) is a central connection manager that allows applications and services to be added quickly to an enterprise infrastructure. When an application needs to be replaced, it can be easily disconnected from the bus at a single point. Liferay portal could use Mule or ServiceMix as ESB.

Through ESB, the portal could integrate with SharePoint, BPM (such as jBPM workflow engine, Intalio | BPMS engine), rule engine, BI Xforms reporting, JCR repository, and so on. It supports JSR 170 for Content Management Systems with the integration of JCR repositories such as Jackrabbit. It also uses Hibernate and JDBC to connect to any database. Furthermore, it supports events' system with asynchronous messaging and lightweight message bus.

Liferay portal uses the Spring framework for its business and data services layers. It also uses the Spring framework for its transaction management. Based on service interfaces (Spring framework), portal-implementationis implemented and exposed only for the internal usage—for example, they are used for the extension environment or ext plugins. portal-kerneland portal-service(these two are merged into one package, called portal-service) are provided for the external usage (or for the internal usage)—for example, they are used for the Plugins SDK environment. Custom portlets, both JSR-168 and JSR-286, and web services can be built based on portal-kernel and portal-service.

In addition, Web 2.0 Mail portlet and Chat portlet are supported as well. More interestingly, scheduled staging and remote staging, and publishing serve as a foundation through tunnel web for web content management and publishing.

Liferay portal supports web services to make it easy for different applications in an enterprise to communicate with each other. Java, .NET, and proprietary applications can work together easily because web services use XML standards. It also supports REST-style JSON Web Services for lightweight, maintainable code, and furthermore, it supports AJAX-based user interfaces.

Liferay portal uses industry-standard, government-grade encryption technologies, including advanced algorithms such as DES, MD5, and RSA. Liferay was benchmarked as one of the most secure portal platforms using LogicLibrary's Logiscan suite. Liferay offers customizable single sign-on with Yale CAS, JAAS, LDAP, NTLM, Netegrity, Microsoft Exchange, Facebook, and more. Open ID, OpenAuth, Yale CAS, Facebook, Siteminder, and OpenSSO (renamed as OpenAM) integration are offered by the portal out of the box.

In short, Liferay portal uses the ESB in general, in order to provide an abstraction layer on top of an implementation of an enterprise messaging system. It allows integration architects to exploit the value of messaging without writing code. As you can see, understanding the framework and architecture would be helpful if you would want to customize the user interface in a proper way.

Standards

Liferay portal is built based on "Standards". This is a more technical benefit, however, a very useful one if you ever want to use Liferay in a more specialized way.

Liferay is developed based on standard technologies that are popular with developers and other IT experts. The features of Liferay are listed as follows:

BuiltusingJava: Java is a popular programming language that can run on just about any computer. There are millions of Java programmers in the world, so it won't be too hard to find developers who can customize Liferay. Basedontriedandtestedcomponents: With any tool, there's the danger of bugs. Liferay uses lots of well known, widely tested components to minimize the likelihood of bugs creeping in. If you are interested, here are some of the more well-known components and technologies used by Liferay—Apache ServiceMix, Mule, ehcache, Hibernate, ICEfaces, Java J2EE/JEE, jBPM, Intalio | BPMS, JGroups, Alloy UI, Lucene, PHP, Ruby, Seam, Spring and AOP, Struts and Tiles, Tapestry, Vaadin, Velocity, and FreeMarker. Usesstandardwaystocommunicatewithothersoftware: There are various standards established for sharing data between pieces of software. Liferay uses these so that you can easily get information from Liferay into other systems. The standards implemented by Liferay include AJAX, iCalendar, and Microformat, JSR-168, JSR-127, JSR-170, JSR-286 (Portlet 2.0), and JSR-314 (JSF 2.0), OpenSearch, Open platform with support for web services (including JSON, Hessian, Burlap, REST, RMI, and WSRP), WebDAV, and CalDAV. MakespublicationandcollaborationtoolsWCAG2.0(WebContentAccessibilityGuidelines)compliant: The new W3C Recommendation to make web content accessible to a wide range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these. For example, the portal integrates CKEditor—standards support: W3C (WAI-AA and WCAG), 508 (Section 508). AlloyUI: Supports HTML 5, CSS 3, and YUI 3 (Yahoo! User Interface Library).SupportsApacheAnt1.8andMaven2: Liferay portal could be built through Apache Ant by default, where you can build services, clean, compile, build JavaScript CMD, build language native to ASCII, deploy, fast deploy, and so on. Moreover, Liferay supports Maven 2 SDK, providing Community Edition (CE) releases through public maven repositories as well as Enterprise Edition (EE) customers to install maven artifacts in their local maven repository.

Many of these standards are things that you will never need to know much about, so don't worry if you've never heard of them. Liferay is better for using them, but mostly, you won't even know they are there. Of course, the user interface could be standardized, too. Therefore when developing and / or customizing user interface, you can leverage these standards.

Customization and development strategies

Liferay is, first and foremost, a platform, where you can build your own applications using the tools you feel most comfortable with, such as JSF 2, Icefaces, Struts 2, Spring MVC, Vaadin, jQuery, Dojo, and so on.

Of course, you're not required to write a lot of code for yourself. You can use Service-Builder to generate a lot of code. Generally speaking, the Service-Builder is a tool built by Liferay to automate the creation of interfaces and classes that are used by a given portal or portlets. The Service-Builder is used to build Java services that can be accessed in a variety of ways, including local access from Java code, remote access using web services, and so on.

In general, the Service-Builder is a code generator. Using an XML descriptor, it generates:

Java Beans SQL scripts for database tables creationHibernate ConfigurationSpring ConfigurationAxis Web Services and JSON JavaScript Interface 

Plugins SDK Environment is a simple environment for the development of Liferay plugins, for example, ext, themes, layout templates, portlets, hooks, and webs (web applications). It is completely separate from the Liferay portal core services and uses external services only if required.

The portal supports six different types of plugins out-of-the-box. They are Portlets, Themes, Layout Templates, Webs, Hooks, and Ext.

Portlets: These are web applications that run in a portion of a web page.Themes: These dictate the look and feel of your pages.Layout Templates: These are ways of choosing how the portlets will be arranged on a page.Hooks: These allow hooking into the portal core functionality; Webs: These are regular Java EE web modules designed to work with the portal, like ESB (Enterprise Service Bus), SSO (Single Sign-On), and so on. Note that a web is a pure web application where a thin layer is added to provide checking for dependencies. A web also adds support for embedding hook definition or Service Builder services within a plain old web application. And finally, you can deploy them using the auto-deploy mechanism the same way that you do with other plugins.Ext: It uses Ext environment as a plugin; that is, you can use the extension environment as a plugin in Plugins SDK environment. Besides hooks, this is another tool that you can use to customize the portal core functionality.

As you can see, you can generate code for plugins Portlets, Webs, and Ext. Normally you can have one project for one plugin, for example, theme, layout template, hook, ext, and web; you can have many portlets in one plugin project portlet. Hook plugins could be standalone, or stand with portlets or webs. That is, in one plugin project portlet, you can have one hook and many portlets in one WAR file. As you can see, user interface can be customized or developed within these plugins, mostly in the same way, such as portlets, themes, layout templates, hooks, and ext.

LiferayIDE is used to provide best-of-breed eclipse tooling for Liferay Portal development platform for version 6 and greater. The availabilities of Liferay IDE cover, but not limited, plugins SDK support, plug-in projects support, project import and conversion, wizards, code assist like portlet taglibs, customizable templates, XML catalogue (DAT/XSD) contributions.

Ext Plugins

The Extension environment provides capability to customize Liferay portal completely. As it is an environment which extends Liferay portal development environment, it has the name "Extension", or called "Ext". By the Ext, we could modify internal portlets, or called the out-of-the-box portlets. Moreover, we could override the JSP files of portal and out-of-the-box portlets. This kind of customization is kept separate from the Liferay portal source code. That is, the Liferay portal source code does not have to be modified, and a clear upgrade path is available in the Ext.

From version 6, Ext environment is available as a plugin called Ext plugin. As shown in the following figure, custom code will override Liferay portal source code in the Ext plugin only. In deployment process, custom code is merged with Liferay portal source code. That is, developers override the Liferay portal source code. Moreover, custom code and Liferay portal source code will be constructed as customized Liferay portal first, and then the customized Liferay portal will be deployed an application server.

During customization, we could use the Service Builder to generate models and services. In general, the Service-Builder is a code generator, using an XML descriptor. For a given XML file service.xml, it will generate SQL for creating tables, Java Beans, Hibernate configuration, spring configuration, Axis Web Service, JSON JavaScript Interface, and so on.

The JSP files of the portal and the out-of-the-box portlets can be overridden with custom versions in the Ext. Note that the Ext is used for customizing Liferay portal core only, as the WAR files written in the Ext are not hot deployable, moreover, the Ext is a monolithic environment.

Under ${ext.plugin.project}/docroot/WEB-INF, you'll see a lot of folders that start with ext-* as shown in the following screenshot.

ext-impl/src contains code that will override portal-impl/srcext-lib/global is where you put jars that are available in the global class loader ext-lib/portal is where you put jars that are available only to the portal class loader ext-service/src contains code that will override portal-service/srcext-util-bridges/src contains code that will override util-bridges/srcext-util-java/src contains code that will override util-java/srcext-util-taglib/src contains code that will override util-taglib/srcext-web/docroot contains code that will override portal-web

Note that if you modify ext-web/docroot/WEB-INF/web.xml, these changes are merged into portal-web/WEB-INF/web.xml. The folder ext-web also contains /WEB-INF/*-ext.xml files that are used to override what is in portal-web.

As you can see, Ext plugin works very similarly to that of Ext environment, but it is much smaller and more light weight.

Hook plugins

Hooks are a feature to catch hold of the properties and JSP files into an instance of the portal, as if catching them with a hook. Hook plugins are more powerful plugins that come to complement portlets, themes, layout templates, and web modules. A hook plugin can, but does not have to be combined with a portlet plugin. For instance, the portlet so-portlet is a portlet plugin for Social Office with hooks; a hook plugin can simply provide translation or override JSP page. In general, hooks would be very helpful tool to customize the portal without touching the code part of the portal, as shown in following figure. In addition, you would use hooks to provide patches for the portal systems or social office products.

In general, there are four kinds of hook parameters:

portal-properties (called portal properties hooks)language-properties (called language properties hooks)custom-jsp-dir (called custom JSPs hooks) and service (called portal service hooks)

as specified in $PORTAL_ROOT_HOME/dtd/liferay-hook_6_0_0.dtd.

<!ELEMENT hook (portal-properties?, language-properties*, custom-jsp-dir?, service*)> <!ELEMENT portal-properties (#PCDATA)> <!ELEMENT language-properties (#PCDATA)> <!ELEMENT custom-jsp-dir (#PCDATA)> <!ELEMENT service (service-type, service-impl)> <!ELEMENT service-type (#PCDATA)> <!ELEMENT service-impl (#PCDATA)>

As shown in the preceding code, the ordering of elements is significant in the DTD (Document Type Definition)—you need to have your own portal-properties (only one marked by ?), language-properties (could be many marked by *), custom-jsp-dir (only one marked by ?), and service (could be many marked by *) declared in the same order.

Language properties hooks allow us to install new translations or override few words in existing translations. JSP hooks provide a way to easily modify JSP files without having to alter the core of the portal, whereas portal properties hooks allow runtime re-configuration of the portal. Portal service hooks provide a way to easily override portal services. The portal configuration properties can be altered by specifying an overriding file, where the properties will immediately take effect when deployed. For example, you can enable auditing capabilities using hooks. Note that not all properties can be overridden by hooks.

Portlet and web plugins

As you can see, the Plugins SDK is a simple environment for the development of Liferay plugins, including portlets, and webs (that is, web applications). It provides capability to create hot-deployable portlets and webs.

How does it work? As shown in following figure, the Plugins SDK provides environment for developers to build portlets and webs. Later, it uses the Ant target Deploy or Maven to form WAR file and copy it to the Auto Deploy directory. Then, Liferay portal together with the application server will detect any WAR files in the auto hot-deploy folder, and automatically extracts the WAR files into the application server deployment folder. Note that the portal is able to recognize the type of the plugin and enhance it appropriately before hot deploying it. For example, for portlets it will modify web.xml adding required listeners and filters.

Customizing user interface through themes development framework

A theme specifies styles of all major global portlets and content, so it controls the way the portal will look. In general, a theme uses CSS, images, JavaScript, and Velocity (or FreeMarker) templates to control the whole look and feel of the pages generated by the portal. Therefore, when creating customized themes, we need to consider these four groups as well. The theme is made up of a folder _diffs with four subfolders css, images, javascript, and templates; and a folder WEB-INF with the properties file liferay-plugin-package.properties and, optionally, XML file liferay-look-and-feel.xml.

As shown in the following figure, when you deploy a theme, it will copy all files from the folder ${app.server.portal.dir}/html/themes/_unstyled/ to the folder $PLUGINS_SDK_HOME/themes/${theme-name}/docroot/ first. In fact this will happen during build time, instead of deploy time.All files from the folder ${app.server.portal.dir}/html/themes/_styled/ are copied to the folder $PLUGINS_SDK_HOME/themes/${theme-name}/docroot/, too. Later, it will copy all files from the folder $PLUGINS_SDK_HOME/themes/${theme-name}/docroot/_diffs/ to the folder $PLUGINS_SDK_HOME/themes/${theme-name}/docroot/. It means that you will override existing files with new files and changed files under the folder $PLUGINS_SDK_HOME/themes/${theme-name}/docroot. Here the ${theme-name} refer to a real theme project name.

Then, you will see four folders such as css, images, javascript, and templates under the folder