© 2012 Marty HallPrimeFaces: Overview,Setup, & Number Input                    Originals of Slides and Source Code for Exa...
© 2012 Marty Hall  For live training on JSF 2.x, please seecourses at http://courses.coreservlets.com/.      Taught by the...
Topics in This Section    • Overview    • Installation and setup    • Simple example      – With and without server behavi...
© 2012 Marty Hall                         Overview of                         PrimeFaces               Customized Java EE ...
General Features    • Rich visual components      – Calendars, charts, sliders, image viewers, much more          • Many a...
Types of Components    • Input elements      – Popup calendar, slider, autocompleter, Captcha, etc.    • Charts      – Bar...
© 2012 Marty Hall Installation and Setup               Customized Java EE Training: http://courses.coreservlets.com/Java, ...
Basic Installation     • Most components       – Download JAR file          • http://www.primefaces.org/downloads.html    ...
Documentation     • User’s Guide       – http://www.primefaces.org/documentation.html          • Moderately good by open s...
Simple Example     (No Server Behavior)     • Put JAR file in app      Downloaded from http://www.primefaces.org/downloads...
Results13
Better but Still Simple Example     (with Server Behavior)     • Point       – PrimeFaces input components convert types  ...
Bean     @ManagedBean     public class TestBean {       private double number;       private Date date;         public dou...
Input Form (test.xhtml)     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xht...
Results Page      (show-test-data.xhtml)     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://...
Results18
© 2012 Marty Hall                  Numeric Input:                    p:spinner               Customized Java EE Training: ...
p:spinner: Overview     • Appearance and behavior       – Textfield with arrow-like buttons for incrementing or         de...
p:spinner: Summary of Most     Common Attributes     • <p:spinner …/>       – value          • Should point to bean proper...
Example 1: Whole Number Input     • Input       – Temperature in Fahrenheit       – UI will collect whole number in range ...
Example 1: Bean     public class FahrenheitBean {       private int f=32;                                                 ...
Example 1: Facelets and Results     ...     <h:form>        &deg;F:        <p:spinner min="32" max="212" value="#{fBean1.f...
Example 2: Floating Point Input     • Input       – Temperature in Celsius       – UI will collect double in range from 0 ...
Example 2: Bean     public class CelsiusBean {       private double c;                                                    ...
Example 2: Facelets and Results     ...     <h:form>        &deg;C:        <p:spinner min="0" max="100" stepFactor="0.5"  ...
Example 3: Prefix     • Input       – Number in US dollars. Display dollar sign ($) at front of         number within spin...
Example 3: Bean     @ManagedBean     public class CurrencyBean {       private double dollars=100;         public double g...
Example 3: Facelets and Results     ...     <h:form>        <p:spinner prefix="$" value="#{currencyBean.dollars}">        ...
© 2012 Marty Hall                  Numeric Input:                    p:slider               Customized Java EE Training: h...
p:slider: Overview     • Appearance and behavior       – Draggable slider with number displayed in associated         text...
p:slider: Basics     • <h:inputText … id="foo"/>       – value          • Must point to bean property of type int or Integ...
p:slider: More Attributes     • <p:slider …>       – display          • Component that is visually updated. If you want di...
Example 1: Basics     • Input       – Temperature in Fahrenheit       – UI will collect whole number in range from 32 to 2...
Example 1: Bean     public class FahrenheitBean {       private int f=32;                                                 ...
Example 1: Facelets and Results     ...     <h:form>       <h:panelGrid>          <h:panelGroup>            &deg;F:       ...
Example 2: Read-Only Display     • Input       – Temperature in Fahrenheit       – UI will collect whole number in range f...
Example 2: Facelets and Results     ...     <h:form>       <h:panelGrid>          <h:panelGroup>            <h:inputHidden...
Example 3: Ajax Update     • Input       – Temperature in Fahrenheit       – UI will collect whole number in range from 32...
Example 3: Bean     public class FahrenheitBean {       private int f=32;         public int getF() {           return (f)...
Example 3: Facelets and Results     ...     <h:form>      <h:panelGrid>          <h:panelGroup>            <h:inputHidden ...
© 2012 Marty Hall                                Wrap-Up               Customized Java EE Training: http://courses.coreser...
Summary     • Installation       – Drop in JAR file, add declaration to <html…>, go!     • p:spinner       – <p:spinner va...
© 2012 Marty Hall                                   Questions?   JSF 2, PrimeFaces, Java 7, Ajax, jQuery, Hadoop, RESTful ...
Upcoming SlideShare
Loading in …5
×

JSF 2 Tutorial: PrimeFaces Overview, Setup, and Number Input

11,065 views

Published on

THIS SECTION IS OBSOLETE. For updates, see http://www.coreservlets.com/JSF-Tutorial/primefaces/ , which has links back to Slideshare for the updated sections.

Published in: Software, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,065
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JSF 2 Tutorial: PrimeFaces Overview, Setup, and Number Input

  1. 1. © 2012 Marty HallPrimeFaces: Overview,Setup, & Number Input Originals of Slides and Source Code for Examples: http://www.coreservlets.com/JSF-Tutorial/jsf2/ 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.
  2. 2. © 2012 Marty Hall For live training on JSF 2.x, please seecourses at http://courses.coreservlets.com/. 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 – JSF 2, PrimeFaces, servlets/JSP, Ajax, jQuery, Android development, Java 6 or 7 programming, custom mix of topics – Ajax courses can concentrate on 1 library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo, etc.) or survey several Customized Java EE Training: http://courses.coreservlets.com/ • Courses developed and taught by coreservlets.com experts (edited by Marty) Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring,and RESTful Web Services Services, Hadoop, Android. – Spring, Hibernate/JPA, EJB3, GWT, Hadoop, SOAP-based Hibernate, RESTful Web Developed and taught by well-known author and developer. At public venues or onsite at your location. Contact hall@coreservlets.com for details
  3. 3. Topics in This Section • Overview • Installation and setup • Simple example – With and without server behavior • p:spinner – Whole number or floating point input • p:slider – Whole number input5
  4. 4. © 2012 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.
  5. 5. 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.7
  6. 6. Types of Components • Input elements – Popup calendar, slider, autocompleter, Captcha, etc. • Charts – Bar charts, pie charts, line graphs, etc. • Image viewers – Many types of image galleries and viewers • Popup windows – Dialog boxes, menus, Mac-like “Growl” notifications, etc • Skins (themes) and interactive skin builder • Rich Ajax support – Built into many components8 • Drag and drop API
  7. 7. © 2012 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.
  8. 8. 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.prime.com.tr/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.10
  9. 9. Documentation • User’s 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 • Eclipse code completion – Automatic in projects that have PrimeFaces JAR file, as long as JSF facet enabled • JSF facet described in earlier tutorial on JSF 2 setup • Presentations – http://www.primefaces.org/documentation.html11
  10. 10. Simple Example (No Server Behavior) • Put JAR file in app Downloaded 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. • Added PrimeFaces declaration <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> • Inserted PrimeFaces components <h:form> <b>Choose number:</b> <p:spinner/><br/> <b>Choose date:</b> <p:calendar/> </h:form>12
  11. 11. Results13
  12. 12. 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 type14
  13. 13. 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"); } }15
  14. 14. 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.prime.com.tr/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/> <h:commandButton action="#{testBean.doAction}" value="Submit"/> </h:form> ... </h:body></html>16
  15. 15. 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>17 </h:body></html>
  16. 16. Results18
  17. 17. © 2012 Marty Hall Numeric Input: p:spinner 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.
  18. 18. p:spinner: Overview • Appearance and behavior – Textfield with arrow-like buttons for incrementing or decrementing values. User can also type number directly in the textfield. • Purpose: for collecting numbers from user – Value is automatically converted to number. UI prevents user from entering an illegal value. Can collect either whole number or floating point number.20
  19. 19. p:spinner: Summary of Most Common Attributes • <p:spinner …/> – value • Should point to bean property of type double or Double. Can be int (or Integer) if you also set the stepFactor to be a whole number (or use default of 1). – min, max • Smallest/largest values allowed. Be sure initial value of bean property is in that range (usually min). – stepFactor • How much the value changes when user clicks on up or down buttons. Default is 1. – prefix • Value to display at front of number (like a currency symbol). You need a converter when you use this.21
  20. 20. Example 1: Whole Number Input • Input – Temperature in Fahrenheit – UI will collect whole number in range from 32 to 212. Set initial bean value to 32 so it is in this range. No stepFactor given, so default of 1 is used. • Output – Temperature in Celsius (rounded to nearest whole number) • Command button – No action given, so same page automatically redisplayed. Conversion shown on same page as input.22
  21. 21. Example 1: Bean public class FahrenheitBean { private int f=32; Since we use int, not double, the spinner must use public int getF() { a whole number for the stepFactor (default is 1). return (f); } public void setF(int f) { this.f = Math.max(f, -460); // -459.67 is absolute zero } public int getC() { return((int)((f - 32)*(5.0/9.0))); } } Instead of using @ManagedBean, the bean name is given in faces-config.xml. This lets us use several different instances of the same class in the same page, but with different bean names. If you dont know how to declare beans in faces-config.xml, see earlier lecture on page navigation and faces-config.xml23
  22. 22. Example 1: Facelets and Results ... <h:form> &deg;F: <p:spinner min="32" max="212" value="#{fBean1.f}"/> <h:commandButton value="Convert to C"/> #{fBean1.f}&deg;F = #{fBean1.c}&deg;C<p/> </h:form> ...24
  23. 23. Example 2: Floating Point Input • Input – Temperature in Celsius – UI will collect double in range from 0 to 100. stepFactor set to 0.5 so that user can enter whole or half degrees. • Output – Temperature in Fahrenheit • Command button – No action given, so same page automatically redisplayed. Conversion shown on same page as input.25
  24. 24. Example 2: Bean public class CelsiusBean { private double c; The spinner has a stepFactor of 0.5, so we must public double getC() { use double (or Double) instead of int. return(c); } public void setC(double c) { this.c = Math.max(c, -273.15); // -273.15 is abs. zero } public double getF() { return(c*9.0/5.0 + 32); } } Again, the bean name is given in faces-config.xml.26
  25. 25. Example 2: Facelets and Results ... <h:form> &deg;C: <p:spinner min="0" max="100" stepFactor="0.5" value="#{cBean1.c}"/> <h:commandButton value="Convert to F"/> #{cBean1.c}&deg;C = #{cBean1.f}&deg;F<p/> </h:form> ...27
  26. 26. Example 3: Prefix • Input – Number in US dollars. Display dollar sign ($) at front of number within spinner. Use builtin currency converter to convert value to number. • Output – Corresponding value in Japanese yen (¥) • Command button – No action given, so same page automatically redisplayed. Conversion shown on same page as input.28
  27. 27. Example 3: Bean @ManagedBean public class CurrencyBean { private double dollars=100; public double getDollars() { return(dollars); } public void setDollars(double dollars) { this.dollars = dollars; } /** Dollar to Yen conversion taken from xe.com (11/2011) */ public double getYen() { return(dollars * 78.3); } }29
  28. 28. Example 3: Facelets and Results ... <h:form> <p:spinner prefix="$" value="#{currencyBean.dollars}"> <f:convertNumber currencySymbol="$" type="currency"/> </p:spinner> <h:commandButton value="Convert to Yen"/> $#{currencyBean.dollars} (USD) = &yen;#{currencyBean.yen} (JPY)<p/> </h:form> ...30
  29. 29. © 2012 Marty Hall Numeric Input: p:slider 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.
  30. 30. p:slider: Overview • Appearance and behavior – Draggable slider with number displayed in associated textfield. User can also type number directly in the textfield. • Purpose: for collecting numbers from user – Value is automatically converted to number. UI prevents user from entering an illegal value. Can collect whole numbers only.32
  31. 31. p:slider: Basics • <h:inputText … id="foo"/> – value • Must point to bean property of type int or Integer. Floating point numbers not allowed. – id • Identifies textfield to slider (slider usually below textfield) • <p:slider for="foo"…/> – for • The component whose value is changed – minValue, maxValue • Note inconsistency with p:spinner, where they were called min and max.33
  32. 32. p:slider: More Attributes • <p:slider …> – display • Component that is visually updated. If you want displayed value to be readonly, you can use “for” to point at a hidden field, then have display point at an h:outputText that shows value. See later example. – type (vertical or horizontal) • Default is horizontal – onSlideEnd • Server-side method to call via Ajax as slider is moved. If you just want to set the value, you can omit this. – onSlideEndUpdate • id of component to update at the end of the slide. Simpler than using f:ajax. See later example.34
  33. 33. Example 1: Basics • Input – Temperature in Fahrenheit – UI will collect whole number in range from 32 to 212. User can either drag slider or type value into textfield. • Output – Temperature in Celsius (rounded to nearest whole number) • Command button – No action given, so same page automatically redisplayed. Conversion shown on same page as input.35
  34. 34. Example 1: Bean public class FahrenheitBean { private int f=32; Same bean used in the spinner F to C example. public int getF() { return (f); } public void setF(int f) { this.f = Math.max(f, -460); // -459.67 is absolute zero } public int getC() { return((int)((f - 32)*(5.0/9.0))); } } A new bean name is given in faces-config.xml, so that both the spinner and slider36 examples can be on the same page.
  35. 35. Example 1: Facelets and Results ... <h:form> <h:panelGrid> <h:panelGroup> &deg;F: <h:inputText id="fInput1" value="#{fBean2.f}"/> </h:panelGroup> <p:slider minValue="32" maxValue="212" for="fInput1"/> <h:panelGroup> <h:commandButton value="Convert to C"/> #{fBean2.f}&deg;F = #{fBean2.c}&deg;C<p/> </h:panelGroup> </h:panelGrid> </h:form> ...37
  36. 36. Example 2: Read-Only Display • Input – Temperature in Fahrenheit – UI will collect whole number in range from 32 to 212. User can only drag slider: there is no textfield to type into. “for” points at hidden field with value to update internally and “display” points at outputText to visually update. • Output – Temperature in Celsius (rounded to nearest whole number). • Command button – No action given, so same page automatically redisplayed. Conversion shown on same page as input. • Bean – Same as in previous example, so not repeated here38
  37. 37. Example 2: Facelets and Results ... <h:form> <h:panelGrid> <h:panelGroup> <h:inputHidden id="fInput2" value="#{fBean3.f}" /> <h:outputText id="fDisplay2" value="#{fBean3.f}"/> &deg;F </h:panelGroup> <p:slider minValue="32" maxValue="212" for="fInput2" display="fDisplay2"/> <h:panelGroup> <h:commandButton value="Convert to C"/> #{fBean3.f}&deg;F = #{fBean3.c}&deg;C<p/> </h:panelGroup> </h:panelGrid> </h:form> ...39
  38. 38. Example 3: Ajax Update • Input – Temperature in Fahrenheit – UI will collect whole number in range from 32 to 212. Spinner uses onSlideEndUpdate to give id of component that will be updated. Even simpler than f:ajax. • Output – Temperature in Celsius (rounded to nearest whole number). • Command button – None. Conversion done automatically when slider moves. • Bean – Adds extra method to show conversion so that a single40 h:outputText can be used
  39. 39. Example 3: Bean public class FahrenheitBean { private int f=32; public int getF() { return (f); } public void setF(int f) { this.f = Math.max(f, -460); // -459.67 is absolute zero } public int getC() { return((int)((f - 32)*(5.0/9.0))); } public String getStatus() { return(String.format("%s&deg;F = %s&deg;C", f, getC())); } }41
  40. 40. Example 3: Facelets and Results ... <h:form> <h:panelGrid> <h:panelGroup> <h:inputHidden id="fInput3" value="#{fBean4.f}" /> <h:outputText id="fDisplay3" value="#{fBean4.f}"/> &deg;F </h:panelGroup> <p:slider minValue="32" maxValue="212" for="fInput3" display="fDisplay3" onSlideEndUpdate="status"/> <h:outputText value="#{fBean4.status}" id="status" escape="false"/> </h:panelGrid> </h:form> ...42
  41. 41. © 2012 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.
  42. 42. Summary • Installation – Drop in JAR file, add declaration to <html…>, go! • p:spinner – <p:spinner value="#{someBean.number}" min="…" max="…" stepFactor="…"/> • Can collect int or double, depending on stepFactor • p:slider – <h:inputText value="#{someBean.number}" id="blah"/> – <p:slider for="blah" minValue="…" maxValue="…"/> • Can only collect int44
  43. 43. © 2012 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. 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.

×