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

忘是亡心i 2022-02-20 02:17 170阅读 0赞

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

合作伙伴: [ Adobe][Adobe]

![封面][adobe_platform_new.gif.jpg]

**目录**

*  [安装Django ][Django]
 *  [安装PyAMF ][PyAMF]
 *  [创建Django项目 ][Django_]
 *  [开发Flex 4应用程序 ][Flex 4_]
 *  [配置PyAMF项目 ][PyAMF_]
 *  [使用Network Monitor运行应用程序 ][Network Monitor_]
 *  [未来步骤 ][Link 1]

## **要求** ##

### **预备知识** ###

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

### **用户水平** ###

中级

### **需要的产品** ###

*  Flash Builder 4[（下载试用版）][Link 2]

### **其他要求** ###

**Django 1.2.1**

*  [了解更多信息][Link 3]

**PyAMF 0.6**

*  [了解更多信息][Link 4]

本文介绍如何创建一个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版本：

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

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

### **下载和安装Django** ###

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

1.  访问Django下载页面并下载最新的官方版本。
2.  在终端中，更改到将Django-1.2.1.tar.gz文件下载到的目录，例如，如果您将文件下载到/downloads，则键入**cd /downloads**。
    
    **备注：**Django-1.2.1是编写本文时最高的官方版本。如果存在更新的版本，您可以使用它，只需在下面的步骤中将1.2.1替换为最新版本即可。
3.  键入**tar xzvf Django-1.2.1.tar.gz**解压压缩的存档文件。
4.  键入**cd Django-1.2.1**。
5.  键入**sudo python setup.py install**
    
    **备注：**在一些系统上，可能需要在python命令之前键入**sudo**。sudo命令以系统的超级用户或管理员身份执行命令，依据您的权限，这可能没有必要。在Mac OS X上，此能力内置于您的主要帐户中。如果使用Windows，将需要以管理员特权启动一个命令shell，然后运行setup.py install。
    
    接下来，确认您已成功安装Django。
6.  键入**python**。
7.  在python提示符下（>>>），键入**import django**。
8.  键入**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][Link 4]网站获取手动安装说明。

## **创建Django项目** ##

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

### **创建项目** ###

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

1.  更改到将包含所有Django代码的目录。例如，创建一个名为/Django的文件夹，然后键入**cd /Django。**
2.  键入**django-admin.py startproject myapp**。
3.  键入**cd myapp**更改到新创建的myapp目录。
4.  键入**ls**查看自动生成的文件（参见图2）。
    
    ![fig02.jpg][]
    
    **图2. 新创建的Django项目目录包含一些文件** 
    
    settings.py文件用于设置您的Django特定配置。urls.py文件类似于MVC范式中的控制器，它在从浏览器收到URL时加载合适的视图（HTML页面）。当它找到与HTTP请求匹配的内容时，就调用正确视图的函数来加载该视图。稍后在涉及到PyAMF网关时将深入分析此文件。
5.  编辑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.
            }
        }
6.  保存您对settings.py的更改并返回到命令行。
7.  在命令行上，键入**python manage.py syncdb**。
8.  系统将要求您定义一个超级用户，按照说明进行定义（参见图3）。
    
    ![fig03.jpg][]
    
    **图3. 运行python manage.py syncdb创建数据库**

### **创建数据模型** ###

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

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

1.  在myapp目录中键入**python manage.py startapp subscription**，创建一个名为subscription的新应用程序。
2.  键入**cd subscription**更改到新的subscription目录。
3.  编辑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
4.  保存更改。
5.  键入**cd ..**更改回myapp目录。
6.  键入**python manage.py syncdb**。
    
    这个Subscribe类扩展Django的Model类。当运行syncdb时，将创建Subscribe模型并添加两列：email和receive\_communication。该类中的函数定义将该条目设置为人类可读的标签。
7.  编辑urls.py，删除前导的\#以取消注释以下行：
    
        from django.contrib import admin admin.autodiscover()
    
    这使控制器可以找到admin查询。对应用程序的任何请求都会调用**控制器**。它使用URL确定向用户显示哪个视图。例如，如果管理员访问[http://yourapp.com/admin/][http_yourapp.com_admin]，控制器将识别该模式，然后调用关联的视图方法，该方法在admin.site命名空间中。
8.  在编辑urls.py时，取消注释以下行以启用Django Admin应用程序：
    
        (r'^admin/', include(admin.site.urls)),
9.  保存更改。
    
    现在需要安装您的Admin和Subscription应用程序。
10. 再次编辑settings.py。
11. 在文件末尾取消注释'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',
        )
12. 保存更改。
13. 返回到命令行，键入**python manage.py syncdb**将这两个应用程序添加到数据库。
14. 最后，键入**python manage.py runserver**启动服务器。
15. 在您浏览器中，转到http://127.0.0.1:8000/admin/并登录到您的Django管理控制台。

### **在Django管理控制台内查看Subscription** ###

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

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

1.  更改到您的myapp/subscription目录。
2.  在该目录中，创建一个名为admin.py的文件，其中包含以下内容：
    
        from myapp.subscription.models import Subscribe
        from django.contrib import admin
           
        admin.site.register(Subscribe)
    
    现在您已经注册了Subscribe，Django将在管理控制台中识别出Subscribe（参见图4）。
    
    ![fig04.jpg][]
    
    **图4. 注册Subscription之后，它将在Django管理控制台中显示**

## **开发Flex 4应用程序** ##

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

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

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

### **设置用户界面** ###

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

1.  启动Flash Builder。
2.  选择File > New > Flex Project
3.  为项目输入名称，选择Flex 4 SDK，然后将Application Server Type设置为None/Other。
4.  单击Finish。
5.  在Design视图中，添加一个TextInput、一个Submit Button、一个List和一个包含标签的Checkbox（参见图5）。
    
    ![fig05.jpg][]
    
    **图5. 布局包含一个TextInput、Button、Checkbox和List** 
    
    您可以按照您喜欢的方式布局元素，但需要设置一些组件属性来将它们连接起来。
6.  切换回Source视图。
7.  设置元素的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>
          
          <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已准备好接收强类型数据。这非常适用于使用值对象。

1.  在Flash Builder中，右键单击src文件夹并选择New > Package。
2.  将包命名为com.subscription.vos。
3.  右键单击新包并选择New > ActionScript Class。
4.  将该类命名为SubscriberVO。
5.  使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方法，然后注册这些方法以实现前端可访问性。

1.  在终端中，更改到myapp目录。
2.  创建一个名为amfgateway.py的文件。
3.  向新文件添加以下代码：
    
        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文件中。
4.  编辑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'),
        )
5.  重新启动Django。

## **使用Network Monitor运行应用程序** ##

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

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

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

1.  单击Network Monitor选项卡打开Network Monitor（或选择Window > Network Monitor）。
2.  要启用监控，单击右上侧的Enable Monitor按钮。
3.  运行应用程序。
4.  键入一个电子邮件地址并单击该按钮将它发送给服务器。
5.  返回到Flash Builder中，在Network Monitor中选择getEmailList操作。
6.  单击Response选项卡查看AMF对象（参见图6）。
    
    ![fig06.jpg][]
    
    **图6. Network Monitor帮助您调试请求和回复。**

## **未来步骤** ##

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

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

[![clip\_image010][clip_image010]][clip_image010_clip_image010]

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

[Adobe]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#
[adobe_platform_new.gif.jpg]: http://www.infoq.com/resource/vcr/1240/cover/adobe_platform_new.gif.jpg
[Django]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#header
[PyAMF]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#header_0
[Django_]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#header_1
[Flex 4_]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#header_3
[PyAMF_]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#header_4
[Network Monitor_]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#header_5
[Link 1]: http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240#header_6
[Link 2]: http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder
[Link 3]: http://www.djangoproject.com/
[Link 4]: http://pyamf.org/
[fig01.jpg]: /images/20220220/a6f75cf3526b441c9f7ac5654159b15f.png
[Python]: http://www.python.org/
[fig02.jpg]: /images/20220220/1c8a28dc1b5649719fc50da4d218932e.png
[fig03.jpg]: /images/20220220/71b347f3c7344d588022a54360d69ce5.png
[http_yourapp.com_admin]: http://yourapp.com/admin/
[fig04.jpg]: /images/20220220/2234acb1efd04dc2a242054c9dd3eb82.png
[fig05.jpg]: /images/20220220/4ad8b7a2d41444ea997c940baa3e3256.png
[fig06.jpg]: /images/20220220/b81ff5ccad0241cdabec65ab5a78b362.png
[http_djangoprojects.com]: http://djangoprojects.com/
[djangofriendly.com]: http://djangofriendly.com/hosts/
[Media Temple]: http://www.mediatemple.net/
[WebFaction]: http://www.webfaction.com/hosting/django-hosting
[clip_image010]: http://i.creativecommons.org/l/by-nc/3.0/88x31.png
[clip_image010_clip_image010]: http://creativecommons.org/licenses/by-nc/3.0/