Data binding is a technique that binds the GUI data to the model data, and thus reliving the programmers from the tedious task of transferring data from the model to the GUI and from the GUI back to the model.
<textbox value="#[jsVar]" />
Once declared this way, any change in the JS variable will be immediately propaged to the textbox, and vice versa.
A complete example of how to use databinding with textBoxes is provided in the usesCases catalog in this component : Components/Model/Script/Binding/TextBox.ackcpt.xml
<listbox value="#[jsArray]" ... >
In order to use this array in the list columns, you have to define the var attribute which represents the contents of the current row. This technique is very similar to the one used in the JSF dataTable.
var persons = new Array(); persons.push(new Person('Franck', 25)); names.push(new Person('Victor', 35));
This array can then be used as a value for a listbox :
<listbox value="#[persons]" var="person"> <listhead> <listheader label="Name" /> <listheader label="Age" /> </listhead> <listcols> <listcol value="#[person.name]"/> <listcol value="#[person.age]"/> </listcols> </listbox>
A complete example of how to use data binding with listBoxes is provided in the usesCases catalog in this component : the Components/Model/Script/Binding/ListBox.ackcpt.xml
Akrogen provides also a wrapper that can be used to simplify the handling of a listbox and it's model. To declare such a wrapper, you have to :
The ListboxModelWrapper constructor takes two parameters :
This wrapper provides some helper methods, which are :
A complete example of how to use data binding and the wrapper class with listboxes is provided in the usesCases catalog in this component : the Components/Model/Script/Binding/ListboxWithDataModel.ackcpt.xml.