PrimeFaces Theme Development

Andy Bailey, Sudheer Jonna

• Publisher: Packt Publishing
• Year: 2015
• ISBN:
  9781783988686
• Edition: 1
• Topic: Informatica
• Subtopic: Programmazione web

Create, package, and customize stunning themes using PrimeFaces

About This Book

• Build PrimeFaces themes that meet the industry standards
• Customize your themes for mobile web applications with PrimeFaces Mobile
• A precise, example-oriented guide to help you create interesting themes using the PrimeFaces tools

Who This Book Is For

If you are a Web Designer who wants to create and modify PrimeFaces themes then this book is for you. Basic knowledge of JSF, CSS, and HTML is assumed.

What You Will Learn

• Use Maven to create JSF Projects
• Create a custom theme using JQuery UI tools
• Package your theme for distribution and use your PrimeFaces-based web applications as drop in libraries
• Develop additional dynamic look and feel elements that themes do not already supply
• Apply look and feel elements dynamically to views without causing page refreshes
• Reduce code repetition by applying page templates to your JSF project

In Detail

Developing stunning themes for web applications has never been easier! PrimeFaces delivers a powerful set of features that enables JSF developers to create and customize awesome themes on the web. It is very easy to use because it comes as a single JAR file and requires no mandatory XML configuration. With more than 30 out-of-the-box themes, jQuery integration, a mobile UI toolkit, Ajax Push technology, and much more, PrimeFaces takes JSF application development to a whole new level!

This book is a hands-on example-rich guide to creating and customizing PrimeFaces themes using available tools.

Beginning with creating a JSF project and integrating the PrimeFaces library, this book will introduce you to the features of theme components, how these are structured, and how PrimeFaces uses JQuery UI to apply a theme to your application. You will learn to examine and change the CSS rules and get creative by setting standard icons and adding new icons to them. You will use a combination of JavaScript and CSS to enhance your application with help of scheduler component and go on to adapt and package your custom theme so that it is compatible with the Resource Manager.

Finally, you will explore PrimeFaces mobile apps, ensuring themes are compatible with your mobile applications best practices for theme design.

Style and approach

This book is a concise, hands-on guide to developing PrimeFaces themes, working from the ground up with examples in each topic implemented in a web application. You will be encouraged to explore areas of your own interest without the requirement to stick to the letter of the chapter.

PrimeFaces Theme Development

---

Table of Contents

PrimeFaces Theme Development

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. To Skin an App

Why we need to create an app

The PrimeFaces library

Creating a NetBeans Maven JSF project

Adding the PrimeFaces library and related dependencies to our project

Building the project

Running the project

Summary

2. Introducing PrimeFaces Themes

The difference between standard JSF and PrimeFaces components

Adding additional PrimeFaces themes

The PrimeFaces ThemeSwitcher component

Creating the CurrentTheme Bean

Extending the ThemeService Bean

Creating a Facelets Template

Creating a Mini Showcase page

Adding buttons that change the theme without using ThemeSwitcher

Summary

3. jQuery UI, ThemeRoller, and the Anatomy of a Theme

jQuery UI and its standard CSS rules

The difference between a layout and the look and feel of UI components

How PrimeFaces uses the jQuery UI CSS rules

Changing the initial font and font size

Creating a theme and downloading it

Comparing our theme to a PrimeFaces one

Packaging and adding our custom theme to the project

Adding the new theme to the ThemeSwitcher class

Summary

4. A PrimeFaces inputText Component in Detail

Creating a new JSF page and adding a standard inputText component

Examining the UI element using the browser developer tool

Adding a PrimeFaces inputText component to the page and comparing these two elements

Turning a standard component into a PrimeFaces one

Summary

5. Let's Get Creative

Creating a new JSF page

Using your unpackaged theme and applying it to your application

Changing the initial font and font size in your theme

Changing the foreground and background colors

Changing the highlighted, active, and selected CSS rules

Changing the rounding rules

Changing the shadow effects

Changing the menu background

Summary

6. Icons

Introducing the standard theme icon set

Creating a set of icons of our own

Adding the new icons to your theme

Using custom icons in the commandButton components

Using custom icons in a menu component

The Font Awesome icons as an alternative to the ThemeRoller icons

Summary

7. Dynamic Changes – a Working Example

Introducing the schedule component

A lack of skinning support for date and event selection

Creating a CSS rule to set the background color in an HTML element

Creating a JavaScript function to apply CSS rules to a specific HTML element

Executing a client-side JavaScript function from the server-side – the power of AJAX and RequestContext

Summary

8. Mobile Web Apps

The demand of creating a powerful mobile website

Restrictions of real estate mobile device screens are simply smaller

Introducing PrimeFaces Mobile for JSF-based applications

The differences between PrimeFaces Mobile and normal PrimeFaces

Creating customized mobile themes – the power of jQuery Mobile ThemeRoller

Applying customized mobile themes to PrimeFaces Mobile

Summary

9. The Final Touches

The PrimeFaces showcase

See what you don’t like in the showcase and apply the changes

See what you do like in the showcase and make everything look that way

Do the changes same way for PrimeFaces Mobile

Packaging your custom theme

Creating CSS files that provide variations on a theme

Summary

10. Theme Design Best Practices

Introduction of WAI for good web design

Colors, icon sets, background, and foreground

Fonts make the text stand out

Rich Internet applications versus desktop applications

Functions per page

Components you will be using

Some important PrimeFaces CSS classes

Going beyond the standard PrimeFaces theme

Override PrimeFaces CSS classes

Override specific component CSS styles

Preview the theme styles before going to use

Considerations for mobile applications

Busy UI versus data-dominated UI

Feedback from potential users

Miscellaneous best practices

Summary

11. Premium Themes and Layouts, and Third-party Converter Tools

Introducing premium themes and layouts

Setting up and installing premium themes

Using CSS Less support to customize CSS styles easily

Brand new themes based on Google Material Design language

A brief coverage of different premium themes and layouts features

Third-party theme converters

Summary

Index

PrimeFaces Theme Development

Copyright © 2015 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: October 2015

Production reference: 1231015

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78398-868-6

www.packtpub.com

Credits

Authors

Andy Bailey

Sudheer Jonna

Reviewers

Aristides Villarreal Bravo

Sebastian D'Agostino

Daswanth Karuchola

Glauco Márdano

Daryl Mathison

Commissioning Editor

Amarabha Banerjee

Acquisition Editor

Usha Iyer

Content Development Editor

Arun Nadar

Technical Editor

Gaurav Suri

Copy Editor

Vedangi Narvekar

Project Coordinator

Neha Bhatnagar

Proofreader

Safis Editing

Indexer

Hemangini Bari

Graphics

Abhinash Sahu

Production Coordinator

Nitesh Thakur

Cover Work

Nitesh Thakur

About the Authors

Andy Bailey is a middle-aged Java enthusiast. He has been involved in Java development since the humble beginnings of Java 1.0.1 in 1995. He thoroughly enjoys challenges even more so now than ever.

He has had a varied career, including extended employment with the UK Ministry of Defence, youth outreach programs as a volunteer, and a volunteer paramedic.

After gaining a degree in computer science with artificial intelligence from the University of Sussex, he immigrated to Germany in 1996. He learned how to speak and write in German while being involved in projects as diverse as 24/7 multimedia live streaming and buffering free mul...