Home arrow Apache arrow Page 2 - Apache Tapestry and Custom Components: DateInput

Creating the DateInput Component - Apache

Tapestry has many benefits, but perhaps one of the most important is that it makes creation of custom components very easy. In this article, I'll create a custom component to illustrate this point.

TABLE OF CONTENTS:
  1. Apache Tapestry and Custom Components: DateInput
  2. Creating the DateInput Component
  3. Creating the Models
  4. Wiring everything
  5. Implementing PageBeginRenderListener
By: Alexander Kolesnikov
Rating: starstarstarstarstar / 12
June 19, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Let the name for our custom component be DateInput quite descriptive for its purpose. So the three files associated with this component will be DateInput.html, DateInput.jwc and DateInput.java. We can simply add these files to the existing CelebrityCollector project, in the same way we added pages to it before. We might decide to use this new DateInput as a replacement for the DatePicker component.

The first step is to create an HTML template, DateInput.html file. It is actually a fragment of HTML we want to be included into an HTML page when the component renders itself, but it will often make sense to create the component template as a complete standalone HTML page so that we can easily preview it in any browser:

<html>

   <head>

       <title>DateInput Template</title>

   </head>

   <body>

       <select>

          <option>January</option>

          <option>February</option>

       </select>

       <select>

          <option>1</option>

          <option>2</option>

       </select>,

       <select>

          <option>2005</option>

          <option>2006</option>

       </select>

   </body>

</html>

Now let's convert this mock up into a Tapestry template. All three <select> elements should obviously be marked as Tapestry components, but there is also one other thing to do. We made the template a complete HTML page, but we don't want all those surrounding <html>, <head> etc. tags to be inserted somewhere in the middle of another page.

Fortunately, Tapestry has a special tool that allows us to do exactly what we want, and very easily. Have a look at this template:

<html>

   <head>

       <title>DateInput Template</title>

   </head>

   <body jwcid=$content$>

       <select jwcid="month">

            <option>January</option>

            <option>February</option>

   </select>

        <select jwcid="day">

            <option>1</option>

            <option>2</option>

   </select>,

   <select jwcid="year">

            <option>2005</option>

            <option>2006</option>

   </select>

   </body>

</html>

Note the jwcid=$content$ attribute, used here to mark the <body> element. It tells Tapestry that anything surrounded by this element should be taken seriously (i.e. rendered at runtime) while everything else, the <body> itself and everything that surrounds it, should be discarded.

The next step is to create a component specification. It looks very similar to a page specification:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE component-specification PUBLIC

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

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

 

<component-specification

   class="com.devshed.tapestry.celebrities.DateInput">

  

    <description>Component for choosing a date</description>

   

    <component id="day" type="PropertySelection">

       <binding name="model" value="daysModel"/>

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

    </component>

    <component id="month" type="PropertySelection">

       <binding name="model" value="monthsModel"/>

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

    </component>

    <component id="year" type="PropertySelection">

       <binding name="model" value="yearsModel"/>

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

    </component>

   

</component-specification>

In fact, the only difference is the name of the root element: it is now <component-specification> instead of <page-specification>. Otherwise, the specification is exactly the same as it would be for a Tapestry page with three PropertySelection components in it.



 
 
>>> 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: