During the creation of an Ajax applications there are many occasions when data is needed from an external or internal datasource. Often this data will be changed and is then sent back where it came from, or stored for later use. At a certain point I found myself using many different ways to retrieve data, using dozens of API calls, and sort-of similar systems. The logical step was to create a single consistent way to access a datasource, by formalizing a format for data storage and retrieval, the datasource instruction
Retrieving Data
I will use the datasource instruction in several examples to show how it works, and what it is. The first example is the initialization of a model. It retrieves data from a datasource and loads it into itself. Here data is loaded from mydata.xml.
<j:model load="url:mydata.xml" />
In some cases you want to load a subset of the data. You can specify this by using an xpath at the end of the get string. It’s applied after the data is retrieved from the datasource, but before it is handed of.
<j:model load="url:mydata.xml|//subdata[@id='example']" />
Another place to use datasource instructions is when extending a JML element dynamically using the jml attribute. In this example the jml is generated by calling a javascript function which acts as a datasource.
<j:bar jml="call:generateJml('somestring')" />
The j:load and j:insert bindings tags load data based on a selected xml node. The load rule loads more data into the component (the tree in this case). The insert rule extends a branch of the tree when requested, for instance when clicking the + icon. The context node for the load rule is the xml node loaded into the tree (root node). The insert rule takes the selected tree node as it’s context node. Both calls sent the id attribute of the context node, telling the datasource which account or folder is the data object to be acted upon.
<j:tree>
<j:bindings>
<j:load select="."
get="rpc:comm.loadAccount(xpath:@id)" />
<j:insert select="@haschildren"
get="rpc:comm.loadFolderList(xpath:@id)" />
</j:bindings>
</j:tree>
Loading data in a component will give us more insight in the way datasource instructions work. The code below shows a list connecting to a model by specifying the model’s name in the model attribute. The tree connects to the same model but selects the folders tag using an xpath statement.
<j:model id="mdlData" load="url:mydata.xml" /> <j:list model="mdlData" /> <j:tree model="mdlData:folders" />
Another way of setting the model for a component is to implicitly create a model using a datasource instruction.
<j:tree id="lstData" model="url:mydata.xml" />
A subset of data loaded in one component can be selected (by a user) and loaded into another component. Let’s say you’d want to make an outlook like interface with a tree, datagrid and text component. First you load the data in the tree. When a user selects a folder in the tree, it’s contents is shows in the datagrid. When clicked on a row in that datagrid the text component displayes the body of the message. This is how you would do that using datasource instructions.
<j:tree id="lstData" model="url:mydata.xml" /> <j:datagrid id="trSel" model="#lstData:select" /> <j:text model="#trSel:select:head" /> <j:text model="#trSel:select:body" />
N.B. Click on inbox to see messages.
Pages: 1 2
