Kreativity Personified

Moving to a New Home

noreply@blogger.com (Anonymous) — Fri, 07 Aug 2015 19:27:00 +0000

This blog is moving to new Home. Yay !!

Finally bidding goodbye to Blogger & moving to a more managed Wordpress blog after a good long 7 years & many learnings, though not all transformed into blog entries !!

Revisiting old memories, my journey as a Blogger started with being a part of Sun Campus Ambassador program and I definitely plan to continue and keep blogging about all the new technologies that I get a chance to work with.

So please follow me on the new blog. Also check out the home page I designed & created for myself. Looks cool, right ? ;)

See you there,
Agraj

Authenticating Node.js Applications with Passport

noreply@blogger.com (Anonymous) — Tue, 12 Aug 2014 07:37:00 +0000

Check out my recent post on authenticating Node.js applications with Passport on Tuts+ here. It assumes a basic understanding of Node.js and Mongo but we start by building an Express application from scratch and add new routes, views & authenticate them via Passport.

Web Components 101 : Shadow DOM

noreply@blogger.com (Anonymous) — Sun, 16 Mar 2014 09:15:00 +0000

Unless you've been living under a rock, you must have heard about the latest buzzword in the world of JavaScript - Encapsulation. Encapsulation or Information-hiding is one of the main pillars of object-oriented programming languages which is used to restrict access to some of the object's components. But how does that apply to a language like JavaScript - To find out check out this article I recently authored about Shadow DOM, the underlying technology behind Web components.

Synchronization in Java

noreply@blogger.com (Anonymous) — Mon, 28 Oct 2013 06:26:00 +0000

Threads are an integral part of the Java language and have evolved largely introducing new ways to synchronize/lock your data but the basics of Atomicity & Visibility remains same, which are essential to understand and write robust multi-threaded applications. I recently authored a post explaining the basics of Synchronization and introducing the various new ways to lock your data. Let me know in the comments if there is anything in that post that does not make sense.

OAuth2.0 for Dummies

noreply@blogger.com (Anonymous) — Wed, 28 Aug 2013 09:14:00 +0000

Check out my post on OAuth2.0 - the famous access delegation mechanism employed by many big names such as Google, Facebook, Salesforce etc. that eliminates the needs of sharing passwords between applications to exchange data. The post uses Google's OAuth Playground to detail out the communication (authentication and authorization) that occurs between the client and the server when the client is trying to authenticate on behalf of resource owner. It also draws a basic comparison with the earlier version of OAuth - 1.0 and presents a perspective on how things turned ugly when the lead author of the spec resigned !!

HTML5 : Web Workers

noreply@blogger.com (Anonymous) — Tue, 19 Mar 2013 09:38:00 +0000

There isn't much need to emphasize that HTML5 brings with itself, a new set of Javascript armor for the front-end developer. One of the interesting additions that has the potential to change how complex operations in Javascript are performed, is Web Workers. It provides multi-threaded capabilities in a language which was inherently single-threaded otherwise. Check out my detailed writeup on Getting Started with Web Workers here.

Getting Started with HTML5

noreply@blogger.com (Anonymous) — Sun, 06 May 2012 18:05:00 +0000

Do you want your existing website to be HTML5 – compliant ?
All you want to know if you are working on a new project that should follow HTML5 best practices ?
This post tries to answer some of these questions and attempts to try and get started with HTML5 in a flash, using two of the most popular bootstrap frameworks which help you to get started with a robust codebase. Why use it ? Simple, these frameworks contains best practices around front-end development using HTML/JSS/CSS and kick starts you to concentrate on content, rather than developing a template for your site.
HTML5 Boilerplate – H5BP , already at 3.0
Includes

Cross-browser compatible using Polyfills/Fallbacks.
HTML5 Feature Detection using Modernizr, YepNode
CSS3 Media Queries
Mobile browser optimizations
Download complete, stripped & customized versions
CDN hosted jQuery with local failback ( shown below )

As you can see, first we try to load jQuery using Google CDN. In the next line, we check the existence using window.jQuery, which will evaluate to true if the library has been loaded successfully, else we load it statically.

Also contains some server site configurations like .htaccess file for caching, cross-domain XHR, gzipping, 404 error pages, robots.txt etc.
Contains ANT build scripts to integrate easily with your project build system

Paul Irish on HTML5 Boilerplate

Twitter Bootstrap – Just released 2.0
Includes

Responsive 12-grid column
Custom jQuery plugins for Carousel, Popovers, Accordion, Autocomplete, modals etc.
Cross-browser compatible and also includes media queries for smartphones and tablets too
Includes many components like Button groups, Button Dropdowns, Navigation components, alerts and progress bars etc
Contains extensive out of the box styling for your HTML markup, for elements like Forms, Tables etc. Building a bordered, shaded, alternate colored table was never so easy.
The entire framework is built on LESS. The codebase contains several .less files (containing different functionalities) which are then compiled into CSS.
Provides several styling as LESS mixings which can be found in mixings.less which you can easily use in your code, or extend them as well.

Comparsion & Conclusion
Both are superb HTML5 bootstrap frameworks, under continuous development which follow best practices developed over the years to build a fast, secure and future-proof site. But in my opinion, H5BP is something that even designers can play with using as a template, they can simply open their favourite design tool and add content. While using Twitter Bootstrap is more developer oriented and requires you to invest some time in understanding the various classes and functionalities it offers. But then, that’s the case with every good thing around you.

jQuery Custom Effects

noreply@blogger.com (Anonymous) — Thu, 29 Mar 2012 11:25:00 +0000

Although jQuery provides us with a few basic effects like slideDown/Up, fadeIn/Out etc. and a pretty powerful animate function to create animation/effects on any numeric CSS property, a lot of creative people have written some amazing effects/components that will take your breath away. While we do not plan to reinvent the wheel here but down the road, you may also need to create your own effect and would like to access it like

Surprisingly, being able to do so is not as difficult as it might seem at first, and can be achieved by adding a new function property to jQuery.fn object as below:

The above function simply extends the jQuery object by adding a new method in the jQuery prototype ( jQuery.fn object ). Before diving deep into the implementation, it is important to understand the concept of prototypal inheritance in JS and reading this article will open your eyes for sure.

Coming back, a naive implementation looks like

Here, we delegate the actual work to animate method and toggle the height & opacity of the selected DOM element for the given speed if any, else a default of 400ms is used. It also allows us to specify a callback function to be called after the animation/effect is complete. To accomplish that, we first check whether the passed variable (fn) is actually a function using isFunction and then call the method passing this as the context.

Another important thing to note is that we are returning the jQuery object back from our function so that you can take advantage of chaining like:

So this wraps up a short and simple post on how to create custom effects by extending jQuery object. If you have any questions or comments, please leave them as comments.

Servlet Config, Context & Listeners

noreply@blogger.com (Anonymous) — Wed, 15 Feb 2012 19:14:00 +0000

Why talk about Servlets when there are JSPs…. Right ? That’s what came into mind especially when we read about how JSPs are way more easy and fun to write. But Servlet exists for a more meaningful purpose that than just churn out HTML, for instance they act as a Controller for many frameworks. But this is not about how important Servlets are, rather today we will talk about ServletConfig, ServletContext and ServletContextListeners.
ServletConfig
ServletConfig is a helper object which we can use in our servlets to get configuration of a Servlet. The configuration can include things like Servlet name, its context (described below) and init-parameters. For example, consider the following servlet declaration in a Deployment Descriptor (DD)

So instead of hardcoding the feedback email in the servlet responsible for sending the feedback mail, we can simple configure it in the DD and the servlet can pick the value from using ServletConfig as shown below:

The container is responsible for creating a ServletConfig object per servlet and pass to it after it has been initialized so it would be good to note that we can not use this object until the init() method i.e. we cannot access these init params inside the servlet’s constructor.
ServletContext
ServletContext, on the other hand acts as a global helper and is not created once per servlet, rather it is created once per application (when an application is deployed) and is normally used to configure application level parameters amongst other things. A typical example would look like:

and would be accessed as

Now these params can be accessed across all the servlets and JSPs that the application deploys. There are a bunch of other useful information that you can grab from a ServletContext and all of that can be seen here.
ServletContextListener
What if I want to do some special handling when my web application is initialized (or deployed) or destroyed/removed ? The servlet spec gives you a way to hook into the lifecycle of your web application by implementing a ServletContextListener which can listen for these events and act accordingly. Following is an example that picks up the datasource configuration from DD and creates a corresponding DataSource object and save it in ServletContext so that it can be easily retrieved by any servlet wishing to perform a database operation:

The actual code of creating a DataSource object from the string is being left out as it does not serve any purpose for this example. This listener will have to be configured in the deployment descriptor so that it can listen and respond to the lifecycle events as:

There are many other types of listeners that we can write to handle different use cases viz. ServletRequestListener, ServletRequestAttributeListener, ServletContextAttributeListener to name a few but we will see them in action some other day.
Disclaimer
With Java EE Annotations, we really don’t have to configure a servlet in DD (as shown in the examples above). They are just there to make things easy to comprehend.

HTML5 Native Drag ‘n’ Drop

noreply@blogger.com (Anonymous) — Sat, 17 Dec 2011 18:44:00 +0000

HTML5 does not only mean a whole new world of tags (video, audio, header, footer, article, section etc.) and revolutionary technologies like Geolocation, Application cache, Canvas, Web Workers etc. but it also brings along a rich set of JavaScript API to developers.

Today, we witness one of the interesting feature that it provides; the capability of dragging and dropping elements natively without using any JS framework. The HTML5 spec defines the new events that we should catch in order to handle operations like

Start of drag operation ( dragstart )
Dragging content over another element ( dragover )
Entering the drag area of another element ( dragenter )
End of Drag operation ( drop )

If you have worked with a RIA-friendly language such as ActionScript, then you will found this to be very similar. Having said that, providing this drag and drop support in the browser itself is the reason behind the fame of HTML5.

Coming back, lets see some code in action. We have some images in our page which we want to drag and drop in div container. These images are tagged with class “dragMe” (so that we can attach event listeners to them). Similarly, we have a div container in which we are going to drop these images with an id of “dropOnMe”.

Things to note

draggable=true - By default, images and links are draggable in nature but I have added this attribute just to convey that any HTML5 element can be selected, dragged and dropped if you add this attribute to it. Also add following CSS to make it work across different browsers

Custom data-* attributes - Again something, HTML5-blessed. It provides us the capability to define custom data-attributes on any element. Here we use it to define properties of individual images. More on custom data-attributes here.

Next, we add some event handlers to handle drag n drop related events we defined above:

1. Adding Drag Handlers

We took a hold of all the elements that are to be dragged and attach to each, a drag handler which will be called whenever you click and try to drag that elements. In the handler, we update the event’s dataTransfer object and set custom properties in the JavaScript object, which we defined in the markup (yes you guessed it right, we are going to use them in the drop handler)

2. Adding Drop Handlers

Note that we use both e.preventDefault() and return false in the function, to make it work across different browsers; this is needed to make sure that we cancel the default action that the browser will normally take, like surfing to that location (in case of a link). Apart from that, the code just retrieves the data set in dataTransfer object and display that using innerHTML of the div.

3. Adding handlers for dragover & dragenter

Again for making the code work across different browsers (tested on Firefox, IE and Chrome), we need to use both preventDefault() and also return false from the handler in order to inform the browser that you can drop and release the dragged item on this element for which the function is called.

A Lot More…

..can be achieved like customizing the drag icon and even drag and drop across different instances of same browser or even dragging from one browser and dropping in another browser. Stay tuned or check out the spec for more details.

Final Demo Looks like

Too bad that I don’t have a proper hosting solution, so you have to do with images, until you are passionate enough to write the above code yourself.

Initial Screen

Dragging an Item

Dropped it !!

We can add more spice to the tut by adding CSS and some other effects but in the hope that it would overshadow the concept, I emphasize on the minimal code needed for it.

Any suggestions, improvements or bugs are welcome as comments.

CSS3 Media Queries

noreply@blogger.com (Anonymous) — Sat, 19 Nov 2011 16:27:00 +0000

Need of Media Queries

Gone were those days when designers had the liberty to design or layout a web page for fixed/minimum resolution as most people would just use their desktop for browsing the web. In this mobile/tablet era, we cannot assume that the desktop would be the only user agent. A large number of users today use their “smartphones” or “tablets” for browsing the web and so it becomes crucial that your website looks as good when viewed from such a device.

Many websites today have different version of websites, one each for desktop and mobile. By detecting the user agent when the user visits the website for the first time, it can redirect them to the mobile version if he is browsing the web using his smartphone. But this solution comes with its own headache of maintaining separate presentation layers for separate mediums and fixing bugs in both !!

This is where Media Queries come into picture. They provide an elegant solution to the problem by providing the ability to switch the CSS based on the user agent or device’s width or orientation. In short, they make your web design adaptive and responsive to change.

Wow, that’s new !!

Not really !!. They were very much a part of CSS2 and HTML4 specification where they were limited to ‘print’ and ‘screen’ only (meaning using CSS2, you can only specify different style-sheets for rendering and printing a web page). But with CSS3, more media types are supported and different style-sheets can be applied based on

device-width and height
viewport-width and height
orientation
aspect-ratio
device aspect-ratio
resolution etc..

Without wasting more time, lets see an example. We will create a layout for a widescreen (desktop layout) and using media queries, we will change the layout and color the markup when we resize the browser (to simulate tablet and mobile size)

Layout for Wide Screen

Layout for Tablet or Not So Wide Screen

Layout for a Mobile Device

In this lame-example, we have simple created a three-column layout for a widescreen or desktop, and changed it to a two-column layout for a tablet and coloured the sidebar blue (not to show my design skills of course, but to distinguish between the layouts) and then a stacked layout for a mobile device with red coloured div. and All this by simply switching the CSS for the same HTML file. All the code is explained below:

index.html

<!DOCTYPE HTML>
<head>
  
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="UTF-8" />
   <link media="only screen and (min-width: 800px)" rel="stylesheet" href="css/desktop.css" />
   <link media="only screen and (min-width: 400px) and (max-width: 800px)" rel="stylesheet" href="css/tablet.css" />
   <link media="only screen and (max-width: 400px)" rel="stylesheet" href="css/phone.css" />
  
</head>
<body>

   <div id="header"> Header </div>
   <div id="sideBar"> Side Bar </div>
   <div id="content"> Content </div>
   <div id="extra"> Extra </div>

</body>
</html>

desktop.css

div
{
   border: 1px solid;
}
body
{
   width:1000px;
   margin: auto;
}
#sideBar
{
   float:left;
   width:250px;
   height:600px;
}
#content
{
   float:left;
   width:448px;
   height:600px;
}
#extra
{
   margin-left:700px;
   width:296px;
   height:600px;
}

tablet.css

div
{
   border: 1px solid;
}
body
{
   width:700px;
   margin: auto;
}
#sideBar
{
   float:left;
   width:200px;
   height:600px;
   background-color:blue;
}
#content
{
   margin-left:202px;
   height:600px;
}
#extra
{
   clear:both;
}

phone.css

div
{
   border: 1px solid;
}
body
{
   width:350px;
   margin: auto;
}
#sideBar
{
   height:100px;
}
#content
{
   height:100px;
   background-color:red;
}
#extra
{
   height:100px;
}

This HTML files simple contains 4 Div’s in the body and head contains links to some style-sheets with media queries using link tag, lets see what these queries mean

<link rel="stylesheet" href="css/desktop.css" media="only screen and (min-width: 800px)" />

It can be read as include the “desktop.css” file if and only if the user agent has a screen and the minimum-width of the device is 800 pixels. Similarly,

<link rel="stylesheet" href="css/tablet.css" media="only screen and (min-width: 400px) and (max-width: 800px)" />

it says that include the “tablet.css” when the user agent has a screen and its width is between 400 to 800 pixels, something that we think should be suitable for a tablet.

<link rel="stylesheet" href="css/phone.css" media="only screen and (max-width: 400px)" />

On the same lines, in this rule, we ask the browser to use “phone.css” if the width is less than 400 pixels. Note that these rules are mutually exclusive because we want them to be like so. Each rule must evaluate to a boolean value and depending on that value, the CSS file is downloaded to the client machine and is used for rendering the HTML markup.

You can also embed the media-query inline in the CSS as follows:

<style type="text/css">       
 @media only screen and (max-width: 400px)
  {
   #content
   {
       height:100px;
       background-color:red;
   }
}   
</style>

Orientation

Similarly the CSS for phone.css can be broken down into two parts: phonePortrait.css and phoneLandscape.css by applying the following media queries

<link media="only screen and (max-width=400px) and (orientation=portrait)" rel="stylesheet" href="phonePortrait.css" />
<link media="only screen and (max-width=400px) and (orientation=landscape)" rel="stylesheet" href="phoneLandscape.css" />

Width Vs Device-width

"width" refers to the width of the viewport width (or the browser’s width) whereas the "device-width" refers to the width of the device (for desktop users, it is the dimensions of the monitor used, for mobile users, it is the dimensions of the smartphone used). Common sense says we should use device as the browser size may be less than the dimension of the device (esp on desktop)

The complication comes in case of mobiles, where the likes of iDevices and Androids incorrectly reports the viewport-width and also neglects the orientation of the device while calculating the width. To make things work, Apple introduced a new meta-tag: Viewport which is usually used as follows:

<meta name="viewport" content="width=device-width, initial-scale=1">

This instructs the device to report the viewport width equal to the actual width of the device and also take orientation into account while making that calculation. More details can be read here.

Browser Support

Surprisingly, majority of browsers do support media queries but for those who don’t, a JavaScript workaround can be applied which based on the width of the browser, changes the link’s href value to point to the correct CSS file.

Spec

A lot more can be achieved by media queries, all of which has been laid out in the spec here.

Disclaimer

The HTML & CSS used above in the example are merely for demonstrating the power of Media Queries and hence have been intentionally kept lame.

Remembering the old Sunny Days

noreply@blogger.com (Anonymous) — Tue, 15 Nov 2011 18:07:00 +0000

Although my tenure with Sun Microsystems (now Oracle Corp), working as a Sun Campus Ambassador was numbered (just 6 months), but I consider that to be an important phase in my life, a beginning of a new journey, something that motivated me to work on open-source technology and learn new and exciting stuff.

The bad, rather the ugly part is that I cannot access my Sun Blog anymore !! Yes, I have written to Oracle about it, but nothing has happened so far. Still the sole purpose of writing that post was to re-live moments of the past and thanks to Arun Gupta, I’m re-posting one of my favourite entries again: A poem for me from one of my favourite professor: Dr. P.K. Hazra.

Under the SUN-MICROSYS SunRay
Has bloomed a Lovely Rose,
Over Joyful in Java & Solaris
He is SUN CAMPUS AMBASSADOR Agraj.
Only one request I want to make
to the SUN's shining flower,
To remain in serene silence
During my lecture hour
Quoted by Dr. P.K Hazra

and As they say, “I’m really gonna miss this place, I’m gonna my college days…”

jQuery Mobile: Hello Mobile World

noreply@blogger.com (Anonymous) — Sat, 12 Nov 2011 09:51:00 +0000

After more than one year of online-hibernation, I’m more than happy to be back and today would be writing about creating a basic mobile application using jQuery Mobile.

Overview

jQuery Mobile provides a robust framework to develop mobile applications on the fly and is as simple as creating a HTML page and including jQuery mobile specific JS and CSS files. The framework is not only pretty straightforward to use, but also provides a familiar approach for web developers (who are already comfortable with HTML, CSS & Javascript/jQuery). It also provides 5 predefined themes to choose from and recently ThemeRoller has been launched which can be used to create a custom theme for your app. Fortunately for you guys, I’m not going to rant about how awesome jQuery Mobile is, as all that can be found here. :-)

Getting Started

In this post, we will be creating a basic contacts app which looks like below:

Lets start by creating a basic html file (index.html) for the home page/the first view and add the code below to it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Friends</title>
    <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div data-role="page" id="page">
   <div data-role="header">
       <h1>My Friends</h1>
   </div>
   <div data-role="content">   
       <!-- Logo -->
       <div id="logo"> </div>
       <ul data-role="listview">
           <li><a href="allFriends.html" data-transition="pop">All Friends</a></li>
           <li><a href="addFriend.html" data-transition="fade">Add Friend</a></li>
       </ul>       
   </div>
   <div data-role="footer" data-position="fixed">
       <h4>&copy; Copyright 2011</h4>
   </div>
</div>
</body>
</html>

In the head section, we have included jQuery mobile specific CSS and JS files. We have also included our custom CSS file: styles.css which is primarily used to position the logo for our application and consists of the following code:

#page div #logo {
   width: 300px;
   height: 100px;
   background-image: url(../images/jQueryLogo.jpg);
   background-repeat: no-repeat;
   background-position: center 0px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
}

The body contains various div’s which form one view/page of the mobile app. The “page” div usually contains “header”, “content” and a “footer”. These div’s can then contain anything that you want to put inside those sections of the page (following some conventions).

As the name suggests, header and footer are the blocks at top and bottom of the page and the “content” div is used to lay out the elements to be shown in the rest of page. Here, we show a logo and list view of 2 elements.

As you might have noticed we have made extensive use of HTML5 custom data-attributes (the data-* attributes on HTML tags) throughout our tutorial. jQuery mobile leverages this uber cool feature of HTML5 to add capabilities to its framework. These custom data-attributes (like data-role, data-transition, data-position etc) are defined in jQuery Mobile framework and support predefined values.

Lets create another pages/html files, which we will then link to our main page (index.html). Creating the second view/page (allFriends.html) in which we will show all the friends in our list.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>All Friends</title>
    <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>

<div data-role="page">
       <div data-role="header">
       <a href="index.html" data-icon="home"> Home </a>
       <h1> All Friends</h1>
               <a href="index.html" data-icon="back"> Back </a>
       </div>
  
       <div data-role="content">
       <ul data-role="listview">
           <li> <a href="friendDetails.html">
                       <img src="images/face1.jpg">
                        <h3> Andrea </h3>
                       <p> Office Colleague </p>
                       </a>
               </li>
           <li> <a href="friendDetails.html">
                       <img src="images/face2.jpg">
                      <h3> Aria </h3>
                   <p> Childhood Friend </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face3.jpg">
                   <h3> Tom </h3>
                   <p> Brother </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face4.jpg">
                   <h3> Home </h3>
                   <p> Danger </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face5.jpg">
                   <h3> Melinda </h3>
                   <p> Close Friend </p>
                 </a>
           </li>
           <li> <a href="friendDetails.html">
                   <img src="images/face6.jpg">
                   <h3> Taanya </h3>
                   <p> College </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face7.jpg">
                   <h3> Micheal </h3>
                   <p> Rockstar </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face8.jpg">
                   <h3> Maria </h3>
                   <p> Friend </p>
                 </a>
           </li>
       </ul>
   </div>
        
   <div data-role="footer" data-position="fixed">       
       <div data-role="navbar">
           <ul>
               <!-- Add icons here for Delete, Edit, Call Friend -->
               <li><a href="#" data-icon="info" data-iconpos="top">Edit</a></li>
               <li><a href="#" data-icon="delete" data-iconpos="top">Delete</a></li>
               <li><a href="#" data-icon="alert" data-iconpos="top">Call</a></li>
           </ul>
       </div><!-- /navbar -->
   </div><!-- /footer -->
  
   </div>

<body>
</body>
</html>

By writing this small piece of code, we can show the thumbnails in the listview along with some description of each element. To make things simpler, this is simply some static data hardcoded into HTML. A real-world application would read this data from some persistence store and using jQuery would create this markup dynamically with that data.

jQuery Mobile also provides a rich set of form elements as can be read here. We create a simple form using the html below (addFriend.html) to show some basic form elements to create the third page/view of our app in which we provide a simple form to add a new friends in the existing contacts.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Add Friend</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
   <div data-role="header">
       <a href="index.html" data-icon="home"> Home </a>
       <h1> Add Friend </h1>
       <a href="index.html" data-icon="back"> Back </a>
   </div>
   <div data-role="content">
       <form action=”submit.jsp” method="post">
           <div data-role="fieldcontain">
               <label for="name">Name: </label>
               <input type="text" name="name" id="name" placeholder="Enter Name"/>
           </div>
           <div data-role="fieldcontain">
               <label for="gender">Gender:</label>
               <select name="gender" id="gender" data-role="slider">
                   <option value="MALE">Male</option>
                   <option value="FEMALE">Female</option>
               </select>
           </div>
           <div data-role="fieldcontain">
               <label for="age">Age</label>
               <input type="range" name="age" id="age" min="0" max="100" value="0"/>
           </div> 
           <fieldset class="ui-grid-a">
               <div class="ui-block-a">
                   <a href="index.html" data-role="button" id="cancel">Cancel</a>
               </div>
               <div class="ui-block-b">
                   <button type="submit" data-theme="a">Submit</button>
               </div>
           </fieldset> 
       </form>
   </div>
   <div data-role="footer" data-position="fixed">       
       <h4>&copy; Copyright 2011</h4>
   </div>
</div>
</body>
</html>

Again the markup is pretty much similar to a normal HTML page, just we have used certain specific data-roles, specific classes which are defined in the framework to layout the elements in a certain fashion and apply a theme to our UI. Since this is just for introducing the framework and not on developing a fully functional app, so the form submission does not work, rather it gives an elegant error message on click of submit button as we have not provided a submit.jsp page to handle the request. (Done intentionally to show the elegant error handling of the framework)

Single-page template Vs Multiple-page templates

Here we have used one html file per page. We also have an option to keep multiple pages inside one html file. In that case, we need to give id to our pages and link them to each other accordingly using that id. But that can soon explode & become unmanageable, and is only recommended when there is some static data to be shown

CSS Layout Magic

We didn’t write much CSS still our HTML pages looks just like a mobile site and the “header”, “footer” and “content” data-roles are layout perfectly nice. It’s so because of the framework’s CSS file (jquery.mobile-1.0a3.min.css) which we have included in our HTML pages. Again proves what amazing things CSS can do :-)

Dreamweaver Integration with jQuery Mobile

Adobe has done a fantastic job in integrating jQuery Mobile with Dreamweaver and provides several templates to get you started. The editor also supports some level of code-completion for jQuery Mobile and even some support for Javascript.

Want to learn more ?

Even after writing such a long post, its hard to explain each line of code written above so the best way to learn more is to refer to the Docs. Or I might just write another post to explain some more.

Disclaimer

This is just an introduction to jQuery Mobile and might not follow the best practices like normally you would refer to jQuery framework files from some CDN than to include them with your own code. Also, the above code is static in nature, but it can be easily integrated with any database using some script and can form a fully-fledged application.

As always, comments and corrections are welcomed and appreciated.

Runtime Shared Library (RSL) – Flex 3

noreply@blogger.com (Anonymous) — Fri, 24 Sep 2010 17:39:00 +0000

The best way to reduce the size of your Flex application (or the resultant SWF file) is to use Runtime Shared Library which uses the concept of dynamic linking.

Normally a Flex application consists of your application code as well as the framework code and the both of these codes are statically merged together in a single SWF file. It makes the resultant size of your application (the SWF file) larger by adding some 500 KB’s of data to it, which has to be downloaded each time the application is downloaded to a client.

On the other hand, RSL allows you to decouple your application code with the framework code and allows you to dynamically link both of them as and when needed (while running the application). Without wasting time, lets try and configure our project to use RSL instead of static linking. It can be done either using command line Compiler Options or by changing certain settings in Flex Builder. We’ll go the easy way:

Setup in Flex Builder

Following Steps are needed to Compile and Build a Project in Flex Builder with RSL in it:

Select your Flex Project. Click on Project –> Properties
Go to Flex Build Path
Open Library Path Tab. By default the framework linkage is statically linked --> Merged into Code as shown below:

Change the drop down to Runtime Shared Library (RSL) for dynamic binding.

Make sure that Verify RSL digests checkbox is checked. Click Ok to complete the changes and the project will be recompiled with updated compiler settings.

This will create 2 files for RSL in the Output Folder of your project:

framework_3.X.X.XXX.swf (Unsigned/Failover RSL)
framework_3.X.X.XXX.swz (Signed RSL)

By default, the Flash player will try and use the Signed RSL to link with your application code on loading but the signed RSL works only with Flash Player 9.0.115 and later. If your clients are using a lower version, then it will be unable to load the Signed RSL (swz) and will automatically switch over to the failover RSL (swf) and use it in place of Signed RSL.

A Major benefit of using Framework RSL is caching. RSLs are cached when they are first used. When they are needed by another application, they can be loaded from the cache rather than across the network. The signed framework RSL (RSL’s can be signed by Adobe only) can be cached in the Flash Player cache as well. This benefits by reducing the initial download time as there is no need to download the framework code every time you need to run your Flex Application. And since the caching is done in the special cache of the Flash Player and not in the browser cache, so this signed RSL can be used for some other Flex Application (served from a different domain than yours) On the other hand, the failover RSL is cached in the browser’s cache.

Compiler Settings

Apart from RSL, while building the project for Production Environment, the debug option must be set to false, else the resultant SWF file will also contain the debug information, which is unnecessary for the production environment. To do so, right click the project, go to Project Properties and open the Flex Compiler View and add

-debug=false

in Additional Compiler Arguments as shown below:

Without doing this also, it will work but the resultant SWF file will have debug information with it. The default value of this parameter is true.

Go Check the output folder of your web application and you will definitely see a reduced SWF file there Happy Flexing :-)

Thread-safe Generic Class in Java

noreply@blogger.com (Anonymous) — Fri, 20 Aug 2010 18:07:00 +0000

Assuming that you are a Java Developer, I can say that you have at some point or the other must have used Generics in your code, be it using a Generic Collection (if you have worked with Java5+) or in any other way. Even if you are not a Java developer, you must have played with Templates (in C++) in your school/college days.

Today, we are going to do something similar in Java. We are going to create a Generic Stack class in Java, which you can use to create a Stack of Integers, Floating Point Numbers, or a Stack of Students or any custom type that you have. Just to make code a bit more interesting and tough, I have also made it thread-safe so that multiple threads can use this stack without leaving it in an inconsistent state.

public class GenericStack<T> {

private List<T> items;
private int top;
private int size;
private static final int INIT_SIZE = 100;

public GenericStack(){
    size = INIT_SIZE;
    items = new ArrayList<T>(INIT_SIZE);
    top = -1;
}

public GenericStack(int size){
    this.size = size;
    items = new ArrayList<T>(size);
    top = -1;
}

private boolean isEmpty(){
    return (top==-1);
}

private boolean isFull(){
    return (top == size-1);
}

 // Push an Item in Stack
 public void push(T item){
    synchronized(items){
       // While stack is Full
       while(isFull()){
          try{
             // Wait till Stack is Full
             items.wait();
          }
          catch(InterruptedException e){
            e.printStackTrace();
          }
       }
       // Produce Item
       items.add(++top, item);
       // Notify other threads
       items.notify();
    }
}

 // Pop an item out of stack
 public T pop(){
     T item = null;
     synchronized(items){
        // While Stack is Empty
        while(isEmpty()){
           try{
             // Wait if its empty
             items.wait();
           }
           catch(InterruptedException e){
             e.printStackTrace();
           }
        }
        // Consume an item
        item = items.get(top--);
        // Notify other threads
        items.notify();
     }
     return item;
  }
}

Most of the above code is self-explanatory but lets highlight some of the major concepts used here:

To create a Generic class, one must specify the Type along with the class name (as done using T).
When you initialize it, all the occurrences of T will be replaced by that particular type.
We have also made the above Stack class thread-safe, i.e. it can be shared and updated by multiple threads in a consistent manner using synchronized blocks.
We have checked before pushing for a Full Stack and we also check for an Empty Stack before popping an element
We have not made the isFull() and isEmpty() methods as synchronized as they are private (hence not visible to clients) and are always called from an synchronized context from within the class.
If you need isFull() and isEmpty() to be public then make them also synchronized to make them thread-safe
It is always better to have synchronized blocks rather than synchronized methods as it is always better to synchronize as less code as possible. Although, here we could not make much use of this concept but rather than obtaining the lock on the calling object, we obtain a lock on the shared list of items.
Calling synchronized(items) means if some other thread has not yet acquired a lock on items (By the way, each Object in Java has an associated Lock with it), then this current thread acquires the associated lock and proceeds. Otherwise if some other thread has currently acquired the synchronized block, then it must wait in the wait list of the object (items) in question. The thread then waits until it receives a notification that the lock has become available for acquisition and then it competes with other waiting threads to acquire the lock.
Calling items.wait() results in the current thread being placed in the wait list of items after releasing the lock. You can only call object.wait() after you have acquired the lock on the object.
Calling items.notify() results in sending the notification to one of the threads in the wait pool of threads which can then compete for the lock.
Note that items.notify() does NOT releases the lock. Only exiting the synchronized block/method releases the lock that was acquired when the thread entered the synchronized block/method.

You can easily create two or more threads (viz. Producer and Consumer) and pass them the same Stack and play with them to randomly create and consume data and check that you Stack class is indeed thread-safe.

Generic Methods

Talking more about generics, you can also make a method accept Generic parameters without the enclosing class declaring the Generic type as done in the following example:

public <T> List<T> createArrayList(T t){
  List<T> arr = new ArrayList<T>();
  return arr;
}

This weird looking syntax has a meaning:

This method basically lets you create an arraylist of any type, type is passed to it as an argument.
Since you are not defining the type at Class-level, then there must be a place where you should define the type of your method and distinguish it from other non-generic methods for the compiler.
So, we declare the type <T> immediately after public modifier to say that we use a Generic Type T in this method, which like others will be replaced at runtime with any real type. (just like in case of Generic classes)
We call this method passing to it a valid reference to any Object of any type (Integer, Float, or you own custom class Student). For example, we can do:

Integer i = 23;
List<Integer> intList = createList(i);

Student st = new Student();
// Do anything with st here
List<Student> students = createList(st);

Ok, I agree this is not one of really useful examples for showcasing the power of a generic method but I hope that the intent is clear and so is the syntax. As always, your valuable comments are welcome and desired. Any corrections must also found place in comments. Sayonara :-)

Mixing Generic & Non-generic code in Java

noreply@blogger.com (Anonymous) — Sun, 15 Aug 2010 08:03:00 +0000

Can you spot the error in the following code:

public class MixingGenerics{

public static void main(String[] args){
    List<Integer> arr = new ArrayList<Integer>();
    arr.add("String 1");
    arr.add("String 2");

   // add something more
   addToList(arr);
}

public static void addToList(List arr){
   arr.add(new Integer(1));
}
}

I’m sure you are able to point out the mistake that we are adding an Integer to an ArrayList of Strings. That’s definitely not done. But can you tell without compiling this code that we get an error at compile-time or at run-time ?

Unfortunately and even more surprisingly, this code doesn’t give any compilation error or runtime exception. Everything works fine and an Integer is added into your ArrayList (of Strings) !! Yes, you do get a compiler warning that says something about Type Safety of your code. We will get back to this point later on.

But first examine how is possible that you can actually store an Integer in a String Arraylist? Actually, it is an unfortunate outcome of mixing Generic & Non-generic code. The reason why we get no error is due to a property of Generics called Type-Erasure. We’ll get to it soon but first lets see when the previous code will throw an Error/Exception. This code will explode as soon as you would try and iterate the ArrayList of Strings, in which you have put an Integer unknowingly as shown below:

public class MixingGenerics{

public static void main(String[] args){
    List<Integer> arr = new ArrayList<Integer>();
    arr.add("String 1");
    arr.add("String 2");

   // add something more
   addToList(arr);

  // print the list
  printMyList(arr);
}

public static void addToList(List arr){
   arr.add(new Integer(1));
}

public static void printMyList(List<String> arr){
   for(String s:arr){
       System.out.println("String : "+s);
   }
}
}

So we get a runtime exception now on iterating the list. It prints the first two strings and then throws ClassCastException as we are trying to cast an Integer into a String s. That’s okay but why does it allows you to add an Integer into List of Strings.

Type-Erasure

Generic code in Java exhibit a very important property: Type-erasure. What it means is that the so-called type-safe collection of yours (the generic collection here: ArrayList<String>) loses its type information at run-time and acts as if its just a List (like pre-Java 5 lists, the non-generic list). This has been made such so that we can integrate pre-Java 5 (the non-generic code) with newly written Generic code (Java 5 or later), but then while mixing them, you must be careful. Very careful indeed, else you could happen to write a code that will explode unpredictably.

So the answer to our question that why it allows an Integer to a list of Strings is because at runtime we only have a list, just like we had a list in pre-Java 5 days. Without generics, we had to take care while taking object out of the list and casting them but with Java 5 and above code, that casting is implicitly inserted by the compiler. So when we say

String s = arr.get(0) gets converted into String s = (String) arr.get(0)

Doing exactly the same with our list, it gives an error when we try and cast an Integer into a String and hence the error: java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.String

Apart from giving the error, the compiler does his best and warns you when you are trying to mix Generic code with Non-Generic Code. If you are very sure about your code and do not want any compiler warning, then you can do by using following Annotation (valid with Java5+ code)

@SuppressWarnings("unchecked")
public static void addToList(List arr){
arr.add(new Integer(1));
}

This lets the compiler know that you are pretty sure about the code that you have written and do not give me any warnings with this method. Generally, it is not recommended to use such Annotations and if you really need to use one, you must do proper documentation of your code.

Any comments and corrections are welcome :-)

JBoss – Basic & Digest Authentication

noreply@blogger.com (Anonymous) — Thu, 15 Jul 2010 17:45:00 +0000

This blog entry is a replication of my previous blog entry: Tomcat – Container Managed Security. It is extending the same entry for JBoss, so I’m gonna skip all the introduction and straight-away get to work.

Basic Authentication

1. Open the login-config.xml file located at ${JBOSS_HOME}/server/${USER_PROFILE}/conf

This file sets up the configuration for the security domains available to applications running in the server. JBoss uses JAAS for the underlying security infrastructure, and JAAS interacts with a security store for authenticating credentials.

In simple words, we specify an application policy in this file, which tells the Login Module that we will use (Like Tomcat, here also we have plenty of options like LDAP, Database, Property Files etc for Login Modules). Basically, Login Module specifies the usernames, passwords and roles used for protecting your application. To start with, we will use UsersRolesLoginModule, which uses a property file to specify all the above mentioned information. Obviously, this isn’t secure and not really a choice for a system in production. Time to make changes:

Make changes in login-config.xml file : Add the following policy at the end of the file:

The "name" attribute on the "application-policy" element specifies the name of the security domain. This name is important because it is what will be used to tie the security domain to the web application later. We will mention it in application’s web.xml.
The "login-module" element specifies the login module that this domain will use.
The "module-option" elements specify some values to pass into the login module's "initialize" method. For UserRolesLoginModule, we will specify the property files for user information and role information. These paths are relative to the ${JBOSS_HOME}/server/${USER_PROFILE}/conf directory.

2. Open the ${jboss.dist}/server/${server.name}/conf/props and create 2 files:

web-users.properties (user information)
web-roles.properties (role information)

In web-users.properties property file, add

In web-roles.properties, add

3. Open web.xml of your web application and make following changes -- add following security constraint:

4. Open jboss-web.xml of your web application and add following line inside the <jboss-web> element:

This element tells JBoss to connect the web application to the "webPasswordProtection" security domain (application policy) we defined in the login-config.xml file earlier. JBoss exposes security domains via JNDI by pre-pending "java:/jaas/" to the name element in the application-policy element in the login-config.xml file.

Voila!! You are done now. Just restart the JBoss Server and your authentication should work fine.

DIGEST Authentication

Having already said that this basic authentication is not recommended for production purposes, we will try using a different authentication mechanism : Digest Passwords. We will save the passwords in a digest (hashed) form in the properties file instead of saving them in clear-text form. Make following changes:

1. Change in login-config.xml file

2. Find the new hashed password using built-in RFC2617Digest class:

The RFC2617Digest class is present in jbosssx.jar which is present in ${JBOSS_HOME}/server/default/lib directory. So this jar file must be on your classpath when you execute the above command. If it is not so, then use –cp option of java tool to set CLASSPATH as done above. The generated password is b63289befb5c9bb0509eed20b253e985. Note that the arguments passed to this class are

User Name
Realm Name
Password

in that order. Now is the time to store this hashed password in your web-users.properties file.

3. Change web-users.properties file as follows:

Now, just restart JBoss to see the effect. And it is more secure than Basic authentication as you are not transmitting the password over the wire.

SSL Configuration in Tomcat

noreply@blogger.com (Anonymous) — Sun, 27 Jun 2010 18:54:00 +0000

Today, we are going to learn about how to setup SSL on your Tomcat so that you can access your application on HTTPS instead of HTTP and provide a secure interface to your clients. But before going into that, lets understand the basic difference between HTTP & HTTPS.

Introduction to HTTPS

HTTPS (HyperText Transfer Protocol Secure) combines HTTP protocol with SSL (Secure Sockets Layer) or TLS (Transport Layer Security) and offers a secure channel to browse the web so that you can trust the connection to send sensitive information like payment transactions details or your bank account details. The difference between the two clearly shows in the address bar where you can see “https://” instead of “http://”. Also HTTPS uses port 443 as the default port, whereas HTTP uses port 80 as the default port for communication.

Using HTTPS, the two-way communication that occurs between your web browser and the host server is now secure and encrypted. This means that the data being sent is encrypted by one side, transmitted, then decrypted by the other side before processing.

When a web browser initially attempts to contact a web server over a secure connection, it is presented with a “certificate” (set of credentials), as a proof of the site is who what it claims to be. These certificates are signed (digitally verified) by certain authorities like VeriSign and typically purchased by the web server. Remember that you need to buy a certificate for each port on which you want a secure connection. For this blog entry, we will sign our own certificate and make other changes to Tomcat configuration so that it starts accepting connection on port 443 using HTTPS protocol.

But before we begin setting up SSL on Tomcat, its very important to iterate that this is valid only if you are using Tomcat as a stand-alone web server, the other possibility being Microsoft IIS or Apache Server serving as the main interface to the outside world and Tomcat is serving as the JSP/Servlet Container at the backend, communicating with one of these servers. In that case, you have to make SSL configuration changes in IIS or Apache, while Tomcat will continue to work normally sending cleartext responses (no encryption at Tomcat level).

Creating a Certificate

Fortunately, Java provides us with a utility (keytool) which can be used to create a self-signed certificate. This is not validated by any authority, hence not suitable for production use. But it can certainly be used for development purposes. So, lets create a certificate from scratch for our application:

Type in the following command and enter details(credentials) about your organization that users of your site/application would see in the certificate given to them when they use it. The default password for Tomcat is “changeit” (all in lower-case). It would be asked when you type the following command to generate your self signed certificate:

>> keytool –genkey –alias –tomcat –keyalg RSA

Note, you must enter the password (as told above) and then all the credentials as shown below:

After doing this correctly, a .keystore file will be generated in your home folder (in the home folder of the user who did this). This is the certificate your tomcat would use and present to any user who visit the secure site.

Configuring Tomcat

Now, we make changes in Tomcat configuration to reflect this change. Tomcat uses 2 different implementations for SSL: Apache Portable Runtime (APR) implementation and JSSE Connector implementation, provided by default with JRE (Java Runtime). Most of the users (like me) do not have APR installed by default, so following steps are valid for JSSE implementation

We now open server.xml present in $CATALINA_HOME/conf. An example <Connector> element for SSL is included by default in most server.xml that comes with Tomcat. It looks something like this:

All you have to do is to uncomment this connector and add to it the location of your certificate (.keystore) that we generated and the password we used to generate it. So finally the entry for the connector looks like:

Also, make sure that the Non-SSL Connector (the default one) which accepts connection on 8080, should have a redirectPort attribute set to 8443 or to the port that you specified for SSL Connection in the connector above. The entry looks like:

That’s all you need to do to make sure that Tomcat starts accepting secure connections on 8443 and redirects users who attempt to access a secure page with http to https. For more details regarding each attribute of the connector, you can refer Java HTTP Connector configuration reference.

Go ahead, try it out and feel the magic that Tomcat provides you. :-) Please post any bugs, queries and corrections as comments.

Tomcat – Container Managed Security

noreply@blogger.com (Anonymous) — Sat, 29 May 2010 19:07:00 +0000

If you are a web developer, then I will not think twice before saying that you must have used Tomcat knowingly or unknowingly for deploying your web applications.

For me, Tomcat is a pretty basic web server, which mainly serves as a JSP/Servlet Container. Today, we explore some basic security features that are provided by the container itself. There are different ways in which this authentication can be provided. In this blog entry, we will try to understand and implement Basic & Form-based Authentication using MemoryRealm.

What’s a Realm?

According to the Tomcat specification, a Realm is a "database" of usernames and passwords that identify valid users of a web application (or set of web applications), plus an enumeration of the list of roles associated with each valid user. Obviously, there are many ways to specify the valid username-password combinations and the associated roles. We will use something known as MemoryRealm, which uses a file: tomcat-users.xml to specify this database.

Steps to Enable Authentication

Change the configuration file (server.xml) of the Tomcat Server to specify the realm that you will use
Change the tomcat-users.xml file to list the valid username-passwords and the associated roles
Change the deployment descriptor (web.xml) for your web application to reflect security constraints needed by the application.

Step1: Change server.xml of Tomcat

The default server.xml has the UserDatabaseRealm enabled as shown below:

Note: This can change depending on the versions of the Tomcat, but for Tomcat 5.5 and Tomcat 6, it is the default one. We change it to use MemoryRealm by commenting the previous line and adding the following declaration as shown below:

Step2: Change tomcat-users.xml of Tomcat

The default tomcat-users.xml file, which is present at $CATALINA_HOME/conf/tomcat-users.xml where $CATALINA_HOME is the directory in which your Tomcat server is installed, looks like:

To this, add your own role and associate with it, some valid combination of username and password as done below:

Step3: Change web.xml of your web application

So far, we have made changes in the Tomcat server itself, its time we must modify our application to reflect the security constraints that we want. To do so, we add the following to our web.xml file:

a) Security Constraints as per the need

Here, We specify that in order to access any URL in our application which comes after http://{context_App}/jsp/… should be password-protected. Also, we associate a role with it, so users associated with that role can only access these URLs now.

b) Declaring the Security Role

c) Specifying the Type of Authentication

We tell Tomcat that we want to use BASIC authentication for our web application and the realm that we will use will use your tomcat-users.xml file.

That’s it. All you need to do now, is to restart Tomcat and check whether this works or not. Obviously you need to create a basic web application to deploy onto the Tomcat , for which you have specified the security constraints. You can download my test web application here. (Provide a Link)…………………

This was pretty basic stuff, but it has several limitations. For one, this is not suitable for production environments and we must use FORM-based authentication instead of BASIC. Secondly, it is not a good practice to use clear-text passwords in tomcat-users.xml file. We can save the encrypted password (encrypted by any algorithm like SHA, MD2, MD5 etc) supported by the realm.

Changes to overcome limitations

1. Use Digested Passwords

Obviously, storing passwords in clear-text readable format in tomcat-users.xml cannot be considered safe or practical. In a production environment, it is essential to use some encryption to provide security. Tomcat provides us with several digest algorithms (SHA, MD2, MD5 etc) supported by MessageDigest class. To enable it, change the realm declaration in server.xml of Tomcat to the following:

Also, change the password you specified in tomcat-users.xml to the encrypted version of the original password, by using RealmBase class. You can find this class in catalina.jar in $CATALINA_HOME/lib directory. Use it as follows: RealmBase.digest(“password”, “MD5”, null) . Now, restart your Tomcat and test your authentication.

2. Use FORM-based Authentication

Since using BASIC authentication, you have very little control over the authentication/login method used by Tomcat and it is not considered practical for production environment. So we demonstrate another way: FORM-based authentication. The whole setup remains same, only you can provide your own custom login and error pages (with your company logo and whatever you want) instead of just popping up a window (as done by Tomcat in BASIC mode)

We will change the <login-config> element declared in your application’s web.xml as follows:

We will now add login.jsp and error.jsp to our application. login.jsp is used to authenticate the user: hence it would provide a form while error.jsp is the page to which user is redirected in case of an error: invalid username-password.

login.jsp will have at least a login field with name as “j_username” and password field with name as “j_password”. This must be same so that tomcat can identify the password and login fields in the form. Also the action of the form must be “j_security_check”. You can find the link to download the whole project at the end. My authentication page looks like this, which I believe is much better and safer than basic mode.

Still, we have one limitation:

Any changes made to the file: tomcat-users.xml will be reflected only when the Tomcat server is restarted. So, if you add a new username-password combination to it, you must restart Tomcat in order to have its effect. We can also overcome this limitation by specifying the username-password and roles in a database table and using a JDBCRealm instead of MemoryRealm. You can download entire project from here.

Flex Remoting with Java Part 2

noreply@blogger.com (Anonymous) — Sun, 23 May 2010 10:08:00 +0000

In the last blog entry, I wrote about setting up a simple Flex Application and integrating it with Java so as to be able to make Remote Calls to Java Methods and display the result in Flex.

Today, we are going to make those efforts valuable by seeing how a user-defined object can be passed between Java & Flex. We will create a Employee List in Java and show it in a DataGrid in Flex. As Simple as that. To start with, you must have all the environment setup as explained here.

RPC with User Defined Objects

To be able to do so, we must create classes in both ActionScript and Java and bind them together as shown below:

Employee.java

Employee.as

The Java and the ActionScript file have the same attributes and they map to each other using Flex Metadata: RemoteClass(alias=””) which maps the java object returned from server to ActionScript object which can be displayed. This metadata tag used in ActionScript Class (Employee.as) specifies the fully qualified name of the corresponding Java Class. We now create a Utility class for getting Employee details:

EmployeeUtils.java

Here, we have hard-coded the Employees Data, but it is as easy to get these employees from a database by firing a query. We now make a RPC call from Flex to get this list so that we can display it in a DataGrid.

We create a RemoteObject in Flex and specify a destination “employee” which is present in a remoting-config.xml to specify the Java Class file to look for methods called (getAllEmployees) using this RemoteObject. Part of flex-config.xml which specifies this looks like:

We specify the result and fault handlers with the remote object, which are called when result or fault occurs. In the result handler function, we save the result in a ArrayCollection, which we bind with our DataGrid as shown below:

We set the dataProvider property of our DataGrid component to __employeeList, which is a bindable ArrayCollection which contains the result data. The advantage of making the ArrayCollection as bindable is that any changes made to this ArrayCllection (due to any event) is reflected in our DataGrid automatically.

When we run this example, we get a DataGrid as shown below:

Again this is not a best-way to code your flex application. The intent was to show how user-defined objects can be passed between Java & Flex. In practice and in large scale application, we would use tested frameworks like Cairngorm or PureMVC.

Wishing you very Happy Coding with Flex :-)

Flex Remoting with Java

noreply@blogger.com (Anonymous) — Wed, 28 Apr 2010 16:17:00 +0000

Flex is one of those technologies that has taken the RIA (rich internet applications) world by storm and surprise. It has never been so easy to create interactive user interfaces before. Flex offers various ways to interact with languages like Java, PHP and Coldfusion:

RPC Services which enables Flex applications to make asynchronous calls to remote services following a call and response model.
Data Management Services provides data synchronization and real-time updates, on-demand data paging and many other data integration features to Flex Applications.
Message Services that provides Flex with a publish-subscribe mechanism to create rich and collaborative real-time applications

All these capabilities are provided as a part of Adobe’s LiveCycle Data Services Pack. But unlike the Flex SDK, the entire LiveCycle Data Services Pack is not free and open Source. Rather, Adobe has open sourced a part of it, basically the RPC services and Message Services known as BlazeDS.

Using the RPC Services, one can

Call and invoke remote Java Methods directly and bind the result to a Flex component. (using RemoteObject Component ). It follows a request and response model making asynchronous calls to the backend.
Invoke an already deployed SOAP-based Web Service over HTTP using WebService Component.
Send and receive data using HTTP GET and POST using HTTPService Component.

Today, we are going to make use of RemoteObject to invoke Java Methods and show the result in Flex. For this purpose, we are going to use

Flex 3 SDK
Flex Builder 3
BlazeDS for making asynchronous calls to Java

Open Flex Builder. Create a new Java Project. Name it ‘testFlexRPC’.

Project Structure

Structure of a typical flex application that we will use looks like:

‘web’ is our output folder. We will deploy it as a WAR file later on. The output folder contains the WEB-INF folder, in which we will add the deployment descriptor ‘web.xml’ file and other folders such as classes. (the path web/WEB-INF/classes should be your default output folder in Java Build Path, which will store the class files). Make two other folders, flex and lib which will contain the flex files for remoting purposes (remoting-config.xml and services-config.xml) and the libraries needed for Flex Remoting (typically the BlazeDS JARs for messaging).

Deployment Descriptor

Lets add the deployment descriptor (web.xml) to the project. It will typically contain an entry for the MessageBroker Servlet (which is used by the flex framework for RPC communication) and specify the location of services-config.xml, which is used to define the kind of RPC services to be used.

web.xml

Services-Config.xml

Line 14 of web.xml specifies the location of services-config.xml in your project. It is the top-level configuration file that contains security-constraint definitions, channel definitions, logging settings that each of the services can use. Create an empty XML file on that location and add the following to it:

Firstly, it defines the kind of RPC services that we will use in this project. It includes another file: remoting-config.xml which will contain the destinations for RPC Calls.

Next, it defines the channels that are actually used by the flex application to transfer data between client and server. It defines two channels: HTTP channel and AMF Channel (AMF stands for Actionscript Messaging Format). These channels are used in remoting-config.xml as we will see in a moment. These channels are a key element of the destinations that are specified and perform all work needed for the asynchronous communication that is required by the application.

The other part of this file: services-config.xml specifies the logging information and looks like:

Remoting-Config.xml

Lets create another XML file, which will list the destinations that we will make use of, for making asynchronous calls to remote Java methods from Flex.

It specifies the channels (HTTP and AMF that we configured in services-config.xml) that these destinations will use to communicate between client and server. This file also lists the adapter (server-side code) that interacts directly with the object or the service.

Next, it defines the destinations that can be used with <mx:RemoteObject>, <mx:WebService> and <mx:WebService> tags in MXML or its equivalent in Actionscript code.

Here, we define a destination (sayHelloToMe) and bind it with the Java Class SayHello.java present in java.myPackage package.

Now, add the following libraries in your project. You can find them in the BlazeDS zipped file that you downloaded at the start.

Now, right click on the project node and go to Flex Project Nature –> Add Flex Project Nature

A popup would appear asking for Flex Project Settings. Choose the default settings: application server type to J2EE and check the box Using remote object access service. Click Next to configure J2EE server for your application

Enter your application deployment settings like your application server’s port number and the context root that you want for this application. Also specify the output folder, where you want the resulting SWF file (and the html wrapper) to be stored. Click Finish to successfully add the Flex Project Nature to your Java application.

It will automatically create a default MXML application file with the same name as the project to the source folder (configurable in Flex Build Path). We move this mxml file to flex folder that we created under src/flex folder (not necessarily needed, but we have a thing for being organized :-) ). Though for this, we also have to change the Flex Build Path. So, right click on the project node, go to properties. Click on Flex Build Path tab and set the following settings:

Click Add Folder and add “src”. Also change the main source folder from “src” to “src/flex”. Click Ok to update the compiler settings. You still need to set the testFlexRPC.mxml as the default mxml application. so, right click Project node, go to Properties, Go to tab Flex Application. click on Flex folder and click add. Now add the testFlexRPC.mxml file and click set on default button to make it default application file.

If you check out, the project must be giving you a compile-time error since we have not created any html file (wrapper) to embed the SWF file which contains the compiled flex application. So right click on the error and click ‘Re-create HTML Templates’ to create the default html wrapper which can be used as is.

Now, your application is ready to be deployed (technically), but since we have not added any display element and made use of Flex Remoting (the long and tiring process that we have done so far), so there is no use of deploying it currently.

Now, comes the easy part. Click the src/java and add a new package: mypackage and create a new Java File: SayHello.java ( as specified in remoting-config.xml ) It looks like the following:

SayHello.java

Now, this is a very simple example (because I think you already have had enough !!) and this is not something for which you have to go to Java from Flex. But it is enough to show you how things can be done and results calculated in Java can be passed to Flex (whether its a primitive or any other object: String or any user-defined object as well)

Now, we will call this java Method in Flex. Add the following code in testFlexRPC.mxml file, already created.

testFlexRPC.mxml

Again, this is not a best-practice way to code, but since I’m running out of space and you are running out of patience, so I’m doing things quickly :-)

Finally, we are ready for deployment and I’m using Tomcat to deploy my web application. To accomplish this, we create the following XML file specifying the context.

flexRPCJava.xml

To learn more on how to deploy Web Applications on Tomcat, please read my previous blog entry about the same.

Now, all you need to do is to start Tomcat and check whether your application is working correctly or not by checking the HTML wrapper that Flex Builder created for you:

I hope you are with me till now and would be happy to know that this (perhaps the longest blog I ever wrote) has finished and you have successfully learned how to use Flex with Java.

I could have taught the same in a very concise manner using the BlazeDS Turnkey Server and pre-configured examples, but that would have defeated the purpose of structuring and creating a web-application from scratch. Hope you had fun. Cheers !!

Any suggestions, corrections or Comments are welcome and wanted :-)

Singletons, Threads & Double Checked Locking

noreply@blogger.com (Anonymous) — Wed, 24 Mar 2010 07:42:00 +0000

This blog entry extends on the first entry I wrote about Singletons. Today I try to explain the usage of Singletons in a multi-threaded environment.

A typical Singleton would look like the following:

This Singleton class would work perfectly fine in a single-threaded environment. But, how many Java based applications that you have worked on, are single-threaded? None, perhaps.

Can you see what’s terribly wrong with it when your application has multiple threads running simultaneously ??

Well, the answer lies in the way the instance is lazy initialized. The null-checking and initializing the instance need to be an atomic operation. Lets see what would happen if following sequence of events happen:

Thead A calls getInstance() for the first time. And checks whether instance is null or not. It finds it true and goes to execute line 11.
At this point, it is pre-empted by another thread: Thread B, which also calls getInstance(), checks for the instance null check, since it is not yet initialized, the private constructor is called and instance is now initialized with a state.
Thread A resumes control back and starts from where it left i.e line 11. Now the real problem occurs. Since it checked for the null-check on line 10 when it last run and found it to be true, so when it resumes execution, it will execute from line 11 and again initialize the instance and hence two objects would be created and the whole point of having a single object is violated.

Thus, we really need to do something about the situation. No problems, Synchronization comes to the rescue. Most of us (naive programmers) would tend to get rid of this problem by writing code like below:

The only change that occurs here is that we have made our static factory as synchronized method, which makes sure that no possible combination of interleaving of threads could create two objects like it did in the previous case. Although, this works fine but on close inspection, we find that synchronization is necessary only for the first time, and not needed later on (since instance will always be non-null later on) And synchronizing the whole method is thus uncalled for and pretty expensive. We must think of other ways of accomplishing this.

1. Do Not Lazy Initialize

If we do NOT need lazy initialization of the resource, then a perfect method to do away with synchronization would be:

Using this, we depend on the JVM’s capability to execute the static block as soon as the class is loaded first (when it is accessed or referred in code).

Thus, the VM makes sure that the instance is well initialized, before any thread tries to call getInstance() method. And since static blocks are executed only once, so no chance of creating more objects. One scenario that I could fail this approach is when this class is loaded again (perhaps by a different classloader in a different namespace)

Another way to write the above code would be:

However, I prefer the first way (with static blocks) that gives us more flexibility by allowing us to write a block of code instead of just calling the constructor.

2. Use Double Checked Locking

A very common, popular and misunderstood programming idiom that looks like the following and works with Java 1.5 and above only.

See how cleverly, we have limited the scope of synchronization here. The synchronization occurs only for the first time (when the instance is null), after that the synchronization never occurs as the instance is not null. This is what we needed. But you must make this variable as volatile to work it correctly (due to Java Memory Model implementation)

To better understand this programming idiom, I would suggest reading this and this.

I think its enough for one blog post. Any code corrections, new ideas and comments are welcome.

Creating Immutable Objects in Java

noreply@blogger.com (Anonymous) — Sat, 27 Feb 2010 11:51:00 +0000

Immutable Objects are those objects, who cannot change their STATE once they are created. Most common examples of such objects are String, Integer, Double etc.. (other Wrapper classes). By State, we mean the values assigned to the instance variables of the object in question.

Immutable Classes are one of the most robust classes that you can ever build and the reasons that we love them are:

They are Thread-safe, hence no need to synchronize them for concurrent access.
They are Easy to construct, test and use
They Serve as good Map and Set keys
If such an object throws an exception, it is never left in undesirable or inconsistent state.

Strategy to Construct Immutable Objects

If we follow the following steps, we can easily create Immutable objects or convert an existing Mutable class into Immutable:

Since we have to restrict our object to change its state once they are created, we must not provide any setter methods.
If a object has references to other mutable objects, then do not provide getter methods that simply return a reference to the mutable object. Rather, create a new object containing the copy of the mutable object.
Don't allow any subclass to override methods of the given class. This can be done by making the class as final. Another way is to make the constructor as private and provide factory methods to construct the object.
Make all the fields private and final. This way only your class has the control how these fields are to be manipulated.

Also, do not provide any other methods that modify the object. In case you have to, then do not modify the existing object, rather create a copy of the original object, modify it and return the modified object.
Construct the whole object in one go, initialize the whole object (assign values to all the instance variables) while creating the object.

One may argue that immutable objects calls for creation of unnecessary objects every now and then, for example if we do

then a new String is created and the original string is not modified. For argument sake, we have 3 Strings created here. viz. “Agraj”, “ Mangal” and “Agraj Mangal”.

But this so-called shortcoming is taken care of by the Garbage Collector in Java, which marks any dead object for Garbage Collection (any object which has no active reference to it in any thread of execution)

Sankalan 2010 Goes Green….the Copenhagen Way !!

noreply@blogger.com (Anonymous) — Wed, 27 Jan 2010 16:53:00 +0000

The Department of Computer Science, University of Delhi once again proudly presents to you its annual technical fest: Sankalan 2010: Compiling Innovations towards green future….

The students at the department, understand the importance of global warming and its harmful effects and thus plan to create awareness and spread the word around.

So here we are, with open arms welcoming students all over the country to come and join us in this effort and have fun along the way. Sankalan ( a hindi word meaning Compilation ) has always been a tech-fest of its own kind, with students pouring in from everywhere and making it a success.

You can find out more information like the events (both technical and non-technical) on the fest’s blog. You can check out the official site here for registration and detailed information for the fest. So pack up your bags and get ready for entertainment and fun-packed stuff. Hope to see you there at 20-21st Feburary 2010.

Creating JBossWS Web Services with JBoss 4.2.3GA and JDK1.5

noreply@blogger.com (Anonymous) — Fri, 15 Jan 2010 18:36:00 +0000

Continuing from the last post, today we will learn about creating a Simple Web Service using jBossWS (a JAX-WS implementation) and deploy it on JBoss Server. Also, we will see how can we create a WS-Client using in-build utilities and consume the web service with ease.

Prerequisites:

Intermediate knowledge of Java, some experience with XML would help, though not necessary.
Basic Know-how of a web-application
Setting up the required environment.

Getting Started:

Create a New Java Project. Name it anything you like. Create appropriate structure for a web application like we create an output folder named ‘web’ and create ‘WEB-INF’ in it, which will hold the deployment descriptor ‘web.xml’. The initial structure of our web application looks as follows:

With JBossWS, to create a web service is as easy as creating a Java class and exposing a method and create its entry in the deployment descriptor. Lets first create an entry in web.xml for the the EndpointServlet class and configure it for the Java class containing the Web Service implementation as shown below:Here, we specify EndpointServlet (comes bundled with JBossWS stack) which is used to publish/deploy your web service over JBoss. We also provide its mapping giving the url-pattern of the web service.

Lets see how our Java Class which contains the web service would look like:

Notice that we have noticed JAX-WS Annotations to decorate our class. The @WebService annotations tells us that this class contains methods exposed by a web service and @WebMethod annotation points out exactly which method is exposed.

To make sure that your code compiles, you must include the JAR’s that come with JBossWS native stack. Therefore, we add the following JAR’s to the lib folder of WEB-INF and also configure it on the build-path of the project so that you do not get compilation error in Eclipse.

jaxb-api.jar
jbossws-native-jaxws-ext.jar
jbossws-native-jaxws.jar
jbossws-native-saaj.jar

So, thats all you need to do in order to expose your web service. Lets now publish this web service on JBoss. To do so, we will package it as a WAR file using ANT. I have used the following ANT script to create WAR for my web service.

Now, you can copy this war file to the deploy directory of your JBoss Installation. Restart your server and check the logs to see whether it is deployed successfully or not.

[TomcatDeployer] deploy, ctxPath=/jaxWS,
warUrl=.../tmp/deploy/tmp5621016708388909925jaxWS-exp.war/
[WSDLFilePublisher] WSDL published to: file:/E:/JBoss/jboss-4.2.3.GA
/server/default/data/wsdl/jaxWS.war/HelloWorldService300665606.wsdl

So, that tells you that your web service has been deployed. To double check, you can always check the JBoss web service console on this url: http://localhost:8085/jbossws/services It shows you a list of all endpoints deployed currently, something like below:

Lets also have a look at a snippet of generated WSDL, though explaining this is out of scope of this entry.

JAX-WS provides supports for all Java in-build data types as well as for complex user-defined objects. The WSDL that is generated on publishing the web service contains all the information about the parameters accepted by the web service and also about the format in which the data is returned. Thus, this WSDL is more of a contract on which the communicating parties must agree before communicating.

Client Generation:

Now, we consume this web service by creating client using utilities provided by JBossWS stack ( Examples include wsconsume, wsget, wsrunclient etc )

>>> wsconsume –k http://localhost:8085/jaxWS/prodsWS?wsdl

wsconsume will parse the WSDL and –k option will generate the java classes which will be used by the client using JAXB framework.

Now, we will create a TestClient (to test our webservice), which will finally consume the web service.

As expected, on running this client, it will print “Hello My Name is Agraj” as output. Please note that in order to run this client successfully, you must add few more client jars to the project.

The final structure of the web application (web service + client) looks like following:

So, that’s all I want to talk about web services today, I hope it was of some help. Please post your views or corrections as comments.

Note: You may encounter a few problems while developing web services using JBossWS and JDK 1.6 since there are some compatibility issues and conflicting jars that create problems. Your best friend in such a case is Google :-)