© 2005 Marty Hall

JSF: The "h" Library

Core Servlets & JSP book: www.coreservlets.com

More Servlets & JSP book: www.moreservlets.com
Servlet/JSP/Struts/JSF Training: courses.coreservlets.com
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.

© 2005 Marty Hall

For live JSF training, please see

JSP/servlet/Struts/JSF training courses at
http://courses.coreservlets.com/.
Taught by the author of Core Servlets and JSP, More
Servlets and JSP, and this tutorial. Available at
public venues, or customized versions can be held
on-site at your organization.
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.
 Topics in This Section
• Most common usage
• Shared attributes
• Implied attributes
• Elements that can invoke action
controllers/listeners
• Elements that can invoke value change
listeners
• Elements that display lists of items
• Custom components

4 J2EE training and tutorials: http://www.coreservlets.com

Documentation on h: Library
• Javadoc extensions can now generate
online API for JSP tag libraries
http://java.sun.com/j2ee/javaserverfaces/1.1_01/docs/
tlddocs/index.html

5 J2EE training and tutorials: http://www.coreservlets.com

 © 2005 Marty Hall

Form Basics

http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.

Most Common Elements

• h:form
– No ACTION specified
– You must use POST!
• h:inputText
– NAME generated automatically
– VALUE of form #{beanName.propertyName}
• h:inputSecret
– NAME generated automatically
– VALUE applies only to output, not input
• h:commandButton
– Action here roughly corresponds to form ACTION
• h:outputText
– Outputs bean properties.
7 J2EE training and tutorials: http://www.coreservlets.com
 Shared and Expected Attributes
• Shared attributes
– These attributes are available in almost all h:blah elements
– Will not be repeated in description of each element
• Most common shared attributes
– id. Identifier; used to give name to element so it can be referred to
later (e.g., from validation message). Often omitted.
• See validator section and very first action controller example.
– onclick, ondblclick, etc. JavaScript event handlers.
• Note that case matters, so onClick is not OK.
– styleClass. CSS style name.
• Expected attributes
– These attributes are the ones that the corresponding HTML element
has. E.g. size and maxlength for textfields
– Will be omitted in description of each element

8 J2EE training and tutorials: http://www.coreservlets.com

h:form
• Corresponding HTML element
– <FORM …>
• Notable feature
– You do not specify an action
• Attributes
– enctype. Encoding type.
• application/x-www-form-urlencoded (default)
• multipart/form-data
– target. Frame cell in which to display results.
– onsubmit. JavaScript code to run before form submission
• Can perform client-side field validation
• Examples
– See all previous sections
9 J2EE training and tutorials: http://www.coreservlets.com
 h:inputText
• Corresponding HTML element
– <INPUT TYPE="TEXT" …>
• Attributes
– value. Corresponding bean value.
• value="#{beanName.propertyName}"
• Used for both initial value and submitted value
– valueChangeListener. Method to fire when form submitted and
value has changed from previous value.
• Use onchange="submit()" and immediate with this
– onchange. JavaScript to run when value changes
– immediate. Use to indicate listener bypasses validation
– required. Flag indicating if user must supply a value.
• If omitted, form redisplayed and error message stored.
– validator. Method to perform validation.
• See validation section
• Examples
10
– See all previous sections J2EE training and tutorials: http://www.coreservlets.com

h:inputSecret
• Corresponding HTML element
– <INPUT TYPE="PASSWORD" …>
• Attributes
– value. Corresponding bean value.
• value="#{beanName.propertyName}"
• Used for submitted value only
– valueChangeListener. Method to fire when form
submitted and value has changed from previous value.
• Again, use onchange="submit" and immediate with this
– required. Flag indicating if user must supply a value.
• If omitted, form will be redisplayed and error message
stored.
– converter, validator. Methods to perform string
conversion and data validation.
• See validation section
• Example
11 – See all previous sections J2EE training and tutorials: http://www.coreservlets.com
 © 2005 Marty Hall

HTML Elements That

Can Invoke Action
Controllers and Action
Listeners
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.

h:commandButton (with value)

• Corresponding HTML element
– <INPUT TYPE="SUBMIT" …>
• Attributes
– value. Button label. A static string is common, but you
can also change value dynamically
• See event listener example for changing value dynamically
– action. Action controller method to fire when form
submitted. Runs after all listeners have completed.
– actionListener. Listener method to fire when form
submitted. Runs before action controller.
• Examples
– See all previous examples
– In particular, see event handling section for changing
values dynamically and using action listeners
13 J2EE training and tutorials: http://www.coreservlets.com
 h:commandButton (with image)
• Corresponding HTML element
– <INPUT TYPE="IMAGE" …>
• Server-side image map
• Attributes
– Same as on previous page, but actionListener
required
• Only listener can access the client ID
• Client ID needed to obtain x and y locations
• Locations of the form ClientID.x and ClientID.y
• See event handling section for examples

14 J2EE training and tutorials: http://www.coreservlets.com

h:commandLink
• Corresponding HTML element
– <A HREF="..."> with attached JavaScript that submits
form when link is pressed
– JavaScript inserted automatically by JSF
• Attributes
– value. Text of the link. A static string is common, but
you can also change value dynamically
– action. Action controller method to fire when form
submitted. Runs after all listeners have completed.
– actionListener. Listener method to fire when form
submitted. Runs before action controller.

15 J2EE training and tutorials: http://www.coreservlets.com

 © 2005 Marty Hall

Elements That Can

Invoke Value Change
Listeners

http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.

Most Common Elements with

valueChangeListener attributes
• Check boxes
– h:selectBooleanCheckbox
• Assign value to a boolean bean property. Value always set
to true or false (unlike Struts where only true set)
• Comboboxes
– h:selectOneMenu
– h:selectManyMenu
• List boxes
– h:selectOneListbox
– h:selectManyListbox
• Radio Buttons
– h:selectOneRadio
• Same improved behavior as checkboxes
• Textfields
– h:inputText
17 J2EE training and tutorials: http://www.coreservlets.com
 © 2005 Marty Hall

Elements That
Display Lists of Items

http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.

Comboboxes and List boxes

• Specifying one item at • Specifying entire list in
a time one fell swoop
<h:selectOneMenu ...> <h:selectOneMenu ...>
<f:selectItem <f:selectItems
itemValue="..." value="..."/>
itemLabel="..."/> </h:selectOneMenu>
<f:selectItem
itemValue="..."
itemLabel="..."/>
<f:selectItem
itemValue="..."
itemLabel="..."/>
</h:selectOneMenu>

– Note error in Core JSF

where itemLabel omitted
19 J2EE training and tutorials: http://www.coreservlets.com
 Comboboxes and List boxes:
Specifying List of Choices
• The value of f:selectItems should be a List
or array of java.faces.model.SelectItem
– See example in event-handling section
• SelectItem has two main constructors
– One just specifies a String
• Displayed value and value passed to bean setter are the
same
– One specifies a Java object and a String
• String displayed, but actual Java object is the value
supplied to bean setter (i.e., mapping performed
automatically by JSF)
SelectItem[] listboxItems =
{ new SelectItem(realValue1, "Choice 1"),
new SelectItem(realValue2, "Choice 2"), ...
}
20 J2EE training and tutorials: http://www.coreservlets.com

© 2005 Marty Hall

Outputting Values

http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.
 Output Options
• h:outputText
– Outputs bean property or collection element
• Values from properties file loaded into a collection via
f:loadBundle
– Roughly equivalent to bean:write from Struts
– Attributes
• styleClass or style: results in SPAN element instead
• escape: false value means not to filter < and >
• h:outputFormat
– Outputs parameterized error messages
– Parameters supplied with f:param
– See section on resource bundles

22 J2EE training and tutorials: http://www.coreservlets.com

© 2005 Marty Hall

Custom Components

http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.
 Custom Components
• You can roll your own complex components
• This is an advanced topic
– See Chapter 9 of Core JSF for details
• JSF comes bundled with demo components
that are ready to be used or adapted
– Deploy jsf_install_dir/samples/jsf-components.war and
access http://localhost/jsf-components/
– Included components
• Chart
• Graph or Tree
• Tabbed Pane
• Scroller
• Repeater
• Image Map
24 J2EE training and tutorials: http://www.coreservlets.com

Custom Components
• Chart • Graph or Tree

25 J2EE training and tutorials: http://www.coreservlets.com

 Custom Components
• Tabbed Pane

• Scroller

26 J2EE training and tutorials: http://www.coreservlets.com

Custom Components
• Repeater

• Image Map

27 J2EE training and tutorials: http://www.coreservlets.com

 Summary
• Most common form
<h:form>
<h:inputText value="#{beanName.propertyName}"/>
…
<h:commandButton action="#{beanName.methodName}"/>
</h:form>
• Command items
– h:commandButton (two forms)
– h:commandLink
• Value change items
– h:selectBooleanCheckbox
– h:selectOneMenu
– h:selectManyMenu
– h:selectOneListbox
– h:selectManyListbox
– h:selectOneRadio
28
– h:inputText
J2EE training and tutorials: http://www.coreservlets.com

© 2005 Marty Hall

Questions?

Core Servlets & JSP book: www.coreservlets.com

More Servlets & JSP book: www.moreservlets.com
Servlet/JSP/Struts/JSF Training: courses.coreservlets.com
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.