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

Changing the initial font and font size in your theme

One of the first things that a website owner specifies is the font, or fonts, that they want to use in their website. Together with the logo and the foreground and background colors, these are generally the things that they want their visitors to see.

Changing the font characteristics of your theme is also the easiest place to start.

First, locate the CSS rules that set the font family. We open the theme.css file and search for font-family. My editor shows that this is defined by just two rules —ui-widget and ui-widget button.

In moodyblue2, the rules look like this:

.ui-widget {
    font-family: 'Segoe UI',Arial,sans-serif;
    font-size: 1.0em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: 'Segoe UI',Arial,sans-serif;
}

Both the rules define the same font family, with the first choice of font being Segoe UI. This font is incidentally the one that Windows 7 uses as its system font. I chose...

Previous Section
End of Section 4
Next Section