Implementing simple deep-linking in Flex (and Flash) using Django

Django Flex Deep Linking

I'm playing around with Django (and considering whether to use it to build the back-end for Singularity). I love the regular expressions-based Front Controller that Django uses and the first thing I thought when I saw it was that it would be incredibly easy to use this to implement deep linking in Flex and Flash applications. I whipped up a proof-of-concept a few moments ago which I thought I'd share with you.

Note: This is in no way meant to be a suggested solution to deep-linking (it was more of an exercise in playing with Django for me). Take a look at SWFAddress for a JavaScript-based way of achieving the same goal.

If you're going to follow along, you'll need Adobe Flex (2 or 3), a copy of SWFObject, and a working Django installation (here's how I got started with Django on OS X).

Flex:

Create a new Flex application called DjangoSWF with the following code and publish it. 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Label text="{Application.application.parameters.url}"/>

All this application does is read the value of a FlashVar parameter called url and display it in a Label component.

Next, let's write some Python code so Django can dynamically populate the URL based on the actual URL that the user entered.

Django:

Start a new Django project: django-admin.py startproject djangoswf.

Create two folders in the project folder called templates and static.

In the templates folder, create a file called djangoswf.html: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>{{url}}</title>
<script src="/static/swfobject.js" language="javascript"></script>
</head>

<body scroll="no">
  <div id="djangoswf">Django SWF example. This requires Flash Player.</div>

  <script language="JavaScript" type="text/javascript">
    /*<!--*/
    var so = new SWFObject("/static/DjangoSWF.swf", "theswf", "100%", "100%", "9");
    so.addVariable("url", "{{url}}");
    so.write("djangoswf");
    /*-->*/
  </script>
</body>

In the static folder, place the Flex SWF (DjangoSWF.swf) and the SWFObject.js file.

Create a views.py file in your project: 

from django.shortcuts import render_to_response

def flash_url(request, url):
	return render_to_response("djangoswf.html", {"url": url})

This is your view, where all the heavy-lifting is done (confusingly, Django calls its Business Delegates "Views"). Basically, that one line of code renders your HTML template and passes a url argument to it. In the template, that URL is passed to your Flex SWF via FlashVars (using the addVariable method of your SWFObject instance).

Next, edit the urls.py file: 

from django.conf.urls.defaults import *
from djangoswf.views import *

urlpatterns = patterns('',
  (r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': 'static'}),
  (r'^(.*)', flash_url),
)

This is where the magic happens. The Django Front Controller maps URLs to business methods using regular expressions.

The first URL mapping is for static content. Normally, you would use a web server like Apache to serve static content in a deployment environment, but for development purposes it makes sense to have Django serve them. The static content in this example is the SWFObject.js file and the Flex SWF.

The next line contains the deep-linking mapping for the Flex application. All it does is take any URL and passes it to the flash_url method as an argument. (The ordering of the lines is important as the URL mappings use short-circuit logic, starting from the top.)

Finally, run the development server (python manage.py runserver) and hit http://localhost:8000/some/really/deep/url to see the current URL getting passed to Flex.

In a real application, of course, you would change the application state to reflect the URL instead of merely displaying it.

If you're interested in deep linking in your Flash and Flex applications, check out SWFAddress.

Comments