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

[url]http://bbs.9ria.com/thread-76411-1-1.html[/url]


第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应用程序。功能为将输入的字符发送至服务，再显示结果。

[img]http://dl.iteye.com/upload/attachment/450913/a4546628-4ca5-3db1-98fc-ef7994b81209.gif[/img]


□ 在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

[img]http://dl.iteye.com/upload/attachment/450915/3800e08a-c51d-3f62-a67d-69557090daf8.jpg[/img]


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

[img]http://dl.iteye.com/upload/attachment/450917/07608c23-5508-34ca-8748-1666682209ab.jpg[/img]

Apache Tomcat - Apache Tomcat 6 Downloads via kwout


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

[img]http://dl.iteye.com/upload/attachment/450919/b109c5f3-e11e-3783-b9d7-826e9c735ab1.jpg[/img]

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中引入。


[img]http://dl.iteye.com/upload/attachment/450921/d061aa24-274f-348f-a118-621f3818d8d6.gif[/img]


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

[img]http://dl.iteye.com/upload/attachment/450923/6a391470-3d41-3552-9c39-2be33033eca2.gif[/img]


在Target runtime中选择Tomcat。

[img]http://dl.iteye.com/upload/attachment/450925/69cf4606-0d74-3b7a-913e-e4d13ece5ad5.gif[/img]


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


[img]http://dl.iteye.com/upload/attachment/450927/84c6aa99-1238-33a4-a707-fb7e8b65e237.gif[/img]

设置部署用的Context root。

[img]http://dl.iteye.com/upload/attachment/450929/53496360-cbb4-3059-aa13-15bc37fe3537.gif[/img]


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


[img]http://dl.iteye.com/upload/attachment/450931/8a8b6b72-bdfc-3fe0-9adc-b7ee36692794.gif[/img]

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

[img]http://dl.iteye.com/upload/attachment/450933/6f7ca4df-956b-3039-9ce7-72997c9528cf.gif[/img]


□ 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目录下。

[img]http://dl.iteye.com/upload/attachment/450935/894c0f0d-24f4-3ad4-ba48-ea27c3ff32c6.gif[/img]


启动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服务器实例上发布 。

[img]http://dl.iteye.com/upload/attachment/450937/924a8cb7-1e20-3c18-97ee-372326cbe242.gif[/img]


Target runtime选择Tomcat。

[img]http://dl.iteye.com/upload/attachment/450939/e472029c-b1ca-3e3b-8d1f-dcd58c4ce676.gif[/img]


将生成的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

[img]http://dl.iteye.com/upload/attachment/450941/9c4562b0-be47-35e2-a5d4-0e76cd3236f4.jpg[/img]


□ T2的准备

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

[img]http://dl.iteye.com/upload/attachment/450943/2c0b9e10-b793-35e7-b847-51e1326ed89f.jpg[/img]


本文，组合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］。

[img]http://dl.iteye.com/upload/attachment/450945/da3af024-2555-38c0-956b-bcd8b481ad30.gif[/img]

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

[img]http://dl.iteye.com/upload/attachment/450946/ed212823-1b9a-32f4-8fb4-069c3ac29c04.gif[/img]

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

[img]http://dl.iteye.com/upload/attachment/450949/72facf0b-55d3-3727-9ad3-f16308d8f4a2.gif[/img]

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

[img]http://dl.iteye.com/upload/attachment/450953/ca5c3bd3-3a3e-336a-9126-6f8e0bad9761.gif[/img]

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

[img]http://dl.iteye.com/upload/attachment/450955/1547f183-2bd9-350e-8b33-0c868c1c5bff.gif[/img]

　 接着、将以下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目录下。


[img]http://dl.iteye.com/upload/attachment/450957/5c56669b-35af-31e9-a727-56969018b897.gif[/img]

在工程上右击，选择“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部署程序。


[img]http://dl.iteye.com/upload/attachment/450980/35679de5-33c7-3ba9-9cf0-963c4ae08481.gif[/img]

[img]http://dl.iteye.com/upload/attachment/450961/1a84854f-691b-336d-abf1-9291ca74ccc1.gif[/img]


通过访问“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通信。


[img]http://dl.iteye.com/upload/attachment/450963/74a7511a-d6db-31ea-9db9-cb5b93fb8f6c.jpg[/img]

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工程。

[img]http://dl.iteye.com/upload/attachment/450965/f3510a59-0b11-321b-acc8-c50560f31862.gif[/img]


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

[img]http://dl.iteye.com/upload/attachment/450967/190e59af-f650-35ba-a1a0-7c50f5ec0435.gif[/img]


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

[img]http://dl.iteye.com/upload/attachment/450969/e2d6c63c-0396-3a53-ab98-4f85f121db08.gif[/img]


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


[img]http://dl.iteye.com/upload/attachment/450971/13098e04-6343-36d1-a232-35866dd29e48.gif[/img]


□ 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改为“[url]http://127.0.0.1:81/gateway.aspx[/url]”之后再编译，将bin-debug目录中生成的文件复制到WebRole1/app目录下。


[img]http://dl.iteye.com/upload/attachment/450973/5c8af753-13a7-3f43-b55d-01308ae350be.gif[/img]

点击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目录下。
右击工程，在上下文菜单中选择“发布”。


[img]http://dl.iteye.com/upload/attachment/450975/55cfdfa0-7cec-3b89-b1e6-d31783108d9e.gif[/img]

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

[img]http://dl.iteye.com/upload/attachment/450977/691c3dbb-5503-3d60-ac86-c3374562669d.gif[/img]


打开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通信的轻量级和高速化特性也会变得尤为重要吧。若本文对您有些许帮助，则将深感荣幸。