Let's take a canonical example with round-trip information transit between the server and the client, please excuse my approximate descriptions of the Ajax technology.

The actors of the situation in a web page canvas:

  • a model, a Boolean singularity, hold in a ValueHolder instance
  • a check box widget
  • a message dependent to the value of the model, the message is printed next to the check box

The behaviours:

  • the value of the model reflects the state of the check box. The server model is updated at the client initiative
  • when the model is updated, so is the message. The message is updated at the client initiative, with a client->server->client round-trip.

Aida offers a generous high level Smalltalk interface to successfully implement this situation.

First, in a WebApplication view, add the actors of the situation:

viewMain
   | html check message |

   html := WebElement new.
   check := html 
      addCheckboxAspect: #contents 
      for: (value := ValueHolder new contents: true).
   message := self myMessage.
   html addBreak; add: message.
   check onChangePostAndUpdate: message.
    [...]

The model is hold in the value instance variable. The check variable is a reference to our check box form element, it receives the message #onChangePostAndUpdate to post to server when its state changes on the client and to request an update of the message WebElement (bellow).

The message itself is in his own Span WebElement, and its contents is set accordingly to the model value.

myMessage
    | html |
    html := WebElement newSpan.
    html style: ''.
    value contents
        ifTrue: [ html addText: 'Vrai']
        ifFalse: [ html addTextBold: 'Faux'].
    ^ html

Depending on the state of the check box, the message is displayed as:

faux.png or vrai.png

I am still wondering how it exactly work: how is recognized the message span element at update, constant id?

Simple, even for an Ajax dummy, don't you?

That's all!