Greg Murray's Blog: June 2007 Archive

A few months ago I created the revolver as a weekend project to provide an alternative way of providing top level navigation on your web size. I thought I would share this with everyone as a jMaki widget.

How to use it with jMaki

In Netbeans

Install the jMaki Netbeans plugin.
Download the jMaki Revolver widget library.
In Netbeans select Tools->Palette->Add jMaki Library from the menu and choose the jmaki-revolver-x.x.zip file you downloaded. A new palette named "jMaki Extras" will appear.
From the jMaki Extras palette drag the widget into the page.
Deploy the application.

In the page you will see the following:

<a:widget name="jmaki.revolver"
            value="[
                   {title : 'Amsterdam',
                              imgSrc : 'http://farm1.static.flickr.com/67/227194339_551e710acb_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594254916360/'
                              },
                   {title : 'Paris',
                              imgSrc : 'http://farm1.static.flickr.com/129/319228860_23770c66d3_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594414671044/'
                              },
                   {title : 'Seoul',
                              imgSrc : 'http://farm1.static.flickr.com/106/294268722_662da2ef5a_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594370026444/'
                              }
                   ]"/>

Use the jMaki customizer (context click->jMaki) to customize the revolver or modify the /resources/jmaki/revolver/component.css.

For Eclipse or Stand Alone Applications

Install the jMaki Eclipse plugin.
Download the jMaki Revolver widget library.
Unzip th jmaki-revolver-x.x.zip file you downloaded and copy the contents of the resources of zip file into the resources directory of your web application..
Add the widget to your page.

<a:widget name="jmaki.revolver"
            value="[
                   {title : 'Amsterdam',
                              imgSrc : 'http://farm1.static.flickr.com/67/227194339_551e710acb_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594254916360/'
                              },
                   {title : 'Paris',
                              imgSrc : 'http://farm1.static.flickr.com/129/319228860_23770c66d3_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594414671044/'
                              },
                   {title : 'Seoul',
                              imgSrc : 'http://farm1.static.flickr.com/106/294268722_662da2ef5a_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594370026444/'
                              }
                   ]"/>

Find out more about the customizable properties that may be passed in as the args attribute from the docs/index.html file inside the jMaki Revolver widget library.

Non jMaki Usage

You will need to provide the template text, CSS, and JavaScript.

Download the jMaki Revolver widget library.
Unzip th jmaki-revolver-x.x.zip file you downloaded and copy the contents of the jmaki/revolver directory to your web application.

Add links to the script and css.

<script type="text/javascript" src="component.js"></script>
<link rel="stylesheet" type="text/css" href="component.css"></link>

Add the template where you want the revolver to appear.

<!-- Revolver Template --!>
<div id="jmaki-revolver" class="revolver" >
 <div id="jmaki-revolver-content-pane" class="revolverContent"></div>
</div>
<div id="jmaki-revolver-title-pane" class="revolverTitle"></div>>

Add the JavaScript initialization code.

<script>
window.onload = function() {
    var wargs = {uuid : 'jmaki-revolver'};
    wargs.value = [
                   {title : 'Amsterdam',
                              imgSrc : 'http://farm1.static.flickr.com/67/227194339_551e710acb_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594254916360/'
                              },
                   {title : 'Paris',
                              imgSrc : 'http://farm1.static.flickr.com/129/319228860_23770c66d3_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594414671044/'
                              },
                   {title : 'Seoul',
                              imgSrc : 'http://farm1.static.flickr.com/106/294268722_662da2ef5a_m.jpg',
                              href : 'http://www.flickr.com/photos/44399047@N00/sets/72157594370026444/'
                              }
                   ];
   var revolver = new jmaki.widgets.jmaki.revolver.Widget(wargs);
}
</script>

Find out more about the customizable properties from the docs/index.html file inside the jMaki Revolver widget library.

This example shows the benefits of using a framework like jMaki to reduce the need of the steps you see with the non-jMaki usage.

Enjoy the widget. If you have any requests, comments or issues, please feel free to ask them here.

jMaki Extension for Google Gears

Posted by gmurray71 on June 11, 2007 at 04:33 PM | Permalink | Comments (0)

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?

jMaki Extensions

Posted by gmurray71 on June 07, 2007 at 03:37 PM | Permalink | Comments (3)

Just when we thought it was safe to call jMaki feature complete we got a lot of feedback for various features that could all be handled by a single extension feature.

What are extensions in jMaki?

Extensions are behavior / functionality that are shared across widgets. Extensions are loaded after the jmaki.js and before glue (your application logic). Examples may include enhanced debugging support, sound, or controllers that are specific to an individual application.

What does an extension look like?

jmaki.namespace("jmaki.extensions.jmaki.ext.bar");

jmaki.extensions.jmaki.ext.bar.Extension = function(args) {
  jmaki.debug = true;
  jmaki.log("jMaki bar Extension intialized");
  jmaki.log("jMaki bar : extensionDir=" + args.extensionDir);
 }

Extensions are namespaced JavaScript objects that are mapped in the config.json file like the following:

{
  'config': {
    'version': '.9.3',
    'extensions' : [
          'jmaki.ext.foo' 
         ]
    }    
}

Extensions are like widgets in that the application will look under /resources/jmaki/ext/bar for a file called extension.js. The contents are like the file above. The extensions will be located in the resources directory and located using the extension name. The extension 'jmaki.ext.foo' would be located in the following directory:

resources
    |
    +jmaki
       |
       +ext
          |
          +foo
             |
             +extension.js

Extensions can also be loaded on a per URL basis or based on a wildcard like you may see in the code below:

{
  'config': {
    'version': '.9.3',
    'extensions' : [
          { url : '/basicArgs.jsp',  name : 'jmaki.ext.foo' },
          { url : '*.jsp', name : 'jmaki.ext.bar'},
          { url : '/relativedir/*', name : 'jmaki.ext.foo', args : { 'topic' : 'footopic'}}
         ]
    }    
}

Notice the url property can be a URL or contain a '*'. The mappings can also provide an args property containing default data that is accessible in the extension (extension.js).

We also plan on adding a page level tag and or function for adding functions in the next release. It is our hope to keep the core of jMaki small and nimble. At the same time we want to future proof jMaki.Extensions are available in the PHP, Phobos, and Java versions of jMaki and may be found at the jMaki Downloads page.

Here are some extensions we are thinking about:

Back/Forward button tracking
Sound
Bookmarking
Google Gears Integration
Cross Widget Drag and Drop
JavaScript controllers

What kind of extensions would you like to see for jMaki?

Creating and Using API Keys with Java Based Ajax Services

Posted by gmurray71 on June 04, 2007 at 01:21 PM | Permalink | Comments (6)

In Restricting Access to your Ajax Services we discussed the options that you may use to protect your services which included using an API key. Creating and Using API Keys for Java Based Ajax Services provides both the client and server code for using API keys on your Java based services. Included in the document are a discussion on the motivations and limitations of using API keys with servlets using the built in security APIs of Java.

Do you use API keys with your services? If so what techniques are you using?

Powered by
Movable Type 3.01D

java.net RSS Feeds