A dwr example : Fast Address Entry

When you tab out of the "postcode" field the browser calls the onchange event, which calls the fillAddress() function:

  
  

   
   

    
    
    
    
    
    function
    
     fillAddress() 
    
    ...
    
    {
  var postcode = dwr.util.getValue("postcode");
  AddressLookup.fillAddress(postcode, function(address) ...{
    dwr.util.setValues(address);
  });
}
    
    

   
   
  
  

This code first gets the contents of the postcode field, and then performs a call to the server using this postcode.

When the server replies we fill the values into the form using the setValues() function.

On the server, we could have created a JavaBean to hold the address data but for this example we have just used a java.util.Map. We could change to using a JavaBean without any JavaScript changes so long as the Map keys have the same names as the JavaBean properties.

  
  

   
   

    
    
    
    public
    
     Map fillAddress(String origpostcode)

    
    ...
    
    {
    Map reply = new HashMap();
    String postcode = LocalUtil.replace(origpostcode, " ", "");

    if (postcode.equalsIgnoreCase("LE167TR"))
    ...{
        reply.put(LINE2, "Church Lane");
        reply.put(LINE3, "Thorpe Langton");
        reply.put(LINE4, "MARKET HARBOROUGH");
    }
    ...
    else
    ...{
        reply.put(LINE2, "Postcode not found");
        reply.put(LINE3, "");
        reply.put(LINE4, "");
    }

    return reply;
}
    
    

   
   
  
  

 

HTML source:

  
  

   
   

    
    
    
    <
    
    table
    
    >
    
    
  
    
    <
    
    tr
    
    >
    
    
    
    
    <
    
    td
    
    >
    
    Zipcode/Postcode:
    
    </
    
    td
    
    >
    
    
    
    
    <
    
    td
    
    ><
    
    input 
    
    id
    
    ="postcode"
    
     type
    
    ="text"
    
     onchange
    
    ="fillAddress()"
    
    /></
    
    td
    
    >
    
    
  
    
    </
    
    tr
    
    >
    
    
  
    
    <
    
    tr
    
    >
    
    
    
    
    <
    
    td
    
    >
    
    House name/number:
    
    </
    
    td
    
    >
    
    
    
    
    <
    
    td
    
    ><
    
    input 
    
    id
    
    ="house"
    
     type
    
    ="text"
    
    /></
    
    td
    
    >
    
    
  
    
    </
    
    tr
    
    >
    
    
  
    
    <
    
    tr
    
    >
    
    
    
    
    <
    
    td
    
    >
    
    Line 2:
    
    </
    
    td
    
    >
    
    
    
    
    <
    
    td
    
    ><
    
    input 
    
    id
    
    ="line2"
    
     type
    
    ="text"
    
    /></
    
    td
    
    >
    
    
  
    
    </
    
    tr
    
    >
    
    
  
    
    <
    
    tr
    
    >
    
    
    
    
    <
    
    td
    
    >
    
    Line 3:
    
    </
    
    td
    
    >
    
    
    
    
    <
    
    td
    
    ><
    
    input 
    
    id
    
    ="line3"
    
     type
    
    ="text"
    
    /></
    
    td
    
    >
    
    
  
    
    </
    
    tr
    
    >
    
    
  
    
    <
    
    tr
    
    >
    
    
    
    
    <
    
    td
    
    >
    
    Line 4:
    
    </
    
    td
    
    >
    
    
    
    
    <
    
    td
    
    ><
    
    input 
    
    id
    
    ="line4"
    
     type
    
    ="text"
    
    /></
    
    td
    
    >
    
    
  
    
    </
    
    tr
    
    >
    
    

    
    </
    
    table
    
    >
    
    

   
   
  
  

Javascript source:

  
  

   
   

    
    
    
    
    
    function
    
     fillAddress() 
    
    ...
    
    {
  var postcode = dwr.util.getValue("postcode");
  AddressLookup.fillAddress(postcode, function(address) ...{
    dwr.util.setValues(address);
  });
}
    
    

   
   
  
  

Java source:

  
  

   
   

    
    
    
    package
    
     org.getahead.dwrdemo.address;


    
    import
    
     java.util.HashMap;

    
    import
    
     java.util.Map;


    
    import
    
     org.directwebremoting.util.LocalUtil;


    
    public
    
     
    
    class
    
     AddressLookup

    
    ...
    
    {
    private static final String LINE4 = "line4";

    private static final String LINE3 = "line3";

    private static final String LINE2 = "line2";

    public Map fillAddress(String origpostcode)
    ...{
        Map reply = new HashMap();
        String postcode = LocalUtil.replace(origpostcode, " ", "");

        if (postcode.equalsIgnoreCase("LE167TR"))
        ...{
            reply.put(LINE2, "Church Lane");
            reply.put(LINE3, "Thorpe Langton");
            reply.put(LINE4, "MARKET HARBOROUGH");
        }
        else if (postcode.equalsIgnoreCase("NR147SL"))
        ...{
            reply.put(LINE2, "Rectory Lane");
            reply.put(LINE3, "Poringland");
            reply.put(LINE4, "NORWICH");
        }
        else if (postcode.equalsIgnoreCase("B927TT"))
        ...{
            reply.put(LINE2, "Olton Mere");
            reply.put(LINE3, "Warwick Road");
            reply.put(LINE4, "SOLIHULL");
        }
        else if (postcode.equalsIgnoreCase("E178YT"))
        ...{
            reply.put(LINE2, "");
            reply.put(LINE3, "PO Box 43108 ");
            reply.put(LINE4, "LONDON");
        }
        else if (postcode.equalsIgnoreCase("SN48QS"))
        ...{
            reply.put(LINE2, "Binknoll");
            reply.put(LINE3, "Wootton Bassett");
            reply.put(LINE4, "SWINDON");
        }
        else if (postcode.equalsIgnoreCase("NN57HT"))
        ...{
            reply.put(LINE2, "Heathville");
            reply.put(LINE3, "");
            reply.put(LINE4, "NORTHAMPTON");
        }
        else
        ...{
            reply.put(LINE2, "Postcode not found");
            reply.put(LINE3, "");
            reply.put(LINE4, "");
        }

        return reply;
    }
}
    
    

   
   
  
  

dwr.xml

  
  

   
   

    
    
    
    <?
    
    xml version="1.0" encoding="UTF-8"
    
    ?>
    
    

    
    <!
    
    DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd"
    
    >
    
    


    
    <
    
    dwr
    
    >
    
    
  
    
    <
    
    allow
    
    >
    
    
    
    
    <
    
    create 
    
    creator
    
    ="new"
    
     javascript
    
    ="AddressLookup"
    
    >
    
    
      
    
    <
    
    param 
    
    name
    
    ="class"
    
     value
    
    ="org.getahead.dwrdemo.address.AddressLookup"
    
    />
    
    
    
    
    </
    
    create
    
    >
    
    
  
    
    </
    
    allow
    
    >
    
    

    
    </
    
    dwr
    
    >