Archive for October, 2009

Redirecting from

October 14th, 2009 1 comment

The blog post to is an excellent reference if you are planning on redirecting your existing blog to a blog on a domain you own. However, it does not talk about redirecting a blog to a blog on a sub-domain. In this post, I want to share the steps I followed to redirect my blog to hosted on Go Daddy. I am assuming that you have already moved all your posts from your blog to your new blog and verified that Permalinks on both blogs match.


Step 1: Log into and go to the Domains in the Dashboard. Under “Add a Domain” enter your and hit “Add domain to blog”:
 Add a Domain


WordPress would come back complaining that there is a possible problem with the domain, It recommends that we add a CNAME entry pointing to blog in registrar before proceeding:
Problem Adding Domain


Step 2: Log into your account and launch Domain Manager. Select the domain name in the list of domains:
Go Daddy Select Domain


On the resulting page, click on the “Total DNS Control”:
Total DNS Selection


Inside the “Total DNS Control”, before I could add a CNAME entry for “blog”, I had to delete the existing “blog” record under A (HOST). The delete option is listed under “Actions”. Make sure you save the IP address that blog is pointing to:
 Delete Sub Domain


The next step is to create a new CNAME entry. Click on the Add New CNAME Record and fill the resulting form. Then, hit Ok and it would create a new CNAME record:
Add CNAME Record


Step 3: Repeat Step 1 and now should allow you to register the domain:
Wordpress - Add a sub domain


Follow the next steps and purchase the credits to register the domain:
Purchase Domain Mapping


Once the purchase, is complete, All the traffic for should now be redirected to
After Domain Mapping Purchase
You might need to clear the DNS Cache to verify the redirect. On Max OSX, this is done through the command: dscacheutil -flushcache


Step 4: Now that we have this going, we just need to reverse the redirection behavior. In the, select the radio button next to your sub domain and hit “Update Primary Domain”. Then, go back to the “Total DNS Control” and undo what was done in Step 2. This involves first deleting the CNAME entry and adding the blog entry under A(Host). Make sure you are using the same IP address you saved in step 2.


Once Step 4 is completed, all the blog traffic should now be sent over to the blog on your sub domain.

Categories: Solutions Log, Wordpress Tags:

Adding JQuery Slider Part II

October 9th, 2009 No comments

In my last post I showed how to easily add slider functionality using JQuery. In this post I will showcase some of the options that slider provides with a Temperature Converter. This is how it will work: the slider represents temperature measured in Celsius units and ranges between 0 and 100. As the user drags the slider, we will display the temperature equivalent in Fahrenheit.

Lets start by registering a basic slider:

   <script type="text/javascript">

Since the slider converts temperatures in the range 0 celsius and 100 celsius, modify the slider definition to include the range:

		min: 0,
		max: 100,
		step: 1

The next step is to add two span tags to display the chosen temperature and the temperature in Fahrenheit:

	Temperature in Celsius: <span id="celsius">0</span>
Temperature in Fahrenheit: <span id="fahrenheit"></span>

Finally all we need to do would be to captrue the slide event so that we can update the span tags:

		min: 0,
		max: 100,
		step: 1,
		slide: handleSlide

The handleSlide is a javascript function that looks like this:

	function handleSlide(event, ui)
		// Update the celsius span

		// Compute the fahrenheit equivalent
		var fTemp = (1.8 * ui.value) + 32;

		// Just display the last two digits of the temp

Here is a working demo

Categories: JQuery, Solutions Log Tags:

Theming Websites using Spring MVC

October 8th, 2009 8 comments

Many websites today allow their users to theme or change the look and feel of their sites. Gmail for example, currently provides over 34 themes to skin the mail interface. Themes can make websites more interactive and put the user in the driver seat when it comes to experiencing the site.

Conceptually, a theme is a collection of static resources such as stylesheets and images. When a user picks a theme, the theme’s styles and images dynamically gets associated with the site. In this post, I will create a simple Spring MVC Web application and show how Spring MVC can be used to manage theme resources easily. If you have used Spring MVC quite a bit, you can safely skip to Step 5.

Step 1: The first step in the process is to create a Spring MVC web project. Following maven conventions, here is the directory structure of the project:

Spring MVC Theme Project Structure

Spring MVC Theme Project Structure

Step 2: The next step is to add the required jars. Here is the dependency list that needs to be added to the pom.xml file:


This would add the following jars to the project:

Spring MVC Theme Jars

Spring MVC Theme Jars

Step 3: The next step is to add Spring “goodness” to the project. This is done by adding Spring MVC dispatcher servlet definition to web.xml:

		<!-- Spring MVC Servlet -->

The Spring MVC Dispatcher Servlet by default looks for the <context-name>-servlet.xml file for Web Tier bean definitions. Create a file called springthemes-servlet.xml under WEB-INF folder with the following information:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="" xmlns:xsi=""
		xmlns:p="" xmlns:context=""
	<!-- Scan for controllers -->
	<context:component-scan base-package="" />
	<!-- Views are jsp pages defined directly in the root -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:suffix=".jsp"/>

Step 4: To keep things simple, create a controller class called HomeController that simply redirects to the home.jsp page. Here is the HomeController class definition:


	import org.springframework.stereotype.Controller;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.bind.annotation.RequestMethod;

	public class HomeController
		@RequestMapping(method = RequestMethod.GET)
		public String showHome()
			return "home";

Here is the home.jsp file:

		<title>Welcome to Spring Themes</title>	
		Hello Visitor!!

If you deploy the application and hit http://<server:port>/springthemes/home.html, you should see a page that looks like this:

Spring MVC Theme Default Page

Spring MVC Theme Default Page

Now that we are successfull in creating a simple Spring MVC project, lets add two themes to it – dark theme and bright theme. The site automatically gets the “dark” theme during nights and the “bright” theme during day time.

Step 5: In this step, lets create the css files (one of the many static resources that a theme can have) associated with each theme. Here are the css files (I placed them under the themes folder):


	body {
		color: white;
		background-color: black


	body {
		color: blue;
		background-color: white;

Step 6: The next step is to define the themes. The default way to do this in Spring MVC is to use one property file for each theme. Here are the two theme definitions:

#dark theme properties file
page.title=Welcome to Dark Theme
welcome.message=Hello Visitor!! Have a Good night!!

#bright theme properties file
page.title=Welcome to Bright Theme
welcome.message=Hello Visitor!! Have a Good day!!

Step 7: Now that we have defined the themes, we need to tell Spring where to find them. This is done using a ThemeSource. Add the following line to the springthemes-servlet.xml file:


Step 8: Spring needs to know what theme to use when a request is made. This is done using a ThemeResolver. Spring provides three theme resolvers out of the box: FixedThemeResolver, SessionThemeResolver, CookieThemeResolver that are sufficient for most use cases. However, our site needs to inherit a theme based on the time, we will create a new theme resolver called DarkAndBrightThemeResolver:


import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.theme.AbstractThemeResolver;

public class DarkAndBrightThemeResolver extends AbstractThemeResolver
	public String resolveThemeName(HttpServletRequest arg0)
		return isNight() ? "dark" : "bright";

	// Pretty lame implementation
	private boolean isNight()
		return new Random().nextBoolean();
	public void setThemeName(HttpServletRequest arg0, HttpServletResponse arg1, String arg2)

Add the newly created theme resolver definition to the springthemes-servlet.xml file:


Step 9: The final step is use modify the view to use the theme. This is done using tag. Make the following changes to home.jsp page:

  <%@ taglib prefix="spring" uri=""%>
  		<link  rel="stylesheet" href='<spring:theme code="css"/>' type="text/css" />
  		<title><spring:theme code="page.title"/></title>	
  		<spring:theme code="welcome.message" />

Now, redeploy the application and as you refresh the URL, you should randomly see the site switch between the two themes. Here is the site with the two themes:

Dark Theme

Dark Theme

Bright Theme

Bright Theme

Categories: Spring Tags: ,

Adding JQuery UI Slider

October 1st, 2009 No comments

Here are five easy steps to add slider functionality to your web applications:

Step 1: Go to JQuery UI site and create a custom download. To keep things simple, select “No Theme”.under theme section and deselect all but UI Core and Slider checkboxes. Hit Download and unzip the downloaded file.

Step 2: Copy the jquery-1.3.2.min.js and “jquery-ui-1.7.2.custom.min.js” files into your project. These files should be under the js folder. Include the js files in your html/jsp page.


Step 3: Add the following styles to the page:


I am using the slider bar and slider handle images from YUI

Step 4: Add a DIV for the slider in the HTML.


Step 5: Initialize the slider in the document ready function:


That’s it. You can find a demo of this example here.