This implementation of the number guess game as a single Java class employing Qwicap to provide a web interface is based directly on the command-line implementation of number guess. It is very similar in both structure and length. It depends on one web page, which it employs as a template, and two stylesheets: one defines the appearance of the game's web page, and the other, automatically supplied by Qwicap (and therefore not shown here), defines the appearance of the elements Qwicap may add to the web page in response to conditions like errors.
Contents
- User Experience
- Java Source Code
- Web Page "number-guess.html"
- Style Sheet "number-guess.css"
- File "WEB-INF/web.xml"
—[ Return To: “Comparison of Number Guess Implementations” ]—
User Experience
Game In Progress, Bad Input
Game Complete
Source Code
import edu.utexas.its.eis.tools.qwicap.servlet.*;
import edu.utexas.its.eis.tools.qwicap.template.xml.mutable.MutableMarkup;
public class Web {
public static void main(final String[] args) throws Exception {
final Qwicap Q = Qwicap.getCurrentInstance();
final MutableMarkup Doc = Q.getDocument("/number-guess.html").getMutable();
final int No = new java.util.Random().nextInt(101);
int GuessCount = 0;
int Guess = -1;
do {
try {
Q.prompt().withoutFormData().usingPage(Doc);
Guess = Q.getInt("guess", 0, 100, false, 0);
String ResultStr = "Correct!";
if (Guess < No)
ResultStr = "Too Low";
else if (Guess > No)
ResultStr = "Too High";
if (GuessCount++ == 0)
Doc.get("div.history").deleteClass("invisible");
Doc.get("div.history tbody tr:first-child").duplicateAfter().
deleteClass("invisible").setContents("td.no", GuessCount,
"td.guess", Guess, "td.result", ResultStr);
} catch (QwicapAbandonmentException e) {
e.rethrowIfThisPageWasAbandoned();
}
} while (Guess != No);
// We're done. Setup the final page and exit.
Doc.get("div.guess").delete();
Doc.get("div.done").deleteClass("invisible").setContents("span.answer",
No, "span.guesses", GuessCount);
Q.goodbye(Doc);
}
}
Web Page "number-guess.html"
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content='text/html; charset=UTF-8'/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<link rel="stylesheet" media="screen" type="text/css" title="Preferred" href="number-guess.css"/>
<title>Qwicap Number Guess</title>
</head>
<body>
<h1>Qwicap Number Guess</h1>
<div class='content'>
<div class='guess'>
<p>A random number between 0 and 100 (inclusive) has been selected.</p>
<form method='post' action=''>
<label>Guess the number: <input type='text' size='6' name='guess'/></label>
<input type='submit' value='Guess'/>
</form>
</div>
<div class='done invisible'>
<p>Correct! The number was <span class='answer'></span>.
You guessed it in <span class='guesses'></span> attempts.</p>
<form method='post' action=''>
<input type='submit' value='Play Again'/>
</form>
</div>
<div class='history invisible'>
<table class='history'>
<thead>
<tr>
<th>No.</th> <th>Guess</th> <th>Result</th>
</tr>
</thead>
<tbody>
<tr class='invisible'>
<td class='no'></td> <td class='guess'></td> <td class='result'></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Style Sheets
Style Sheet "number-guess.css"
@import "qwicap.css";
body {
color: black;
background-color: #d3c692;
margin: 4% 6% 3% 6%;
font-family: verdana, arial, helvetica, sans-serif;
}
div.content {
background-color: #ffffee;
border: 1px solid;
padding: 1em 2em;
text-align: center;
}
div.guess input[type="submit"] {
width: 12ex;
}
table.history {
margin-top: 1em;
margin-left: auto;
margin-right: auto;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-spacing: 0;
border-collapse: collapse;
empty-cells: show;
}
table.history th {
padding: 0.2em 1em;
border-left: 1px solid white;
border-bottom: 1px solid gray;
background-color: gray;
color: white;
}
table.history th:first-child {
border-left: 1px solid gray;
}
table.history td {
padding: 0.2em 1em;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
text-align: center;
}
*.invisible {
display: none;
speak: none;
}
Web Application Deployment Descriptor
File "WEB-INF/web.xml"
This is the default "web.xml" file for all Qwicap applications, and requires no modification for this application. For an explanation of this file, see Qwicap Deployment Descriptors.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/j2ee/dtds/web-app_2_3.dtd">
<web-app>
<display-name>Qwicap Web Application</display-name>
<description>
A web application built on the Quick Web Interface for Conventional
Applications (QWICAP), using Qwicap's default, general-purpose
"web.xml" file.
</description>
<context-param>
<param-name>qwicap-threads-minimum</param-name>
<param-value>10</param-value>
</context-param>
<context-param>
<param-name>qwicap-threads-spare-maximum</param-name>
<param-value>30</param-value>
</context-param>
<context-param>
<param-name>qwicap-threads-maximum</param-name>
<param-value>1000</param-value>
</context-param>
<context-param>
<param-name>qwicap-thread-stack-kilobytes</param-name>
<param-value>0</param-value>
</context-param>
<servlet>
<servlet-name>QwicapDefault</servlet-name>
<display-name>Qwicap Web Application Component</display-name>
<description>
A web application component built on the Quick Web Interface for
Conventional Applications (QWICAP).
</description>
<servlet-class>edu.utexas.its.eis.tools.qwicap.servlet.QwicapServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QwicapDefault</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>10</session-timeout> <!-- 10 minutes -->
</session-config>
</web-app>
