Greg Murray's Blog

jMaki Actions

In Widgets talking to Widgets Carla describes how widgets from different toolkits can easily communicate. There is a more basic level of communication which you can do declaratively which we call jMaki Actions

jMaki Actions are a declarative way of associating widget behavior.

Consider a case where you have a Dojo Fisheye and you simply want it to select a tab or URL when an item is clicked. The Dojo Fisheye is in essence provides the same behavior as a menu. You may notice that the models for the Fisheye Model and the jMaki Menu Model are very similar. A Fisheye widget as a JSP tag would look as follows:

<a:widget name="dojo.fisheye"
             args="{labelEdge:'bottom', orientation:'vertical'}"
             value="[
             { iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg',
               label : 'Greg Tab',
               action : { topic : '/yahoo/tabbedview/select', message : {targetId : 'tab1'}} },
             { iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg',
               label : 'Roberto Tab',
               action : { topic : '/yahoo/tabbedview/select', message : {targetId : 'tab2'}}
             },
             { iconSrc:'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg',
               href : 'http://jmaki.com',
               label : 'test4'
             }
             ]"/>

With jMaki Actions you can associate an action to be published on a given Fisheye icon. The action property will publish a message that can be picked up by another widget in the page. Let's use a Yahoo Tabbed View which is by default mapped to the topic "/yahoo/tabbedview". The different action you can perform on a tabbedview are described in the Tabbed View Data Model. Here is the portion of the relevant code that is the action that occurs when item labeled 'Greg Tab' is clicked.

action : { topic : '/yahoo/tabbedview/select', message : {targetId : 'tab1'}}

The targetId refers to a tab with the id property used by a given tab. The message property is included as part of the payload of a message published to the topic used. Clicking on the item 'Greg Tab' will end up in the 'Greg Tab' being selected and the same for the 'Roberto Tab'.

<a:widget name="yahoo.tabbedview"
          value="{tabs:[
          {id : 'tab1', label : 'My Tab', content : 'Some Content'},
          {id : 'tab2', label : 'My Tab 2', content : 'Tab 2 Content'}
          ]
          }" />

The end result is using the default template looks as follows:

jMaki models uses general conventions for behaviors and properties you can easily swap widgets. For example you could easily use a Dojo Tabbed View or even swap the FishEye for a menu or tree widget.

jMaki actions are great for general interactions like this and makes it really easy to do basic things like this. More advanced interactions should still be done in glue code as described in Widgets talking to Widgets.

How will you use actions?

Comments

This work is licensed under a Creative Commons License.