Zongwei Yuan 1

Why JavaServer Faces Model-view-controller (MVC) architecture Easy to Drop components onto a web page by adding component tags. Bind components on a page to server-side data. Wire component-generated events to server-side application code. Save and restore application state beyond the life of server requests. Reuse and extend components through customization. Provide important services: Data conversion Validation and error handling Internationalization Custom component Alternative render Tool support Extensibility Install JSF Jsf-api.jar, jsf-impl.jar and jstl.jar 2

Sample JSF File index.jsp A Simple JavaServer Faces Application Please enter your name and password Name: Password:

Managed bean Definition Bean Properties T getFoo() void setFoo(T newValue) Value binding expression Bean scope Request Session application Backing beans 4

Configure Beans WEB-INF/web.xml javax.faces.CONFIG_FILES WEB-INF/navigation.xml,WEB-INF/faces-configure.xml... WEB-INF/faces-configure.xml user com.corejsf.UserBean session In faces-configure.xml we can setting property values initializing lists and maps collection. changing bean definitions (for backing bean) string conversions (convert text value to different data type) 5

Value Binding expressions (1) Value binding Reference to implicit objects header headerValues param paramValues cookie initParam requestScope sessionScope applicationScope facesContext view 6

Value binding expressions (2) Immediate and deferred evaluation expression (${ } and #{ }) Composite expressions: arithmetic operators + - * / % relational operators >= == != logical operators && || ! the “empty”, “not” operator. the ternary ?: selection operator Method binding Attributes can bind to method: action validator actionListener valueChangeListener 7

Navigation Navigation rules In JSF file: In faces-configure.xml: /index.jsp login /welcome.jsp Dynamic navigation #{quiz.answerAction} 8

Load Property Bundle localization 9

Standard JSF Tags Core library tag total 18 HTML library tag total 25 Such as:... 10

Core Tags view Creates the top-level view subviewCreates a subview of a view facetAdds a facet to a component attributeAdds an attribute (key/value) to a component paramAdds a parameter to a component actionListenerAdds an action listener to a component valueChangeListenerAdds a valuechange listener to a component converterAdds an arbitrary converter to a component convertDateTimeAdds a datetime converter to a component convertNumberAdds a number converter to a component validatorAdds a validator to a component validateDoubleRangeValidates a double range for a component's value validateLengthValidates the length of a component's value validateLongRangeValidates a long range for a component's value loadBundleLoads a resource bundle, stores properties as a Map selectitemsSpecifies items for a select one or select many component selectitemSpecifies an item for a select one or select many component verbatim Adds markup to a JSF page 11

HTML Tags formHTML form inputTextSingle-line text input control inputTextareaMultiline text input control inputSecretPassword input control inputHiddenHidden field outputLabelLabel for another component for accessibility outputLinkHTML anchor outputFormatLike outputText, but formats compound messages outputTextSingle-line text output commandButtonButton: submit, reset, or pushbutton commandLinkLink that acts like a pushbutton messageDisplays the most recent message for a component messagesDisplays all messages graphicImageDisplays an image selectOneListboxSingle-select listbox selectOneMenuSingle-select menu selectOneRadioSet of radio buttons selectBooleanCheckboxCheckbox selectManyCheckboxSet of checkboxes selectManyListboxMultiselect listbox selectManyMenuMultiselect menu panelGridHTML table panelGroupTwo or more components that are laid out as one dataTableA feature-rich table control columnColumn in a dataTable 12

Tag Attribute Shared, unique, converter, validator, values Html and dhtml event attribute Action and actionListener Rendering and style 13

JSTL tags Reference Tags Core Functions Database XML I18N (format) Examples 14

h:form Has most of HTML and DHTML event attributes Has no method and action Use only post method Navigation submitted by components Works with JavaScript 15

Textfield and Textarea immediate, required, redisplay attribute 16

Buttons and links Action and actionListener attribute Immediate attribute 17

Message tag and Some special attributes: globalOnly for showDetail errorClass Information Warning Error fatal 18

Data table (1) ,

Data table (2) Data – one of follow types: Array ArrayDataModel java.util.List ListDataModel java.sql.ResultSet ResultDataModel javax.servlet.jsp.jstl.sql.Result ResultSetDataModel javax.faces.model.DataModel ScalarDataModel Header and footer facet Scrolling scroll bar. use pageant. use page widget 20

Conversion and Validation Standard Conversion tag Use converter attribute 21

Using standard validators Built-in validation Checking the length of a string Checking limits for a numerical value Checking that a value has been supplied Validation tag f:validateDoubleRange f:validateLongRange f:validateLength Overwrite messages create your own message bundle property overwrite message property value on the same key update configure.xml file to load the new bundle “required” attribute Bypass validation 22

Converter Object getAsObject(FacesContext context, UIComponent component, String newValue) String getAsString(FacesContext context, UIComponent component, Object value) Validator Implement interface javax.faces.validator.Validator Register in configure.xml Validate with bean method public class PaymentBean {... public void luhnCheck(FacesContext context, UIComponent component, Object value) {... } Implement custom converter and validator 23

Event Handling (1) JSF support 3 kind events: value change events action events phase events Request life cycle Restore View Apply Request Values Process Validations Update Model Values Invoke Application Render Response action an actionListener attribute ActionListener – for user interfaces logic and interface info (first) Action – for business logic (second triggered) 24

Event Handling (2) Use action listener tag f:actionListener and f:valueChangeListener Listener implements public class CountryListener implements ValueChangeListener { private static final String US = "United States"; public void processValueChange(ValueChangeEvent event) { FacesContext context = FacesContext.getCurrentInstance(); if (US.equals((String) event.getNewValue())) context.getViewRoot().setLocale(Locale.US); else context.getViewRoot().setLocale(Locale.CANADA); } 25

Event Handling (3) “immediate” to bypass other component validation Add immediate attribute Calling FacesContext.renderResponse() Phase event listener In configure.xml com.corejsf.PhaseTracker Listener implements interface javax.faces.event.PhaseListener PhaseId getPhaseId() void afterPhase(PhaseEvent) void beforePhase(PhaseEvent) 26

MyFaces project Introduction Compatible with tomcat and easy to deploy Rich debugging and diagnostic info Rich components (pagination) Provide eclipse plug-in Sub project Tomahawk Trinidad ExtVal (Extensions Validator) Installation and deployment Facelets Template, composite component 27

RBAC web app on MyFaces Database access application User View Source code example 28