{"id":353,"date":"2006-06-14T20:02:28","date_gmt":"2006-06-15T02:02:28","guid":{"rendered":"http:\/\/www.mooreds.com\/wordpress\/?p=353"},"modified":"2007-01-27T19:04:56","modified_gmt":"2007-01-28T01:04:56","slug":"step-2b-updating-the-gwt-client-to-communicate-with-the-server","status":"publish","type":"post","link":"https:\/\/www.mooreds.com\/wordpress\/archives\/353","title":{"rendered":"Step #2b: Updating the GWT Client to communicate with the Server"},"content":{"rendered":"

The next step is to update the client to communicate with the server side components. Again, if you’re not very patient, you can see the live client code at Colorado HomeFinder<\/a>, and download the source<\/a>.<\/p>\n

I need to add a drop down, which will offer users the option of a 5\/25 ARM rate, or a 30 year fixed rate. I need to have some way of decoding the JSON response from the server, and I need to update the interest rate text box with the results from the server.<\/p>\n

Adding the drop down is fairly easy: Google provides a listbox<\/a>. The listbox is an instance variable, rather than a local variable, and I also change the interest text box from a local variable to an instance variable. The reason: the change listener, which is a non static member class, has easier access to an instance variable than to a local one. Here’s the relevant code:<\/p>\n

rateChoiceBox.addItem(\"5\/25 ARM\");\r\nrateChoiceBox.addItem(\"30 Year Fixed\");\r\nrateChoiceBox.setVisibleItemCount(1);\r\nrateChoiceBox.setWidth(width);\r\nfinal RatesResponseHandler rrh = new RatesResponseHandler();\r\nHTTPRequest.asyncGet(RATES_URL, rrh);\r\n\r\nrateChoiceBox.addChangeListener(new ChangeListener(){\r\npublic void onChange(Widget sender) {\r\nHTTPRequest.asyncGet(RATES_URL, rrh);\r\n}\r\n}\r\n);\r\n...\r\nprivate class RatesResponseHandler implements ResponseTextHandler {\r\n\r\npublic void onCompletion(String responseText) {\r\nboolean keepGoing = true;\r\nJSONObject jso = null;\r\ntry {\r\njso = JSONParser.parse(responseText);\r\n} catch (JSONException je) {\r\nkeepGoing = false;\r\n\/\/ not sure what to do\r\n}\r\nString rate = \"\";\r\n\/\/ ... get the data, put it into the rate variable.\r\nMortgageCalc.this.interest.setText(rate);\r\n}\r\n}<\/pre>\n
In the RatesResponseHandler<\/code>, I try to parse the JSON response that has been asynchronously downloaded from the server, and if I get meaningful text, I set the interest rate in the textbox: MortgageCalc.this.interest.setText(rate);<\/code>  If the server is not available, we still have a sane default.  One interesting item: when you run the code with the server off in development, GWT pops you into the MS script debugger, which at least lets you know something is wrong.<\/p>\n
The JSON processing code has already been written, so it made sense to leverage the JSON example<\/a> that Google kindly provided.  To do this, I made a few changes. Luckily, all the example code is made available under the Apache 2.0 license<\/a>. You can find json.jar in the download, should you want to use it for a project of your own.<\/p>\n
First, I wanted to make sure that none of the behavior of the EntryPoint<\/code> JSON class occurred–I wanted the subsidiary libraries, but not the potato demostration<\/a>.  Therefore,  I eviscerated the JSON class, and gave it an empty onModuleLoad<\/code> method.  On reading the module documentation<\/a>, it appears this wasn’t needed–I could have just eliminated the <entry-point><\/code> entry.<\/p>\n
Then, I started building the JSON code library.  To pull in a set of external widgets, you need to do a couple of things.<\/p>\n
    \n
  1. Build the library.  I did this by compiling the JSON source, from the samples directory: mkdir builddir && javac -d builddir -classpath `cygpath -wp $PWD\/bin\/:.:..\/..\/..\/gwt-windows-1.0.21\/gwt-user.jar` src\/com\/google\/gwt\/sample\/json\/client\/JSON*.java<\/code>. (The cygpath stuff is there because I’m developing on cygwin.) One thing to remember–you need to copy the java files into that same build directory: cd builddir\/com\/google\/gwt\/sample\/json\/client && cp ..\/..\/..\/..\/..\/..\/src\/com\/google\/gwt\/sample\/json\/client\/*.java .<\/code>. (Apparently you need the .class files for Eclipse or any other IDE, and you need to .java files so the Google compiler can compile the java to javascript.  More here<\/a>.)   Also, don’t forget the JSON.gwt.xml, which should go in builddir\/com\/google\/gwt\/sample\/json<\/code>.<\/li>\n
  2. Jar up the code, and place it in the classpaths.  To compile from the command line, I added it to the Mortgage-compile.cmd<\/code> batch file.  For Eclipse development, I added it to the project buildpath (instructions for doing so<\/a>).  And I also had to add the json.jar file to the MortgageCalc application, so I could debug in Eclipse.  To do this, choose ‘Run’ from the top menu, choose the ‘Run…’ option, select ‘MortgageCalc’, click the ‘Classpath’ tab, click ‘User Entries’ and add the jar using the Add button.<\/li>\n
  3. Inherit from the JSON module<\/a>.  As far as I can tell, this isn’t inheritance in the usual object oriented sense, it’s more like importing packages in java. I did this by adding this line to the MortgageCalc.gwt.xml: <inherits name='com.google.gwt.sample.json.JSON'\/><\/code> (I did try to use a source path to refer to the JSON classes, rather than inherit from them, but got this error:
    \n
    [WARN] Non-canonical source package: ..\/..\/..\/google\/gwt\/sample\/json\/client\/
    \n…
    \n[ERROR] Unable to find type ‘com.cohomefinder.gwt.mortgagecalculator.client.MortgageCalc’
    \nHint: Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly<\/p><\/blockquote>\n
    )<\/li>\n<\/ol>\n
    After going through those steps, I could use the JSONParser<\/code> and other JSON objects in my widget.  Here’s the balance of the RateResponseHandler<\/code>:<\/p>\n
    if (keepGoing && jso != null) {\r\nint selected = MortgageCalc.this.rateChoiceBox.getSelectedIndex();\r\nString [] keys = jso.getKeys();\r\nif (keys.length == 2) { \/\/ expected\r\nJSONValue jsvrate =\r\njso.get(keys[selected]);\r\nJSONString jsstr = null;\r\nif ((jsstr = jsvrate.isString()) != null) {\r\nString rate = \"\";\r\nif ((rate = jsstr.toString()) !=\r\nnull) {\r\n\/\/Window.alert(\"rate:\r\n\/\/\"+rate);\r\nMortgageCalc.this.interest.setText(rate);\r\n\r\n}\r\n}\r\n}\r\n}<\/pre>\n
    The JSON parsing code is rather verbose.  I also wasn’t a fan of the return values from the is*<\/code> methods; I was always told that any method prefixed with ‘is’ should return a boolean.  But then I peeked into the JSONParser<\/code> class and decided that I’d just use the free code
    \nand stop complaining.  Final comments:<\/p>\n