Book Image

Primefaces Theme development

Book Image

Primefaces Theme development

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.

Related Content you might be interested in

Current Title:

Small book image
Primefaces Theme development
Nov, 2015 | 224 pages
No titles found
Table of Contents (18 chapters)
PrimeFaces Theme Development
PrimeFaces Theme Development
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
To Skin an App
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
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, 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
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
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
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
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
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 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
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
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
Index

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 multimedia playback to design, develop, and build systems to control, monitor, and analyze data collected from gaming machines in a widely distributed environment.

This is his first publication. However, he has helped review other publications, including PrimeFaces Cookbook.

To my wife, Monika, all my family, friends and colleagues I give a big thank you for giving me the time to write this book.

To the Packt Team and especially Sudheer; without you this would not have been possible. Words cannot begin to express my thanks.

Sudheer Jonna was born in Andhra Pradesh, India, in 1987. Currently, he works as a senior software engineer in Chennai, India. He completed his master's degree in computer applications from JNTU. In the past 4-5 years, he worked on providing architectural designs and building various web applications based on JSF, Struts, Spring, jQuery, JPA, EJB, and various Java EE and frontend technologies.

He is a JSF and PrimeFaces expert. He has been working with the PrimeFaces component library since 2011. He worked as a committer and project member of PrimeFaces and PrimeFaces Extensions open source projects. He has been a well-known, recognized member of the PrimeFaces community for the past few years. He is also the author of Learning PrimeFaces Extensions Development and PrimeFaces BluePrints books, Packt Publishing. He worked as reviewer for PrimeFaces Beginner's Guide and community reviewer for many other books.

Besides working with the aforementioned technologies, he also writes technical articles, provides online training, designs and develops web application architecture, writes books and reviews, and provides suggestions through online forums and blogs. He is interested in the research and development of various popular Java EE frameworks and many other latest technologies.

He shares his knowledge through GitHub (https://github.com/sudheerj). He recently started blogging (http://sudheerjonna.blogspot.in/). You can follow him on Twitter (@SudheerJonna) or contact him on Gmail at .

I would like to thank my co-author, Andy Bailey, the PrimeFaces lead, Cagatay Civici, the Packt book reviewers, and the Packt team for their support and great teamwork in the past few years.

Also, a huge thanks to my family members, colleagues, and friends for their support in completing this book in a short span of time.

Previous Section
Next Chapter