23
CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Embed Size (px)

Citation preview

Page 1: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

CSCI 6962: Server-side Design and Programming

Java Server FacesComponents and Tags

Page 2: CSCI 6962: Server-side Design and Programming Java Server Faces Components 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

Page 3: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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)

Page 4: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Example JSF

configure.xhtml order.xhtml

ComputerBean

Page 5: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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)

Page 6: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Checkbox Mehtods

• Requires methods– public void setVariable(boolean value)– public boolean isVariable()

Page 7: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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

Page 8: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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

Page 9: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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)

Page 10: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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

Page 11: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Radio Buttons

• Example: Radio button for memory choices

• Linked to String variable in bean

Page 12: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Radio Buttons

• Evaluates to a single String value– Can manipulate in bean– Can access in JSF page

Page 13: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Multiple Selection Elements

• Must be linked to array in bean

Page 14: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Multiple Selection Elements

• Can manipulate like array– Iterate through elements, search, etc.

– Can check whether length property = 0 to check whether user selected anything

Page 15: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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) {…

Page 16: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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”

Page 17: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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

Page 18: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Multiple Select Elements

• Can also generate entire list in bean and then display using simple form element

Page 19: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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

Page 20: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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

Page 21: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

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

Page 22: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Bean Generated Lists

Page 23: CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags

Bean Generated Lists