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

时间:2022-06-19 18:27:35

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

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

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

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

  5. 编辑settings.py文件并将数据库引擎和名称设置如下。(将数据库的路径更改为新创建的myapp目录中的一个文件。)
    DATABASES = {
        'default': {
            'ENGINE': 'mysql', 
            'NAME': 'mydb',
            'USER': 'root',
            'PASSWORD': 'root',
            'HOST': '127.0.0.1',
            'PORT': '3306',
        }
    }
  6. 保存您对settings.py的更改并返回到命令行。
  7. 在命令行上,键入python manage.py syncdb
  8. 系统将要求您定义一个超级用户,按照说明进行定义(参见图2)。

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

    图2. 运行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. 保存更改。

    这个Subscribe类扩展Django的Model类。当运行syncdb时,将创建Subscribe模型并添加两列:email和receive_communication。该类中的函数定义将该条目设置为人类可读的标签。

  5. 键入cd ..更改回myapp目录。
  6. 编辑urls.py,删除前导的#以取消注释以下行:
    from django.contrib import admin
    admin.autodiscover()
    

    这使控制器可以找到admin查询。对应用程序的任何请求都会调用控制器。它使用URL确定向用户显示哪个视图。例如,如果管理员访问http://yourapp.com/admin/,控制器将识别该模式,然后调用关联的视图方法,该方法在admin.site命名空间中。

  7. 在编辑urls.py时,取消注释以下行以启用Django Admin应用程序:
    url(r'^admin/', include(admin.site.urls)),
  8. 保存更改。

    现在需要安装您的Admin和Subscription应用程序。

  9. 再次编辑settings.py。
  10. 在文件末尾取消注释'django.contrib.admin'并将'myapp.subscription'添加到INSTALLED_APPS设置中:
    INSTALLED_APPS = (
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.sites',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        # Uncomment the next line to enable the admin:
        'django.contrib.admin',
        # Uncomment the next line to enable admin documentation:
        # 'django.contrib.admindocs',
        'myapp.subscription',
    )
  11. 保存更改。
  12. 返回到命令行,键入python manage.py syncdb将这两个应用程序添加到数据库。
  13. 最后,键入python manage.py runserver启动服务器。
  14. 在您浏览器中,转到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,在命令窗口按CTRL+BREAK 键停止服务器,重新键入python manage.py runserver启动服务器,Django将在管理控制台中识别出Subscribe(参见图3)。

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

    图3. 注册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(参见图4)。

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

      图4. 布局包含一个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. 向新文件添加以下代码:
      from pyamf.flex import ArrayCollection, ObjectProxy
      from pyamf.remoting.gateway.django import DjangoGateway
      from myapp.subscription.models import Subscribe
      
      
      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)

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

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

    4. 编辑url.py并添加下面的代码:
      from django.conf.urls.defaults import patterns, include, url
      # Uncomment the next two lines to enable the admin:
      from django.contrib import admin
      admin.autodiscover()
      urlpatterns = patterns('',
              # Examples:
              # url(r'^$', 'myapp.views.home', name='home'),
              # url(r'^myapp/', include('myapp.foo.urls')),
              # Uncomment the admin/doc line below to enable admin documentation:
              # url(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。

     

     

    参考:

    http://www.infoq.com/cn/vendorcontent/show.action?vcr=1240

    http://www.kokkowon.com/archives/74