X

Geertjan's Blog

  • May 13, 2006

Exploring jMaki

Geertjan Wielenga
Product Manager
Forget the hype. Try it out for yourself—and that's what I did. One of the samples you'll find in the sources on the jMaki Project Homepage is called "scriptaculous". It provides two subsamples, one is an AJAX auto completer and the other is an AJAX in place editor. Both make use of JavaScript files provided by script.aculo.us. For the sake of simplicity for purposes of this blog entry, I removed the auto completer. On the jMaki site, the scriptaculous JavaScript files are available with the same sources that provide the rest of the sample (although the scriptaculous JavaScript files are found in the lib folder). The in place editor JavaScript files provided by scriptaculous form the basis of the sample. jMaki component developers wrap the JavaScript files into a component. So, before you can use the jMaki Java class library (com.sun.jmaki) together with the scriptaculous JavaScript files to implement the editor, you need a component that has "jMakized" the editor.

So, as pointed out in the very helpful Using jMaki Widgets, you'll find that, in addition to the aforementioned JavaScript files and jMaki library, there also needs to be a jMaki component that is referenced in your JSP file. Fortunately, in this case, the jMaki component has already been written for you. It is in a folder called "inplace", and consists of a JavaScript file that instantiates the editor, an HTML template file that gives initialization parameters to the JavaScript file, and a stylesheet. Each of these files consists of one line only. This is the JavaScript file (component.js):

new Ajax.InPlaceEditor(widget.uuid, widget.service, {ajaxOptions: {method: 'post'} });

And this is the HTML template file (component.htm):

<a id="${uuid}" href="#">NetBeans Day is Two Days Away!</a>

And, finally, this is the stylesheet (component.css):

.selected { background-color: #888; }

In addition, the jMaki sources provide you with a tag library descriptor, which defines a tag called ajax. You declare it in your JSP file, and then you can use it just like any other tag, as shown below:

<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %>
<html>


<h3>In Place Editor Test</h3>
<hr>
<a:ajax type="scriptaculous" name="inplace" service="inplaceService.jsp"/>
<hr>
</html>

jMaki uses the ajax tag to handle all jMaki components. The attributes are described right at the start of Using jMaki Widgets.

What also seems to be necessary in all cases, whether you need it or not, is a file called WEB-INF/types.properties, with the properties relevant to the component you're using. So, as you can see above in the JSP file, the type of the component is set to scriptaculous. And here is the content of type.properties; the key matching the type (I guess the value here sets the JavaScript files provided by scriptaculous that are necessary for the tag to display correctly):

scriptaculous=prototype.js,scriptaculous.js

I was able to deploy the result both on Glassfish and Tomcat, which I thought was pretty cool (if unsurprising).

So, as pointed out in the interview yesterday with Greg and Ludo, assuming the component that wraps the JavaScript is already defined, all you need to do is work with a JSP tag handler, referenced in your JSP pages. To give you a clear picture of what we're talking about, here's what you get when you deploy the application. First, you'll find that you'll be able to click on a piece of text in the browser:

Then the text will become editable (i.e., the label magically becomes a text field). Next, you'll type something in to change the text:

When you click OK, you'll very briefly see a "Saving..." message:

And then your text will have been changed:

So this is a simple implementation (the scriptaculous JavaScript library enables you to make far more complex editors than this, of course) of an in place editor. In summary, the JavaScript files were provided by scriptaculous, a jMaki component was created (by Greg Murray, I assume) that wraps the JavaScript files, and you as an end user only deal with the tag in your JSP files. (By the way, the term "component" here is sometimes also called "widget", so when you use the tag in the JSP file, you're referencing a "jMaki widget" or "jMaki component".)

And, if you want to try out this sample jMaki application yourself, here's a link to a module that will install the application in NetBeans IDE's New Project wizard (you'll find it in the Samples >
Web category):

org-netbeans-modules-scriptalousinplaceeditor.nbm

In the sample, you'll notice that I spelled "scriptaculous" incorrectly. Well, in my humble opinion, the people at http://script.aculo.us/ only have themselves to blame for that...

(By the way, if you've been trying to reach me in the last several hours, my work e-mail seems to not be working currently, or at least, I can't seem to be able to access the mail server.)

Join the discussion

Comments ( 3 )
  • Geertjan Saturday, May 13, 2006
    Hmm. Seems to be some problem with Tomcat. I'm sure it worked for me ok before, but now when you save the change, "${param["value"]}" is returned, which tells me something's going on with the service.
  • gururaj Tuesday, April 1, 2008

    Hi,

    Could you please provide a tutorial on using jmaki to build a dynamic tree? thanks in advance


  • yuwacun Monday, May 19, 2008

    hi,I also Need it.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.