Getting Flex 3 talking to Java via JSON

packagecom.giantflyingsaucer;
 
importjava.io.*;
importjava.io.PrintWriter;
importjavax.servlet.*;
importjavax.servlet.http.*;
importorg.json.simple.*;
 
publicclass MessageServlet extendsHttpServlet
{
    protectedvoid doPost(HttpServletRequest request, HttpServletResponse response)
            throwsServletException, IOException
    {
        response.setContentType("text/plain");
        PrintWriter out = response.getWriter();
        JSONObject jsonObject = newJSONObject();
 
        try
        {
            String strJSON = null;
            JSONObject myObject = null;
 
            if(request.getParameter("myObject") != null)
            {
                strJSON = request.getParameter("myObject");
 
                Object obj = JSONValue.parse(strJSON);
                myObject = (JSONObject)obj;
                String value1 = myObject.get("value1").toString();
                String value2 = myObject.get("value2").toString();
 
                jsonObject.put("value1","Hello: " + value1);
                jsonObject.put("value2","Hello: " + value2);
            }
            else
            {
                jsonObject.put("ERROR","Invalid JSON");
            }
        }
        finally
        {
            out.print(jsonObject);
            out.flush();
            out.close();
        }
    }
}

Here is a quick and easy way to pass JSON to and from Flex 3 and a Java Servlet. First off you need to grab the AS3CoreLib from Google Code. Once you have the as3corelib you’ll want to make it so you can use the contents of “corelib/src” from within your Flex project. I imported it into Flex Builder 3 (beta 2). For the Java part of it you can use whatever you like, I like to use Eclipse with the MyEclipseIDE plugin and then use their “Web Project” wizard to get my web app going. I used Tomcat 6 for the servlet container and added a single servlet to the project.

For the Java servlet to understand the JSON I grabbed the “Simple JSON” library here. Its very easy to use, just import it into your Eclipse web project project (or whatever your using). Here is the servlet’s code:

Very simplified code.

Now for the Flex code:

<?xml version="1.0"encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
    <mx:Script>
        <![CDATA[
            importcom.adobe.serialization.json.JSON;
 
            importflash.events.*;
            importflash.net.*;
 
            publicfunction runMe():void
            {
                varloader:URLLoader = newURLLoader();
                varheader1:URLRequestHeader = null;
                varrequester:URLRequest = newURLRequest();
 
                header1 = newURLRequestHeader("pragma","no-cache");
 
                requester.requestHeaders.push(header1);
                requester.method = URLRequestMethod.POST;
 
                configureListeners(loader);
 
                loader.dataFormat = URLLoaderDataFormat.TEXT;
 
                // Modify to your needs
                requester.url = "http://localhost:8085/MessageServer/servlet/MessageServlet";
 
                varobj:Object= newObject();
                obj.value1 = "Bob";
                obj.value2 = "Sandy";
 
                varvariables:URLVariables = newURLVariables();
                variables.myObject = JSON.encode(obj);
                requester.data = variables;
 
                loader.load(requester);
            }
 
            privatefunction configureListeners(dispatcher:IEventDispatcher):void
            {
                dispatcher.addEventListener(Event.COMPLETE, completeHandler);
                dispatcher.addEventListener(Event.OPEN, openHandler);
                dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
                dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
                dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
                dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
            }
 
            privatefunction completeHandler(event:Event):void
            {
                try
                {
                    vartempLoader:URLLoader = URLLoader(event.target);
                    varobj:Object= JSON.decode(tempLoader.data);
 
                    trace("completeHandler: " + tempLoader.data);
                    trace(obj.value1);
                    trace(obj.value2);
                }
                catch(error:Error)
                {
                    trace("completeHandler: " + error.toString());
                }
            }
 
            privatefunction openHandler(event:Event):void
            {
                trace("openHandler: " + event);
            }
 
            privatefunction progressHandler(event:ProgressEvent):void
            {
                trace("progressHandler loaded:" + event.bytesLoaded + " total: " + event.bytesTotal);
            }
 
            privatefunction securityErrorHandler(event:SecurityErrorEvent):void
            {
                trace("securityErrorHandler: " + event);
            }
 
            privatefunction httpStatusHandler(event:HTTPStatusEvent):void
            {
                trace("httpStatusHandler: " + event);
            }
 
            privatefunction ioErrorHandler(event:IOErrorEvent):void
            {
                trace("ioErrorHandler: " + event);
            }
        ]]>
    </mx:Script>
    <mx:Button x="19"y="10"label="Run Me" id="btnRunMe"click="runMe()"enabled="true"/>
</mx:Application>

Ok the Flex UI isn’t going to win any awards – but we just want the basics of how to get this working. Make sure when you run the Flex project you do so in debug mode so you can see the “trace” results since that is where all the info is being dumped.

You should see something like this:

openHandler: [Event type="open" bubbles=false cancelable=false eventPhase=2]

progressHandler loaded:47 total: 0

httpStatusHandler: [HTTPStatusEvent type="httpStatus" bubbles=false cancelable=false eventPhase=2 status=200]

completeHandler: {"value1":"Hello: Bob","value2":"Hello: Sandy"}

Hello: Bob

Hello: Sandy

I also like to use Fiddler 2 to inspect whats going over the wire. Firebug for Firefox I assume would work as well. These tools can be very handy when you want to inspect whats going on – especially when you need to debug an issue.