Flex and Django: Partners in Crime

Sat 26 January 2008 by Thejaswi Puthraya

Flex and Django: Partners in Crime

I have an interesting project coming up which requires a heady mix of Flex and Django. If you are wondering how the two are being mixed, here is the simple answer. Flex will be used at the presentation level and Django at the application level. This requires that the webapplication built with django, serialize all it's data to xml so that it can be easily fed to the flex app. The flex app has to parse this xml and render it accordingly.

Here are the sample apps that I wrote to test the integration.

Using the Django XML Serializer to communicate with the Flex App

The Flex Code

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HttpService
    id="fetchData"
    url="http://127.0.0.1:8001/fetch/"
>
</mx:HttpService>

  <mx:Panel
      layout="vertical"
      title="Button Test"
  >
    <mx:Button
        id="testBtn"
        click="fetchData.send();"
        label="{fetchData.lastResult.childNodes}"
    >
    </mx:Button>
  </mx:Panel>
</mx:Application>

The Django Code

def fetch(request):
   response = HttpResponse()
   s = SimplerXMLGenerator(out=response,encoding="utf-8")
   s.startDocument()
   s.addQuickElement("objects","Hello")
   s.endDocument()
   return HttpResponse(response, mimetype="text/xml")

When the testBtn is clicked its label gets assigned as Hello.

Posting data from a flex form to be handled by the server.

Here is a simple example of how a form built in Flex can post the data to the web application.

The Flex Code

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

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
  <![CDATA[
  private function sendData():void {
      var args:URLVariables = new URLVariables();
      args.first_name = firstName.text;
      args.last_name = lastName.text;
      args.age = age.text;
      var url:URLRequest = new URLRequest("/get_record/");
      url.method = "POST";
      url.data = args;
      navigateToURL(url);
  }
</mx:Script>

  <mx:Panel
      layout="vertical"
      title="Showing the Form"
  >
    <mx:Form id="testForm">
      <mx:FormHeading label="Enter the details below."/>
        <mx:FormItem label="First name">
          <mx:TextInput id="firstName" width="200"/>
        </mx:FormItem>
        <mx:FormItem label="Last name">
          <mx:TextInput id="lastName" width="200"/>
        </mx:FormItem>
        <mx:FormItem label="Age">
          <mx:TextInput id="age" width="25"/>
        </mx:FormItem>

        <mx:FormItem>
          <mx:Button
              id="btnSubmit"
              label="Submit"
              click="sendData();"
          >
          </mx:Button>
        </mx:FormItem>
      </mx:Form>
    </mx:Panel>
  </mx:Application>

The Django Code

def get_record(request):
    post_data = request.POST.copy()
    # Process the data, raise errors if any and
    # return whatever you want.
    # Errors can be raised in actionscript in the
    # flex code.

This snippet when executed posts the Flex form data to the webapplication which can be handled accordingly.

So far this exercise of looking at the integration of Flex and Django has been quite easy. Only time will tell how much easy this will go on to be and how my project (if it goes beyond the bureaucratic hurdles) will progress.