Home Web Development PrimeFaces Theme Development

PrimeFaces Theme Development

By Andrew Mark R Bailey , Davi Ferreira , Andy Bailey
books-svg-icon Book
eBook $29.99 $20.98
Print $38.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $29.99 $20.98
Print $38.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    To Skin an App
About 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.
Publication date:
November 2015
Publisher
Packt
Pages
224
ISBN
9781783988686

 

Chapter 1. To Skin an App

In this chapter, you will be introduced to the PrimeFaces JSF (short for JavaServer Faces) component library, and you will create a Maven-based JSF web application. This application will be used throughout the book to demonstrate and test the things that we will learn in each chapter and section.

In this chapter, we will cover the following topics:

  • Why we need to create an app

  • An introduction to the PrimeFaces library

  • Creating a Maven JSF project

  • Integrating the PrimeFaces library into a Maven JSF project

  • Adding the additional dependencies that GlassFish needs

  • Building the project

  • Running the project

 

Why we need to create an app


Although this book is about developing PrimeFaces themes, we will need a web application to actually test our designs. Also, a web application will be used to show how to integrate PrimeFaces into a web application and how components such as ThemeSwitcher are used in practice to allow a user to select their themes. Because of this, we will spend some time at the beginning creating and adding a web application to a Maven-based NetBeans project. When we start creating and using our own themes, the work that we will have done here will make it far easier to appreciate our creative efforts there.

 

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.

 

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.

 

Adding the PrimeFaces library and related dependencies to our project


We will use Maven to add all the required resources that we don't create ourselves, and this section will help us to understand how we add libraries to our project. PrimeFaces only requires that the PrimeFaces JAR file be added to our project. So, this is what we do:

  1. By clicking on the + symbol to the left of the project in the Project view, we open the project tree, as follows:

    The following is a brief explanation of the folders, as listed in the previous screenshot:

    • Web Pages: This is where we will add views or pages to our application.

    • Source Packages: Here, Java source code is managed.

    • Other Sources: This allows us to add other types of files which may be needed for the project. We will use this facility. So, its purpose should become clear, eventually.

    • Dependencies: Here we tell Maven the JAR files that we want to add to our project.

    • Runtime Dependencies and Java Dependencies: These are not important for this project. Feel free to browse them at your leisure.

    • Project Files: This is where NetBeans manages both the Maven project's pom.xml file and the NetBeans project configuration file. While we don't need to look at these now, we will visit the pom.xml file in the later chapters. So, if you want to preview these files, please feel free to do so.

  2. Meanwhile, we are going to add PrimeFaces 5.2 to our project. Right-click on the Dependencies folder and select Add Dependency... from the context menu. This opens the Add Dependency dialog box, as shown in the following screenshot:

    Usually, you only have the Search tab available in a newly created project.

    Tip

    Maven allows us to add local projects as dependencies to a project, which is what the Open Projects tab is for. It also allows us to add dependencies that are defined in a parent Maven project file, and this is what the Dependency Management tab is for.

  3. Type org.primefaces into the Query field of the Search tab, and then go and make a drink or something that takes a little time.

    Tip

    Not only have we earned a break, but we also need time to allow Maven to download and install the Maven Central Repository index in our local Maven repository. This takes time because there are a very large number of resources available there. If you already use Maven for your projects, you obviously won't need a lot of time. The break might be welcome, though.

    Once the Maven Central Repository index is available, you will see something like this:

  4. Select the 5.2 version and click on Add. Maven then adds the dependency to our project.

 

Building the project


When we build the project, Maven will cause the required file to be downloaded and added to our local Maven repository. It will copy the file into the WEB-INF/lib folder of the build target.

If we right-click on the project and select Build, Maven will do its magic. When it is finished, we can use the Files view to see the result. Click on the Files tab. Then open the project tree view. You will see an src and a target folder, as well as the project's pom.xml file and the NetBeans project configuration files.

Open the target folder. Then expand the PFThemes-1.0-SNAPSHOT folder. As we are confident that the build process will have worked correctly, we can now see the structure of the web application:

Tip

The Java EE 7 standard mandates a formal folder structure for web applications. The META-INF and WEB-INF folders are where application-specific resources are stored. Under WEB-INF, you will see a classes folder, a lib folder, and several configuration files. Don't worry if you don't see any or all of the configuration files. Only web.xml is generated by default; the others will be created later in this chapter. The classes folder is to where Java classes are compiled. The lib folder is where JAR files, such as the PrimeFaces JAR file, are added.

Although PrimeFaces does not require any additional dependencies, GlassFish does check each JAR file for optional dependencies and treats them as mandatory ones. Because of this rather petty strictness, we also need to add the commons-fileupload and commons-io dependencies. These are only required for the PrimeFaces fileupload component, which won't be used here. At the time of writing this book, GlassFish does not allow applications to be run with unsatisfied dependencies. So, we need to add the missing dependencies.

Add a dependency as you did before, but this time type in commons-fileupload in the query field and select version 1.3.1. Don't forget to click on Add before adding the commons-io dependency. For this, you select the 2.1 version.

 

Running the project


Now build the project again. After the build is finished, right-click on the project and select Run.

This causes the GlassFish server to run and our application to be deployed. Once the project is deployed, NetBeans then opens its default browser and points it to the application's start page.

Tip

I use Google Chrome as my NetBeans default browser because NetBeans provides a Chrome plugin that allows us to debug scripts in our pages as well as other useful services. I am not going to force you to use a particular browser, but I do recommend that you use Google Chrome for the aforementioned reasons. The only browser-related thing that you should avoid is using Internet Explorer below version 8. The latest JSF technologies are not guaranteed to work with the older Internet Explorer versions, and the visual experience, even with Internet Explorer 8, is underwhelming compared to modern browsers.

We should see something like this in Chrome:

Now that we have got the project running, we can add the other configuration files that we saw in an earlier screenshot.

 

Summary


Well done. You made it to the end of the first chapter with a working project and learned the repeatable steps that are required to create any PrimeFaces JSF web project using Maven.

In this chapter, we have successfully created a NetBeans Maven web project using the new project wizard, added the JSF framework to the project by adjusting the Project Properties, added the PrimeFaces component library as a dependency using Maven, added additional libraries as dependencies using Maven, and finally ran the project in GlassFish and viewed the start page of the application in a browser.

These steps are always the first steps that we need to take when creating a new PrimeFaces and JSF-based web application. Because of this, I felt that it's important that the first chapter of this book is devoted to this rather than the more fun things that we will be getting into later in the book.

About the Authors
  • Andrew Mark R Bailey

    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.

    Browse publications by this author
  • Davi Ferreira

    Davi Ferreira is a passionate web developer with 15 years of experience. He has worked with HTML, CSS, and JavaScript since the very beginning of those technologies. He is currently working as a senior software developer at globo.com, the Internet branch of Brazils biggest media conglomerate Globo, home of shows like Big Brother and The Voice. Davi is also a resident writer at Tableless.com.br, one of the most important websites about front-end development in Brazil. He writes mostly about JavaScript and HTML5.

    Browse publications by this author
  • Andy Bailey

    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.

    Browse publications by this author
Latest Reviews (1 reviews total)
PrimeFaces Theme Development
Unlock this book and the full library FREE for 7 days
Start now