[转] [Flash/Flex] Flex框架上的AIR开发现场-第5回 Flex应用和3个公共云的协作法

[转] [Flash/Flex] Flex框架下的AIR开发现场--第5回 Flex应用和3个公共云的协作法
http://bbs.9ria.com/thread-76411-1-1.html



第5回
Flex应用程序和3个公共云的协作方法

RIA和云协作有何好处？

    最近云处理服务增多了起来。究其原因则是现在具备了构筑服务的工具以及运服务的低成本化。在使用HTML或文本格式通信的服务中， 传输量会随着客户端的访问量增加而增加。这样一来，就产生了延迟和传输量增大的问题。
    如果使用RIA客户端，基本上只处理数据，因而能减少延时和传输量。本文将具体介绍这种公共云上的Web服务和RIA的协作方法。客户端采用Flex，公共云端采用Amazon EC2、Google App Engine、Windows Azure来处理。
    另外，在Flex和云协作的通信格式中，推荐使用与Flex配合最好的AMF。下面就先谈谈AMF。　

比XML和JSON速度更快的通信格式AMF
    AMF的全称是Action Message Format，是一种二进制格式。有以下2种规格：
    ･AMF0
    ･AMF3　
　　为什么说AMF最适合与云协作？简而言之，就是因为AMF是二进制数据，比起文本格式传输量少，能以低成本实现高速通信。下面分成3个理由详细地进行说明。

□ 推荐AMF的理由【其一】轻量
    AMF是二进制格式。通过将数据二进制序列化来实现轻量化。比起基于XML和JSON的文本格式，只有XML的1/10，JSON的1/4左右。尤其在大批量的数据处理中，能发挥显著作用。

□ 推荐AMF的理由【其二】高速
    发送轻量级数据，因而数据传输量少，能进行高速通信。

□ 推荐AMF的理由【其三】低成本
    比起XML和JSON，转换成Actionscript对象的成本非常低。而且在Flash Player内部会进行自动类映射，这同样也降低了开发成本。


Flex应用程序的例子
    这回的Flex应用程序例子中，我们将介绍3个连接云端应用程序上公开服务的Flex应用程序。功能为将输入的字符发送至服务，再显示结果。






□ 在Flash Builder中查看代码
    MXML代码如下

<?xml version="1.0" encoding="utf-8" ?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:RemoteObject id="echoRO"
destination="echo"
endpoint="http:///gateway.aspx">
<s:method name="execute" /> 
</s:RemoteObject>
<s:CallResponder id="echo_result" /> 
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import samples.echo.model.Echo;
import samples.echo.model.Word;
private function clickHandler(event:MouseEvent):void{
var word:Word = new Word();
word.text = wordTxt.text;
echo_result.token = echoRO.execute(word);
} 
]]> 
</fx:Script>
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center" /> 
</s:layout>
<s:HGroup verticalAlign="middle">
<s:RichText text="Word:" /> 
<s:TextInput id="wordTxt" /> 
</s:HGroup>
<s:Button label="Send Word" click="clickHandler(event)" /> 
<s:RichText text="{echo_result.lastResult as Echo}" /> 
</s:Application>

本例的应用程序可以在这里下载。可在Flash Builder中方便地导入这个.fxp格式的文件。
□ 连接URL的修改
    从Flex应用程序连接到Web应用程序/服务的URL，可以在开发或部署时改变设置。

<s:RemoteObject id="echoRO"
destination="echo"
endpoint="【Webアプリケーション／サービスの接続URL】">
<s:method name="execute"/>
</s:RemoteObject>

下面将按照如下3个公共云来分别解释怎么来改变URL。我们来一起看看如何开发和部署服务，并和Flex应用程序协作。
【1】Amazon EC2＋BlazeDS 4架构的云Flex
【2】Google App Engine＋T2架构的云Flex
【3】Windows Azure＋AMF Messaging架构的云Flex


【1】Amazon EC2＋BlazeDS 4架构的云Flex
    Amazon EC2是亚马逊提供的Amazon Web Services（AWS）公共云服务之一。在EC2中，每个服务实例都可选择OS，由于具有管理员权限，可以方便无限制地安装应用程序。
    BlazeDS是可以在AMF与Java实现之间的通信中使用的开源中间件。将它安装在EC2服务器实例上，再将本例部署其中。

□ EC2的准备
    这里使用Windows服务器实例。连接后，为了能正常使用BlazeDS和TomcatWeb容器，需要下载并安装最新版JRE。 
Java SE ダウンロード - Sun Developer Network (SDN) via kwout





    接下来，下载Tomcat6，安装EC2的服务器实例。 



Apache Tomcat - Apache Tomcat 6 Downloads via kwout


□ BlazeDS的准备
    BlazeDS是Adobe公司发布的开源项目。具有Remoting和messaging功能。



BlazeDS - BlazeDS - Adobe Open Source via kwout



　　下载最新版BlazeDS 4、解压「blazeds-bin-4.0.1.17657.zip」得到「blazeds4.war」文件。

□本地开发环境的准备
    接着准备可在本地开发JavaWeb服务的环境。在这里，由Java EE版Eclipse建立EC2＋BlazeDS 4的服务。
    首先与EC2中安装Tomcat一样，在本地也安装Tomcat，并在Eclipse中引入。





□ 建立工程
    要开发BlazeDS的Web服务，首先得建立工程。在新建工程向导中选择“DynamicWebProject”。




    在Target runtime中选择Tomcat。




    将类文件的输出位置修改为部署用的classes目录。




    设置部署用的Context root。




    点击Finish按钮，工程就建好了。




    下一步，在WebContent目录中、展开刚才的blazeds4.war。




□ BlazeDS的设置
    下面进行BlazeDS的设置。向WebContent\WEB-INF\flex\remoting-config.xml文件中添加公开的Web服务。如下所示，
samples.echo.service.EchoService就被公开成名为echo的Web服务。

<?xml version="1.0" encoding="UTF-8" ?>
<service id="remoting-service"
class="flex.messaging.services.RemotingService">
<adapters>
<adapter-definition id="java-object"
class="flex.messaging.services.remoting.adapters.JavaAdapter"
default="true"/>
</adapters>
<default-channels>
<channel ref="my-amf"/>
</default-channels>
<destination id="echo">
<properties>
<source>samples.echo.service.EchoService</source>
</properties>
</destination>
</service>

□ 建立Java服务例子
    这里建立的Java服务为，将输入的字符直接返回的应答服务。因此建立服务类和显示数据类。

    EchoService是将输入的Word类型保存成Echo类型并返回的服务类。

package samples.echo.service; 
import samples.echo.model.Echo;
import samples.echo.model.Word;

public class EchoService {

public Echo execute(Word word) {
Echo echo = new Echo();
echo.setWord(word);
return echo;
}
}

Word类是接受Flex输入的数据模型。

package samples.echo.model;

public class Word {
protected String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}

Echo类是保存Word并返回给Flex的数据模型。

package samples.echo.model;

public class Echo {

protected Word word;

public Word getWord() {
return word;
}

public void setWord(Word word) {
this.word = word;
}
}

□ 修改MXML文件使之能在本地访问
    将连接URL修改为“http://127.0.0./blazeds4sample/messaging/amf”后再编译、将bin-debug目录中生成的文件复制到blazeds4sample/WebContent/app目录下。




    启动Tomact，在Web浏览器这输入“http://127.0.0.1:8080/blazeds4sample/app/EditApp.html”访问Flex应用程序。

□ 将连接URL改成云服务器，部署到EC2
    部署前，必须将连接URL修改为“http://【EC2-Server】/blazeds4sample/messaging/amf”，再进行Flex应用程序的发布编译。将EC2-Server改为部署位置的主机名。然后将bin-release目录中生成的文件复制到“blazeds4sample/WebContent/app/”下面。
    接着，在Eclipse中生成blzazeds4sample工程的war文件，以便在Tomcat服务器实例上发布 。




    Target runtime选择Tomcat。




    将生成的blzazeds4sample.war复制到Tomcat的webapp目录。重启Tomcat，便部署完成。
    通过访问“http://【EC2-Server】/blazeds4sample/app/EditApp.html”来确认部署是否成功。（请将EC2-Server改为部署位置的主机名）
    本例建立的EC2服务可从此处下载。



  【2】Google App Engine＋T2架构的云Flex
    Google App Engine（GAE）是Google提供的云服务。在这种以Jetty为Web容器的Java EE环境中，对可使用的API有严格的限制。因此BlazeDS 4基本上不能运行。
    本文将介绍在GAE上部署T2Web框架，与Flex协作。
□ GAE的准备
    为使用GAE，首先需要注册Google账号。
Google アカウント via kwout




□ T2的准备

    T2是简单易用的Web框架。通过注释可处理各种请求。还具有可通过插件扩展功能的结构。
t-2 - Project Hosting on Google Code via kwout





    本文，组合T2和AMF来建立服务。首先、在以上网站下载t2-0.6.3-ga.zip文件。解压后得到t2-0.6.3-ga.jar文件。
□ 本地开发环境的准备
    接着，准备能在本地开发服务的环境。
    为了开发GAE服务，需要在Eclipse或Flash Builder中安装Google Plugin for Eclipse插件。这样就具备了GAE的开发和部署环境。
　从以下Google Plugin for Eclipse更新站点安装。
Eclipse 3.3（Europa）请使用“http://dl.google.com/eclipse/plugin/3.3”
Eclipse 3.4（Ganymede）请使用“http://dl.google.com/eclipse/plugin/3.4”
Eclipse 3.5（Galileo）请使用“http://dl.google.com/eclipse/plugin/3.5”


    这里假设为Eclipse 3.5，选择［Help］→［Install］。



    安装完成后重启Eclipse，在菜单栏下面会显示Google Plugin for Eclipse按钮。选择［Preferences］→［Google］→［App Engine］，可进行各种设定。



□ 建立工程
    下面来建立GAE上开发Web服务的工程吧。首先，在新建工程向导中选择“Web Application Project”。



    按下Next按钮后，在工程设置的Google SDK部分，选择“Use Google App Engine”。



    点击Finish按钮，工程就建好了。



　  接着、将以下T2所需的jar文件复制到war/WEB-INF/lib目录中，将t2-0.6.3-ga.jar设置到编辑路径。另外，请删除Servlet等用不到的类。
t2-0.6.3-ga.jar
commons-0.6.7-ga.jar
logback-classic-0.9.15.jar
logback-core-0.9.15.jar
slf4j-api-1.5.6.jar



□ T2的设定
    在web.xml中添加T2的设定。

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<context-param>
<param-name>t2.encoding</param-name>
<param-value>UTF-8</param-value>
</context-param>
<filter>
<filter-name>t2</filter-name>
<filter-class>org.t2framework.t2.filter.T2Filter</filter-class>
<init-param>
<param-name>t2.rootpackage</param-name>
<param-value>t2sample.page</param-value>
</init-param>
<init-param>
<param-name>t2.container.adapter</param-name>
<param-value>
org.t2framework.t2.adapter.SimpleContainerAdapter
</param-value>
</init-param>
<init-param>
<param-name>t2.exclude-resources</param-name>
<param-value>css, js</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>t2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

□ 建立Java服务的例子
    在例子中，我们建立和BlazeDS同样接口和数据模型。不同的是，这次遵循的是T2的规则。
    在BlazeDS中，建立的是Service类。T2中则是建立Echo页面。使用Page注释，将下面的服务类公开为“echo”。

package t2sample.page;

pimport org.t2framework.t2.annotation.core.Amf;
import org.t2framework.t2.annotation.core.Page;
import org.t2framework.t2.format.amf.navigation.AmfResponse;
import org.t2framework.t2.spi.Navigation;

import samples.echo.model.Echo;
import samples.echo.model.Word;

@Page("echo")
public class EchoPage {

@Amf
public Navigation execute(Word word) {
Echo echo = new Echo();
echo.setWord(word);
return AmfResponse.to(echo);
}
}

    数据模型和BlazeDS的相同。

□ 修改MXML文件使之能在本地访问
　将连接URL修改为“http://127.0.0.1:8888/t2amf”再编译，将bin-debug目录中生成的文件复制到t2sample/war/app目录下。




    在工程上右击，选择“Debug”。打开Web浏览器，输入“http://127.0.0.1:8888/app/EditApp.html”，运行Flex应用程序。

□ 将连接URL改成云服务器，部署到GAE
    部署前，必须将连接URL修改为“http://【GAE-APP】.appshot.com/t2amf”，再进行Flex应用程序的发布编译。将GAE-APP改为部署位置的主机名。然后将bin-release目录中生成的文件复制到“t2sample/war/app”下面。

    然后按下图中最左边的按钮，打开下面的部署对话框。在Email中输入Google账号的ID，Password中输入Google账号的密码。按下Deploy按钮，向GAE部署程序。







    通过访问“http://【GAE-APP】.appshot.com/app/EditApp.html”来确认部署是否成功。（请将GAE-APP改为部署位置的主机名）
    本例建立的GAE服务可从此处下载。





【3】Windows Azure＋AMF Messaging架构的云Flex
    Windows Azure（Azure）是具有Windows Azure Platform开发环境、服务托管环境以及服务托管环境功能的云操作系统。
    本文将介绍在Azure上部署能与AMF通信的开源的AMF Messaging Gateway，使之与Flex协作。
□ Windows Azure的准备
    在Windows Azure Developer Portal网站注册Windows Azure账号。
□ AMF Messaging Gatewayの準備
    AMF Messaging Gateway（AMG）是运行于IIS上HTTP模块。通过它能进行AMF通信。




amfmessaging via kwout


    从下载页面下载amg-1.0.0-ga.zip文件。解压后得到Akabana.Amf.dll和Akabana.Amf.Messaging.Gateway.dll文件。
□ 本地开发环境的准备
    下面准备能在本地开发Web服务的环境。下载安装Windows Azure Tools for Microsoft Visual Studio 1.2。
    请确认已安装了相匹配的IIS 7.0和SQLServer 2005。这样环境就准备好了。
□ 建立工程

    要开发Azure服务，需要新建Azure Cloud Service工程。Azure Tools安装完成后，启动Visual Studio 2010，在建立工程中选择Azure Cloud Service工程。




    这里使用的云服务是WebRole。WebRole是由处理HTTP（HTTPS）请求的Web应用程序所构成。




    按下OK按钮，资源和工程便建好了。




    接着，将刚才解压后的amg-1.0.0-ga文件夹中的gateway.aspx文件复制到WebRole工程。再将下面3个DLL目录中的文件放到编译路径。
log4net.dll
Akabana.Amf.dll
Akabana.Amf.Messaging.Gateway.dll





□ AMG的设定
    在Web.config文件中添加AMG的设定。AMG会在“WebRole工程名”中指定的程序集中找到服务类。

<?xml version="1.0"?>
<configuration>
<configSections>
<section name="akabana.amf.messaging.gateway"
type="Akabana.Amf.Messaging.Gateway.Configuration.XmlConfigurator, Akabana.Amf.Messaging.Gateway"/>
</configSections>
：
：
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<add name="MessagingGateway" type="Akabana.Amf.Messaging.Gateway.MessagingGateway, Akabana.Amf.Messaging.Gateway"/>
</modules>
</system.webServer>
<akabana.amf.messaging.gateway endPoint="/gateway.aspx">
<assemblies>
<assembly type="【WebRoleのプロジェクト名】"/>
</assemblies>
</akabana.amf.messaging.gateway>
</configuration>

□ 建立C#服务的例子
    服务类，我们建立与BlazeDS的相同的接口。但是是用C#实现，因此需要建立数据模型类。
    Echo类是保存Word并返回给Flex的服务类。通过使用MessagingService元素，以echo作为名称公开该类。

using Akabana.Amf.Messaging;
using samples.echo.model;

namespace samples.echo.service
{
[MessagingService(Name = "echo")]
public class EchoService
{
public Echo execute(Word word)
{
return new Echo() { word = word };
}
}
}

Word类是从Flex输入的数据模型。

public class Word
{
public string text { get; set; }
}

Echo类是保持Word并返回给Flex的数据模型。

public class Echo
{
public Word word { get; set; }
}

□ 修改MXML文件使之能在本地访问
    将连接URL改为“http://127.0.0.1:81/gateway.aspx”之后再编译，将bin-debug目录中生成的文件复制到WebRole1/app目录下。




    点击Visual Studio的Debug按钮。打开Web浏览器，输入“http://127.0.0.1:81/app/EditApp.html”，运行Flex应用程序。
□ 将连接URL改成云服务器，部署到Azure
    部署前，必须将连接URL修改为“http://【AZU-APP】.cloudapp.net/gateway.aspx”，再进行Flex应用程序的发布编译。将AZU-APP改为部署位置的HostedService名称。然后将bin-release目录中生成的文件复制到WebRole1/app目录下。
    右击工程，在上下文菜单中选择“发布”。




　 选择Credentials（证书）、HostedServiceSlot to deploy to和Storage Account to deploy througt，按下OK按钮，开始部署。




    打开Web浏览器，通过访问“http://【AZU-APP】.cloudapp.net/app/EditApp.html”来确认部署成功。请将AZU-APP修改为部署位置的HostedService名称。
    本例建立的Azure服务可从此处下载。

AMF也能用在Android和iPhone等移动平台
    本文演示了1个Flex应用程序和3个云端Web应用程序的部署，并通过AMF通信协作。感觉怎么样呢？
    今后的Flex/Flash/Adobe AIR应用程序不仅在PC，在移动平台（Package for iPhone、AIR for Android、Android 2.2开始的内置Flash Player）上也能运行。届时，AMF通信的轻量级和高速化特性也会变得尤为重要吧。若本文对您有些许帮助，则将深感荣幸。