Greg Murray's Blog

jMaki Revolver Widget

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

1. Install the jMaki Netbeans plugin.
2. Download the jMaki Revolver widget library.
3. 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.
5. From the jMaki Extras palette drag the widget into the page.
6. 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

1. Install the jMaki Eclipse plugin.
2. Download the jMaki Revolver widget library.
3. 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..
4. 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.

1. Download the jMaki Revolver widget library.
2. Unzip th jmaki-revolver-x.x.zip file you downloaded and copy the contents of the jmaki/revolver directory to your web application.
3. 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>
   

4. 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>>
   

5. 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.

Comments

• Hi Greg, Neat widget :).
  I've developed a couple of widgets which I use together in a page. One widget is an empty one which is just supposed to provide a place holder so to speak for objects to be dropped after being dragged. If I use this widget alone, then it works fine. But if I use this with another widget which just draws a div with content (which is the object that can be dragged and dropped), then I get an error saying that "the widget cannot be drawn, please check the logs", when the place holder widget is the first thing that is drawn.
  The weird thing is that if the draggable widget is drawn before the placeholder widget, it goes through fine. Only when the placeholder widget is drawn before the draggable widget, I get an error.
  I'm using DOJO for drag and drop. Any insight on this would be very helpful.
  

  Posted by: karthikks on June 26, 2007 at 10:13 PM

• Hey Greg, great widget, could do with a target arg for the href .

  Posted by: hat27533 on June 27, 2007 at 09:08 AM

• karthikks,

  The error you are seeing usually gets caused by an error in the widget code. If you are using FireBug you more than likely will see the error, or you could look at the console. The only other issue that would cause that would be that the constructor namespace is off which I suspect is the issue.

  So two things you could do.

  1. Turn on the jMaki debug logs (set the property to jmaki.debug = true). You can do this in the glue.js of your application or set it manually in the jmaki.js.

  2. Could you send the code and I could look at it (if it's short maybe even here,or just email to gmurray71 at dev.java.net

  
  I'd also suggest looking at the widget developer document we have here:

  https://ajax.dev.java.net/widget-model.html

  We would be more than happy to have you work with us on the jMak widgets. If you are interested please join us at https://ajax.dev.java.net .

  -Greg
  

  Posted by: gmurray71 on June 28, 2007 at 01:33 AM

• hat27533,

  Great feedback, I will add a "target" right away and re-rev the download.
  

  Posted by: gmurray71 on June 28, 2007 at 01:34 AM

• Hey Greg, try substituting the img element in component.js for an iframe and the imgsrc for a url and you get some web pages revolving. This is such a cool widget and to be able to stack web pages like this is too.

  Posted by: hat27533 on August 07, 2007 at 08:05 AM

• I didn't even think about using a iframe... I'll have to give it a try ;-)

  Posted by: gmurray71 on August 11, 2007 at 07:27 PM

This work is licensed under a Creative Commons License.