- Vroom Framework
Vroom Framework is
Java based web application developmentframework . It is written using J2EE 1.4 Specifications to make compatible with all J2EE 1.4 compliant Web/Application Servers.History
Vroom Framework is architectured and developed by Farrukh Ijaz s/o Mohammad Riaz in March 2008. It was originally designed with a concept of altering the
source code of web pages at run-time based on a configuration file (vroom-config.xml) to create binding between the HTML DOM events and server side Java methods.Vroom-2, which is the latest version of Vroom Framework, has been revamped to eliminate all the limitations of the first version.
Architecture
The framework consists of following elements:
- Core API: The API of the framework is packaged as vroom.jar which contains filter, controller, and other helper classes. The filter and controller is configured by defining entries in web.xml file of the web application.
- JavaScripts: There is one JavaScript file named vroom.js which is part of the framework but it's not packaged as vroom.jar file. It's placed in WEB-INF folder of the web application. The reason for keeping it outside the package is to provide the developer opportunity to improve the existing functions as well as to include additional functions if required.
- Configuration File: Once the framework is setup, a configuration file is maintained for the web application to instruct the framework, how to perform certain actions. The file is typically named as vroom-config.xml. It's placed in WEB-INF folder and specified in the config-file attribute of the filter definition in web.xml.
Installation and Configuration
The framework's latest distribution can be obtained from [http://www.sourceforge.net/projects/vroom/ Project's website] . To install the framework, following the instructions below:
- Download the latest Vroom-x.x.x.zip file and extract it to the location which is normally used for java libraries e.g. C:CLASSPATHVroom-x.x.x.
- Create a web application and copy the contents available in Vroom-x.x.xWEB-INF folder of the library to your web application's WEB-INF folder.
- Define the following entries in web.xml of the application:
VroomFilter net.openkoncept.vroom.VroomFilter config-file /WEB-INF/vroom-config.xml VroomFilter *.jsp VroomController net.openkoncept.vroom.VroomController upload-file-size-threshold 1024000 upload-file-temp-folder /WEB-INF/temp VroomController /vroom Note: You can change "config-file, upload-file-size-threshold, upload-file-temp-folder" attributes. However, "url-pattern" for "VroomController" have to be /vroom. Also remember, the "filter-mapping" is very important in terms of intercepting the requests. If you want to intercept "Html pages (*.html), Struts Actions (*.do) or JSF pages (*.faces)," you need to define separate "filter-mapping" for each of them, otherwise the framework won't be able to manage them.
How it works?
Vroom Framework can manage anything related to HTML DOM, including Document, Window and Navigator objects. The framework can be used independently or it can be integrated with other Model-2, MVC frameworks. In some aspects, Vroom Framework provides better control of your website e.g. You may want to include Google Analytics JavaScript to your webpages. To do that you probably use one of the following approaches:
- Open every webpage and paste the JavaScript code Or
- Use a separate html/jsp file for JavaScript code and modify every webpage to include the include statement Or
- Use tiles approach if you're using Struts Framework
Here is the detail of the above definition:- With webpage element, we instruct the framework to intercept all the webpages satisfying the uri /|(/| [a-z] | [A-Z] | [0-9] |-|_)*.(jsp|html) which is a Java specific regular expression. You can always define your own regular expression to include/exclude specific webpage.
- The script child tag instructs the framework to inject the script to all the webpages.
- The #{} is the format to access server variables. #{contextPath} is replaced with web application's context path.
- You don't need to modify your webpages to include the scripts
- The approach works for any type of HTML file whether it's *.jsp or *.html
- The rule will automatically include newly added pages or exclude removed pages
It's driven by "vroom-config.xml" file. When a web application is deployed to the application server, the server loads the "filter" and "controller" defined in the web.xml file. As part of "VroomFilter" loading, the vroom-config.xml file is loaded and becomes available to the framework as a configuration object. Every time when the filter intercepts a request, it consults the configuration object to provide rules (defined as webpage elements) for the request. If no rule is found, the filter ignores the request and processing continues as normal, otherwise, based on the rules, the filter injects the required scripts, stylesheets and meta-tags to the "final response" of the request and delivers the "modified response" to the client. User interacts with the webpage as usual and if in execution of any HTML DOM event, which was bound to a server side Java method as per definition in the configuration file, an AJAX request is initiated. The response of the AJAX request is always JSON string. In the vroom-config.xml file, it can be define what to do in response of the event. E.g. to update HTML content or to invoke any JavaScript code. This is explained in detail in the following section.
Structure of the Configuration File (vroom-config.xml)
The configuration file contain following elements and attributes:
Sample vroom-config.xml
#container {height:15em;} body { margin: 0; padding: 0; } Integration with Struts, JSF and YUI
The framework quite flexible when it's the matter of integration with other Model-2 or MVC frameworks.
YUI
Integration with YUI is fairly simple since YUI heavily depends upon the HTML ids and Vroom Framework also uses HTML ids or names to locate HTML elements. The framework can help you to develop YUI based applications by:- Providing you better control to manage and deploy YUI scripts and stylesheets and setup skins to one or more webpages by just defining the webpage element in the configuration file. So you don't need to populate your webpages with YUI head script and link tags.
- Eliminating the need to write Servlets to serve the AJAX calls.
- Easy integration with Server Side Java methods to access Data to build Data Sources for Data Tables and Auto Complete Widgets.
Struts
To integrate with Struts application, you need to do the following:- Add filter-mapping to handle *.do requests in the web.xml as follows:
VroomFilter net.openkoncept.vroom.VroomFilter config-file /WEB-INF/vroom-config.xml VroomFilter *.jsp VroomFilter *.do - In the vroom-config.xml, for webpage uri, you need change the regular expression to include .do URIs. and specifying the appropriate form-bean to the bean-class attribute. The var attribute must be the one used by Struts framework in struts-config.xml file. For example:
<!-- Other definitions --> - If you want to use the Vroom Framework navigation machanism, which is typically not required for Struts framework since all navigation is handled by action-mapping, you can define bean-class for form element to use the corresponding Struts Action. However, Vroom Framework can not invoke Struts execute methods, so you need to write a different method as per allowed method signatures.
JSF
To integrate with JSF application, you need to do the following:- Add filter-mapping to handle *.faces requests in the web.xml as follows:
VroomFilter net.openkoncept.vroom.VroomFilter config-file /WEB-INF/vroom-config.xml VroomFilter *.jsp VroomFilter *.faces - In the vroom-config.xml, for webpage uri, you need change the regular expression to include .faces URIs. and specifying the appropriate backing-bean to the bean-class attribute. The var attribute must be the one used by JSF framework in faces-config.xml file. For example:
<!-- Other definitions -->
Some Useful JavaScript functions
Following are the list of JavaScript functions which can be used with vroom-config.xml file, while writing script type calls:
* VroomUtils.triggerEvent(elemId, event); // This method can be used to trigger events of an element. E.g. VroomUtils.triggerEvent('btnSubmit', 'onclick');
* VroomUtils.populateSelect(elemId, jsonString); // This method is used to populated Select from JSON string, the JSON string must be array of net.openkoncept.vroom.bean.LabelValueBean object.
* VroomUtils.populateSelect(elemId, jsonString, labelVar, valueVar); // The method is similar to the above method except jsonString can be array of any Java Bean, the labelVar and valueVar are the java * bean properties.
* VroomUtils.generateRadioGroup(elemId, name, jsonString, cols, styleClass); // This method is used to generate a radio group. The cols is used to specify the no. of radio buttons in one line. The styleClass is CSS class to decorate the radio buttons. The jsonString must be array of net.openkoncept.vroom.bean.LabelValueBean.
* VroomUtils.generateRadioGroupEx(elemId, name, jsonString, labelVar, valueVar, cols, styleClass); // This method is similar to the above method except jsonString can be array of any Java Bean, the labelVar and valueVar are the java bean properties.
* VroomUtils.generateCheckBoxGroup(elemId, name, jsonString, cols, styleClass); // This method is used to generate check box group. The cols is used to specify the no. of radio buttons in one line. The styleClass is CSS class to decorate the radio buttons. The jsonString must be array of net.openkoncept.vroom.bean.LabelValueBean.
* VroomUtils.generateCheckBoxGroupEx(elemId, name, jsonString, labelVar, valueVar, cols, styleClass); // This method is similar to the above method except jsonString can be array of any Java Bean, the labelVar and valueVar are the java bean properties.
* VroomUtils.getElement(elemIdOrName); // This method finds the element by name. If the element is not found, it finds it by id.
* VroomUtils.getElementByTagName(tagName); // This method is used to return on the first element of the array of elements of the specified tag name.
* VroomUtils.getElementsByTagName(tagName); // This method returns array of elements of specified tag name.
* JSON.parse(jsonString); // This method takes a jsonString and returns the JSON object.Supported Event Types
Most commonly used event types are:
* onload, onunload (this is used at webpage, document or window level)
* onclick (normally used for images and buttons)
* onkeypress, onfocus, onblur (typically used for validation)
* onchange (this is used when a change in select control may affect other select controls, e.g. onchange of select control containing country names may require a refresh the select control of cities)Below is the complete list of supported events. Elements prefixed with ms- are Microsoft Browser specific where as prefixed with xul- are XUL events:
* onclick
* ondblclick
* onmousedown
* onmouseup
* onmouseover
* onmousemove
* onmouseout
* onkeypress
* onkeydown
* onkeyup
* onload
* onunload
* onabort
* onerror
* onresize
* onscroll
* onselect
* onchange
* onsubmit
* onreset
* onfocus
* onblur
* ondomfocusin
* ondomfocusout
* ondomactivate
* onsubtreemodified
* onnodeinserted
* onnoderemoved
* ondomnoderemovedfromdocument
* ondomnodeinsertedintodocument
* onattrmodified
* oncharacterdatamodified
* ms-oncut
* ms-oncopy
* ms-onpaste
* ms-onbeforecut
* ms-onbeforecopy
* ms-onbeforepaste
* ms-onafterupdate
* ms-onbeforeupdate
* ms-oncellchange
* ms-ondataavailable
* ms-ondatasetchanged
* ms-ondatasetcomplete
* ms-onerrorupdate
* ms-onrowenter
* ms-onrowexit
* ms-onrowsdeleted
* ms-onrowinserted
* ms-oncontextmenu
* ms-ondrag
* ms-ondragstart
* ms-ondragenter
* ms-ondragover
* ms-ondragleave
* ms-ondragend
* ms-ondrop
* ms-onselectstart
* ms-onhelp
* ms-onbeforeunload
* ms-onstop
* ms-onbeforeeditfocus
* ms-onstart
* ms-onfinish
* ms-onbounce
* ms-onbeforeprint
* ms-onafterprint
* ms-onpropertychange
* ms-onfilterchange
* ms-onreadystatechange
* ms-onlosecapture
* xul-DOMMouseScroll
* xul-ondragdrop
* xul-ondragenter
* xul-ondragexit
* xul-ondraggesture
* xul-ondragover
* xul-CheckboxStateChange
* xul-RadioStateChange
* xul-onclose
* xul-oncommand
* xul-oninput
* xul-DOMMenuItemActive
* xul-DOMMenuItemInactive
* xul-oncontextmenu
* xul-onoverflow
* xul-onoverflowchanged
* xul-onunderflow
* xul-onpopuphidden
* xul-onpopuphiding
* xul-onpopupshowing
* xul-onpopupshown
* xul-onbroadcast
* xul-oncommandupdateExternal links
- [http://www.sourceforge.net/projects/vroom/ Vroom Project at SourceForge]
Wikimedia Foundation. 2010.
