Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search 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
  • Feedback & Rating feedback
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
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
Free Chapter
1
1. To Skin an App
chevron up
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

The PrimeFaces library

While looking for a suitable set of Open Source (OS) JSF components several years ago, I discovered PrimeFaces almost by accident. What I found was a link to the PrimeFaces showcase. I was immediately impressed by the number of components that it offered and the fact that skins or themes were supported out of the box. Also, PrimeFaces uses industry-standard libraries such as jQuery and jQuery UI to make things work well and look good too. Because PrimeFaces uses the JSF standard extension framework, there are no headaches involved in integrating it into new or existing projects. In addition to providing a set of JSF components, it also provides a complete set of data model classes to support the various data-oriented components and some very useful utility classes as well. Last, but not least, PrimeFaces offers WebSocket support by integrating the excellent Atmosphere WebSocket library.

PrimeFaces also has a very active forum community, where I am often found answering questions asked by users, and hopefully getting them right too.

The version of PrimeFaces that I first used was 2.2, and at the time of writing this book, PrimeFaces has reached release 5.2, with 5.3 in the pipeline. The team of developers has done a wonderful job providing us with, in my opinion, the best OS JSF component library out there. It is worth paying a visit to the showcase at http://www.primefaces.org/showcase/, especially now that it has had a face lift and the very capable components are shown off in all their glory.

End of Section 3
Next Section

Create a Note

Modal Close icon
You need to login to use this feature.
notes
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Delete Note

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

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