Tuesday, June 5, 2007

JS Databinding in SEMF

While I am working on SEMF Databinding which synchronize HTML Element and Data XML, I thought it would be great if we follow a specified pattern on it. Although IE provide good databinding intergrated with the browser with the concept of XML Data Island, I have to think of some thing that work cross-browser. So I am suggesting a JavaScript Databinding Framework for SEMF like following..

1. The format of the Data XML is as following.
<xml>
<data> <!-- IE Needs another wrapper to identify this as data-->
    <data> <!-- Keeps the data variables -->
         <attr val="dataVar1">
             <!--this is an example of data variable.., It has direct attributes name, country and sports -->
                    <attr val="3"> <!-- the actual id of the data-->
                         <attr val="name">
                             Test1 <!-- just a simple value..-->
                         </attr>
                         <attr val=""> <!-- country is an another data object -->
                             <attr val="name">
                                 Country1
                             </attr>
                         </attr>
                         <attr val="sports"> <!-- This is an array -->
                             <sports>
                                    <attr val="1">
                                         Sport1
                                    </attr>
                                    <attr val="2">
                                         Sport2
                                    </attr>
                             </sports>
                         </attr>
                    </attr>
         </attr>
    </data>
    <page> <!-- Keeps page variables -->
         <attr val="pageVar1">
             varValue1
         </attr>
         <attr val="pageVar2">
             varValue2
         </attr>
    </page>
</data>
</xml>
2. It has mapped a property to a particular XML Data Component..
3. HTML elements are associate with properties.
E.g.
<input databind="property1"/> which will bind the elmeent to property which is mapped to a particular XML Data Component.
4. Repeater elements are defined to behave as pivots on repeating XML data structures.
E.g.
<span repeaterpivot="1">
    <input databind="property1">
</span>
The repetition will be happened,

* If the property1 is associated with a data variable AND
* If the data variable associated with the property1 has several ids OR/AND
* The final attribute referenced by the property is an array

E.g.
if the property1 is referening to "@dataVar1.sports" the repetition will be happened following way.
<span repeaterpivot="1">
    <input databind="property1" value="Sport1">
</span>
<span repeaterpivot="1">
    <input databind="property1" value="Sport1">
</span>
This is because the @dataVar1.sports is an array and the array has several elements.

But if the property is refering to "@dataVar1.name" there would be only 1 entry since it is not an array. But it dont need to be a array to make a repeat as mentioned in the above points.
If dataVar1 had have some other ids and they had entries for name, then the @dataVar1.name would repeat the same way like below.

<span repeaterpivot="1">
    <input databind="property1" value="Test1">
</span>
<span repeaterpivot="1">
    <input databind="property1" value="Test2">
</span>

These would be the basic properties of the Databinding Framework shifted with the SEMF. The implementation is almost done except for solving some very basic things. Hope it would be finished by the end of this week making SEMF to finish its first stage.