jMaki Revolver 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.