Apache Tapestry and Custom Components: DateInput - Creating the DateInput Component (
Page 2 of 5 )
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.
 |
