Tip - Switch from http:// to https:// for secured webpages

If you enable SSL support for your web application, you may want them to be accessed only through https: protocol. 

I've two webpages, index.jsp and profile.jsp. index.jsp is non-secured where as profile.jsp is secured and is placed under /secured/ folder of the web application. In the web.xml file I've made the following entries to protect pages under /secured/ folder:

I define following simple rule in vroom-config.xml file to automatically switch the protocol from http: to https:

After the above to configurations, my application is set to handle http: to https: automatic switching. I deploy the application to GlassFish where SSL is already configured.

When I access / or /index.jsp which is non-secured resource, I get the following output:

I type url to access /secured/profile.jsp which is secured:

Once I hit submit button, I receive the following page which is served using https: protocol, observe the protocol and port underlined in red.

That's all you need to make it work.

Tip - Invalidating orphaned sessions

Web applications are normally configured to timeout sessions if they remain inactive for certain amount of time e.g. 30 minutes. This is normally setup in web.xml file by defining <session-config> element.

Sometimes a session becomes orphaned if the user does not logout properly and either closes the browser or opens a different url in the same window. To explicitly invalidate these sessions earlier rather than waiting for 30 minutes, you can use following technique.

Define a java class named "com.myco.bean.SessionBean" as follows:



In this class, we've defined one variable named "tracker" and two methods "onLoad" and "onUnload". onLoad method increments the tracker value by 1 and onUnload decrements the value by 1 and sleeps for 10 seconds. After 10 seconds, if the tracker value remains 0, the session is treated as orphaned and invalidated.

Define a rule in vroom-config.xml file as follows:



In the rule just note that we've bound the onload and onunload events of document object with SessionBean's onLoad and onUnload methods.

Let's say we've page1.jsp, page2.jsp and page3.jsp in our application. When the user opens page1.jsp, the value of tracker becomes 1 because onLoad method gets called. Now the user opens page2.jsp on a different tab, the value of tracker becomes 2 because tabs in browsers usually share a single session. If user loads page3.jsp in tab which was displaying page1.jsp, onUnload method gets called because page1.jsp is going to unload so the tracker value becomes 1 and the thread sleeps for 10 seconds. Meanwhile page3.jsp is loaded and tracker again becomes 2. When the thread wakes up the value of tracker remains 2 so session remains valid. Now user closes the browser and onUnload method gets called for both page2.jsp and page3.jsp. The tracker's value becomes 0. After 10 seconds when the thread wakes up, the value of tracker remains 0 so the session is invalidated.

This helps web application not to have orphaned sessions at all and to make the application more efficient and resource optimized.

Tip - One simple rule to setup Google Analytics

To setup your web application for Google Analytics requires you to paste Google Analytics Scripts to all your web pages before the </body> tag:



Now imagine if you've dozens of webpages and you're required to make changes to all of them, you need to place the above mentioned script to every webpage. For every new webpage you also need to do the same.

If you use Vroom Framework with your web application no matter what other web framework you're using (Struts, JSF, etc.), following simple rule defined in the vroom-config.xml file instructs Vroom Framework to setup Google Analytics to all your webpages at runtime:



Now the above approach does not require any changes to your webpages. It will automatically take care of existing and all new webpages you'll design for your web application.

Tutorial 1 - Using Vroom Plugin for NetBeans 6.1

Finally the plugin is ready and has been published to both SourceForge.net and NetBeans Plugin Portal. In this post I'm going to demonstrate the use of the plugin to build a simple web application.

Prerequisite: 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.

Step 1 - Create a new web project named "VroomDemo"




Step 2 - In the frameworks panel, Check Vroom Framework and click Finish.



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



Step 4 - 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 5 - 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 form in the configuration file.

Step 6 - 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 7 - 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 8 - 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 9 - Select "RegsiterBean" as bean-class, "rb" as var and "session" as scope.





Step 10 - Define object element for webpage and select document for the name attribute.



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





Step 12 - Define call element for event and select "script" for 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 13: Place the cursor between opening and closing call tag ( <call type="script"> </call> ) and press Ctrl+F1 or Right+Click and select Edit to invoke JavaScript editor:



Step 14: Write the following code in the JavaScript editor:



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.

For details of the functions you may look into the Vroom-2.1.4.pdf document available as download or the Vroom Framework article avaliable at wikipedia.org.

Step 15 - Update the event element defined for document object and add var, scope and method attributes as follows:



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 16 - Define form element for webpage and select "frmRegister" as form id. This is defined in the register.jsp:



Step 17 - Complete the form element by defining bean-class, var, scope and method attributes:



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

Step 18 - 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 19 - 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"/>



Step 20 - 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 21 - Type 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 22 - Enter the last name as well and submit the form, you'll get confirmation.jsp webpage:



That's all about the web application development. Let's see below how we can play with the look and feel of the web pages using call element:

Define stylesheet element for webpage as follows:



Observer 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:


I'll soon upload a more complex examples involving EJBs, Web Services and Integration with Struts Framework.

Thanks for spending time to read the post. I believe this post has given you the clear idea about what is Vroom Framework and how you can utilize it.

Please don't forget to post your views about the framework.