Sunday, October 18, 2009

JSF Components



JSF Components


To this point, we have used only output
components in table columns, but you can place any JSF component in a table
cell. Figure 5-5 shows an application that uses a variety of components in
a table.





Figure 5-5. JSF components in
table cells






h:dataTable iterates over data,
so the table shown in Figure 5-5
provides a list of integers for that purpose. We use the current integer to
configure components in the "Number", "Textfields", "Buttons", and "Menu"
columns.


Components in a table are no different
than components outside a table; you can manipulate them in any manner you
desire, including conditional rendering with the rendered attribute,
handling events, and the like.


The directory structure for the application
shown in Figure 5-5
is shown in Figure
5-6. The JSF page, faces configuration file, and
property resource bundle are given in Listings 5-8 through 5-10.





Figure 5-6. Directory structure for the components
example




Listing 5-8.
components/web/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. <head>
6. <link href="styles.css" rel="stylesheet" type="text/css"/>
7. <title>
8. <h:outputText value="#{msgs.windowTitle}"/>
9. </title>
10. </head>
11. <body style="background: #eee">
12. <h:form>
13. <h:dataTable value="#{numberList}" var="number">
14. <h:column>
15. <f:facet name="header">
16. <h:outputText value="#{msgs.numberHeader}"/>
17. </f:facet>
18. <h:outputText value="#{number}"/>
19. </h:column>
20. <h:column>
21. <f:facet name="header">
22. <h:outputText value="#{msgs.textfieldHeader}"/>
23. </f:facet>
24. <h:inputText value="#{number}" size="3"/>
25. </h:column>
26. <h:column>
27. <f:facet name="header">
28. <h:outputText value="#{msgs.buttonHeader}"/>
29. </f:facet>
30. <h:commandButton value="#{number}"/>
31. </h:column>
32. <h:column>
33. <f:facet name="header">
34. <h:outputText value="#{msgs.checkboxHeader}"/>
35. </f:facet>
36. <h:selectBooleanCheckbox value="false"/>
37. </h:column>
38. <h:column>
39. <f:facet name="header">
40. <h:outputText value="#{msgs.linkHeader}"/>
41. </f:facet>
42. <h:commandLink>
43. <h:outputText value="#{number}"/>
44. </h:commandLink>
45. </h:column>
46. <h:column>
47. <f:facet name="header">
48. <h:outputText value="#{msgs.graphicHeader}"/>
49. </f:facet>
50. <h:graphicImage value="images/dice#{number}.gif"
51. style="border: 0px"/>
52. </h:column>
53. <h:column>
54. <f:facet name="header">
55. <h:outputText value="#{msgs.menuHeader}"/>
56. </f:facet>
57. <h:selectOneMenu>
58. <f:selectItem itemLabel="#{number}" itemValue="#{number}"/>
59. </h:selectOneMenu>
60. </h:column>
61. <h:column>
62. <f:facet name="header">
63. <h:outputText value="#{msgs.radioHeader}"/>
64. </f:facet>
65. <h:selectOneRadio layout="LINE_DIRECTION" value="nextMonth">
66. <f:selectItem itemValue="yes" itemLabel="yes"/>
67. <f:selectItem itemValue="no" itemLabel="no" />
68. </h:selectOneRadio>
69. </h:column>
70. <h:column>
71. <f:facet name="header">
72. <h:outputText value="#{msgs.listboxHeader}"/>
73. </f:facet>
74. <h:selectOneListbox size="3">
75. <f:selectItem itemValue="yes" itemLabel="yes"/>
76. <f:selectItem itemValue="maybe" itemLabel="maybe"/>
77. <f:selectItem itemValue="no" itemLabel="no" />
78. <f:selectItem itemValue="ok" itemLabel="ok" />
79. </h:selectOneListbox>
80. </h:column>
81. </h:dataTable>
82. </h:form>
83. </body>
84. </f:view>
85. </html>




Listing 5-9.
components/web/WEB-INF/faces-config.xml





 1. <?xml version="1.0"?>
2. <faces-config xmlns="http://java.sun.com/xml/ns/javaee"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
5. http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
6. version="1.2">
7. <application>
8. <resource-bundle>
9. <base-name>com.corejsf.messages</base-name>
10. <var>msgs</var>
11. </resource-bundle>
12. </application>
13.
14. <managed-bean>
15. <managed-bean-name>numberList</managed-bean-name>
16. <managed-bean-class>java.util.ArrayList</managed-bean-class>
17. <managed-bean-scope>session</managed-bean-scope>
18. <list-entries>
19. <value>1</value>
20. <value>2</value>
21. <value>3</value>
22. <value>4</value>
23. <value>5</value>
24. </list-entries>
25. </managed-bean>
26. </faces-config>




Listing 5-10.
components/src/java/com/corejsf/messages.properties





  1. windowTitle=Using JSF Components in Tables
2.
3. numberHeader=Number
4. textfieldHeader=Textfields
5. buttonHeader=Buttons
6. checkboxHeader=Checkboxes
7. linkHeader=Links
8. menuHeader=Menu
9. graphicHeader=Graphics
10. radioHeader=Radio Buttons
11. listboxHeader=List Boxes

No comments:

Post a Comment