Mar
2008
Compared to conventional approaches of creating web-based applications the RIAs development would need significantly more use of the ‘user interface coding’. This becomes more important that the future RIAs which would also be the next generation platforms must provide an improved model for integrated RIA programming. Such a model would further simplify specific key user interface programming tasks. Such tasks would practically involve ‘Event Handling’, ‘DOM Manipulation’, and ‘Service Consumption (Ajax)’.
All these tasks enable the “rich” in rich internet application. They are directly related to each other.
Here is a model for instance.
Typical steps required with an RIA login form submission would be;
Click login Button - Event Handling
Send Service Request - Ajax
Display specific type of activity indicator - DOM Manipulation
Return Service - Ajax
Hide Activity Indicator - DOM manipulation
Display Login “Success” Message - DOM Manipulation
Majority of the existing frameworks and libraries help with light integration within these three factors despite being a direct relationship. A web-developer will have to work extra to fill out the space left.
This can be better understood with an example code. This includes setting the contents of one combo box while value of second combo box caries. Using JQuerry the code would be written as;
Example:1
$(function(){
$(”select#comboOne”).change(function(){
$.getJSON(”/combo.php”,{id: $(this).val(), ajax: ‘true’}, function(j){
var options = ”;
for (var i = 0; i < j.length; i++) {
options += ‘<option value=”‘ + j[i].optionValue + ‘”>’ + j[i].optionDisplay + ‘</option>’;
}
$(”select#comboTwo”).html(options);
})
})
})
Example : 2
This time you will observe accomplishing the same task with the help of an integrated approach involving DOM Manipulation, Event handling, and Ajax;
<select id=”comboOne”
on=”change then r:load.combo2.request”>
</select>
<select id=”comboTwo”
on=”r:load.combo2.response then value[property=rows,text=text,value=value]”>
</select>
Both the above examples accomplished same task with two different approaches. You can easily notice that in the first example it required mode coding and it was all in JavaScript. The second example on the other hand used a real simple expression language for the same task.
A close look at the syntax displays;
on=”change then r:load.combo2.request”
This is an expression with Ajax request message, r: load.combo2.request and it will be sent when <select> receives a “change” event. It is really that simple.
Have a look at another expression;
on=”r:load.combo2.response then value[property=rows,text=text,value=value]”
Contents of second combo box are set depending on the data received in the response message when Ajax response message is received as- r: load.combo2.response
Going one step ahead and adding a visual queue on receiving this response message this expression would be;
<select id=”comboTwo”
on=”r:load.combo2.response then value[property=rows,text=text,value=value]
and effect[Highlight]”>
</select>
Here simply by adding -and effect [Highlight]”> to the expression it is possible to include a subtle effect and user will come to know that the combo box values have been changed.
All these coding examples are indicative of simplicity and usefulness of ‘Event handling, DOM manipulation, and Ajax’ integration. Now it becomes far easier for those web developers who are not comfortable with JavaScript. It is easier to learn this new expression. Since this new approach does not require complex languages therefore it increases overall productivity of web developers. And it never stops using JavaScript for those who like it.
Thus, we arrive at another principle that the RIA programming model must support JavaScript in the same way it supports the separation of behavior from markup. It is termed as “Unobtrusive JavaScript”.
It can be understood with an example;
<img id=”progress_image” src=”images/indicator.gif”/>
$(”progress_images”).on(”r:login.request then show”).on(”r:login.response then hide”);
Here the <img> markup becomes separate from JavaScript code defining its behavior. It means, “show” on receiving the login message and “hide” when receiving the login response.
Programming model like this would be much more beneficial for web developers because of its facilitating JavaScript in RIA programming.
An ideal RIA+SIO platform would obviously include RIA programming model. Web developers will find it as a single integrated approach for accomplishing their specified RIA programming activities. Development of rich user interface will be much faster with less coding this way.
