• action - indicates that the following object is used to communicate some action in most cases to other widgets.
• topic this string resets the topic name for this element only
• message can be a string (usually a url) or an object which contains data passed to another widget

We tried to be consistent across the models so that users would learn one model and most if not all the information would carry over to the other models.

Something that is new to the models is the action property. The action property is a declarative way of associating widget behavior. This is extremely powerful for simple operations because no JavaScript code is required to affect another widget. As a result of adding actions we found that we needed to describe the event model as well. Widget to widget communication is simplified because now the widgets also subscribe to various topics out of the box. They also include handlers for those topics. This means that you can publish to a topic which a widget is subscribed to, passing along the correct data and you can affect the behavior of that widget. This works much the same way as I described in my previous blog jMaki - widgets talking to widgets only you pass all the needed information as an action. See Greg's blog for a example on how to use actions .

As I mentioned above the widgets now subscribe to topics and handle certain events. The underlying mechanism for communication is still publish/subscribe (see the article 'A practical guide to jMaki events' for details on events in jMaki). The main idea is that widgets now subscribe to one or more topics such as '/yahoo/tabbedview/select'. There is a handler in the widget code which parses the message or payload and performs some action based on the topic name and the payload received. Consider the case of the tabbed view. The widget subscribes to the topic 'select' and contains a handler which expects the id of the tab which should be selected. By simply publishing a message to that topic containing the tab id to be selected you can affect which tab is visible on the page. What all can you do? What are the subscribers and what data is required? All these questions are answered in the model pages. You will find the list of events that are handled as well as the payload expected for each type of event.

jMaki - widgets talking to widgets

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.

This work is licensed under a Creative Commons License.