Tapestry and AJAX: Autocompleter and InlineEditBox - Meet InlineEditBox (
Page 4 of 4 )
Now we have some experience with Autocompleter, one of Tapestry's AJAX components. I hope you will agree that it wasn't too difficult to deal with -- at least, it wasn't more difficult than the PropertySelection component.
Now, as a reward for your perseverance, I want to show you another AJAX component, InlineEditBox. It provides a fascinating bit of functionality, and it is also unbelievably easy to configure.
Do you remember that Details page where we were displaying detailed information about a celebrity? Say we want to allow users to edit that information. This functionality might not fit the whole logic of the existing application quite nicely, so consider this as a diversion designed just to show off the InlineTextBox component.
Say we want to allow users to edit the occupation of the displayed celebrity. This is how we are displaying the occupation now:
<tr>
<td><b>Occupation:</b></td>
<td><span jwcid="occupation">Actor</span></td>
</tr>
And here is how the component is currently configured in the page specification:
<component id="occupation" type="Insert">
<binding name="value" value="celebrity.occupation"/>
</component>
To enable editing, all we need to do is replace the Insert component with the InlineTextBox component. And since the latter has exactly the same required binding as the former, all we need to do is change the type of the component:
<component id="occupation" type="InlineEditBox">
<binding name="value" value="celebrity.occupation"/>
</component>
It's as simple as that!
Okay, there is one other thing to do. You already know that to enable AJAX functionality you have to make JavaScript stuff available at the page, but this is easy. Go on and do those few little changes to <html>, <body> and the other tags of the Details page as outlined above for the CelebritiesList page (you don't need to use the debugEnabled="false" attribute though).
You will also need to remove the currently used Insert component from the title of the page, as Tapestry will not be happy seeing a component inside of the removed block of markup (the <head>). Let the title be just
<title>Celebrity Collector</title>
Then remove the fullName2 component from the page specification and rename the jwcid="fullName2" reference in the page template into just jwcid="fullName". You can use the source code provided in the zip file at the beginning of this article to make sure everything is correct.
Now run the application, navigate to the Details page, and at first glance you won't notice anything different. However, if you hover your mouse pointer over the value for the occupation, in this case "Programmer ;)", you'll notice that the page background slightly changes its color:
Now, click on the word, and you'll see a magical change happening:
The word can now be edited! Make some changes and press the Save button. The occupation changes accordingly. And you can be sure that the change was invisibly reported to the server, and stored in the property of the page class bound to this control. Isn't this magic? Especially considering the amount of effort (close to zero) required to invoke all this rich functionality!
The two components we have just learned to use, Autocompleter and InlineEditBox, might be the most useful of all the Dojo-powered components, and at the same time they are so easy to use. But Tapestry has more components in this group: a Dialog, to display a fancy modal dialog, a DropdownDatePicker and a DropdownTimePicker, the purpose of which should be clear from their names. There is also a magical EventListener annotation that allows you to connect a wide range of possible events in the user's browser with listener methods of the page class, thus opening fantastic opportunities for us developers… but let me leave all these treasures until a later article.
For now, I am going to return to my earlier plans and demonstrate one of the most impressive features of Tapestry, from the point of view of everyday Web development: the ease with which you can create and add to your toolbox just any custom component you are able to imagine. This will be the topic of the next article.
See you later.
