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 Reviewers

Aristides Villarreal Bravo is a Java developer and a member of the NetBeans Dream Team and Java User Groups Leaders. He lives in Panama.

He has organized and participated in various national and international conferences and seminars related to Java, Java EE, NetBeans, NetBeans platform, free software, and mobile devices.

He writes tutorials and blogs about Java, NetBeans, and web developers. He has reviewed several books for Packt Publishing. He also develops plugins for NetBeans.

He specializes in JSE, JEE, JPA, Agile, and Continuous Integration. He shares his knowledge via his blog, which can be viewed at http://avbravo.blogspot.com. He is the CEO of JavScAz Software Developers.

To my family.

Sebastian D'Agostino lives in Argentina. He earned his computer software engineer degree from the University of Buenos Aires (UBA). He has been developing with C, C++, and Java EE in a professional manner for 6 years. He worked for big multinational companies such as Oracle as well as participated in freelance work. He was involved in different projects pertaining to backend, middleware, frontend and even functional analysis. His frontend experience includes Struts, PrimeFaces, and AngularJS. Presently, he is working for Banco Industrial (Bind, Industrial Bank) and studying for master's in information technology and communications at Universidad Argentina de la Empresa (UADE).

I would like to thank my parents and my family for their constant support towards my decisions related to my life and career.

Daswanth Karuchola is currently working as a software developer with more than 8 years of relevant background in software development. He has knowledge of software development processes (such as Agile and Scrum) and practices (such as TDD), functional and object-oriented paradigms, the Java, C++, and C# programming languages, Java EE, and the Windows and Linux operating systems.

He is highly proficient in Java, JSF, PrimeFaces, and RichFaces. He would like to dabble in Hadoop and Cloud computing.

He has experience working with Java EE 1.4+ (JPA/JTA/JAXB/JSF/JSP/JDBC/JNDI/JMS/JAX-WS/JAX-RS/Servlets/Spring/Hibernate/Apache ActiveMQ/Apache CXF/Apache Lucene/Apache HBase/Infinispan/EhCache/Hazelcast/Websockets), MySQL, PostgreSQL, Eclipse, C++ Builder, MongoDB, Redis, and Oracle.

He specializes in software development, distributed systems, web applications, desktop application, rich Internet applications (RIA), cloud computing, databases, and NoSQL solutions.

Glauco Márdano is 24, has a degree in system analysis, and has been working with Java web development for about 3 years. His main interests are related to technology and finance. He likes to learn new subjects pertaining to his interests.

He is also the author of jMonkeyEngine 3.0 Cookbook, Learning Pentesting for Android Devices, and Learning Android Intents from Packt Publishing.

I'd like to thank Neha Bhatnagar for being very patient with the reviewing process. She's done a great job with the project management, and I'm very pleased about it.

Daryl Mathison has been heavily involved in computers since he was in elementary school. He has been professionally developing software since 1998. He has used C, C++, Java, and Python to solve various software problems. He writes a blog about Java, which has been reposted in Java Coding Geeks several times. The subjects that he is current exploring are OSGi, Maven, and cloud computing.

I would like to acknowledge my wonderful wife. She has been patient and understanding through the nights that were taken up by the reviewing of this book.

Previous Section
Next Chapter