Skip to main content

Extending the jMaki Ajax framework with new components...

Posted by ludo on January 16, 2007 at 9:20 AM PST

Bonjour, comment Java?

What is the value of an Ajax components library if it cannot be extended either by you as a developer or external providers?
Well, so far the jMaki framework was bundling an impressive collection of various components (dojo, Yahoo, Google, Scriptaculous, Spry, DHTML, Flickr, jMaki own components), and now you can install Add ons component libraries like the new jMaki Charting library which is based on the dojo charting APIs. A jMaki component library is a simple ZIP file that has the following requirements:

  1. Archive must be valid jar/zip format.
  2. Root of archive must contain a "" file that defines jMaki.Library.Name which is used for the NetBeans palette name
  3. Archive must contain at least 1 component under the resources directory
  4. Components meta data is defined under /templates with the relative path to the component becoming the package/class name of the component, e.g. /templates/jmaki/charting/series becomes jmaki.charting.series.
  5. For a component named "series", the series folder must contain series.ejs and series.jsp which are the fragment of code used for the Drag And drop operation via the NetBeans palette.
  6. This folder must also contain that defines NAME_[package].series=... and HINT_[package].series=..., used again for the IDE palette.

That's it. So now, let's examine how you can add a set of jMaki components into your development environment. Start with downloading the jMaki charting library from

Select the jMaki Charting Widget v.4.1 zip file and store it locally on your disk:


Then, assuming you have the jMaki NetBeans plugin installed, you can use the Tools->Palette Manager->Add jMaki Component Library menu item and navigate to the location of the library zip file you just downloaded:


If the selected ZIP file is the correct one, you should now see a new Palette entry called "jMaki Charting", that contains 3 new components called Area, Bar Chart and Line Chart, as seen below:

Palette before Palette after: not the new entry called
jMaki Charting with 3 new components
chart3.png chart4.png

Now, if you drag and drop the Line Chart component on a JSP file or a Phobos EJS view file, you should get this when running your application:

This is for example the fragment of code for a Phobos EJS view file:

    <%  library.jmaki.insert(
        component : "jmaki.charting.area"
        args : {
                xAxis : {
                    title : 'Months',
                    labels : ['January', 'February', 'March', 'April', 'May',
                              'June','July', 'August', 'September', 'October',
                              'November', 'December']
                yAxis : {
                    title : 'Temperature',
                    tickCount : 3
        value : {data : [
                   {color: 'red',    values : [10, 25, 25,  5, 35,  5, 15,  5, 10, 15, 25, 30] },
                   {color: 'blue',   values : [15, 35, 15, 40, 40, 15, 20, 10, 15, 20, 30, 35 ] },
                   {color: 'pink',   values : [20, 40, 30, 35, 45, 20, 25, 15, 20, 25, 30, 40] },
                   {color: 'gray',   values : [25, 45, 25, 45, 50, 25, 35, 25, 25, 20, 35, 45] }

As you can see, the args and value objects are really JSON objects and can therefore be calculated via Phobos JavaScript controller on the server side...

Following this jMaki Charting component library example, I hope you'll find some new ways to extend your jMaki Ajax environment. If you do, please share the new components with the community.