Unit 5: Chapter 1

1. Unit 5: Chapter 1 JSF (Java Server Faces)

2. Introduction • It is a server side component based user interface framework. It is used to develop web applications. It provides a well-defined programming model and consists of rich API and tag libraries. • It is written in Java. • The JSF Tag libraries are used to add components on the web pages and connect components with objects on the server. It also contains tag handlers that implements the component tag. • The user interface code runs on the server, responding to events generated on the client. This allows the application developer to focus on application code. • JavaServer Faces(JSF) is a MVC web framework that simplifies the construction of User Interfaces (UI) for server-based applications using reusable UI components in a page. 

3. Advantages of JSF • Big vendors (Oracle, IBM, JBoss, etc) backing JSF implementation like EJB. Can expect good level of support and quality components from these vendors. • By design and concept it allows to create reusable components. That will help to improve productivity and consistency. • Many quality and ready to use components are available from Apache, Richfaces, Infragistics, Oracle, etc. • The concept of action and action listener for button invocation is good. • Has very good support for EL expression that improves the user interface code readability. • The concept the validator and converter is excellent. Unlike struts JSF keeps the validation logic very close to the component declaration. • JavaScript code are embedded as part of the component; this keep less confusion for developers and more re-usability on JavaScript code.

4. Disadvantages of JSF •  However, if you are familiar with HTML and CSS concepts, it is going to be a cake walk for you. • There is no benchmarking report or promise from Sun Microsystems about the performance of JSF framework. • Not Scalable. • If the data retrieved from database, this will have impact on performance.

5. MVC Architecture • MVC is the Java-BluePrints-recommended architectural design pattern for interactive applications. MVC separates design concerns, thereby decreasing code duplication, centralizing control, and making the application more extensible. MVC also helps developers with different skill sets focus on their core skills and collaborate through clearly defined interfaces. MVC is the architectural design pattern for the presentation tier. • MVC is a systematic way to use the application where the flow starts from the view layer, where the request is raised and processed in controller layer and sent to model layer to insert data and get back the success or failure message.

6. Model Layer: • This is the data layer which consists of the business logic of the system. • It consists of all the data of the application • It also represents the state of the application. • It consists of classes which have the connection to the database. • The controller connects with model and fetches the data and sends to the view layer. • The model connects with the database as well and stores the data into a database which is connected to it.

7. View Layer: • This is a presentation layer. • It consists of HTML, JSP, etc. into it. • It normally presents the UI of the application. • It is used to display the data which is fetched from the controller which in turn fetching data from model layer classes. • This view layer shows the data on UI of the application.

8. Controller Layer: • It acts as an interface between View and Model. • It intercepts all the requests which are coming from the view layer. • It receives the requests from the view layer and processes the requests and does the necessary validation for the request. • This requests is further sent to model layer for data processing, and once the request is processed, it sends back to the controller with required information and displayed accordingly by the view.

9. The diagram is represented below:

10. The advantages of MVC are: • Easy to maintain • Easy to extend • Easy to test • Navigation control is centralized

11. Example

12. Model 1 and Model 2 (MVC) Architecture • Before developing the web applications, we need to have idea about design models. There are two types of programming models (design models) • Model 1 Architecture • Model 2 (MVC) Architecture

13. Model 1 Architecture • Servlet and JSP are the main technologies to develop the web applications. • Servlet was considered superior to CGI. Servlet technology doesn't create process, rather it creates thread to handle request. The advantage of creating thread over process is that it doesn't allocate separate memory area. Thus many subsequent requests can be easily handled by servlet. • Problem in Servlet technology Servlet needs to recompile if any designing code is modified. It doesn't provide separation of concern. Presentation and Business logic are mixed up. • JSP overcomes almost all the problems of Servlet. It provides better separation of concern, now presentation and business logic can be easily separated. You don't need to redeploy the application if JSP page is modified. JSP provides support to develop web application using JavaBean, custom tags and JSTL so that we can put the business logic separate from our JSP that will be easier to test and debug.

15. As you can see in the above figure, there is picture which show the flow of the model1 architecture. • Browser sends request for the JSP page • JSP accesses Java Bean and invokes business logic • Java Bean connects to the database and get/save data • Response is sent to the browser which is generated by JSP

16. Advantage of Model 1 Architecture • Easy and Quick to develop web application Disadvantage of Model 1 Architecture • Navigation control is decentralized since every page contains the logic to determine the next page. If JSP page name is changed that is referred by other pages, we need to change it in all the pages that leads to the maintenance problem. • Time consuming You need to spend more time to develop custom tags in JSP. So that we don't need to use scriptlet tag. • Hard to extend It is better for small applications but not for large applications.

17. Model 2 (MVC) Architecture • Model 2 is based on the MVC (Model View Controller) design pattern. The MVC design pattern consists of three modules model, view and controller. • Model The model represents the state (data) and business logic of the application. • View The view module is responsible to display data i.e. it represents the presentation. • Controller The controller module acts as an interface between view and model. It intercepts all the requests i.e. receives input and commands to Model / View to change accordingly.

19. Advantage of Model 2 (MVC) Architecture • Navigation control is centralized Now only controller contains the logic to determine the next page. • Easy to maintain • Easy to extend • Easy to test • Better separation of concerns Disadvantage of Model 2 (MVC) Architecture • We need to write the controller code self. If we change the controller code, we need to recompile the class and redeploy the application.

20. Components of JSF • User Interface Components • Events and Listeners • Page Navigation • JavaBeans Components • JSP Pages • Managed Beans • Validators • Convertors • Server Side Helper Classes • Application Configuration Resource File

21. Elements of JSF • Describing UI Component: UI components are the basic reusable components, such as labels, text boxes, used for developing user interfaces. UI components are define as stateful objects maintained on the server side. The server communicates with the clients through these UI components. the components are simple java beans containing properties, methods and events. The JSF UI components are also called Web application user interface components.

22. Describing Renderer: Most web applications usually send a response to the web browser in the HTML format. Other client devices such as mobile phones or Personal Digital Assistants do not provide HTML browsers.  Therefore, web applications need to respond in another markup language. A JSF Renderer is responsible for two functions, rendering component as HTML markup and processing request attributes.

23. Describing Validators: UI components enable a client to interact with the server by giving some data entered by the client to the server. The data entered by the client must validate for its correctness. We use java script and java to write the validation logic. Validators can be specified using a component's validator attribute or by nesting JSF provided tags. 

24. Describing Backing Beans: In JSF applications, javaBeans objects handle or store data between the business model and UI components at intermediate stage. These javaBean objects are known as Backing Beans or objects that handle the interaction between view and model are called backing beans in JSF.

25. Describing Converters:  Web applications interact with clients through the http request and response mechanism. The values entered by the User in all cases will be in string format. Even, when asked to enter numerical values like age or salary whatever is being saved on to the Server end will still be in String format. So, there must be some intermediary which will do the job of converting the string values into the type that is appropriate for the particular field value.

26. Describing Events and Listeners: JSF implements an event driven processing, where events generated on different UI components can be mapped to the execution of some methods. A user can interact with a web application by generating different events on different UI components. 

27. Describing Messages: These are the integral part of the JSF framework. These messages may be associated with some component or cab be used as application level messages • Describing Navigation: A Web application is a collection of web pages linked together in a specific order. The clients need to navigate from one page to the other and Web developer needs to implement this navigation logic.

28. JSF - Life Cycle • JSF application life cycle consists of six phases which are as follows − • Restore view phase • Apply request values phase; process events • Process validations phase; process events • Update model values phase; process events • Invoke application phase; process events • Render response phase

30. Phase 1: Restore view • JSF begins the restore view phase as soon as a link or a button is clicked and JSF receives a request. • During this phase, JSF builds the view, wires event handlers and validators to UI components and saves the view in the FacesContext instance. The FacesContext instance will now contain all the information required to process a request.

31. Phase 2: Apply request values • After the component tree is created/restored, each component in the component tree uses the decode method to extract its new value from the request parameters. Component stores this value. If the conversion fails, an error message is generated and queued on FacesContext. This message will be displayed during the render response phase, along with any validation errors.

32. Phase 3: Process validation • During this phase, JSF processes all validators registered on the component tree. It examines the component attribute rules for the validation and compares these rules to the local value stored for the component. • If the local value is invalid, JSF adds an error message, and the life cycle advances to the render response phase and displays the same page again with the error message.

33. Phase 4: Update model values • After the JSF checks that the data is valid, it walks over the component tree and sets the corresponding server-side object properties to the components' local values. JSF will update the bean properties corresponding to the input component's value attribute.

34. Phase 5: Invoke application • During this phase, JSF handles any application-level events, such as submitting a form/linking to another page.

35. Phase 6: Render response • During this phase, JSF asks container/application server to render the page if the application is using JSP pages. For initial request, the components represented on the page will be added to the component tree as JSP container executes the page.

36. Facelets • It is a light weight page declaration language which is used to build Java Server Faces views using HTML style. • It includes the following features: • It uses XHTML for creating web pages. • It supports Facelets tag libraries in addition to Java Server Faces and JSTL tag libraries. • It supports the Expression Language (EL). • It uses templating for components and pages.

37. Advatages • It supports code reusabilty through templating and composite components. • It provides functional extensibility of components and other server-side objects through customization. • Faster compilation time. • It validates expression language at compile-time. • High-performance rendering.

38. The Lifecycle of a Facelets Application • The JavaServer Faces specification defines the lifecycle of a JavaServer Faces application. The following steps describe that process to a Facelets-based application. • 1) Lifecycle starts when a client makes a new request for a web page which is created using Facelets. JSF creates a new component tree or javax.faces.component.UIViewRoot and placed into the FacesContex. • 2) View is ready to populate with components for rendering. The UIViewRoot if available is applied to the Facelets. • 3) The newly built view is rendered back as a response to the client. • 4) On rendering, the state of this view is stored for the next request. The state of input components and form data is stored.

39. 5) The client may interact with the view and request another view from the Java Server Faces application. At this time, the saved view is restored from the stored state. • 6) The restored view is once again passed through the Java Server Faces lifecycle, which eventually will either generate a new view or re-render the current view if there were no validation problems and no action was triggered. • 7) If the same view is requested, the stored view is rendered once again. • 8) If a new view is requested, the Step 2 is continued. • 9) New view is rendered back as a response to the client.