Skip to main content

jMaki widget data model explained

Posted by carlavmott on April 24, 2007 at 1:33 PM PDT

In jMaki, each type of widget (tree, table, menu ...) has the same data model regardless of the toolkit which provides the widget. This is a value proposition in jMaki which we believe very useful. What this means is that you can use a table from Yahoo to display your data and if later you decide that the table from Dojo better suites your needs then you can switch to the Dojo widget but not have to change the format of the data. With jMaki you learn a data model and use it with any toolkit implementation. Below I describe the models for tables or grids, trees, accordions, and menus. All widgets in jMaki expect data in JSON format and as you will see I use that format to describe data models.

Now, does this mean that all toolkits support the same functionality? There are cases where some toolkits support a more complicated structure than others. For example, Yahoo menus can have submenus where jMaki menus can not. In theses cases, you can still feed the same data to jMaki menu as Yahoo but currently jMaki will ignore some of the values. In cases where the widget from a particular toolkit supports additional functionality that is passed to the underlying widget. If the support is not available that data is ignored. We do this in the widget wrappers so the underlying toolkit only gets data it understands.

Data model for tables/grid widgets:

Provide column and row data as separate arrays in an object literal format.

{
   'columns' :[
        {'title' : 'Company', 'width' : 200, locked:false},
        {'title' : 'Price', 'width' : 75, 'renderer': 'usMoney'},
        {'title' : 'Change', 'width' : 75, 'renderer': 'change'},
        {'title' : '% Change', 'width' : 75, 'renderer': 'pctChange'},
        {'title' : 'Last Updated', 'width' : 85, 'renderer': 'italic'}
        ],
       rows : [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am']
    ]
}

Data model for trees:

Note that the 'expanded' property is defaulted to false for subtrees.

{
           'root' : {
             'title' : 'Yahoo Tree Root Node',
             'expanded' : true,
             'children' : [
             { 'title' : 'Node 1.1'},
             { 'title' : 'Node 1.2',
               'children' : [
                { 'title' : 'Node 3.1',
                'onclick' : {'url' :'foo'}}
                ]
             },
             { 'title' : 'Node 4.1'},
             { 'title' : 'Node 4.2'}
             ]
          }
}

Data model for menus:

Not all menus support submenus and those that don't skip the entries for the submenus in the data. The 'label' property is followed by either a 'menu' or 'url' property.

 menu: [
    { 'label': 'Images',
        'menu' : [
          {label:'Birds', url: 'jsonibrowse.jsp'},
          {label:'Cat', url: 'ibrowse.jsp'}
      ]
     },
     {label: 'Bookmarks',
        'menu' : [
           {label:'Digg', url:'digg.jsp'},
           {label:'Delicious', url:'delicious.jsp'}
         ]
      }               
   ]
}

Data model for tabbed view:

content is used to provide static inline data. url points to a page which will be loaded in the specified tab.

{
  'tabs' :[
               {'label' :'My Tab', 'content' : 'Some Content'},
               {'label' :'My Tab 2', 'url' : 'tab1.jsp'}
             ]
}

Data model for accordian:

content is used to static inline data. url is used to point to a page which will be loaded in that area.

{'rows' : 
    [
     {'label':'Books','content':'Book content'},
     {'label':'Magazines','content':'Magazines here'},
     {'label':'Newspaper','url' : 'foo.jsp'}
   ]
}
Related Topics >>