csci 6962: server-side design and programming
DESCRIPTION
CSCI 6962: Server-side Design and Programming. Java Server Faces Components and Tags. JSF Tags. JSF pages contain mix of HTML and JSF tagsTRANSCRIPT
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