Scribd
Upload
110 views14 pages

PrimeFaces Overview Setup Installation

primefaes basics

Uploaded by

Venki Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
110 views14 pages

PrimeFaces Overview Setup Installation

primefaes basics

Uploaded by

Venki Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

2013 Marty Hall

PrimeFaces: Overview, Installation, and Setup


Originals of Slides and Source Code for Examples: http://www.coreservlets.com/JSF-Tutorial/primefaces/
Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

2013 Marty Hall

For live training on JSF 2 and/or PrimeFaces, see http://courses.coreservlets.com/ or email [email protected].
Taught by the author of Core Servlets and JSP, More Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site at your organization.
Courses developed and taught by Marty Hall Courses and taught JSP, by coreservlets.com experts (edited by Marty) Web Services, Hadoop, Android. Java, JSF 2, developed PrimeFaces, Servlets, Ajax, jQuery, Spring, Hibernate, RESTful
JSF 2, PrimeFaces, servlets/JSP, Ajax, jQuery, Android development, Java 6 or 7 programming, custom mix of topics Courses available in any state or country. Maryland/DC http://courses.coreservlets.com/ area companies can also choose afternoon/evening courses. Customized Java EE Training: Spring, Hibernate/JPA, GWT, Hadoop, SOAP-based and RESTful Web Services

Developed and taught by well-known author and developer. At public venues or onsite at your location. Contact [email protected] for details

Topics in This Section


Third-Party JSF component libraries Overview of PrimeFaces Installation and setup Simple examples
With and without server behavior

2013 Marty Hall

Third-Party JSF Component Libraries


Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

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. Bottom line
Add GUI elements, but are not different frameworks
7

Popular JSF 2 Component Libraries


PrimeFaces
http://primefaces.org/

RichFaces
http://www.jboss.org/richfaces

IceFaces
http://www.icesoft.org/

Oracle ADF Faces


http://www.oracle.com/technetwork/developer-tools/adf/overview/ index-092391.html

OpenFaces
http://openfaces.org/

Tomahawk
http://myfaces.apache.org/tomahawk/index.html

Trinidad
http://myfaces.apache.org/trinidad/index.html
8

Usage Trends: Job Postings

Usage Trends: Google Searches

10

2013 Marty Hall

Overview of PrimeFaces
Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

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

2013 Marty Hall

Installation and Setup


Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

Basic Installation
Most components
Download JAR file
http://www.primefaces.org/downloads.html 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="http://primefaces.org/ui">

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 http://www.primefaces.org/downloads.html
If you download the sample app that goes with this tutorial, the PrimeFaces JAR file is already included.

Add PrimeFaces declaration


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">

Start using PrimeFaces components


Thats really all there is to it!

16

Documentation
Users Guide
http://www.primefaces.org/documentation.html
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 facet enabled
JSF facet described in earlier tutorial on JSF 2 setup

Showcase
http://www.primefaces.org/showcase/ui/home.jsf
17

Has easy-to-copy facelets and Java code samples for each example

2013 Marty Hall

Simple Example: No Server Behavior


Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

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 http://www.primefaces.org/downloads.html

Added PrimeFaces declaration


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">

Inserted PrimeFaces components


<h:form> <b>Choose number:</b> <p:spinner/><br/> <b>Choose date:</b> <p:calendar/> </h:form>
19

Results

20

2013 Marty Hall

Simple Example: With Server Behavior


Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

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 double number; private Date date; public double getNumber() { return (number); } public void setNumber(double number) { this.number = number; } public Date getDate() { return(date); } public void setDate(Date date) { this.date = date; } public String doAction() { return("show-test-data"); }
23

Input Form (test.xhtml)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head>...</h:head> <h:body> ... <h:form> <b>Choose number:</b> <p:spinner value="#{testBean.number}"/><br/> <b>Choose date:</b> <p:calendar value="#{testBean.date}"/><br/> <p:commandButton action="#{testBean.doAction}" ajax="false" value="Submit"/> </h:form> ... </h:body></html>

24

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 works fine to mix p:blah and h:blah elements in the same form, but the p:blah elements will automatically follow the PrimeFaces theme.

Results Page (show-test-data.xhtml)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <h:head><title>Test Data</title> <link href="./css/styles.css" rel="stylesheet" type="text/css"/> </h:head> <h:body> <div align="center"> <table class="title"> <tr><th>Test Data</th></tr> </table> <p/> <ul> <li>Selected number: #{testBean.number}</li> <li>Selected date: #{testBean.date}</li> </ul> </div> </h:body></html>

25

Results

26

2013 Marty Hall

Wrap-Up
Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary
Component libraries
Add rich input or output GUI elements 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 the least intrusive and is (arguably) now the most popular

Installation
Drop in JAR file, add declaration to <html>, go!
28

2013 Marty Hall

Questions?
JSF 2, PrimeFaces, Java 7, Ajax, jQuery, Hadoop, RESTful Web Services, Android, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training. Also see JSF 2 tutorial and PrimeFaces tutorial.

Customized Java EE Training: http://courses.coreservlets.com/


Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

You might also like