Ludovic Champenois's Blog: Extending the jMaki Ajax framework with new components...

Posted by ludo on January 16, 2007 at 09:20 AM | Comments (2)

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:

Archive must be valid jar/zip format.
Root of archive must contain a "Bundle.properties" file that defines jMaki.Library.Name which is used for the NetBeans palette name
Archive must contain at least 1 component under the resources directory
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.
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.
This folder must also contain Bundle.properties 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 https://jmaki-charting.dev.java.net/servlets/ProjectDocumentList:

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

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:

chart

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.

Ludo

Bookmark blog post:

del.icio.us

Digg

DZone

Furl

Comments

Comments are listed in date ascending order (oldest first) | Post Comment

Additionally, we will soon be easing the component library archive requirements (reasonable defaults for the Bundle entries, upgrade path, etc.)

Adding a jMaki component (once you've written one) should become as easy as defining the default insertion fragment for one or more of (JSP, EJS, PHP) and packing everything in an appropriately structured jar.

Posted by: peterwx on January 16, 2007 at 02:13 PM

hey there,don't have the time to draw charts then chk this out visifire

Posted by: clen23 on June 04, 2008 at 10:37 PM

Powered by
Movable Type 3.01D

java.net RSS Feeds