Java Server Faces Presented by Jim OHara Ed

Java. Server Faces Presented by: Jim O’Hara Ed Kausmeyer Jingming Zhang

Introducing Java. Server Faces (JSF) n n n New and upcoming web application framework for building user interfaces (UI’s) for web applications For building server-side UI’s Accomplishes the Model-View-Controller (MVC) paradigm Designed to be flexible and easy to use Leverages existing standard UI and web-tier concepts without limiting developers to a particular mark-up language, protocol, or client device Comparable to the well-known Struts Framework n Features and concepts that are beyond those of Struts, especially the component orientation

Introducing Java. Server Faces (JSF) Set of APIs for representing UI components and managing their state, handling events and input validation, defining page navigation, and supporting internationalization and accessibility n A Java. Server Pages (JSP) custom tag library for expressing a JSF interface within a JSP page n JSF version 1. 0 relies on JSP 1. 2 n Since JSP 2. 0 is a superset of JSP 1. 2, it is possible to use JSF 1. 0 with JSP 2. 0 n Future versions of the JSF specification will be able to take better advantage of JSP 2. 0 n

Standardization of JSF n n n Java. Server Faces Developer Forum: http: //forum. java. sun. com/forum. jspa? forum. ID=427 JSF APIs are being designed so that they can be leveraged by tools that will make web application development even easier Developed through the Java Community Process under JSR-127 n n JSRs: Java Specification Requests JSR-127: http: //www. jcp. org/en/jsr/detail? id=127 JSR-252: http: //jcp. org/en/jsr/detail? id=252 A number of important industry players are collaborating with Sun to develop the JSF specification n Many prominent tool vendors are part of the expert group and are committed to supporting the JSF technology in their tools, thus promoting the adoption of the JSF technology standard

JSF User Interfaces n A UI created with JSF handles all the complexities of UI management n n Input validation, component-state management, page navigation, and event handling The UI component classes encapsulate the component functionality, not the client-specific presentation UI components can be rendered to various client devices n Renderers: define rendering attributes for a specific UI n

JSF User Interfaces n By combining the UI component functionality with custom renderers, developers can construct custom tags to a particular client device n n Device Independence: By defining only component functionality in extensible UI component classes, JSF allows component developers to extend the component classes to generate their own component tag libraries targeted for specific clients JSF provides a custom renderer and a JSP custom tag library for rendering to an HTML client n Allows developers of Java 2 Platform, Enterprise Edition (J 2 EE) applications to use JSF technology in their applications

Benefits of the JSF Design The JSF architecture clearly defines a separation between application logic and presentation while making it easy to connect the presentation layer to the application code n With this simple, well-defined programming model, developers of varying skill levels can quickly and easily build Web applications by assembling reusable UI components in a page, connecting these components to an application data source, and wiring client-generated events to server-side event handlers n

Benefits of the JSF Design n These web applications handle all of the complexity of managing the UI on the server, allowing each member of a web application development team to focus on their piece of the development process (i. e. , their application code) n Allows a wide range of users, from web-page designers to component developers, to take advantage of JSF n Example: Web page developers with no programming expertise can use JSF UI component tags to link to application code from within a web page without writing any scripts n Division of labor, shorter development cycle

Benefits of the JSF Design n How various developers and web-page designers can take advantage of JSF's extensibility, ease-of-use, and capabilities: n Page Authors n n n Application Developers n n Write the application code, including the data-access, event-handling, and business logic Component Writers n n n Build the UI using component tags from within web pages, such as JSP pages Probably the primary users of the JSF custom tag library Construct reusable UI components Take advantage of the extensibility of the UI component classes to build custom components that can be targeted for a specific client Tools Vendors n Build tools leveraging JSF technology to make building a UI even easier

JSF and MVC Java. Server Faces (JSF) technology is a new user interface framework for J 2 EE applications. It is particularly suited, by design, for use with applications based on the MVC (Model-View-Controller) architecture.

MVC (Model-View-Controller) n n MVC was first described by Xerox in a number of papers published in the late 1980 s, in conjunction with the Smalltalk language. This model has since been used for GUI applications developed in all popular programming languages. The basic idea is to separate the application data and business logic, the presentation of the data, and the interaction with the data into distinct entities labeled the Model, the View, and the Controller, respectively.

The MVC design pattern splits an application design into three separate parts: n n n The Model handles data and logic. Model code accesses and represents data, and handles business operations. "Business operations" include changes to both persistent business data, and to things like shopping cart contents The View handles output. View code displays data to the user. The Controller handles input. Controller code manipulates the Model or changes the view accordingly in response to user input (the Controller can also do both).

These parts have specific relationships to one another: n n The View accesses the Model to retrieve data for display. The Controller receives user input, and makes business method invocations on the Model. The Controller updates the View, or selects a new View, based on the state of the Model and on the its own View navigation rules. The Model provides data to the View, but knows nothing about how that data is presented. The Model also provides business services to the Controller, but knows nothing about user events the Controller might have received.

How does JSF fit into the overall MVC architecture?

Model-View-Controller Pattern Model = Persistent data n View =JSP n Servlet =Controller =Faces. Servlet n

To create a JSF application, you typically perform the following steps: 1. 2. 3. 4. 5. Define and implement the application Model classes Describe the Model to the framework Create application Views using JSP pages Define data validation rules Define View navigation for the Controller

Defining the Model public class Data. Bean { protected String _string; protected long _n_long; protected double _n_real; public Data. Bean() { _string = "Default"; _n_long = 1000; _n_real = 0. 5; } } public String get. String() { return _string; } public void set. String(String string) { _string = string; } public long get. Longnumber() { return _n_long; } public void set. Longnumber(long n_long) { _n_long = n_long; } public double get. Realnumber() { return _n_real; } public void set. Realnumber(double n_real) { _n_real = n_real; }

Describe the Model to JSF <managed-bean> <managed-bean-name>data</managed-bean-name> <managed-bean-class> com. elucify. tips. mar 2004. Data. Bean </managed-bean-class> <managed-bean-scope>session</managed-beanscope> </managed-bean>

Create Application Views <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <html> <head> <title>Validating JSF Page</title> </head> <body> <h 1>Please enter the requested data</h 1> <f: view> <h: form> <b>Enter a string from three to twelve characters in length: </b><br/> <h: input. Text id="string" required="true" value="#{data. string}" size="20"> <f: validate. Length minimum="3" maximum="12"/> </h: input. Text> <h: message for="string" style="color: red; "/> <br/> <p>. . . </f: view> </body></html>

Defining Data Validation When the user posts an input form to the Controller, the Controller validates each of the inputs <h: input. Text id="string" required="true" value="#{data. string}" size="20"> <f: validate. Length minimum="3" maximum="12"/> </h: input. Text> <h: message for="string" style="color: red; "/> <br/> This example shows how to perform server-side validation. JSF also provides a way to perform the requested validations on the client side. The default implementation of client-side validation runs as Java. Script in the Web browser.

Defining View Navigation for the Controller <h: command. Button id="submit" action="validated" value="Submit values"/> In this case, the command. Button tells the Controller to execute the "validated" action if all inputs are valid. <navigation-rule> <from-view-id>/jsp/values. jsp</from-view-id> <navigation-case> <from-outcome>validated</from-outcome> <to-view-id>/jsp/valid. jsp</to-view-id> </navigation-case> </navigation-rule> This rule tells the Controller the following: if you receive valid inputs from a form in the page /jsp/values. jsp, and the action is 'validated', then go to page /jsp/valid. jsp.

Why Java. Server Faces n The promise of JSF is to bring rapid userinterface development to server-side Java. n JSF has these parts: a set of pre-fabricated UI components n an event-driven programming model n A component model that enables third-party developers to supply additional components n

A Simple JSF Applications <body> <h: output. Text value="#{msgs. page. Title}"/> <p> <h: form> <h: data. Table value="#{table. Data. names}" var="name"> <h: column> <h: output. Text value="#{name. last}"/> <f: verbatim>, </f: verbatim> </h: column> <h: output. Text value="#{name. first}"/> </h: column> </h: data. Table> </h: form> </body> Code behind the page

Web Application Analysis Web applications have two parts: the presentation layer and the business logic. n The presentation layer is concerned with the look of the application. n n In “browser-speak”, the look is determined by the HTML tags that specify the layout, fonts, images and other elements to display the page.

Web Application Analysis n The business logic is implemented in the Java code that determines the behavior of the application.

Web Application Analysis Some web application intermingle HTML and code. n The approach is easy to implement for simple applications in a single file. n For serious application development projects, mixing markup and code poses considerable problems. n

Behind the Scenes Name: pw: Graphic of HTML form Submit A JSF form is represented internally as a tree UI components are managed on the server in a view, or component tree. The components can be wired directly to the values of Java. Bean properties. Components are rendered to the client in HTML.

Validators It is the responsibility of the person designing the UI to ensure that the user entered the correct type of information n In web design this was usually done when validation routines written in Java. Script n JSF handles validation in three ways: n At the UI component level n By validator methods in backing beans n By validator classes n

Process Validations In the Process Validation phase, JSF traverses the component tree and interrogates each component to make sure its submitted value is acceptable. n Validation is handled either directly by the component or delegated to one or more validators. n

Some JSF Examples n JSF Code Samples and Apps n http: //java. sun. com/j 2 ee/javaserverfaces/reference/ codesamples/index. html

Servlet Configuration JSF applications require a servlet, called Faces. Servlet, which acts as a front controller for the entire application. n Servlets are configured in the web application’s deployment descriptor file, web. xml n <web-app> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax. faces. webapp. Faces. Servlet</servlet-class> </servlet>

Using JSP includes n One of JSP’s key features is the ability to integrate content for multiple JSPs into a single page. <jsp: include page =“disclaimer. jsp”/> …. <jsp: include page =“footer. jsp”/>

Issuing SQL Statements n To issue SQL commands to a database, you need a connection object. n Using Java Naming and Directory Interface (JNDI) String my. Uri = “java: cmp/env/jdbc/mydb”; Context ctx = new Initial. Context(); Data. Source source (Data. Source) ctx. lookup(my. Uri); Connection conn = source. get. Connection();

API Documentation http: //java. sun. com/j 2 ee/javaserverfaces/1. 1_01/docs/api/index. html

JSF Goals The core promise of JSF is support for UI components—reusable units of code. n JSF has a specific goal: to make web applications with less effort. n

Top Ten Reasons to Prefer JSF to Struts (David Geary’s Blog) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Components Render Kits Renderers Value Binding Expressions Event Model Extensibility Managed Beans (Dependency Injection) POJO Action Methods JSF is the standard Java-based web app framework There's only one Struts

References (cont’d) n The J 2 EE 1. 4 Tutorial http: //java. sun. com/j 2 ee/1. 4/docs/tutorial/doc/ n Code Samples and Apps http: //java. sun. com/j 2 ee/javaserverfaces/reference/codesample s/index. html n n Core Java Server. Faces David Geary, Cay Horstmann, Sun Microsystems Press Java Series http: //www. jroller. com/comments/dgeary/Weblog/