[SF] Synch using Ajax
Last updated at 5:42 am UTC on 16 March 2009
This little guide will, hopefully, serve as an introduction to those who are not fluent in AJAX technology. If you already know how AJAX works, you can read directly how to use the API. We're going to review some elemental concepts needed to develop with AJAX
- With AJAX, the logic of applications is encapsulated in services, so the right mindset to look at this does not involve so much thinking in pages/documents.
- AJAX is oriented to perform "asynchronous calls" between Client and Server (Asynchronous = the user UI is not interrupted while the server processes the request) and not a multi-page Web applications.
- XMLHttpRequest is a "scripting object" that runs in the browser client and is the bridge between server and browser. If you are really lucky, you will never have to hear from him again.
- This XMLHttpRequest object makes it possible to write UIs without the need to refresh browser pages, only refresh the elements that have changed, and this basically, is the whole point about AJAX.
- It works because every page in the browser is an object type tree (nodes) called DOM (Document Object Model).
- In general you cannot mix AJAX frameworks at the same time, although some rely on others. i.e. OpenRico and MooTools work over Prototype. In Seaside (2.8, 2.9?), Scriptaculous (which works over Prototype) is the de facto AJAX framework. But there is a growing interest in other AJAX frameworks in the Seaside community, some of them like JQuery, MooTools, etc (again, choose carefully) are available in SqueakSource, but in SmallFaces we only have support for Scriptaculous and, not published yet, MooTools (contact us if you are really motivated about MooTools).
AJAX synchronization in SmallFaces
AJAX lets you synchronize the client and server in a very flexible way. Therefore we have two types of communication from client to server and vice versa.
Synchronization from the client to the server
Here something happened in the client, and we must update the object that represents the control (in our Smalltalk image) according to the changes made by the user in the client, read, Internet browser.
So modifying the value in the client's texfield with 'Francis Cornford', at some time, the object which represents the control on the server/image (an SFTextField) must be updated. When to update? This depends of your interactions needs, so this time is configurable. For example, when a SFTextField is given a new character or when it loses the focus of the mouse, or when an item from a SFListBox in the document is selected.
Synchronization from the server to the client
This happens when you modify a widget in the server/image, and you have to update the control on the client. For example when writing the first name and last name in two text fields, when the focus is lost in the later, you want to update a third texfield with the first and last name, performing some validation possibly.
More or less that's a simplified idea of the use of AJAX, and the next logical step is actually how to use it in SmallFaces