© 2015 Marty Hall
PrimeFaces: Overview,
Installation, and Setup
Originals of slides and source code for examples: [Link]
Also see the JSF 2 tutorial – [Link]
and customized JSF2 and PrimeFaces training courses – [Link]
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
© 2015 Marty Hall
For live training on JSF 2, PrimeFaces, or other
Java EE topics, email hall@[Link]
Marty is also available for consulting and development support
Taught by the author of Core Servlets and JSP, this tutorial,
and JSF 2.2 version of Core JSF. Available at public venues, or
customized versions can be held on-site at your organization.
• Courses developed and taught by Marty Hall
– JSF 2, PrimeFaces, Ajax, jQuery, Spring MVC, JSP, Android, general Java, Java 8 lambdas/streams, GWT, custom topic mix
Customized
– Courses available Java
in any location EE Training:
worldwide. [Link]
Maryland/DC area companies can also choose afternoon/evening courses.
• Courses
Java 7, Java developed and taught Android,
8, JSF 2, PrimeFaces, by [Link] expertsSpring
JSP, Ajax, jQuery, (editedMVC,
by Marty)
RESTful Web Services, GWT, Hadoop.
– Hadoop, Spring, Hibernate/JPA, RESTful Web Services
Developed and taught by well-known
Contactauthor and developer. At for
hall@[Link] public venues or onsite at your location.
details
Topics in This Section
• Third-Party JSF component libraries
• Overview of PrimeFaces
• Installation and setup
• Simple examples
– With and without server behavior
© 2015 Marty Hall
Third-Party JSF
Component Libraries
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Component Libraries: Idea
• Component libraries do
– Add rich GUI elements, for both input and output
• Sliders, autocomplete textfields, dialog boxes, tabbed panels,
color pickers, masked input fields, etc.
• Component libraries do not
– Require you to use a particular Java server (e.g., JBoss)
– Change the general way you write your Java code
– Change the JSF flow of control
– Change the overall structure of facelets pages
– Prevent you from using any of the techniques covered in the
earlier JSF 2 tutorial
• [Link]
– Bottom line
• They add GUI elements, but are not different frameworks
7
Popular JSF 2
Component Libraries
• PrimeFaces
– [Link]
• RichFaces
– [Link]
• IceFaces
– [Link]
• Oracle ADF Faces
– [Link]
[Link]
• OpenFaces
– [Link]
• Tomahawk
– [Link]
• Trinidad
– [Link]
8
Usage Trends:
Job Postings
Usage Trends:
Google Searches
10
© 2015 Marty Hall
Overview of
PrimeFaces
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
General Features
• Rich visual components
– Calendars, charts, sliders, image viewers, much more
• Many are based on jQuery UI and jQuery plugins
• Completely compliant with JSF 2
– Runs in any JSF 2 implementation
• Free and open source
– Free for all apps, including
commercial ones. Apache license.
• Lightweight
– Very low overhead to adding PrimeFaces
components to existing JSF 2 apps
• Optional theming
– Rich skinning options, with interactive theme builder.
• But can easily use components in existing JSF 2 app.
12
Types of Components
• Input elements
– Popup calendar, slider, autocompleter, masked fields, etc.
• Popup windows
– Dialog boxes, menus, Mac-like “Growl” notifications, etc
• Grouping panels
– Accordion panel, tab panel, scroll panel, dashboard, etc.
• Charts
– Bar charts, pie charts, line graphs, etc.
• Image viewers
– Many types of image galleries and viewers
• Skins (themes) and interactive skin builder
• Rich Ajax support
– Built into many components
13
• Drag and drop API
© 2015 Marty Hall
Installation and Setup
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Basic Installation
• Most components
– Download JAR file
• [Link]
• Already included in app that goes with this tutorial
– Put JAR file in WEB-INF/lib folder of your application
• Same place all other JAR files go
– Add PrimeFaces declaration to <html …> start tag
• <html … xmlns:p="[Link]
– Start using PrimeFaces tags. (It is really that easy!)
• E.g., put <p:calendar/> inside any JSF 2 form
• A few specialized components
– PDF exporter, Excel exporter, file upload, and Ajax push
require some extra JAR files.
15
• Well documented in User Manual
Installation and Setup
• Put JAR file in app
Download from [Link]
If you download the sample app that goes with
this tutorial, the PrimeFaces JAR file is already
included.
• Add PrimeFaces declaration
<html xmlns="[Link]
xmlns:h="[Link]
xmlns:p="[Link]
• Start using PrimeFaces components
– That’s really all there is to it!
16
Documentation
• User’s Guide
– [Link]
• Moderately good by open source standards
– Download PDF of Guide to your local computer
• This is only documentation most developers use
• But main page above also has link to JavaDoc for underlying
Java code, which is used once in a while
• Eclipse code completion and palette
– Automatic in projects that have PrimeFaces JAR file,
as long as JSF project facet enabled
• JSF facet described in earlier tutorial on JSF 2 setup
• Showcase
– [Link]
• Has easy-to-copy facelets and Java code samples
17
for each example
© 2015 Marty Hall
Simple Example:
No Server Behavior
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Simple Example
(No Server Behavior)
• Put JAR file in app
Downloaded from [Link]
• Added PrimeFaces declaration
<html xmlns="[Link]
xmlns:h="[Link]
xmlns:p="[Link]
• Inserted PrimeFaces components
<h:form>
<b>Choose number:</b> <p:spinner/><br/>
<b>Choose date:</b> <p:calendar/>
</h:form>
19
Results
20
© 2015 Marty Hall
Simple Example:
With Server Behavior
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Better but Still Simple Example
(with Server Behavior)
• Point
– PrimeFaces input components convert types
automatically
• p:spinner converts to double (or int if step is whole num)
• p:calendar converts to Date
– No user conversion needed
• And no need for validatorMessage since neither one will
permit the user to enter an illegal type
22
Bean
@ManagedBean
public class TestBean {
private int number;
private Date date;
public int getNumber() {
return(number);
}
public void setNumber(int number) {
[Link] = number;
}
public Date getDate() {
return(date);
}
public void setDate(Date date) {
[Link] = date;
}
public String doAction() {
return("show-test-data");
}
23 }
Input Form ([Link])
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
xmlns:h="[Link]
xmlns:p="[Link]
<h:head>...</h:head>
<h:body>
...
<h:form>
<b>Choose number:</b> <p:spinner value="#{[Link]}"/><br/>
<b>Choose date:</b> <p:calendar value="#{[Link]}"/><br/>
<p:commandButton action="#{[Link]}" ajax="false"
value="Submit"/>
</h:form>
...
</h:body></html>
It works fine to use h:commandButton, but the advantage of p:commandButton is that the button picks up the fonts, sizes, and colors of the
current theme. But, if you use p:commandButton, you have to use ajax="false" if you want it to behave just like h:commandButton. In general, it
24 works fine to mix p:blah and h:blah elements in the same form, but only the p:blah elements will automatically follow the PrimeFaces theme.
Results Page
([Link])
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
xmlns:h="[Link]
<h:head><title>Test Data</title>
</h:head>
<h:body>
<h1 class="ui-widget-header ui-corner-all" align="center">
Test Data</h1>
<p/>
<ul>
<li>Selected number: #{[Link]}</li>
<li>Selected date: #{[Link]}</li>
</ul>
</h:body></html>
25
Results
26
© 2015 Marty Hall
Wrap-Up
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Summary
• Component libraries
– Add rich GUI elements for input or output
– Normal JSF code and approaches still work
• Extra GUI elements, not new framework!
• Popular component libraries
– All of PrimeFaces, RichFaces, IceFaces, Tomahawk, and
Oracle ADF Faces are widely used
– But PrimeFaces is (arguably) the least intrusive and most
widely used
• Installation
– Drop in JAR file, add declaration to <html…>, go!
28
© 2015 Marty Hall
Questions?
More info:
[Link] – JSF 2.2 tutorial
[Link] – PrimeFaces tutorial
[Link] – Customized JSF and PrimeFaces training courses
[Link] – JSF 2, PrimeFaces, Java 7 or 8, Ajax, jQuery, Hadoop, RESTful Web Services, Android, HTML5, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training
Customized Java EE Training: [Link]
Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.