Thursday, April 30, 2009

Rock Paper Scissors JSF Application

So, we’ve played around a bit with JSF and custom tags and internationalization and stuff, but all of that has been largely display generation. If all we wanted to do was display text to the user, we wouldn’t need a Servlet Engine and a JSF framework. No, the really kewl stuff happens when we start taking data from the user, and responding dynamically to the user depending on what type of data and information they deliver to us on the server side.

This section will look at implementing a Rock-Paper-Scissors type of application using JSF.

First, we need the index.jsp

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<f:view locale="sw"  >
<f:loadBundle basename="com.mcnz.jsf.UIResources" var="i18n"/>
<head>
<title>Rock Paper Scissors: JSF Style</title>
</head>

    <body>

    Please chose between Rock Paper and Scissors:
    <h:form id="rpsgame" >
        <h:inputText id="gesture" ></h:inputText>
        <h:commandButton id="submit" type="submit" value="Play!" action="#{rpsbean.doRockPaperScissorsGame}" ></h:commandButton>
    </h:form>
    </body>

</f:view>
</html>

 

Then we need some pages that we will forward to, depending upon whether the user types in Rock Paper or Scissors:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>win</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<f:view>
    <body>
    <p>I picked rock. You win!</p>

    </body>
</f:view>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>lose</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<f:view>
    <body>
    I picked Rock...You lose.
    </body>
</f:view>
</html>

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>tie</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<f:view>
    <body>
    <p>I also picked Rock. We tie!</p>

    </body>
</f:view>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>failure</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<f:view>
    <body>
    Hmmm...Something went wrong. Please try again...
    </body>
</f:view>
</html>

Then we need a JavaServerFaces bean class:

package com.mcnz.jsf.bean;

import javax.faces.context.FacesContext;

public class RPSBean {
    public String doRockPaperScissorsGame() {
        String result = "failure";
        java.util.Map requestParameterMap
=
             FacesContext.getCurrentInstance().
getExternalContext()
                 .getRequestParameterMap();
        String clientGesture = (String)requestParameterMap.get("rpsgame:gesture");
        String computerGesture = "rock";
        if (clientGesture.equalsIgnoreCase("scissors")){
            result = "youlose";
        }
        if (clientGesture.equalsIgnoreCase("paper")){
            result = "youwin";
        }
        if (clientGesture.equalsIgnoreCase("rock")){
            result = "tie";
        }
        System.out.println(clientGesture);
        return result;
    }

}

And finally, we need to edit the configuration file. The whole faces-config.xml file looks like this:

<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">

<faces-config>

    <application>
        <locale-config>
            <default-locale>es</default-locale>
            <supported-locale>en</supported-locale>
            <supported-locale>fr</supported-locale>
        </locale-config>
    </application>
    <managed-bean>
        <managed-bean-name>rpsbean</managed-bean-name>
        <managed-bean-class>com.mcnz.jsf.bean.RPSBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

    <navigation-rule>
        <from-view-id>/index.jsp</from-view-id>
        <navigation-case>
            <from-action>#{rpsbean.doRockPaperScissorsGame}</from-action>
            <from-outcome>youwin</from-outcome>
            <to-view-id>win.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-action>#{rpsbean.doRockPaperScissorsGame}</from-action>
            <from-outcome>youlose</from-outcome>
            <to-view-id>lose.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-action>#{rpsbean.doRockPaperScissorsGame}</from-action>
            <from-outcome>tie</from-outcome>
            <to-view-id>tie.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-action>#{rpsbean.doRockPaperScissorsGame}
</from-action>
            <from-outcome>failure</from-outcome>
            <to-view-id>failure.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>

</faces-config>

No comments:

Post a Comment

Followers