There are several things one can do to improve overall site speed. Like:

1. Reduce number of http queries by combining JS and CSS files
2. GZip all the content before serving the request.
3. Compress images on web page with tools like http://tinypng.com
4. And many more…

Reference: Compress PHP, JS, CSS for Website Optimization

You may already have implemented most of these steps in your website. But there is always a room for optimization

Just take one of your site page URL and use Google Pagespeed tool to determine overall PageSpeed score. This tool and its plugin for firefox and chrome can be used to analyze several performance related aspects of a webpage.

Among several suggestions that PageSpeed offers, one particular is of our interest which is serving multiple HTTP requests. If your webpage has too many external JavaScripts / CSS files or too many image files, the browser will send a unique http request for each of those content during page load. This reduces the performance significantly there by impacting your seo.

Although you can combine and compress all JS and CSS files to reduce number of http requests, but that would not help much if your webpage has several images.

The first step in reducing number of Image requests is to combine all the small image icons in one big image sheet using a simple technique called CSS Sprites. I strongly suggest you to use CSS Sprite if you are not already doing this on your website.

Lazy Image Loading

After doing all these changes still if you have lots of images on your website, you might want to lazy load these images. Meaning load the image only when it is being viewed there by deferring http call until user is watching the image.

This technique can be very much useful in websites which display list of products with images. User can scroll through list and instead of loading all the product images while loading webpage, each image is loaded asynchronously when it comes in users viewport.

Now to achieve this we use simple JQuery snippet:

Step 1: Change <IMG> tag

First change the <img> tag for which you want to lazy load image to:

<!-- Before: -->
<img src="http://foo/product.png" width="300px" height="200px" />

<!-- After: -->
<img src="blank.gif" class="lazy" data-src="http://foo/product.png" 
			width="300px" height="200px" />

Notice how we moved our image url from src to data-src attribute. Also we added blank.gif which is 1 px transparent gif file in src attribute. We also added a CSS class lazy to the image. This is to mark the image for lazy loading in jquery code which we will see shortly. Also do not forget to mention height and width attribute with <img> tag. This make sure browser leave enough space around blank.gif to load original image.

Now on pageload, browser will load blank.gif file instead of product.png thus making http request more faster. If you have several images with src=blank.gif, browser will load it just once and use it from cache.

Step 2: The JQuery Code Snippet

We want to load original image once that image is in browsers visible area. Following JQuery snippet do this task.

(function($) {
	var lazyloadImage = function(){

		$('img.lazy').each(function(){
			var distanceToTop = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			var isVisible = distanceToTop - scroll < windowHeight;
			if (isVisible) {
				$(this).attr('src', $(this).attr('data-src')).removeClass('lazy');
			}
		});

	};

	$(function(){
		$(window).scroll(function() {
			lazyloadImage();
		});
	});

	lazyloadImage();

})(jQuery);

In this snippet we hook a function to browsers scroll event. For each image that has lazy css class on it, we iterate and see if the image is in visible area. If it is then we just copy value from image’s data-src to its src attribute. Once the image’s src attribute changes, browser will automatically load its content. Note how we remove lazy class once the image is loaded to avoid further changes in DOM.

Online Demo

Check the online demo: Online Demo

Further Optimization using data URI

The above image lazy loading technique reduce the page size significantly during the load time, but it still performs an http request on blank.gif. If somehow browser is not caching blank.gif image, then it will unnecessarily perform multiple http requests for it for each lazy image.

We can further optimize this by using Data URIs. It is a technique by which image data is directly embedded into document using some URI instead of linking external images within element or background-image in CSS.

The biggest reason why you want to do this is to save HTTP Requests.

Just change the <img> tag we saw previously to:

<!-- Before: -->
<img src="blank.gif" class="lazy" data-src="http://foo/product.png" 
			width="300px" height="200px" />

<!-- After: -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" 
		class="lazy" data-src="http://foo/product.png" 
			width="300px" height="200px" />

So intead of linking to external image blank.gif, we embedded its content in src attribute of <img> element using data URI. This will significantly reduces number of http requests in your webpage.

SEO Consideration

Lazy loading images would improve site speed significantly. But it also makes images less crawlable. Search engines like Google indexes the images from a website and display those in Image search. So if your website’s main source of traffic is image search than you may not want to implement this optimization technique.

But as I said earlier, there is always room for optimization. You can keep main images on your webpage as it is and make other less significant images to load dynamically. For example the Avatar images that you display in each comment. These images are not significant for indexing. A blog article can be showing 50 comments each with an Avatar image. Instead of loading 50 images during pageload, you can make them lazy by using our lazy code snippet.

Gravtar Images on WordPress

WordPress uses something called Gravtar to show user avatar image in each comment. If a user does not have an avatar setup in gravtar.com then a default gravtar will be displayed.

Lazy loading these hundreds of gravtar images in a wordpress blog should definitely increase site speed by reducing all those http requests. Another advantage of doing this is to reduce HTTP redirect requests at pageload time. See below screen shot of Google PageSpeed.

Notice how each http request generates an redirect request that browser must follow to load that image!! This is due to the fact that if a user has not setup gravtar image, then a default image will be displayed. You don’t want to load those 50 avatar images during load time and follow the redirects in case user doesnt have a gravtar.

So why not change our wordpress comment template and load these avatar images lazily.

If you check your wordpress theme’s comment template, you’ll notice a function get_avatar() which is used to display user avatar image.

//comment template
..
	<?php get_avatar( $comment, 50 ); ?>
..

WordPress’s get_avatar function will create an <img> tag with users avatar URL. We need to change the src attribute to data-src and use data-uri as mentioned above in src attribute.

But as wordpress does not provide users gravtar URL directly, we need to parse this information from get_avatar and use it to create our own <img> tag with lazy attribute.

Add below function in your wordpress theme’s functions.php file.

theme/…./functions.php

function get_avatar_url($get_avatar){
    preg_match("/src='(.*?)'/i", $get_avatar, $matches);
    return $matches[1];
}

And then use get_avatar_url function in comment template like:

//comment template
/* Before **
	<?php get_avatar( $comment, 50 ); ?>
*/

/* After */
..
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
	width="50" height="50" class="lazy"
	data-src="<?php echo get_avatar_url(get_avatar( $comment, 50 )); ?>" />

This should render an avatar image with lazy attributes. Now combining this with our jquery code should load all the gravtar images in comment section asynchronously.

I Don’t Want To Use JQuery

If you are not keen on using JQuery snippet as you might not using JQuery alltogether in your website! No worries. Following JavaScript code from Lorenzo Giuliani does exactly same thing.

/* lazyload.js (c) Lorenzo Giuliani
 * MIT License (http://www.opensource.org/licenses/mit-license.html)
 *
 * expects a list of:  
 * `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
 */
 
!function(window){
  var $q = function(q, res){
        if (document.querySelectorAll) {
          res = document.querySelectorAll(q);
        } else {
          var d=document
            , a=d.styleSheets[0] || d.createStyleSheet();
          a.addRule(q,'f:b');
          for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
            l[b].currentStyle.f && c.push(l[b]);
 
          a.removeRule(0);
          res = c;
        }
        return res;
      }
    , addEventListener = function(evt, fn){
        window.addEventListener
          ? this.addEventListener(evt, fn, false)
          : (window.attachEvent)
            ? this.attachEvent('on' + evt, fn)
            : this['on' + evt] = fn;
      }
    , _has = function(obj, key) {
        return Object.prototype.hasOwnProperty.call(obj, key);
      }
    ;
 
  function loadImage (el, fn) {
    var img = new Image()
      , src = el.getAttribute('data-src');
    img.onload = function() {
      if (!! el.parent)
        el.parent.replaceChild(img, el)
      else
        el.src = src;
 
      fn? fn() : null;
    }
    img.src = src;
  }
 
  function elementInViewport(el) {
    var rect = el.getBoundingClientRect()
 
    return (
       rect.top    >= 0
    && rect.left   >= 0
    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    )
  }
 
    var images = new Array()
      , query = $q('img.lazy')
      , processScroll = function(){
          for (var i = 0; i < images.length; i++) {
            if (elementInViewport(images[i])) {
              loadImage(images[i], function () {
                images.splice(i, i);
              });
            }
          };
        }
      ;
    // Array.prototype.slice.call is not callable under our lovely IE8 
    for (var i = 0; i < query.length; i++) {
      images.push(query[i]);
    };
 
    processScroll();
    addEventListener('scroll',processScroll);
 
}(this);

Just add above JavaScript code in your site and you are good to go.

Try this in your site today and see how much score you gain on Google PageSpeed

Check the online demo: Online Demo

Here are 20 very useful JavaScript tips and tricks for you.

Disclaimer: Not all these snippet are written by me. Some of them are collected from other sources on Internet.

1. Converting JavaScript Array to CSV

First one goes like this. You have a javascript array of strings (or numbers) and you want to convert it to comma separated values (csv). We’ll below is the code snippet:
Reference: Array to CSV in JavaScript

var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
 
var str = fruits.valueOf();
 
//print str: apple,peaches,oranges,mangoes

The valueOf() method will convert an array in javascript to a comma separated string.

Now what if you want to use pipe (|) as delimeter instead of comma. You can convert a js array into a delimeted string using join() method. See below:

var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
 
var str = fruits.join("|");
 
//print str: apple|peaches|oranges|mangoes

The join() method will convert the array into a pipe separated string.

2. Convert CSV to Array in JavaScript

Now what if you want to convert a comma seprated string into a JavaScript array? We’ll there is a method for that too. You can use split() method to split a string using any token (for instance comma) and create an array.

Reference: Array to CSV in JavaScript

In below example we split string str on comma (,) and create a fruitsArray array.

var str = "apple, peaches, oranges, mangoes";
 
var fruitsArray = str.split(",");
 
//print fruitsArray[0]: apple

3. Remove Array element by Index

You have an array. You want to remove a perticular element from array based on its index. We’ll you can do so using splice() method. This method can add as well as removes element from an array. We will stick to its removal usage.
Reference: Remove element by array index

function removeByIndex(arr, index) {
    arr.splice(index, 1);
}

test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test[2] = 'Cat';
test[3] = 'Dog';

alert("Array before removing elements: "+test);

removeByIndex(test, 2);

alert("Array after removing elements: "+test);

4. Remove Array element by Value

This one is very useful. You have an array and you want to remove an element based on its value (instead of index).
Reference: Remove element by array index

function removeByValue(arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
}

var somearray = ["mon", "tue", "wed", "thur"]

removeByValue(somearray, "tue");

//somearray will now have "mon", "wed", "thur"

See how in above code we defined a method removeByValue that takes serves the purpose. In JavaScript you can define new functions to classes at runtime (although this is discourage) using prototypes.

In below code snippet, we create a new method removeByValue() within Array class. So now you can call this method as any other arrays method.

Array.prototype.removeByValue = function(val) {
    for(var i=0; i<this.length; i++) {
        if(this[i] == val) {
            this.splice(i, 1);
            break;
        }
    }
}
//..

var somearray = ["mon", "tue", "wed", "thur"]

somearray.removeByValue("tue");

//somearray will now have "mon", "wed", "thur"

5. Calling JavaScript function from String

Sometime you want to call a Javascript method at runtime whos name you know. Let say there is a method “foo()” which you want to call at runtime. Below is a small JS snippet that helps you calling a method just by its name.

Reference: Call Function as String

var strFun = "someFunction"; //Name of the function to be called
var strParam = "this is the parameter"; //Parameters to be passed in function
 
//Create the function
var fn = window[strFun];
 
//Call the function
fn(strParam);

6. Generate Random number from 1 to N

Below little snippet helps you in generating random number between 1 to N. Might come handy for your next JS game.

//random number from 1 to N
var random = Math.floor(Math.random() * N + 1);

//random number from 1 to 10
var random = Math.floor(Math.random() * 10 + 1);

//random number from 1 to 100
var random = Math.floor(Math.random() * 100 + 1);

7. Capture browser close button event or exiting the page in JavaScript

This is a common use case. You want to capture the browsers close event so that you can alert user if there is any unsaved data on webpage that should be saved. Below javascript snippet will help you in that.

Reference: Capture Browser Close Event

<script language="javascript">
function fnUnloadHandler() {
       // Add your code here
       alert("Unload event.. Do something to invalidate users session..");
}
</script>
<body onbeforeunload="fnUnloadHandler()">
    <!-- Your page content -->
</body>

8. Warn user if Back is pressed

This is same as above. Difference is instead of capturing close event here we capture back button event. So that we know if user is moving awaw from this webpage.
Reference: Capture Browser Back Button

window.onbeforeunload = function() { 
	return "You work will be lost."; 
};

9. Check if Form is Dirty

A common usecase. You need to check if user changed anything in an HTML form. Below function formIsDirty returns a boolean value true or false depending on weather user modified something within the form.

/**
 * Determines if a form is dirty by comparing the current value of each element
 * with its default value.
 *
 * @param {Form} form the form to be checked.
 * @return {Boolean} <code>true</code> if the form is dirty, <code>false</code>
 *                   otherwise.
 */
function formIsDirty(form) {
  for (var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    var type = element.type;
    if (type == "checkbox" || type == "radio") {
      if (element.checked != element.defaultChecked) {
        return true;
      }
    }
    else if (type == "hidden" || type == "password" ||
             type == "text" || type == "textarea") {
      if (element.value != element.defaultValue) {
        return true;
      }
    }
    else if (type == "select-one" || type == "select-multiple") {
      for (var j = 0; j < element.options.length; j++) {
        if (element.options[j].selected !=
            element.options[j].defaultSelected) {
          return true;
        }
      }
    }
  }
  return false;
}

window.onbeforeunload = function(e) {
  e = e || window.event;  
  if (formIsDirty(document.forms["someForm"])) {
    // For IE and Firefox
    if (e) {
      e.returnValue = "You have unsaved changes.";
    }
    // For Safari
    return "You have unsaved changes.";
  }
};

10. Disable Back button using JavaScript

This one is tricky. You want to disable the browsers back button (Dont ask me why!!). Below code snippet will let you do this. The only catch here is that you need to put this code in page where you dont want user to come back. See below reference for more details.
Reference: Disable Browsers Back Button

<SCRIPT type="text/javascript">
    window.history.forward();
    function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
    onpageshow="if (event.persisted) noBack();" onunload="">

11. Deleting Multiple Values From Listbox in JavaScript

You have a SELECT box. User can select multiple OPTIONS from this SELECT box and remove them. Below Javascript function selectBoxRemove let you do this. Just pass ID of SELECT object you want to remove OPTIONS in.

Reference: Delete Multiple Options in Select

function selectBoxRemove(sourceID) {
 
    //get the listbox object from id.
    var src = document.getElementById(sourceID);
  
    //iterate through each option of the listbox
    for(var count= src.options.length-1; count >= 0; count--) {
 
         //if the option is selected, delete the option
        if(src.options[count].selected == true) {
  
                try {
                         src.remove(count, null);
                         
                 } catch(error) {
                         
                         src.remove(count);
                }
        }
    }
}

12. Listbox Select All/Deselect All using JavaScript

You can use below JS snippet to select/deselect all the OPTIONS from a SELECT box. Just pass the ID of select box you want to perform this operation on and also a boolean value isSelect specifying what operation you want to perform.
Reference: Select All/None using Javascript

function listboxSelectDeselect(listID, isSelect) {
    var listbox = document.getElementById(listID);
    for(var count=0; count < listbox.options.length; count++) {
            listbox.options[count].selected = isSelect;
    }
}

13. Listbox Move selected items Up / Down

This one is useful if you are playing a lot with multi options select box in your application. This function let you move select OPTIONS in a SELECT box to UP or DOWN. See below reference for more details.
Reference: Move Up/Down Selected Items in a Listbox

function listbox_move(listID, direction) {
 
    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;
 
    if(-1 == selIndex) {
        alert("Please select an option to move.");
        return;
    }
 
    var increment = -1;
    if(direction == 'up')
        increment = -1;
    else
        increment = 1;
 
    if((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length-1)) {
        return;
    }
 
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text
 
    listbox.options[selIndex + increment].value = selValue;
    listbox.options[selIndex + increment].text = selText;
 
    listbox.selectedIndex = selIndex + increment;
}
//..
//..

listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option

14. Listbox Move Left/Right Options

This javascript function lets you move selected OPTIONS between two SELECT boxes. Check below reference for details.
Reference: Move Options Left/Right between two SELECT boxes

function listbox_moveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);
 
    for(var count=0; count < src.options.length; count++) {
 
        if(src.options[count].selected == true) {
                var option = src.options[count];
 
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         dest.add(newOption, null); //Standard
                         src.remove(count, null);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}
//..
//..

listbox_moveacross('countryList', 'selectedCountryList');

15. Initialize JavaScript Array with series of numbers

Sometime you want to initialize a Javascript array with series of numbers. Below code snippet will let you achieve this. This will initialiaze array numbers with numbers 1 to 100.

var numbers = [];
for(var i=1; numbers.push(i++)<100;);
//numbers = [0,1,2,3 ... 100]

16. Rounding Numbers to ‘N’ Decimals

This one is quite useful. It will let you round off a number to ‘N’ decimal places. Here in below example we are rounding of a number to 2 decimal places.

var num = 2.443242342;
alert(num.toFixed(2)); // 2.44

Note that we use toFixed() method here. toFixed(n) provides n length after the decimal point; whereas toPrecision(x) provides x total length.

num = 500.2349;
result = num.toPrecision(4); // result will equal 500.2

17. Check if String contains another substring in JavaScript

Below code snippet (courtesy Stackoverflow) let you check if a given string contains another substring.

Reference: stackoverflow

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(obj, start) {
         for (var i = (start || 0), j = this.length; i < j; i++) {
             if (this[i] === obj) { return i; }
         }
         return -1;
    }
}

if (!String.prototype.contains) {
    String.prototype.contains = function (arg) {
        return !!~this.indexOf(arg);
    };
}

The code will add two new methods to String, indexOf and contains. Once this is done, you can use contains method to check weather a substring is present in a given string.

var hay = "a quick brown fox jumps over lazy dog";
var needle = "jumps";
alert(hay.contains(needle));

18. Remove Duplicates from JavaScript Array

Aha!! You know this one comes quite handy. Just call removeDuplicates method and pass the array, it should remove all duplicate elements from the array.

function removeDuplicates(arr) {
	var temp = {};
	for (var i = 0; i < arr.length; i++)
		temp[arr[i]] = true;

	var r = [];
	for (var k in temp)
		r.push(k);
	return r;
}

//Usage
var fruits = ['apple', 'orange', 'peach', 'apple', 'strawberry', 'orange'];
var uniquefruits = removeDuplicates(fruits);
//print uniquefruits ['apple', 'orange', 'peach', 'strawberry'];

19. Trim a String in JavaScript

Below code will add a method trim() to String which can be used to remove spaces from both sides of a string.

if (!String.prototype.trim) {
   String.prototype.trim=function() {
   	return this.replace(/^\s+|\s+$/g, '');
   };
}

//usage
var str = "  some string    ";
str.trim();
//print str = "some string"

20. Redirect webpage in JavaScript

This javascript code should perform http redirect on a given URL.

window.location.href = "http://viralpatel.net";

21. Encode a URL in JavaScript

Whenever you are making an http request and passing some parameters. You should encode the URL string. Use encodeURIComponent function for encoding a url parameter.
Reference: w3scools

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

Now we want to do this without using Javascript or JQuery. Just plain HTML and CSS. Nothing fancy.

Lets dive into code.

1. The HTML

The HTML should looks pretty much like HTML. Nothing fancy here either. Just a bunch of radiobuttons following by labels.

    <input type="radio" id="radio1" name="radios" value="all" checked>
       <label for="radio1">iPhone</label>
    <input type="radio" id="radio2" name="radios"value="false">
       <label for="radio2">Galaxy S IV</label>
    <input type="radio" id="radio3" name="radios" value="true">
       <label for="radio3">Nexus S</label> 

2. The CSS

Now the magic is in CSS. We want to change the look n feel of traditional radiobuttons into sexy pushbuttons.

Before we see the CSS, lets check one important CSS selector which you might not know already. It is called Adjacent sibling selectors. The idea is to select an element next to another element using syntax E1 + E2. So if I write a CSS code like:

div + p {
     color: red;
} 

This should select only those <p> elements which are adjacent (i.e. next to) <div> tags! This can come handy in lot of scenarios when you want to apply certain style to element based on their sequence.

So now we got the idea and know how Adjacent selector is used, lets apply that in our problem at hand.

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

Demo

JSFiddle: http://jsfiddle.net/viralpatel/p499h/

Voilla!! That works!! Although they look different, these are basically radiobuttons at heart. You can create forms using these buttons and on submit, can handle values at server side as normal radiobuttons. No Javascript, no jquery hacks..

3. More CSS

Lets add some more style to these radiobuttons and make them look more pushbutton’ish. Style courtesy Twitter Bootstrap

	input[type=radio] {
		display:none;
	}

	input[type=radio] + label {
		display:inline-block;
		margin:-2px;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		color: #333;
		text-align: center;
		text-shadow: 0 1px 1px rgba(255,255,255,0.75);
		vertical-align: middle;
		cursor: pointer;
		background-color: #f5f5f5;
		background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
		background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
		background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
		background-image: -o-linear-gradient(top,#fff,#e6e6e6);
		background-image: linear-gradient(to bottom,#fff,#e6e6e6);
		background-repeat: repeat-x;
		border: 1px solid #ccc;
		border-color: #e6e6e6 #e6e6e6 #bfbfbf;
		border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
		border-bottom-color: #b3b3b3;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	}

	input[type=radio]:checked + label {
		   background-image: none;
		outline: 0;
		-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
			background-color:#e0e0e0;
	}

Demo

JSFiddle: http://jsfiddle.net/viralpatel/p499h/

The Checkboxes

Same technique can be applied on checkboxes. Just replace type=radio with type=checkbox in above CSS and see how normal looking html checkbox changes into pushbutton checkbox.

Demo

The code is available on JSFiddle.
Play on JSFiddle: http://jsfiddle.net/viralpatel/p499h/

XPath comes with powerful expressions that can be used to parse an xml document and retrieve relevant information.

For demo, let us consider an xml file that holds information of employees.

<?xml version="1.0"?>
<Employees>
	<Employee emplid="1111" type="admin">
		<firstname>John</firstname>
		<lastname>Watson</lastname>
		<age>30</age>
		<email>johnwatson@sh.com</email>
	</Employee>
	<Employee emplid="2222" type="admin">
		<firstname>Sherlock</firstname>
		<lastname>Homes</lastname>
		<age>32</age>
		<email>sherlock@sh.com</email>
	</Employee>
	<Employee emplid="3333" type="user">
		<firstname>Jim</firstname>
		<lastname>Moriarty</lastname>
		<age>52</age>
		<email>jim@sh.com</email>
	</Employee>
	<Employee emplid="4444" type="user">
		<firstname>Mycroft</firstname>
		<lastname>Holmes</lastname>
		<age>41</age>
		<email>mycroft@sh.com</email>
	</Employee>
</Employees>

I have saved this file at path C:\employees.xml. We will use this xml file in our demo and will try to fetch useful information using XPath. Before we start lets check few facts from above xml file.

1. There are 4 employees in our xml file
2. Each employee has a unique employee id defined by attribute emplid
3. Each employee also has an attribute type which defines whether an employee is admin or user.
4. Each employee has four child nodes: firstname, lastname, age and email
5. Age is a number

Let’s get started…

1. Learning Java DOM Parsing API

In order to understand XPath, first we need to understand basics of DOM parsing in Java. Java provides powerful implementation of domparser in form of below API.

1.1 Creating a Java DOM XML Parser

First, we need to create a document builder using DocumentBuilderFactory class. Just follow the code. It’s pretty much self explainatory.

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
//...

DocumentBuilderFactory builderFactory =
        DocumentBuilderFactory.newInstance();
DocumentBuilder builder = null;
try {
    builder = builderFactory.newDocumentBuilder();
} catch (ParserConfigurationException e) {
    e.printStackTrace();  
}

1.2 Parsing XML with a Java DOM Parser

Once we have a document builder object. We uses it to parse XML file and create a document object.

import org.w3c.dom.Document;
import java.io.IOException;
import org.xml.sax.SAXException;
//...

try {
    Document document = builder.parse(
            new FileInputStream("c:\\employees.xml"));
} catch (SAXException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

In above code, we are parsing an XML file from filesystem. Sometimes you might want to parse XML specified as String value instead of reading it from file. Below code comes handy to parse XML specified as String.

String xml = ...;
Document xmlDocument = builder.parse(new ByteArrayInputStream(xml.getBytes()));

1.3 Creating an XPath object

Once we have document object. We are ready to use XPath. Just create an xpath object using XPathFactory.

import javax.xml.xpath.XPath;
import javax.xml.xpath.XPathFactory;
//...

XPath xPath =  XPathFactory.newInstance().newXPath();

1.4 Using XPath to parse the XML

Use xpath object to complie an XPath expression and evaluate it on document. In below code we read email address of employee having employee id = 3333. Also we have specified APIs to read an XML node and a nodelist.

String expression = "/Employees/Employee[@emplid='3333']/email";

//read a string value
String email = xPath.compile(expression).evaluate(xmlDocument);

//read an xml node using xpath
Node node = (Node) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODE);

//read a nodelist using xpath
NodeList nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);

2. Learning XPath Expressions

As mentioned above, XPath uses a path expression to select nodes or list of node from an xml document. Heres a list of useful paths and expression that can be used to select any node/nodelist from an xml document.

Below list of expressions are called Predicates. The Predicates are defined in square brackets [ ... ]. They are used to find a specific node or a node that contains a specific value.

There are other useful expressions that you can use to query the data.

Read this w3school page for more details: http://www.w3schools.com/xpath/xpath_syntax.asp

3. Examples: Query XML document using XPath

Below are few examples of using different expressions of xpath to fetch some information from xml document.

3.1 Read firstname of all employees

Below expression will read firstname of all the employees.

String expression = "/Employees/Employee/firstname";
System.out.println(expression);
NodeList nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
for (int i = 0; i < nodeList.getLength(); i++) {
    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
}

Output:

John
Sherlock
Jim
Mycroft

3.2 Read a specific employee using employee id

Below expression will read employee information for employee with emplid = 2222. Check how we used API to retrieve node information and then traveresed this node to print xml tag and its value.

String expression = "/Employees/Employee[@emplid='2222']";
System.out.println(expression);
Node node = (Node) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODE);
if(null != node) {
	nodeList = node.getChildNodes();
	for (int i = 0;null!=nodeList && i < nodeList.getLength(); i++) {
		Node nod = nodeList.item(i);
		if(nod.getNodeType() == Node.ELEMENT_NODE)
			System.out.println(nodeList.item(i).getNodeName() + " : " + nod.getFirstChild().getNodeValue()); 
	}
}

Output:

firstname : Sherlock
lastname : Homes
age : 32
email : sherlock@sh.com

3.3 Read firstname of all employees who are admin

This is again a predicate example to read firstname of all employee who are admin (defined by type=admin).

String expression = "/Employees/Employee[@type='admin']/firstname";
System.out.println(expression);
NodeList nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
for (int i = 0; i < nodeList.getLength(); i++) {
    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
}

Output:

John
Sherlock

3.4 Read firstname of all employees who are older than 40 year

See how we used predicate to filter employees who has age > 40.

String expression = "/Employees/Employee[age>40]/firstname";
NodeList nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
for (int i = 0; i < nodeList.getLength(); i++) {
    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
}

Output:

Jim
Mycroft

3.5 Read firstname of first two employees (defined in xml file)

Within predicates, you can use position() to identify the position of xml element. Here we are filtering first two employees using position().

String expression = "/Employees/Employee[position() <= 2]/firstname";
NodeList nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
for (int i = 0; i < nodeList.getLength(); i++) {
    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
}

Output:

John
Sherlock

4. Complete Java source code

In order to execute this source, just create a basic Java project in your IDE or just save below code in Main.java and execute. It will need employees.xml file as input. Copy the employee xml defined in start of this tutorial at c:\\employees.xml.

package net.viralpatel.java;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.xpath.XPath;
import javax.xml.xpath.XPathConstants;
import javax.xml.xpath.XPathExpressionException;
import javax.xml.xpath.XPathFactory;

import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

public class Main {
	public static void main(String[] args) {

		try {
			FileInputStream file = new FileInputStream(new File("c:/employees.xml"));
				
			DocumentBuilderFactory builderFactory = DocumentBuilderFactory.newInstance();
			
			DocumentBuilder builder =  builderFactory.newDocumentBuilder();
			
			Document xmlDocument = builder.parse(file);

			XPath xPath =  XPathFactory.newInstance().newXPath();

			System.out.println("*************************");
			String expression = "/Employees/Employee[@emplid='3333']/email";
			System.out.println(expression);
			String email = xPath.compile(expression).evaluate(xmlDocument);
			System.out.println(email);

			System.out.println("*************************");
			expression = "/Employees/Employee/firstname";
			System.out.println(expression);
			NodeList nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
			for (int i = 0; i < nodeList.getLength(); i++) {
			    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
			}

			System.out.println("*************************");
			expression = "/Employees/Employee[@type='admin']/firstname";
			System.out.println(expression);
			nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
			for (int i = 0; i < nodeList.getLength(); i++) {
			    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
			}

			System.out.println("*************************");
			expression = "/Employees/Employee[@emplid='2222']";
			System.out.println(expression);
			Node node = (Node) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODE);
			if(null != node) {
				nodeList = node.getChildNodes();
				for (int i = 0;null!=nodeList && i < nodeList.getLength(); i++) {
					Node nod = nodeList.item(i);
					if(nod.getNodeType() == Node.ELEMENT_NODE)
						System.out.println(nodeList.item(i).getNodeName() + " : " + nod.getFirstChild().getNodeValue()); 
				}
			}
			
			System.out.println("*************************");

			expression = "/Employees/Employee[age>40]/firstname";
			nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
			System.out.println(expression);
			for (int i = 0; i < nodeList.getLength(); i++) {
			    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
			}
		
			System.out.println("*************************");
			expression = "/Employees/Employee[1]/firstname";
			System.out.println(expression);
			nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
			for (int i = 0; i < nodeList.getLength(); i++) {
			    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
			}
			System.out.println("*************************");
			expression = "/Employees/Employee[position() <= 2]/firstname";
			System.out.println(expression);
			nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
			for (int i = 0; i < nodeList.getLength(); i++) {
			    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
			}

			System.out.println("*************************");
			expression = "/Employees/Employee[last()]/firstname";
			System.out.println(expression);
			nodeList = (NodeList) xPath.compile(expression).evaluate(xmlDocument, XPathConstants.NODESET);
			for (int i = 0; i < nodeList.getLength(); i++) {
			    System.out.println(nodeList.item(i).getFirstChild().getNodeValue()); 
			}

			System.out.println("*************************");

		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (SAXException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (ParserConfigurationException e) {
			e.printStackTrace();
		} catch (XPathExpressionException e) {
			e.printStackTrace();
		}		
	}
}

That’s all folks

You might also want to check what kind of internet connection is available in handset. For example is wifi currently enabled? or is mobile data network is connected.

Check Internet Connection

Here is a simple code snippet that will help you identify what kind of internet connection a user has on her device.

First we need following permission in order to access network state. Add following permission to your AndroidManifest.xml file.

Permissions required to access network state:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Now check following utility class NetworkUtil. It has method getConnectivityStatus which returns an int constant depending on current network connection. If wifi is enabled, this method will return TYPE_WIFI. Similarly for mobile data network is returns TYPE_MOBILE. You got the idea!!

There is also method getConnectivityStatusString which returns current network state as a more readable string.

NetworkUtil.java

package net.viralpatel.network;

import android.content.Context;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;

public class NetworkUtil {
	
	public static int TYPE_WIFI = 1;
	public static int TYPE_MOBILE = 2;
	public static int TYPE_NOT_CONNECTED = 0;
	
	
	public static int getConnectivityStatus(Context context) {
		ConnectivityManager cm = (ConnectivityManager) context
				.getSystemService(Context.CONNECTIVITY_SERVICE);

		NetworkInfo activeNetwork = cm.getActiveNetworkInfo();
		if (null != activeNetwork) {
			if(activeNetwork.getType() == ConnectivityManager.TYPE_WIFI)
				return TYPE_WIFI;
			
			if(activeNetwork.getType() == ConnectivityManager.TYPE_MOBILE)
				return TYPE_MOBILE;
		} 
		return TYPE_NOT_CONNECTED;
	}
	
	public static String getConnectivityStatusString(Context context) {
		int conn = NetworkUtil.getConnectivityStatus(context);
		String status = null;
		if (conn == NetworkUtil.TYPE_WIFI) {
			status = "Wifi enabled";
		} else if (conn == NetworkUtil.TYPE_MOBILE) {
			status = "Mobile data enabled";
		} else if (conn == NetworkUtil.TYPE_NOT_CONNECTED) {
			status = "Not connected to Internet";
		}
		return status;
	}
}

You can use this utility class in your android app to check the network state of the device at any moment.

Now this code will return you the current network state whenever the utility method is called. What if you want to do something in your android app when network state changes? Lets say when Wifi is disabled, you need to put your android app service to sleep so that it does not perform certain task. Now this is just one usecase. The idea is to create a hook which gets called whenever network state changes. And you can write your custom code in this hook to handle the change in network state.

Broadcast Receiver to handle changes in Network state

You can easily handle the changes in network state by creating your own Broadcast Receiver. Following is a broadcast receiver class where we handle the changes in network.

Check onReceive() method. This method will be called when state of network changes. Here we are just creating a Toast message and displaying current network state. You can write your custom code in here to handle changes in connection state.

NetworkChangeReceiver.java

package net.viralpatel.network;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.widget.Toast;

public class NetworkChangeReceiver extends BroadcastReceiver {

	@Override
	public void onReceive(final Context context, final Intent intent) {

		String status = NetworkUtil.getConnectivityStatusString(context);

		Toast.makeText(context, status, Toast.LENGTH_LONG).show();
	}
}

Once we define our BroadcastReceiver, we need to define the same in AndroidMenifest.xml file. Add following to your menifest file.

 <application  ...>
     ...
        <receiver
            android:name="net.viralpatel.network.NetworkChangeReceiver"
            android:label="NetworkChangeReceiver" >
            <intent-filter>
                <action android:name="android.net.conn.CONNECTIVITY_CHANGE" />
                <action android:name="android.net.wifi.WIFI_STATE_CHANGED" />
            </intent-filter>
        </receiver>
      ...
</application>

We defined our broadcast receiver class in menifest file. Also we defined two intent CONNECTIVITY_CHANGE and WIFI_STATE_CHANGED. Thus this will register our receiver for given intents. Whenever there is change in network state, android will fire these intents and our broadcast receiver will be called.

Below is complete AndroidMenifest.xml file.

AndroidMenifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.viralpatel.network"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <receiver
            android:name="net.viralpatel.network.NetworkChangeReceiver"
            android:label="NetworkChangeReceiver" >
            <intent-filter>
                <action android:name="android.net.conn.CONNECTIVITY_CHANGE" />
                <action android:name="android.net.wifi.WIFI_STATE_CHANGED" />
            </intent-filter>
        </receiver>
    </application>

</manifest>

Run this demo in android emulator or actual device.

When Wifi is enabled, you’ll see a Toast message with message.

Now disable Wifi. The toast message will show you message that internet connection is not available.

Now enable mobile data network. The same will be show in toast message as soon as you enable mobile data connection.

Download Source Code

Browse through the source code in following Git repository:
GitHub: https://github.com/viralpatel/android-network-change-detect-example

Download complete source code:
Download: android-network-change-detect-example.zip (376 KB)

Activity name must be specified

The error popups up when we create a new Android project in Eclipse.

You have no idea how to solve this!! You try giving all the values but still the error doesn’t go away.

Here is a simple trick to resolve this problem. Basically the issue is with your Android Development Tools. You need to update that package. Follow below steps and you wont see Activity name must be specified error.

Step 1: Go to Windows > Preferences

Step 2: Under the preference menu, navigate to Install/Update and click Uninstall or update link

Step 3: This shows installed plugins. Select Android Development Tools and press Update…

That should update the required plugins and you should good to go now. Try creating a new Android project in Eclipse. The error should vanish.

In a normal Web based MVC application each form submitted POST the data to the server. A normal spring controller (tagged with annotation @Controller) fetches the data from request and process it further (save or update in database). Once the operation is successful, user is forwarded to page showing success of operation. Traditionally if we handle this via POST/Forward/GET, then it may cause sometime multiple form submission issue. User might press F5 and the same data is posted again.

To overcome this problem, POST/Redirect/GET pattern is used in MVC applcations. Once user form is posted successfully, we redirect the request to another success page. This causes browser to perform a new GET request and load the page. Thus is user presses F5, the GET request gets loaded instead of submitting form again.

Image credit: Wikipedia

While this approach looks perfect and solve the problem of multiple form submission, it add one more issue of retrieving request parameters and attributes. Normally when we generate an http redirect request, the data stored in request is lost making it impossible for next GET request to access some of the useful information from request.

Flash attributes comes handy in such cases. Flash attributes provide a way for one request to store attributes intended for use in another. Flash attributes are saved temporarily (typically in the session) before the redirect to be made available to the request after the redirect and removed immediately.

In order to do this, Flash feature uses two collections. FlashMap is used to hold flash attributes while FlashMapManager is used to store, retrieve, and manage FlashMap instances.

For each request an “input” flash map is created which stores flash attribute from any previous request and an “output” flash map is created which stores any subsequent attributes that we store in this request.

Usage

In order to use Flash attribute in your Spring MVC application make sure you using version 3.1 or above. Also add mvc:annotation-driven to spring-servlet.xml file.

<mvc:annotation-driven />

Once this is done, Flash attribute is automatically set “on” for usage. Just add attribute RedirectAttributes redirectAttributes to your Spring controller’s method.

import org.springframework.web.servlet.mvc.support.RedirectAttributes;
//...

	@RequestMapping(value="addcustomer", method=RequestMethod.POST)
	public String addCustomer(@ModelAttribute("customer") Customer customer,
			final RedirectAttributes redirectAttributes) {
	//...
		redirectAttributes.addFlashAttribute("message", "Successfully added..");
	//...

		return "redirect:some_other_request_name";
	}

The addFlashAttribute method automatically add the given parameter to the output flash map and pass it to the subsequent requests.

Let us see a complete demo application which uses Flash attribute to perform POST/Redirect/GET and passes some information.

Flash Attribute Example

The following application displays a form to user. Once the user inputs data and submits form, the page is redirected to another page where success message is displayed. On this new redirected page, the user input is displayed.

Step 1: Required JAR and Project Structure

If you using Maven as dependency management, use below dependencies to add Spring 3.1 MVC support.

	<dependencies>
		<!-- Spring 3.1 MVC  -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>3.1.2.RELEASE</version>
		</dependency>
		<!-- JSTL for c: tag -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
	</dependencies>

Alternatively, you can also download following JAR files and place them under /WEB-INF/lib folder.

Step 2: Spring Configuration

Add Spring support to web project by adding DispatcherServlet to web.xml.
web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

	id="WebApp_ID" version="2.5">
	
	<display-name>Spring MVC Flash attribute example</display-name>
	<servlet>
		<servlet-name>spring</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
		</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
    	<servlet-name>default</servlet-name>
    	<url-pattern>/index.html</url-pattern>
	</servlet-mapping>	
	<servlet-mapping>
		<servlet-name>spring</servlet-name>
		<url-pattern>*.html</url-pattern>
	</servlet-mapping>
</web-app>

Also the spring-servlet uses mvc:annotation-driven to enable mvc and also scans the project with context:component-scan tag.

spring-servlet.xml

<?xml  version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context  http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc  http://www.springframework.org/schema/mvc/spring-mvc.xsd">
		
	
	<bean id="jspViewResolver"
	class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	 </bean>
	
	<context:component-scan base-package="net.viralpatel.controller" />
	<mvc:annotation-driven />
 
</beans>

Step 3: Spring Controller – RedirectAttributes

The Controller code uses Customer.java object as bean (command) to holds customer information.

Customer.java

package net.viralpatel.spring;

public class Customer {
	private String firstname;
	private String lastname;
	private int age;
	private String email;

	//getter, setter methods
}

The CustomerController class has 3 methods. Method showForm is mapped with /form URL and is used to display Add New Customer form. Th method addCustomer is mapped with URL /addcustomer and is used on POST request.

CustomerController.java

package net.viralpatel.controller;

import net.viralpatel.spring.Customer;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
public class CustomerController {

	
	
	@RequestMapping(value="showform", method=RequestMethod.GET)
	public String showForm(@ModelAttribute("customer") Customer customer) {
		return "add_customer";	
	}
	
	@RequestMapping(value="addcustomer", method=RequestMethod.POST)
	public String addCustomer(@ModelAttribute("customer") Customer customer,
			final RedirectAttributes redirectAttributes) {

		redirectAttributes.addFlashAttribute("customer", customer);
		redirectAttributes.addFlashAttribute("message","Added successfully.");

		return "redirect:showcustomer.html";	
	}

	
	@RequestMapping(value="showcustomer", method=RequestMethod.GET)
	public String showCustomer(@ModelAttribute("customer") Customer customer) {
		System.out.println("cust:" + customer.getFirstname());
		return "show_customer";
	}
}

Note how we used redirectAttributes parameter on method addCustomer to map flash attributes. Also we used addFlashAttribute method to set new parameters to flash attribute.

Step 4: Views

The add customer JSP displays Add New Customer form.
add_customer.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<body>
	<h1>Add New Customer</h1>
	<form:form action="addcustomer.html" method="post" commandName="customer">
	<table>
		<tr>
			<td><form:label path="firstname">Firstname</form:label></td>
			<td><form:input path="firstname" /> </td>
		</tr>
		<tr>
			<td><form:label path="lastname">Lastname</form:label></td>
			<td><form:input path="lastname" /> </td>
		</tr>
		<tr>
			<td><form:label path="age">Age</form:label></td>
			<td><form:input path="age" /> </td>
		</tr>
		<tr>
			<td><form:label path="email">Email</form:label>
			<td><form:input path="email" /> </td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="Add Customer" />
			</td>
		</tr>
	</table>
	</form:form>
</body>
</html>

Show customer JSP simply shows the customer’s first and last name and a success message set as flash attributes.

show_customer.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<body>
<h1>${message}</h1>
	${customer.lastname}, ${customer.firstname} added successfully..
</body>
</html>

Demo:

Execute the web project.
URL: http://localhost:8080/SpringMVC_Flash_Attribute_Maven_example/form.html

Download Source Code

SpringMVC_Flash_Attribute_example.zip (3.5 MB)

Basically we create an interface like:

interface LoginConstants extends Constants {
	   @DefaultStringValue("Welcome to my super app")
	   @Key("appDescription")
	   String appDescription();

	   @DefaultStringValue("Ok")
	   @Key("okButtonLabel")
	   String okButtonLabel();
} 

And whenever we want to use constant in our application, we simple use loginConstant.appDescription(). Our application framework creates a dynamic proxy implementation for this interface. All we have to do is just to call the method and we get the value either from property file or default one.

So below is the sample code:

So basically you create an interface with relevant methods and annotate them with @Key, @DefaultStringValue annotations.

Disclaimer: This by no means should be used in Production. The code is just for reference. A lot more optimizations can be done in the below code.

Below is the sample Java code:

Main.java

    package net.viralpatel;
    
    import net.viralpatel.annotations.DefaultStringValue;
    import net.viralpatel.annotations.Key;
    
    interface LoginConstants extends Constants {
    	   @DefaultStringValue("Wellcome to my super app")
    	   @Key("appDescription")
    	   String appDescription();
    
    	   @DefaultStringValue("Ok")
    	   @Key("okButtonLabel")
    	   String okButtonLabel();
    }
    
    public class Main {
    	public static void main(String[] args) {
    		LoginConstants constants = DynamicProperty.create(LoginConstants.class);
    		System.out.println(constants.appDescription());
    		System.out.println(constants.okButtonLabel());
    	}
    }

Also the property file in background that we load is

config.property

    okButtonLabel=This is OK

Just execute the Main java class, following output will be displayed:

Output:

    Wellcome to my super app 
    This is OK

So now the magic code. Well nothing is magical here. Just plain Java Dyna proxy using Reflection API

DefaultStringValue.java

    package net.viralpatel.annotations;
    
    import java.lang.annotation.ElementType;
    import java.lang.annotation.Retention;
    import java.lang.annotation.RetentionPolicy;
    import java.lang.annotation.Target;
    
    @Target(ElementType.METHOD)
    @Retention(RetentionPolicy.RUNTIME)
    public @interface DefaultStringValue {
    	public String value();
    }

Key.java

    package net.viralpatel.annotations;
    
    import java.lang.annotation.ElementType;
    import java.lang.annotation.Retention;
    import java.lang.annotation.RetentionPolicy;
    import java.lang.annotation.Target;
    
    @Target(ElementType.METHOD)
    @Retention(RetentionPolicy.RUNTIME)
    public @interface Key {
    	public String value();
    }

DynamicProperty.java

    package net.viralpatel;
    
    import java.lang.reflect.Proxy;
    
    public class DynamicProperty {
    	
    	public static <T extends Constants> T  create(Class<T> clazz) {
    		
    		T object = (T) Proxy.newProxyInstance(clazz
    				.getClassLoader(), new Class[] { clazz },
    				new Handler(clazz));  
    		
    		return object;
    		
    	}
    }

Handler.java

    package net.viralpatel;
    
    import java.lang.annotation.Annotation;
    import java.lang.reflect.InvocationHandler;
    import java.lang.reflect.Method;
    
    import net.viralpatel.annotations.DefaultStringValue;
    import net.viralpatel.annotations.Key;
    
    public class Handler implements InvocationHandler {
    	
    	Object obj;
    
    	public Handler(Object obj) {
    		this.obj = obj;
    	}
    	
    	public Object invoke(Object proxy, Method m, Object[] args)
    			throws Throwable {
    		String key = null;
    		String defaultValue = null;
    		try {
    
    			Annotation[] annotations = m.getAnnotations();
    			for (Annotation annotation : annotations) {
    				if (annotation instanceof Key) {
    					key = ((Key)annotation).value();
    				} else if (annotation instanceof DefaultStringValue) {
    					defaultValue = ((DefaultStringValue)annotation).value();
    				}
    			}
    
    			String ret = PropertyLoader.get(key);
    			return (null == ret) ? defaultValue : ret;
    			
    			// result = m.invoke(obj, args);
    
    		} catch (Exception e) {
    			// We could also put some code here if we want to do
    			// anything special in case an Exception is thrown from
    			// the inside of invoked method.
    			throw e;
    		}
    	}
    }

Constants.java

    package net.viralpatel;
    
    public interface Constants {
    	//marker
    }

PropertyLoader.java

    package net.viralpatel;
    
    import java.io.IOException;
    import java.io.InputStream;
    import java.util.Properties;
    
    public class PropertyLoader {
    	private static Properties prop = null;
    
    	public static String get(String key) {
    		if (null == prop) {
    			init();
    		}
    		return (String) prop.get(key);
    	}
    
    	private static void init() {
    		prop = new Properties();
    		InputStream in = Properties.class
    				.getResourceAsStream("/net/viralpatel/config.properties");
    		try {
    			prop.load(in);
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    
    	}
    }

Download Source Code

Dynamic_Property_Java_Proxy.zip (12 KB)
Update Moved the code to Github for further development: github.com/viralpatel/dynaproperty

Android comes with simple yet undocumented API to add and remove shortcuts of any app on home screen. Let us check how to do this.

1. Install Shortcut on Home screen

Android provide us an intent class com.android.launcher.action.INSTALL_SHORTCUT which can be used to add shortcuts to home screen. In following code snippet we create a shortcut of activity MainActivity with the name HelloWorldShortcut.

First we need to add permission INSTALL_SHORTCUT to android manifest xml.

<uses-permission 
        android:name="com.android.launcher.permission.INSTALL_SHORTCUT" />

The addShortcut() method create a new shortcut on Home screen.

    private void addShortcut() {
    	//Adding shortcut for MainActivity 
    	//on Home screen
		Intent shortcutIntent = new Intent(getApplicationContext(),
				MainActivity.class);
		
		shortcutIntent.setAction(Intent.ACTION_MAIN);

		Intent addIntent = new Intent();
		addIntent
				.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
		addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, "HelloWorldShortcut");
		addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE,
				Intent.ShortcutIconResource.fromContext(getApplicationContext(),
						R.drawable.ic_launcher));

		addIntent
				.setAction("com.android.launcher.action.INSTALL_SHORTCUT");
		getApplicationContext().sendBroadcast(addIntent);
    }

Note how we create shortcutIntent object which holds our target activity. This intent object is added into another intent as EXTRA_SHORTCUT_INTENT. Finally we broadcast the new intent. This adds a shortcut with name mentioned as
EXTRA_SHORTCUT_NAME and icon defined by EXTRA_SHORTCUT_ICON_RESOURCE.

Note: One thing worth noting here is when you define your activity that is invoked from shortcut, you must define android:exported=”true” attribute in <activity> tag. You’ll see this in our demo.

2. Uninstall Shortcut from Home screen

Similar to install, uninstalling or removing shortcut in Android uses an Intent (UNINSTALL_SHORTCUT) to perform the task. In following code we remove the shortcut added on home screen.

Again we need a permission to perform uninstall shortcut task. Add following permission to Android manifest xml.

<uses-permission 
        android:name="com.android.launcher.permission.UNINSTALL_SHORTCUT" />

The removeShortcut() method does exactly reverse of addShortcut(). Most of the code is similar except removeShortcut calls UNINSTALL_SHORTCUT intent.

    private void removeShortcut() {
    	
    	//Deleting shortcut for MainActivity 
    	//on Home screen
		Intent shortcutIntent = new Intent(getApplicationContext(),
				MainActivity.class);
		shortcutIntent.setAction(Intent.ACTION_MAIN);
		
		Intent addIntent = new Intent();
		addIntent
				.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
		addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, "HelloWorldShortcut");

		addIntent
				.setAction("com.android.launcher.action.UNINSTALL_SHORTCUT");
		getApplicationContext().sendBroadcast(addIntent);
    }

Let us check the full functionality by creating a demo application.

3. Demo Application

The demo application is very simple. The user interface has two buttons: one to add shortcut to home screen and another to remove it.

Following is the simple layout consiting of two buttons.

layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">
	    
    <Button
        android:id="@+id/buttonAddShortcut"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Add Shortcut" />

    <Button
        android:id="@+id/buttonRemoveShortcut"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Remove Shortcut" />
    
</LinearLayout>

The layout looks something like following:

The MainAcitivity is the activity class that handles user interface events. We add OnClickListener event handlers to both Add and Remove shortcut buttons. Each calls appropriate method to perform the task.

MainActivity.java

package net.viralpatel.android;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        
    	super.onCreate(savedInstanceState);
    	setContentView(R.layout.activity_main);
        
    	//Add listener to add shortcut button
    	Button add = (Button) findViewById(R.id.buttonAddShortcut);
    	add.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				addShortcut(); //Add shortcut on Home screen
			}
		});
    	
    	//Add listener to remove shortcut button
    	Button remove = (Button) findViewById(R.id.buttonRemoveShortcut);
    	remove.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				removeShortcut(); //Remove shortcut from Home screen
			}
		});    	
    }
    
    private void addShortcut() {
    	//Adding shortcut for MainActivity 
    	//on Home screen
		Intent shortcutIntent = new Intent(getApplicationContext(),
				MainActivity.class);
		
		shortcutIntent.setAction(Intent.ACTION_MAIN);

		Intent addIntent = new Intent();
		addIntent
				.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
		addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, "HelloWorldShortcut");
		addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE,
			Intent.ShortcutIconResource.fromContext(getApplicationContext(),
						R.drawable.ic_launcher));

		addIntent
				.setAction("com.android.launcher.action.INSTALL_SHORTCUT");
		getApplicationContext().sendBroadcast(addIntent);
    }
    
    private void removeShortcut() {
    	
    	//Deleting shortcut for MainActivity 
    	//on Home screen
		Intent shortcutIntent = new Intent(getApplicationContext(),
				MainActivity.class);
		shortcutIntent.setAction(Intent.ACTION_MAIN);
		
		Intent addIntent = new Intent();
		addIntent
				.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
		addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, "HelloWorldShortcut");

		addIntent
				.setAction("com.android.launcher.action.UNINSTALL_SHORTCUT");
		getApplicationContext().sendBroadcast(addIntent);
    }
    
}

Also following is the Android manifest file for reference.

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.viralpatel.android"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />
    
    <uses-permission 
        android:name="com.android.launcher.permission.INSTALL_SHORTCUT" />
    <uses-permission 
        android:name="com.android.launcher.permission.UNINSTALL_SHORTCUT" />
    
	<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" 
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
   </application>

</manifest>

Screenshots of App

On clicking Add Shortcut button a toast message appears saying the shortcut has been successfully added on home screen.

If you check the home screen, you will find the shortcut present.

The remove shortcut button triggers UNINSTALL_SHORTCUT intent and removes the shortcut from home screen. It also prints a toast message with confirmation.

Download Source Code

Android_Add_Shortcut_example.zip (689 KB)

This is called Action chaining in Struts 2. One action leads to another one and so on.

Request > Action 1 > Action 2 > Response

In Struts 2, this can be achieved by Chain Result. The Chain Result is a result type that invokes an Action with its own Interceptor Stack and Result. This Interceptor allows an Action to forward requests to a target Action, while propagating the state of the source Action. Below is an example of how to define this sequence.

<package name="public" extends="struts-default">
        <action name="createUserAccount"
            class="net.viralpatel.CreateAccountAction">
            <result name="success" type="chain">login</result>
        </action>
        <action name="login"
            class="net.viralpatel.LoginAction">
            <result name="success" type="chain">showDashboard</result>
        </action>
        <action name="showDashboard"
            class="net.viralpatel.DashboardAction">
            <result name="success">/WEB-INF/jsp/dashboard.jsp</result>
        </action>
</package>

In above code we define three actions: createUserAccount, login and showDashboard. Notice how each action is chained to the next one using <result type="chain"> tag. Thus when user logs in first time in system, the createAccount action will be used. Once account is created user is forwarded to login action.

Disadvantage of Action Chaining

The Action chaining must be used with precaution. Struts2 documentation too doesn’t support this feature.

Experience shows that chaining should be used with care. If chaining is overused, an application can turn into “spaghetti code”. Actions should be treated as a Transaction Script, rather than as methods in a Business Facade. Be sure to ask yourself why you need to chain from one Action to another. Is a navigational issue, or could the logic in Action2 be pushed back to a support class or business facade so that Action1 can call it too?

Alternative: Redirect After Post

You can use Redirect After Post mechanism in cases where you cannot avoid chaining other actions. This is more or less similar to Action chaining with a major difference. The response is told to redirect the browser to the specified location (a new request from the client). The consequence of doing this means that the action (action instance, action errors, field errors, etc) that was just executed is lost and no longer available. This is because actions are built on a single-thread model. The only way to pass data is through the session or with web parameters (url?name=value) which can be OGNL expressions.

<result name="success" type="redirect">
  <param name="location">foo.jsp</param>
  <param name="parse">false</param>
</result>

In above result mapping we defined attribute type as redirect. Also notice how we defined two parameters location and parse.

• location (default) – the location to go to after execution.
• parse – true by default. If set to false, the location param will not be parsed for Ognl expressions.

The above example of action chaining (create account > login > dashboard) can be implemented using Redirect as follows:

<action name="createUserAccount"
	class="net.viralpatel.CreateAccountAction">
	<result name="success" type="redirect">login</result>
</action>
<action name="login"
	class="net.viralpatel.LoginAction">
	<result name="success" type="redirect">showDashboard</result>
</action>
<action name="showDashboard"
	class="net.viralpatel.DashboardAction">
	<result name="success">/WEB-INF/jsp/dashboard.jsp</result>
</action>