在flashBuilder安裝好uml4as以後,
我們先開啟一個專案,體驗看看uml4as對於程式撰寫的幫助在哪裡吧!
0.1 下載:http://www.uml4as.com/flower-platform/download.html
0.2 安裝:不要直接丟進eclipse或是flashBuilder中,
請選擇 Help/Install New Software.../Add/Archive... 選擇剛剛下載的jar檔案來安裝
0.3建立一個新的 flex/actionScript 專案
個人測試過,目前的版本對於flexSDK4.1以上版本的支援度還有問題,
使用flexSDK4.1以後,要修改的程式碼不會比flexSDK3.5來的少,
所以我們就選擇舊版的flex3.6SDK
至於專案的名稱就取名UMLModel
1.建立一個新的UML4AS模型
建立好flex projext以後,我們在裡面建立一個新的資料夾,
在專案上按滑鼠右鍵,選擇 New/Folder
這資料夾主要要放的檔案就是等等要設計的uml圖表.
然後我們在umlModel這資料夾按滑鼠右鍵,再選擇 New/Other/Flower Modeling Platform/UML4AS File,
這時候會跳出對話視窗,取好 UML4AS 用來放置各種不同uml圖表的專案檔,
我把這uml專案檔取名為simple-mvc
這邊要選擇和flex專案要同步的資料夾,如果沒有經過特殊修改的話,通常預設就是src這資料夾.
至於flexSDK版本只有兩種能選,一個是3.5一個是4.1,我們這裡選擇flex SDK 3.5.
選擇完成以後,專案的資料夾應該如圖所示
2.專案總管
如果沒有辦法看到上述的圖,
可以到這邊去找 Window/Show View/Other/General/Project Explorer
這和flashbuilder裡面的Package Explorer 雖然長的很像,但是實際上是不同東西的!!
不過比較快速的方式,就是直接從flashBuilder右上方直接切換 Perspective 為 Flower Moding perspective
在 Project Explorer 中,展開 simple-mvc.uml4as ,可以發現有一個 Root 的資料夾,
然後在這邊建立一個新的Class Diagram,等等就是要在這邊去做uml圖表的規劃
建立好 Class Diagram , 我取名為 Diagram-mvc,點兩下開啟他,就會直接進入uml圖表的編輯模式了.
3.uml class
我們選擇右邊的工具列的class,
然後在uml圖裡面拉一個框框,這時候會跳出對話視窗.
要注意一下class的相對位置是不是在Root.src,如果不是的話要改位置,
不然會沒辦法同步成功.
我們先做好Model這個class,然後儲存.
如果正常的話,這時候專案總管應該會出現Model.as
儲存前:
儲存後:
如果這一步正常的話,我們再繼續製作其他的class,
把simple-mvc的基本三個class都完成
4.class添加屬性與方法
打上屬性的名稱,最前面的符號
-表示private
+表示public
當然,變數後面的:要記得填入型別
我們在model裡面,設一個_totals:int的變數後,並且給他設定好set與get
然後我們再選擇右邊工具列的
設定一下彼此間的關聯關係
實際上我除了變數名稱外,其他的部分都用預設值
至於加入方法的方式和加入屬性的方式一樣,不同的只是填入的位置是下半欄
再加入方法的時候,相關參數他也會有程式碼提示.
我們再一個LabelView是用來顯示Label內容用的
選好繼承用的鍵頭,讓LabelView繼承View
一樣用拖曳的方式,拉好以後完成
目前階段,整個架構大約像這樣
5.加入已經完成的類別
雖然做好了mvc架構,不過我們還差一個主要運作的起始檔案
至於起始檔案已經有了,就是UMLModel.mxml這個檔案,
只要src原本有的class,正常情況下應該會出現在uml4as的資源當中,
只要把這檔案拖曳到uml繪製區內就可以做uml編輯了
至於設定彼此間的關聯性和之前一樣
用這鍵頭拖曳一下,寫一下變數名稱就好了!
6.不完美的uml4as
儲存完以後,我們會發現as檔案居然會出現問題.
我們仔細看一下程式碼,
原來uml4as並沒有幫我們把function的回傳值加上去,
另外美中不足的是,set get的方法,他的參數都是用預設的,
和我自己的撰寫習慣略有不同,可惜還沒有地方可以調整.
不過uml4as的uml編輯,是雙向同步的,在程式碼直接編輯的話,是可以直接同步到uml圖表中的,
不過至少simpleMVC的架構都已經完成
然後我們就繼續補完程式碼~!
當然還是可以從uml4as中去設定
比方說model的靜態事件名稱.
最終uml完成圖
我們先開啟一個專案,體驗看看uml4as對於程式撰寫的幫助在哪裡吧!
0.1 下載:http://www.uml4as.com/flower-platform/download.html
0.2 安裝:不要直接丟進eclipse或是flashBuilder中,
請選擇 Help/Install New Software.../Add/Archive... 選擇剛剛下載的jar檔案來安裝
0.3建立一個新的 flex/actionScript 專案
個人測試過,目前的版本對於flexSDK4.1以上版本的支援度還有問題,
使用flexSDK4.1以後,要修改的程式碼不會比flexSDK3.5來的少,
所以我們就選擇舊版的flex3.6SDK
至於專案的名稱就取名UMLModel
1.建立一個新的UML4AS模型
建立好flex projext以後,我們在裡面建立一個新的資料夾,
在專案上按滑鼠右鍵,選擇 New/Folder
然後我們在umlModel這資料夾按滑鼠右鍵,再選擇 New/Other/Flower Modeling Platform/UML4AS File,
這時候會跳出對話視窗,取好 UML4AS 用來放置各種不同uml圖表的專案檔,
至於flexSDK版本只有兩種能選,一個是3.5一個是4.1,我們這裡選擇flex SDK 3.5.
選擇完成以後,專案的資料夾應該如圖所示
2.專案總管
如果沒有辦法看到上述的圖,
可以到這邊去找 Window/Show View/Other/General/Project Explorer
這和flashbuilder裡面的Package Explorer 雖然長的很像,但是實際上是不同東西的!!
不過比較快速的方式,就是直接從flashBuilder右上方直接切換 Perspective 為 Flower Moding perspective
在 Project Explorer 中,展開 simple-mvc.uml4as ,可以發現有一個 Root 的資料夾,
然後在這邊建立一個新的Class Diagram,等等就是要在這邊去做uml圖表的規劃
建立好 Class Diagram , 我取名為 Diagram-mvc,點兩下開啟他,就會直接進入uml圖表的編輯模式了.
3.uml class
我們選擇右邊的工具列的class,
然後在uml圖裡面拉一個框框,這時候會跳出對話視窗.
不然會沒辦法同步成功.
我們先做好Model這個class,然後儲存.
如果正常的話,這時候專案總管應該會出現Model.as
儲存前:
儲存後:
如果這一步正常的話,我們再繼續製作其他的class,
把simple-mvc的基本三個class都完成
4.class添加屬性與方法
打上屬性的名稱,最前面的符號
-表示private
+表示public
當然,變數後面的:要記得填入型別
我們在model裡面,設一個_totals:int的變數後,並且給他設定好set與get
然後我們再選擇右邊工具列的
實際上我除了變數名稱外,其他的部分都用預設值
至於加入方法的方式和加入屬性的方式一樣,不同的只是填入的位置是下半欄
再加入方法的時候,相關參數他也會有程式碼提示.
我們再一個LabelView是用來顯示Label內容用的
選好繼承用的鍵頭,讓LabelView繼承View
一樣用拖曳的方式,拉好以後完成
目前階段,整個架構大約像這樣
5.加入已經完成的類別
雖然做好了mvc架構,不過我們還差一個主要運作的起始檔案
至於起始檔案已經有了,就是UMLModel.mxml這個檔案,
只要src原本有的class,正常情況下應該會出現在uml4as的資源當中,
只要把這檔案拖曳到uml繪製區內就可以做uml編輯了
至於設定彼此間的關聯性和之前一樣
用這鍵頭拖曳一下,寫一下變數名稱就好了!
6.不完美的uml4as
儲存完以後,我們會發現as檔案居然會出現問題.
我們仔細看一下程式碼,
原來uml4as並沒有幫我們把function的回傳值加上去,
另外美中不足的是,set get的方法,他的參數都是用預設的,
和我自己的撰寫習慣略有不同,可惜還沒有地方可以調整.
不過uml4as的uml編輯,是雙向同步的,在程式碼直接編輯的話,是可以直接同步到uml圖表中的,
不過至少simpleMVC的架構都已經完成
然後我們就繼續補完程式碼~!
當然還是可以從uml4as中去設定
比方說model的靜態事件名稱.
最終uml完成圖
沒有留言:
張貼留言