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

  1. 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.
  2. 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

Comments:

[Trackback] I presented on GlassFish and related technologies (Metro, JRuby-on-GlassFish and jMaki) at the Department of Computer Science, Delhi University last week. The slides are available here.The talk was very well attended with approximately 120 students an...

Posted by Arun Gupta's Blog on December 13, 2007 at 11:20 PM PST #

Arun, TOTD request (I've been trying to do this for a long time without success): Given a simple Mavenized Java project (say a program that just outputs "Hello World!"), how can I debug it (trace the running source code) within Netbeans 6.0? When the user opens a Mavenized project, NetBeans' built-in Mevenide (sic) plugin detects the pom.xml in the Maven project and loads it automatically as a Maven project within the NB. But it seems to provide no ability to debug the Java class within the IDE. (Normal Java projects debug without difficulty.)

Posted by Glen on December 15, 2007 at 10:13 AM PST #

"...does not define any jMaki components. Check to make sure that it is packaged correctly." --- protested by Netbeans 6.0 when I tried to add this example hello widget.

I followed your directory structure but not succeed. Frustrated.

What is the exact specification for the file widget.json and for the package structure?

Thanks

Posted by wc on December 30, 2007 at 02:01 PM PST #

[Trackback] Bookmarked your post over at Blog Bookmarker.com!

Posted by exact on December 30, 2007 at 08:58 PM PST #

wc, widget.json is optional. The directory structure had an additional directory at the top-level. Now I cleaned it up. Also added the structure for widget.json.

Please try and let me know.

Posted by Arun Gupta on January 01, 2008 at 10:10 AM PST #

Hi Arun,

I have started using jMaki in our project. We have started to develop jmaki widgets.

I tried to add our widget as part of eclipse plugin but was not successful.

How shall I proceed after creating zip file with appropriate content of widgets

Thanks
siva

Posted by siva on March 10, 2008 at 05:13 AM PDT #

Hi, Arun,
I used Netbeans build 2 project.
First project is RestfulWebservice (jmakiDB) and next is Jmaki Project I used Restful Webservice client Stubs. In glue.js why I can't use event ==> jmaki.subscribe("\*onSelect", function(args) {
jmaki.log("glue.js : onSelect request from: " + args.widgetId);
jmaki.doAjax({method: "POST",
url: "http://localhost:8080/jmakiDB/resources/employees/1/",
callback: function(req) {
//el

}
});
});

url:"http://localhost:8080/jmakiDB/resources/employees/1/" is restful. Please how i can do or idea for fix this problem.
Thank you very much.

Posted by Suphat on March 31, 2008 at 07:28 PM PDT #

Suphat, Look for a complete application using jMaki and RESTful endpoints at:

http://blogs.sun.com/arungupta/entry/screencast_web11_travel_map_another

Please post your jMaki related questions at jMaki forum:

http://forums.java.net/jive/forum.jspa?forumID=96

Posted by Arun Gupta on April 01, 2008 at 01:41 PM PDT #

yah

Posted by guest on April 04, 2008 at 08:14 PM PDT #

I have started using jMaki in our project. We have started to develop jmaki widgets.

I tried to add our widget as part of eclipse plugin but was not successful.

Posted by BATTERY on November 27, 2008 at 09:24 AM PST #

Have you tried the following screencast:

http://blogs.sun.com/arungupta/entry/jmaki_in_eclipse

?

Posted by Arun Gupta on November 27, 2008 at 10:59 PM PST #

hello,

i made a project in JSP on NETBEANS 6.0.
now i want to sell it...can u plz tell me how can i bindup those files into a setup that customer can use it on his computer directly on a web browser..

thank you

plz send me reply on jain_nikki10@yahoo.co.in

Posted by nikki on April 22, 2010 at 03:14 PM PDT #

where should i get this tool

Posted by umesh on January 12, 2011 at 07:55 PM PST #

jMaki is no longer actively worked upon, please use an alternative technology.

Posted by Arun Gupta on January 14, 2011 at 02:20 AM PST #

HI Arun,

I am using my jmaki in my application. I created one widget and populate one jsp from Ajax. IT is working fine.

Now I am trying to use one more widget
I created to folders under resources like contactEvent,contactEvent1 each one is having their own component.js,componen.css and component.htm.
It is only creating widget for contactEvent1.it is giving error for contactEvent like below

"Could not find widget constructor for: jmaki.widgets.contactEvent.Widget. "
Could you please tell me how to create more widgets.

Thanks in Advance.
Chinababu kona

I am trying to

Posted by chinababu on November 29, 2011 at 11:10 PM PST #

Post a Comment:
Comments are closed for this entry.
About

profile image
Arun Gupta is a technology enthusiast, a passionate runner, author, and a community guy who works for Oracle Corp.


Java EE 7 Samples

Stay Connected

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today