Normally, a jsp contains static and dynamic contents. Static contents are written using html while dynamic contents are executed at server side, and the resultant data is presented again in html format. When a page is presented in a browser, it contains sequence of html tags that are nested to present view elements and data. When we are working with JSF, the presented page is still the same, but the way jsp code is written, and the way it is processed by the container, there is major difference. Let us see what we have in Jsf.

Logical Description of Jsp Compoents:

• Everything is a component. Text fields, tables, rows, columns, hyperlinks, buttons, forms etc. are components. All these components are encapsulated in view component. Also, these components can be nested.
• Some of the components can be liked to backing bean (POJO) attributes.
• Each component is eligible for few events. The events can be value change events e.g. in case of text box, we enter something, or action events e.g. button press. Applicable events can be attached to the components.
• Some of the components will require certain validation. Validators performing such validations can also be attached to the components.
• Values entered by user will require conversion to a data type of liked backing bean attribute. Such convertors can also be defined for components.
• Finally, all above components, validators, convertors and components are readily available with JSF framework (mainly in the form of custom tags). If you require anything different, then there is facility to write your own custom elements also.

In next section, let us actually see implementation details of above components.

Implementation Details of Jsp Components:

In this section, we are not going in details of each component. Detail documentation is available in Jsf tag library reference. Here we extract a quick reference for all important components, which mostly we need when we write a Jsp with Jsf framework.

• Custom Tag Declaration: Jsf provides to core tag library, which is independent of any rendering toolkit. In addition to that, it also provides html tag library, which is actually html rendering kit. If we are using html renderer provided by Jsf then we need to import both the libraries here. We can also opt to use JSTL tag library instead and get rid of these. But this means we don’t want to use component based request handling of Jsf. Add following declaration to the jsp. Wherever applicable, we are going to refer to this declaration prefixs.

<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %>

<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %>

• View Tag: Each component we include in our jsp should be enclosed in this view tag. This is the base for everything that is presented on browser. It is also required to enclose all Jsf component tags inside a view tag.

<f:view>

………..

………..

</f:view>

• Form Tag: Everything that needs to be submitted to the server will be enclosed inside form tag. This tag we are going to use from the html tag library.

<h:form>

………..

………..

</h:form> 

• UIInput Tags: As the name means, these tags handle the data (mostly user entered data) submission to the FacesServlet. These tags belong to html tag library. There are four possible renderers to these tags – Hidden, Secret, Text and Text Area. We can attach validators and convertors to these components only. Following UIInput component tags are available in Jsf.
  • inputHidden – Renders hidden text
  • inputSecret – Renders password fields
  • inputText – Renders text box.
  • inputTextarea – Renders text area field

<h:inputText id=“firstName”></h:inputText>

• UIOutput Tags: These html tags are used to render data out. Label, link, outputmessage and text are the renderers available with this tag. Following UIOutput component tags are available.
• o outputLabel – Renders label
• o outputLink – Renders a link
• o outputFormat – Renders message
• o outputText – Renders output text

<h:outputText value=“First Name”></h:outputText>

• Linking with Backing Bean: Backing bean is a POJO, which can be used for two purposes. First to link the UIInput tag values to the attributes of it (POJO/backing bean). Second is linking actions to the methods doing processing and returning result.

<h:inputText id=“firstName” value=”#{helloWorldBean.firstName}” required=“true”>

</h:inputText>

<h:commandButton action=”#{helloWorldBean.sayHelloWorld}”

                        value=“Get Complete Name”></h:commandButton>

• Validators: Validators can be the validators provided by Jsf or we can also build custom validators. These validators are attached to the components that get data input i.e. UIInputs.

<h:inputText id=“firstName” value=”#{helloWorldBean.firstName}” required=“true”></h:inputText>

• Convertors: Convertors convert the values submitted from client to a data type required by the mapping backing bean attribute. Jsf provides a set of standard convertors. We can also write a custom convertor and attach it to a component derived from UIInput.

<h:inputText id=“id” value=”#{helloWorldBean.id}” required=“true” converter=”javax.faces.convert.IntegerConverter>

                  </h:inputText>

• Displaying Messages: This is another concern a developer needs to handle, display error messages in appropriate language and format. Language concern is explained below. Jsf html tag library has message tag that can be used to render a message. Style attribute of this message is to format the message.

      <h:message id=“errors” for=“firstName” style=“color:red”/>

• Localization: Localization is presenting information in the language of user. Business data localization is to be implemented programmatically through backing beans, but Jsf provides ability to localize the static contents i.e. labels, messages etc. in desired language. Localization can be achieved in two steps.
  • Including resource bundle in desired language.

<f:loadBundle var=”bundle_en”

basename=”messages.CustomerMessages” />

• ?
  • Using resource bundle contents.

<h:outputText value=”#{bundle_in.firstName}”/>

• Additional Tags: Following additional tags are used for specific component rendering.
  • UIPanel: It provides container to group multiple components.
  • dataTable: Used for data bound tables.
  • graphicImage: Used to render images.
  • selectBooleanCheckbox: Radio button in different formats
  • selectManyCheckbox: Multiple value selection
  • UISelectXXXXX: Select (option/combo box) components having UISelectItem, UISelectItems and UISelectItemGroup components.

Backing Beans:

Similar to Struts and Spring MVC framework, these backing beans are actually Plain Old Java Objects (POJOs). Attributes of these Java classes are liked with components to transfer data between client and server. Other operations can be linked to submit actions on pages. FacesServlet does the job of population of these objects, from the component values and vice versa. It also executes the backing bean method mapped to an action.

Summary:

Jsf does use the Jsp technology to build a view, but now everything is a reusable component with different execution lifecycle.