Skip to main content

jMaki app using Google Gears

Posted by carlavmott on September 28, 2007 at 4:50 PM PDT

I created a simple app as a demo that uses Google Gears for local storage and also sends data to the server upon user request. I showed this at AjaxWorld where there was alot of interest so I decided I would blog about it.

Building on the Get Widget Data Sample that is part of the jMaki bundle, I added Google Gears so that it will be called when the save icon of the editor is clicked. The data in the editor is saved locally each time the editor save button is clicked. I kept the functionality of sending the data back to the server by simply adding a 'submit' button which does a jmaki.doAjax call sending the contents of the editor to a server side component.

If you are using NetBeans you can install the Google Gears Extension comp lib and add the appropriate code by dragging from the palette. To install a comp lib go to tools -> palette -> add jMaki library. If you are not using NetBeans then follow the instructions on Greg's blog on adding google gears extension to you app.

In order to save the editor contents to the local storage add the following code (in addition to the extension handler) to the onSave handler in the glue.js file.

// map topics ending with  /onSave to the handler

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);
         }
        });
       }
    });
});

This handler gets called each time an onSave event occurs and saves data locally. A real app may use a specific topic for the editor in case other widgets in the application fire an onSave event. In this example I clear the local store each time I save.

I add a button to the the page which will push the contents of the editor to a server side components which can then save the data in a data base there. I've included the code snippet for the button and the editor widgets here:

 <div id="main">
                <div id="leftSidebar">
                    <a:widget name="yahoo.button" value="{label : 'Submit contents', action : {topic : '/submitData'}}"/>
                 
                   
                </div> <!-- leftSidebar -->

                <div id="content" style="height:400px">
                   
                    <a:widget name="dojo.editor" id="myeditor" value="@{window.editorData}" />

                </div> <!-- content -->      
            </div> <!-- main -->

In PHP the code looks like:

 <div id="main">
                <div id="leftSidebar">
                    <?php
  addWidget( array ( "name" =>"yahoo.button" value=>"{label : 'Submit contents', action : {topic : '/submitData'}}" ));
?>
                 
                   
                </div> <!-- leftSidebar -->

                <div id="content" style="height:400px">
                   
                    <?php
  addWidget( array ( "name" =>"dojo.editor" id=> "myeditor" value=>"Edit this value." ));
?>

                </div> <!-- content -->      
            </div> <!-- main -->

Notice that I use the id attribute on the editor widget tag. I did this because it is easy to get the widget later in the handler. I also set the topic in the button widget tag so I can easily set the handler.

I now need to add a handler for the button which sends data back to the server. The complete code for glue.js is listed below:

jmaki.namespace("jmaki.listeners");

jmaki.subscribe("/submitData", "jmaki.listeners.editorListener");

jmaki.listeners.editorListener = function(args) {
    var editorId = jmaki.getWidget('myeditor');
    var contentValue = editorId.getValue();
    if ( typeof contentValue != 'undefined' ) {
        jmaki.log("Editor content=  " + contentValue);
        // send data back to server
         jmaki.doAjax({method: "POST",
                               url: "Service.jsp",
                               content: {message: contentValue },
                               callback: function(_req) {
                                   // handle any errors
                               }
                           });
    }
};

// map topics ending with  /onSave to the handler

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);
         }
        });
       }
    });
});

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');
     }
    });
   
});

The code above shows how I used the settings in the tag to access the editor widget and also send data to the server. When the 'Submit contents' button is clicked the function jmaki.listeners.editorListener is called. That function looks up the editor widget using the id that we set on the widget tag. It then calls a function in the wrapper that returns the contents of the editor. The jmaki.doAjax call send the data back to a server component called Service.jsp.

That's it. I have created a war file of the demo app and posted here so you can see working app.

Related Topics >>