使用Cairngorm開發Flex(二):一個好友管理例子

這裏我們繼續Cairngorm的介紹,認識了什麼是Cairngorm以後,我們來實現一個demo。跟着一步步做先來的話,相信會對這個框架的使用有更深的理解。

需要準備:

在看這個例子之前,確保具備以下條件:

  1. 讀懂了使用Cairngorm開發Flex(一),理解Cairngorm的構架是怎樣的。
  2. 具有一定的java知識。
  3. 知道flex sdk4。

例子的環境和工具:

  1. Flex builder 4。下載很容易找到。這個例子也是我用flex4寫的第一個例子,發現跟flex3很多不同,要重新學習,痛苦的轉型啊,淚奔~。
  2. Mysql數據庫。
  3. tomcat。
  4. blazeds。

不知道怎麼配置的可以看我的文章:http://blog.csdn.net/duran1986/archive/2010/03/29/5430329.aspx

例子功能描述:

功能很簡單,在前端添加好友(名字,電話),將好友信息發送到java編寫的後臺,存儲到數據庫,成功的話返回所有好友到客戶端顯示。

數據庫sql:

新建一個mysql數據庫,名字叫:CairngormDemo。在數據庫下執行下面sql建表:

 

後臺java:

項目結構:

 

 

 

MysqlConnection.java:

 

 

DemoService.java

 

ProgramEnter.java(測試用):

 

可以運行測試程序來測試是否正確。

 

 重頭戲Flex:

啓動flex builder4,新建個項目,這個項目依然使用到blazeds,相關環境的配置看http://blog.csdn.net/duran1986/archive/2010/03/29/5430329.aspx。項目設置如下:

 

第一步:新建項目,注意選擇服務器類型爲j2ee。

 

 

第二步:配置服務器,這裏不清楚的看我之前關於環境配置那片文章就行了。

 

 

第三步:這裏點添加swc,把我們的cairngorm包加進來。

 

第四步:工程建好以後,建立以下的文件結構:

 

 

現在貼上每部分的代碼:

 

名稱:FriendVO.as。

說明:對象建模,對應數據庫裏的對象。

 

 

名稱:AppModelLocator.as。

說明:對應cairngorm框架裏的model locator模塊,保存運行時數據,必須可綁定。

 

 

名稱:AddFriendController.as

說明:對應control模塊,只負責將command與對應的時間綁定,這裏把AddFriendsEvent事件和AddFriendCommand綁定。

 

 

名稱:GetFriendsController.as。

說明:對應control模塊,只負責將command與對應的時間綁定,這裏把GetFriendsEvent事件和GetFriendsCommand綁定。

 

 

名稱:AddFriendCommand.as。

說明:捕獲添加事件後的響應模塊,這裏負責調用delegate模塊,還有得到返回結果的相應處理也在這裏完成。這裏添加成功後返回所有朋友的信息,我們要更新modellocator。

 

 

名稱:GetFriendsCommand.as。

說明:捕獲到GetFriendsEvent事件以後的響應模塊。負責獲取所有朋友信息,返回結果後更新modellocator。

 

 

名稱:AddFriendDelegate.as。

說明:被command模塊調用,通過獲得service模塊裏的對象來進行前後臺通訊。

 

 

名稱:GetFriendsDelegate.as。

說明:被command模塊調用,通過獲得service模塊裏的對象來進行前後臺通訊。

 

 

名稱:AddFriendEvent.as。

說明:自定義事件,不多解釋。

 

 

名稱:GetFriendsEvent.as。

說明:自定義事件,不多解釋。

 

 

名稱:ServiceLocator.mxml。

說明:在這裏定義遠程訪問對象,這裏的destination要和blazeds裏面remote-config.xml裏面的destination一致,不清楚看我之前關於環境整合的文章。

 

 

名稱:FriendView.mxml。

說明:UI模塊,在這裏顯示用戶接口,沒什麼特別。

 

 

名稱:cairngorm_demo.mxml。

說明:程序入口,是整個框架整合的關鍵,注意這裏面定義的三個命名空間,把control和service都實例化。

 

 

最後,上個效果圖:

 

 

例子就到這裏,覺得麻煩想要源碼的,留下郵箱吧,見到必發^^

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章