Lecture 23

1. CS441 CURRENT TOPICS IN PROGRAMMING LANGUAGES Lecture 23 George Koutsogiannakis Summer 2011

2. Topics • Java Server Faces • Definitions • JSF Parts • Why JSF? • JSF Competitors • JSF Request Lifecycle. • JSF Standard Tag Libraries

3. What is JSF • JavaServer Faces (JSF) is an application framework for creating Web-based user interfaces • Java Server Faces (JSF): • A set of APIs (Frameworks) that: • Have prefabricated UI (User Interface) components. • Allow third party developers to add new UI components. • Can provide all necessary code for event handling and component organization. • Utilizes Java Server Pages and custom tags libraries. • Usually an IDE is needed (like NetBeans). • JSF is a direct competitor to Microsoft's WebForms(part of ASP.NET MVC)

4. JSF Parts • It consists of • UI Components • Events • Validators & converters • Navigation • Back-end-data integration

5. JSF Parts • UI Components • The API provides a set of classes and interfaces that specify component behavior and functionality. • UIComponent/UIComponentBase • Base class for all user interface components • Standard UIComponent Subclasses i.e.: • UICommand : represents a control that fires actions when requested. • UIForm: Groups a number of controls that can submit data from the user to the application

6. JSF Parts • UIOutput: Displays data output on a page (displayed by the Browser) • UIInput: Takes data input from user • UISelectItem: Represents a single item selection • UISelectMany: Allows a user to select many items from a group of items • Many others not listed here. • A UI component developer develops the component. • Page authors and developers include the component in their design in a tag.

7. JSF Parts • Events and Listeners • Follows JavaBeans Specification design and naming patterns • Standard events and listeners • ActionEvent—UICommand component activated by the user. • ValueChangedEvent—UIInput component whose value was just changed.

8. JSF Parts • Event handling is similar to event handling used in a regular Java application: • An Event object identifies the component that generated the event and stores information about the event. • An application provides an implementation of the Listener class and must register it on the component that generates the event. • When the user activates a component, such as by clicking a button, an event is fired. • This causes the JavaServer Faces implementation to invoke the listener method that processes the event.

9. JSF Parts • JavaServer Faces technology supports three kinds of events: • value-change events • when the user changes the value of a component represented by UIInput or one of its subclasses. • An example is selecting a check box, an action that results in the component’s value changing to true. • action events • An action event occurs when the user activates a component that implements ActionSource. • These components include buttons and hyperlinks.

10. JSF Parts • Data model events • occurs when a new row of a UIData component is selected.

11. JSF Parts • Validators—Perform correctness checks on UI Input values • Defines a set of standard classes for performing common data validation. Create your own validators or • Use standard Tag library which defines a set of tags that correspond to the standard Validator implementations. • Register one or more per component • Enqueue one or more messages on errors • Standard implementations for common cases

12. JSF Parts • Converters • Allow a JSF application ( a component)to be associated with an object such as a Java Bean. • An application gets and sets the object data for a component by calling the appropriate object properties for that component. • Data can be converted from an Object to a String type and passed to the component or • Data can be passed to the component in some primitive data type.

13. JSF Parts • Renderers-Adapt components to a specific markup • language • Decoding • Encoding • A component class can be restricted to define the functionality of the component. Rendering can be done by different classes • each of defines a different way to render the component to the same client or to different clients. • RenderKits—Library of Renderers • Map component classes to component tags • Is a custom tag library • Basic HTML RenderKit

14. JSF Parts • Navigation Model • Defines the sequence by which pages are loaded. • It is the application developer’ s responsibility • Defined in Application configuration file (faces-config.xml)

15. JSF Parts • Navigation rules in xml style tags i.e. • <navigation-rule> <from-view-id>/greeting.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/response.jsp</to-view-id> </navigation-case> </navigation-rule>

16. JSF-What it does: • Drops components onto a page by adding component tags • Connect component-generated events to server-side application code • Bind UI components on a page, to server-side data • Construct a UI with reusable and extensible components • Save and restore UI state beyond the life of server requests

17. JSF-What it does:

18. JSF-What it does: • A client contacts a JSP page that includes Java Server Faces tags. • The UI for the web application (represented by myUI in the previous slide) manages the objects referenced by the JSP page. These objects include • The UI component objects that map to the tags on the JSP page • Any event listeners, validators, and converters that are registered on the components • The JavaBeans components that encapsulate the data and application-specific functionality of the components

19. JSF-Why use it: • Need separation between behavior and presentation. • Can not be achieved with just plain JSP. • A JSP application cannot map HTTP requests to component-specific event handling nor manage UI elements as stateful objects on the server. • JavaServer Faces technology leverages familiar UI-component and web-tier concepts without limiting the developer to a particular scripting technology or markup language.

20. JSF-Why use it: • Relatively easy to use. • Provides Extendable Component and Rendering architecture. • Support for client device independence. • Has been met with support from the industry.

21. Contents of a JSF Application • A set of JSP pages (although you are not limited to using JSP pages as your presentation technology) • A set of backing beans, which are JavaBeans components that define properties and functions for UI components on a page • An application configuration resource file, which defines page navigation rules and configures beans and other custom objects, such as custom components • A deployment descriptor (a web.xml file) • Possibly a set of custom objects created by the application developer. These objects might include custom components, validators, converters, or listeners. • A set of custom tags for representing custom objects on the page

22. Competitors • Struts • Struts is a popular MVC framework from the Apache Software Foundation. • It provides page-at-a-time MVC and does not have a component model in the style of JSF. • Pages are mapped to models with a dispatch servlet (controller) piping input to actions. • Struts applications use JSPs to render views and are amenable to mix-and-match jsp taglib use. (See also Apache Beehive)

23. Competitors • Struts has • No built-in UI component model • No built-in event model for UI components • No built-in state management for UI components • No built-in support of multiple renderers

24. Competitors • Microsoft ASP.NET • JSF features a component based approach to WebApplication development similar to ASP.NET from Microsoft. • In ASP.NET v1, component rendering code was bundled with the UI component, unlike JSF, where rendering and component interfaces can be separated, thus allowing for customization of the renderer. • ASP.NET v2 introduced the control adapter framework allowing the default rendering to be overridden by third-party code.

25. Competitors • Apache Tapestry • Tapestry is an open-source framework for creating dynamic, robust, scalable web applications in Java. • Tapestry builds upon the standard Java Servlet API, and so it works in any servlet container or application server. • Unlike JSF, Tapestry does not use JSP as the default view technology — instead preferring an alternate templating engine that allows for easy HTML preview and editing (similar to the JSF-based Facelets).

26. JSF Development Process • Steps in Development Process • Develop model objects which hold the data • Add model objects (managed bean) declarations to Application Configuration File faces-config.xml • Create Pages using UI component and core tags • Define Page Navigation in faces-config.xml • Configure web.xml

27. JSF Request Lifecycle • Request Processing Lifecycle Phases • Suppose that a JSF component submits a request. The lifecycle of the request (and its data) is: • Reconstitute component tree phase (called View) • The JavaServer Faces implementation must build the view while considering state saved from a previous submission of the page. • Transmits event handlers and validators to components in the view, and saves the view in the FacesContext instance, which contains all the information needed to process a single request.

28. JSF Request Lifecycle • Apply request values phase • Each component in the tree extracts its new value from the request parameters by using its decode method. • The value is then stored locally on the component. • Process validations phase • The JavaServer Faces implementation processes all validators registered on the components in the tree. • Update model values phase • After the JavaServer Faces implementation determines that the data is valid, it can walk the component tree and set the corresponding server-side object properties to the components’ local values. • Those objects can be Java Beans (called backing beans).

29. JSF Request Lifecycle • Invoke application phase • Handling of application level events such as submitting a form to the user or redirecting to another resource. • Render response phase • The JavaServer Faces implementation delegates authority for rendering the page to the JSP container if the application is using JSP pages. • The components will render themselves as the JSP container traverses the tags in the page.

30. JSF Request Lifecycle Parallel Paths in processing

31. JSF Standard Tag Libraries • A jsp page can include JSF components. • To include the JSF components in the jsp file we need to get access to the standard JSF libraries. • There are two libraries of JSF tags: • JavaServer Faces HTML render kit tag library • represent common HTML user interface components. • JavaServer Faces core tag library • tags that perform core actions and are independent of a particular render kit

32. JSF Standard Tag Libraries • An example of standard HTML tag is form: <h:form id="jsftags"> ... </h:form> No Renderer is needed Example: <form id="jsftags" method="post" action="/jsftags/faces/pages/tags.jsp" enctype="application/x-www-form-urlencoded"> ... <input type="hidden" name="jsftags" value="jsftags" /> <input type="hidden" name="jsftags:link" /> </form>

33. JSF Standard Tag Libraries • Core tag library tags include tags (amongst others): • Eventg Handling • Data conversion • Validation

34. Using the JSF standard tags • A typical JavaServer Faces page includes the following elements in the jsp file: • A set of tag library declarations that declare the two JavaServer Faces tag libraries • A view tag • A form tag

35. Using the JSF standard tags • To use any of the JavaServer Faces tags, you need to include these taglib directives at the top of each jsp page containing the tags defined by these tag libraries: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> The uri attribute value uniquely identifies the TLD (Tag Library Description) document.

36. Using the JSF standard tags • taglib is a special directive used to indicate that a tag defined in a library will be used. • The uri attribute of taglib is used to point to the document file that describes the tag (TLD). • A TLD is identified by the extension filename.tld. • The document describes the custom tag that becomes part of a library of tags.

37. Using the JSF standard tags • Here is an example of a taglib descriptor file for a custom library tag saved in file mycustomtag-taglib.tld: <taglib> <info> A simple custom tag </info> <tag> <name>name_to_be_used_when_tag_is_called</name> <tagclass> path_to_class_for_tag_and_classname</tagclass> </tag> </taglib>

38. Using the JSF standard tags • The TLD document can be placed in some uri or in the same folder as the jsp file if we want (in the server). • Notice that a java class is needed that actually implements the tag’ s functionality. • The java class extends interface TagSupport and implements method doStartTag() • This class is usually placed either in the same folder as the jsp or it becomes part of the library of tags.

39. Using the JSF standard tags • The prefix attribute value (in the taglib tag in the jsp file) is used to distinguish tags belonging to the tag library. • It identifies the tag by name. • Each tag will have a different name. • The tag names for the standard JSF html tags are defined in file html_basic.tld and recognized by the h prefix attribute of taglib

40. Using the JSF standard tags • For instance there are a number of tags recognized under the name h in the tld file i.e. • h:form id="jsftags"> ... </h:form> usage: <form id="jsftags" method="post" action="/jsftags/faces/pages/tags.jsp" enctype="application/x-www-form-urlencoded"> .. <input type="hidden" name="jsftags" value="jsftags" /> <input type="hidden" name="jsftags:link" /> </form>

41. Using the JSF standard tags • <h:commandButton id="submit" value="#{msg.buttonHeader}" action="nextPage"> </h:commandButton> • <h:inputText id="address" value="#{jsfexample.address}" /> Therefore different type of html components can be called.

42. Using the JSF standard tags • Core tag library tags are recognized by the f prefix value and are listed in jsf_core.tld file. • The view core tag is at root tag for all component views: <f:view> ... other JavaServer Faces tags, possibly mixed with other content ... </f:view> • HTML tags will be enclosed in the view tag to create the view: <f:view> <h:form> other JavaServer Faces tags and core tags, including one or more button or hyperlink components for submitting the form </h:form> </f:view>

43. Using the JSF standard tags • The Core Tags that are available in Java Server Faces are categorized as follows. Here the categorization is given based on the Functionality of the Tags. They are: • Validation Tags • Converter Tags • Listener Tags • View Tags • Select Tags • Facet Tag • Miscellaneous Tags

44. Using the JSF standard tags- Validation Tags • Validation Tags • Bindings between JSF UI Components and Validation Logic can be done with ease with the help of JSF Core Tags. Four JSF Core Tags are available for doing Validation on the JSF UI Components. They are, • Validate Length Tag • Validate Long Range Tag • Validate Double Range Tag • Validator Tag

45. Using the JSF standard tags- Validation Tags • For example, let us use: Validate Length Tag • Validation pertaining to Data between Boundaries is a normal requirement for almost any kind of Web Application. For example, a common case includes "Password must be of [8-16] characters length". Validation Length Tag as identified by <f:validateLength> is used to specify the maximum and the minimum characters, a JSF UI Component can accept. • Following is the syntax definition of the Validate Length Tag, <f:validateLength minimum = "minRange" maximum = "maxRange"> </f:validateLength>

46. Using the JSF standard tags- Validation Tags • Here is an example usage: <h:inputText value = "#{UserBean.userName}" id = "userNameTextField" required="true"> <f:validateLength minimum = "10" maximum = "15"/> </h:inputText> • In the above code, UserBean refers to a Managed Bean being defined and declared in the web.xml file • and userName is the property of the UserBean class. • The attribute 'id' of the <h:inputText> specifies the identifier of the Text Field UI Component and it must be unique among the other Components in the Form.

47. Using the JSF standard tags • Converter Tags • Data entered by the Client Application is always interpreted in the form of Strings. Not this is always we wish to have. There will be times, where the user input like age, salary, date of Birth should be represented by Integer, Double and Date objects respectively. Technically, Data is converted into their appropriate types before being processed by the Application. This is where JSF Converters come into picture. JSF implementation already comes with a bunch of Pre-Built Converters for the conversion of string to int, float, boolean etc. • Three Tags are available in this category. • Convert Number Tag • Convert Date Time Tag • Converter Tag

48. Using the JSF standard tags • Listener Tags • JSF UI Components emit Events to Listeners if they are registered. • The Event Handling Model in Java Server Faces is very similar to Java Beans Event Handling Model. The types of Events emitted will fall either in Action Event, Value-Change Event or Phase Event. • For example, clicking a Button or a Hyperlink will cause the JSF Components to emit Action Events. • Change in Value for a UI Input Component will make Value Change Events to happen. • Phase Events will occur in any of the 6 Different Phases available in Request Processing Life-cycle.

49. Using the JSF standard tags • Accordingly, 3 Listener Tags are identified for handling the various types of Events we discussed just before. They are mentioned below. Let us cover in detail in the subsequent sections. • Action Listener Tag • Value Change Listener Tag • Phase Listener Tag

50. Using the JSF standard tags • View Tags • View Tags are Container Tags and they used to hold or Group Multiple UI Components. Following are the identified Tags in the JSF Core Library that comes under this category. • View Tag • Sub View Tag