Wednesday September 27, 2006
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:
- Install Web Server 7.0
- Start the Web Server 's admin server and the server instance
- Download the latest jmaki.war
- Deploy web application jmaki.war using Web
Server's admin GUI
or CLI
- 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
Posted by sabada
( Sep 27 2006, 07:32:19 PM PDT )
Permalink
