Posts tagged ‘databinding’

We have the overview of the backbase databinding in previous post, now we will go the further detail on it.

It provides the data widgets like listGrid/treeGrid to display the underlying data in tabular form.

The Table/ListGrid that user faces is called Data Observer, which gives you the ability to define how bound data (bound with the dataSource) is displayed in the application. Essentially, the dataObserver is a way to customize the presentation of data from a dataSource.

The listGrid and treeGrid BTL elements are both standard dataObserver.
A dataSchema is in the middle of DataObserver and DataSource, which defines how the dataSource is mapped to the output. It allows you to easily update your queries in the case that the underlying field structure changes.

The DataFormatter can be used to do customization for displaying different formatting on the data in order for user to see different view of the original data, such as add a ‘$’ sign in front of a digit to represent the data in a form of American Dollar.

A listGrid widget is a powerful mechanism for displaying data, and at the most of the time we will use this widget to represent the underlying xml data. Consisting of a listGrid container widget and child listGridCol elements, the listGrid displays rows of data from a local or remote source. The data source can contain either static data or dynamically generated data, and both sorting and editing functionality is built into the widget. Furthermore, you can choose which columns to display, column resizing, column styling. For navigation, you can either connect a BTL pager widget to the listGrid or create your own paging/navigation mechanism.

Following is a code snippet which shows how to create a listGrid to display structured data:

<b:dataSource xmlns:b=" " xmlns:e=" " name="data” e:behavior="b:localData">
<b:listGrid dataSource="data" readonly="true">
<b:listGridCol label="Email" select="*[3]“/>
<b:listGridCol label=”Name” select=”name”/>
<b:listGridCol label=”Surname” select=”surname”/>

Following picture is the view of the code:

As seen from above, a listGrid element represents a table to show the data, under which each column is specified by a listGridCol element. There is a ‘dataSource’ attribute of listGrid to have a reference to a dataSource. And there is a ‘e:behavior’ attribute of dataSource to specify it’s local data or remote data.

Click to read more »

Backbase is a very powerful Rich Internet Application javascript library. I’ve conducted some research on the databinding capabilities and I want to share it with those who are doing RIA development.

Databinding Overview

Backbase provides some rich widgets that can be placed in a web page, and they will be

interpreted by a javascript library called ‘Client Runtime’ and rendered into HTML and display

in browser.

Some of the widgets need to consume some external data like ListGrid which will display some

XML or JSON data in browser, the data source of which can be local or remote.

Data binding refers to the process of representing data as an object. This allows our application

to access the data in the XML from the object which is considered as the data source.

We can have a look at a diagram which is from the official documentation of Backbase.

Click to read more »