gmurray71's Blog

jMaki and the Open Ajax 1.0 Hub

Now that jMaki 1.0 is out we have time to look at integration with our JavaScript functionality like the Open Ajax 1.0 Hub. The integration was done using a simple jMaki extension which takes the events from jMaki and republishes them on the hub. jMaki is also capable of registering libraries as they are being loaded.

To show the integration we have published a version of the application running with Dojo, Yahoo, and jMaki integrated along with the Open Ajax Hubs components on http://jmaki.com/oaa. You can find out more about the details on what we did in the description tab of the example.

How will you use the hub?

jMaki 1.0 is fast approaching

After over a year in community development we are preparing to release jMaki 1.0 on September 25.

jMaki has stabilized over the past few months especially with the data models which allow you to create some very sophisticated user interfaces. As proof we have created jmaki.com where we are hosting many of our samples and recent blog postings using jMaki.

How are you using jMaki and if not what are we missing?

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?

jMaki Extension for Google Gears

With little effort I was able to get up and running with Google Gears very easily and integrate it with other jMaki components as an extension. Here is what I did to use the local Google database.

Using the latest jMaki .9.3 I added the following to my config.json file:

{
  'config': {
    'version': '.9',
    'glue' : {
         'includes': ['/glue.js', '/resources/system-glue.js']
       },
    'extensions': [{url : '/*', 'name' : 'google.gears'}]
    }
}

The extension is loaded for all urls and is named google.gears. Now for the extension that will interact with Google Gears. No other JavaScript code is needed.

jmaki.namespace("jmaki.extensions.google.gears");

jmaki.extensions.google.gears.Extension = function(args) {

  var self = this;
  var topic = "/google/gears";
  var db = null;
  var factory = null;
  
  this.postLoad = function() {
     self.init();
     jmaki.subscribe(topic + "/execute", self.execute);
  }

  this.init = function() {
      jmaki.log("Google Gears jMaki Extension intialized");

      // Firefox
      if (typeof GearsFactory != 'undefined') {
          factory = new GearsFactory();
      } else {
          // IE
          try {
              factory = new ActiveXObject('Gears.Factory');
          } catch (e) {
              // Safari
              if (navigator.mimeTypes["application/x-googlegears"]) {
                  factory = document.createElement("object");
                  factory.style.display = "none";
                  factory.width = 0;
                  factory.height = 0;
                  factory.type = "application/x-googlegears";
                  document.documentElement.appendChild(factory);
              }
          }
      }
      // Now set up the objects, being careful not to overwrite anything.
      if (!window.google) {
          window.google = {};
      }
      
      if (!google.gears) {
          google.gears = {factory: factory};
      }      
  }
  
  // Open this page's local database.
  function initDB() {
      if (!window.google || !google.gears) {
          jmaki.log("Google Gears not found.");
          return;
      }
      
      try {
          db = google.gears.factory.create('beta.database', '1.0');
      } catch (ex) {
          jmaki.log('Could not create database: ' + ex.message);
      }
      
      if (db) {
          db.open('beta-database');
          db.execute('create table if not exists jmaki' +
          ' (obj varchar(2048), Timestamp int)');  
      }
  }
  
  this.execute = function(args) {
    this.query = args.query;
    var _callback = args.callback;
    this.qargs = args.args;
    if (!db) initDB();
    if (!db) {
      jmaki.log("Google Gears Extension: Unable to find database");
      return;
    }
   var rs =  db.execute(query, qargs);
    // execture callback if it's there
    if (typeof _callback != 'undefined') _callback.call(this,rs);
  }

}

This file will need to be in a file named extension.js in the /resources/google/gears directory of your web application. Now that the extension has been enabled all you need is to publish to the topic /google/gears/execute with the data base calls you want to make from your glue code. Here is an example of mapping the save button for the Dojo Editor and Dojo Inline Edit components which publish to the topic "*onSave".

jmaki.subscribe("*onSave", function(args) {
    // empty the table then save it
    jmaki.publish("/google/gears/execute",
    { query : 'delete from jmaki',
     callback : function() {
       jmaki.log("Removing Previous Values");
       jmaki.publish("/google/gears/execute",
          { query : 'insert into jmaki values (?, ?)',
             args : [args.value, new Date()],
         callback : function() {
             jmaki.log("Saved " + args.value);
         }
        });
       }
    });
});

I used callbacks much like the XMLHttpRequest object to keep the design simple and make it easy to associate post processing code with a given event.

To display the data you need to load data from Google Gears as well. Here is the glue listener to load some text from the Google Gears data base and assign it to a JavaScript variable.

jmaki.subscribe("/jmaki/runtime/extensionsLoaded", function() {

  jmaki.publish("/google/gears/execute", 
    { query : 'select * from jmaki order by Timestamp desc',
     callback : function(_rs) {
         if (typeof _rs != "undefined" &&
             typeof _rs.isValidRow != "undefined" &&
             _rs.isValidRow()) {
             // set data on the global window object for later access
             if (typeof _rs.field != "undefined") window.editorData = _rs.field(0);
             else window.editorData = "";
             jmaki.log("Loaded Editor Data: " + editorData);
         } else {
             window.editorData = "";
             jmaki.log("No data available");
         }
         jmaki.log('done');
     }
    });
});

This code is executed after the extensions has loaded and will do a database using a sql statement. The returned value is assigned to the global variable window.editorData which you can then assign to your widget. For a Editor you can assign a JavaScript variable as the value using a client side value binding which starts with an '@{' and contains the package and variable name and ends with an '}'. For this window.editorData the client side value binding is @{window.editorData}. With a JSP / JSF widget the tag in a JSP page would look like the following:

<a:widget name="dojo.editor" value="@{window.editorData}" />

As we can see it's pretty easy to integrate Google Gears in your jMaki application. There are many other areas to explore including easier JSON serialization using gears. This is starting to like JDO all over again but in this case "J" is for JavaScript. Rest assured we will try to make this easier in jMaki.

What would you like to do with Google Gears?