 Apache Page 5 - Introducing Simple Components in Apache Tapestry |
Creating mock ups - ApacheIn the previous article, you witnessed the interplay between a Tapestry page and its components (granted, we had only one simple component there, but you get my point). Page class, when rendering its page, finds any components mentioned in the template and asks those components to display themselves, as they know better how to do that. Components, in their turn, might need some information to display themselves, and they ask the page class to provide the necessary information by calling some of its methods.
print this article SEARCH DEV SHED |
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>
blog comments powered by Disqus |
|
|
|
|
|
|
|
