Running jMaki on Sun Java System Web Server 7.0

jMaki on Sun Java System Web Server 7.0

What is jMaki ?

jMaki allows you to quickly and easily add AJAX-enabled widgets to your web applications thereby enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component, or Phobos JavaScript page. In addition, it also facilitates wrapping any AJAX-enabled widget, including those from any of the popular toolkits, such as Dojo, Google, Yahoo, Scriptaculous and more.

Enabling jMaki support in Sun Java System Web Server 7.0

You can deploy jMaki on Web Server 7.0 with a few simple steps outlined below:
  1. Install Web Server 7.0
  2. Start the Web Server 's admin server and the server instance
  3. Download the latest jmaki.war
  4. Deploy web application jmaki.war using Web Server's admin GUI or CLI
  5. Open the browser to http://localhost:8080/jmaki/
You are all set to use jMaki with Web Server 7.0. Now, you can navigate to use widgets from many of the popular toolkits.

Creating a HelloWorld jMaki widget

It is also easy to create your own jMaki application using the steps outlined in https://ajax.dev.java.net/jmaki-app.html and deploy it on the Web Server 7.0.

In this example, I will create a simple "HelloWorld" jMaki widget. The "HelloWorld" jMaki widget is a input text field with AJAX behavior. Whatever you type will be redisplayed with "Hello, <what-you-type>".  This example is adapted from Excercise 4 of Sang Shin article.
1. To start, create a top level directory named jMakiHelloWorld
2. Under the jMakiHelloWorld directory, create a directory hierarchy resources/helloworld for template files component.htm, component.js and component.css
3. Add the code below to component.htm
<form>
 <input id="${uuid}_name" type="text" size="20" value="Enter your name"
            onkeyup="jmaki.attributes.get('${uuid}').submitData()">
</from>

<div id="${uuid}_hello" class="helloDiv"></div>
</div>
4. Create component.css file with the content below

.plain {
 color: black;
 height:25;
 font-size:18px;
 font-weight: bold;
 font-family: Arial;
 background: white;
}

.over {
 color: white;
 height:25;
 font-size:18px;
 font-weight: bold;
 font-family: Arial;
 background: blue;
 cursor: pointer;
}

.helloDiv {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: auto;
}
5. Create component.js with the following content
function HelloWorld() {
    // The jMaki framework must have created widget JavaScript object.
    var uuid = widget.uuid;
    var service = widget.service;
   
    function getXHR(url) {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
   
    // This function gets called when a user typed some characters
    // in the input text field whose id is set as ${uuid}_hello in
    // component.htm template file.
    this.submitData = function() {
        var target = document.getElementById(uuid + "_hello");
        var req = getXHR(service);
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                if (req.status == 200) {
                    target.innerHTML = req.responseText;
                }
            }
        };
        req.open("POST", service, true);
        var name= document.getElementById(uuid + "_name");
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        req.send("name=" + name.value + "&uuid=" + uuid);
    }
   
}

var hello = new HelloWorld();
jmaki.attributes.put(widget.uuid, hello);
6. Now, create a helloService.jsp with the code below
<ol>
<%
String name= request.getParameter("name");
out.println("Hello, " + name + "!");
%>
</ol>
7. Create an index.jsp with
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%--
The taglib directive below imports the jMaki library.
--%>
<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>

        <h1>This is using my own HelloWorld jMaki widget</h1>
        <a:ajax name="helloworld"   service="helloService.jsp"  />

    </body>
</html>

8. Create WEB-INF/lib directory under directory jMakiHelloWorld and place the ajax-wrapper.jar under it. ajax-wrapper.jar is available as part of  jmaki.war under WEB-INF/lib.
9. Copy jmaki.js at the top level under jMakiHelloWorld. jmaki.js is available in  jmaki.war under resources directory.
At the end, the directory structure under jMakiHelloWorld looks as follows:
resources
resources/helloworld
resources/helloworld/component.css
resources/helloworld/component.js
resources/helloworld/component.htm
jmaki.js
index.jsp
WEB-INF
WEB-INF/lib
WEB-INF/lib/ajax-wrapper-comp.jar
helloService.jsp

Now, you are all set, jar up the jMakiHelloWorld into jMakiHelloWorld.war and deploy to the Web Server 7.0 with uri /helloworld

Access the newly created widget using http://localhost:8080/helloworld


Comments:

Thanks

Posted by DINH SON on October 08, 2006 at 01:51 PM PDT #

ffff

Posted by guest on January 05, 2007 at 12:53 AM PST #

Hi Sabada

I think your blog entry is cool but I have problems on the line which reads...

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

Normally I put a .tld file into my WEB-INF dir and then reference the TLD directly eg.

<taglib>
<taglib-uri>/WEB-INF/struts-html.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-html.tld</taglib-location>
</taglib>

in the web.xml

and 

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

in the JSP.

But you don't mention any of that. When I put component.tld in my WEB-INF and web.xml then referenced it via

<%@ taglib uri="/WEB-INF/component.tld" prefix="a" %>

there were error messages about the TLDs grammar.
Perhaps my clients J2EE env is too old for ajax which would be a shame :-(

Posted by Michael Shaw on February 28, 2007 at 08:08 PM PST #

On personal opinion, I find this very helpful. Guys, I have also posted some more relevant info further on this, not sure if you find it useful: http://www.bidmaxhost.com/forum/

Posted by ocnsss on March 30, 2007 at 05:22 PM PDT #

This is really good getting started tutorial. I have installed jMaki Eclipse Plugin on Eclipse and have created a dynamic web project. But I too hitting the issue about TLD file.

Does anybody resolved it. Please help. Thanks in advance,

Posted by Phoenix2Life on May 02, 2008 at 02:51 AM PDT #

Please do not visit http://www.bidmaxhost.com/forum/. That is a spam junk link.

Atleast for God's sake, people, please donot spam something which is useful for development. I hope somebody on cyberspace police these trolls.

Posted by anonymous on May 02, 2008 at 02:53 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

sabada

Search

Categories
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