PrimeFaces Theme Development

Create, package, and customize stunning themes using PrimeFaces
Preview in Mapt

PrimeFaces Theme Development

Andy Bailey, Sudheer Jonna

1 customer reviews
Create, package, and customize stunning themes using PrimeFaces
Mapt Subscription
FREE
$29.99/m after trial
eBook
$19.60
RRP $27.99
Save 29%
Print + eBook
$34.99
RRP $34.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$19.60
$34.99
$29.99 p/m after trial
RRP $27.99
RRP $34.99
Subscription
eBook
Print + eBook
Start 14 Day Trial

Frequently bought together


PrimeFaces Theme Development Book Cover
PrimeFaces Theme Development
$ 27.99
$ 19.60
UI Development with Shiny [Video] Book Cover
UI Development with Shiny [Video]
$ 124.99
$ 106.25
Buy 2 for $35.00
Save $117.98
Add to Cart

Book Details

ISBN 139781783988686
Paperback224 pages

Book Description

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.

Table of Contents

Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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

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

Authors

Table of Contents

Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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

Book Details

ISBN 139781783988686
Paperback224 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

PrimeFaces Cookbook - Second Edition Book Cover
PrimeFaces Cookbook - Second Edition
$ 35.99
$ 25.20
JSF 2.0 Cookbook Book Cover
JSF 2.0 Cookbook
$ 26.99
$ 18.90
PrimeFaces Cookbook - Second Edition Book Cover
PrimeFaces Cookbook - Second Edition
$ 35.99
$ 25.20
Instant PrimeFaces Starter Book Cover
Instant PrimeFaces Starter
$ 14.99
$ 1.50
Instant PrimeFaces Starter Book Cover
Instant PrimeFaces Starter
$ 14.99
$ 1.50
Spring: Developing Java Applications for the Enterprise Book Cover
Spring: Developing Java Applications for the Enterprise
$ 67.99
$ 47.60