Carla Mott's Blog

April 2007 Archives

Big changes in jMaki

jMaki .9 release was pushed out last week. We are feature complete! There were some significant changes to the framework with this new release.

First, the widgets are in a separate project (widgets.dev.java.net). With each toolkit, we pruned the wrappers and included only widgets which are high quality. In the case of Yahoo, several new widgets have been wrapped. Each toolkit is built as a component library and the NetBeans plugin has been updated to only add the libraries that are used in the application where previous versions included all toolkits in each web applcation. Also the Ext widget toolkit has been added to jMaki. Finally, all widgets were updated to publish events to a topic.

Only the core framework remains in ajax.dev.java.net. This was done so we can stabalize the core and provide widgets at a different rate than the core. Much of the Java server code has been rewritten to be cleaner and more performant. The tags changed to be more descriptive. you will need to use the following:

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsf" %>

Also there updates to Glue code to include the ability to specify Glue code on a per page basis. Creating mashups with RSS feeds is also easier with the use of Filters. Now you can provide code to read the stream and create the JSON formatted data. Finally, another key feature in this release is the ability to add themes to the application including support in the Netbeans plugin. All downloads are still available from the ajax.dev.java.net project. See the samples as they have been updated to take advantage of the new features.

Finally, this week Ludo added an upgrade button to the project. This allows you to upgrade you web app to the latest release of jMaki. It makes a backup of you app and udpates you application to the new version. The plugin has been updated and available for you to try out.

jMaki at JavaOne

Looks like you'll get to see jMaki in several places at JavaOne this year. Greg Murray and I have a session TS-6375 jMaki: Web 2.0 App Building Made Easy. We'll give an overview of jMaki and the architecture, talk about some of the features like Glue and the data models, go over the value proposition and give some cool demos.

If you want to get your hands dirty then the following labs will interest you. Schedule info

Also look for us at our booths at ComunityOne day, May 7 and in the Pavilion during JavaOne. See a demo, ask us questions or just stop by and say hi.

jMaki widget data model explained

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'}
   ]
}

This work is licensed under a Creative Commons License.