net

Java / Servlets: Sample application: "Guess number"

Entry point

To launch a jasty.web application, there should be an entry page, resolving the initial Form.

    <%@ taglib prefix="jst" uri="http://textorius.net/jsp" %>
    <html>
    <head>
        <title>Guess a number</title>
        <script src="resources/jquery-1.7.min.js" type="text/javascript"></script>
        <script src="resources/jquery.form.js" type="text/javascript"></script>
        <script src="resources/jasty-core.js" type="text/javascript"></script>
        <script src="resources/jasty-components.js" type="text/javascript"></script>
    </head>
    <body>
        <script>
            jasty.settings.formEngineUrl = "formEngine";
        </script>
        <jst:formViewer id="guessnum" entryPointClass="guessnumber.MainForm" />
    </body>
    </html>

The entry page typically references all necessary JS-libraries, configures Form Engine URL and contains formViewer-tag, pointing to the initial Form or Form resolver (EntryPoint).

Forms and Views

Forms are defined as plain classes, derived from Form-component. Object, returned by the prepareModel-method can be referenced on the main view as "model"-attribute. Form class also contains event handlers, which can be bound to the component events (startNewGame-method)

package guessnumber;

import com.jasty.components.JQuery;
import com.jasty.components.std.TextBox;
import com.jasty.core.EventArgs;
import com.jasty.core.Form;

public class MainForm extends Form {

    private int randomNumber = ((int) Math.floor(Math.random() * 100)) + 1;
    private int numberOfTries = 0;
    private int lowerBound = 1;
    private int upperBound = 100;

    @Override
    public Object prepareModel() {
        return "";
    }

    public void startNewGame(EventArgs e) {
        replaceWith(new MainForm());
    }

    public void processGuess(EventArgs e) {
        JQuery stats = $$(JQuery.class, "stats");
        TextBox guessEntryField = $$(TextBox.class, "guessEntryField");

        int guess;
        try {
            guess = Integer.parseInt(guessEntryField.getValue());
        } catch (NumberFormatException ex) {
            JQuery statusLabel = $(JQuery.class, "#stats .status");
            statusLabel.text("Your guess was not valid.");
            return;
        }


        ++numberOfTries;

        if (guess == randomNumber) {
            replaceWith(new CongratulationForm(numberOfTries));
            return;
        }

        guessEntryField.setValue("");

        String statusText = "";

        if (guess < 1 || guess > 100) {
            statusText = "Your guess, " + guess + " was not between 1 and 100.";
        } else if (guess < randomNumber) {
            if (guess >= lowerBound) {
            lowerBound = guess + 1;
            }
            statusText = "Your guess, " + guess + " was too low.  Try again:";
        } else if (guess > randomNumber) {
            statusText = "Your guess, " + guess + " was too high.  Try again:";
            if (guess <= upperBound) {
            upperBound = guess - 1;
            }
        }

        stats.html(renderFragment("stats", statusText));
    }

    public int getLowerBound() {
        return lowerBound;
    }

    public int getUpperBound() {
        return upperBound;
    }

    public String getCounter() {
        // Update number of tries label.
        if(numberOfTries == 0)
            return "You have made no guesses";
        if (numberOfTries == 1)
            return "You have made 1 guess.";
        return "You have made " + numberOfTries + " guesses.";
    }
}

JSP-views, related to the Form, should be located in the directory, corresponding to the package of the Form class, and named as the class (e.g.: /guessnumber/MainForm.jsp)

    <%@ taglib prefix="jst" uri="http://textorius.net/jsp" %>
    <h1>Guess a number</h1>
    <div id="${currentForm.id}_stats">
        <jsp:include page="MainForm_stats.jsp"/>
    </div>
    <jst:textBox id="guessEntryField" />
    <jst:button onClick="processGuess" text="Submit Your Guess" />
    <jst:button onClick="startNewGame" text="Start a New Game" />

Subviews or fragments must be located in the same directory as the main view. The subview file name is the Form class name with the fragment name, separated by underscore (e.g. /guessnumber/MainForm_stats.jsp)

    <div class="status">${model}</div>
    <div>${currentForm.counter}</div>
    <div>Guess a number between ${currentForm.lowerBound} and ${currentForm.upperBound}:</div>