Choose Your Language

Thursday 20 June 2013

Multi language support web application using AJAX, Properties file

Project Structure


Step 1: Create a Web Application using netbean IDE

Step 2: Create 3 packages namely
2.a. com.mybean
2.b. com.resources
2.c. com.dao

Step 3: Create a Class Named MyBean under  com.mybean package


 package com.mybean;

/**
 *
 * @author Aravind Sankaran
 */

public class MyBean {
 private String firstName;
 private String middleName;
 private String lastName;  
 private String language;
 private String welcome;
 private boolean valid;
    public String getMiddleName() {
        return middleName;
    }

    public void setMiddleName(String middleName) {
        this.middleName = middleName;
    }
    public String getWelcome() {
        return welcome;
    }

    public void setWelcome(String welcome) {
        this.welcome = welcome;
    }

    public String getLanguage() {
        return language;
    }

    public void setLanguage(String language) {
        this.language = language;
    }
   
    public boolean isValid() {
        return valid;
    }

    public void setValid(boolean valid) {
        this.valid = valid;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
  
}




Step 4: Create two properties file config under  com.resources package with names en and ma
4.a. Right click  com.resources
4.b. New
4.c. properties file

paste below text on en.properties file

# To change this template, choose Tools | Templates
# and open the template in the editor.
welcome=Welcome
firstname=Aravind
middlename=Sankaran
lastname=Nair


paste below text on ma.properties file
# To change this template, choose Tools | Templates
# and open the template in the editor.
welcome=സ്വാഗതം
firstname=അരവിന്ദ്
middlename=ശങ്കരൻ
lastname=നായർ

Step 5: Create a Class Named LoadMyProperties under  com.dao package
paste the below text


package com.dao;

import com.mybean.MyBean;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

/**
 *
 * @author Aravind Sankaran
 */

public class LoadMyProperties {
    private Properties configProp = new Properties();
    public MyBean getMyPropertiesFile(MyBean myBean){        
       
        String lang=myBean.getLanguage();
        InputStream in = this.getClass().getClassLoader().getResourceAsStream("com/resources/"+lang+".properties");
        System.out.println("property file selected is");
        System.out.println("com/resources/"+lang+".properties");
        try {
          configProp.load(in);
          String  firstname=configProp.getProperty("firstname");       
          String  lastname=configProp.getProperty("lastname");
          String welcome=configProp.getProperty("welcome");
          String middlename=configProp.getProperty("middlename");
          myBean.setFirstName(firstname);
          myBean.setMiddleName(middlename);
          myBean.setLastName(lastname);
          myBean.setWelcome(welcome);
         
          myBean.setValid(true);
        } catch (IOException e) {
            e.printStackTrace();
        }      
      
        return myBean;
    }
}
 


Step 5: Paste the below code in index.jsp file
<%--
    Document   : index
    Created on : 21 Jun, 2013, 12:42:38 AM
    Author     : Aravind Sankaran
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var e=document.getElementById("utype");
var str=e.options[e.selectedIndex].value;
var urls="myhome.jsp?lang="+str;

if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4)
    {
           document.getElementById("err").innerHTML=xmlhttp.responseText;

    }
  }
xmlhttp.open("GET",urls,true);
xmlhttp.send();
}
</script>

    </head>
    <body bgcolor="black">
        <center>
        <table>
            <tr>
                <td><font color="white">Choose Language</font></td>
                <td>
                    <select name="utype" id="utype" onchange="loadXMLDoc()">
                                                <option value="-select-">-select-</option>
                                                <option value="en">english</option>
                                                <option value="ma">malayalam</option>
                                               
                    </select>
                </td>
            </tr>
        </table>
        <span id="err"></span>
    </center>
    </body>
</html>
 
 

Step 6: Paste the below code in myhome.jsp file 
<%--
    Document   : myhome
    Created on : 21 Jun, 2013, 12:54:33 AM
    Author     : Aravind Sankaran
--%>

<%@page import="com.dao.LoadMyProperties"%>
<%@page import="com.mybean.MyBean"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<% String lang=request.getParameter("lang");%>
<%!String welcome;%>
<%!String myFirstName;%>
<%!String myMiddleName;%>
<%!String myLastName;%>

        <%
        MyBean myBean=new MyBean();
        myBean.setLanguage(lang);
        LoadMyProperties loadMyProperties=new LoadMyProperties();
        myBean=loadMyProperties.getMyPropertiesFile(myBean);%>
        <% if (myBean.isValid()) {
            welcome=myBean.getWelcome();
            myFirstName=myBean.getFirstName();
            myMiddleName=myBean.getMiddleName();
            myLastName=myBean.getLastName();
        %>
       
        <% } else { %>
            <p> No data in properties file</p>
<% } %>
             
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1><font color="white"><%=welcome%>&nbsp;<%=myFirstName%>&nbsp;<%=myMiddleName%>&nbsp;<%=myLastName%></font></h1>
    </body>
</html>

Output
click on the image to view in full size


click on the image to view in full size


click on the image to view in full size

click on the image to view in full size
 

No comments:

Post a Comment