Skip navigation
1 2 3 Previous Next

gmurray71

39 posts
gmurray71

Ajax Waiter Blog

Posted by gmurray71 Oct 26, 2008

I came across a situation where I needed an Ajax style spinner but could not download any images. I extended concepts from the jMaki Revolver to make an image free spinner all in JavaScript.

  window.waiter.show({ speed: 1,
                       delay : 40,
                       targetId : 'body',
                       textColor : '#FFF',
                       background: 'green',
                       opacity : 85,
                       message : 'Please wait 2'});

Test on this page

For detailed documentation on all the properties and more examples see the Ajax Waiter.

If there are features or enhancements you would like to see let me know.

Sun has been providing GWT support with the GWT For Netbeans plugin for some time now. The plugin allows you to very easily create GWT applications that can run on Tomcat and Glassfish. The plugin allows you to easily integrate servlets and other Java EE components in an IDE environment.

With my Ajax dealings over the past few years I have been asked about jMaki and GWT integration. For some time I had thought that GWT was a competing technology but I have come to realize that while jMaki and GWT are truly cousins whose marriage is in this case a good thing.

When integrating jMaki with GWT jMaki provides a well defined model for interacting with JavaScript and GWT provides a model for interacting with Java. jMaki can open up the JavaScript universe to GWT in a well controlled manner.

As a start the jMaki team would like to introduce the GWT community to jMaki Charting. jMaki charting provides dynamic charting capabilities where charts can be manipulated on the client without round trips to the server.

Integrating jMaki charting with GWT has helped us develop a really good integration strategy for GWT and JavaScript for which we created an architecture document. The integration can be summarized by the graphic below.

http://jmaki.com/images/gwt-jmaki-component.jpg 

With the GWT jMaki integration we are exposing the charting functionality including Axes creation and updates, DataSets, and Markers through a set of Java APIs. See the JavaDoc APIs here. All the resources needed for the component are provided in a single jar file that you simply place in your classpath and include thejmaki.charting.Widgets inherits statement in your gwt.xml file. jMaki charting may be downloaded from the jMaki Charting homepage. It supports both Hosted or Web mode.

We have also created a sample application to show how to use and modify a chart. You can see the application live here.

Charting is just the beginning. We are now working on providing access to the jMaki widgets and would love to have the community get involved. Would you like to join us?

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?

gmurray71

jMaki 1.0 is Live Blog

Posted by gmurray71 Sep 25, 2007

Having experienced continuous development for over 2 years it is time to put a stake in the ground and call jMaki 1.0 ready for general use.

Included in the bundles:

  • The core jMaki framework.
  • Sample applications.
  • Ant task for creating applications and adding widgets and necessary dependencies to those applications.
  • All the scripts and widget libraries.

We provide bundles for both PHP and Java. The ant task for application creation allows you to create applications rapidly from the command line.

We also provide plugins for both Netbeans 5.x and 6.0 that will create jMaki applications with all the necessary resources in the correct places. Included support is:

  • The core jMaki Framework.
  • Templates to start out with.
  • Drag and drop widgets with templates.
  • Theming support.

How you experience jMaki is up to you. Find the bundles on the downloads page.

We have also started work on consolidating all the blogs, documents, and form posts on using jMaki into an online book. This is a work in progress and you can find the starting table of contents on our developer site.

I would like to thank everyone on the team and others not listed on the team page for their hard work in putting this release together. I like to encourage would encourage you to join the effort. jMaki is going places and we would love to have you along for the ride.

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?

gmurray71

Re-Namespacing Dojo Blog

Posted by gmurray71 Aug 10, 2007

The motivation behind re-namespacing Dojo for jMaki was simple. We want to have both Dojo 0.4.3 and Dojo .9 running in the same web application and we also want to give our users the ability to use jMaki many years in the future. So I undertook the task of re-namespacing Dojo by hand and quickly found out that it was a involved task. Reason being there are 27350 instances of the word Dojo spread across 1013 files in the standard Dojo 0.4.3 Ajax release.To make things easier I have created a configurable ant task that will do the work.

Why ant? We figure it's the easiest to integrate with a build process and it's pretty easy to do string replacements that can be configured. You can see the RenamespaceTask.java here. You can find a compiled version of the jar file here.

We have provided a simple ant file that will compile the task and run it which you can get here.

Before using this task I strongly recommend you backup your files as this task will overwrite your existing files.

Here are the arguments I give to the task to re-namespace dojo and all of the occurrences in all js, css, and html files. This is the the most thorough and best option as it will re-namespace all dojo files and the dojo styles.

<target name="ns" description="Namespace Dojo Task" depends="jar">
  <taskdef name="renamespace" classname="org.jmaki.ant.ReNamespaceTask"
                 classpath="dist/ns-dojo.jar"/>
  <renamespace 
       ns="gojo"
       tokens="dojo" renameFile="dojo.js" >
    <fileset dir="/Users/gmurray/Desktop/dojo-0.4.3-ajax" />
  </renamespace>
</target>   

You simple need to provide a one or more filesets to files containing references to dojo. This simply replaces all the strings. Containing dojo.

You can do more advanced token sets that will not replace the styles and target only the dojo instances like the following.

<target name="ns" description="Namespace Dojo Task" depends="jar">
  <taskdef name="renamespace" classname="org.jmaki.ant.ReNamespaceTask"
                 classpath="dist/ns-dojo.jar"/>
  <renamespace
             ns="gojo"
             tokens="dojo.,{dojo},dojo=,dojo =,dojo:,(dojo,dojo[,/dojo,|dojo,&quot;dojo&quot;"
             renameFile="dojo.js"
             extensions="js,json,html">
    <fileset dir="/Users/gmurray/Desktop/dojo-0.4.3-ajax" />
  </renamespace>
</target> 

You may notice the renameFile attribute. This option will rename the dojo.js file to the same name as the namepace.

You need to rename the dojo.js to the same name as the namespace. If you leave the task defaults this will be automatically done. If you do not rename the dojo.js the dojo package loader will not look in the correct place for the dojo resources (I'm not clear why this was done but if the file names are not the same dojo will look up two directories for dojo resources). The re-namespace won't work if you don't rename.

You will also need to re-namespace your code that uses Dojo. You can add multiple filesets so this can be done in one sweep.

When choosing a name to re-namespace to you need a valid JavaScript identifier so you can not include "." or "-" in the name. For jMaki we chose "dj4d3" which is a bit cryptic but it is short and will not conflict with a future version of dojo or another library.

The beauty of re-namespacing is that you can now use two versions of Dojo in the same application and in the same page without conflicts. Both versions will share the samedjConfig object which you may chose to also rename.

The ant task was tested with the Dojo .0.4.3 Ajax release. You can test it by simply downloading Dojo from the Dojo downloads page and run it against the release. Then check out the samples and tests.

Once again make sure to backup your work before running task. Let me know what what you think.

gmurray71

jMaki Actions Blog

Posted by gmurray71 Jul 29, 2007

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 theid property used by a given tab. Themessage 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:

https://ajax.dev.java.net/images/action.jpg 

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?

gmurray71

jMaki Revolver Widget Blog

Posted by gmurray71 Jun 24, 2007

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.

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 namedgoogle.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 namedextension.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 XMLHttpRequestobject 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.editorDatathe 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?

gmurray71

jMaki Extensions Blog

Posted by gmurray71 Jun 7, 2007

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 thejmaki.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 calledextension.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 Downloadspage.

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?

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?

gmurray71

jMaki at JavaOne 2007 Blog

Posted by gmurray71 Apr 26, 2007

The jMaki team has been hard at work re-working jMaki into the .9.x series which now supports all of the intended 1.0 features. At JavaOne we plan to offer a release candidate. If you don't want to wait you can try out the samples from the download page. We only plan on fixing issues so you can use what is there today.

JavaOne Sessions and BOFs

  • TS-9516 Using jMaki in a Visual Development Environment- Tuesday (05/08/2007) 4:40 PM - Location : Gateway 104< - Craig McClanhan, Ludovic Champenois (a.k.a Ludo), and myself will present on the basics on jMaki and how we integrate with Netbeans and the Visual Web Pack. This is the first day and should be a good talk.
  • BOF-6012 - JavaScript Best Practices for Java Developers- Tuesday (05/08/2007) 7:00 PM - Location : Esplanade 307-310 - Eugene Lazutkin, Sang Shin, and myself will talk about JavaScript best practices. While not jMaki specific this should be a really good face to face discussion on how to write good JavaScript.
  • BOF-6876- Ajax and Web 2.0 Performance Roundtable - Tuesday (05/08/2007) 8:00 PM - Location : Esplanade 307-310 - Akara Sucharitakul, Eugene Lazutkin, Binu John, and myself will roundtable style discussion (Q&A) about performance issues you may face with Web 2.0 applications.
  • TS-6375- jMaki : Web 2.0 App Building Made Easy - Wednesday (05/09/2007) 10:55 AM - Location : Esplanade 307-310 - Carla Mott (project co-lead) and myself will present on core jMaki. This talk will give the full picture of the project and the it's potential.
  • TS-6676 BluePrints for Mashups : Strategies , Tips and Code for Designing and Building - (05/10/2007) 10:55 AM - Location : Esplanade 307-310 - Sean Brydon, Mark Basler, and myself will talk about mashups. I plan to leverage much of my experience from creating the jMaki XmlHttpProxy in the context of mashups. If you are interested in mashups and want to look beyond the FUD of web 2.0 mashups this would be a great talk to attend.
  • TS-4948 Unleashing the Power of JAX-WS RI: Spring, Stateful Web Services, SMTP, and More - (05/10/2007) 2:50 PM - Kohsuke Kawaguchi and Jitendra Kotamraju will talk about building using JAX-WS and also show how it may be used to provide JSON data to jMaki widgets.
  • TS-6807 Real-World Comet-Based Applications" - Jean-Fran

Testing multiple browsers on different platforms in the past was time consuming and took a bit of work. Even with virtualization in use you had no way to do side by side comparisons of what different browsers would render. That was until Parallels introduced an upcoming feature called Coherence.

I installed Windows XP and Windows Vista and am running them in Coherence mode which allows me to do side by side comparisons of IE 6 in XP, IE 7 in Vista, Safari, and Firefox 2.0 all in one place.

whole_enchalada

Larger View

This is a developer and testers dream. Had I not done this myself I would swear the image was doctored. I have had no issues with the release candidates of Coherence and the only limiting factors are the amount of memory your have (I have 4 GB) and your screen size. This is a small price to pay for the benefits.

gmurray71

The Zen of jMaki Blog

Posted by gmurray71 Dec 12, 2006
https://ajax.dev.java.net/images/jmaki-seal.png 

This presentation was created and presented today at Javapolis. This document also contains many basic examples and some tidbits of history, mindset and motivation for jMaki. If you want to learn more about the details of jMaki from a single document or spread the word of jMaki to your peers feel free to use the slides.


Download "Java and Web 2.0 using jMaki"(PDF) (Open Document Format) (Power Point)

For further information on jMaki visit the jMaki Project Home.

jMaki helps you create JavaScript centric applications by providing all the pieces you need to tie together your applications. jMaki provides also provides a large set of sample JavaScript wrappers for common services and toolkits including Dojo, Flickr, Google, Mochikit, Spry, and Yahoo. Here is what jMaki provides:

  • JavaScript Runtime and Services - The and services provides the bare-bones light-weight services needed to initialize JavaScript widgets and communicate including a simple publish/subscribe mechanism.
  • jMaki Styles CSS layouts and templates to build that act as frameworks for your web pages.
  • jMaki Widget Model - A simple widget model based on HTML templates, CSS, and JavaScript. This can be used to wrap widgets from other toolkits or create your own re-usable widgets.
  • jMaki Glue - Listens for publish/subscribe events and calls shred JavaScript handlers based on the event. The code is not bound to any individual widget. jMaki Glue provides timers that can publish events or call JavaScript at a set interval.
  • Server Runtime The server runtime makes sure all CSS and JavaScript dependencies are rendered only once in a given page. The server runtime renders the templates and communicates data between the runtime and the JavaScript front end. We have server runtimes for Java(JSF/JSP),JavaScript, and PHP.
  • jMaki Injector - A JavaScript based client that allows you to bring in content from a separate URL (same domain only) and load any JavaScript/CSS from that page into the current page much like an iframe without the usability issues.

Find out more about jMaki on the jMaki home page or visit the downloads page. We recommend you use the jMaki Netbeans plugin whcih makes jMaki application development very simple. Using the plugin you can create new pages using the jMaki templates, drag and drop pre-configured jMaki widgets into a page, and configure the widgets using property editors.

Let us know what you think.