Arun Gupta, Miles to go ...

Arun Gupta is a technology enthusiast, a passionate runner, and a community guy who works for Sun Microsystems.

« Previous day (Dec 11, 2007) | Main | Next day (Dec 13, 2007) »

Wednesday December 12, 2007

TOTD #20: How to create a new jMaki widget ?

This TOTD explains how to create a new jMaki widget and make it available in the NetBeans palette.

In order to create a jMaki widget, it's important to understand the jMaki Widget Model.

Basically, "component.htm", "component.js" and an optional "component.css" together make a jMaki widget.

Here are the files for a Hello World widget that takes an argument, concatenates it with the string "Hello" and displays the result on the page.

component.htm

<div id="${uuid}" class="hello"></div>

component.js

jmaki.namespace("jmaki.widgets.hello");

		

		jmaki.widgets.hello.Widget = function(wargs) {

  var hello = document.getElementById(wargs.uuid);

  hello.innerHTML = "Hello " + wargs.args.name;

		}

component.css

.hello {

  font-size: 22px;color: red;

		}

The following files are required if you like to package your component as a reusable widget library in the NetBeans IDE:

hello.jsp

<a:widget name="hello" args="{name: 'Duke'}" 
		/>

Bundle.properties (top-level)

jMaki.Library.Name=jMaki Hello Widget

Bundle.properties (templates)

NAME_templates.hello=Hello

		HINT_templates.hello=<html>Hello</html>

widget.json

{

  'name': 'Hello',

  'type': 'custom',

  'version': '1.0',

  'jMakiVersion': '1.0'

}

Package these files together in the following directory structure (choose any zip file name):

Bundle.properties

resources

  hello

    component.htm

    component.js

    component.css

    widget.json (optional)

templates

   hello

     hello.jsp

     Bundle.properties

And then you zip up these files together, that's it! Now this zip file can be added to the jMaki palette in the NetBeans IDE as shown here. Really simple!

After the widget is added to NetBeans palette, it looks like as shown below:

Now, just like any other jMaki widget, you can drag-and-drop "Hello" from the jMaki palette in your JSP page and the following code fragment is generated:

<a:widget name="hello" args="{name: 'Duke'}" />

After the application is deployed, the page is rendered in the browser as shown below:

Couple of points ...

Templates for other languages such as Ruby or PHP can be added in the templates directory. This enables drag-and-drop of your widget in those languages as well.
It's important to maintain the case sensitivity of the property names in Bundle.properties otherwise they will not be recognized.

Please leave suggestions on other TOTD that you'd like to see. A complete archive is available here.

Technorati: totd jmaki web2.0 widgets ajax netbeans

Posted by Arun Gupta in web2.0 | Comments[12]