微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

目录

要求

预备知识

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

用户水平

中级

需要的产品

其他要求

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版本:

  1. 打开一个终端。
  2. 键入python。(在命令行,输入每个命令后按回车键执行它。)

    如果已安装Python,您将看到一条短消息显示它的版本号(参见图1)。

  3. 按Ctrl+D退出Python。

    也可以键入python –version,这将显示版本并返回到命令提示符。

    图1. 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网站获取手动安装说明。

创建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)。

    图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)。

    图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/,控制器将识别该模式,然后调用关联的视图方法,该方法在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)。

    图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)。

    图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>
      <!-- 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已准备好接收强类型数据。这非常适用于使用值对象。

  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/',(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)。

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

未来步骤

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

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

clip_image010

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐