Introducing Simple Components in Apache Tapestry - Creating mock ups
(Page 5 of 6 )
Let me repeat this: it makes sense to start a Tapestry project from a series of mock ups, as they can be converted into Tapestry pages very easily. So let’s visualize first what we want to do in the new project.
The default page should display a very simple HTML form with a text field to enter a word and a button to submit it. It might look like this:
And here is the HTML code for the Home page mock up:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Guess the Word</title>
</head>
<body>
<h2>Guess the Word</h2>
<form action="">
Enter the secret word:
<input type="text"/>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Secret page is going to be very simple. It will either greet the user if the word was guessed correctly or inform him or her of failure and provide a link to the Home page to go and try again. So the same page will contain two views but only one of them will be shown at a time. However, the mock up will display both views as it doesn’t contain any dynamic functionality yet:
Here is the HTML code for the Secret page mock up:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Guess Result</title>
</head>
<body>
<!-- This will be shown if the guess was successful -->
<h2>Congratulations!</h2>
<p>You have guessed the secret word properly,
and here is the hidden wisdom:</p>
<p><i>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</i></p>
<!-- And this will be shown if case of failure -->
<h2>This was a wrong word</h2>
<p><a href="">Go back and try again.</a></p>
</body>
</html>
Next: Which components shall we need? >>
More Apache Articles
More By Alexander Kolesnikov
