JaiswalTraining

Get the online training



Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com





Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven







JSF User Interface Components

What is Components?
  • Components in JSF are elements like text box, button, table etc.. that are used to create UI of JSF
    Applications. These are objects that manage interaction with a user.
  • Simple components like text box, button .
  • Compound components like table, data grid
  • A component containing many components inside it is called a compound component.
  • Components help developers to create UIs by assembling a number of components , associating them
    with
Components Types

There are two types of Components in JSF
  • Standard UI Components
  • Custom UI Components

Standard UI Components

It contains basic set of UI components like text fields, check boxes , list boxes,
panel , label, radio button etc. These are called standard components

Custom UI Components

JSF let you create and use your own set of reusable ccomponents .
These components are called custom components.

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 two standard JSF tag libraries:
    • JSF Core Tags Library and
    • JSF Html Tags Library

<%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>


JSF Html Tags

These tags represent html components like text fields, buttons, form, table etc.

Html tags can be divided into following categories:
  • Inputs (inputText, inputTextarea)
  • Outputs (outputText, outputLabel)
  • Commands (commandButton)
  • Selections (selectOneRadio, selectOneListbox, selectOneMenu)
  • Layouts (panelGrid)
  • Data table (dataTable)
  • Errors and messages (message, messages)


JSF Core Tags

These tags allows you to take advantages of features of JSF framework, like
validation, conversion , event handling.

  • f: view tag is used to create top level view
  • f: subview tag is used to create subview of a view.
  • f: validator tag is used to add a validator to a component.
  • 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
Controlling Page Navigation

Static Navigation:- Static Navigation is recommended when the output
of one page is known well in Advance..
<%taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<html><body><f:view><h:form>
<p>Enter your username:
<h:inputText
value="#{LoginBean.username}"
id="usernameTextField"
required="true"/>
<h:message for="usernameTextField" />
</p>
<p>Enter your password:
<h:inputSecret
value="#{LoginBean.password}"
id="passwordTextField"
required="true"/>
<h:message for="passwordTextField" />
</p>
<h:commandButton value="Submit Values" action="loginWelcome"/>
</h:form></f:view></body></html>

In faces-config.xml, there is no <from-action> element.

<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>loginWelcome</from-outcome>
<to-view-id>/loginWelcome.jsp</to-view-id>
</navigation-case>
</navigation-rule>

Dynamic Navigation:- Dynamic Navigation is used when the next view
to be selected depends on the execution of some business logic in code.



<%taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<html><body><f:view><h:form>
<p>Enter your username:
<h:inputText
value="#{LoginBean.username}"
id="usernameTextField"
required="true"/>
<h:message for="usernameTextField" />
</p>
<p>Enter your password:
<h:inputSecret
value="#{LoginBean.password}"
id="passwordTextField"
required="true"/>
<h:message for="passwordTextField" />
</p>
<h:commandButton value="Submit Values" action="#{Login.loginAction}"/>
</h:form></f:view></body></html>

loginAction() Method can return different strings depending on logic.
// Action Method
public String loginAction() {
if (userid.equals("guest"&&
password.equals("guest"))
return "success";
else return "failure";
}

In faces-config.xml, two navigation cases are defined depending on the
returned value of loginAction() method.

<navigation-rule>
  <from-view-id>/pages/login.jsp</from-view-id>
  <navigation-case>
    <from-action>#{Login. loginAction}</from-action>
    <from-outcome>success</from-outcome>
    <to-view-id>/pages/home.jsp</to-view-id>
  </navigation-case>
  <navigation-case>
   <from-action>#{Login. loginAction}</from-action>
   <from-outcome>failure</from-outcome>
   <to-view-id>/pages/failure.jsp</to-view-id>
  </navigation-case>
</navigation-rule>


Using redirect element
  • <redirect/> is an optional element which can be used to specify that the
    response is generated by the new view using redirect response
    rather than rendering the response as the current request.
  • If we don't specify this element then the address bar shows the current
    page address even the response is generated by other page.
<navigation-rule>
<from-view-id>/pages/login.jsp</from-view-id>
<navigation-case>
<from-action>#{Login. loginAction}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/pages/home.jsp</to-view-id>
<redirect/>
</navigation-case>
</navigation-rule>

  • In the example below, if outcome is “success” then browser displays the home.jsp
    page in the address bar.
  • If <redirect/> element is not present in the configuration file, then browser will still show
    login.jsp page and not home.jsp.
  •  Redirect element terminates the current request and directs the control to the browser
    and then the browser makes the request.

Managed Bean

  • In an JSF application, backing beans (managed beans) are associated with UI components
  • Backing Beans are nothing but JavaBeans which defines properties and methods.
  • These properties are bound to component values or component instances. 
  • setX() and getX() methods are defined and implemented for all properties.
Managed Bean Scope

Managed Beans can be set to the following scopes:
1. request
2. session
3. application
4. none

  •  Request scoped managed beans are available only from when the user
    submits the page up to the response is rendered.
  •  Session scoped managed beans are available from the first access of a page
    by the user in the web application and remains until the session ends.
  • Application scoped managed beans are available throughout the application
    and are available to every session and every request of the application.
  • none: A managed bean with this scope is not stored anywhere, it is created
    on demand" whenever it is needed.
Managed Bean Example (UserBean.java)
package myjsf;

public class UserBean {
   private String name;
   
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
 }

Declaring bean in faces-config.xml

<managed-bean>
 <managed-bean-name>user</managed-bean-name>
  <managed-bean-class>
     myjsf.UserBean
     </managed-bean-class>
     <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Referring beans in input forms

<html>
<%taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
  <head>
<title>A Simple JavaServer Faces Application</title>
  </head>
  <body>
    <h:form>
      <h3>Please enter your name and password.</h3>
      <table>
        <tr>
          <td>Name:</td>
          <td><h:inputText value="#{user.name}" /></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td><h:inputSecret value="#{user.password}" /></td>
        </tr>
      </table>
      <p>
        <h:commandButton value="Login" action="login" />
      </p>
    </h:form>
  </body>
</f:view>
</html>