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.
Table of Contents (18 chapters)
PrimeFaces Theme Development
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a NetBeans Maven JSF project


After launching NetBeans, open the File menu and select New Project from the available project types. Locate and select Maven. A list of Maven archetypes (project templates) is available. Select Web Application, as shown in the following screenshot:

Click on Next and the following screenshot appears:

Project Name is set to PFThemes.

Project Location is generated automatically and it does not need to be changed.

The following Maven properties are listed:

  • Artifact Id: This cannot be changed. It is the name of your project.

  • Group Id: This can be edited as required. This sets the base package for the project.

  • Version: This does not need to be changed.

  • Project: This is the last property that we will use to set the root package for all the Java classes in the project.

Now that we have set the name and location of the project, click on Next. This leads us to the Settings dialog box. This is where we set the application server and Java Enterprise Edition (EE) version that we are going to use for the project, as shown in the following screenshot:

I chose GlassFish because it is the Java EE reference implementation. I selected GlassFish Server 4.0 because this is the current release version of GlassFish and the nightly builds are available to me.

Tip

You can use any Java EE 7 container that supports the Java EE 7 web profile that you like. The list of potential servers is long, but Tomcat (http://tomcat.apache.org/), TomEE (http://tomee.apache.org/), and WildFly (http://wildfly.org/) are suitable ones. Tomcat and TomEE are freely available from the Apache Software Foundation (http://apache.org/)and WildFly is available from RedHat.

Once we have set the project settings, we can finish creating it. NetBeans presents us with a Project view containing our newly created project. If it hasn't opened a Project view, open the Windows menu and select Projects. You can also open a Files and a Services view. This allows us to check the files as they are built into the project, and through the Services view we can control things such as the GlassFish server, as well as other services such as database connections.

Now that we have successfully created the project, we have to change the project properties so that it adds the JSF framework to it.

Note

The JSF framework is part of the Java EE 7 standard version. It allows developers to build views/pages that are separate from the business logic and data models that make up the middle tier of data-driven applications. Because PrimeFaces builds on the facilities provided by JSF, we need to add it to our project.

Select the project and right-click on it. This opens a context menu, which allows us to perform different tasks and control various aspects of the project itself. We are interested in the one at the bottom, Properties. We click on it to open the Project Properties dialog box and select the Frameworks option, as shown in the following screenshot:

By clicking on the Add… button to the right, we can select a framework from a number of choices. We want JSF, so we select it and click on OK, as follows:

We return to the Project Properties | Frameworks dialog box, which looks like this:

The three tabs, Libraries, Configuration, and Components, are used to display and/or change the configuration of the JSF framework for our project. Libraries cannot be altered, but it shows that we are using Java EE 7 JSF version 2.2. I also changed the configuration as follows:

The JSF Servlet URL Pattern field has been changed to *.xhtml from the default one because it makes the linking of JSF pages easier. However, this is a purely personal preference and it is not something that you need to do.

Tip

The Components tab does allow us to add the PrimeFaces library to our project. However, it adds the version bundled with NetBeans, and not the one that we will be using for our project, which is PrimeFaces 5.2 at the time of writing this book.

Once you have set up the JSF framework to your satisfaction, click on OK, and the changes will be applied to our project.

Tip

While we have been doing this, NetBeans should have been building the project in the background, including the creation of the project from its Maven archetype. Maven downloads quite a large number of files when a project is created. Luckily for us, it only does this once. Maven also maintains a local repository of resources on our workstation for us so that once a file is downloaded from the Maven Central Repository it doesn't need to be download from there again.