Skip to main content

jMaki - widgets talking to widgets

Posted by carlavmott on July 29, 2007 at 9:51 AM PDT

Widgets talking to widgets has just become a lot easier in jMaki. The .9.6 build or first Release Candidate fully supports the data models we have recently specified. You will find the formal specifications on the wiki model pages. We wanted to specify the data passed to the widgets so users know what the widgets expect when loading data. We found that the models also need to describe the event payload that is published and the event payload expected for the subscriber topics now included in the widgets. This is useful when wanting to dynamically update the data in the widgets. The pages include several examples to get you started. Because jMaki has a standard data model for each of the widgets and each widget subscribes as well as publishes to topics, it is very easy to dynamically update the widgets.

In this blog I'll show how to build a simple application using the various widgets from the different toolkits and I'll wire the widgets so that they talk to each other. With the 9.6 release of jMaki widgets now subscribe to topics as well as publish events. We will use the publish and subscribe mechanism to tell the widgets how to update the data the widget is contains. See the the article A practical guide to events in jMaki for more information on the publish and subscribe mechanism in jMaki. The application I will build will have 2 buttons, one to add a rows to tables and a button to remove rows from a table. It will also contain 3 table one for each of the toolkits with tables. You will need jMaki 9.6.1 or later. Let's get started.

Create a project with the standard layout. In the side bar create 2 buttons. I used Yahoo buttons from the palette. Set the labels so that one button will add a row of data to the tables and the other will remove data from the tables.

    <a:widget name="yahoo.button" publish="/button/addTable" args="{label : 'Add table data' }"/>
                   
    <a:widget name="yahoo.button" publish="/button/removeTable" args="{label : 'Remove table data' }"/>
                   

In the main content section, add 3 table widgets one from Dojo, one Yahoo and one from Ext JS. In each table, set the subscribe arg to '/table/topic'. Each table will subscribe to the same topic so that in our event handler we only need to publish one event and affect all tables.

            
   <a:widget name="Ext.grid" subscribe="/table/topic"
          value="{columns : [
            { 'label' : 'Title', 'id' : 'title'},
            { 'label':'Author', 'id' : 'author'},
            { 'label': 'ISBN', 'id' : 'isbn'},
            { 'label': 'Description', 'id' : 'description'}
            ],
            rows : [
             { 'title' : 'Book Title 1', 'author' : 'Author 1', 'isbn': '4412', 'description' : 'A Some long description'},
             { id : 'foo', 'title' : 'Book Title 2', 'author' : 'Author 2', 'isbn': '4412', 'description' : 'A Some long description'}
             ]
            }" >
                   
  <:widget name="dojo.table" subscribe="/table/topic"
             value="{columns : [
            { 'label' : 'Title', 'id' : 'title'},
            { 'label':'Author', 'id' : 'author'},
            { 'label': 'ISBN', 'id' : 'isbn'},
            { 'label': 'Description', 'id' : 'description'}
            ],
            rows : [
             { 'title' : 'Book Title 1', 'author' : 'Author 1', 'isbn': '4412', 'description' : 'A Some long description'},
             { id : 'foo', 'title' : 'Book Title 2', 'author' : 'Author 2', 'isbn': '4412', 'description' : 'A Some long description'}
             ]
            }" >
                   
  <:widget name="yahoo.dataTable" subscribe="/table/topic"
            value="{columns : [
            { 'label' : 'Title', 'id' : 'title'},
            { 'label':'Author', 'id' : 'author'},
            { 'label': 'ISBN', 'id' : 'isbn'},
            { 'label': 'Description', 'id' : 'description'}
            ],
            rows : [
             { 'title' : 'Book Title 1', 'author' : 'Author 1', 'isbn': '4412', 'description' : 'A Some long description'},
             { id : 'foo', 'title' : 'Book Title 2', 'author' : 'Author 2', 'isbn': '4412', 'description' : 'A Some long description'}
             ]
            }" >
                   

So far we have added widgets to the application and now want to glue widgets together using the new features in jMaki.

In the glue.js file we need to add a handler that will add data to the tables when the 'Add table data' button is clicked. We will use the publish/subscribe mechanism to perform these operations. Also we need to add handler to remove data from the tables. Note that I will uncomment out the 'debugGlue = true' line in the glue.js file. This shows me all the events that are published and if there is a subscriber for the event. It really helps when working with events to "see" what is published to a topic and if there is a listener.

jmaki.namespace("jmaki.listeners");

//yahoo button adds the onClick to the end of the topic name.
jmaki.subscribe ("/button/addData/onClick", "jmaki.listeners.addTableData");

jmaki.listeners.addTableData = function(args) {
//set the row data
var row =  [
         { title : 'Book Title 3',
           author : 'Author 3',
           isbn: '4415',
           description : 'A Some long description'
         },
         { title : 'Book Title 4',
           author : 'Author 4',
           isbn: '4416',
           description : 'A Some long description'
         }
      ];
// send the row data
jmaki.publish("/table/topic/addRows", { value : row });
}

Now that we can add rows to the tables let's implement the feature to remove data. Again we can write a handler that is invoked when the button 'Remove table data' is pressed. That handler will remove the row with a specific id. Note that the row ids must be unique.

jmaki.subscribe ("/button/removeData/onClick", function(args) 
{jmaki.publish("/table/topic/removeRow", {targetId : 'foo'})})

This works because all the table widgets subscribe to the same topic and support the subtype 'addRows' which allows the add operation. The tree widgets support similar subtypes (like addNode and removeNode). Most widgets in jMaki now subscribe to a topic and have handlers associated with events that can be used to modify the data in the widget. See the individual data model pages for the list of event subtypes supported by the various widgets. I have uploaded the war file update tables for this application for those who wish to start with that. The actual web application name is WebApplication11.

Related Topics >>