CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags
Jan 12, 2016
CSCI 6962: Server-side Design and Programming
Java Server FacesComponents and Tags
JSF Tags
• JSF pages contain mix of HTML and JSF tags– <h:____ html tags (most correspond to standard html)– <f:____ facelet tags (specific to JSF capabilites)– <c:____ JSTL tags (simple control flow actions)
• XML format• Defined in libraries loaded in xhtml tag at beginning
JSF Tags
• JSF pages mapped to servlet– Code in web.xml generated when JSF webapp created
• Converted to servlet and run on demand (like JSP)
Example JSF
configure.xhtml order.xhtml
ComputerBean
Checkbox
• Tag: <h:selectBooleanCheckbox value=“#{beanname.variable}”/>
• Maps to a boolean member variable in bean
• Can access as boolean in bean methods
Can set initial state of checkbox (true if checked)
Checkbox Mehtods
• Requires methods– public void setVariable(boolean value)– public boolean isVariable()
Conditional Output
• Goal: Display whether monitor selected
• Methods:– Place condition in JSF page to only display row if monitor
checked– Place condition in bean to create an output string in html
(either a table row or nothing) and display it in JSF page
JSF Page Condition
• Requires use of tags in JSTL library– Cannot just put executable code in page as in JSP
• <c:if test=“boolean value”> html </c:if>
• Condition can be bean value
If trueDisplay this
Bean Value Condition
• Create “get” method for string to display– Multiple possible strings based on bean values
• Create outputText to display that string
– escape=“false” causes html to be rendered (instead of ‘<‘ and ‘>’)– Possible security hole (cross site scripting)
List-like Form Elements
• Basic syntax like select/option lists in html• Grouped into single select and multiple select types
• Contains list of selectItem elements:
<f:selectItem itemLabel=“label” itemValue=“value”/>
<h:selectOneListbox<h:selectOneMenu<h:selectOneRadio
<h:selectManyCheckbox<h:selectManyListbox<h:selectManyMenu
label to display
value to pass
Radio Buttons
• Example: Radio button for memory choices
• Linked to String variable in bean
Radio Buttons
• Evaluates to a single String value– Can manipulate in bean– Can access in JSF page
Multiple Selection Elements
• Must be linked to array in bean
Multiple Selection Elements
• Can manipulate like array– Iterate through elements, search, etc.
– Can check whether length property = 0 to check whether user selected anything
Iteration JSTL Tag
• Can use like simple for loop<c:forEach var=“loopiterator” begin=“inital” end=“final” step=“step”/> html</c:forEach>
• Similiar tofor (int loopiterator = initial; loopiterator <= final; loopiterator += step) {…
Iteration JSTL Tag
• More useful for looping through collection – Arrays, database tables, etc.
• <c:forEach items=“array or collection” var=“ith value” /> html that uses var</c:forEach>
• Example: Array stooges = [“Larry”, “Curley”, “Moe”]<c forEach items=“stooges” var=“stooge”/>– Loops 3 times– Iteration 1: stooge = “Larry”– Iteration 2: stooge = “Curley”– Iteration 3: stooge = “Moe”
Iteration JSTL Tag
• Example: Displaying all software selected by user– In software array in bean
ith element of software array
Display that value in outputLabel
Multiple Select Elements
• Can also generate entire list in bean and then display using simple form element
Defining List Elements in Bean
• List contents hardwired in JSF page
– Difficult to modify in future– List contents may be defined by business model
• Better if list elements defined in bean instead of JSF– JSF links to bean to get list elements
Bean Generated Lists
• Construct array of SelectItem objects in bean– Must import javax.faces.model.* in bean
• Provide get method to return the array
• Use <f:selectItems value=“bean.arrayName”/>to insert all SelectItem objects in array into list
Array of SelectItems
• Syntax:private static SelectItem[] arrayName { new SelectItem(“value1”, “label1”), new SelectItem(“value2”, “label2”), new SelectItem(“value3”, “label3”), …};
public getArrayName() { return arrayName;}
Construct new SelectItem for each element in list
Bean Generated Lists
Bean Generated Lists