RIAWAVE – 一個輕量化的Flex 2 應用程式開發手法(3)

 

＊使用者介面架構

-程式由下列 views 所組成

每個view 即是一個 mxml component

1、FormLogin

2、FormListing

3、FormDetail

其中 FormListing 與 FormDetail 被包在一個更大的 Container 裏，名稱為 FormMain。

這樣做的目地是因為整支程式分成兩個大的 State，一個是 Login另一個是 Main，它們的結構如下：

(state 結構)

-Login

FormLogin

-Main

FormMain

FormListing

FormDetail

程式一啟動時是顯示 Login state, 當login完成後即會切換到 Main state，為了在 Main state內維持程式的完整性，同時希望每個電話簿皆可以拖拉，因此多加了一層 FormMain(它是一個 Panel 元件，並加上拖拉功能) 去包住 FormListing與 FormDetail。

＊Flex project 目錄結構

專案目錄下有
dao
event
ui
util
vo

等五個folder(也就是package)分別置放不同類型之class 檔案。

一般大型專案建議採 com.companyname.dao 這樣的 package命名方式較易畫分眾多檔案。

＊基本流程

以「新增聯絡人」這個 use case 為例，它的操作流程如下：

1、使用者在左邊畫面按下 + 號

2、FormListing 透過 ModelLocator 廣播一個事件，名稱為 ADD_CONTACT

3、FormDetail 早先已跟 ModelLocator註冊偵聽此一事件，因此聽到 CONTACT事件後即執行 event handler，名稱為onAddContact()

4、onAddContact 會將目前表格中所有資料清空，並自動將focus設為為 name欄位以方便user輸入資料

5、當user填完所有欄位並按下 save 鈕時後，FormDetail即會生成一個名稱為Contact 的 Value Object(VO)，並將新輸入的資料放進此 vo 中

6、接者 FormListing 會操作 daoContact裏面的 addContact( vo ) 將此vo傳給 dao

7、dao會透過內部設定好的連線方式(此例中使用 flash remoting)將 vo 傳回 app server，並接收 app server傳回的值(由 _Result handler 處理)

8、Result handler 接到app server 回傳的結果後，即會做相關的處理(例如將server傳回的 array of object 轉換為 ArrayCollection of Contact VO)，然後將轉換好的 ArrayCollecction 存回 ModelLocator

9、由於 FormListing 中的 datagrid 早先是透過 dataBinding的方式直接結結到 ModelLocator 中的 currentContacts，因此當上一步中的 Result Handler 一將新的值存回

ModelLocator後，即會觸發 datagrid 更新畫面，剛才新增的 Contact 也就會出現了。