The requirements for the component are as follows:
- This component will be used for an existing J2EE Web Application (which is based on a proprietary web framework).
- This should work even with Java version 1.4 (well, there are clients that do not want to upgrade.)
- The component should hide the Ajax details from the developers.
With these requirements in mind, I spent a couple of days experimenting with various possibilities and finally settled with the following design. The details of the actual implementation vary from the one presented in this blog. The design has been very much simplified here.
Components Chosen
Yahoo User Interface Library [YUI] - version 2.7.0
JSON-lib
Design
The idea behind this component is to have:
A sample of the javascript needed to Ajax-enable a page will look like this:
ClmAjax.AreaCodeAjaxServiceParameters = {
servletName: "<>/services/AreaCodeService",
inParameters: ['AreaCode'],
outParameters: ["AreaCodeMsg"],
inParametersEvent: "change"
};
ClmAjax.AreaCodeAjaxService = ClmAjax.ClmGenericService(ClmAjax.AreaCodeAjaxServiceParameters);
ClmAjax.AreaCodeAjaxService.addListenerForService();
Components Chosen
Yahoo User Interface Library [YUI] - version 2.7.0
JSON-lib
Design
The idea behind this component is to have:
- "In Parameter(s)" - List of DOM element(s) on the page, part of input to the Ajax call.
- "In Parameters Event" - An event on the In Parameter(s) that triggers the Ajax call.
- "Out Parameters" - List of DOM elements present on the page. The response from the Ajax call will contain values for all these elements.
- "Service Servlet" - The fully qualified name of the servlet which will be invoked as part of this Ajax call.
A sample of the javascript needed to Ajax-enable a page will look like this:
ClmAjax.AreaCodeAjaxServiceParameters = {
servletName: "<
inParameters: ['AreaCode'],
outParameters: ["AreaCodeMsg"],
inParametersEvent: "change"
};
ClmAjax.AreaCodeAjaxService = ClmAjax.ClmGenericService(ClmAjax.AreaCodeAjaxServiceParameters);
ClmAjax.AreaCodeAjaxService.addListenerForService();
In the above scenario, the developer wanted to listen change event on the field with Id AreaCode and invoke the AreaCodeService with an Ajax call and have the response targeted to the element with Id AreaCodeMsg.
The component takes care of serializing the data to JSON and invokes the service on the server with the JSON payload, the MVC framework on the serverside consumes the JSON input and serves the output back to the client in JSON format. The client side component deserializes the JSON response and manipulates the DOM based on the type of the out parameter(s).
The client side framework code attaches an event listener at the common container element (div), when the event bubbles up to this element, then the event handler takes care of making the Ajax call and rendering the response. There are hooks available, where the developer can inject logic that can be executed before and after Ajax call.
YUI did serve the purpose very well. I highly recommend it to anyone who would like to any serious front-end development. The component has served the developer needs very well and scales well too.
Next, I plan to port the same to YUI 3, which is an amazing library.
The component takes care of serializing the data to JSON and invokes the service on the server with the JSON payload, the MVC framework on the serverside consumes the JSON input and serves the output back to the client in JSON format. The client side component deserializes the JSON response and manipulates the DOM based on the type of the out parameter(s).
The client side framework code attaches an event listener at the common container element (div), when the event bubbles up to this element, then the event handler takes care of making the Ajax call and rendering the response. There are hooks available, where the developer can inject logic that can be executed before and after Ajax call.
YUI did serve the purpose very well. I highly recommend it to anyone who would like to any serious front-end development. The component has served the developer needs very well and scales well too.
Next, I plan to port the same to YUI 3, which is an amazing library.
More technical details on this component in a later post...
