Ajax for the dummies
By Hilaire on Thursday 19 February 2015, 16:01 - Permalink
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 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
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:
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?