JSF inputSecret Tag

All attributes of the inputSecret tag are explained as follows:

• accesskey: This is standard html attribute. It is used to set the access key for the element which is used to send the focus to the element when pressed.

• alt: This is used as an alternate text that is displayed when browser is not able to display the element.

• binding: It takes the value binding expression that is used to link the component to the property of the backing bean.

• converter: This specifies the converter for the component. This can be static value or EL expression.

• dir: It is used to set the direction of the text to be displayed. It can take two values LTR(left to right) and RTL (right to left).

• disabled: Its a boolean attribute. This is used to disable the element to receive focus, when it is set to true.

• id: This attribute is used to uniquely identify the element within the closest container.

• immediate: Its a boolean attribute. It is used to identify during which phase value change event should occur. If this attribute is set to true then in place of firing the event during the process validation phase, these event are sent immadiately at the end of apply request values phase.

• lang: It is used to set the base language of the component when displayed.

• maxlength: It is used to set the maximum length of character that can be input into the text field.

• onblur: It is used to set the java script code to execute when focus is lost from the element.

• onchange: It is used to set the java script code to execute when element is modified.

• onclick: Script to be invoked when the element is clicked.

• ondblclick: It is used for Java Script code to be invoked when the element is double-clicked.

• onfocus: It is used to set the java script code to execute when element receives the focus.

• onkeydown: It is used for Java Script code to be invoked when a key is pressed down over this element.

• onkeypress: It is used for Java Script code to be invoked when a key is pressed over this element.

• onkeyup: It is used for Java Script code to be invoked when a key is released over this element.

• onmousedown: It is used for Java Script code to be invoked when the pointing device is pressed over this element.

• onmousemove: It is used for Java Script code to be invoked when the pointing device is moved while it is in this element.

• onmouseout: It is used for Java Script code to be invoked when the pointing device is moves out of this element.

• onmouseover: It is used for Java Script code to be invoked when the pointing device is moved into this element.

• onmouseup: It is used for Java Script code to be invoked when the pointing device is released over this element.

• onselect: It is used to set the java script code to execute when text of the component is selected by the user.

• readonly: Its a boolean attribute. It is used to indicate the user that its value can't be modified, if it is set to true.

• redisplay: This is a boolean attribute. This is used to specify that the password, that have been entered previously, has to be rendered again or not. Its default value is "false" because we generally need not to do this for security reasons.

• rendered: Its a boolean attribute. Its default value is true. It determines whether this component should be rendered or not.

• required: Its a boolean attribute. It indicates that its value is required by the user before the submission of the form to the server. If it is set to true and value is not provided then an error message comes.

• size: It is used to set the width (in character) of the component.

• style: It is used to set the CSS style definition for the component.

• styleClass: It is used to set the CSS class for the component.

• tabindex: This is a standard html attribute. It is used to set the order of receiving the focus on the movement of TAB key by the user.

• title: It is the standard html attribute. It is used to set the tooltip text for this component.

• validator: It takes the method binding expression. This expression represents the validator method. This method is called at the time of validation of the component.

• value: This is to set the current value of the component.

• valueChangeListener: This also takes a method binding expression. This expression represents value change listener method. This method will be called when new value is set for this component.

source: roseindia.net

SF formTag

This tag contains some attributes that are discussed below :

• id : This attribute is used to uniquely identify the element within the closest container.
• rendered : Its a boolean attribute. Its default value is true. It determines whether this component should be rendered or not.
• binding : It takes the value binding expression that is used to link the component to the property of the backing bean.
• dir : It is used to set the direction of the text to be displayed. It can take two values LTR(left to right) and RTL (right to left).
• lang : It is used to set the base language of the component when displayed.
• style : It is used to set the CSS style definition for the component.
• title : It is the standard html attribute. It is used to set the tooltip text for this component.
• styleClass : It is used to set the CSS class for the component.
• target : This is used to identify the name of the frame where the response generated by the server is displayed when we submit the form.
• accept : Its a comma separated list of content types that is handled by the server which processes this form.
• acceptcharset : It is used to list character encoding used for the data input by the user and that will be accepted by the user.
• enctype : This is used to set the content type of the data that will be submitted to the server.
• onclick : Script to be invoked when the element is clicked.
• ondblclick : It is used for Java Script code to be invoked when the element is double-clicked.
• onmousedown : It is used for Java Script code to be invoked when the pointing device is pressed over this element.
• onmouseup : It is used for Java Script code to be invoked when the pointing device is released over this element.
• onmouseover : It is used for Java Script code to be invoked when the pointing device is moved into this element.
• onmousemove : It is used for Java Script code to be invoked when the pointing device is moved while it is in this element.
• onmouseout : It is used for Java Script code to be invoked when the pointing device is moves out of this element.
• onkeypress : It is used for Java Script code to be invoked when a key is pressed over this element.
• onkeydown : It is used for Java Script code to be invoked when a key is pressed down over this element.
• onkeyup : It is used for Java Script code to be invoked when a key is released over this element.
• onreset : It is used for Java Script code to be invoked when form is reset.
• onsubmit : It is used for Java Script code to be invoked when form is submitted.

source: roseindia.net

JSF commandButton Tag

JSF commandButton tag has some attribute for different purposes. These attributes are explained below:

• action: This attribute holds a value for passing values from the page to the faces-config.xml file where the operation or navigation from the page to another page is decided.
• actionListener: The actionListener attribute of the commandButton tag is used to assign an action listener method from backing bean that performs the specific operation.
• id: Value of the attribute is used for identifying the component uniquely. This attribute must have a unique value in the closest container.
• immediate:It's value is a boolean value that indicates for the component events that should be sent to registered event listeners immediately. The immediate attribute allows you to turn off validation for a particular component.
• rendered: This attribute takes a boolean value that indicates for the rendering it or not in the view.
• value: This is the attribute holding the default value for the component whether it is specified directly or by the backing bean or any other external resources like message bundle.
• accesskey: This is the html attribute which specify key by pressing that key the component will be focused and accessed.
• alt: This is also a html attribute that is used for showing the textual description on mouse over of the component.
• dir: This attribute sets the value which define the component text direction. It sets the value like "LTR" means "left-to-right" and "RTL" means "right to left" direction.
• disabled: This attribute takes a boolean value. If the value is true then the component will be disabled otherwise the component will be enable.
• image: This attribute takes a relative or absolute url of the image that has to be displayed on the component. The image attribute is used for showing image on the component.
• lang: It sets the code for the language to be used in the markup generated by this component.
• onblur: This attribute indicates the event of the component. As the value of this attribute is defined as a JavaScript method which has to be performed when the component loses the focus.
• onchange: Specified JavaScript method is executed when the value has changed on losing focus after gaining focus.
• onclick: In the attribute, a JavaScript method is specified that is called when the component is clicked by user.
• ondblclick: This attribute indicates for performing the specified operation when the component is clicked two times continuously (or double click).
• onfocus: The JavaScript method can be called for the component when the component is focused.
• onkeydown: The specified JavaScript method or operation is performed when the key is pressed down over the component.
• onkeypress: This is the event of the component. It indicates the key press event. You can call a JavaScript method on the event of the component whatever you have mentioned.
• onkeyup: The specified JavaScript method is executed when key is released over this component.
• onmousedown: Specified JavaScript method is executed when mouse is pressed down over the component or element.
• onmousemove: This attribute sets the JavaScript code to executed when the mouse pointer is moved within the component or element.
• onmouseout: This attribute sets the JavaScript code to execute when the mouse pointer is moved away from the element or the component.
• onmouseover: This attribute sets the JavaScript code to execute when the mouse pointer is moved inside the element or the component.
• onmouseup: This attribute sets the JavaScript code to executed when the mouse pointer is released from the component.
• onselect: When you select the text contained by the component or element then the value of the attribute (JavaScript code) will be executed.
• readonly: This attribute sets the boolean value for making the component read-only or not.
• style: If you want ot add any CSS with the component then you can put the style as the value of the attribute. Added CSS will be applied on for the component.
• styleClass: This attribute holds the CSS class name which is defined in the external style sheet.
• tabindex: This attribute sets the tab index for the component. When you press the TAB key then the component will be focused after focusing all those components whose tab index is less than the component.
• title: This attribute holds a string value that is shown as a tool-tip text of a component or element.
• type: This attribute tells the component type whether it is submit type or reset etc.
• binding: This attribute binds the specified value with the backing bean.

JSF HTML Tag Reference

n this section, you will learn more about html tags provided in JSF. JSF HTML tags are used for design the page by using server side code. This tag is used by specifying the uri and prefix attribute of the taglib directive at the top of your JSP file. These are illusrated below as follows:

http://java.sun.com/jsf/html

This is the uri for the JSF html tags. And for the prefix value commonly "h" is used but you can put anything as value of the prefix attribute of the taglib directive. When you declare any html tag as a JSF tag then you should write the tag as follows:

.

This is the syntax of specifying the html tag as a jsf tag. You can take an example of creation an input box by using jsf html tag as follows:

If the prefix value is "h" then the syntax will be seen like : .

All the html tags have been used in the Rose India JSF Tutorial as you will get one by one ahead. You can skip for next section for getting html tags overview with complete code examples that can be used directly in your web application for creating several html components as the need of your application.

source: roseindia.net

JSF Renderers

After creating JSF components, it is also necessary for each component to be rendered to the client so that it can be visible to the client’s device. Each of the tag gives rise to an associated component. A renderer is a type of class that is responsible for encoding and decoding components. Encoding displays the component while decoding translates the user’s input into components value i.e. transform it into values the component can understand.

Now a days there are many devices that are web enabled. So application developers have challenge to develop components that can work across various platforms. For example, if we have an application that works on standard web browser and we want to extend it to make it enable to work on a WAP device. So, to handle this case we need components to be rendered in more than one way. Here JSF can help you . It is a simple task for JSF. Solution is to develop separate renderers for the component. JSF components use different renderers depending on the device used.

Encoding:
For example: Suppose we have used h:inputText tag . So the renderer of the component associated with this tag produces the following output:

This is called encoding. The encoded page is sent to the browser and displayed.

Decoding:
Now if fields in form are filled by user and page is submitted by clicking the button, the browser sends the form data to the web server as a “POST” request”. POST” request contains form data and URL of the form. This form data is placed in hash table and can be accessed by all components. Each component gets a chance to look that hash table to interpret the form data. This is called decoding.

Html output Tag handler asks each component to render itself. Tag handler call two rendering methods for each component :

1-encodeBegin() in doStartTag() and

2-encodeEnd() in doEndTag().

Opening tag, like

, is written by encodeBegin() method and closing tage

, is written by encodeEnd() method. Single tag, like , that dosen’t require separate opening and closing tag is also written by encodeEnd() method.

JSF tag handler may call third rendering method encodeChildren().if rendersChilden property of component is set to true i.e. if component has child components(compound component). For example: Html table component composed of input field components as column values for each row. So for a complex component tag handler calls encodeBegin(), then encodeChildren() and encodeEnd() on the component.If the child component also has its own children component then encodeChildren() method calls encodeBegin() and encodeEnd() on the child component.

Some components renders itself (Direct rendering) and some components uses renderer to render itself (Delegated rendering). So both are different. If component uses renderer, then JSF calls encoding methods of the renderer, not the encoding method of the component. Which renderer will be used is determined by getRenderer() method of the component. So rendering of UI components is separated out that makes it pluggable with other possible rendering i.e.if we want a new functionality, like a new look and feel or rendering output to different client types, then its easy to add or plug a new renderer.

Render kit :
Component classes generally transfer the task of generating output to the renderer. All JSF components follow it. Render kit is a set of related renderers. javax.faces.render.RenderKit is the class which represents the render kit.The default render kit contains renderers for html but it’s up to you to make it for other markup languages.Render kit can implement a skin (a look & feel).Render kit can target a specific device like phone, PC or markup language like HTML,WML, SVG. This is one of the best benefit of JSF because JSF doesn't limit to any device or markup.

Sometimes we may wish to customize the renderers of an existing RenderKit and sometimes create our own RenderKit. We typically create renderers for our custom components.In this case we have to register renderers with existing RenderKits in JSF configuration file faces-config.xml.This renderer should define renderer-type of the original component. Also, you should provide the renderer-class that points to your custom renderer. The renderer class should extend javax.faces.render.Renderer class.



........
........



The information mentioned in configuration file registers the renderer with the default html RenderKit. UI component's geRendererType() method is called that returns a string to identify the type of renderer that would be used by component and to see if it should delegate rendering to a renderer. If no matching render type is found then component renders itself without delegating to any renderer.


...........
........


.........
........

In this case, configuration file shows how to register the renderer (for ex. ButtonRenderer) specified in which renders a component (for ex. Button) specified in to a client (for ex. SVG) specified in .

Standard render kits:
JSF defines a standard RenderKit and set of associated Renderers that generate html markup. Renderer will be determined and handled automatically according to the tag used.

sourse: roseindia.net

JSF Architecture

JSF was developed integrating MVC design pattern so that applications can be designed well with greater maintainability. To understand this fact we need to understand what is MVC design pattern, how MVC helps to design an application well and how can we make our web application easy to maintain.

The MVC design pattern splits an application design into three separate parts:

Model : handles data and logic.

View : handles output (presentation)

Controller: handles processing of an application.

MVC model’s purpose is to separate model and presentation to enable developers to set focus on their core skills and collaborate more clearly. If you have to create many pages for presentation then you have to concentrate only on view layer rather than model and controller layer because you can reuse code for controller and model.

In the same way if you want to change the code for model then you typically need not to change view layer.

Controllers are used to process user actions. In this process layer model and views may be changed.

The best advantages of JSF is that it is both a Java Web user-interface standard and a framework that fits well with the Model-View-Controller (MVC) design pattern. It offers a clean separation between presentation and behavior. MVC pattern helps persons of different skill sets to work separately so tasks can be completed in parallel. UI can be created by page author using reusable UI components and business logic part can be implemented using managed beans.

source: roseindia.net

JSF Life Cycle

In this we will understand the life cycle of JSF application.

Life cycle of a JSF web application starts when user makes a request. On submission of a page various further tasks are performed like validation of data provided in components in the view, data conversion according to types specified on server side etc. So series of steps that an application follows is called life cycle.

A JSF application typically follows six steps in its life :

1. Restore view phase :

This phase starts when a user requests a JSF page by clicking a link, button etc. In this phase view generation of the page, binding of components to its event handlers and validators are performed and view is saved in the FacesContext object. The FacesContext object contains all the state information JSF needs to manage the GUI component's state for the current request in the current session. The FacesContext stores the view in its viewRoot property.All the JSF components are contained by viewRoot for the current view ID. Component tree of a page is newly built or restored.
A request comes through the FacesServlet controller. The controller checks the request and takes the view ID i.e. name of the JSP page. View ID is used to look up the components in the current view. JSF controller uses this ID if the view already exists . If the view doesn't already exist, the JSF controller creates it. The created view contains all components.

2. Apply request values phase :

The purpose of this phase is for each component to retrieve its current state. After restoring of component tree in previous phase each component in the tree retrieves its new value and store it locally. Component values are typically retrieved from the request parameters.If immediate attribute of a component is set to true, then the validation, conversion, and events associated with the component is processed in this phase.

If a component's immediate event handling property is not set to true, the values are converted. Suppose field is bound to be an Integer property, the value is converted to an Integer. An error message associated with the component is generated if this conversion fails, and queued in the FacesContext. This message will be displayed during the render response phase, along with any validation errors resulting from next process validation phase.

At the end of this phase, the components are set to their new values, and messages and events have been queued.

3. Process validations phase :

During this phase local values stored for the component in the tree are compared to the validation rules registered for the components. If local value is invalid, an error message is added to FacesContext, and the component is treated invalid then JSF proceeds to the render response phase and display the current view showing the validation error messages. If there were conversion errors from the apply request values phase, the messages for these errors are also displayed. If there are no validation errors, JSF proceeds ahead to the update model values phase.

4. Update model values phase :

After confirming that data is valid in the previous phase local values of components can be set to corresponding server side object properties i.e. backing beans. So bean properties will be updated .If the local data cannot be converted to the types specified by the bean properties, the life cycle proceeds directly to the render response phase and errors are displayed.

5. Invoke application phase :

Before this phase the component values have been converted, validated, and applied to the bean objects, so you can now use them to execute the application's business logic. Application-level code is executed such as submitting a form or linking to another page.For example user moves to the next page you will have to create a mapping in the faces-config.xml file. Once this navigation occurs, you move to the final phase of the lifecycle.

6. Render response phase:
In this phase JSP container renders the page back to the user,if jsp is used by application i.e. view is displayed with all of its components in their current state.If this is an initial request, the components will be added to the component tree. If this is not an initial request, the components are not added because they are already added to the tree.The state of the response is saved after rendering of the content of the view, so that subsequent requests can access it and it is available to the restore view phase.

source: roseindia.net