甘先生Blog

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

2. 建立餐廳數據庫。

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

3. 下載restaurantadmin_sql.zip (ZIP, 12K), 并復制其中restaurant.sql到mysql\bin 目錄。
4. 建立數據庫結構和插入數據。

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, 修改步驟如下。

4. 編輯在 [webapp_root]\WEB-INF\flex 目錄下的flex-config.xml。
5. 找到<remote-objects>條目。
6. 添加 samples.*  包到whitelist的unnamed。

<remote-objects>

<!-- Other entries -->

<whitelist>

    <unnamed>

        <source>samples.*</source>

    </unnamed>

添加以上語句之后, client application能訪問samples包下的所以類。

7. 再測試程序, 使用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>

4. 定義HTTPService 如下,以便application能查詢由jsp生成的XML數據。

<mx:HTTPService id="srv" url="restaurantlist.jsp"/>

5. 添加一個Button 標簽 Get Data。 指定點擊事件句柄以便發送HTTP請求到已定義的HTTPService上面。

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

6. 添加一個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, 修改步驟如下。

8. 編輯[webapp_root]\WEB-INF\flex 目錄下的flex-config.xml 。
9. 找出 <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

12. 修改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>

13. 最后, 改進用戶界面, 把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>

14. 再測試程序。 注意：如果您改變瀏覽器窗口的大小, 您的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}" widthFlex="1" heightFlex="1">

注: 每當您的程序調用一個遠程方法，Flex建立結果集。 結果集是指定方法的返回值。

6.    測試應用: http://localhost:8700/flex/restaurant/restaurant2.mxml.

如果您沒有修改RemoteObject的whitelist, 將出現以下錯誤:

圖6.如果您沒有修改whitelist將出現這個錯誤信息

這是因為Flex的默認安裝后就有很高的安全級別。您必須編輯RemoteObject的whitelist才能在application server中訪問RestaurantService類, 修改步驟如下。

7. 編輯[webapp_root]\WEB-INF\flex 目錄下的flex-config.xml 。
8. 找出 <remote-objects> 條目

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

<remote-objects>

     <!-- Other entries -->

     <whitelist>

         <unnamed>

             <source>samples.*</source>

         </unnamed>

這將允許客戶應用訪問任一類在樣品包裹。

這樣設置后, client application 可以訪問服務器上sample包下的所有類。

10. 再測試程序: 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" xmlns:ns1="http://www.macromedia.com/samples"/>

</service>

3. 重啟服務。
4. 測試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類, 修改步驟如下。

5. 編輯[ webapp_root]\WEB-INF\flex 目錄下的flex-config.xml。
6. 找到 <web-service-proxy>條目
7. 添加 http://localhost:8700/* 到whitelist的unnamed中 。

<web-service-proxy>

     <!-- Other entries -->

     <whitelist>

         <unnamed>

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

         </unnamed>

這樣設置后, client application可以訪問由Axis engine發布的所有web service。

8. 再測試程序: 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版本) 。

2. 編輯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" headerText="City"/>

            <mx:DataGridColumn columnName="phone" headerText="Phone"/>

        </mx:Array>

    </mx:columns>

</mx:DataGrid>

5. 測試程序: http://localhost:8700/flex/restaurant/restaurant4.mxml

實驗5: 使用可變的參考

Flex的所有數據服務都是以異步 方式運行。 換句話說, 服務請求不阻攔您的application: 在您請求服務之后, application繼續執行并不等待反應。 當服務返回, 它觸發 結果 事件句柄和您自己編寫的處理方法。

在這個實驗, 您定義了一個restaurantList 實例變量, 并且您使用 結果 事件句柄 getRestaurantList() 方法分配, 服務返回的的餐廳數據變成了變量。

使用以下步添加參考可變物。

1. 復制restaurant4 。mxml 對restaurant5 。mxml 。
2. 編輯restaurant5 。mxml 。
3. 刪除 模型 標記。

4.    宣稱實例變量被命名restaurantList 。

5.     <mx:Script>

6.     var restaurantList:對象;

</mx:Script>

7.    添加a 結果 事件經理對 getRestaurantList 方法, 和分配 restaurantList 可變物對方法祈求的結果。

8.     <mx:RemoteObject id="srv" source="samples 。餐廳。RestaurantService">

9.     <mx:方法name="getRestaurantList" result="restaurantList=event 。result"/>

</mx:RemoteObject>

10. 測試應用: http://localhost:8700/flex/restaurant/restaurant5 。mxml.

使用命名的Services

當前的餐廳應用的其它局限是, 數據服務資源是硬編碼在客戶。 例如, 在應用的HTTPService 版本, JSP 的URL 硬編碼; 在WebService 版本, WSDL 文件是硬編碼; 并且在RemoteObject 版本完全修飾的分類名硬編碼。 這不是一個最佳方案, 因為資源名字和地點可能改變。

在這個部分, 您將使用邏輯名在客戶應用提到數據服務。 您使用部署形容標志(flex-config。xml 文件) 映射這些邏輯名對實際資源名字。

最佳的實踐:

不堅硬代碼數據服務資源名字在客戶應用。 改為使用名為服務。

實驗室6: 使用命名的RemoteObject

步驟1: 定義命名的Service

1. 編輯flex-config。xml 在 [webapp_root]\WEB-INF\flex 目錄。
2. 找出 <remote-objects> 詞條。
3. 添加以下名為服務來whitelist 。

4.     <named>

5.     <object name="RestaurantRO">

6.     <source>samples 。餐廳。RestaurantService</source>

7.     <type>stateless-class</type>

8.     <use 風俗authentication>false</use 風俗authentication>

9.     <allow 無提名access>false</allow 無提名access>

10.  </object>

</named>

步驟2: 使用命名的Service

1. 復制restaurant5 。mxml 對restaurant6 。mxml 。
2. 編輯restaurant6 。mxml 。
3. 修改 RemoteObject 標記訪問Java 組使用邏輯名被定義在部署形容標志。

4.     <mx:RemoteObject id="srv" named="RestaurantRO">

5.     <mx:方法name="getRestaurantList" result="restaurantList=event 。result"/>

</mx:RemoteObject>

6. 測試應用: http://localhost:8700/flex/restaurant/restaurant6 。mxml

建立一個習慣組分

在這個模塊里, 您建立一個習慣組分被命名RestaurantDetail 。 這個組分顯示餐廳的細節: 名字, 地址, 電話號碼, 社論回顧, 圖象, 等等。 這是一個看法組分在您的客戶邊MVC 建筑學。 您使用RestaurantDetail 組分的事例在您的主要應用顯示餐廳的細節被選擇在DataGrid 。

在這個模塊的完成, 應用將看起來象圖8 。

圖8 。 應用, 在您以后添加一個習慣組分

實驗室7: 建立RestaurantDetail 組分

步驟1: 建立RestaurantDetail 組分

1. 建立一個新文件被命名RestaurantDetail 。mxml [webapp_root]\restaurant.

2.    編輯RestaurantDetail 。mxml 和鍵入以下代碼定義延伸HBox 容器的類。

3.     <?xml version="1 。0"encoding="utf-8 "?>

4.     <mx:HBox xmlns:mx="http://www 。macromedia 。com/2003/mxml "marginTop="8 "marginLeft="8 "marginRight="8 "marginBottom="8">

</mx:HBox>

注: 當您建立一個MXML 文件, 您建立類。 您的MXML 文件根結表明您擴大的類。 在這種情況下, RestaurantDetail 延伸HBox 容器。 HBox 容器水平地計劃二個組分:

• 左組分是顯示餐廳的VBox 容器(名字、地址, 電話號碼的細節, 等等)
• 正確的組分是餐廳的圖象。

5.    定義一個實例變量被命名 dataObject:

6.     <mx:Script>

7.     var dataObject:對象;

</mx:Script>

dataObject 事例代表餐廳對象以抽象方式。 您做協會在這參考和實際餐廳對象之間在主要應用文件。注意, RestaurantDetail 沒有任何附庸或參考在其它組分或在根應用文件。 這使RestaurantDetail 非常可再用。

最佳的實踐:

組分寬松聯結是被證明的最佳的實踐在面向對象的發展。 寬松聯結是避免相互依賴性在類之間盡量的編程技術。寬松聯結添加您的組分的可再用性在和橫跨您的應用過程中。 基本思想是組分更知道關于其它組分, 較不可再用的組分是。 換句話說, 如果組分A 有強的參考(被鍵入的可變物) 在組分B, 您能只重復利用組分A 與組分B 一起。 這附庸一般是不受歡迎的。

8.    添加一個VBox 容器以適當的組分顯示餐廳的細節。 束縛用戶界面組分對對應的屬性 dataObject 實例變量。

9.     <mx:VBox widthFlex="1" verticalGap="0">

10.  <mx:標簽text="{dataObject 。名字} "fontSize="16 "styleName="title"/>

11.  <mx:標簽text="{dataObject 。address}"/>

12.  <mx:標簽text="{dataObject 。city}"/>

13.  <mx:標簽text="{dataObject 。phone}"/>

14.  <mx:文本text="{dataObject 。回顧} "widthFlex="1 "heightFlex="1"/>

</mx:VBox>

15.添加 圖象 標記顯示餐廳的圖象。

<mx:圖象source="images/{dataObject 。圖象} "width="200"/>

步驟2: 使用RestaurantDetail 組分在主要應用

1. 復制restaurant6 。mxml 對restaurant7 。mxml 。
2. 打開restaurant7 。mxml 。

3.    添加 xmlns = "*" 對 應用 標記宣稱名空間為組分沒有前綴。

<mx:應用xmlns:mx="http://www 。macromedia 。com/2003/mxml "xmlns="*">

4.    添加a 樣式 標記附有餐廳。css 樣式表對您的應用。

<mx:樣式source="restaurant 。css"/>

5. 添加一個HBox 容器在"餐廳名單" 盤區附近。
6. 添加第二個盤區題為的細節在HBox 容器里面, 和在"餐廳名單" 盤區以后。

7.    添加a RestaurantDetail 標記在細節盤區。 做 dataObject 歸因于點餐廳被選擇在DataGrid 。

8.     <mx:盤區title="Details" widthFlex="1" heightFlex="1">

9.     <RestaurantDetail dataObject="{dg 。selectedItem}"/>

</mx:Panel>

10.自動地檢索數據當應用開始, 去除ControlBar 在"餐廳名單" 盤區, 和祈求 getRestaurantList() 方法在 初始化 事件 應用 標記。

<mx:應用xmlns:mx="http://www 。macromedia 。com/2003/mxml "xmlns =" * "initialize="srv 。getRestaurantList()">

11. 測試應用: http://localhost:8700/flex/restaurant/restaurant7 。mxml

實驗室8: 建立ReviewList 組分

在這個模塊里, 您建立一個組分被命名ReviewList 。 這個組分負責對顯示顧客回顧名單為選擇的餐廳。 在這個模塊的完成, 應用將看起來象圖9 。

圖9 。 ReviewList 組分

步驟1: 建立ReviewList 組分

1. 建立一個新文件被命名ReviewList 。mxml [webapp_root]\restaurant

2.    編輯ReviewList 。mxml, 和鍵入以下代碼定義延伸VBox 容器的類。

3.     <?xml version="1 。0"encoding="utf-8 "?>

4.     <mx:VBox xmlns:mx="http://www 。macromedia 。com/2003/mxml "marginTop="8 "marginLeft="8 "marginRight="8 "marginBottom="8">

</mx:VBox>

5.    定義一個實例變量被命名 名單. 名單可變物是在的參考餐廳回顧。 協會在這參考和實際回顧之間將被做在主要應用文件。

6.     <mx:Script>

7.     var 名單:對象;

</mx:Script>

8. 添加DataGrid 和束縛它對名單參考。 顯示reviewDate 、評論者、標題, 和規定值專欄。

9.     <mx:DataGrid id="dg" dataProvider="{list}" widthFlex="1">

10.  <mx:columns>

11.  <mx:Array>

12.  <mx:DataGridColumn columnName="reviewDate" headerText="Date"/>

13.  <mx:DataGridColumn columnName="reviewer" headerText="Reviewer"/>

14.  <mx:DataGridColumn columnName="title" headerText="Title"/>

15.  <mx:DataGridColumn columnName="rating 的" headerText="Rating"/>

16.  </mx:Array>

17.  </mx:columns>

</mx:DataGrid>

18.添加適當的組分顯示回顧的細節被選擇在DataGrid 。 束縛這些組分對 selectedItem 在DataGrid 自動地顯示選擇的項目的細節。

19.  <mx:HBox verticalAlign="middle">

20.  <mx:VBox borderStyle="solid" horizontalAlign="center" verticalGap="0" width="80" marginTop="4" marginBottom="4">

21.  <mx:標簽text="Rating:"/>

22.  <mx:標簽text="{dg 。selectedItem 。rating}/10 "styleName="title"/>

23.  </mx:VBox>

24.  <mx:VBox verticalGap="0">

25.  <mx:標簽text="Reviewed:{dg 。selectedItem 。reviewer}"/>

26.  <mx:標簽text="Reviewed:{dg 。selectedItem 。reviewDate}"/>

27.  </mx:VBox>

28.  </mx:HBox>

<mx:文本text="{dg 。selectedItem 。reviewText} "widthFlex="1 "heightFlex="1"/>

步驟2: 使用ReviewList 組分在主要應用

1. 復制restaurant7 。mxml 對restaurant8 。mxml 。
2. 打開restaurant8 。mxml 。

3.    宣稱一個reviewList 實例變量在里面 <mx:Script> 標記。

4.     <mx:Script>

5.     var restaurantList:對象;

6.     var reviewList:對象;

</mx:Script>

7. (任意) 開放RestaurantService 。Java [webapp_root]\WEB-INF\classes\samples\restaurant 并且使自己熟悉 getReviewList() 方法。

8.    在restaurant8 。mxml, 添加 getReviewList() 方法對RemoteObject 聲明。 編碼 結果 事件經理分配 reviewList 可變物對回顧返回了由方法。

9.     <mx:RemoteObject id="srv" source="samples 。餐廳。RestaurantService">

10.  <mx:方法name="getRestaurantList" result="restaurantList=event 。result"/>

11.  <mx:方法name="getReviewList" result="reviewList=event 。result"/>

</mx:RemoteObject>

12.編碼a 變動 事件經理為DataGrid: 檢索回顧名單為選擇的餐廳每次選擇的餐廳改變。

<mx:DataGrid id="dg" dataProvider="{restaurantList}" widthFlex="1" heightFlex="1" change="srv 。getReviewList(dg 。selectedItem 。restaurantId)">

13.包裹一個TabNavigator 容器在附近 RestaurantDetail 標記。 添加一個一般信息標簽來RestaurantDetail 。

14.  <mx:TabNavigator>

15.  <RestaurantDetail label="General 信息" dataObject="{dg 。selectedItem}"/>

</mx:TabNavigator>

16.添加 ReviewList 標記作為第二個制表符在TabNavigator 。 束縛 名單 物產對 reviewList 實例變量。

17.  <mx:TabNavigator>

18.  <RestaurantDetail label="General 信息" dataObject="{dg 。selectedItem}"/>

19.  <ReviewList label="Reviews" list="{reviewList}"/>

</mx:TabNavigator>

20. 測試應用: http://localhost:8700/flex/restaurant/restaurant8 。mxml

實驗室9: 建立回顧。

步驟1: 審查服務器邊組分

1. 打開RestaurantService 。Java [webapp_root]\WEB-INF\classes\samples\restaurant 并且尋找 addReview 方法。 注意 addReview 方法采取a 回顧 對象作為論據。

2.    打開回顧。Java [webapp_root]\WEB-INF\classes\samples\restaurant 并且使自己熟悉類。

• 注意, 類是在 樣品。餐廳 包裹。
• 看屬性由類暴露。

挑戰將建立是可接受的作為輸入參量的ActionScript 組當您祈求 addReview() 方法在RemoteObject 在客戶端。 換句話說, 您需要確信, 當送到服務器, 您的ActionScript 對象是deserialized 在a 樣品。餐廳。回顧 對象。

步驟2: 建立回顧組

1.    建立適當的目錄結構主持屬于的ActionScript 組 樣品。餐廳 包裹。

• 建立一個樣品目錄 [webapp_root]\restaurant
• 建立一個餐廳目錄 [webapp_root]\restaurant\samples
1. 建立一個新文件被命名Review 。作為 [webapp_root]\restaurant\samples\restaurant

3.    編輯回顧。作為和鍵入以下代碼定義類被命名Review 。

4.     類樣品。餐廳。回顧{

}

5.    提供類以屬性匹配屬性可利用在類的Java 版本。

6.     var restaurantId:數字;

7.     var reviewDate:串;

8.     var 評論者:串;

9.     var 規定值:數字;

10.  var 標題:串;

var reviewText:串;

11.添加 _ remoteClass 歸因于, deserializer 使用計算哪Java 組使用。

var _ remoteClass:串;

12. 提供類以建設者過去常常初始化 _ remoteClass 易變。

13.  作用Review() {

14.  _ remoteClass="samples 。餐廳。回顧";

}

實驗室10: 建立MyReview 。mxml

在這個模塊里, 您建立一個習慣組分被命名 MyReview. 這個組分使用戶輸入他/她自己的回顧為餐廳。

在這個模塊的完成, 應用將看起來象這:

圖10 。 模塊, 在您以后建立MyReview 。mxml 組分

步驟1: 建立MyReview 組分

在這第一步, 您建立用戶界面為MyReview 組分。 您添加邏輯處理回顧數據在步驟3 。

1. 建立一個新文件被命名MyReview 。mxml [webapp_root]\restaurant
2. 編輯MyReview 。mxml, 和鍵入以下代碼定義延伸VBox 容器的類。

3.     <?xml version="1 。0"encoding="utf-8 "?>

4.         <mx:VBox xmlns:mx="http://www 。macromedia 。com/2003/mxml "marginTop="8 "marginLeft="8 "marginRight="8 "marginBottom="8">

</mx:VBox>

5. 定義一個實例變量被命名 restaurantId. 價值為這可變物將由主要應用提供(參見 步驟2).

6.     <mx:Script>

7.     var restaurantId:數字;

</mx:Script>

8. 計劃適當的用戶界面組分要求奪取顧客的回顧。

9.     <mx:Form>

10.  <mx:FormItem label="Your Name">

11.  <mx:TextInput id="reviewer"/>

12.  </mx:FormItem>

13.  <mx:FormItem label="Title">

14.  <mx:TextInput id="title"/>

15.  </mx:FormItem>

16.  <mx:FormItem label="Rating">

17.  <mx:NumericStepper id="rating 的" minimum="0" maximum="10"/>

18.  </mx:FormItem>

19.  </mx:Form>

20.  <mx:TextArea id="reviewText" widthFlex="1" heightFlex="1"/>

<mx:按鈕label="Post 我的Review"/>

步驟2: 添加MyReview 來主要應用

1. 復制restaurant8 。mxml 對restaurant9 。mxml 。
2. 打開restaurant9 。mxml 。
3. 添加 MyReview 標記作為第三個制表符在TabNavigator 容器, 提供價值為 restaurandId.

4.     <mx:TabNavigator>

5.     <RestaurantDetail label="General 信息" dataObject="{dg 。selectedItem}"/>

6.     <ReviewList label="Reviews" list="{reviewList}"/>

7.     <MyReview label="MyReview" restaurantId="{dg 。selectedItem 。restaurantId}"/>

</mx:TabNavigator>

8. 測試應用: http://localhost:8700/flex/restaurant/restaurant9 。mxml

步驟3: 完成MyReview

1. 打開MyReview 。mxml 。

2.    定義一次習慣事件被命名 reviewAdded.

3.     <mx:Metadata>

4.     [ Event("reviewAdded") ]

</mx:Metadata>

5.    在里面 <mx:Script> 標記, 定義一個作用被命名 addReview(). 在這個作用, 您:

• 建立事例 回顧 類。
• 居住于這個事例以價值由用戶鍵入。
• 派遣 reviewAdded 事件, 通過回顧對象作為事件對象一部分。

o        作用addReview() {

o        var r = 新樣品。餐廳。Review();

o        r 。restaurantId=restaurantId;

o        r 。reviewer=reviewer 。文本;

o        r 。title=title 。文本;

o        r 。rating=rating 。價值;

o        r 。reviewText=reviewText 。文本;

o        dispatchEvent({type:"reviewAdded", 回顧:r});

}

6.    提供崗位我的回顧按鈕以祈求的點擊事件經理 addReview() 方法。

<mx:按鈕label="Post 我的回顧" click="addReview()"/>

步驟3: 送新回顧到服務器

1.    添加 addReview() 方法對 RemoteObject 聲明

2.     <mx:RemoteObject id="srv" source="samples 。餐廳。RestaurantService">

3.     <mx:方法name="getRestaurantList" result="restaurantList=event 。result"/>

4.     <mx:方法name="getReviewList" result="reviewList=event 。result"/>

5.     <mx:方法name="addReview"/>

</mx:RemoteObject>

6. 添加一個事件經理來MyReview 組分祈求 addReview() 方法在 RemoteObject 當回顧添加。

7.     <MyReview label="MyReview" restaurantId="{dg 。selectedItem 。restaurantId} "

reviewAdded="srv 。addReview(event 。review)"/>

8. 測試應用: http://localhost:8700/flex/restaurant/restaurant9 。mxml

實驗室11: 建立地圖。mxml

在這個模塊里, 您建立一個習慣組分被命名 地圖. 這個組分允許用戶選擇餐廳由區域使用地圖隱喻。

在這個模塊的完成, 應用將看起來象這:

圖11 。 完全模塊

步驟1: 建立MyReview 組分

在這第一步, 您建立用戶界面為 MyReview 組分。 您添加邏輯處理回顧數據 步驟3.

1. 建立一個新文件被命名Map 。mxml [webapp_root]\restaurant

2.    編輯地圖。mxml, 和鍵入以下代碼。

3.     <?xml version="1 。0"encoding="utf-8 "?>

4.       <mx:帆布xmlns:mx="http://www 。macromedia 。com/2003/mxml "xmlns =" * "

5.       mouseMove="doMouseMove()">

6.       <mx:Script>

7.       var bIsDown:布爾= 假;

8.       var lastX:數字;

9.       var lastY:數字;

10.    作用doMouseDown() {

11.    bIsDown = 配齊;

12.    lastX = mouseX;

13.    lastY = mouseY;

14.    }

15.    作用doMouseUp() {

16.    bIsDown = 假;

17.    }

18.    作用doMouseMove() {

19.    如果(bIsDown) {

20.    var deltaX = mouseX - lastX;

21.    var deltaY = mouseY - lastY;

22.    

23.    選擇器。x + = deltaX;

24.    選擇器。y + = deltaY;

25.    

26.    lastX = mouseX;

27.    lastY = mouseY;

28.    }

29.    }

30.    

31.    </mx:Script>

32.    

33.    <mx:圖象id="map" source="@Embed('boston 。gif')"/>

34.    <mx:圖象id="selector" source="@Embed('frame 。gif ')"

35.    mouseDown="doMouseDown()"

36.    mouseUp="doMouseUp()"/>

37.    

  </mx:Canvas>

步驟2: 添加地圖來主要應用

1. 復制restaurant9 。mxml 對restaurant10 。mxml 。
2. 打開restaurant10 。mxml 。

3.    添加地圖標記在"餐廳名單" 盤區在DataGrid 之前。

<Map/>

4. 測試應用: http://localhost:8700/flex/restaurant/restaurant10 。mxml

步驟3: 處理地圖地區選擇

1. 打開地圖。mxml 。

2.    定義一次習慣事件被命名 selectionChanged.

3.     <mx:Metadata>

4.       [ Event("selectionChanged") ]

  </mx:Metadata>

5.    派遣 selectionChanged 事件在 doMouseUp() 作用。 作為事件對象的屬性提供選擇座標。

6.     作用doMouseUp() {

7.       bIsDown = 假;

8.       dispatchEvent({type:"selectionChanged", x1:選擇器。x, x2:選擇器。x+selector 。寬度, y1:選擇器。y, y2:選擇器。y+selector 。高度});

  }

步驟4: 檢索餐廳名單為選擇的區域

1. 添加 getRestaurantListByArea() 方法對 RemoteObject 聲明

2.     <mx:RemoteObject id="srv" source="samples 。餐廳。RestaurantService">

3.       <mx:方法name="getRestaurantList" result="restaurantList=event 。result"/>

4.       <mx:方法name="getRestaurantListByArea" result="restaurantList=event 。result"/>

5.       <mx:方法name="getReviewList" result="reviewList=event 。result"/>

6.       <mx:方法name="addReview"/>

  </mx:RemoteObject>

7.    添加和事件經理對 地圖 組分祈求 getRestaurantListByArea() 方法在 RemoteObject 當用戶選擇一個新區域。

<Map width="495" height="355" selectionChanged="srv 。getRestaurantListByArea(event 。x1, 事件。x2, 事件。y1, 事件。y2)"/>

8. 測試應用: http://localhost:8700/flex/restaurant/restaurant10 。mxml