Page History

Wiki Markup{

Scrollbar

}

Let's start building a basic Hi-Lo Guessing game.

In the game, the computer selects a number between 1 and 10. You try and guess the number, clicking links. At the end, the computer tells you how many guesses you required to identify the target number. Even a simple example like this will demonstrate several important concepts in Tapestry:

...

Code Block

language	xml
lang	xml
title	Index.tml

<html t:type="layout" title="Hi/Lo Guess"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_43.xsd">

    <p>
        I'm thinking of a number between one and ten ...
    </p>
    <p>
        <a href="#">start guessing</a>
    </p>

</html>

And edit the corresponding Java class, Index.java, removing its body (but leaving you can leave the imports in place for now):

Code Block

language	java
lang	java
title	Index.java

package com.example.tutorial1.pages;

public class Index
{
}

Running the application gives us our start:

...

If you click the link now, you'll get an error:

Image Removed

Image Added

Tapestry is telling us that we need to provide some kind of event handler for that event. What does that look like?

...

Once again, Tapestry gives us options; if you don't like naming conventions, there's an @OnEvent annotation you can place on the method instead, which restores the freedom to name the method as you like. Details about this approach are in the Tapestry Users' Guide. We'll be sticking with the naming convention approach for the tutorial.

...

Code Block

language	java
lang	java
title	Index.java

package com.example.tutorialtutorial1.pages;

public class Index
{
    void onActionFromStart()
    {

    }
}

...

Code Block

language	java
title	Guess.java

package com.example.tutorialtutorial1.pages;

public class Guess
{
    private int target;

    void setup(int target)
    {
        this.target = target;
    }
}

...

Code Block

language	java
lang	java
title	Index.java (revised)

package com.example.tutorialtutorial1.pages;

import java.util.Random;

import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Log;

public class Index
{
    private final Random random = new Random(System.nanoTime());

    @InjectPage
    private Guess guess;

    @Log
    Object onActionFromStart()
    {
        int target = random.nextInt(10) + 1;

        guess.setup(target);
        return guess;
    }
}

...

So ... let's click the link and see what we get:

Image Modified

Ah! We didn't create a Guess page template. Tapestry was really expecting us to create one, so we better do so.

Code Block

language	java
lang	xml
title	src/main/resources/com/example/tutorial/pages/Guess.tml

<html t:type="layout" title="Guess The Number"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_43.xsd">

    <p>
        The secret number is: ${target}.
    </p>
  
</html>

Hit the browser's back button, then click the "start guessing" link again. We're getting closer:

Image Modified

If you scroll down, you'll see the line of the Guess.tml template that has the error. We have a field named target, but it is private and there's no corresponding property, so Tapestry was unable to access it.

...

Code Block

language	xml
lang	xml
title	Guess.tml (revised)

<html t:type="layout" title="Guess The Number"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_43.xsd"
    xmlns:p="tapestry:parameter">
 
    <p>
        The secret number is: ${target}.
    </p>
 
    <strong>Guess number ${guessCount}</strong>
 
    <p>Make a guess from the options below:</p>
 
    <ul class="list-inline">
        <t:loop source="1..10" value="current">
            <li>
            <t:actionlink t:id="makeGuess" context="current">${current}
            </t:actionlink>
            </li>
        </t:loop>
    </ul>
 
</html>

...

Code Block

language	java
lang	java
title	Guess.java (revised)

package com.example.tutorialtutorial1.pages;

import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;

public class Guess
{
    @Property
    @Persist
    private int target, guessCount;

    @Property
    private int current;

    void setup(int target)
    {
        this.target = target;
        guessCount = 1;
    }

    void onActionFromMakeGuess(int value)
    {
        guessCount++;
    }

}

...

Code Block

language	java
title	GameOver.java

package com.example.tutorialtutorial1.pages;

import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;

public class GameOver
{
    @Property
    @Persist
    private int target, guessCount;
	
    void setup(int target, int guessCount)
    {
        this.target = target;
        this.guessCount = guessCount;
    }
}

Code Block

language	xml
title	GameOver.tml

<html t:type="layout" title="Game Over"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_43.xsd"
    xmlns:p="tapestry:parameter">

    <p>
        You guessed the number
        <strong>${target}</strong>
        in
        <strong>${guessCount}</strong>
        guesses.
    </p>
  
</html>

...

Next: Using BeanEditForm To Create User Forms

Scrollbar

Wiki Markup{scrollbar}

Page tree

Versions Compared

Old Version 48

New Version Current

Key