Fernando Correia’s Weblog

July 17, 2008

Flex client talking to GAE

Filed under: Software Development — Fernando Correia @ 10:29 pm
Tags: ,

In a new iteration of my Flex and Python Test project, I created a crude Flex client. It is able to talk to the GAE server using AMF and perform two operations: retrieve all projects, and insert a new project. Both the client and the server see the data as objects.

This is what the user interface looks like:

And this is the Flex source code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()">
    <mx:Script>
       <!&#91;CDATA&#91;
        import flash.net.Responder;
        import mx.controls.Alert;

           &#91;Bindable&#93;
        public var dataProvider:Array;

        &#91;Bindable&#93;
        public var statusMsg:String;

        public var gateway:NetConnection;

        public function onInit():void
           {
            statusMsg = "Loading data...";
               gateway = new NetConnection();
               gateway.connect("http://localhost:8080/");
            getProjects();
          }

        public function getProjects():void {
            gateway.call("ProjectService.get_all", new Responder(getResult, onFault));
        }

        public function getResult(result:Array):void {
            dataProvider = result;
            statusMsg = "Data loaded.";
        }

        public function submitProject():void {
            var newProject:Object = new Object();
            newProject.code = project_code.text;
            newProject.name = project_name.text;
            gateway.call("ProjectService.insert", new Responder(null, onFault), newProject);
            getProjects();
        }

        public function onFault(info:Object):void {
            statusMsg = info.toString();
        }
       &#93;&#93;>
    </mx:Script>

    <mx:DataGrid id="dgProjects" x="10" y="10" dataProvider="{dataProvider}"
        width="356" height="183">
        <mx:columns>
            <mx:DataGridColumn headerText="Code" dataField="code"/>
            <mx:DataGridColumn headerText="Name" dataField="name"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:Button x="374" y="11" label="Reload" click="onInit()"/>
    <mx:Label x="10" y="203" text="Created at"/>

    <mx:TextInput x="103" y="201" id="selected_created_at"
        text="{dgProjects.selectedItem.created_at}" width="263"/>
    <mx:Form x="10" y="240" width="356" borderStyle="solid" cornerRadius="2">
      <mx:FormHeading label="New Project"/>
      <mx:HBox>
         <mx:Label text="Code"/>
         <mx:TextInput id="project_code" width="159"/>
      </mx:HBox>
      <mx:HBox>
         <mx:Label text="Name"/>
         <mx:TextInput id="project_name"/>
      </mx:HBox>
      <mx:Button label="Insert" click="submitProject()"/>
    </mx:Form>
    <mx:Label x="10" y="384" text="{statusMsg}" width="356"/>
</mx:Application>

The project is hosted in github. Feedback is welcome.

Advertisements

1 Comment »

  1. […] under: Software Development — fernandoacorreia @ 9:23 am Tags: flex While I was building my Flex client to a Google App Engine application, I was not able to make the Flex 3 debugger […]

    Pingback by Debugging Flex apps with Firefox « Fernando Correia’s Weblog — July 18, 2008 @ 9:23 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: