Tapestry and AJAX: Autocompleter and InlineEditBox

The benefit of Tapestry AJAX components is that you can use AJAX without any knowledge of JavaScript whatsoever. Components encapsulate everything required for their work, and you only need to configure their required bindings. Well, in fact there is one additional chore when dealing with AJAX components: you have to make JavaScript libraries available to the page. For this, you'll have to use Shell and Body components in the same way as we did it for DatePicker in one of the previous articles.

I decided to introduce one of Tapestry's AJAX components now because Autocompleter is quite similar to the PropertySelection component we dealt with in the previous article. It has the same two required bindings, model and value, and its model is an implementation of a special interface with a few methods for us to implement. So it shouldn't be too difficult.

The idea is to propose to the users of the CelebrityCollector application an alternative way of selecting a Celebrity of the Week. We don't want to keep them desperately searching a long list of celebrities trying to find their favorite. Instead, they will enter the first few characters of their favorite's surname into the Autocompleter, and this clever component, after an invisible rendezvous with the server, will suggest a list of available surnames starting from the entered characters. Here is the result we want to achieve:

As usual, let's begin with a mock up. Here is the old form for selecting a Celebrity of the Week:

<form action="" jwcid="@Form">

  <select jwcid="selectCelebrity">

    <option value="1">Angelina Jolie</option>

    <option value="2">Bill Gates</option>

  </select>

  <input type="submit" value="Save"/>

</form>

Change it to become

<form action="" jwcid="@Form">

  <select jwcid="selectCelebrity">

    <option value="1">Angelina Jolie</option>

    <option value="2">Bill Gates</option>

  </select><br/><br/>

  <input type="text" jwcid="auto"/><br/><br/>

  <input type="submit" value="Save"/>

</form>

The addition is very simple: we use a text box as a placeholder for the future Autocompleter, and it is marked as a Tapestry component. The next step is to configure this component in the page specification:

<component id="auto" type="Autocompleter">

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

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

</component>

It looks very similar to PropertySelection, doesn't it? It connects straight to the ASO, in the same way as the PropertySelection does, but its model should implement a different interface, the IAutocompleteModel.