Java Server Faces IntroductionHarshavardhan M. Karkar

Project ManagerInfo-Spectrum India Pvt. Ltd.http://www.info-spectrum.com

http://www.jugnagpur.com

What is JSF

• JSF is a great Java Technology for Web Application Development

• Developed by JCP (Java Community Process) comprising of web application experts from Jakarta Struts, Oracle, Sun, IBM, ATG etc.

• JCP References • http://www.jcp.org/en/home/index• http://en.wikipedia.org/wiki/Java_Community_Pr

ocess

Why JSF

• Java Server Faces or JSF for short, is the standard framework to simplify the process of developing web application in java.

• Some Features– Robust Component Framework

• Offers set of UI Components

– Event Driven Programming Model – Extensible Architecture

Who can use JSF• Page authors

– Web designers have experience with graphic design. They can design look and feel of web application in html/jsp using custom tag libraries of JSF.

• Application developers– Application developers can integrate this design with UI components. They

program objects, event handles, converters, validator’s.• Component writers

– Component developer can build custom UI components because of JSF’s extensible and customizable nature. They can create their own components directly from UI component classes or extending the standard components of JSF.

• Application architects – Application architects are responsible for designing web applications. Defining

page navigation, ensuring Scalability of application, configuring beans object registration are the key points that an application architect handles.

• Tool vendors– JSF is well suited for tool vendors, for example Sun Java Studio Creator

application development tool, who provide tools that take advantages of JSF to create UI easier.

Short Summary

• Purpose of JSF– Faster Web Application Development– UI components with suitable API for

• State Management • Event Management • Validations

Benefits of JSF

• Some important benefits of JSF– JSF provides standard, reusable components for

creating user interfaces for web applications. – JSF provides many tag libraries for accessing and

manipulating the components. – It automatically saves the form data and repopulates

the form when it is displayed at client side. – JSF encapsulates the event handling and component

rendering logic from programmers, programmers just use the custom components.

– JSF is a specification and vendors can develop the implementations for JSF.

Benefits of JSF…

• JSF is a component framework built on top of Servlet API.

• UI components are stored on the server.• Event driven programming model. • Events generated by user are handled on the

server.• International language support. • Extensive tool support (Sun, Oracle , IBM etc.). • Rapid application development approach.

JSF Versions

• The latest version of Java Server Faces technology is version 2.0, developed through the Java Community Process under JSR 314. You can download the 2.0 version of the specification from the JSR 314 web page.

• The latest implementation of version 2.0 can be downloaded from the Mojarra Project site.

• JSR 314 http://www.jcp.org/en/jsr/detail?id=314• Mojarra https://javaserverfaces.dev.java.net/

JSF Components

• JSF  includes mainly: – Set of APIs to represent and manage state of

components that helps server side validation, event handling, page navigation, data conversion etc.

– JSP custom tag library to create UI components in a view page.

– Developers can focus on UI components, events handling, backing beans and their interactions rather than request, response and markup.

JSF Tags

• JSF application typically uses JSP pages to represent views. JSF provides useful special tags to enhance these views. Each tag gives rise to an associated component. JSF provides over 40 tags in two standard JSF tag libraries:

• JSF Core Tags  Library • JSF Html Tags Library

JSF Tags• Simple page structure with JSF tag libraries.• <%@ taglib uri=”http://java.sun.com/jsf/core “ prefix=”f” %>

<%@ taglib uri=”http://java.sun.com/jsf/html “ prefix=”h” %><f:view><h:form>…………………………</h:form></f:view>In the above code fragment we have imported two JSF tag libraries with the help of taglib directive.

• JSF Core Tag Library contains set of JSF core tags while JSF Html Tags Library contains set of html tags.

• Prefix is used to use tags defined in tag library. • Here we are using conventional names f and h for Core & Html tags

respectively. We have the choice to choose any name for the prefixes. 

JSF Html Tags

• These tags represent html components like text fields, buttons, form.Html tags can be divided into following categories:

• Inputs                - inputText, inputTextareaOutputs                  - outputText, outputLabelCommands            - commandButtonSelections              - selectOneRadio,selectOneListbox,

selectOneMenu for radio buttons, list boxes, menu etc.

Layouts                  - panelGridData table               - dataTableErrors and messages   - message, messages

JSF Html Tags • In JSF Html Tag Library there are 25 core tags . • column                              creates column in a dataTable • commandButton                creates button • commandLink                   creates link that acts like a pushbutton • dataTable                         creates a  table control • form                                 creates a form • graphicImage                    displays an image • inputHidden                      creates hidden field • inputSecret                       creates input control for password • inputText                          creates  text input control (single line) • inputTextarea                    creates  text input control (multiline) • message                           displays the most recent message for a

component

JSF Html Tags • JSF Html Tag Library ….• messages                          displays all messages • outputFormat                    creates  outputText, but formats

compound messages • outputLabel                      creates label  • outputLink                        creates anchor • outputText                        creates single line text output • panelGrid                         creates html table with specified number of

columns • panelGroup                      used to group other components where

the specification requires one child element • selectBooleanCheckbox   creates checkbox • selectManyCheckbox       creates set of checkboxes

JSF Html Tags

• JSF Html Tag Library ….• selectManyListbox           creates multiselect listbox • selectManyMenu              creates multiselect menu • selectOneListbox              creates single select listbox • selectOneMenu                creates single select menu • selectOneRadio                creates set of radio buttons

JSF Core Tags • These tags allows you to take advantages of features of JSF

framework, like validation, conversion , event handling. • Core library is stepchild of Html library. i.e. core library supports the

html library. • Core tag library also contains tags for views and sub-views , loading

resource bundle, adding arbitrary text to a page. Some examples of JSF core tags are:

• f: view  tag is used to create top level viewf: subview tag is used to create subview of  a view. f: validator tag is used to add a validator to a

component.

JSF Core Tags • f: converter tag is used to add an arbitrary converter to a

component.• f: actionListener tag is used to add an action listener to a

component.• f:valueChangeListener tag is used to add a valuechange listener

to a component. Example • <f:view locale="en">

    <h:outputText value="label" /></f:view>

• f: view  tag is used to create top level view and is a container for all JSF component tags on a page.

• The locale attribute  provides several options for presenting  localized views of your application.

• The "en" represents English and if we give value "fr" to locale attribute then french view will be displayed.

JSF Core Tags • Another example• <f:view>

  <h1>head</h1>  <p>view</p>  <f:subview id="sub_id">    <c:import url="second.jsp" />   </f:subview></f:view>

• Here f:subview tag is like container for the JSF components contained in an included JSP page (second.jsp).

• <h:inputText id="txt_id"              value="txt_value">  <f:validator validatorId="Txt_Validator" /> </h:inputText>

• The Validator tag registers a  Validator  on the component associated with the enclosing tag. In validatorId field, we give the value of one of the validator-id element of a validator in your Faces configuration file.

List of JSF Core Tags • f :view                                 Creates the top-level view • f:subview                            Creates a subview of a view • f:attribute           Adds an attribute  to a component • f:param                               Constructs a parameter component • f:converter            Adds an arbitrary converter to a component • f:converterDateTime      Adds a datetime converter to a component • f:converterNumber       Adds a number converter to a component • f:actionListener          Adds an action listener to a component• f:valueChangeListener    Adds a valuechange listener to a component • f:validator              Adds a validator to a component • f:validateDoubleRange   Validates a double range for a component’s value • f:validateLength         Validates the length of a component’s value

List of JSF Core Tags ….• f:validateLongRange     Validates a long range for a component’s value • f:facet                 Adds a facet to a component • f:loadBundle            Loads a resource bundle,• stores properties as a Map • f:selectitems            Specifies items for a select one or select many component • f:selectitem             Specifies an item for a select one or select many component • f:verbatim              Adds markup to a JSF page

List of JSF Core Tags ….• f:validateLongRange     Validates a long range for a component’s value • f:facet                 Adds a facet to a component • f:loadBundle            Loads a resource bundle,• stores properties as a Map • f:selectitems            Specifies items for a select one or select many component • f:selectitem             Specifies an item for a select one or select many component • f:verbatim              Adds markup to a JSF page

List of JSF Core Tags ….• f:validateLongRange     Validates a long range for a component’s value • f:facet                 Adds a facet to a component • f:loadBundle            Loads a resource bundle,• stores properties as a Map • f:selectitems            Specifies items for a select one or select many component • f:selectitem             Specifies an item for a select one or select many component • f:verbatim              Adds markup to a JSF page

JSF Sample

• Sample application structure with folders shown below

JSF Navigation

• Navigation is the heart of Java Server Faces. The navigation rule for this application is described in the

faces-config.xml file.

• In our sample, we just want to go from inputname.jsp to greeting.jsp.

The faces-config.xml • <?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD

JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> • <faces-config> • <navigation-rule> • <from-view-id>/pages/inputname.jsp</from-view-id>• <navigation-case> • <from-outcome>greeting</from-outcome> • <to-view-id>/pages/greeting.jsp</to-view-id> • </navigation-case> • </navigation-rule> • <managed-bean> • <managed-bean-name>• personBean• </managed-bean-name> • <managed-bean-class>• jsfks.PersonBean• </managed-bean-class> • <managed-bean-scope>request</managed-bean-scope> • </managed-bean> • </faces-config>

The Managed Bean • package jsfks; • public class PersonBean • { • String personName; • /** * @return Person Name */ • public String getPersonName() • { • return personName; • }• /** * @param Person Name */ • public void setPersonName(String name) • { • personName = name; • } • }

The Properties File (Resource Bundle)

• messages.properties

• inputname_header=JSF KickStart prompt=Tell us your name: greeting_text=Welcome to JSF button_text=Say Hello sign=!

JSP Pages inputname.jsp • <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> • <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> • <f:loadBundle basename="jsfks.bundle.messages" var="msg"/> • <html>• <head> <title>enter your name page</title> • </head> • <body> • <f:view> • <h1> • <h:outputText value="#{msg.inputname_header}"/> • </h1> • <h:form id="helloForm"> • <h:outputText value="#{msg.prompt}"/> • <h:inputText value="#{personBean.personName}" />• <h:commandButton action="greeting" value="#{msg.button_text}" />• </h:form> • </f:view> • </body> • </html>

JSP Pages greeting.jsp • <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> • <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> • <f:loadBundle basename="jsfks.bundle.messages" var="msg"/> • <html> • <head> • <title>greeting page</title> • </head> • <body> • <f:view> • <h3> • <h:outputText value="#{msg.greeting_text}" />,• <h:outputText value="#{personBean.personName}" />• <h:outputText value="#{msg.sign}" /> • </h3> • </f:view> • </body> • </html>

Creating the index.jsp File• We will now create a third JSP file that doesn't actually function as a

presentation page. It uses a JSP tag to "forward" to the inputname.jsp page.

• Create the index.jsp file inside the WebContent folder. Note that this file is not created in the pages folder like the previous JSP files.

• Having an index.jsp file will allow us to start the application like this: • http://localhost:8080/jsfks/ • <html> • <body> • <jsp:forward page="/pages/inputname.jsf" />• </body> • </html> • If you look at the path for the forward, you'll notice the file suffix is .jsf and

not .jsp• This is used here, because in the web.xml file for the application *.jsf

is the URL pattern used to signal that the forwarded page should be handled by the JavaServer Faces servlet within Tomcat.

The web.xml• <?xml version="1.0"?> • <!DOCTYPE web-app PUBLIC • "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" • "http://java.sun.com/dtd/web-app_2_3.dtd"> • <web-app>

• <context-param>• <param-name>javax.faces.STATE_SAVING_METHOD</param-name>• <param-value>server</param-value>• </context-param>

• <context-param>• <param-name>javax.faces.CONFIG_FILES</param-name>• <param-value>/WEB-INF/faces-config.xml</param-value>• </context-param>

• <listener>• <listener-class>com.sun.faces.config.ConfigureListener</listener-class>• </listener>

• <!-- Faces Servlet -->• <servlet>• <servlet-name>Faces Servlet</servlet-name>• <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>• <load-on-startup> 1 </load-on-startup>• </servlet>

• <!-- Faces Servlet Mapping -->• <servlet-mapping>• <servlet-name>Faces Servlet</servlet-name>• <url-pattern>*.jsf</url-pattern>• </servlet-mapping>• • </web-app>