Post by Carl Gundel - admin on Jun 6, 2009 15:01:17 GMT -5
I have been working for a while on Ajax support for Run BASIC v1.0.2. The idea is to specify for a widget which rendered objects or DIVs or SPANs (this will be a new command like a DIV) will be updated dynamically when the widgets is used.
For example let's say we wanted to Ajaxify the spirals project that comes with RB. We would use the following statement to set up a list box:
listbox #colors, col$(), 3, [handleSelection]
and then we would use the ajax() method to specify one or more parts of the web page to replace when the user changes the listbox selection.
#colors ajax("#spiral")
Then when the selection in the listbox is changed the handler is invoked:
[handleSelection]
channel #spiral
cls
gosub [drawSpiral]
end channel
wait
The new CHANNEL/END CHANNEL statement causes any UI setup code to be applied to the DIV named #spiral. Once we hit the WAIT statement the web page will be updated, and only the contents of the page in DIV will be modified in place. If the user is looking at a web page which is scrolled down, the page will not jump back to the top when this kind of technique is used.
With this, we don't even need a Draw link as it currently uses. Change the color to blue or the shape to a circle and the graphic updates instantly.
What I've posted above is only a rough approximation the code. I will post a real working example of this technique later.
-Carl
For example let's say we wanted to Ajaxify the spirals project that comes with RB. We would use the following statement to set up a list box:
listbox #colors, col$(), 3, [handleSelection]
and then we would use the ajax() method to specify one or more parts of the web page to replace when the user changes the listbox selection.
#colors ajax("#spiral")
Then when the selection in the listbox is changed the handler is invoked:
[handleSelection]
channel #spiral
cls
gosub [drawSpiral]
end channel
wait
The new CHANNEL/END CHANNEL statement causes any UI setup code to be applied to the DIV named #spiral. Once we hit the WAIT statement the web page will be updated, and only the contents of the page in DIV will be modified in place. If the user is looking at a web page which is scrolled down, the page will not jump back to the top when this kind of technique is used.
With this, we don't even need a Draw link as it currently uses. Change the color to blue or the shape to a circle and the graphic updates instantly.
What I've posted above is only a rough approximation the code. I will post a real working example of this technique later.
-Carl
