Flex 经典例子: 建立Restaurant Finder

Flex Sample App: 建立 Restaurant Finder

关于这个教程

即使您没有Flex的基础，也可以学习此教程, 这不是一个传统的"Getting started" 教程 .这个教程的目标是:

• 展示 Flex Application 的架构的最好实践 .
• 避免传统的缺点，开发您的第一个 Flex Application

此教程用到的一些技术:

• 应用的区分
• 应用之间的宽松联结
• 事件通知
• 在 Model Classes 中使用 ActionScript Classess
• 转换 Java 对象为 ActionScript 对象的类型
• 通过客户端 ActionScript 调用 服务器端的 Java 方法

在这个教程 , 我们将建立一个餐厅门户应用 . 应用有二个模块 :

用户模块（The user module）

这是最终用户查找餐厅的模块 . 用户能使用地点(一种基于地图的选择) 和类别来查找餐厅 . 您能看到顾客的留言并能撰写自己的留言 .在这个教程, 我们从应用分析建立 .

 

图1 . 用户模块

管理模块（The administration module）

这是模块用于管理员 . 管理员能添加, 更新, 并且删除餐厅, 在地图上标记餐厅的地理位置, 等等 . 这是一种典型的数据库维护应用 .我将提供管理模块为你做作为参考应用 . 在以下教程中，我将教你如何配置管理模块 .

 

图2 . 管理模块

要求：

运行这个教程, 您需要下载和安装以下软件和文件 .

1. 安装Flex

• 如果您没有 Flex, 去下载试用版或购买 .
• 如果您还没有安装 Flex, 根据安装说明去安装它 .

2. 如果您没有安装MySql, 安装MySql

1. 下载 MySql . 选择最新的版本 ( 本教程使用的是 4.0.20) .
2. 解压 MySql 文件到一个临时目录 .
3. 运行安装程序 (setup.exe) 并接受所有缺省选择 .

3. 建立餐厅数据库

1. 开始 MySql .

c:\mysql\bin>mysqld

1. 建立餐厅数据库 .

c:\mysql\bin>mysqladmin – u root create restaurant

1. 下载 restaurantadmin_sql.zip (ZIP, 12K) , 并复制其中 restaurant.sql 到 mysql\bin 目录 .
2. 建立数据库结构和插入数据 .

c:\mysql\bin>mysql – u root restaurant < restaurant.sql

4. 安装MySql JDBC 驱动

1. 下载 MySql JDBC 驱动 .
2. 解压文件到一个临时目录 .

3. 复制mysql-connector-java-3.0.14-production-bin.jar 到 [ webapp_root ]\WEB-INF\lib .

注: jar文件的名字也许根据您的下载的驱动版本号不同 .

本地[webapp_root ] 是您使用的Flex服务器应用的根目录 .例如, 如果您使用的是JRUN服务器, webapp_root是: Program Files\Macromedia\Flex\jrun4\servers\default\flex(译注:根据自己的applcation server而不同)

安装管理模块(Installing the Administration Module)

此餐厅应用有二个模块:

• 用户模块
• 管理模块

在此教程, 您将自己建立用户模块 . 我提供管理模块为您作参考应用 .

安装管理模块:

1. 下载 restaurantadmin. zip (ZIP, 688K) .
2. 解压 restaurantadmib.zip 在您的 Flex 服务器目录 . 例如 , 如果您使用的是 JRUN 服务器 , 解压 restaurantadmin.zip 到 Program Files\Macromedia\Flex\jrun4\servers\default\flex

3. 测试程序 .例如, 如果您选择了JRUN服务器, 浏览管理模块在: http://localhost:8700/flex/restaurantadmin/admin.mxml .

如果您没有修改RemoteObject的whitelist, 将出现以下错误:

 

图3 . 没有修改whitelist而出现的错误信息

这是因为Flex的默认安装后就有很高的安全级别 .您必须编辑RemoteObject的whitelist才能在application server中访问Java class, 修改步骤如下 .

1. 编辑在 [ webapp_root ]\WEB-INF\flex 目录下的 flex-config.xml .
2. 找到 <remote-objects> 条目 .
3. 添加 samples.* 包到 whitelist 的 unnamed .

<remote-objects>

<!--





Other 





entries





-->

<whitelist>

 











<unnamed>

 











<source>samples.*</source>

 











</unnamed>

添加以上语句之后 , client application 能访问 samples 包下的所以类 .

1. 再测试程序 , 使用 URL: http://localhost:8700/flex/restaurantadmin/admin.mxml . ( 根据您的配置使用不同的 URL .)

安装教程资源文件

安装资源文件(图象、样式表, 等 .) 在这个教程 .

1. 下载 restaurant_tutorial .ZIP (ZIP, 460K) .
2. 解压 restaurant_tutorial.zip 到您的 Flex 服务器目录 .

Data Services

使用Flex, 您能选择三个不同的方法访问后台数据 .

1. HTTPService

使用HTTPService, 您的client application可以发送传统HTTP requests到服务器和接收response . 虽然能使用HTTPService 接收响应不同的类型响应, 典型就是使用XML (HTTP的XML) . 您能使用HTTPService 发送请求到任一后台系统: JSP, Servlet, ASP, ColdFustion, CGI, PHP, 等等 .

2. RemoteObject

使用RemoteObject, 您的client application可以在应用服务器里调用Java对象的method,并能接收method的返回值 .返回值可以是value of primitive data type, an object, a collection of objects,等等 .

3. WebService

使用WebService 组件, 您的client application可以在应用服务器里和网络的所有地方调用web services的mothod, 并能接收method的返回值 .返回值可以是value of primitive data type, an object, a collection of objects,等等 .

在这个部分, 您将试验以这三种不同方法访问后台数据 . 您将建立一个餐厅名单在DataGrid 上显示的一种程序 . 将连续地使用HTTPService 、RemoteObject, 和WebService 去查看餐厅名单 .

在这个模块的完成后应用看起来像图4:

 

图4 . 数据服务显示

实验1: 使用HTTPService

使用HTTPService, 您的client application可以发送传统HTTP requests到服务器和接收response .虽然能使用HTTPService 接收响应不同的类型响应, 典型就是使用XML (HTTP的XML) . 您能使用HTTPService 发送请求到任一后台系统: JSP, Servlet, ASP, ColdFustion, CGI, PHP, 等等 .

在这个实验中, 您使用HTTPService 查询餐厅名单 . HTTPService 发送一个请求到JSP, 使用XML返回餐厅的数据 .

1. 打开 restaurantlist.jsp 文件 [ webapp_root ]/restaurant 并且使自己了解这个输出餐厅数据的 JSP .
2. 在[ webapp_root ]/restaurant . 建立一个新文件 restaurant1.mxml .
3. 编辑 restaurant1.mxml, 和键入以下代码 :

<?xml 











version="1.0" 











encoding="utf-8"?>

<mx:Application 











xmlns:mx="http://www.macromedia.com/2003/mxml">

</mx:Application>

1. 定义 HTTPService 如下 , 以便 application 能查询由 jsp 生成的 XML 数据 .

<mx:HTTPService





 





id="srv" 











url="restaurantlist.jsp"/>

1. 添加一个 Button 标签 Get Data . 指定点击事件句柄以便发送 HTTP 请求到已定义的 HTTPService 上面 .

<mx:Button 











label="Get











Data" 











click="srv.send()"/>

1. 添加一个 DataGrid 组件并把它绑定到 HTTPService 的请求结果 .

<mx:DataGrid 











id="dg" 











dataProvider="{srv.result.list.restaurant}" 











widthFlex="1" 











heightFlex="1"/>

注: 注意那 srv.result 指向HTTP 请求的回应, 当 list 并且 restaurant 对应于XML文件的节点(参见restaurantlist.jsp) .

7. 测试程序: http://localhost:8700/flex/restaurant/restaurant1.mxml

如果您没有修改HTTPService的whitelist, 将出现以下错误:

 

图5 . 如果您没有修改whitelist将出现这个错误信息

这是因为Flex的默认安装后就有很高的安全级别 .您必须编辑HTTPservice的whitelist才能在application server中访问Java class, 修改步骤如下 .

1. 编辑 [ webapp_root ]\WEB-INF\flex 目录下的 flex-config.xml .
2. 找出 <http-service-proxy>条目

10. 在whitelist－unnamed－URL中添加 http://{localserver}/* .

<http-service-proxy>

 <!--











Other





 





entries











-->

 <whitelist>

 <unnamed>

 <url>http://{localserver}/*</url>

 </unnamed>

这样设置后, client application 可以访问服务器上的任何一URL .

11. 再测试程序 .

http://localhost:8700/flex/restaurant/restaurant1.mxml

1. 修改 DataGrid 标记只显示显示 name, city, phone 三列 .

<mx:DataGrid 











id="dg" 











dataProvider="{srv.result.list.restaurant}" 











widthFlex="1" 











heightFlex="1">

<mx:columns>

<mx:Array>

<mx:DataGridColumn











 columnName="name" 











headerText="Name"/>

<mx:DataGridColumn 











columnName="city" 











headerText="City"/>

<mx:DataGridColumn 











columnName="phone" 











headerText="Phone"/>

</mx:Array>

</mx:columns>

</mx:DataGrid>

1. 最后 , 改进用户界面 , 把 DataGrid 和 Button 放到 Panel 中 . 确定您添加 Button 到 Panel 的 ControlBar 中 .

<mx:Panel 











title="Restaurant 











List">

<!--











DataGrid 











Here











-->

<mx:ControlBar>

<mx:Button 











label="Get 











Data" 











click="srv.send()"/>

</mx:ControlBar>

</mx:Panel>

1. 再测试程序 . 注意：如果您改变浏览器窗口的大小 , 您的 Flex 程序也跟着改变大小 .

实验2: 使用RemoteObject

使用RemoteObject, 您的client application可以在应用服务器里调用Java对象的method,并能接收method的返回值 .返回值可以是value of primitive data type, an object, a collection of objects,等等 .

在这个模块里, 您将修改restaurant application使用RemoteObject替代HTTPService查询餐厅名单 .您使用 您的应用服务器里的RestaurantService类的 getRestaurantList() 方法 . getRestaurantList() 方法将返回一个restaurant对象 .

步骤1: 审查服务器组件

1. 打开 [ webapp_root ]\WEB-INF\classes\samples\restaurant 中 RestaurantService.Java 并且寻找 getRestaurantList() 方法 . 注意 , 方法返回 Restaurant 对象的一个数组 .
2. 打开 [ webapp_root ]\WEB-INF\classes\samples\restaurant下的 Restaurant.java .并了解这个类的一些属性和方法 .

步骤2: 使用RemoteObject

1. 复制一个 restaurant1.mxml 改名为 restaurant2.mxml .
2. 编辑 restaurant2.mxml .

3. 删除 HTTPService 标签，加入 RemoteObject 标签 . Remote class是 samples.restaurant.RestaurantService 并且使用方法 getRestaurantList() 返回餐厅的数据.

<mx:RemoteObject 











id="srv" 











source="samples.restaurant.RestaurantService">

 





<mx:method 











name="getRestaurantList"/>

 





</mx:RemoteObject>

4. 改变按钮Get Data的触发事件为：调用RestaurantService类的 getRestaurantList()+ .

<mx:Button label="Get Data" click="srv.getRestaurantList()"/>

5. 改变 dataProvider 的参数为 DataGrid . 并把RestaurantService类的 getRestaurantList() 方法的结果绑定到 DataGrid 上 .

<mx:DataGrid 











id="dg" 











dataProvider="{srv.getRestaurantList.result}" w











idthFlex="1" 











heightFlex="1">

注: 每当您的程序调用一个远程方法，Flex建立结果集 . 结果集是指定方法的返回值 .

6. 测试应用: http://localhost:8700/flex/restaurant/restaurant2.mxml .

如果您没有修改RemoteObject的whitelist, 将出现以下错误:

 

图6. 如果您没有修改whitelist将出现这个错误信息

这是因为Flex的默认安装后就有很高的安全级别 .您必须编辑RemoteObject的whitelist才能在application server中访问RestaurantService类, 修改步骤如下 .

1. 编辑 [ webapp_root ]\WEB-INF\flex 目录下的 flex-config.xml .
2. 找出 <remote-objects> 条目

9. 在whitelist－unnamed－URL中添加 samples.* 包 .

<remote-objects>

<!--











Other 











entries











-->

 <whitelist>

 <unnamed>

 <source>samples.*</source>

 </unnamed>

这将允许客户应用访问任一类在样品包裹 .

这样设置后, client application 可以访问服务器上sample包下的所有类 .

1. 再测试程序 : http://localhost:8700/flex/restaurant/restaurant2.mxml

实验3: 使用WebService

使用WebService组件, 您的client application可以在应用服务器里和网络的所有地方调用web services的mothod, 并能接收method的返回值 .返回值可以是value of primitive data type, an object, a collection of objects,等等 .

在这个实验中,修改restaurant application使用WebService 代替RemoteObject 查询餐厅数据 .

第一步: 把RestaurantService类作为Web Service

Flex中集成了Apache web services engine的Axis, 在没有提供web services的application server中更容易把Java 类作为web services .在这个部分, 您将使用Axis engine把RestaurantService类放到上一个模块中 .

注: 使用Flex WebService 标签, 您能连接到任何已经发布的web service .

发布RestaurantService类作为web service, 步骤如下:

1. 编辑 [webapp_root ]\WEB-INF\flex 目录下 flex-config.wsdd .

2. 发布 RestaurantService 类名字为 RestaurantWS 的web service，使用以下 <service> 声明 .

<service 











name="RestaurantWS" 











provider="java:RPC">

<parameter 











name="methodName" 











value="*"/>

 <parameter 











name="className" 











value="samples.restaurant.RestaurantService"/>

 <beanMapping 











languageSpecificType="java:samples.restaurant.Restaurant" 











qname="ns1:Restaurant"














mlns:ns1="http://www.macromedia.com/samples"/>

</service>

1. 重启服务 .
2. 测试 web service: 确定 web service 被正确的定义后，在浏览器中正确输入以下 URL:

http://localhost:8700/flex/flex-ws/RestaurantWS?wsdl .

第二步: 使用web service

1. 复制 restaurant2.mxml 并改名为 restaurant3.mxml .
2. 编辑 restaurant3.mxml .

3. 删除 RemoteObject标签 ,并添加 WebService标签并 指向第一步建立的web server： RestaurantWS .

<mx:WebService 











id="srv" 











wsdl="@ContextRoot()/flex-ws/RestaurantWS?wsdl">

 <mx:operation 











name="getRestaurantList"/>

</mx:WebService>

4. 测试应用: http://localhost:8700/flex/restaurant/restaurant3.mxml .

如果您没有修改WebService的whitelist, 将出现以下错误:

 

图7 . 如果您没有修改whitelist将出现这个错误信息

这是因为Flex的默认安装后就有很高的安全级别 .您必须编辑WebService的whitelist才能在application server中访问WebService类, 修改步骤如下 .

1. 编辑 [ webapp_root]\WEB-INF\flex 目录下的 flex-config.xml .
2. 找到 <web-service-proxy> 条目
3. 添加 http://localhost:8700/* 到 whitelist 的 unnamed 中 .

<web-service-proxy>

 <!--











Other 











entries











-->

 <whitelist>

 <unnamed>

 <url>http://localhost:8700/*</url>

 </unnamed>

这样设置后, client application可以访问由Axis engine发布的所有web service .

1. 再测试程序 : http://localhost:8700/flex/restaurant/restaurant3 .mxml .

数据服务: 总结

在不同服务端下，为了使你client application无缝的访问后台数据，Flex提供不同的数据存取方法 .

最佳的实践

如果您性能和数据量有要求， 在此建议您使用 RemoteObject 与 Action Message Format (AMF) (binary ) 内码 .

实验4: 使用 <mx:Model>

使用以下步使用 <mx:Model> 标签 .

1. 复制 restaurant2.mxml 并改名 restaurant4.mxml .

注: 确定您拷贝的是restaurant2.mxml (使用RemoteObject的application版本) .

1. 编辑 restaurant4 .mxml .

3. 添加一个Model标签在 RemoteObject标签后面 . 把RemoteObject的 getRestaurantList() 绑定到Model中 .

<mx:Model 











id="restaurantList">{srv.getRestaurantList.result}</mx:Model>

4. 改变DataGrid 的 dataProvider 参数 . 绑定DataGrid到restaurantList Model上 .

<mx:DataGrid 











id="dg" 











dataProvider="{restaurantList}" 











widthFlex="1" 











heightFlex="1">

 





<mx:columns>

 





<mx:Array>

 





<mx:DataGridColumn 











columnName="name" 











headerText="Name"/>

 





<mx:DataGridColumn 











columnName="city"