Home arrow Apache arrow Page 4 - Creating Your First Tapestry Project

The First Tapestry Page - Apache

In the previous article, we began moving from theory to practice by preparing our work place and setting up our system. In this article, we actually get our hands dirty (at least figuratively) by building our first Tapestry project.

TABLE OF CONTENTS:
  1. Creating Your First Tapestry Project
  2. Adding Tapestry
  3. Deployment descriptor
  4. The First Tapestry Page
By: Alexander Kolesnikov
Rating: starstarstarstarstar / 35
April 17, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Every Tapestry page is represented by a Java class. This page class can render an HTML page using an HTML template that we provide to it. To know exactly which components were used in the page by the developer and how they should be configured, the page class will read an XML document called page specification.

So a Tapestry page consists of three entities:

  • A page class. If no class is specified, Tapestry will use its BasePage class, but this would be useful only for a very basic page. Normally, we extend the BasePage.
  • An HTML template with Tapestry components inserted into it in one way or another. 
  • A page specification that links components in the template with their behavior in the page class and also provides all sorts of additional information.

The default page of a Tapestry application is named Home; this will be shown if no specific page was mentioned in the request. Now we are going to create this Home page, which means creating a Java class named Home, a page template named Home.html and a page specification named Home.page.

When creating a Tapestry page, it makes sense to begin with a page mock up. Just create an HTML page that shows what you want to achieve, properly designed, showing one of the moments in the life of your future application.

All the Tapestry artifacts, including page templates and page specifications, live inside the WEB-INF directory. Right-click this directory in the Projects view of NetBeans IDE and select New > HTML... in the context menu. In the New HTML File dialog enter the name for the new page: Home. The result should look like this:

Press Finish, and NetBeans will create a simple HTML page for you. All we want for now is to display the current date and time, so edit the page like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

<html>

<head>

<title>My First Tapestry Page</title>

</head>

<body>

 

<h1>My First Tapestry Page</h1>

 

<p>Now is 8:27, the 1st of April 2007.</p>

 

</body>

</html>

Right-click the Home.html file in the Projects view, select View from the context menu, and you will preview the page in a Web browser.

Now, let's convert this simple HTML page into a Tapestry page template. We want to display dynamically the time and date for the moment when the application runs. All we need to do is surround the piece of text, which we are going to dynamically replace, with a span element.

Span is a standard HTML element normally used to assign some additional style to a piece of markup. In this case, instead of adding a style, we shall give the span an attribute named jwcid with some value in it. Here I have made the change:

<p>Now is <span jwcid="now">8:27, the 1st of April 2007</span>.</p>

When Tapestry sees that some HTML element is marked with the jwcid attribute ('jwcid' stands for Java Web Component ID), it knows that this element at run time should be replaced by a Tapestry component. However, for a Web browser this attribute means nothing, so it will ignore it. View the page in a Web browser, as before, and you will not see any changes.

That's it, our HTML template is ready. Tapestry can see that we have used a component and named it 'now'. But what kind of component is it, what exactly will it display dynamically instead of the <span>? To find out, Tapestry will look into the page specification, and this is what we are going to create next.

Right-click on the WEB-INF folder and in the context menu choose New > File/Folder... In the New File dialog that opens choose Other for the category and Empty File for file type, as the next screenshot shows:

Press Next, in the next dialog enter Home.page for file name and then press Finish.

Enter the following content into your new empty file:

<?xml version="1.0"?>

<!DOCTYPE page-specification PUBLIC

"-//Apache Software Foundation//Tapestry Specification 4.0//EN"

"http://tapestry.apache.org/dtd/Tapestry_4_0.dtd">

<page-specification class="com.devshed.tapestry.first.Home">

 

<component id="now" type="Insert">

   <binding name="value" value="currentDate"/>

</component>

 

</page-specification>

You can see that this is an XML document. The DOCTYPE thing is not for human readers, we just leave it as it is and copy it from one page specification to another.

Note the opening <page-specification> tag. In its attribute we have specified a Java class to use for this page. It doesn't exist yet, but we are going to create it soon.

NetBeans doesn't highlight the syntax of the Home.page file as it does with any other XML files. This is because it doesn't know that files with the .page extension contain XML. However, we can teach NetBeans to recognize .page files by changing its preferences. I don't want to bother you describing yet another sequence of dialogs and buttons; try to figure out how to do this yourself, or ask me at the discussion page. A hint: use the advanced options of the editor.

The descriptions of the components used on the page go between opening and closing <page-specification> tags. In our case, there is only one component with the ID now. Tapestry can see that the type of this component is Insert -- the simplest and perhaps most often used of Tapestry components. At run time, the Insert component simply replaces the corresponding HTML element with whatever was given to it as its value.

The way to give an Insert component a value is through its binding, appropriately named value. This line of code:

<binding name="value" value="currentDate"/>

is understood by Tapestry in the following way: to obtain the value, evaluate the currentDate expression. Which means: go to the page class, find a method named getCurrentDate(), invoke it, and whatever it returns will be the value you are looking for. So the next step is to create the page class with the getCurrentDate() method in it.

Right-click the Source Packages folder and choose New > Java Class... In the New Java Class dialog enter Home for the Class Name and com.devshed.tapestry.first (or anything else) for the Package. Press Finish, and the new class will be created.

To serve as a page class, the new class should extend the BasePage class that comes with Tapestry. Also, we want it to implement the getCurrentDate() method; this method simply returns a new Date object. Here is how the completed page class should look (comments are omitted for brevity):

package com.devshed.tapestry.first;

 

import java.util.Date;

import org.apache.tapestry.html.BasePage;

 

public abstract class Home extends BasePage {

 

   public Home() {

   }

 

   public Date getCurrentDate() {

     return new Date();

   }

}

To help NetBeans find the BasePage class and write an appropriate import statement, use the convenient Ctrl-Shift-F shortcut.

Please note that the class is made abstract. This is quite normal from Tapestry's point of view because the framework in many cases will implement for us some additional functionality, so it will create a concrete implementation by extending our page class at run time. In the following articles we shall get used to abstract methods and classes.

So we have created a template, a specification and a page class for the Home page. We have configured the Tapestry servlet so that a request to a default page comes straight to it. Now is the time to run our Tapestry application!

Press F6, or an appropriate button at the toolbar (you will recognize it by its tooltip saying "Run Main Project (F6)"). NetBeans will compile and package the application, then it will start Tomcat; you will see all this happening by the messages running in the Output window at the bottom. Finally, a browser window opens -- and we see our first Tapestry page, so simple but glorious!

Try to reload the page and you will see that the current time changes as you do this. Imagine what is happening here: every time you send a request to the application, the page class takes its HTML template and builds an HTML page to return to you. Doing this, the page class notices that the page contains an Insert component. That component inserts into the page a date returned by a method of the page class. That method is invoked, and the new date, displayed as a string, is inserted into the resulting HTML page. Then you see it.

This is not a very exciting project, indeed, but the fact that it works confirms that we have configured our working environment properly, and this was our main aim for today.

What comes next

In the next part of our Tapestry tutorial we are going to create a more interesting application, although it will also be rather simple. The aim will be to show you some of the most often used Tapestry components, to demonstrate two alternative ways of declaring a component and to discuss different ways of adding a property to a page.

See you in the next article and don't forget to visit the discussion page.



 
 
>>> More Apache Articles          >>> More By Alexander Kolesnikov
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

APACHE ARTICLES

- Apache Unveils Cassandra 1.2
- Apache on ARM Chips? Dell and Calxeda Help M...
- The Down Side of Open Source Software
- VMware Unveils Serengeti for Apache Hadoop
- SAP Takes Steps to Improve Hadoop Integration
- Looking to Hone Apache Hadoop Skills?
- How to Install Joomla on WAMPP
- Working with XAMPP and Wordpress
- GUI Available for Apache Camel
- Reduce Server Load for Apache and PHP Websit...
- Creating a VAMP (Vista, Apache, MySQL, PHP) ...
- Putting Apache in Jail
- Containing Intrusions in Apache
- Server Limits for Apache Security
- Setting Permissions in Apache

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: