Wednesday, 31 July 2013

Running the sample application

Now we are all set to run the application :)

Open Login.jsp -> right click -> Run As -> Run on Server



Login Page will be displayed as shown below.

Enter User Name = maluskhr and Password = 123456

Click on Login button , MoneyConvertor page will open as shown below.


Enter some amount in the text field and click on Calculate Button , correspoding amount in Rupees will be displayed.

If you click on Reset , the amount's will be reset to zero.

Now again open the Login page and enter wrong user credentials as shown below.


Error page will be displayed as shonw below, if you click on back button again the Login page will open.

Sample Application (Implementation)

Now we will actually write the actual JSF code in order to make our application function properly.

Create the files as shown below in eclipse.

1) Login.jsp

<%@
page language="java"
contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@
taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@
taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!
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=ISO-8859-1">
<
title>Login Page</title>
</
head>
<
body>
<
f:view>
<h:form>
<h:outputText value="Enter your login credentials" />
<h:panelGrid columns="2">
<h:outputLabel value="User Name">:</h:outputLabel>
<h:inputText id="loginName" value="#{login.loginName}" required="true"></h:inputText>
</h:panelGrid>
<font color="#FF0000"><h:message for="loginName"/></font>
<h:panelGrid columns="2">
<h:outputLabel value="Password">:</h:outputLabel>
<h:inputText id="password" value="#{login.password}" required="true"></h:inputText>
</h:panelGrid>
<h:commandButton action="#{login.checkCredentials}" value="Login"></h:commandButton>
</h:form>
</
f:view>
</
body></
html>

2) Fail.jsp

<%@
page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@
taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@
taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!
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=ISO-8859-1">
<
title>Wrong Credentials</title>
</
head>
<
body>
<
f:view>
<
h:form>
<
h:outputText value="You have entered the wrong credentials , please try again." />
<
p></p>
<
h:commandButton action="#{login.back}" value="Back"></h:commandButton>
</
h:form>
</
f:view>
</
body></
html>
 
3) MoneyConvertor.jsp

<%@
page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@
taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@
taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!
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=ISO-8859-1">
<
title>Dollar to Rupee Convertor</title>
</
head>
<
body>
<
f:view>
<h:form>
<h:outputText value="Dollar-Rupee Convertor" />
<h:panelGrid columns="2">
<h:outputLabel value="Amount">:</h:outputLabel>
<h:inputText value="#{moneyConvertor.dollar}"></h:inputText>
</h:panelGrid>
<h:commandButton action="#{moneyConvertor.dollarToRupee}" value="Calculate"></h:commandButton>
<h:commandButton action="#{moneyConvertor.reset}" value="Reset"></h:commandButton>
<h:panelGrid columns="2">
<h:outputLabel value="Converted Amount">:</h:outputLabel>
<h:outputLabel value="#{moneyConvertor.rupee}"></h:outputLabel>
</h:panelGrid>
</h:form>
</
f:view>
</
body></
html>

4) Login.java

package
com.purple.book;
public
class Login {
private String loginName;
private String password;
public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String checkCredentials()
{
if(loginName.equals("maluskhr") && password.equals("123456"))
{
return "success";
}
else
{
return "fail";
}
}
public String back()
{
return "back";
}
}
  

5) MoneyConvertor.java 
package
com.purple.book;
public
class MoneyConvertor
{
private double dollar;
private double rupee;
public double getDollar() {
return dollar;
}
public void setDollar(double dollar) {
this.dollar = dollar;
}
public double getRupee() {
return rupee;
}
public void setRupee(double rupee) {
this.rupee = rupee;
}
public String reset()
{
dollar=0;
rupee=0;
return "reset";
}
public String dollarToRupee()
{
rupee = dollar * 56;
return "calculate";
}
}


6) faces-config.xml 

<?
xml version="1.0" encoding="UTF-8"?>
<
faces-config
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<managed-bean>
<managed-bean-name>moneyConvertor</managed-bean-name>
<managed-bean-class>com.purple.book.MoneyConvertor</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>login</managed-bean-name>
<managed-bean-class>com.purple.book.Login</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<display-name>Login</display-name>
<from-view-id>/Login.jsp</from-view-id>
<navigation-case>
<from-action>#{login.checkCredentials}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/MoneyConvertor.jsp</to-view-id>
<redirect />
</navigation-case>
</navigation-rule>
<navigation-rule>
<display-name>Login</display-name>
<from-view-id>/Login.jsp</from-view-id>
<navigation-case>
<from-action>#{login.checkCredentials}</from-action>
<from-outcome>fail</from-outcome>
<to-view-id>/Fail.jsp</to-view-id>
<redirect />
</navigation-case>
</navigation-rule>
<
navigation-rule>
<display-name>Login</display-name>
<from-view-id>/Fail.jsp</from-view-id>
<navigation-case>
<from-action>#{login.back}</from-action>
<from-outcome>back</from-outcome>
<to-view-id>/Login.jsp</to-view-id>
<redirect />
</navigation-case>
</navigation-rule>
</
faces-config>