JSF Java Server Faces Vinay Kumar Session Schedule

JSF: Java. Server Faces Vinay Kumar

Session Schedule JSF Introduction Page Navigation Managed Beans Expression Language Properties File

Session Schedule -contd Event Handling HTML Library Validation JDBC in JSF Data Tables

Session Schedule -contd Ajax-4 -JSF Basic component tags Advanced custom tags Custom components

JSF Introduction Different views of JSF Comparing JSF to standard servlet/JSP technology Comparing JSF to Apache Struts

What is JSF? A set of Web-based GUI controls and associated handlers? – JSF provides many prebuilt HTML-oriented GUI controls, along with code to handle their events. A device-independent GUI control framework? – JSF can be used to generate graphics in formats other than HTML, using protocols other than HTTP. A better Struts? – Like Apache Struts, JSF can be viewed as an MVC framework for building HTML forms, validating their values, invoking business logic, and displaying results.

Advantages of JSF • Custom GUI controls – JSF provides a set of APIs and associated custom tags to create HTML forms that have complex interfaces • Event handling – JSF makes it easy to designate Java code that is invoked when forms are submitted. The code can respond to particular buttons, changes in particular values, certain user selections, and so on. • Managed beans – In JSP, you can use property="*" with jsp: set. Property to automatically populate a bean based on request parameters. JSF extends this capability and adds in several utilities, all of which serve to greatly simplify request param processing. • Expression Language – JSF provides a concise and powerful language for accessing bean properties and collection elements

Disadvantages of JSF • Bigger learning curve – To use MVC with the standard Request. Dispatcher, you need to be comfortable with the standard JSP and servlet APIs. To use MVC with JSF, you have to be comfortable with the standard JSP and servlet APIs and a large and elaborate framework that is almost equal in size to the core system. This drawback is especially significant with smaller projects, near-term deadlines, and less experienced developers; you could spend as much time learning JSF as building your actual system. • Worse documentation – Compared to the standard servlet and JSP APIs, JSF has fewer online resources, and many first-time users find the online JSF documentation confusing and poorly organized. My. Faces is particularly bad.

JSF: Page Navigation Static Navigation

Static Navigation • When form submitted – A static page is displayed • Static result – No business logic, beans, or Java code of any sort – The return path is specified in the button itself. • Main points – Format of original form – Use of navigation-rule in faces-config. xml

Formats • Input form has following format: <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <f: view> HTML markup <h: form> HTML markup and h: blah tags </h: form> HTML markup </f: view> • faces-config. xml specifies navigation rules: <? xml version='1. 0' encoding='UTF-8'? > <!DOCTYPE faces-config PUBLIC …> <faces-config> <navigation-rule> <from-view-id>/blah. jsp</from-view-id> <navigation-case> <from-outcome>some string</from-outcome> <to-view-id>/WEB-INF/results/ something. jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

Create Input Form The h: form element – ACTION is automatically self (current URL) – METHOD is automatically POST • Elements inside h: form – Use special tags to represent input elements • h: input. Text corresponds to <INPUT TYPE="TEXT"> • h: input. Secret corresponds to <INPUT TYPE="PASSWORD"> • h: command. Button corresponds to <INPUT TYPE="SUBMIT"> – In later sections, we will see that input elements will be associated with bean properties – For static navigation, specify simple string as action of h: command. Button • String must match navigation rule from faces-config. xml

Example Code register. jsp <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <f: view> <!DOCTYPE …> <HTML> <HEAD>…</HEAD> <BODY> <CENTER> <TABLE BORDER=5> <TR><TH CLASS="TITLE">New Account Registration</TH></TR> </TABLE> <P> <h: form> Email address: <h: input. Text/><BR> Password: <h: input. Secret/><BR> <h: command. Button value="Sign Me Up!" action="register"/> </h: form> </CENTER></BODY></HTML> </f: view>

Example Code Result – resigter. jsp

Edit faces-config. xml • General format <? xml version='1. 0' encoding='UTF-8'? > <!DOCTYPE faces-config PUBLIC …> <faces-config> … </faces-config> • Specifying the navigation rules <? xml version='1. 0' encoding='UTF-8'? > <!DOCTYPE faces-config PUBLIC …> <faces-config> <navigation-rule> <from-view-id>/register. jsp</from-view-id> <navigation-case> <from-outcome>register</from-outcome> <to-view-id>/WEB-INF/results/result. jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

Create Results Pages Request. Dispatcher. forward used – So page can/should be in WEB-INF • Example code: – …/WEB-INF/results/result. jsp <!DOCTYPE …> <HTML> <HEAD>…</HEAD> <BODY> <CENTER> <TABLE BORDER=5> <TR><TH CLASS="TITLE">Success</TH></TR> </TABLE> <H 2>You have registered successfully. </H 2> </CENTER> </BODY></HTML>

Example Result Note that the URL is unchanged

Prevent Direct Access to JSP Pages Filename/URL correspondence – Actual files are of the form blah. jsp – URLs used are of the form blah. faces – You must prevent clients from directly accessing JSP pages • Since they would give erroneous results • Strategies – You cannot put input-form JSP pages in WEB-INF • Because URL must correspond directly to file location – So, use filter in web. xml. But: • You have to know the extension (. faces) • Assumes no non-JSF. jsp pages • This is a major drawback to JSF design

Preventing Direct Access: Faces. Redirect. Filter public class Faces. Redirect. Filter implements Filter { private final static String EXTENSION = "faces"; public void do. Filter(Servlet. Request req, Servlet. Response res, Filter. Chain chain) throws Servlet. Exception, IOException { Http. Servlet. Request request = (Http. Servlet. Request)req; Http. Servlet. Response response = (Http. Servlet. Response)res; String uri = request. get. Request. URI(); if (uri. ends. With(". jsp")) { int length = uri. length(); String new. Address = uri. substring(0, length-3) + EXTENSION; response. send. Redirect(new. Address); } else { // Address ended in "/" response. send. Redirect("index. faces"); } }

Preventing Direct Access: web. xml <filter> <filter-name>faces-redirect-filter</filter-name> <filter-class> coreservlets. Faces. Redirect. Filter </filter-class> </filter> <filter-mapping> <filter-name>faces-redirect-filter</filter-name> <url-pattern>*. jsp</url-pattern> </filter-mapping>

JSF: Page Navigation Dynamic Navigation

JSF Flow of Control • A form is displayed – Form uses f: view and h: form • The form is submitted to itself – Original URL and ACTION URL are http: //…/blah. faces • A bean is instantiated – Listed in the managed-bean section of faces-config. xml • The action controller method is invoked – Listed in the action attribute of h: command. Button • The action method returns a condition – A string that matches from-outcome in the navigation rules in facesconfig. xml • A results page is displayed – The page is specified by to-view-id in the navigation rules in facesconfig. xml

Steps : Dynamic Navigation 1) Create a bean A) Properties form data B) Action controller method C) Placeholders for results data 2) Create an input form A) Input fields refer to bean properties B) Button specifies action controller method that will return condition 3) Edit faces-config. xml A) Declare the bean B) Specify navigation rules 4) Create results pages – Output form data and results data with h: output. Text 5) Prevent direct access to JSP pages – Use a filter that redirects blah. jsp to blah. faces

Example: Health Plan Signup • Collects info to see if user qualifies for health plan • When form submitted, one of two possible results will be displayed – User is accepted into health plan – User is rejected from health plan • Main points – Specifying an action controller in the form – Creating an action controller method in the bean – Using faces-config. xml to • Declare bean • Map return conditions to output pages

Main Points of This Example • Specify the controller with #{bean. Name. method. Name} <h: command. Button value="Sign Me Up!" action="#{health. Plan. Controller. signup}"/> • Controller method returns strings corresponding to conditions – If null is returned, the form is redisplayed – Unlike with Struts, the controller need not extend a special class • Use faces-config. xml to declare the controller as follows <faces-config> <managed-bean-name>controller name</managed-bean-name> <managed-bean-class>controller class</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config> • Add multiple navigation-rule entries to faces-config. xml – One for each possible string returned by the controller – If no string matches, the form is redisplayed

Step 1: Create a Bean (A) Properties form data – Postponed until next session (B) Action controller method public class Health. Plan. Controller { public String signup() { if (Math. random() < 0. 2) { return("accepted"); } else { return("rejected"); } } } (C) Placeholders for results data – Postponed until next session

Step 2: Create Input Form • Same general syntax as in previous example – Except for action of command. Button <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <f: view> … <h: form> First name: <h: input. Text/><BR> Last name: <h: input. Text/><BR>. . . <h: command. Button value="Sign Me Up!" action="#{health. Plan. Controller. signup}"/> </h: form>… </f: view>

Step 2: Result

Step 3: Edit faces-config. xml (A) Declaring the bean … <faces-config> <managed-bean-name> health. Plan. Controller </managed-bean-name> <managed-bean-class> coreservlets. Health. Plan. Controller </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> … </faces-config>

Step 3: Edit faces-config. xml (B) Specifying navigation rules – Outcomes should match return values of controller <faces-config> … (bean definitions from previous page) <navigation-rule> <from-view-id>/signup. jsp</from-view-id> <navigation-case> <from-outcome>accepted</from-outcome> <to-view-id>/WEB-INF/results/accepted. jsp</to-view-id> </navigation-case> <from-outcome>rejected</from-outcome> <to-view-id>/WEB-INF/results/rejected. jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

Step 4: Create Results Pages • …/WEB-INF/results/accepted. jsp <!DOCTYPE …> <HTML> <HEAD>…</HEAD> <BODY> <CENTER> <TABLE BORDER=5> <TR><TH CLASS="TITLE">Accepted!</TH></TR> </TABLE> <H 2>You are accepted into our health plan. </H 2> Congratulations. </CENTER> </BODY></HTML>

Step 4: Create Results Pages …/WEB-INF/results/accepted. jsp <!DOCTYPE …> <HTML> <HEAD>…</HEAD> <BODY> <CENTER> <TABLE BORDER=5> <TR><TH CLASS="TITLE">Accepted!</TH></TR> </TABLE> <H 2>You are accepted into our health plan. </H 2> Congratulations. </CENTER> </BODY></HTML>

Step 4: Create Results Pages …/WEB-INF/results/rejected. jsp <!DOCTYPE …> <HTML> <HEAD>…</HEAD> <BODY> <CENTER> <TABLE BORDER=5> <TR><TH CLASS="TITLE">Rejected!</TH></TR> </TABLE> <H 2>You are rejected from our health plan. </H 2> Get lost. </CENTER> </BODY></HTML>

Step 4: Results

Step 5: Prevent Direct Access to JSP Pages • Use filter that captures url-pattern *. jsp – No changes from previous example

Tips • Wildcards in navigation rule – * for from-view-id matches any starting page <navigation-rule> <from-view-id>*</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/WEB-INF/results/success. jsp</to-view-id> </navigation-case> </navigation-rule> • Getting the request and response objects Http. Servlet. Request request = (Http. Servlet. Request)context. get. Request(); Http. Servlet. Response response = (Http. Servlet. Response)context. get. Response(); • In some environments, you cast results of get. Request and get. Response to values other than Http. Servlet. Request and Http. Servlet. Response E. g. , in a portlet environment, you might cast result to Portlet. Request and Portlet. Response

Interleaving managed-bean and navigation-rule • If you have several different addresses in your app, it is OK to alternate <managed-bean> Stuff for bean 1 </managed-bean> <navigation-rule> Rules for address that uses bean 1 </navigation-rule> <managed-bean> Stuff for bean 2 </managed-bean> <navigation-rule> Rules for address that uses bean 2 </navigation-rule> – Of course, it is also OK to put all bean defs at the top, followed by all navigation rules.

JSF: Managed Beans • Using beans to represent request parameters • Declaring beans in faces-config. xml • Referring to beans in input forms • Outputting bean properties

JSF Flow of Control

Steps in Using JSF 1) Create a bean A) Properties form data B) Action controller method C) Placeholders for results data 2) Create an input form A) Input fields refer to bean properties B) Button specifies action controller method that will return condition 3) Edit faces-config. xml A) Declare the bean B) Specify navigation rules 4) Create results pages – Output form data and results data with h: output. Text 5) Prevent direct access to JSP pages – Use a filter that redirects blah. jsp to blah. faces

Example: Using Beans • When form submitted, three possible results – Error message re illegal email address – Error message re illegal password – Success • New features – Action controller obtains request data from within bean – Output pages access bean properties • Main points – Defining a bean with properties for the form data – Declaring beans in faces-config. xml – Outputting bean properties

Step 1: Example Code (1 A) Form data public class Registration. Bean implements Serializable { private String email = "user@host"; private String password = ""; public String get. Email() { return(email); } public void set. Email(String email) { this. email = email; } public String get. Password() { return(password); } public void set. Password(String password) { this. password = password; }

Step 1: Example Code (1 B) Action controller method public String register() { if ((email == null) || (email. trim(). length() < 3) || (email. index. Of("@") == -1)) { suggestion = Suggestion. Utils. get. Suggestion. Bean(); return("bad-address"); } else if ((password == null) || (password. trim(). length() < 6)) { suggestion = Suggestion. Utils. get. Suggestion. Bean(); return("bad-password"); } else { return("success"); } }

Step 1: Example Code (1 C) Placeholder for storing results – Note that action controller method called business logic and placed the result in this placeholder private Suggestion. Bean suggestion; public Suggestion. Bean get. Suggestion() { return(suggestion); }

Step 1: Example Code Result returned by business logic package coreservlets; import java. io. *; public class Suggestion. Bean implements Serializable { private String email; private String password; public Suggestion. Bean(String email, String password) { this. email = email; this. password = password; } public String get. Email() { return(email); } public String get. Password() { return(password); } }

Step 1: Example Code • Business logic public class Suggestion. Utils { private static String[] suggested. Addresses = { "president@whitehouse. gov", "gates@microsoft. com", “tennyson@google. com", “s. jobes@apple. com" }; private static String chars = "abcdefghijklmnopqrstuvwxyz 0123456789#@$%^&*? !"; public static Suggestion. Bean get. Suggestion. Bean() { String address = random. String(suggested. Addresses); String password = random. String(chars, 8); return(new Suggestion. Bean(address, password)); }. . . }

Step 2: Create Input Form • Similar to previous example, except – h: input. Blah tags given a value attribute identifying the corresponding bean property • Example code <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <f: view>… <h: form> Email address: <h: input. Text value="#{registration. Bean. email}"/><BR> Password: <h: input. Secret value="#{registration. Bean. password}"/><BR> <h: command. Button value="Sign Me Up!" action="#{registration. Bean. register}"/> </h: form>… </f: view>

Step 2: Result The user@host value comes from the bean

Step 3: Edit faces-config. xml (A) Declare bean … <faces-config> <managed-bean-name> registration. Bean </managed-bean-name> <managed-bean-class> coreservlets. Registration. Bean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> … </faces-config>

Step 3: Edit faces-config. xml • (B) Define navigation rules … <faces-config> … <navigation-rule> <from-view-id>/register. jsp</from-view-id> <navigation-case> <from-outcome>bad-address</from-outcome> <to-view-id>/WEB-INF/results/bad-address. jsp</to-view-id> </navigation-case> <from-outcome>bad-password</from-outcome> <to-view-id>/WEB-INF/results/bad-password. jsp</to-view-id> </navigation-case> <from-outcome>success</from-outcome> <to-view-id>/WEB-INF/results/success. jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

Step 4: Create Results Pages • …/jsf-beans/WEB-INF/results/bad-address. jsp <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <f: view> <!DOCTYPE …> <HTML> … <TABLE BORDER=5> <TR><TH CLASS="TITLE">Illegal Email Address</TH></TR> </TABLE> <P> The address "<h: output. Text value="#{registration. Bean. email}"/>" is not of the form username@hostname (e. g. , <h: output. Text value="#{registration. Bean. suggestion. email}"/>). <P> Please <A HREF="register. faces">try again</A>. … </HTML> </f: view>

Step 4: Example Result for Bad Email Address Input

Step 4: Example Result for Bad Email Address Output

Step 5: Prevent Direct Access to JSP Pages • Use filter that captures url-pattern *. jsp – No changes from previous example

Expression Language - Advantages Important • Shorthand notation for bean properties. – To reference the company. Name property (i. e. , result of the get. Company. Name method) of a scoped variable (i. e. object stored in request, session, or application scope) or managed bean named company, you use #{company. Name}. To reference the first. Name property of the president property of a scoped variable or managed bean named company, you use #{company. president. first. Name}. • Simple access to collection elements. – To reference an element of an array, List, or Map, you use #{variable[index. Or. Key]}. Provided that the index or key is in a form that is legal for Java variable names, the dot notation for beans is interchangeable with the bracket notation for collections.

Expression Language - Advantages Less Important • Succinct access to request parameters, cookies, and other request data. – To access the standard types of request data, you can use one of several predefined implicit objects. • A small but useful set of simple operators. – To manipulate objects within EL expressions, you can use any of several arithmetic, relational, logical, or empty-testing operators. • Conditional output. – To choose among output options, you do not have to resort to Java scripting elements. Instead, you can use #{test ? option 1 : option 2}. • Automatic type conversion. – The expression language removes the need for most typecasts and for much of the code that parses strings as numbers. • Empty values instead of error messages. – In most cases, missing values or

Preventing Use of Standard Scripting Elements in JSP 2. 0 To enforce EL-only with no scripting, use scriptinginvalid in web. xml – Still permits both the JSF EL and the JSP 2. 0 EL <? xml version="1. 0" encoding="ISO-8859 -1"? > <web-app xmlns="http: //java. sun. com/xml/ns/j 2 ee" xmlns: xsi= "http: //www. w 3. org/2001/XMLSchema-instance" xsi: schema. Location= "http: //java. sun. com/xml/ns/j 2 ee web-app_2_4. xsd" version="2. 4"> <jsp-property-group> <url-pattern>*. jsp</url-pattern> <scripting-invalid>true</scripting-invalid> </jsp-property-group> </web-app>

Bean Properties Example: Test. Bean import java. util. *; public class Test. Bean { private Date creation. Time = new Date(); private String greeting = "Hello"; public Date get. Creation. Time() { return(creation. Time); } public String get. Greeting() { return(greeting); } public double get. Random. Number() { return(Math. random()); } }

Bean Properties Example: faces-config. xml <? xml version='1. 0' encoding='UTF-8'? > <!DOCTYPE. . . > <faces-config> <managed-bean-name>test. Bean</managed-bean-name> <managed-bean-class> coreservlets. Test. Bean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>. . . </faces-config>

Bean Properties Example: bean-properties. jsp (. faces) <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <f: view>. . . <BODY> <TABLE BORDER=5 ALIGN="CENTER"> <TR><TH CLASS="TITLE">Accessing Bean Properties</TH></TR> </TABLE> <UL> <LI>Creation time: <h: output. Text value="#{test. Bean. creation. Time}"/> <LI>Greeting: <h: output. Text value="#{test. Bean. greeting}"/> <LI>Random number: <h: output. Text value="#{test. Bean. random. Number}"/> </UL> </BODY></HTML> </f: view>

Bean Properties Example: Result

Nested Properties Example: Name. Bean public class Name. Bean { private String first. Name = "Missing first name"; private String last. Name = "Missing last name"; public Name. Bean() {} public Name. Bean(String first. Name, String last. Name) { set. First. Name(first. Name); set. Last. Name(last. Name); } public String get. First. Name() { return(first. Name); } public void set. First. Name(String new. First. Name) { first. Name = new. First. Name; }. . . }

Nested Properties Example: Company. Bean public class Company. Bean { private String company. Name; private String business; public Company. Bean(String company. Name, String business) { set. Company. Name(company. Name); set. Business(business); } public String get. Company. Name() { return(company. Name); } public void set. Company. Name(String new. Company. Name) { company. Name = new. Company. Name; }. . . }

Nested Properties Example: Employee. Bean public class Employee. Bean { private Name. Bean name; private Company. Bean company; public Employee. Bean(Name. Bean name, Company. Bean company) { set. Name(name); set. Company(company); } public Employee. Bean() { this(new Name. Bean("Marty", "Hall"), new Company. Bean("coreservlets. com", "J 2 EE Training and Consulting")); } public Name. Bean get. Name() { return(name); } public void set. Name(Name. Bean new. Name) { name = new. Name; }. . . }

Nested Properties Example: faces-config. xml <faces-config>. . . <managed-bean> <managed-bean-name>employee</managed-bean-name> <managed-bean-class> coreservlets. Employee. Bean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>. . . </faces-config>

Nested Properties Example: nested-properties. jsp (. faces) <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <f: view>. . . <BODY> <TABLE BORDER=5 ALIGN="CENTER"> <TR><TH CLASS="TITLE">Using Nested Bean Properties</TH></TR> </TABLE> <UL> <LI>Employee's first name: <h: output. Text value="#{employee. name. first. Name}"/> <LI>Employee's last name: <h: output. Text value="#{employee. name. last. Name}"/> <LI>Name of employee's company: <h: output. Text value="#{employee. company. Name}"/> <LI>Business area of employee's company: <h: output. Text value="#{employee. company. business}"/> </UL> </BODY></HTML> </f: view>

Nested Properties Example: Result

Using Properties Files (Resource Bundles) • Loading properties files • Simple messages • Parameterized messages • Internationalized messages

Simple Messages 1. Create a. properties file • Contains simple key. Name=value pairs • Must be deployed to WEB-INF/classes • In Eclipse, this means you put it in "src" folder 2. Load file with f: load. Bundle – basename gives base file name – var gives scoped variable (Map) that will hold results • Relative to WEB-INF/classes, . properties assumed • E. g. , for WEB-INF/classes/messages. properties <f: load. Bundle basename="messages" var="msgs"/> • E. g. , for WEB-INF/classes/package 1/test. properties <f: load. Bundle basename="package 1. test" var="msgs"/> 3. Output messages using normal EL – #{msgs. key. Name}

Parameterized Messages 1. Create a. properties file in/under WEB-INF/classes – Values contain {0}, {1}, {2}, etc. – E. g. , some. Name=blah {0} blah {1} – Warning: My. Faces bug prevents single quotes in values 2. Load file with f: load. Bundle as before – basename gives base file name – var gives scoped variable (Map) that will hold results 3. Output messages using h: output. Format – value gives base message – nested f: param gives substitution values – E. g. : <h: output. Format value="#{msgs. some. Name}"> <f: param value="value for 0 th entry"/> <f: param value="value for 1 st entry"/> </h: output. Format>

Internationalized Messages 1. Create multiple similarly named. properties files – blah. properties, blah_es_mx. properties 2. Supply locale argument to f: view <f: view locale="#{faces. Context. external. Context. request. loca le}"> – Determines locale from browser language settings – Can also set the Locale based on user input locale="#{settings. selected. Locale}"