First, we will develop our code storing the state on the client. The form needed to send the user input and the number of new full and partial matches, also contains all the previous colors for all the guesses and answers given at that time by the user. To do so, we create a new helper class to format the HTML code. This is something that is done in a modern enterprise environment using templates, JSP files, or just totally avoided using pure REST and a one-page application in the enterprise environment. Nevertheless, here we will use the old technology in order to demonstrate the gears that rotate under the hood of modern engines:
package packt.java9.by.example.mastermind.servlet;
import packt.java9.by.example.mastermind.Color;
import packt.java9.by.example.mastermind.Table;
import javax.inject.Inject;
import javax.inject.Named;
public class HtmlTools {
@Inject
Table table;
@Inject
@Named("nrColumns")
private int NR_COLUMNS;
public String tag(String tagName, String... attributes) {
StringBuilder sb = new StringBuilder();
sb.append("<").append((tagName));
for (int i = 0; i < attributes.length; i += 2) {
sb.append(" ").
append(attributes[i]).
append("="").
append(attributes[i + 1]).
append(""");
}
sb.append(">");
return sb.toString();
}
public String inputBox(String name, String value) {
return tag("input", "type", "text", "name", name, "value", value, "size", "1");
}
public String colorToHtml(Color color, int row, int column) {
return tag("input", "type", "hidden", "name", paramNameGuess(row, column),
"value", color.toString()) +
tag("div", "class", "color" + color) +
tag("/div") +
tag("div", "class", "spacer") +
tag("/div");
}
public String paramNameFull(int row) {
return "full" + row;
}
public String paramNamePartial(int row) {
return "partial" + row;
}
public String paramNameGuess(int row, int column) {
return "guess" + row + column;
}
public String tableToHtml() {
StringBuilder sb = new StringBuilder();
sb.append("<html><head>");
sb.append("<link rel="stylesheet" type="text/css" href="colors.css">");
sb.append("<title>Mastermind guessing</title>");
sb.append("<body>");
sb.append(tag("form", "method", "POST", "action", "master"));
for (int row = 0; row < table.nrOfRows(); row++) {
for (int column = 0; column < NR_COLUMNS; column++) {
sb.append(colorToHtml(table.getColor(row, column), row, column));
}
sb.append(inputBox(paramNameFull(row), "" + table.getFull(row)));
sb.append(inputBox(paramNamePartial(row), "" + table.getPartial(row)));
sb.append("<p>");
}
return sb.toString();
}
}
Except the @Inject annotation, the rest of the code is simple and straightforward. We will focus on @Inject later but very soon. What we have to focus on is the HTML structure the code generates. The generated page will look something like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="colors.css">
<title>Mastermind guessing</title>
<body>
<form method="POST" action="master">
<input type="hidden" name="guess00" value="3">
<div class="color3"></div>
<div class="spacer"></div>
<input type="hidden" name="guess01" value="2">
<div class="color2"></div>
<div class="spacer"></div>
<input type="hidden" name="guess02" value="1">
<div class="color1"></div>
<div class="spacer"></div>
<input type="hidden" name="guess03" value="0">
<div class="color0"></div>
<div class="spacer"></div>
<input type="text"
name="full0" value="0" size="1">
<input type="text"
name="partial0" value="2" size="1">
<p>
<input type="hidden" name="guess10" value="5">
<div class="color5"></div>
...deleted content that just looks almost the same...
<p>
<input type="submit" value="submit">
</form>
</body>
</head>
</html>
The form contains the colors in the form of DIV tags, and it also contains the "letter" of the color in hidden fields. These input fields are sent to the server when the form is submitted, just like any other field, but they do not appear on the screen and the user cannot edit them. The full and partial matches are displayed in the text input fields. Since it is not possible to display the Color objects in an HTML text, we use LetteredColor and LetteredColorFactory, which assign single letters to colors. The first 6 colors are simply numbered as 0, 1, 2, 3, 4 and 5. A CSS file can control how the colors will look on the browser window. You may remember that we covered how and where to implement the display of individual colors. First, we created a special printing class that was assigning letters to already existing colors, but that was usable only in a very limited environment (unit tests mainly). Now, we have the issue again. We have the lettered color, but now we need real colors as this time we have a client display that is capable of displaying colors. The real power of modern web technology shines here. The content and the format can be separated from each other. The pegs of different colors are listed in HTML as div tags. They have a formatting class but the actual look is defined in a CSS file that is responsible for nothing else but the look:
.color0 {
background: red;
width : 20px;
height: 20px;
float:left
}
.color1 {
background-color: green;
width : 20px;
height: 20px;
float:left
}
... .color2 to .color5 is deleted, content is the same except different colors ...
.spacer {
background-color: white;
width : 10px;
height: 20px;
float:left
}