JSF. What is JSF (Java Server Faces)?

Size: px

Start display at page:

Download "JSF. What is JSF (Java Server Faces)?"

Theresa Black
5 years ago
Views:

1 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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 An example taglib uri= prefix= h %> <%@ taglib uri= prefix= f %> <html> <head> <title>newsletter Subscription</title> </head> <body> <f:view> <h:form> <table> <tr> <td> Address:</td> <td> <h:inputtext value= #{subscr. addr} /> </td> </tr> <tr> <td>newsletters:</td> 4 May

16 <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

17 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

18 page contenttype="text/html" %> taglib uri=" prefix="h" %> taglib uri=" 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

19 <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

20 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= xmnls= xmnls= > <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 render= :booklist /> </h:commandbutton> </h:form> </h:body> 4 May

Contents. 1. JSF overview. 2. JSF example

Contents. 1. JSF overview. 2. JSF example Introduction to JSF Contents 1. JSF overview 2. JSF example 2 1. JSF Overview What is JavaServer Faces technology? Architecture of a JSF application Benefits of JSF technology JSF versions and tools Additional