Farrukh Ijaz is from Pakistan and lives in Qatar. He works for a diplomatic company as a Senior System
Analyst. In his company they use NetBeans IDE for developing Java EE applications. Open Source development is Farrukh's hobby. Here he talks about his web framework, called "Vroom":

Below follows the interview, with a full tutorial starting on the 2nd page:

Firstly, Farrukh, can you tell us a bit about Java EE and NetBeans in your part of the world?

Jave EE
is not very famous in the Middle East because it's a myth over here that it is is for large enterprise applications only and that it's overkill for small
organizations.

Regarding NetBeans, I was told by some of my ex-collegues
that NetBeans is gaining popularity among Java EE developers in Saudi
Arabia because it is free, easy to use and the best IDE to develop
applications for Tomcat and GlassFish.

Now, you've created a new web framework called "Vroom". But there are so many web franeworks already. Why did you feel the need to create another one?

When I was little I
read a book entitled "Miss Know It All", a simple riddle dazzles the
lady who was Miss Know It All in the story. The riddle was something
like this: Which room is always empty no matter what you put into it?
And the answer was, "Room for Improvement". "Vroom for Improvement :-)"

In a nutshell, can you specify three reasons why I would use Vroom?

Vroom does not introduce any new custom tags or API. It's based on HTML and simple Java Beans so the learning curve is smooth.

Vroom provides central management of meta tags, javascripts, stylesheet
and contents. That helps us to keep our web pages neat and compact. In
addition to this, it provides a better way to bind HTML DOM events with
server side Java methods.

It
can be used independently, however. It does not claim to replace Struts
or JSF. It integrates well with these frameworks and adds value. And
even those who are used to Struts or JSF can easily benefit from the
additional features provided by Vroom.

In what ways do other frameworks not provide these features?

No Ajax knowledge is required, every event binding is behind the scenes an implicit Ajax request/response implementation.

Extremely simple to use because it's based on simple HTML and Java Beans.

A single configuration file to manage meta tags, stylesheets, scripts.

Coarse / Fine grained event binding. E.g. a whole webpage can be bound
with a single java bean or a every single HTML DOM Event can be bound
to 1 or more java methods available in same or different java beans.

Support to invoke javascript of content update as a response of a method call.

Chornological rule inheritence e.g. If a webpage uri is defined in more
than 1 webpage rules in vroom-config.xml, the rule that appears first
will apply first, all preceding rules apply as per their occurance.

To work with the framework, and to popularize it, you created a NetBeans plugin. Can you say something about how it was to create it?

Before starting the plugin development, I thought about the basic features that I wanted my plugin to provide which were:

Well the implementation was not so simple. I googled for code completion tips and found an article here. The article was good for building a basic understanding about how the code completion infrastructure works. But my objective was more complicated. The reason was that "vroom-config.xml" is an XML file and by default inherits code completion for XML tags. The problem occurred when I wanted to write JavaScript and HTML tags within CDATA sections.

I spent some time to figure out what can be the better approach and finally I decided to build my own mini editors for HTML and JavaScript. I wrote three different completion providers, VroomConfigCompletionProvider, VroomJSCompletionProvider and VroomHtmlCompletionProvider. I registered VroomConfigCompletionProvider with text/vroom-config+xml Mimetype, VroomJSCompletionProvider with text/javascript and VroomHtmlCompletionProvider with text/html in layer.xml.

The issue was I didn't want my code completion to get invoked in NetBean's JavaScript and HTML editors. To solve this problem I had to create two different mini editors so I could use my own editor panes (VroomJSEditorPane for javascript and VroomHtmlEditorPane for html). In VroomJSCompletionProvider, before creating the task, I placed a check that if the JTextComponent is an instance of VroomJSEditorPane then create and return the task else return null. I did something similar for VroomHtmlCompletionProvider.

The next important thing for me was to register the Vroom Framework under Web Frameworks. This was not so difficult thanks to the NetBeans API that I found how to use the Web and DDProvider API to register the framework under Web Frameworks and make entries in "web.xml" file respectively.

My good luck is I never got stuck for long because I never give up. For some features, I went to the online repository of NetBeans Source Code to locate specific implementations if it was not clear in the NetBeans API Javadoc.

It was really fun to explore the API and I enjoyed every single discovery I made to implement specific functionality. I have used almost all of the major APIs of NetBeans at this stage.

The resources I used to build the plugin include NetBeans API documentation, NetBeans source code and the NetBeans tutorial for code completion.

Last but not the least I used some common sense to use these resources effectively! :-)

Can you run us through a step-by-step quick start?

Firstly, I assume that you already have installed NetBeans plugin for Vroom Framework. If not then download it from Project Website, decompress the zip file and install the .nbm file using Downloaded Tab under Tools/Plugins menu of NetBeans 6.1 IDE.

As we go through the steps below, click the images to enlarge them as needed.

Step
3: The project will be setup to use the framework. To check that,
simply run the application and you should see the following in the browser:

Now that we have a very basic application, what do we do next?

Step 1: Create a new JSP page named "register.jsp". The page should look like as follows:

If
you notice, firstName and lastName are input tags of type "text" and
nationality is select tag. For gender there is no control but a simple
span with id "divGender". Don't worry this span will contain gender
values as radio buttons.

Step 2: Create a Java class named "RegisterBean" under "com.myco.bean" package and add the following code:

The
above Java class contains "firstName", "lastName", "nationality" and "gender"
properties. There is a method named "register", we'll bind this method
with the form in the configuration file.

Step 3: Create a JSP named "confirmation.jsp". The page contents should look like as follow:

Once the registration is successful, the user will be redirected to this page.

Step 4: Create a Java class named "LookupBean" under "com.myco.bean" package and place the following code:

The purpose of LookupBean is to provide list of values e.g. nationalities and genders.

Step 5: Open "vroom-config.xml" file by right-clicking on the file and select
Open. Delete all existing webpage definitions and defining one for
"register.jsp" as follows:

Use Ctrl+Space to initiate Code Completion. The plugin will automatically detect the web pages available in the web module.

Step 6: Select "RegsiterBean" as bean-class, "rb" as var and "session" as scope:

Step 7: Define the object element for webpage and select document for the name attribute:

Step 8: Define the event element for the object and select "onload" for type and "LookupBean" for the bean-class attribute:

Step 9: Define the call element for the event and select "script" for the type attribute:

You
should select "script" for a call type if you want to execute a script.
For updating the contents/properties of the webpage elements, you
should select "update".

Step 10: Place the cursor between
the opening and closing call tag ( <call type="script"> </call>
) and press Ctrl+F1 or Right+Click and select Edit to invoke the JavaScript Editor:

Step 11: Write the following code in the JavaScript Editor:

The "VroomUtils"
class provide some utility functions that are very helpful to
manipulate HTML DOM objects. populateSelect() takes two arguments,
select name and the json string. The json string must be an array or
list of a bean having "label" and "value" properties. For custom
properties, you may use populateSelectEx() which takes four arguments.
First two are the select name and json string, the third and fourth are
the label and value property name. E.g.

VroomUtils.populateSelect('nationality',
'#{nationalities}'); // assumes the json string is an array of beans
having label and value property names.

VroomUtils.populateSelectEx('nationality',
'#{nationalities}', 'name', 'id'); // where the bean contains name and
id as properties.

generateRadioGroup() takes four arguments, the
first argument is the div or span id which will contain the radio
buttons, the second argument is the name that is assigned to the
generated radio buttons. Third argument is the json string which I just
explained above and fourth is the no of columns. Since I've two values
for gender and I want them to appear on the same line, I've passed 2 as
argument value.

If
the bean-class has any property available with getter method, the code
completion will show "getProperties" in the completion items. It is
helpful if you want to access multiple properties by name in a single
call. If you select "getNationalities" as method then you won't be able
to get "genders" in the same call and instead of using
#{nationalities.array} you'll simply type #{array}.

Step 13: Define form element for webpage and select "frmRegister" as form id. This is defined in the register.jsp:

For method attribute, select "register" in the list. This will bind the form with "register" method of the RegisterBean class.

Step
15: Define navigation elements for form. For outcome "success" the url
should be "/confirmation.jsp" and for outcome "failure" it should be
the same page i.e. "/register.jsp" with forward attribute set to
"true". The forward attribute is very important to preserve the
information user entered previously.

Step
16: Define the elements which you want to post when the framework
invokes "register" method. The framework automatically populates the
fields of the bean-class. If the fields do not belong to the same bean
class which is used for form, you may define fine grained definition by
defining bean-class, var, scope at the element level. E.g. <element
id="firstName" bean-class="com.myco.bean.SomeOtherBean" var="sob"
scope="session"/>

How do we finish off this Vroom application?

Step
1: Compile and run the web application and type
"http://localhost:port/VroomDemo/register.jsp" url. Replace the port
with the port no. of your tomcat server. You'll see the following
webpage:

Note
that the divGender span tag contains "radio" buttons to select gender.
These are dynamically generated as a result of generateRadioGroup()
method of VroomUtils javascript class.

Step 2: Type the first
name, select nationality and gender and click submit. The server will
display the same webpage populating the fields you entered.

Observe the url in the browser. This is because the response has been forwarded.

Step 3: Enter the last name as well and submit the form, you'll get the "confirmation.jsp" webpage:

It also provides look and feel support?

Yes. Let's see below how we can
play with the look and feel of the web pages using call element:

Define stylesheet element for the webpage as follows:

Observe
that I've added another call element of type "update" for document
object, for which I've selected "frmRegister" as id of the element for
which I want to update the contents/properties, "className" as
attribute and "form" as value. This form is defined as .form in the
stylesheet element of the webpage.

Run the application and see the difference:

Can you compare & contrast Vroom with the following alternatives—JSF, Struts, GWT, Wicket.

JSF
has nice looking UI components and navigation flow mechanism but it is
an over kill because of it's architecture to serialize the complete
UIView tree to change a single property of a component.

Vroom on
the other hand provides similar navigation flow mechanism. It provides
rule based configuration to instruct the framework as to when and how
update the property of a component. If the changes are required to be
made at the client end, no server call is initiated, otherwise a small
Ajax request is established between the client and the server to
retrieve only the data that is required to complete the change.

Struts
is a good framework but it's configuration is tedious. The limitation
is that we can only bind a single ActionForm with a webpage per request.

Vroom,
in contrast with Struts, does not introduce any custom tag and relies on
simple HTML code. This helps web developer and graphics designer to
work without really worrying about how the web design will be used.
Vroom through configuration file can easily bind web pages with server
side java beans. In addition to this Vroom does not limit the webpage
binding to a single java bean. A single web page can access one or more
java beans and vice versa.

GWT appears to be another better approach to develop web applications. Perhaps
Vroom has adopted a similar concept, however its use is trivial.

I never got a chance to explore Wicket.

Why is it named Vroom?

Since
Vroom is the sound of a fast moving object and the framework provides a
fast solution to develop web based applications. It just clicked my
mind.

When and how did you start working on this framework?

In
implementation of a web project last year, our management wanted to
change the look and feel of the application and they did so twice. This
involved a lot of effort at my end to incorporate new web site designs
into my struts application. So I decided to develop a framework which
could solve this problem once and for all.

What about tooling? Such as, specific plugins for IDEs to support Vroom?

Well, my first target is to have a fully functional NetBeans plugin. I would certainly move forward to build plugins for Eclipse
and IntelliJ IDEA.What's the timeline for upcoming releases and what do you expect them to provide?

Since
I'm alone working on this project, it sometimes takes around three
months to publish a new release. I expect that the new versions will
include: