95 733 Internet Technologies Java Server Faces ModelViewController

95 -733 Internet Technologies Java Server Faces Model/View/Controller Design Pattern for Web Development Slides adapted from “Core Java. Server Faces” by Geary and Horstmann, the J 2 EE Tutorial from Sun Microsystems, and “Developing a Visual Web JSF Application” from Net. Beans. org. 95 -733 Internet Technologies Master of Information System Management 1

Three Main Parts to JSF Framework • A Collection of GUI components for drag and drop web site development • An event driven programming model • A component model supporting third party component development 95 -733 Internet Technologies Master of Information System Management 2

Detailed Features of JSF • • • Bean management Validation model Component library that permits extensions Flexible rendering (not necessarily XHTML) Configurable navigation State management Conversion Model Relies on JSP and Servlet technology Think “GUI Building” for the web 95 -733 Internet Technologies Master of Information System Management 3

JSF Fundamentals • Tags correspond to components in a component tree • A request normally goes through several stages of processing on the server • A built-in Faces. Servlet handles request processing and the JSF life cycle 95 -733 Internet Technologies Master of Information System Management 4

JSF Life Cycle Overview (From the J 2 EE Tutorial) 95 -733 Internet Technologies Master of Information System Management 5

Restore an old or construct a new component page (or view) 95 -733 Internet Technologies Master of Information System Management 6

An old view (component tree) has been retrieved so allow each component in the view to inspect data values. These values will be redisplayed if validation or conversion errors are found. Adds events to an event queue. 95 -733 Internet Technologies Master of Information System Management 7

The submitted values are stored as “local values”. If the data is invalid or conversions are not possible then Render Response is called directly and the user sees the bad data. 95 -733 Internet Technologies Master of Information System Management 8

Local values are OK and are used to update the beans. 95 -733 Internet Technologies Master of Information System Management 9

The action method associated with the button or link that caused the form to be submitted is executed. The method returns a string for the navigation handler. The navigation handler uses 95 -733 Internet Technologies the string to determine the next page. 10 Master of Information System Management

The selected page is rendered into a markup language. 95 -733 Internet Technologies Master of Information System Management 11

Development Steps • Build Model from Java Beans - Lifetime Configured by developer and managed by JSF - Request, Session, or Application Scope - Setters and getters accessed through JSF pages • Use UI Components to build JSF pages - Include JSF Tags, Validation and Event Listeners • Define Page Navigation rules in faces. config. xml 95 -733 Internet Technologies Master of Information System Management 12

Net. Beans JSF Demonstration(0) The example is from: http: //testwww. netbeans. org/kb/docs/web/helloweb. html#01 Goal: Display a form on the browser. When submitted, the web server will call our application. The application will execute code in a java bean associated with the page. The bean will update page elements. JSF will render the same page with the changed data and send the page back to the web browser. 95 -733 Internet Technologies Master of Information System Management 13

Netbeans JSF Demonstration(1) By adding a binding attribute we add setters and getters to a component. 1. File>New Project 2. Java Web Application 3. Name the project Hello. Web 4. Visual Web Java Server Faces 5. In properties for page 1, enter a page title 6. Navigator>Page 1>page 1 Right Click Add Binding Attribute 7. Expand Woodstock Basic section of palette 8. Drag a label to page enter “Name: ” return 9. Drag a text field to page enter “Enter your name” enter 10. In properties of text field, change text. Field 1 to name. Field 11. Right Click text field Add Binding Attribute 12. In properties of label component, enter name. Field as for property 13. Drag a button to the page, type “Say hello” and enter. 14. Right click button and choose Add Binding Component. 15. In button properties, change id from button 1 to hello. Button 16. Drag static text component to the page. 95 -733 Internet Technologies 17. In properties static text field, change id to hello. Text 14 Master of Information System 18. Right Click static text and Add Binding Attribute Management

Netbeans JSF Demonstration(2) 19. 20. 21. 22. Drag a Message Group to the page. Good for error reporting. Double Click the button component. The Java bean for page 1 is visible. Replace body of hello. Button_action with : public String hello. Button_action() { String name = (String)name. Field. get. Text(); hello. Text. set. Text("Hello, " + name + "!"); return null; } 23. Click Run Main Project. 95 -733 Internet Technologies Master of Information System Management 15