Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Primefaces Theme development
  • Table Of Contents Toc
Primefaces Theme development

Primefaces Theme development

By : Andy Bailey, Sudheer Jonna
Buy this Book
close
close
Primefaces Theme development

Primefaces Theme development

By: Andy Bailey, Sudheer Jonna
Buy this Book

Overview of this book

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 (13 chapters)
close
close
close
Preface
chevron up
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. To Skin an App
Icon
1. To Skin an App
Icon
Why we need to create an app
Icon
The PrimeFaces library
Icon
Creating a NetBeans Maven JSF project
Icon
Adding the PrimeFaces library and related dependencies to our project
Icon
Building the project
Icon
Running the project
Icon
Summary
2
2. Introducing PrimeFaces Themes
Icon
2. Introducing PrimeFaces Themes
Icon
The difference between standard JSF and PrimeFaces components
Icon
Adding additional PrimeFaces themes
Icon
The PrimeFaces ThemeSwitcher component
Icon
Creating the CurrentTheme Bean
Icon
Extending the ThemeService Bean
Icon
Creating a Facelets Template
Icon
Creating a Mini Showcase page
Icon
Adding buttons that change the theme without using ThemeSwitcher
Icon
Summary
3
3. jQuery UI, ThemeRoller, and the Anatomy of a Theme
Icon
3. jQuery UI, ThemeRoller, and the Anatomy of a Theme
Icon
jQuery UI and its standard CSS rules
Icon
The difference between a layout and the look and feel of UI components
Icon
How PrimeFaces uses the jQuery UI CSS rules
Icon
Changing the initial font and font size
Icon
Creating a theme and downloading it
Icon
Comparing our theme to a PrimeFaces one
Icon
Packaging and adding our custom theme to the project
Icon
Adding the new theme to the ThemeSwitcher class
Icon
Summary
4
4. A PrimeFaces inputText Component in Detail
Icon
4. A PrimeFaces inputText Component in Detail
Icon
Creating a new JSF page and adding a standard inputText component
Icon
Examining the UI element using the browser developer tool
Icon
Adding a PrimeFaces inputText component to the page and comparing these two elements
Icon
Turning a standard component into a PrimeFaces one
Icon
Summary
5
5. Let's Get Creative
Icon
5. Let's Get Creative
Icon
Creating a new JSF page
Icon
Using your unpackaged theme and applying it to your application
Icon
Changing the initial font and font size in your theme
Icon
Changing the foreground and background colors
Icon
Changing the highlighted, active, and selected CSS rules
Icon
Changing the rounding rules
Icon
Changing the shadow effects
Icon
Changing the menu background
Icon
Summary
6
6. Icons
Icon
6. Icons
Icon
Introducing the standard theme icon set
Icon
Creating a set of icons of our own
Icon
Adding the new icons to your theme
Icon
Using custom icons in the commandButton components
Icon
Using custom icons in a menu component
Icon
The Font Awesome icons as an alternative to the ThemeRoller icons
Icon
Summary
7
7. Dynamic Changes – a Working Example
Icon
7. Dynamic Changes – a Working Example
Icon
Introducing the schedule component
Icon
A lack of skinning support for date and event selection
Icon
Creating a CSS rule to set the background color in an HTML element
Icon
Creating a JavaScript function to apply CSS rules to a specific HTML element
Icon
Executing a client-side JavaScript function from the server-side – the power of AJAX and RequestContext
Icon
Summary
8
8. Mobile Web Apps
Icon
8. Mobile Web Apps
Icon
The demand of creating a powerful mobile website
Icon
Restrictions of real estate mobile device screens are simply smaller
Icon
Introducing PrimeFaces Mobile for JSF-based applications
Icon
The differences between PrimeFaces Mobile and normal PrimeFaces
Icon
Creating customized mobile themes – the power of jQuery Mobile ThemeRoller
Icon
Applying customized mobile themes to PrimeFaces Mobile
Icon
Summary
9
9. The Final Touches
Icon
9. The Final Touches
Icon
The PrimeFaces showcase
Icon
See what you don’t like in the showcase and apply the changes
Icon
See what you do like in the showcase and make everything look that way
Icon
Do the changes same way for PrimeFaces Mobile
Icon
Packaging your custom theme
Icon
Creating CSS files that provide variations on a theme
Icon
Summary
10
10. Theme Design Best Practices
Icon
10. Theme Design Best Practices
Icon
Introduction of WAI for good web design
Icon
Colors, icon sets, background, and foreground
Icon
Fonts make the text stand out
Icon
Rich Internet applications versus desktop applications
Icon
Functions per page
Icon
Components you will be using
Icon
Some important PrimeFaces CSS classes
Icon
Going beyond the standard PrimeFaces theme
Icon
Override PrimeFaces CSS classes
Icon
Override specific component CSS styles
Icon
Preview the theme styles before going to use
Icon
Considerations for mobile applications
Icon
Busy UI versus data-dominated UI
Icon
Feedback from potential users
Icon
Miscellaneous best practices
Icon
Summary
11
11. Premium Themes and Layouts, and Third-party Converter Tools
Icon
11. Premium Themes and Layouts, and Third-party Converter Tools
Icon
Introducing premium themes and layouts
Icon
Setting up and installing premium themes
Icon
Using CSS Less support to customize CSS styles easily
Icon
Brand new themes based on Google Material Design language
Icon
A brief coverage of different premium themes and layouts features
Icon
Third-party theme converters
Icon
Summary
12
Index
Icon
Index

Preface

One of the most popular and commonly used web application frameworks today is JavaServer Faces (JSF) 2.2. Since the introduction of JSF 2, there are a plethora of component libraries that provide more functionality than that provided by standard JSF components. PrimeFaces is one of the leading component libraries available today.

PrimeFaces not only provides a rich set of UI components, but also has the concept of themes integrated from the beginning. PrimeFaces themes use jQuery UI as a foundation, which makes adapting to the existing or creating completely customized themes a gentle and rewarding process. Because jQuery UI is used to create themes, there is a plethora of documentation and tools available for you to use. This makes working with PrimeFaces themes very easy.

This book is aimed at the developers of Java Server Faces web applications; these applications use the PrimeFaces component library. Together, we are going to have a look at how to use built-in PrimeFaces themes, adjust these themes to fit a particular application's needs, and finally create custom themes for both desktop- and mobile-based web apps. By the time you have read this book and worked on the examples provided in its chapters, you will hopefully have gained valuable insights into the PrimeFaces technology, and especially into how PrimeFaces themes can be used to enrich user experience for your applications.

The practical exercises in the book can be run using any web server that supports JSF2/2.2 and Java 6+. The IDE used for the examples in the book was NetBeans 8.0.1, but any IDE that supports Maven and a suitable web/application server can be used in its place.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Primefaces Theme development
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon