Data model

Zebkit data models are number of simple classes that help to keep various data structures and track the structures updating.

Data models classes and interfaces are hosted in separated and independent from UI “zebkit.data” package. Almost every zebkit data model can be represented with a JavaScript structure:

Zebkit data model JavaScript type
zebkit.data.ListModel

[1, 2, 3,… ]

zebkit.data.Text
zebkit.data.SingleLineTxt
```js "The text", "Multiline\ntext" ```
zebkit.data.Matrix
// 2 rows 3 cols matrix
[ 
  [1,2,3],
  [3,4,5]
]
zebkit.data.TreeModel
{
  "value": "tree item",
  "kids" : ["Subitem 1", "Subitem 2" ]
}

JavaScript types can be used to construct an appropriate data model. Usually it is done by a data model class constructor.

ListModel (zebkit.data.ListModel)

// create list model
var l = new zebkit.data.ListModel();
 
// add three elements into the list
l.add(1);
l.add(2);
l.add(3);
 
// register the list element removal events handler
l.on("elementRemoved", function(listModel, removedValue, index) {
   ...
});

Matrix (zebkit.data.Matrix)

// create 2 x 2 matrix model
var m = new zebkit.data.Matrix(2,2);
 
// fill all cells of the matrix with values
// the result is the following matrix:
// [ 0, 1 ]
// [ 2, 3 ]
for(var i = 0; i< m.rows * m.cols; i++) {
   m.puti(i, i);
}
 
// catch matrix cell update events
m.on("cellModified", function(matrixModel, row, col, prevValue) {
   ...
});

TreeModel (zebkit.data.TreeModel)

Tree model is represented as a hierarchy of “zebkit.data.Item” class instances. “zebkit.data.Item” class is designed to keep tree model node value, references to its kids nodes and a reference to its parent node.

JavaScript tree model:

{
   "value": "Root",
   "kids" : [
      "Item 1",
      {
         "value": "Item 2",
         "kids" : [ "Item 2.1", "Item 2.2" ]
      }
   ]
}

Tree model structure:

Root
 |
 +-- Item 1
 +-- Item 2
       |
       +-- Item 2.1
       +-- Item 2.2

Find simple example of tree model usage:

// create tree model
// Root
//  +-- Item 1
//  +-- Item 2
//       +--- Item 3
var t = new zebkit.data.TreeModel({
   value: "Root",
   kids : [
      "Item 1",
      {
        value: "Item 2",
        kids: [
           "Item 3"
        ]
      }
   ]
});
 
// catch tree model item value modification events
t.on("itemModified", function(treeModel, item) {
   ...
});
 
// update "Item 1" value with "New value"
t.setValue(t.root.kids[0], "New value");

TextModel (zebkit.data.TextModel interface)

“zebkit.data.TextModel” is interface that has two implementations:

Simple example of tree model usage:

// create three lines text model
var t = new zebkit.data.Text("One\nTwo\nThree");
 
// list text model lines
for(var i=0; i < t.getLines();  i++) {
   print(t.getLine(i));
}
 
// catch text update events
t.on(function(e) {
   ...
});

Data models visualization

Data models are used by UI components as a content that has to be visualized. The table below shows zebkit UI components and a data model they visualize:

UI Component Data model Visualization
zebkit.ui.Label
zebkit.ui.BoldLabel
zebkit.ui.TextField
zebkit.ui.TextArea
zebkit.data.Text
zebkit.data.TextModel
zebkit.ui.List zebkit.data.List
zebkit.ui.grid.Grid zebkit.data.Matrix
zebkit.ui.tree.Tree zebkit.data.TreeModel