Hi ahmadux! Thanks for your comments. I agree with you that I need to spend more time in preparing a proper user guide for the framework. It takes time
for one to understand the philosophy of the framework but once things are clear, it's really smooth and in fact provides much flexibility in writing Ajax
-based web applications. I've seen people spending a lot of time in writing Servlets to provide JSON/XML data to their Ajax controls. Vroom eliminates the
need of Servlets and provides you an easy to use mechanism to provide service methods for Ajax components. No matter what you return in your methods, the
framework automatically convert it to JSON. E.g. If I prepare a class with a method greet() as follows:
public class GreetingBean {
public String greet(HttpServletRequest req) {
String name = req.getParameter("name");
if(name != null || name.trim().length() > 0) {
return "Hello " + name;
}
return "Hello User";
}
}
It's extremely simple to use this bean for service to your Ajax development e.g. I prepare a simple javascript file named "index-btnGreet-onclick.js" in a
folder named "scripts" and place the following code in it:
var url = VroomUtils.generateUrl('greet', 'GreetingBean'); // , 'gb', 'request');
// assuming i've a form on HTML page named 'frmTest' with an input field named 'name'
// following method will help me to build parameter list to send as part of the request.
var params = VroomUtils.buildParams('frmTest');
new Ajax.Request(url, {
parameters: params,
onSuccess: function(transport) {
var obj = transport.responseJSON;
alert(obj.value);
}
});
Below is the web page named "index.html" or "index.jsp" which contains the form and input field:
<html>
<head>
<title>Welcome</title>
</head>
<body>
<form name="frmTest" action="#">
Enter Your Name: <input name="name" type="text"/>
<input id="btnGreet" type="button" value="Greet Me"/>
</form>
</body>
</html>
To bind the btnGreet button to run script file "index-btnGreet-onclick.js" when it gets clicked, you need to define a definition in vroom-config.xml file
as follows:
<webpage uri="/|/index.(html|jsp)">
<element id="btnGreet">
<event type="onclick">
<call type="script" url="#{contextPath}/scripts/index-btnGreet-onclick.js">
</event>
</element>
</webpage>
That's it! Compile and run the program and you'll see things in action.
As far as jMaki components are concerned, the framework is flexible enough to work with any framework provided it uses "name" or "id" for the HTML
attributes. To make Vroom to work with jMaki, you need to modify the jmaki.js file. Locate the addWidget() method in jmaki.js file and modify the code as
follows:
this.addWidget = function(widget) {
// Start Addition... This will enable us to assign VroomUtils.generateUrl(...)
// which generates URL dynamically.
if(widget.service !== null) {
widget.service = eval(widget.service);
}
// End Addition
widgets.push(widget);
if (this.loaded){this.loadWidget(widget);}
};
Another change you may need to make is in the component.js of all of your jMaki components you're using in the web application. Because jMaki by default
treats the service response to be a value or array where as Vroom always return a map encapsulating the value or array. so wherever in the component.js
you're referring to an array you need to suffix that variable with .array e.g. rows --> rows.array or for single value you need to use .value.
For two reasons, I've not provided direct support for jMaki in my framework:
Fisrt, I can't modify my framework to rely on a specification that may change except J2EE or Java EE specifications
Second, I think jMaki is a good wrapper library but the side effects of using it is you add an additional over head because jMaki Yahoo components are
converted to Yahoo components at runtime, second the publish/subscribe machanism which seems to be quite interesting architecturally, over complicates if
I want to get benefit of additional features of Yahoo components. At the end it's all your choice and Vroom is quite flexible to accomodate your desires.