JSF What is JSF (Java Server Faces)? It is application framework for creating Web-based user interfaces. It provides lifecycle management through a controller servlet and provides a rich component model with event handling and component rendering. JSF is a specification in Java EE 6 and can be used with any application server, like Tomcat but you need to download the required implementation. 4 May 2012 1
JSF is implemented as a controlling server and a number of tag libraries. It provides a PDL (Page Declaration Language). This is either JSP or Facelets. The default is Facelets, a tag library. JSF also includes support for AJAX (Asynchronous Javascript and XML). AJAX is a Javascript based component that allows dynamical update of single components in the display. 4 May 2012 2
JSF is used to implement the V part of an MVC based application. An implementation will contain JSF pages, Backing Java Beans, the predefined controllng servlet and a configuration file. (faces-config.xml). In addition you can implement Converters and Validators, to do data converstions and data validation. 4 May 2012 3
JSF facelets provides some families of tags: h, HTML tags like commandlink, inputtext etc f, custom actions like convertnumber, validatelength ui, create a component template compostite, define composite components c, JSTL core library fn, JSTL function library 4 May 2012 4
In a nutshell, JSF eases development because: lets you create user interfaces from a set of reusable server-side components Provides a set of JSP tags to access those components Transparently saves state information and repopulates forms when they redisplay provides a framework for implementing custom components Encapsulates event handling and component rendering so you can use JSF components to support other markup languages other than HTML 4 May 2012 5
While JSP and Struts generates HTML and sends it directly to the client, JSF generates a representation of all components and then renders it using a renderer. So the JSF-servlet maintains a state of our View. This is either maintained on the server or on the client. Response <html> <head> <input type =... Generated Static text JSF-tree JSP page <html> <head> <h:input.. <h:... </head> </html> Static text </head> </html> 4 May 2012 6
Components may be associated with model objects, that is usually beans that holds values from the components. Just like Swing, JSF uses events, i. e. when you do something an Event is fired and delivered to those who have registered. However, the View is displayed on a client that is separated from the server by a network and that only communicates with HTTP. 4 May 2012 7
This isn t a problems for things that causes a form to be delivered to the server, but it is a problem for other thing like entering a text in an input field, expanding a menu etc. Since we can t fire events through the network using HTTP, that is done on the server. We specify a scheme that JSF uses when receiving a request. In this scheme changes are detected and Events can be fired. Some of the changes just affects the View, like expanding a menu, while others affects the Model layer. These are treated differently, the latter type requires that the full state is restored before they are fired, while they are create early in the restoration phase. 4 May 2012 8
The Java Server Faces lifecycle. Reconstitute Request tree Apply request values and handle events Process validations redisplay requested Render Response Invoke Applications Update model values Conversion errors Validation errors Reconstitute Request Tree restores our Component tree from a saved state either in the server or from information in the request. That is you get a request and you have a stored state. From that, you restore a view tree. 4 May 2012 9
Apply Request Values causes each component to find its value in the request. It also creates Events if needed and queues them. That is you traverses your tree and let each component find its values in the request. It also checks if there is a difference between the values in the request block and in the stored state. If there is, a ValueChange event is fired and delivered and we enter the renderphase for this component. We can do this is because we have restored the complete view so it can safely be rendered. But we have not updated our application yet, therefore Events that affects the application cannot be created here. 4 May 2012 10
Process Validations will validate data. This means that data is converted and checked for validity. Parameters from the request are always Strings. They need to be converted into the proper type before being evaluated. JSF converts between between basic type automatically, but for more complicated or ambigous types like Dates you must supply converters. There are standard Validator but you can plugin custom Validators. Update Model Values updates any model objects from their respective components. This is similar to the Action- Forms in Struts. 4 May 2012 11
Invoke Application will invoke the Events that are relevant to the application code. Render Response will create a response and render the components. 4 May 2012 12
To use JSF you need to download it and put it in place in your application. Just as Struts it is a number of tags, classes and xml-files. Just as Struts, JSF captures a family of requests and the control servlet handles these. It is also the servlet that maintains and controls state if desired. 4 May 2012 13
JSF uses its own version of EL, the Expression Language. They are similar but JSP EL evaluates when the page is processed, i. e at rendertime, while JSF EL may be evaluated both when input is processed (eg while updating bean properties) or in the rendering phase. The syntactical difference is ${expr} resp #{expr} 4 May 2012 14
An example <%@ taglib uri= http://java.sun.com/jsf/html prefix= h %> <%@ taglib uri= http://java.sun.com/jsf/core prefix= f %> <html> <head> <title>newsletter Subscription</title> </head> <body> <f:view> <h:form> <table> <tr> <td>email Address:</td> <td> <h:inputtext value= #{subscr.emailaddr} /> </td> </tr> <tr> <td>newsletters:</td> 4 May 2012 15
<td> <h:selectmanycheckbox value= #{subscr.subscriptionids} > <f:selectitem itemvalue= 1 itemlabel= JSF News /> <f:selectitem itemvalue= 2 itemlabel= IT Industry News /> <f:selectitem itemvalue= 3 itemlabel= Company News /> </h:selectmanycheckbox> </td> </tr> </table> <h:commandbutton value= Save action= #{subscrhandler.savesubscriber} /> </h:form> </f:view> </body> </html> 4 May 2012 16
We do have a special file faces-config.xml that among others says: <managed-bean> <managed-bean-name>subscr</managed-bean-name> <managed-bean-class> com.mycompany.newsservice.models.subscriber </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <managed-bean> <managed-bean-name> subscrhandler </managed-bean-name> <managed-bean-class> com.mycompany.newsservice.handlers.subscriberhandler </managed-bean-class> <managed-bean-scope> request </managed-bean-scope> <managed-property> <property-name>subscriber</property-name> <value>#{subscr}</value> </managed-property> </managed-bean> Which mainly means that subscr and subscrhandler are beans that are automatically created and stored in the session respective request by the JSF servlet. 4 May 2012 17
<%@ page contenttype="text/html" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <f:view> <h:form> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <h:commandbutton value="new" disabled="#{reporthandler.newdisabled}" /> <h:commandbutton value="delete" disabled="#{reporthandler.deletedisabled}" /> <h:commandbutton value="submit" disabled="#{reporthandler.submitdisabled}" /> <h:commandbutton value="accept" rendered="#{reporthandler.acceptrendered}" disabled="#{reporthandler.acceptdisabled}" /> <h:commandbutton value="reject" rendered="#{reporthandler.rejectrendered}" disabled="#{reporthandler.rejectdisabled}" /> </td> 4 May 2012 18
<td align="right"> You're logged in as "${pagecontext.request.remoteuser}" [<h:outputlink value="../../logout.jsp"> <h:outputtext value="logout" /> </h:outputlink>] [<h:outputlink value="prefuser.faces"> <h:outputtext value="preferences" /> </h:outputlink>] </td> </tr> </table> </h:form> </f:view> This contains conditionals that handles enabling and rendering. 4 May 2012 19
A Facelet example. Note that this assumes XHTML rules, this means that JSP directives cannot be used because they violate the XML rules. There are alternative syntaxes though <html xmlns= http://www.w3.org/1999/xhtml xmnls= http://java.sun.com/jsf/html xmnls= http://java.sun.com/jsf/core > <h:head> <title>creates a new book</title> </h:head> <h:body> <h3>creates a new book</h3> <hr/> <h:form id= form prependid= false > <h:panelgrid columns= 2 > <h:outputlabel value= ISBN : /> <h:inputtext id= isbn value= #{bookctrl.book.isbn} />... </h:panelgrid> <h:commandbutton value= Create a book action= #{bookctrl.docreatebook} > <f:ajax execute= @form render= :booklist /> </h:commandbutton> </h:form> </h:body> 4 May 2012 20