Binding the Form Elements With the Bean Properties
This example illustrates how to bind the value of the component to the property of the bean or to
refer method of the bean from component tag, Expression Language (EL) "#{
}" syntax is used for this purpose. For example, #{BeanName.propertyName}
can be
used to bind the value of the component to the property "propertyName"
of the bean "BeanName". #{BeanName.methodName} can be
used to refer method "methodName()" of the bean "BeanName",
when button is clicked. When page is rendered, the values for the
components are accessed using getter methods of the related properties and when
the form is submitted by clicking on button the appropriate setter methods are
called to set the values to the beans properties and the method methodName() is
called on button click.
Source code of login.jsp is as follows:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body>
<f:view>
<h:form id="LoginApplication">
<h:panelGrid id="lpg" columns="2">
<h:outputText value="User ID"/>
<h:inputText id="loginid" value="#{LoginForm.loginid}"/>
<h:outputText value="Password"/>
<h:inputText id="password" value="#{LoginForm.password}"/>
<h:outputText value=""/>
<h:commandButton value="Login" action="#{LoginForm.CheckValidUser}"/>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
|
In this source code we have associated values of the UIcomponents to
the backing bean's properties. The bean's properties loginid and
password are bound to the input components. When the user fills values in these components
and submit the form, these values are stored in the
properties of the bean. So when they are again bound with the component, stored
values are used. For example, in "success.jsp" page we have
again used these properties values so it considers the values filled in previous
page. Command button component's action is associated with CheckValidUser()
method of the Bean class. This method returns a String value either "success"
or "fail". This value is set to the action attribute of
the commandButton tag. This button works according to the returned value
and the navigation rules specified in the "faces-config.xml"
file.
success.jsp
<%--
Document : success
Created on : Sep 11, 2008, 11:49:49 AM
Author : sandeep kumar suman
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Congratulations!</h2>
</body>
</html>
|
fail.jsp
<%--
Document : fail
Created on : Sep 11, 2008, 1:45:14 PM
Author : sandeep kumar suman
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Please try again!</h2>
</body>
</html>
|
Download Source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
