| Text inputs are the mainstay of most web applications. JSF supports three varieties represented by the following tags: h:inputText h:inputSecret h:inputTextarea
Since the three tags use similar attributes, Table 4-7 lists attributes for all three. Table 4-7. Attributes for h:inputText, h:inputSecret and h:inputTextareaAttributes | Description |
|---|
cols | For h:inputTextarea only number of columns | immediate | Process validation early in the life cycle | redisplay | For h:inputSecret only when true, the input field's value is redisplayed when the web page is reloaded | required | Require input in the component when the form is submitted | rows | For h:inputTextarea only number of rows | valueChangeListener | A specified listener that's notified of value changes | binding, converter, id, rendered, required, styleClass, value, validator | Basic attributes[a] | accesskey, alt, dir, disabled, lang, maxlength, readonly, size, style, tabindex, title | HTML 4.0 pass-through attributes[b] alt, maxlength, and size do not apply to h:inputTextarea | onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onselect | DHTML events[c] |
[a] See Table 4-3 on page 90 for information about basic attributes.
[b] See Table 4-4 on page 93 for information about HTML 4.0 attributes.
[c] See Table 4-5 on page 95 for information about DHTML event attributes.
All three tags have immediate, required, value, and valueChangeListener attributes. The immediate attribute is used primarily for value changes that affect the user interface and is rarely used by these three tags. Instead, it is more commonly used by other input components such as menus and listboxes. See Chapter 7 for more information about the immediate attribute. Three attributes in Table 4-7 are each applicable to only one tag: cols, rows, and redisplay. The rows and cols attributes are used with h:inputTextarea to specify the number of rows and columns, respectively, for the text area. The redisplay attribute, used with h:inputSecret, is a boolean that determines whether a secret field retains its value and therefore redisplays it when the field's form is resubmitted. Table 4-8 shows sample uses of the h:inputText and h:inputSecret tags. Table 4-8. h:inputText and h:inputSecret ExamplesExample | Result |
|---|
<h:inputText value="#{form.testString}" readonly="true"/>
| 
| <h:inputSecret value="#{form.passwd}" redisplay="true"/>
| 
(shown after an unsuccessful form submit) | <h:inputSecret value="#{form.passwd}" redisplay="false"/>
| 
(shown after an unsuccessful form submit) | <h:inputText value="inputText" style="color: Yellow; background: Teal;"/>
| 
| <h:inputText value="1234567" size="5"/> | 
| <h:inputText value="1234567890" maxlength="6" size="10"/>
| 
|
The first example in Table 4-8 produces the following HTML:
<input type="text" name="_id0:_id4" value="12345678901234567890" readonly="readonly"/>
The input field is read-only, so our form bean only defines a getter method:
private String testString = "12345678901234567890"; public String getTestString() { return testString; }
The h:inputSecret examples illustrate the use of the redisplay attribute. If that attribute is true, the text field stores its value between requests and therefore the value is redisplayed when the page reloads. If redisplay is false, the value is discarded and is not redisplayed. The size attribute specifies the number of visible characters in a text field. But because most fonts are variable width, the size attribute is not precise, as you can see from the fifth example in Table 4-8, which specifies a size of 5 but displays six characters. The maxlength attribute specifies the maximum number of characters a text field will display. That attribute is precise. Both size and maxlength are HTML pass-through attributes. Table 4-9 shows examples of the h:inputTextarea tag. Table 4-9. h:inputTextarea ExamplesExample | Result |
|---|
<h:inputTextarea rows="5"/> | 
| <h:inputTextarea cols="5"/> | 
| <h:inputTextarea value="123456789012345" rows="3" cols="10"/>
| 
| <h:inputTextarea value="#{form.dataInRows}" rows="2" cols="15"/>
| 
|
The h:inputTextarea has cols and rows attributes to specify the number of columns and rows, respectively, in the text area. The cols attributes is analogous to the size attribute for h:inputText and is also imprecise. If you specify one long string for h:inputTextarea's value, the string will be placed in its entirety in one line, as you can see from the third example in Table 4-9. If you want to put data on separate lines, you can insert new line characters ('\n') to force a line break; for example, the last example in Table 4-9 accesses the dataInRows property of a backing bean. That property is implemented like this:
private String dataInRows = "line one\nline two\nline three"; public void setDataInRows(String newValue) { dataInRows = newValue; } public String getDataInRows() { return dataInRows; }
Using Text Fields and Text Areas Let's take a look at a complete example that uses text fields and text areas. The application shown in Figure 4-3 uses h:inputText, h:inputSecret, and h:inputTextarea to collect personal information from a user. Those components' values are wired to bean properties, which are accessed in a Thank You page that redisplays the information the user entered. Figure 4-3. Using Text Fields and Text Areas 
Three things are noteworthy about the following application. First, the JSF pages reference a user bean (com.corejsf.UserBean). Second, the h:inputTextarea tag transfers the text entered in a text area to the model (in this case, the user bean) as one string with embedded newlines ('\n'). We display that string by using the HTML <pre> element to preserve that formatting. Third, for illustration, we use the style attribute to format output. A more industrial-strength application would presumably use stylesheets exclusively to make global style changes easier to manage. Figure 4-4 shows the directory structure for the application shown in Figure 4-3. Listing 4-3 through Listing 4-7 show the pertinent JSF pages, managed beans, faces configuration file, and resource bundle. Listing 4-3. personalData/index.jsp 1. <html> 2. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 3. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> 4. <f:view> 5. <f:loadBundle basename="com.corejsf.messages" var="msgs"/> 6. <head> 7. <title> 8. <h:outputText value="#{msgs.indexWindowTitle}"/> 9. </title> 10. </head> 11. <body> 12. <h:outputText value="#{msgs.indexPageTitle}" 13. style="font-style: italic; font-size: 1.5em"/> 14. <h:form> 15. <table> 16. <tr> 17. <td> 18. <h:outputText value="#{msgs.namePrompt}"/> 19. </td> 20. <td> 21. <h:inputText value="#{user.name}"/> 22. </td> 23. </tr> 24. <tr> 25. <td> 26. <h:outputText value="#{msgs.passwordPrompt}"/> 27. </td> 28. <td> 29. <h:inputSecret value="#{user.password}"/> 30. </td> 31. </tr> 32. <tr> 33. <td> 34. <h:outputText value="#{msgs.tellUsPrompt}"/> 35. </td> 36. <td> 37. <h:inputTextarea value="#{user.aboutYourself}" rows="5" 38. cols="35"/> 39. </td> 40. </tr> 41. </table> 42. <h:commandButton value="#{msgs.submitPrompt}" action="thankYou"/> 43. </h:form> 44. </body> 45. </f:view> 46. </html>
Listing 4-4. personalData/thankYou.jsp 1. <html> 2. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 3. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> 4. <f:view> 5. <f:loadBundle basename="com.corejsf.messages" var="msgs"/> 6. <head> 7. <title> 8. <h:outputText value="#{msgs.thankYouWindowTitle}"/> 9. </title> 10. </head> 11. <body> 12. <h:outputText value="#{msgs.namePrompt}" style="font-style: italic"/> 13. <h:outputText value="#{user.name}"/> 14. <br/> 15. <h:outputText value="#{msgs.aboutYourselfPrompt}" 16. style="font-style: italic"/> 17. <br/> 18. <pre><h:outputText value="#{user.aboutYourself}"/></pre> 19. </body> 20. </f:view> 21. </html>
Listing 4-5. personalData/WEB-INF/classes/com/corejsf/UserBean.java 1. package com.corejsf; 2. 3. public class UserBean { 4. private String name; 5. private String password; 6. private String aboutYourself; 7. 8. // PROPERTY: name 9. public String getName() { return name; } 10. public void setName(String newValue) { name = newValue; } 11. 12. // PROPERTY: password 13. public String getPassword() { return password; } 14. public void setPassword(String newValue) { password = newValue; } 15. 16. // PROPERTY: aboutYourself 17. public String getAboutYourself() { return aboutYourself;} 18. public void setAboutYourself(String newValue) { aboutYourself = newValue; } 19. }
Listing 4-6. personalData/WEB-INF/faces-config.xml 1. <?xml version="1.0"?> 2. 3. <!DOCTYPE faces-config PUBLIC 4. "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN" 5. "http://java.sun.com/dtd/web-facesconfig_1_0.dtd"> 6. 7. <faces-config> 8. 9. <navigation-rule> 10. <from-view-id>/index.jsp</from-view-id> 11. <navigation-case> 12. <from-outcome>thankYou</from-outcome> 13. <to-view-id>/thankYou.jsp</to-view-id> 14. </navigation-case> 15. </navigation-rule> 16. 17. <managed-bean> 18. <managed-bean-name>user</managed-bean-name> 19. <managed-bean-class>com.corejsf.UserBean</managed-bean-class> 20. <managed-bean-scope>session</managed-bean-scope> 21. </managed-bean> 22. 23. </faces-config>
Listing 4-7. personalData/WEB-INF/classes/com/corejsf/messages.properties 1. indexWindowTitle=Using Textfields and Textareas 2. thankYouWindowTitle=Thank you for submitting your information 3. thankYouPageTitle=Thank you! 4. indexPageTitle=Please enter the following personal information 5. namePrompt=Name: 6. passwordPrompt=Password: 7. tellUsPrompt=Please tell us about yourself: 8. aboutYourselfPrompt=Some information about you: 9. submitPrompt=Submit your information
Figure 4-4. Directory Structure of the Text Fields and Text Areas Example 
Displaying Text and Images JSF applications use the following tags to display text and images: h:outputText h:outputFormat h:graphicImage
The h:outputText tag is one of JSF's simplest tags. With only a handful of attributes, it does not typically generate an HTML element. Instead, it generates mere text with one exception: if you specify the style or styleClass attributes, h:outputText will generate an HTML span element. Also, h:outputText and h:outputFormat have one attribute that is unique among all JSF HTML tags: escape. By default, the escape attribute is false, but if you set it to true, the following characters > < & are converted to < > and & respectively. Changing those characters helps prevent cross-site scripting attacks. See http://www.cert.org/advisories/CA-2000-02.html for more information about cross-site scripting attacks. Table 4-10 lists all h:outputText attributes. Table 4-10. Attributes for h:outputTextAttributes | Description |
|---|
escape | If set to true, escapes <, >, and & characters. Default value is false. | binding, converter, id, rendered, styleClass, value | Basic attributes[a] | style, title | HTML 4.0[b] |
[a] See Table 4-3 on page 90 for information about basic attributes.
[b] See Table 4-4 on page 93 for information about HTML 4.0 attributes.
The h:outputFormat tag formats a compound message with parameters specified in the body of the tag; for example:
<h:outputFormat value="{0} is {1} years old"> <f:param value="Bill"/> <f:param value="38"/> </h:outputFormat>
In the preceding code fragment, the compound message is {0} is {1} years old and the parameters, specified with f:param tags, are Bill and 38. The output of the preceding code fragment is: Bill is 38 years old. The h:outputFormat tag uses a java.text.MessageFormat instance to format it's output. Table 4-11 lists all attributes for h:outputFormat. Table 4-11. Attributes for h:outputFormatAttributes | Description |
|---|
escape | If set to true, escapes <, >, and & characters. Default value is false. | binding, converter, id, rendered, styleClass, value | Basic attributes[a] | style, title | HTML 4.0[b] |
[a] See Table 4-3 on page 90 for information about basic attributes.
[b] See Table 4-4 on page 93 for information about HTML 4.0 attributes.
The h:graphicImage tag lets you use a context-relative path meaning relative to the web application's top-level directory to display images. h:graphicImage generates an HTML img element. Table 4-12 shows all the attributes for h:graphicImage. Table 4-12. Attributes for h:graphicImageAttributes | Description |
|---|
binding, id, rendered, styleClass, value | Basic attributes[a] | alt, dir, height, ismap, lang, longdesc, style, title, url, usemap, width | HTML 4.0[b] | onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup | DHTML events[c] |
[a] See Table 4-3 on page 90 for information about basic attributes.
[b] See Table 4-4 on page 93 for information about HTML 4.0 attributes.
[c] See Table 4-5 on page 95 for information about DHTML event attributes.
Table 4-13 shows some examples of using h:outputText and h:graphicImage. Table 4-13. h:outputText and h:graphicImage ExamplesExample | Result |
|---|
<h:outputText value="#{form.testString}"/> | 
| <h:outputText value="Number #{form.number}"/> | 
| <h:outputText value="<input type='text' value='hello'/>"/>
| 
| <h:outputText escape="true" value="<input type='text' value='hello'/>"/>
| 
| <h:graphicImage value="/tjefferson.jpg"/> | 
| <h:graphicImage value="/tjefferson.jpg" style="border: thin solid black"/>
| 
|
The third and fourth examples in Table 4-13 illustrate use of the escape attribute. If the value for h:outputText is <input type='text' value='hello'/> and the escape attribute is false as is the case for the third example in Table 4-13 the h:outputText tag generates an HTML input element. Unintentional generation of HTML elements is exactly the sort of mischief that enables miscreants to carry out cross-site scripting attacks. With the escape attribute set to true as in the fourth example in Table 4-13 that output is transformed to harmless text, thereby thwarting a potential attack. The final two examples in Table 4-13 show you how to use h:graphicImage. Hidden Fields JSF provides support for hidden fields with h:inputHidden. Table 4-14 lists all attributes for h:inputHidden. Table 4-14. Attributes for h:inputHiddenAttributes | Attributes |
|---|
binding, converter, id, immediate, required, validator, value, valueChangeListener | Basic attributes[a] |
[a] See Table 4-3 on page 90 for information about basic attributes.
|
