使用Flex 4、Django、Python和PyAMF进行开发

合作伙伴: Adobe

要求

预备知识

熟悉Flex、Flash Builder和ActionScript 3.0，对UNIX命令行命令和开源数据库有基本的了解

用户水平

中级

需要的产品

Flash Builder 4（下载试用版）

其他要求

Django 1.2.1

了解更多信息

PyAMF 0.6

了解更多信息

本文介绍如何创建一个Flex 4应用程序，它基于Python直观的Web框架Django来访问一个后端。我将介绍如何安装Django和创建一个支持用户订阅电子邮件列表的简单订阅模块。在前端上，您将使用Adobe Flash Builder 4和Flex 4 SDK开发一个简单的订阅应用程序。

简单起见，示例项目使用一个SQLite3数据库接口。您将了解如何使用PyAMF将动态内容拉入到Flex 4应用程序中，PyAMF支持在Flash Player和Python中运行的应用程序之间通信。我将介绍如何安装PyAMF，并使用它将数据以强类型数据对象形式传回Flex应用程序，这消除了使用XML模式的需求。我还将介绍在服务器端注册您的ActionScript 3.0类，以便在Flex应用程序接收数据时，数据将具有正确的格式并适合使用。

开发人员使用Django时常常遇到的一个问题是，缺乏介绍如何将它与Flex结合使用的资源。本文分析一个使用案例，帮助您了解如何轻松地将Flex与Django集成。

安装Django

Django是“一个适用于具有最后期限的完美主义者的Web框架”（依据Django官方网站的说法）。Django提供了一种轻松的方式来开发内容管理系统、构件和动态组件等应用程序。该框架致力于遵守不重复您自己或DRY准则。很少有开发人员对反复开发应用程序组件（比如订阅模块）感到激动。Django使这种应用程序的开发非常轻松，它能够迅速完成这类任务。此外，Django源于Python，是一种相对容易上手的语言。它的代码既条理清晰又恰到好处。

检查Python

要安装Django，您必须拥有Python 2.5或更高版本。尽管Django能很好地兼容Python 2.4，但您需要使用Python 2.5，因为它包含轻量数据库SQLite3的一个接口，本教程中将使用该接口。SQLite3已与Python 2.5绑定。

要确认您的Python版本：

打开一个终端。
键入python。（在命令行，输入每个命令后按回车键执行它。）
如果已安装Python，您将看到一条短消息显示它的版本号（参见图1）。
按Ctrl+D退出Python。
也可以键入python –version，这将显示版本并返回到命令提示符。

图1. Python在启动时显示它的版本

如果还未安装Python，访问Python官方网站，下载并安装最新版本。

下载和安装Django

按照以下步骤下载并安装Django：

访问Django下载页面并下载最新的官方版本。
在终端中，更改到将Django-1.2.1.tar.gz文件下载到的目录，例如，如果您将文件下载到/downloads，则键入cd /downloads。
备注：Django-1.2.1是编写本文时最高的官方版本。如果存在更新的版本，您可以使用它，只需在下面的步骤中将1.2.1替换为最新版本即可。
键入tar xzvf Django-1.2.1.tar.gz解压压缩的存档文件。
键入cd Django-1.2.1。
键入sudo python setup.py install
备注：在一些系统上，可能需要在python命令之前键入sudo。sudo命令以系统的超级用户或管理员身份执行命令，依据您的权限，这可能没有必要。在Mac OS X上，此能力内置于您的主要帐户中。如果使用Windows，将需要以管理员特权启动一个命令shell，然后运行setup.py install。

接下来，确认您已成功安装Django。
键入python。
在python提示符下（>>>），键入import django。
键入django.get_version()。
应该看到您的Django安装的版本号。

安装PyAMF

PyAMF是一个用于从服务器向客户端发送二进制对象的不错框架。PyAMF使用Adobe Action Message Format (AMF)规范序列化服务器端对象。使用AMF的一个优势表现在性能上。AMF用于将远程过程编码为紧凑的二进制表示，然后可以通过HTTP/HTTPS或RTMP/RTMPS协议高效地传输。使用PyAMF的另一个优势在于，可以保持对象的数据类型。所以，举例而言，如果服务器以ArrayCollection形式向客户端发送一个对象，客户端将以ArrayCollection形式收到该对象。

安装PyAMF的最简单方式是运行Python的Easy Install包管理器。如果已在系统上安装了Easy Install，则只需运行以下命令：

easy_install pyamf

如果没有Easy Install或者在安装过程中遇到了问题，请访问PyAMF网站获取手动安装说明。

创建Django项目

安装Python、Django和PyAMF以后，就可以创建您的第一个Django项目了。如果这是首次使用Django，则必须进行一些初始设置。您将必须在将用于存储所有Django代码的目录中创建一个Django项目。Django项目是一个代码目录，包含所有设置，比如数据库配置、Django特定的选项和应用程序特定的选项。

创建项目

按照以下步骤启动Django项目：

更改到将包含所有Django代码的目录。例如，创建一个名为/Django的文件夹，然后键入cd /Django。
键入django-admin.py startproject myapp。
键入cd myapp更改到新创建的myapp目录。
键入ls查看自动生成的文件（参见图2）。

图2. 新创建的Django项目目录包含一些文件

settings.py文件用于设置您的Django特定配置。urls.py文件类似于MVC范式中的控制器，它在从浏览器收到URL时加载合适的视图（HTML页面）。当它找到与HTTP请求匹配的内容时，就调用正确视图的函数来加载该视图。稍后在涉及到PyAMF网关时将深入分析此文件。

编辑settings.py文件并将数据库引擎和名称设置如下。（将数据库的路径更改为新创建的myapp目录中的一个文件。）

DATABASE_ENGINE = 'sqlite3'          
DATABASE_NAME = '/Users/anthonycintron/Sites/myapp/mydb'           

 DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3'# Add 'postgresql_psycopg2', 'postgresql', 'mysql', 'sqlite3' or 'oracle'.
        'NAME': '/Users/anthonycintron/Sites/myapp/mydb',                     # Or path to database file if using sqlite3.
        'USER': '',                     # Not used with sqlite3.
        'PASSWORD': '',                 # Not used with sqlite3.
        'HOST': '',                     # Set to empty string for localhost. Not used with sqlite3.
        'PORT': '',                     # Set to empty string for default. Not used with sqlite3.
    }
}

保存您对settings.py的更改并返回到命令行。
在命令行上，键入python manage.py syncdb。
系统将要求您定义一个超级用户，按照说明进行定义（参见图3）。

图3. 运行python manage.py syncdb创建数据库

创建数据模型

下一步是创建订阅应用程序的数据模型。因为这是一个小项目，所以仅需要创建一个包含少量数据库字段的模型。在创建模型之前，首先必须创建一个项目应用程序。在Flex，应用程序包括模块或组件等。应该尝试确保创建的应用程序容易适合未来的项目，因为使用Django的一个目标就是创建可重用的代码。

按照以下步骤创建应用程序和数据模型：

在myapp目录中键入python manage.py startapp subscription，创建一个名为subscription的新应用程序。
键入cd subscription更改到新的subscription目录。

编辑models.py文件，添加以下行：

from django.db import models

# Create your models here.
class Subscribe(models.Model):
        email = models.EmailField()
        receive_communication = models.NullBooleanField(null=True)
        def __unicode__(self):
                return self.email

保存更改。
键入cd ..更改回myapp目录。
键入python manage.py syncdb。
这个Subscribe类扩展Django的Model类。当运行syncdb时，将创建Subscribe模型并添加两列：email和receive_communication。该类中的函数定义将该条目设置为人类可读的标签。
编辑urls.py，删除前导的#以取消注释以下行：
```
from django.contrib import admin admin.autodiscover() 
```
这使控制器可以找到admin查询。对应用程序的任何请求都会调用控制器。它使用URL确定向用户显示哪个视图。例如，如果管理员访问http://yourapp.com/admin/，控制器将识别该模式，然后调用关联的视图方法，该方法在admin.site命名空间中。
在编辑urls.py时，取消注释以下行以启用Django Admin应用程序：
```
(r'^admin/', include(admin.site.urls)),
```
保存更改。
现在需要安装您的Admin和Subscription应用程序。
再次编辑settings.py。

在文件末尾取消注释'django.contrib.admin'并将'myapp.subscription'添加到INSTALLED_APPS设置中：

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.admin',
    'myapp.subscription',
)

保存更改。
返回到命令行，键入python manage.py syncdb将这两个应用程序添加到数据库。
最后，键入python manage.py runserver启动服务器。
在您浏览器中，转到http://127.0.0.1:8000/admin/并登录到您的Django管理控制台。

在Django管理控制台内查看Subscription

当登录到您的Django管理控制台时，您将注意到Django应用程序未显示。这是因为您需要Django项目能感知Subscription模型，以便它可以使用该模型显示数据库数据。

要向Django注册Subscription模型，执行以下步骤：

更改到您的myapp/subscription目录。
在该目录中，创建一个名为admin.py的文件，其中包含以下内容：
```
from myapp.subscription.models import Subscribe
from django.contrib import admin

admin.site.register(Subscribe)
```
现在您已经注册了Subscribe，Django将在管理控制台中识别出Subscribe（参见图4）。

图4. 注册Subscription之后，它将在Django管理控制台中显示

开发Flex 4应用程序

您现在已准备好在Flash Builder 4中开发Flex 4接口了。

您可以执行本节中的步骤自行开发Flex应用程序，或者如果您愿意，可以执行以下步骤导入示例项目：

下载并提取本教程的示例文件。
启动Flash Builder。
选择File > Import Flex Project (FXP)。
找到并选择Subscription.fxp。

设置用户界面

要启动您自己的Flex应用程序，执行以下步骤：

启动Flash Builder。
选择File > New > Flex Project
为项目输入名称，选择Flex 4 SDK，然后将Application Server Type设置为None/Other。
单击Finish。
在Design视图中，添加一个TextInput、一个Submit Button、一个List和一个包含标签的Checkbox（参见图5）。

图5. 布局包含一个TextInput、Button、Checkbox和List

您可以按照您喜欢的方式布局元素，但需要设置一些组件属性来将它们连接起来。
切换回Source视图。

设置元素的id属性、按钮的click属性，以及列表的dataprovider属性，如下面的MXML所示：

<s:layout>
      <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
   </s:layout>
   <s:HGroup>
      <s:TextInput id="inputField" width="150" />
      <s:Button click="onSend(event)" label="Send"/>

   </s:HGroup>
   <s:CheckBox label="Email me site updates"
         selected="true"
         id="receiveUpdates"/>
   <s:List id="subscriptionList" 
         dataProvider="{_list}"
         labelField="email"
         width="225"
         height="100">
      <s:layout>
         <s:VerticalLayout/>
      </s:layout>

   </s:List>

添加RemoteObject

要发送和接收ActionScript数据，需要在<fx:Declarations>标记中创建一个RemoteObject对象。RemoteObject类使您能够访问远程服务器上的类。您必须包含一些属性，远程对象才能工作。channelSet是一个Channels数组，用于向目标位置发送消息。（这是在紧挨着RemoteObject上方的ChannelSet标记中定义的。）destination属性是您的网关服务的名称。最后，需要添加服务器端方法的名称。

查看以下示例代码：

<fx:Declarations>
      <!-- connection to gateway -->
      <s:ChannelSet id="channels">
         <s:AMFChannel id="pyamf" uri="http://127.0.0.1:8000/gateway/"/>
      </s:ChannelSet>
      <s:RemoteObject id="getSubscriptionService"
                  channelSet="{channels}" 
                  destination="myservice"
                  showBusyCursor="true"
                  >

         <s:method name="saveEmail" 
                 result="onSaveEmailSuccess(event)"
                 fault="onFault(event)"/>  

         <s:method name="getEmailList" 
                 result="onEmailListSuccess(event)"
                 fault="onFault(event)"/>  
      </s:RemoteObject>
   </fx:Declarations>

创建Subscriber值对象

使用PyAMF的一个重要优势是，能够在服务器端注册您的ActionScript类。可以设置远程对象的数据类型，以便当通过AMF发送它们时，ActionScript已准备好接收强类型数据。这非常适用于使用值对象。

在Flash Builder中，右键单击src文件夹并选择New > Package。
将包命名为com.subscription.vos。
右键单击新包并选择New > ActionScript Class。
将该类命名为SubscriberVO。

使SubscriberVO属性匹配服务器上的数据模型，例如：

package com.subscription.vos
{
   [RemoteClass (alias="com.subscription.vos.SubscriberVO")]
   [Bindable]
   public class SubscriberVO extends Object  
   {
      public var id:int;
      public var email:String;
      public var receive_communication:Boolean;

      public function SubscriberVO(email:String, receive:Boolean)
      {
         this.email = email;
         this.receive_communication = receive;
      }
   }
}

要注册您的类供远程使用，必须添加RemoteClass元数据标记。这使该类可在运行时访问。类属性必须与服务器对象匹配。

处理事件

最后您将需要添加一些ActionScript代码来处理事件。

回到项目的主MXML文件中，在<fx:Declarations>后添加以下<fx:Script>块：

<fx:Declarations>:
<fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         import mx.collections.ArrayCollection;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;

         [ArrayElementType("SubscriberVO")]         
         [Bindable]
         private var _list:ArrayCollection;

         private function onSaveEmailSuccess(event:ResultEvent):void
         {
            getSubscriptionService.getEmailList();
         }

         private function onFault(event:FaultEvent):void
         {
            trace(event.fault);
         }

         private function onEmailListSuccess(event:ResultEvent):void
         {
            _list = new ArrayCollection( event.result as Array );
         }

         private function onSend(e:MouseEvent):void
         {
            getSubscriptionService.saveEmail(inputField.text, receiveUpdates.selected );
         }

         protected function init(event:FlexEvent):void
         {
            getSubscriptionService.getEmailList();
         }

      ]]>
   </fx:Script>

请注意private property _list:ArrayCollection上方的元数据标记ArrayElementType。这可以确保_list ArrayCollection中的每个对象都具有严格的SubscriberVO类型。

作为最后一步，将creationComplete="init(event)"添加到主Application标记中。在应用程序启动时，init()方法使用电子邮件地址填充该列表。

配置PyAMF网关

接下来您需要设置Python方法，然后注册这些方法以实现前端可访问性。

在终端中，更改到myapp目录。
创建一个名为amfgateway.py的文件。

向新文件添加以下代码：

import pyamf
from pyamf.flex import ArrayCollection, ObjectProxy
from pyamf.remoting.gateway.django import DjangoGateway
from myapp.subscription.models import Subscribe


pyamf.register_class(Subscribe, 'com.subscription.vos.SubscriberVO')

def saveEmail(request, email, notify):
   subscribe = Subscribe()
   subscribe.email = email
   subscribe.receive_communication = notify
   subscribe.save()
   return True

def getEmailList(request):
   emailList = Subscribe.objects.all()
   return emailList

services = {
   'myservice.getEmailList':getEmailList,
   'myservice.saveEmail':saveEmail,
}

myGateway = DjangoGateway(services, expose_request=True)

这个PyAMF网关包含两个方法，它们提供了添加订阅者和检索订阅者列表的能力。

要使网关可供访问，必须将它的路径模式放在您的url.py文件中。

编辑url.py并添加下面的粗体代码：

from django.conf.urls.defaults import *

# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
    # Example:
    # (r'^myapp/', include('myapp.foo.urls')),

    # Uncomment the admin/doc line below and add 'django.contrib.admindocs' 
    # to INSTALLED_APPS to enable admin documentation:
     (r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
     (r'^admin/', include(admin.site.urls)),
       (r'^gateway/', 'myapp.amfgateway.myGateway'),
)

重新启动Django。

使用Network Monitor运行应用程序

在服务器上设置完后，应该能够运行您的Flex应用程序并开始发送和接收数据了。

Flash Builder中许多有用功能之一就是Network Monitor，它使您能够检查传递给服务器和从服务器接收的数据。

要查看它是如何工作的，执行以下步骤：

单击Network Monitor选项卡打开Network Monitor（或选择Window > Network Monitor）。
要启用监控，单击右上侧的Enable Monitor按钮。
运行应用程序。
键入一个电子邮件地址并单击该按钮将它发送给服务器。
返回到Flash Builder中，在Network Monitor中选择getEmailList操作。
单击Response选项卡查看AMF对象（参见图6）。

图6. Network Monitor帮助您调试请求和回复。

未来步骤

现在您对如何在Flex 4和Flash Builder 4中结合使用Python和Django有了更多的了解，您可能希望访问http://djangoprojects.com或http://pyamf.org探索更多信息。您可以订阅许多不错的邮件列表。您可能还希望访问#pyamf或#flex IRC，因为其中有许多人可以提供帮助。

有许多公司提供了易于使用、预先安装的Django部署。要获得提供了Django友好服务的托管公司的全面列表，请访问djangofriendly.com。Media Temple和WebFaction也在最流行之列。Media Temple有一个不错的控制面板，它使您能够轻松创建应用程序，重新启动和打开/关闭您的Django项目。

本文依照Creative Commons Attribution-Noncommercial 3.0 Unported License获得了授权。

秒客网

使用Flex 4、Django、Python和PyAMF进行开发

使用Flex 4、Django、Python和PyAMF进行开发

要求

预备知识

用户水平

需要的产品

其他要求

安装Django

检查Python

下载和安装Django

安装PyAMF

创建Django项目

创建项目

创建数据模型

在Django管理控制台内查看Subscription

开发Flex 4应用程序

设置用户界面

添加RemoteObject

创建Subscriber值对象

处理事件

配置PyAMF网关

使用Network Monitor运行应用程序

未来步骤

相关文章