Your SlideShare is downloading. ×
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
Topics in This Section
• Interactive HTML color chooser
– p:colorPicker
• Text that becomes editable when clicked
– p:inpl...
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
p:colorPicker: Overview
• Appearance and behavior
– Small button that, when clicked, pops up interactive
chooser that lets...
p:colorPicker: Problems
• Bug in 3.5.0: pops up in wrong location
– Problem: with primefaces-3.5.jar (the latest version a...
p:colorPicker: Summary of Most
Important Attributes
• <p:colorPicker …/>
– value
• Should point to bean property of type S...
Example 1: Choosing Page
Colors (Popup Color Picker)
• Input page collects
– Foreground color
• With popup color picker
– ...
Bean (Main Bean Properties)
@ManagedBean
@SessionScoped
public class ColorPreferences implements Serializable {
private St...
Bean (Derived Property and
Action Controller)
public String getStyle() {
String style =
String.format("color: #%s; backgro...
Input Page
<h:form>
<h:panelGrid columns="2" class="formTable">
Foreground:
<p:colorPicker value="#{colorPreferences.foreg...
Results Page
...
<h:body style="#{colorPreferences.style}">
...
<h2>Foreground: #{colorPreferences.foreground}</h2>
<h2>Ba...
Results (Input Page)
15
Results (Results Page)
16
Example 2: Choosing Page
Colors (Inline Color Picker)
• Input page collects
– Foreground color
• With inline color picker
...
Input Page
<h:form>
<h:panelGrid columns="2" class="formTable">
Foreground:
<p:colorPicker value="#{colorPreferences.foreg...
Results Page
...
<h:body style="#{colorPreferences.style}">
...
<h2>Foreground: #{colorPreferences.foreground}</h2>
<h2>Ba...
Results (Input Page)
20
Results (Results Page)
21
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
p:inplace: Overview
• Appearance and behavior
– Text that, when clicked, turns into something else,
usually input elements...
p:colorPicker: Summary of Most
Important Attributes
• <p:inplace …>input elements</p:inplace>
– No value attribute
• Text ...
Example: Displaying Page
Colors (Textfield if Clicked)
• Input page displays
– Foreground color
• Turns into textfield whe...
Input Page
<h:form>
<h:panelGrid columns="2" class="formTable">
Foreground:
<p:inplace>
<p:inputText value="#{colorPrefere...
Results (Input Page)
27
Before clicking either of the colors
After clicking on both of the colors, then changing the value...
Results (Results Page)
28
Example: Displaying Page
Colors (Color Picker if Clicked)
• Input page displays
– Foreground color
• Turns into color pick...
Input Page
<h:form>
<p:inplace label="Foreground (#{colorPreferences.foreground})">
<p:colorPicker value="#{colorPreferenc...
Results (Input Page)
31
Before clicking either of the labels
After clicking on top label
After clicking on top label then ...
Example: Displaying Random
Internet Cafes (Icons to Close)
• Input page displays
– Text that says “Random Internet Café”
•...
Bean
@ApplicationScoped
@ManagedBean
public class ImageBean {
private int numImages = 22;
private Random r = new Random();...
Input Page
<h:form>
Image:
<p:inplace label="Random Internet Cafe" editor="true">
<h:graphicImage url="#{imageBean.randomI...
Results
35
Before clicking the text
Each time you close and reopen, body content is reevaluated
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
p:captcha: Overview
• Appearance and behavior
– Box into which user types two words to match images
– No output or value
•...
p:captcha: Summary of Most
Important Attributes
• <p:captcha …/>
– theme (red [default], white, blackglass, clean)
• Compo...
Captcha Installation and Setup
• Sign up for captcha keys from Google
– The service is free, but it requires you to sign u...
Example Deployment
Descriptor (WEB-INF/web.xml)
<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
<context-param>
<para...
Example: Submission with
Captcha
• Input page collects
– First name
• Value corresponds to bean property
– Last name
• Val...
Bean
@ManagedBean
public class RegistrationBean {
private String firstName, lastName, emailAddress;
public String getFirst...
Bean (Derived Property, Action
Controller, Helper Methods)
public String getObscuredPassword() {
return(firstLetter(passwo...
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
<context-param>
<param-name>primefaces.PRIVATE_CAPTCHA_KEY</p...
Input Page (Top Half)
<h:form>
<h:panelGrid columns="3" class="formTable">
First name:
<p:inputText value="#{registrationB...
Input Page (Bottom Half)
Email address:
<p:inputText value="#{registrationBean.emailAddress}"
required="true" id="emailAdd...
Results Page
...
Registration Confirmed</h1>
<ul>
<li>First name: #{registrationBean.firstName}</li>
<li>Last name: #{regi...
Results (Input Page – Blank)
48
Results (Input Page – Bad Data)
49
Captcha entries omitted
Captcha entries did not match text
Results (Results Page)
50
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
p:password: Overview
• Appearance and behavior
– Password field
– Optionally, popup feedback on password strength
• Purpos...
p:password: Summary of Most
Important Attributes
• <p:password …/>
– value
• Should point to bean property of type String....
Example 1: Choosing Password
(Default Prompts)
• Input page collects
– First name
– Last name
– Email address
– Password
•...
Bean (Main Bean Properties)
@ManagedBean
public class RegistrationBean {
private String firstName, lastName,
emailAddress,...
Bean (Derived Property, Action
Controller, Helper Methods)
public String getObscuredPassword() {
return(firstLetter(passwo...
Input Page (Top)
<h:form>
<h:panelGrid columns="3" class="formTable">
First name:
<p:inputText value="#{registrationBean.f...
Input Page (Bottom)
Password:
<p:password value="#{registrationBean.password}"
feedback="true"
id="password1"
required="tr...
Results Page
...
Registration Confirmed</h1>
<ul>
<li>First name: #{registrationBean.firstName}</li>
<li>Last name: #{regi...
Results
60
Example 2: Choosing Password
(Custom Prompts)
• Input page collects
– First name, last name, email address, and new passwo...
Input Page
(Top – Same as Before)
<h:form>
<h:panelGrid columns="3" class="formTable">
First name:
<p:inputText value="#{r...
Input Page (Bottom)
Password:
<p:password value="#{registrationBean.password}"
feedback="true"
promptLabel="Choose a passw...
Results
64
Common Questions Regarding
Password Feedback
• What algorithm is used?
– Not documented, but you can look in the PrimeFace...
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
p:editor: Overview
• Appearance and behavior
– Large text area where user can enter and style text
• Uses CLEditor: http:/...
p:colorPicker: Summary of Most
Important Attributes
• <p:editor …/>
– value
• Should point to bean property of type String...
Example: Entering a Message
for Customer Service
• Input page collects
– Message to be sent to customer service
– Email ad...
Bean
@ManagedBean
public class MessageBean {
private String message, emailAddress;
public String getMessage() {
return(mes...
Input Page
<h:form>
<h:panelGrid columns="3" class="formTable">
Message:
<p:editor value="#{messageBean.message}"
required...
Results Page
...
<p>This is the message that was sent to
customer support:</p>
<hr/>
<div style="font-size: 120%">
<h:outp...
Results (Input Page)
73
Results (Results Page)
74
p:editor Security Risks: Problem
• Malicious end users can send code with links,
images, scripts, etc., that other users s...
p:editor Security Risks: Solution
• Filter on the server
– Do not trust client. Filter out the bad HTML tags on server.
• ...
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
Summary
• <p:colorPicker value="…" mode="…"/>
– Collects color string, with no leading “#”
• <p:inplace label="…" editor="...
© 2015 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
Java 7, Java 8, JSF 2, PrimeFaces, Android...
Upcoming SlideShare
Loading in...5
×

PrimeFaces Tutorial: String Input Part 2

4,312

Published on

Please email hall@coreservlets.com for info on how to arrange customized courses on JSF 2.2, PrimeFaces, Spring MVC, Java 8, Hadoop, Android programming, jQuery/Ajax, and other Java EE topics onsite at YOUR location.

This section discusses a variety of other PrimeFaces input elements, the most general-purpose of which is p:inplace for making text that turns into something else (usually input elements) when the user clicks on it. p:editor should not be used in its default configuration for apps where other users can see the rich text: the presence of the "Source" button allows malicious users to insert arbitrary markup, including <script&gt; tags. Even with careful filtering, be wary of letting spammers insert images and links to their sites. See http://www.coreservlets.com/JSF-Tutorial/primefaces/ for the full tutorial, associated code, exercises, and exercise solutions. You can also download PDF files of each lecture for saving or printing.

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

  • Be the first to like this

No Downloads
Views
Total Views
4,312
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 3
  • Transcript of "PrimeFaces Tutorial: String Input Part 2"

    1. 1. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. PrimeFaces: String Input Elements (Part II) Originals of slides and source code for examples: http://www.coreservlets.com/JSF-Tutorial/primefaces/ Also see the JSF 2 tutorial – http://www.coreservlets.com/JSF-Tutorial/jsf2/ and customized JSF2 and PrimeFaces training courses – http://courses.coreservlets.com/jsf-training.html
    2. 2. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. For live training on JSF 2, PrimeFaces, or other Java EE topics, email hall@coreservlets.com 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 – Courses available in any location worldwide. Maryland/DC area companies can also choose afternoon/evening courses. • Courses developed and taught by coreservlets.com experts (edited by Marty) – Hadoop, Spring, Hibernate/JPA, RESTful Web Services Contact hall@coreservlets.com for details
    3. 3. Topics in This Section • Interactive HTML color chooser – p:colorPicker • Text that becomes editable when clicked – p:inplace • Element that validates text matches images – p:captcha • Password field with feedback on strength – p:password • Editor that lets user create rich HTML text – p:editor 5
    4. 4. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. p:colorPicker
    5. 5. p:colorPicker: Overview • Appearance and behavior – Small button that, when clicked, pops up interactive chooser that lets the user select an HTML color • Purpose: for collecting color specs – Value is String of form "rrggbb" in hex. – Note that value does not start with “#”. 7
    6. 6. p:colorPicker: Problems • Bug in 3.5.0: pops up in wrong location – Problem: with primefaces-3.5.jar (the latest version as of September 2013), the color picker pops up at bottom of the page, rather than under the button. • It works correctly in earlier PrimeFaces versions, and it works correctly in the PrimeFaces showcase, which uses the not-yet- public primefaces-3.5.13.jar. So, the bug is probably fixed by the time you read this, so try it the normal way before using the fix. – Fix: add the following between <h:head> and </h:head> <h:outputScript name="jquery/jquery-plugins.js" library="primefaces"/> • Minor deficiency in all versions: color picker lacks a close button or “x” – You must click off of the color chooser to close it 8
    7. 7. p:colorPicker: Summary of Most Important Attributes • <p:colorPicker …/> – value • Should point to bean property of type String. Value sent will be of form “rrggbb” (in hex), with no leading “#”. – mode (popup [default] or inline) • Determines whether the color picker pops up when user presses the button, or if the color picker is already open and embedded in the page. • Works just like the mode option to p:calendar. 9
    8. 8. Example 1: Choosing Page Colors (Popup Color Picker) • Input page collects – Foreground color • With popup color picker – Background color • With popup color picker • Results page shows – Sample of text, using given colors 10
    9. 9. Bean (Main Bean Properties) @ManagedBean @SessionScoped public class ColorPreferences implements Serializable { private String foreground="0000ff", background="fdf5e6"; public String getForeground() { return(foreground); } public void setForeground(String foreground) { this.foreground = foreground; } public String getBackground() { return(background); } public void setBackground(String background) { this.background = background; }11
    10. 10. Bean (Derived Property and Action Controller) public String getStyle() { String style = String.format("color: #%s; background-color: #%s", foreground, background); return(style); } public String showSample() { return("show-colors"); } } 12 Since the String sent does not contain “#”, you have to explicitly add it to the output.
    11. 11. Input Page <h:form> <h:panelGrid columns="2" class="formTable"> Foreground: <p:colorPicker value="#{colorPreferences.foreground}"/> Background: <p:colorPicker value="#{colorPreferences.background}"/> </h:panelGrid> <p:commandButton action="#{colorPreferences.showSample}" value="Show Sample of Colors Selected" ajax="false"/> </h:form> 13
    12. 12. Results Page ... <h:body style="#{colorPreferences.style}"> ... <h2>Foreground: #{colorPreferences.foreground}</h2> <h2>Background: #{colorPreferences.background}</h2> <p> Blah, blah, blah. Foo, bar, baz. Yadda, yadda, yadda. Blah, blah, blah. Foo, bar, baz. Yadda, yadda, yadda. ... 14
    13. 13. Results (Input Page) 15
    14. 14. Results (Results Page) 16
    15. 15. Example 2: Choosing Page Colors (Inline Color Picker) • Input page collects – Foreground color • With inline color picker – Background color • With inline color picker • Results page shows – Sample of text, using given colors • Code for bean and results page – Unchanged from previous example, so not repeated here 17
    16. 16. Input Page <h:form> <h:panelGrid columns="2" class="formTable"> Foreground: <p:colorPicker value="#{colorPreferences.foreground}" mode="inline"/> Background: <p:colorPicker value="#{colorPreferences.background}" mode="inline"/> </h:panelGrid> <p:commandButton action="#{colorPreferences.showSample}" value="Show Sample of Colors Selected" ajax="false"/> </h:form> 18
    17. 17. Results Page ... <h:body style="#{colorPreferences.style}"> ... <h2>Foreground: #{colorPreferences.foreground}</h2> <h2>Background: #{colorPreferences.background}</h2> <p> Blah, blah, blah. Foo, bar, baz. Yadda, yadda, yadda. Blah, blah, blah. Foo, bar, baz. Yadda, yadda, yadda. ... 19
    18. 18. Results (Input Page) 20
    19. 19. Results (Results Page) 21
    20. 20. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. p:inplace
    21. 21. p:inplace: Overview • Appearance and behavior – Text that, when clicked, turns into something else, usually input elements • Purpose: for collecting arbitrary input – Any type of input elements can be used 23
    22. 22. p:colorPicker: Summary of Most Important Attributes • <p:inplace …>input elements</p:inplace> – No value attribute • Text is displayed, but no value is sent as part of a form. No corresponding bean property. When you click on the text, the text disappears and the elements inside are displayed instead. • The text that is displayed to user is the “value” attribute of the first element inside the body, unless “label” is used. – label • If you want text to be something different than “value” of first element. The label attribute may use the JSF EL. – editor (true or false [default]) • If true, shows save and cancel icons. Clicking either closes the content and reverts to the text. You can also attach Ajax listeners to respond to “save” and “cancel” events, but icons also used for toggling. Elements reevaluated when clicked. 24
    23. 23. Example: Displaying Page Colors (Textfield if Clicked) • Input page displays – Foreground color • Turns into textfield when clicked – Background color • Turns into textfield when clicked • Results page shows – Sample of text, using given colors • Code for bean and results page – Unchanged from previous example, so not repeated here 25
    24. 24. Input Page <h:form> <h:panelGrid columns="2" class="formTable"> Foreground: <p:inplace> <p:inputText value="#{colorPreferences.foreground}"/> </p:inplace> Background: <p:inplace> <p:inputText value="#{colorPreferences.background}"/> </p:inplace> </h:panelGrid> <p:commandButton action="#{colorPreferences.showSample}" value="Show Sample" ajax="false"/> </h:form> 26
    25. 25. Results (Input Page) 27 Before clicking either of the colors After clicking on both of the colors, then changing the values in the resultant textfields
    26. 26. Results (Results Page) 28
    27. 27. Example: Displaying Page Colors (Color Picker if Clicked) • Input page displays – Foreground color • Turns into color picker when clicked. Uses custom label instead of “value” of color picker. – Background color • Turns into color picker when clicked. Uses custom label instead of “value” of color picker. • Results page shows – Sample of text, using given colors • Code for bean and results page – Unchanged from previous example, so not repeated here 29
    28. 28. Input Page <h:form> <p:inplace label="Foreground (#{colorPreferences.foreground})"> <p:colorPicker value="#{colorPreferences.foreground}"/> <p:commandButton action="#{colorPreferences.showSample}" value="Show Sample" ajax="false"/> </p:inplace><br/> <p:inplace label="Background (#{colorPreferences.background})"> <p:colorPicker value="#{colorPreferences.background}"/> <p:commandButton action="#{colorPreferences.showSample}" value="Show Sample" ajax="false"/> </p:inplace> </h:form> 30
    29. 29. Results (Input Page) 31 Before clicking either of the labels After clicking on top label After clicking on top label then on colorPicker button
    30. 30. Example: Displaying Random Internet Cafes (Icons to Close) • Input page displays – Text that says “Random Internet Café” • Turns into image when clicked. • Has save and cancel icons that close the content. • If you click again after closing content, you get new result. Content reevaluated each time user clicks. • No results page 32
    31. 31. Bean @ApplicationScoped @ManagedBean public class ImageBean { private int numImages = 22; private Random r = new Random(); private String template = "/images/internet-cafes/cafe-%s.jpg"; public String getRandomImage() { int num = r.nextInt(numImages) + 1; String path = String.format(template, num); return(path); } } 33 The path will be used with "url" attribute of h:graphicImage. So, path is relative to WebContent in Eclipse project. If you want it relative to WebContent/resources, move "images" to resources and use <h:graphicImage name="cafe-x.jpg" library="images/internet-cafes"/>. h:graphicImage is discussed in the page templating section of the general JSF2 tutorial (http://www.coreservlets.com/JSF-Tutorial/jsf2/).
    32. 32. Input Page <h:form> Image: <p:inplace label="Random Internet Cafe" editor="true"> <h:graphicImage url="#{imageBean.randomImage}"/> </p:inplace> </h:form> 34
    33. 33. Results 35 Before clicking the text Each time you close and reopen, body content is reevaluated
    34. 34. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. p:captcha
    35. 35. p:captcha: Overview • Appearance and behavior – Box into which user types two words to match images – No output or value • Either prevents form submission (if words do not match), or is transparent to the rest of the form (if words match) • Purpose: to prevent automated submissions (especially for forms that send email) – Uses the Google Recaptcha API 37
    36. 36. p:captcha: Summary of Most Important Attributes • <p:captcha …/> – theme (red [default], white, blackglass, clean) • Component is served up by Google, so does not follow the PrimeFaces themes. There are four builtin theme options. – language (default is en) • The ISO 639-1 language code to use for the prompts. Google supports a number of languages, but their documentation (http://www.google.com/recaptcha/) is unclear about which. Best option is to simply experiment. – validatorMessage • Overrides the builtin messages when user text does not match. You can also set this globally in your app via the JSF message bundle mechanism with keys primefaces.captcha.INVALID and primefaces.captcha.INVALID_detail. – p:captcha also supports required and requiredMessage 38
    37. 37. Captcha Installation and Setup • Sign up for captcha keys from Google – The service is free, but it requires you to sign up for public and private keys so that the captcha process can be encrypted. • http://www.google.com/recaptcha/whyrecaptcha • Store keys as context params in web.xml – Use the context-param names primefaces.PRIVATE_CAPTCHA_KEY and primefaces.PUBLIC_CAPTCHA_KEY • See next slide • Put <p:captcha …/> in your form – You normally set required, requiredMessage, and validatorMessage. Theme and language are also possible. 39
    38. 38. Example Deployment Descriptor (WEB-INF/web.xml) <?xml version="1.0" encoding="UTF-8"?> <web-app ...> <context-param> <param-name>primefaces.PRIVATE_CAPTCHA_KEY</param-name> <param-value>Private key from Google</param-value> </context-param> <context-param> <param-name>primefaces.PUBLIC_CAPTCHA_KEY</param-name> <param-value>Public key from Google</param-value> </context-param> ... </web-app> 40 If you download the Eclipse project that corresponds to this lecture (see http://www.coreservlets.com/JSF-Tutorial/primefaces/), you can see a full example. My keys are stored there, but cannot be used long-term by others because I periodically cancel the old keys and request new ones.
    39. 39. Example: Submission with Captcha • Input page collects – First name • Value corresponds to bean property – Last name • Value corresponds to bean property – Email address • Value corresponds to bean property – Captcha strings • No value; just pass or fail • Results page shows – Confirmation of first name, last name, and email address. 41
    40. 40. Bean @ManagedBean public class RegistrationBean { private String firstName, lastName, emailAddress; public String getFirstName() { return(firstName); } public void setFirstName(String firstName) { this.firstName = firstName; } // Similar getters/setters for last name & email public String register1() { return("show-registration-1"); } 42
    41. 41. Bean (Derived Property, Action Controller, Helper Methods) public String getObscuredPassword() { return(firstLetter(password) + "..." + lastLetter(password)); } public String register1() { return("show-registration-1"); } private String firstLetter(String s) { return(s.substring(0, 1)); } private String lastLetter(String s) { int length = s.length(); return(s.substring(length-1, length)); }43
    42. 42. web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...> <context-param> <param-name>primefaces.PRIVATE_CAPTCHA_KEY</param-name> <param-value>6LeE...</param-value> </context-param> <context-param> <param-name>primefaces.PUBLIC_CAPTCHA_KEY</param-name> <param-value>6LeE...</param-value> </context-param> ... </web-app> 44
    43. 43. Input Page (Top Half) <h:form> <h:panelGrid columns="3" class="formTable"> First name: <p:inputText value="#{registrationBean.firstName}" required="true" id="firstName" requiredMessage="First name required"/> <p:message for="firstName"/> Last name: <p:inputText value="#{registrationBean.lastName}" required="true" id="lastName" requiredMessage="Last name required"/> <p:message for="lastName"/> 45
    44. 44. Input Page (Bottom Half) Email address: <p:inputText value="#{registrationBean.emailAddress}" required="true" id="emailAddress" requiredMessage="Email address required"/> <p:message for="emailAddress"/> Captcha: <p:captcha id="captcha" required="true" requiredMessage="Captcha entries required" validatorMessage= "Text does not match. Try again."/> <p:message for="captcha"/> </h:panelGrid> <p:commandButton action="#{registrationBean.register1}" value="Register" ajax="false"/> </h:form> 46
    45. 45. Results Page ... Registration Confirmed</h1> <ul> <li>First name: #{registrationBean.firstName}</li> <li>Last name: #{registrationBean.lastName}</li> <li>Email: #{registrationBean.emailAddress}</li> </ul> ... 47
    46. 46. Results (Input Page – Blank) 48
    47. 47. Results (Input Page – Bad Data) 49 Captcha entries omitted Captcha entries did not match text
    48. 48. Results (Results Page) 50
    49. 49. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. p:password
    50. 50. p:password: Overview • Appearance and behavior – Password field – Optionally, popup feedback on password strength • Purposes – Basic: collect password to match against stored value • In this usage, p:password is just a theme-aware replacement for h:inputSecret. Note the inconsistency in the name (p:password, not p:inputSecret). – Alternative: collect new password • In this usage, you set feedback="true", and as user enters text, a small popup gives feedback on how strong the password is 52
    51. 51. p:password: Summary of Most Important Attributes • <p:password …/> – value • Should point to bean property of type String. – feedback (true or false [default]) • Determines whether there should be a popup showing feedback on password strength – promptLabel, weakLabel, goodLabel, strongLabel • Replaces the builtin prompts 53
    52. 52. Example 1: Choosing Password (Default Prompts) • Input page collects – First name – Last name – Email address – Password • This is new password, not password to match against a stored password, so we give feedback on strength • Results page shows – Confirmation of all values. – For security reasons, only part of the password is shown 54
    53. 53. Bean (Main Bean Properties) @ManagedBean public class RegistrationBean { private String firstName, lastName, emailAddress, password; public String getFirstName() { return(firstName); } public void setFirstName(String firstName) { this.firstName = firstName; } // Similar getters and setters for last name, // email address, and password 55
    54. 54. Bean (Derived Property, Action Controller, Helper Methods) public String getObscuredPassword() { return(firstLetter(password) + "..." + lastLetter(password)); } public String register2() { return("show-registration-2"); } private String firstLetter(String s) { return(s.substring(0, 1)); } private String lastLetter(String s) { int length = s.length(); return(s.substring(length-1, length)); }56
    55. 55. Input Page (Top) <h:form> <h:panelGrid columns="3" class="formTable"> First name: <p:inputText value="#{registrationBean.firstName}" required="true" id="firstName" requiredMessage="First name required"/> <p:message for="firstName"/> Last name: <p:inputText value="#{registrationBean.lastName}" required="true" id="lastName" requiredMessage="Last name required"/> <p:message for="lastName"/> Email address: <p:inputText value="#{registrationBean.emailAddress}" required="true" id="emailAddress" requiredMessage="Email address required"/> <p:message for="emailAddress"/>57
    56. 56. Input Page (Bottom) Password: <p:password value="#{registrationBean.password}" feedback="true" id="password1" required="true" requiredMessage="Password required" validatorMessage= "Password must be 2 or more chars."> <f:validateLength minimum="2"/> </p:password> <p:message for="password1"/> </h:panelGrid> <p:commandButton action="#{registrationBean.register2}" value="Register" ajax="false"/> </h:form> 58
    57. 57. Results Page ... Registration Confirmed</h1> <ul> <li>First name: #{registrationBean.firstName}</li> <li>Last name: #{registrationBean.lastName}</li> <li>Email: #{registrationBean.emailAddress}</li> <li>Password: #{registrationBean.obscuredPassword}</li> </ul> ... 59
    58. 58. Results 60
    59. 59. Example 2: Choosing Password (Custom Prompts) • Input page collects – First name, last name, email address, and new password as before • But custom prompts are used for password feedback • Results page shows – Confirmation of values as before • Code for bean and results page – Unchanged from previous example, so not repeated here 61
    60. 60. Input Page (Top – Same as Before) <h:form> <h:panelGrid columns="3" class="formTable"> First name: <p:inputText value="#{registrationBean.firstName}" required="true" id="firstName" requiredMessage="First name required"/> <p:message for="firstName"/> Last name: <p:inputText value="#{registrationBean.lastName}" required="true" id="lastName" requiredMessage="Last name required"/> <p:message for="lastName"/> Email address: <p:inputText value="#{registrationBean.emailAddress}" required="true" id="emailAddress" requiredMessage="Email address required"/> <p:message for="emailAddress"/>62
    61. 61. Input Page (Bottom) Password: <p:password value="#{registrationBean.password}" feedback="true" promptLabel="Choose a password" weakLabel="Bogus! Easily cracked." goodLabel="OK, but can be cracked." strongLabel="Good: hard to crack." id="password2" required="true" requiredMessage="Password required" validatorMessage="Password must be 2 or more chars."> <f:validateLength minimum="2"/> </p:password> <p:message for="password2"/> </h:panelGrid> <p:commandButton action="#{registrationBean.register2}" value="Register" ajax="false"/> </h:form> 63
    62. 62. Results 64
    63. 63. Common Questions Regarding Password Feedback • What algorithm is used? – Not documented, but you can look in the PrimeFaces JavaScript source code for the testStrength function of the PrimeFaces.widget.Password object • Can I change the algorithm? – Also not documented, but you can do this: PrimeFaces.widget.Password.prototype.testStrength= function(password) { // Return number between 0 and 100 } • 0-30 means weak, 30-80: medium, 80-100: strong • Can I accept or reject passwords based on their strength? – No, not without extensive changes to the code. End user sees the feedback, but the server does not.65
    64. 64. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. p:editor
    65. 65. p:editor: Overview • Appearance and behavior – Large text area where user can enter and style text • Uses CLEditor: http://premiumsoftware.net/cleditor/ • For an alternative JSF plugin, see http://www.primefaces.org/showcase-ext/views/ckEditor.jsf • Purpose: for collecting HTML text – Value is String that may contain HTML tags – When you output bean property, you must use escape="false" to preserve the HTML tags. 67
    66. 66. p:colorPicker: Summary of Most Important Attributes • <p:editor …/> – value • Should point to bean property of type String. String may contain HTML tags. – controls • A space-separated list of the controls to show at the top of the editor. Options include bold, italic, underline, strikethrough, undo, redo, etc. See the PDF User’s Guide for a complete list. – To prevent attacks, for pages accessible to the outside world that display one user’s results to another user, you should disallow the “source” option. Failing to do so lets attackers easily enter arbitrary HTML tags, including <script>. – Sadly, you can only list controls you do allow, not ones you disallow. This means that disallowing “source” means you will have to list all the others one at a time.68
    67. 67. Example: Entering a Message for Customer Service • Input page collects – Message to be sent to customer service – Email address for replies • Results page shows – Confirmation of data sent 69
    68. 68. Bean @ManagedBean public class MessageBean { private String message, emailAddress; public String getMessage() { return(message); } public void setMessage(String message) { this.message = message; } // Similar getter/setter for email address public String showMessage() { return("show-message"); } 70
    69. 69. Input Page <h:form> <h:panelGrid columns="3" class="formTable"> Message: <p:editor value="#{messageBean.message}" required="true" id="message" requiredMessage="Message cannot be empty"/> <p:message for="message"/> Email address: <p:inputText value="#{messageBean.emailAddress}" required="true" id="email" requiredMessage="Email address required"/> <p:message for="email"/> </h:panelGrid> <p:commandButton action="#{messageBean.showMessage}" value="Send to Customer Support" ajax="false"/> </h:form>71
    70. 70. Results Page ... <p>This is the message that was sent to customer support:</p> <hr/> <div style="font-size: 120%"> <h:outputText value="#{messageBean.message}" escape="false"/> </div> <hr/> <p>Replies will be sent to #{messageBean.emailAddress}</p> ... 72
    71. 71. Results (Input Page) 73
    72. 72. Results (Results Page) 74
    73. 73. p:editor Security Risks: Problem • Malicious end users can send code with links, images, scripts, etc., that other users see – Displaying unfiltered user data containing HTML can result in badly formatted pages if user enters unbalanced tags, images, and so forth. – Storing the results and displaying them later to outside users lets users make malicious pages (with scripts, etc.) that are hosted on your site – The CL Editor used by PrimeFaces has a way that lets clever users directly enter arbitrary HTML tags (see my interactive example). But even if it did not, a sophisticated attacker could bypass the CL Editor and send the text directly to your server. So, if you display user data with escape="false", you are vulnerable. 75
    74. 74. p:editor Security Risks: Solution • Filter on the server – Do not trust client. Filter out the bad HTML tags on server. • Normally all tags are automatically filtered out by JSF, but when you say escape="false" they are not, and now you have selectively filter some tags and not others. Best approach is white listing: keep only certain tags, reject all others. • We are ignoring these risks in this example, but you should not in real life. • Resources – Cross site scripting references • https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 – Java tools for filtering HTML • http://jsoup.org/cookbook/cleaning-html/whitelist-sanitizer 76
    75. 75. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. Wrap-Up
    76. 76. Summary • <p:colorPicker value="…" mode="…"/> – Collects color string, with no leading “#” • <p:inplace label="…" editor="…"> Some content, usually input elements </p:inplace> • <p:captcha/> – Prevents automated submissions • <p:password value="…" feedback="…"/> – Collects password, with optional strength feedback • <p:editor value="…"/> – Collects formatted HTML text. Use escape="false" when outputting, and beware of displaying to other users. 78
    77. 77. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/ 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. Questions? More info: http://www.coreservlets.com/JSF-Tutorial/jsf2/ – JSF 2.2 tutorial http://www.coreservlets.com/JSF-Tutorial/primefaces/ – PrimeFaces tutorial http://courses.coreservlets.com/jsf-training.html – Customized JSF and PrimeFaces training courses http://coreservlets.com/ – 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

    ×