應用模型驅動架構建構的一套Android精靈程式的快速開發系統 - 政大學術集成

全文

(1)國立政治大學資訊科學系 Department of Computer Science National Chengchi University 碩士論文 Master’s Thesis. 立. 政治大. ‧ 國. 學. ‧. 應用模型驅動架構建構的一套Android精靈程式的快速開發系統. n. al. er. io. sit. y. Nat. An MDA-Based System Enabling the Rapid Construction of Android Wizard Applications Ch. engchi. i n U. v. 研究生：韓忠恆指導教授：陳正佳. 中華民國一○四年一月 January 2015.

(2) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v.

(3) 應用模型驅動架構建構的一套Android精靈程式的快速開發系統 An MDA-Based System Enabling the Rapid Construction of Android Wizard Applications 研究生：韓忠恆. Student：Han Chung-Heng. 指導教授：陳正佳. Advisor：Chen Cheng-Chia. 立. 政治大國立政治大學. ‧ 國. 碩士論文. 學. 資訊科學系. ‧. io. sit. y. Nat. A Thesis. er. submitted to Department of Computer Science. n. a. v. l C Chengchi University National ni. hengchi U. in partial fulfillment of the Requirements for the degree of Master in Computer Science. 中華民國一○四年一月 January 2015.

(4) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v.

(5) 謝誌在政大資科研究所的三年裡，是我求學生涯中最累，也是最有成就的過程。在這期間中費盡心力學習新技術同時建立相關知識，領悟到知識不是一天就能建立，必須日積月累不斷的在生活中使用它才能夠使之根深蒂固。在學習過程中很感謝陳正佳老師不厭其煩的指導，在我最需要幫助的時候給予我很大的幫助。除了在專業知識的提供外，也會願意購買我們在研究上所需的設備，對於研究的實作提供了很大幫助。另外也十分感謝詹亞騰學長的指導，帶領我進入導引精靈平台研究的核心架構，使我能夠很快速的上手開發並實作本系統。學長的優點除了會耐心. 政治大. 聆聽我們的問題外，更能即時的提供解決的方法，以及很多專業的意見。另外也感謝同. 立. 學們與學弟妹們在課業以及生活上的幫助。沒有各位夥伴的幫助，這求學的道路必定跌. ‧ 國. 學. 跌撞撞。另外感謝我最喜歡的人，也是默默在身後支持我的人，英文系的張莉華助教。在我於英文系工讀的期間除了給予我工作上的指導外，還會分享他的餐點和零食，使我. ‧. 有了回到家的感覺。我認為專業知識的建立很重要之外，人際關係和健康也是同等的重要。因此我每周都會邀同學和學弟一起打球和健身，這樣不僅能夠強身健體，更能建立. y. Nat. n. al. er. io. 的連結在一起了。在此感謝你們了，夥伴。. sit. 跨實驗室的友誼。雖然我們專業知識上的連結不多，但是在未來的人生裡我們已經緊密. i n U. v. 求學的過程中對我來說最大的壓力並非來自於學業，是家人的期許。為了使家人安. Ch. engchi. 心，我時常要求自己上課認真下課也認真，才會累積了很多在課堂上的基礎。有了家人的支持，使我感覺到求學的過程中自己並不孤獨。有了你們，我才會為了夢想而努力，為了理想而堅持，才會感覺到每一個即將到來的明天都是希望。. 韓忠恆僅致於政治大學資訊科學研究所中華民國一○四年一月. i.

(6) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ii. i n U. v.

(7) 應用模型驅動架構建構的一套Android精靈程式的快速開發系統摘要導引精靈(Wizard)是一種用於收集用戶端資料的互動式人機介面程式，它是由一系列的對話框組成。使用導引精靈，可以避免資料遺漏、更能確保資料的完整性。由於方便好用，導引精靈不僅大量的使用在既有的電腦程式中，很顯然地，它也應該是許多新應用軟體系統不可或缺的一部分。. 政治大. 為了克服開發導引精靈過程的繁雜，瑣碎與費時，我們曾開發一套遵循 MDA 架構. 立. 的多平台導引精靈快速開發系統，稱為 MoDWizII。利用 MoDWizII，我們只要輸入高. ‧ 國. 學. 階的平台無關精靈描述，系統即能自動產生各支援平台的對應導引精靈實做。目前系統支援的平台包括：Java、Eclipse 以及 Web 應用。. ‧. 隨著手機與平板電腦的普及與無所不在，其應用系統顯然亦有收集使用者資料的需求。相對於傳統電腦，行動裝置的先天限制並不適合傳統的編輯輸入，因此導引精靈顯. y. Nat. n. al. er. io. 充至行動平台。. sit. 然是一種更值得考量的替代選項。此一因素，促使我們考量將 MoDWizII 的支援對象擴. i n U. v. 本研究的主要任務是擴充 MoDWizII 的支援對象至行動平台。新系統名稱為. Ch. engchi. MoDWiz3，目前選擇的唯一支援平台是市佔率最高的 Android 平台。據 IDC 報告，至 2013 年第三季時 Android 的行動裝置佔有率達 81%。為了使得 ModWiz3 得以產生 Android 平台的精靈實做，我們在此研究中，貢獻了一套針對 Android 平台特性而設計的精靈程式 Android 平台專屬超模型(PSMM)。除此之外，我們亦實做了在 MDA 架構下，針對 Android 平台的必要 M2M 與 M2T 轉換工具。利用這些工具鏈，我們即能將高階的平台無關精靈描述轉換成 Android 平台的導引精靈實做。和以往支援平台有一個顯著不同之處是，Android 平台本身並無提供立即可用的導引精靈 API 可供實做時使用，因此本研究的另一貢獻是使用 Android fragment 機制設計、選用和實做所有系統所需的精靈元件。. iii.

(8) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. iv. i n U. v.

(9) An MDA-Based System Enabling the Rapid Construction of Android Wizard Applications Abstract Software wizards are interactive programs consisting of a series of UI dialogs aimed to acquire responded data from the users. Using wizards to collect data has the advantage of ensuring the completeness and integrity of the collected data. They are not only pervasively found in existing computer systems but apparently would also be an indispensable part of many software. 政治大 In order to overcome the shortage of developing wizards from scratch, which are 立 complicated, tedious and time-consuming, our lab has developed a system called MoDWizII, applications to be developed.. ‧ 國. 學. which can produce multi-platform wizards from a single declarative wizard description by following OMG's MDA approach. Currently the supported platforms include Java, Eclipse and. ‧. Web applications.. With the explosive popularity of mobile phones and tablets, the need of complex data input. y. Nat. sit. using mobile devices increases. However, due to the size limitation, it is very inconvenient to. al. er. io. use traditional editing approach to input large amount of data on these devices. In contrast,. v. n. wizards in these use cases seem more suitable. This motivated the inclusion of mobile platforms. Ch. to the supported platforms of our system.. engchi. i n U. In this research we extend MoDWizII to a new one called MoDWiz3 with the goal of supporting also mobile platforms. Currently the only selected platform is Android, which is used by most people as indicated by a report of International Data Corporation (IDC) that the market share of Android platform was 81% in the 3rd quarter in 2013. To enable the support of Android platform, this research created a definition of PSMM (Platform-Specific MetaModel) for wizards on the Android platform; standard M2M and M2T toolchain was also developed and can be used to generate practical Android wizard applications from a platform independent wizard description. While previous supported platforms have well-established wizard API, it is not the case for Android. We thus included in the research also the design, selection and implementation of all required wizard components for the Android platform. v.

(10) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. vi. i n U. v.

(11) 目錄序論 .............................................................................................................................. 1 1.1. 研究背景與動機 .................................................................................................... 1. 1.2. 研究目的 ................................................................................................................ 4. 1.3. 論文貢獻與特色 .................................................................................................... 5 相關研究 ...................................................................................................................... 7. 2.1. Android 平台介紹 .................................................................................................. 7. 2.2. Android 組件介紹 ................................................................................................ 10. 2.3. Android 佈局介紹 ................................................................................................ 12 線性佈局(LinearLayout) .......................................................................... 13. 2.3.2. 表格佈局(TableLayout) ........................................................................... 14. 框架佈局(FrameLayout) .......................................................................... 17 絕對佈局(Absolutelayout) ....................................................................... 18. y. Nat. sit. Android 元件介紹 ................................................................................................ 19 按鈕(Button)............................................................................................. 20. 2.4.2. 單選對話框(RadioButton) ....................................................................... 21. 2.4.3. 多選對話框(CheckBox)........................................................................... 21. 2.4.4. 表單顯示(ListView) ................................................................................. 22. 2.4.5. 文字顯示(TextView) ................................................................................ 23. 2.4.6. 文字對話框(EditText) .............................................................................. 23. 2.4.7. 下拉式選單(Spinner) ............................................................................... 24. 2.4.8. 圖像視圖(ImageView) ............................................................................. 24. n. al. er. 2.4.1. io. 2.5. ‧ 國. 2.3.5. 相對佈局(RelativeLayout) ....................................................................... 15. ‧. 2.3.4. 學. 2.3.1. 2.3.3. 2.4. 立. 政治大. Ch. engchi. i n U. v. Model-Driven Architecture, MDA ....................................................................... 25 Eclipse 平台與相關工具 ........................................................................................... 30. 3.1. Eclipse Modeling Framework, EMF .................................................................... 31. 3.2. Xtext ..................................................................................................................... 33 vii.

(12) 3.3. Xtend .................................................................................................................... 34 MoDWiz3 系統 .......................................................................................................... 38. 4.1. MoDWizII 系統架構............................................................................................ 38. 4.2. MoDWiz3 系統實作 ........................................................................................... 40. 4.3. 4.2.1. 超模型以及對應領域專屬語言的建立 .................................................. 40. 4.2.2. 模型的轉換 .............................................................................................. 41. 回顧 MoDWiz 系列系統的發展 ......................................................................... 44 4.3.1. Plain Wizard ............................................................................................. 44. 4.3.2. Guided Wizard .......................................................................................... 45. 政治大. 導引精靈結構分析與超模型 .................................................................................... 47. 立. 平台無關導引精靈 .............................................................................................. 47. 5.2. Android 平台專屬導引精靈 ................................................................................ 52. Android 使用者介面元件 ........................................................................ 62. y. sit. 5.3. Android 導引精靈的轉換 ........................................................................ 56. Nat. 5.2.3. Android 導引精靈的結構 ........................................................................ 54. ‧. 5.2.2. ‧ 國. 5.2.1. 學. 5.1. Android 導引精靈的轉換規則 ............................................................................ 67. io. n. al. er. 系統操作 .................................................................................................................... 73. i n U. v. 6.1. 執行環境與系統安裝 .......................................................................................... 73. 6.2. 延伸導引精靈描述語言(EWDL) ........................................................................ 76. 6.3. MoDWiz3 系統操作流程 ................................................................................... 79. Ch. engchi. 結論與未來研究方向 ................................................................................................ 83 7.1. 結論 ...................................................................................................................... 83. 7.2. 未來研究方向 ...................................................................................................... 84 7.2.1. 客製化文件 .............................................................................................. 84. 7.2.2. 以範本導引精靈產生實作導引精靈 ...................................................... 84. 7.2.3. 導引精靈平台的擴充 .............................................................................. 85. 7.2.4. 其他的研究方向 ...................................................................................... 85 viii.

(13) 參考文獻 .................................................................................................................................. 87 附錄 A Android 導引精靈範本 ............................................................................................... 91 附錄 A-1 Android 導引精靈語法結構........................................................................... 91 附錄 A-2 Android 導引精靈介面轉換程式................................................................... 94 附錄 A-3 Android 導引精靈使用者介面元件與程式實作........................................... 98 附錄 A-4 Android 導引精靈 PIM 實例 ....................................................................... 105. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ix. i n U. v.

(14) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. x. i n U. v.

(15) 圖目錄圖 1-1：國際研究顧問機構 Gartner 統計的全球智慧手機銷售圖。 ................................. 2 圖 1-2：一般程式的開發流程。 ........................................................................................... 2 圖 1-3：一般程式的開發流程應用於多平台導引精靈程式開發。 ................................... 3 圖 1-4：MDA 於多平台導引精靈程式開發系統的架構。 ................................................ 4 圖 2-1：Android 系統架構階層圖。 ................................................................................... 9 圖 2-2：Layout 的繼承關係圖。 ........................................................................................ 13 圖 2-3：LinearLayout。 ....................................................................................................... 14. 政治大. 圖 2-4：TableLayout。 ......................................................................................................... 15. 立. 圖 2-5：RelativeLayout。 .................................................................................................... 17. ‧ 國. 學. 圖 2-6：FrameLayout。 ....................................................................................................... 18 圖 2-7：AbsoluteLayout。 ................................................................................................... 19. ‧. 圖 2-8：Android 元件的繼承關係圖。 .............................................................................. 20 圖 2-9：Button 元件。 ......................................................................................................... 20. y. Nat. sit. 圖 2-10：RadioButton 元件。 ............................................................................................. 21. n. al. er. io. 圖 2-11：CheckBox 元件。 ................................................................................................. 22. i n U. v. 圖 2-12：ListView 元件。 ................................................................................................... 23. Ch. engchi. 圖 2-13：TextView 元件。 .................................................................................................. 23 圖 2-14：EditText 元件。 .................................................................................................... 23 圖 2-15：Spinner 元件。 ..................................................................................................... 24 圖 2-16：ImageView 元件。 ............................................................................................... 25 圖 2-17：MDA 概念圖。 .................................................................................................... 26 圖 2-18：以 MOF 為基礎的四層 MDA 架構圖。 ............................................................. 27 圖 2-19：XMI in MDA。..................................................................................................... 29 圖 3-1：Eclipse 平台架構圖。 ............................................................................................ 30 圖 4-1：MoDWiz 系統架構。 ............................................................................................. 39 圖 4-2：MDA 的模型關係圖。 .......................................................................................... 40 xi.

(16) 圖 4-3：模型與模型之間的轉換示意圖。 ......................................................................... 42 圖 4-4：模型與程式碼之間的轉換示意圖。 ..................................................................... 43 圖 5-1：修改之後 MoDWiz3 系統平台無關的導引精靈超模型。 .................................. 48 圖 5-2：MoDWiz3 系統的 Android 平台專屬導引精靈超模型。.................................... 52 圖 5-3：Android 導引精靈介面 Layout 設計。 ................................................................ 53 圖 5-4：Activity 的生命週期。 ........................................................................................... 55 圖 5-5：Fragment 的生命週期。 ........................................................................................ 56 圖 5-6：Review 顯示。 ........................................................................................................ 62. 政治大圖 5-8：AradioButton 於 Android 程式碼轉換(M2T)示意圖。 ........................................ 64 立圖 5-7：TextInput 於 Android 程式碼轉換(M2T)示意圖。 .............................................. 63. 圖 5-9：AcheckBox 於 Android 程式碼轉換(M2T)示意圖。 ........................................... 64. ‧ 國. 學. 圖 5-10：Aspinner 於 Android 程式碼轉換(M2T)示意圖。 ............................................. 65 圖 5-11：Border 於 Android 程式碼轉換(M2T)示意圖。 ................................................. 65. ‧. 圖 5-12：AfileBrowser 於 Android 程式碼轉換(M2T)示意圖。 ...................................... 66. Nat. sit. y. 圖 5-13：Validation 於 Android 程式碼轉換(M2T)示意圖。 ........................................... 66. er. io. 圖 5-14：Android 導引精靈的頁面結構轉換(M2M)示意圖。 ......................................... 68. al. 圖 5-15：TextInput 於 Android 導引精靈轉換(M2M)示意圖。 ....................................... 69. n. v i n C h 導引精靈轉換(M2M)示意圖(1)。圖 5-16：MultipleChoice 於 Android ......................... 70 engchi U 圖 5-17：MultipleChoice 於 Android 導引精靈轉換(M2M)示意圖(2)。 ......................... 71 圖 5-18：Dialog 於 Android 導引精靈轉換(M2M)圖示意圖。 ........................................ 71 圖 5-19：Border 於 Android 導引精靈轉換(M2M)示意圖。 ............................................ 72 圖 5-20：Validation 於 Android 導引精靈轉換(M2M)示意圖。 ...................................... 72 圖 6-1：利用 Plugin 進行 Xtext 安裝。 ............................................................................. 74 圖 6-2：建立 Android Project 流程。 ................................................................................. 75 圖 6-3：Android Project 更新並執行。 .............................................................................. 75 圖 6-4：Question 的顯示樣式。 ......................................................................................... 78 圖 6-5：EWDL 導引精靈程式流程。 ................................................................................ 79 xii.

(17) 圖 6-6：MoDWiz3 導引精靈產生器。 .............................................................................. 80 圖 6-7：使用者填答格式錯誤。 ......................................................................................... 81 圖 6-8：使用者填答格式正確。 ......................................................................................... 81 圖 6-9：Android 導引精靈程式範例。 .............................................................................. 82. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. xiii. i n U. v.

(18) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. xiv. i n U. v.

(19) 表目錄表 1-1：一般程式開發流程與 MDA 開發比較。................................................................ 6 表 2-1： LinearLayou 的屬性和說明。 ............................................................................. 13 表 2-2：Android 上實作 LinearLayout 元件佈局。 ........................................................... 14 表 2-3：Tablelayout 與 TableRow 的屬性和說明。........................................................... 15 表 2-4：Android 上實作 TableLayout 元件佈局 ................................................................ 15 表 2-5：RelativeLayout 中的屬性和說明。 ....................................................................... 16 表 2-6：Android 上實作 RelativeLayout 元件佈局。 ........................................................ 16. 政治大. 表 2-7：FrameLayout 中的屬性和說明。 .......................................................................... 17. 立. 表 2-8：Android 上實作 FrameLayout 元件佈局。 ........................................................... 17. ‧ 國. 學. 表 2-9：AbsoluteLayout 中元件的屬性和說明。 .............................................................. 18 表 2-10：Android 上實作 AbsoluteLayout 元件佈局。 ..................................................... 19. ‧. 表 2-11：Android 上實作 Button 元件。 ............................................................................ 20 表 2-12：Android 上實作 RadioButton 元件。 .................................................................. 21. y. Nat. sit. 表 2-13：Android 上實作 CheckBox 元件。...................................................................... 22. n. al. er. io. 表 2-14：Android 上實作 ListView 元件。 ........................................................................ 22. i n U. v. 表 2-15：Android 上實作 TextView 元件。 ....................................................................... 23. Ch. engchi. 表 2-16：Android 上實作 TextView 元件。 ....................................................................... 23 表 2-17：Android 上實作 Spinner。 ................................................................................... 24 表 2-18：Android 上實作 ImageView。 ............................................................................. 25 表 3-1：基本 Xtend 程式結構。 ......................................................................................... 35 表 3-2：Create 函式範例。 ................................................................................................. 36 表 3-3：Rich Strings 範例。 ............................................................................................... 37 表 4-1：MoDWiz3 與相關系統之比較。 ........................................................................... 46 表 5-1：TextField 的轉換(上半部為轉換的實作，下半部為產生的結果)。 .................. 57 表 5-2：Branch 建構式。 .................................................................................................... 58 表 5-3：分支條件驗證和回傳。 ......................................................................................... 59 xv.

(20) 表 5-4：Map 結構。 ............................................................................................................ 60 表 5-5：Review 結構。 ........................................................................................................ 61 表 5-6：主程式呼叫 ReviewFragment 的時機。 ............................................................... 61 表 6-1：導引精靈程式的描述語法。 ................................................................................. 76 表 6-2：導引精靈頁面的描述語法。 ................................................................................. 76 表 6-3：宣告一個 Question 與 GroupQuestion 的語法。 .................................................. 77 表 6-4：宣告一個 Help 與 Validation 的語法。................................................................. 78. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. xvi. i n U. v.

(21) 序論. 近年來行動裝置逐漸取代傳統電腦，讓原本可以在電腦上做的事，現在也能透過手機或平板電腦來完成。行動裝置目前已經成為人們生活中不可或缺的必需品，對於手機或平. 政治大然是一項非常值得研究的課題。本章將針對三個主題探討，分別為研究的背景與動機、立板的依賴度是愈來愈高。因此如何快速產生可在手機或平板上執行的人機互動程式，顯. 研究目的與論文的貢獻與特色。. ‧ 國. 學 ‧. 1.1 研究背景與動機. n. er. io. sit. y. Nat. al. Ch. engchi. 1. i n U. v.

(22) 圖 1-1：國際研究顧問機構 Gartner 統計的全球智慧手機銷售圖。在手機/平板上市占率最高的作業平台顯然是 Android, 如圖 1-1 所示，Android 為行動裝置系統中市佔率最高的平台(約八成的市佔率)，2013 第一季全球智慧手機系統的市佔率約 56.9%。相較於傳統筆記或桌上電腦，由於手機/平板在硬體限制上有許多限制，以致在人機互動程式的設計上,顯然必須有特殊考量。這些差異包括： 1.. 手機/平板的畫面過小，因此不適合在同一畫面上，裝載過多訊息或問題。. 2.. 手機/平板欠缺親善鍵盤，不利大量資料輸入。. 3.. 手機/平板種類繁多，規格不一，以致要將同一應用系統，實做於多種手機/平板產. 政治大導引精靈(Wizard)是一種專門用於與使用者互動，藉此從用戶輸入收集系統所需立品時，工程繁複。. 資料的互動式應用程式。導引精靈廣泛使用於現有筆記或桌上電腦軟體系統當中，其主. ‧ 國. 學. 要優點是因為使用導引精靈不僅能有效規範複雜的資料收集流程，亦能避免資料遺漏以確保資料收集的完整性；此外，在資料收集過程中，導引精靈附設的填答提示與資料驗. ‧. 證機制，更可確保資料收集的正確性。由於導引精靈程式架構將訊息與問題分割為許多. Nat. sit. y. 詢答畫面，且每一問題只需使用者少量資料輸入，基於手機/平板的上述限制條件 1 與. al. n. 免的主流人機設計模式。. er. io. 2，我們認為以導引精靈作為手機/平板上的人機互動介面模式，將是現在與未來不可避. Ch. engchi. i n U. v. 圖 1-2：一般程式的開發流程。. 有鑑於 Android 在市場上有著相當高的市佔率，我們因而希望能研究設計 Android 精靈程式的快速開發系統。研究這問題的動機有兩個主要原因，第一是因為 Android 精靈程式的設計過程十分重複和費時。如圖 1-2 所示，當設計 Android 程式時必須先進行 2.

(23) 需求分析，與客戶討論需要哪些元件以及內容的呈現方式，接著利用 Eclipse、Netbeans 或 Visual Studio 等軟體開發平台進行 Android 程式的系統分析設計與實作，最後將實作出來的程式進行測試和修改直到能正常為止。而需要開發另一個軟體設計精靈程式時又需要相同的步驟。結論是每次要為一軟體設計精靈程式或要將精靈程式應用實作於另一平台時就必須重複這些步驟，過程既重複又費時。原因之二則是因為 Android 程式在 GUI 元件的使用上與以往的 GUI 程式有顯著差異，例如：當我們要使用一個 Android 元件時，必須在 XML【28】文件上進行新增元件，使程式在運作時能夠在正確的位置顯示該元件，此外我們還必須在 java 檔案上進行元件與程式的連結，使程式在運作時能夠觸發該元件而產生反應。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 1-3：一般程式的開發流程應用於多平台導引精靈程式開發。. 綜合以上分析，我們發現在 Android 平台進行多個導引精靈軟體開發時，其過程充滿重複性和元件使用上的複雜性。而 OMG【21】推展的 MDA【19】框架具有能夠重複. 3.

(24) 使用軟體分析與設計的特性，因此本研究嘗試應用 MDA 的概念進行導引精靈程式的開發，希望可以有效降低導引精靈應用程式在分析與設計上的重複性，進而降低開發 Android 精靈程式的複雜度。我們希望透過自訂的精靈領域專屬語言(DSL)，讓使用者用以提供簡單高階的抽象標的精靈描述，再經由伴隨轉換工具即可產生在 Android 執行環境的精靈程式實作。因為導引精靈程式不論在安裝軟體或是軟體教學都很常被使用到，我們希望延續以往在 PC 上導引精靈的自動產生經驗，將之擴充到 Android 平台上使得精靈程式開發變得簡單。. 1.2 研究目的. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 1-4：MDA 於多平台導引精靈程式開發系統的架構。. 4.

(25) 模型驅動架構(Model-Driven Architecture, MDA)主要的概念是以模型而非程式作為系統開發的核心。為了解決開發程式時的冗贅過程，我們提出運用 MDA 的概念進行導引精靈的開發。MDA 的系統開發流程，必須先從使用者的角度對應用領域進行分析，然後利用 MOF 或 Ecore 等模型語言建立應用領域的「平台無關超模型」(Platform Independent Metamodel, PIMM)做為使用者進行系統模型(PIM)開發的標準。接著對相關的執行平台進行分析與定義建立「平台專屬超模型」(Platform Specific Metamodel, PSMM) 作為特定平台系統模型(PSM)描述的標準。這樣的系統開發方式減少了系統與實作平台之間的相依性。最後再利用模型轉換工具建立 PIMM 與 PSMM 之間對應關係的轉換規. 政治大成系統的設計。最後對 PSMM 設計專屬的程式碼產生器，即可將 PSM 自動轉換成特定立. 則，將使用者設計好的 PIM 轉換成符合某個特定執行平台的 PSM，這樣就可以自動完. 平台的系統實作。透過這樣方式進行系統開發，使用者只需要專注在系統的需求上進行. ‧ 國. 學. 系統分析即可，減少了系統設計與程式碼撰寫的負擔。圖 1-3 與圖 1-4 是傳統系統開發方式與利用 MDA 進行系統開發的對照，由兩圖比較之中，可以看出在多平台或多系統. ‧. 的開發時，利用 MDA 可以降低許多不必要的重複系統分析與設計。. sit. y. Nat. er. io. 1.3 論文貢獻與特色. al. n. v i n Ch 本論文研究計畫在原有 MDA 模型驅動架構之下，再額外新增 Android 平台的 PSM 定 engchi U. 義。期盼原本複雜的 Android 精靈程式開發得以改為僅需提供簡單的高階精靈描述，再經由輔助工具轉換取得，如此將能快速產生 Android 上的導引精靈。我們將此系統命名為 MoDWiz3，它主要是延伸自本研究室既有系統 MoDWizII【13】。MoDWizII 在 Eclipse 平台上建立多平台導引精靈程式開發系統，透過模型驅動架構(Model-Driven Architecture, MDA)作為系統的核心理論，簡化在 Java 及 Eclipse 平台上開發導引精靈程式的過程。而 MoDWiz3 更加強了 MoDWizII 系統，使原本只支援三個平台的導引精靈，擴建成支援第四個 Android 平台導引精靈，並且能使產生的程式碼同時在 Android 平台的手機和 5.

(26) 平板電腦使用。以下是本系統的貢獻與特色：  新增 MoDWizII 中「平台無關」與「平台專屬」導引精靈超模型，擴充以支援 Android 平台導引精靈以及對 Android 導引精靈程式進行實作，建立一套 Android M2M 轉換標準，以及 Android M2T 的轉換標準。  由於 Android 平台沒有像 Java 或 Eclipse 一樣有專屬的 Wizard 相關框架與 GUI 元件，因此，必須自己定義與實做 Android 上的 Wizard 相關框架。例如我們把精靈畫面分成三個區域，從上而下分別為：資訊區、內容區、按鈕區，仿照 Java 和 Eclipse 上專屬 Wizard 框架的格式。. 政治大域專屬語言(DSL)的階段較為繁複，可是一旦領域專屬的超模型以及相關轉換工具建立.  以此架構開發出來的 Andorid 導引精靈程式雖然在建立精靈領域超模型以及對應領. 即可迅速完成該精靈程式的系統規格定義。. 學. ‧ 國. 立完成，個別精靈程式開發只需利用超模型或對應 DSL 提供的基本精靈程式建構，.  有了系統的規格定義之後再利用後續模型轉換工具即能產生包括 Android 等各平台. ‧. 高階語言精靈的實作。我們由表 1-1 可看出以 MDA 開發程式能大幅降低系統設計的. er. io. sit. y. Nat. 次數。. 表 1-1：一般程式開發流程與 MDA 開發比較。. al. MDA. 系統分析次數. M次. M次. 系統設計次數. M*N 次. N次. 加入新系統(M+1)時系統設計次數. N次. 0次. 加入新平台(N+1)時系統設計次數. M次. 1次. n. iv n 一般開發流程 U. Ch. M 個系統開發於 N 個平台上時. engchi. 6.

(27) 相關研究. 此章節主要介紹本實驗室於本研究使用到的相關理論與技術。本研究以 MDA 做為多平台導引精靈程式開發的核心理論，並利用 Eclipse【6】做為系統開發的主要平台，開發. 政治大首先會介紹 Android 平台的特性(包括 Android 組件、Android 佈局、EMF 與 Xtext，還立. Android 快速導引精靈程式，最後產生與 Android 平台相關的 Android 導引精靈，所以. 有模型轉換的相關工具介紹 Xtend)。. ‧ 國. 學 ‧. 2.1 Android 平台介紹. y. Nat. sit. Android 的歷史最早於 2003 年被創立，2005 年被 Google 收購開發了三年時間，並於. er. io. 2008 年發表第一款以 Android 為核心的手機。為了加速 Android 平台軟體的開發，Google. al. v i n C h 平台之前，必須了解釋出新版本的 SDK。在認識 Android e n g c h i U Android 的系統架構。 n. 於 2008 年九月首先釋出第一版的 SDK 1.0 Release 1 供開發人員使用，之後，則規律的. 圖 2-1 是 Android SDK 平台的階層元件圖，由上而下可分化為，應用程式層、應用層框. 架、函式庫層、Android 執行(Runtime) 層和核心層【37】：  下層的作業系統源自於Linux的核心，是個支援許多處理器與周邊裝置的開放原始碼作業系統，其中包含驅動程式、電源管理等。  中層的函式庫與執行層，提供Java無法處理的CPU運算部分，由於此層的函式庫皆由 C/ C++/ ASM 寫成，並支援硬體編解碼器(Codec)，在效率方面不會輸給其他平台的多媒體框架，具有高效率的特點。舉凡編碼、解碼、解析檔案格式等對中央處理器(CPU) 7.

(28) 造成吃重負擔的作業都在此層處理。另外，由於應用層的Java無法直接和硬體溝通以及Android Runtime層沒有處理到的硬體介面也可交由函式庫層來實作。此階層分為兩個部分： • 函式庫層：包含C/C++所實作基本的系統(libc)、加解密運算(SSL)、向量圖引擎 (SGL)、3D引擎(OpenGL)、字型函式庫(FreeType)、瀏覽器核心(WebKit)、 2D/3D顯示渲染引擎(Surface Manager)、多媒體框架(Media Framework)和嵌入式資料庫(SQLite)等函式庫。 • Android Runtime層：為由Dalvik VM (DVM) 所建構的Android應用程式執行的環. 政治大  上層的應用框架層：實作JNI(Java Native Interface)【36】技術，把易於軟體開發商開立境，使上層的應用程式可以跨平台的執行。. 發的最上層Java應用程式及函式庫和便於進行繁重運算的下層原生C/C++函式庫. ‧ 國. 學. (Native C/C++ Libraries)分開，讓不同領域的開發者可以在自己擅長的領域進行開發，而不用擔心被干擾。雖然開發者也可以修改或擴充本層，但由於這會破壞Android分. ‧. 兩層的原則及降低可攜，通常不建議應用程式開發者修改此層。這一層提供Java API. Nat. sit. y. 框架，開發人員可以使用這樣的框架來開發自己的應用程式，這樣便簡化了程序開發. er. io. 的架構設計，但是必須遵守其框架的開發原則，此層也提供了重複使用機制能使用戶. al. 更方便的替換程序組件。. n. v i n Ch  最上層的應用程式層：應用程式以Java語言編寫，透過第二層的應用層框架往下溝通。 engchi U 主要為Android系統中的核心應用，比如Email客戶端，SMS短消息程序，日曆，地圖，瀏覽器，聯繫人管理和播放程式(Player)或錄影/錄音機(Recorder)等就是指位在此層的應用程式(App)。支援手機應用所需的各類使用者直接相關的元件，可執行Google 和開發者所提供的應用程式，或者是使用者購買與下載取得的軟體。. 8.

(29) 立. 政治大. ‧. ‧ 國. 學圖 2-1：Android 系統架構階層圖。. y. Nat. io. sit. 今日的手機已經被視為是一個豐富的操作平台，除了基本的通訊功能，還逐漸被賦. n. al. er. 予更多元的應用，如播放多媒體需求、全球定位系統(GPS)的使用和傳統網頁的瀏覽等。. i n U. v. 因此，為了平衡多元化操作造成系統的複雜性、應用程式開發的便利性、以及執行效能. Ch. engchi. 與耗電等問題，Google 除了提供前述系統架構階層之外，還將整個 Android 架構也做了許多的細部重整。其中最著名的例子就是一套名為 Bionic 的 C 函式庫【38】。Google 忽略部分標準 C 函式庫中不常用的功能，例如地區化(locales)和寬字元(wide char)的支援，不予以實作。在 Android 框架下，這些被忽略的部分，都可以被 DVM 所隱藏不致於產生問題。而藉由精簡而有效率的底層系統，更可降低 Android 系統執行時對記憶體和處理器計算資源的消耗，以實現嵌入式系統輕量、快速的需求。配合分層的概念，開發人員可以輕鬆的利用 Java 的知識，開發跨平台的應用程式，不必理會系統底層的差異性。. 9.

(30) 2.2 Android 組件介紹. 本節將介紹 Android 應用程式設計中，最常被使用的主要五大組件分別為 Activity、 Service、Content Provider、Broadcasr Receiver 與 Intent。以下介紹常用組件：.  活動(Activiy) Activity【34】是應用裡面最基本的模組，每一個 Activity 代表著一個螢幕，每一個螢幕所負責的就是處理應用程式所需的工作或是跳轉至其他 Activity 等功能，例如我們需要. 政治大第二個 Activity 顯示資訊系所所有課程列表，第三個 Activity 顯示計算機概論課程資訊，立. 一個應用為取得課程資訊，這時可以設計成，第一個 Activity 顯示著所有學院的列表頁，. 也因為如此的設計讓應用的功能上可以容易的轉換。一個應用程式通常會有好幾個. ‧ 國. 學. Activity，每個 Activity 代表一個 UI 畫面組合，Activity 運作時可能會佔用整個螢幕。作. ‧. 業系統利用堆疊(Stack)的資料結構來管理不同的 Activity，最晚觸發的 Activity 會在堆疊的頂端，而較早觸發的 Activity 則會位在 Stack 的底部。系統根據 Stack 的結構而執行. Nat. sit. y. 對應的 Activity。在大多數情況下，應用程式均以一新 Activity 來顯示一個可能會佔據整. er. io. 個螢幕。某些情況，一個應用程式可以只顯示視圖(View)，而不需要將 View 放在一個. al. v i n Ch 所有的 Activity 都繼承於 android.app.Activity onCreate()函式，不 e n g c 類別，並且會馬上呼叫 hi U n. Activity 內，這些例外主要是對話框視圖(Dialog View)和通知訊息彈出視圖(Toast View)。. 過並不是呼叫 onCreate()之後 Activity 就能馬上運行，實際上 Activity 要能開始運行需要經過三個過程為"建立、開始和重繪"，對應的函式開始時的執行順序為 onCreate()、 onStart()、onResume()最後是 Activity 執行。. 10.

(31)  服務(Service) 負責資料處理的工作，後台處理。Service 永遠在背景提供著服務，不像 Activity 有著介面可以讓使用者操作。通常 Service 的生命周期都是比較長，能夠長時間的運行於作業系統的背景中或完成遠端的程序。例如，當我們開啟一個撥放歌曲的應用程式聽著歌，接著想要上網找尋資料，勢必會遇到一個狀況，必須跳離播歌的程式才能上網，當我們希望跳離開播歌程式後歌曲繼續執行，那這個部份就必須透過 Service 提供。.  內容提供器(Content Provider). 政治大不過當我們使用 Android 設備時卻可以儲存通訊人連絡電話，不同的應用程式開啟都可立以共同的存取這些通訊錄的資料，而這些資料共有的功能就是由 Content Provider 所提負責提供資料內容。一般來說，在 Android 應用程式裡是無法取得不同應用程式的資料，. ‧ 國. 學. 供。Content Provider 是一個特殊的資料儲存類型，並且提供了一些標準的介面方便資料的存取，像是 query()、insert()或是 update() 等，當我們在應用程式中有需要使用到 Content. ‧. Provider 時，則必須在 AndroidManifest.xml 檔案中宣告。Content Provider 能夠分享應用. sit. y. Nat. 程式中的資料。並將資料儲存於 Android 內建的 SQLite 資料庫中或網路資料庫，以便其. io. er. 他的裝置應用存取。經由 Content Provider，其他的應用程式可以查詢甚至是修改資料(如果該 Content Provider 允許的話)。例如，Android 系統提供一個 Content Provider 管理使. al. n. v i n 用者的聯絡人資訊，同樣地，其他的應用程式在允許的權限下能夠查詢一部分該 Content Ch engchi U Provider 提供的聯絡人資訊，並且去讀取和覆寫特定聯絡人的資訊。  廣播接收器(Broadcast Receivers). 負責接收資料。Broadcast Receiver 是一種能回應系統公告的元件。許多廣播源自於系統，舉例來說，一個廣播通知螢幕已被關閉、電力不足或者已擷取到圖片。應用程式也能夠發佈廣播，例如，讓其他的應用程式知道部分資料已經被下載至裝置中，並且能夠被使用。一般來說，Broadcast Receiver 只是一個其他元件的橋樑，在整個工作中做極微量的. 11.

(32) 事情。應用程式並不會因為 Broadcast Receivers 被呼叫而被它執行起來，而是當 Broadcast Receiver 因接收信息而觸發時系統會依宣告的規畫執行相對應的應用程式，應用程式也可以利用 Context.sendBroadcast()方法來發出自己的 intent broadcast 給其他的應程式。.  意圖(Intent) 這個功能常用於切換頁面 Activity 時使用，但除了切換頁面外，Intent 也會依照所提供的內容不同，自動開啟對應的程式來檢視內容(例如開啟網頁和開啟地圖等)。當創建了許多 Activities 之後，該如何讓這些 Activities 切換，我們可以利用 Intent 這個類別。Intent. 政治大式中有需要使用到 Intent 時，則必須在 AndroidManifest.xml 檔案裡的 IntentFilter 中描立述，利用 IntentFilter 裡的描述可以透過比對找到應用程式需要呼叫的 Activity 是哪一個，. 類別主要是描述應用的功能，描述的結構為動作和動作相對應的資料，當我們在應用程. ‧ 國. 學. 藉由 android.intent.category.LAUNCHER 來觸發。Activity 的切換會經過以下幾個步驟：首先當系統中正在執行的 Activity(在此稱 Activity_01)切換至另一個 Activity(在此稱. ‧. Activity_02)時，系統會先暫停 Activity_01，然後建立 Activity_02 並執行其生命週期。當. sit. y. Nat. 被切換的 Activity_01 過了一段時間仍未執行時，系統會先停止 Activity_01 的狀態並回. io. n. al. er. 收 Activity_01 所佔據的資源，上述對應的 Activity 狀態流程為圖 5-4。. 2.3 Android 佈局介紹. Ch. engchi. i n U. v. 本節將針對 Android 程式中常用的五大佈局介紹。圖 2-2 為佈局(Layout)的繼承關係圖，深色區塊為 Android 五大佈局，分別為線性佈局、表格佈局、相對佈局、框架佈局和絕對佈局。以下各小節分別介紹各個佈局，說明其常用屬性、並列出對應的 XML 程式範例以及範例圖片。一旦開發人員了解 Android 在 XML 上對佈局的描述之後，在布局底下的元件就會依據所選用的佈局而有相對應的顯示。. 12.

(33) View. ViewGroup. LinearLayout. RelativeLayout. AbsoluteLayout. 政治大立圖 2-2：Layout 的繼承關係圖。. 學. ‧ 國. TableLayout. 2.3.1. FrameLayout. 線性佈局(LinearLayout). ‧. Android 的元件佈局是以 Layout 作為包覆的容器，並可在容器中進行元件的排版。元件佈局中最常用 LinearLayout 做為應用程式的排版樣式。表 2-1 提供了 LinearLayout 常用. y. Nat. sit. 的屬性，並以 XML 來實作對應屬性的程式碼(如表 2-2 所示)，可藉由 XML 程式定義. n. al. er. io. 元件的位置、大小、顏色與排版等，最後完成使用者介面(如圖 2-3 所示)，使用水平. v. (Horizontal)屬性後，各元件排列的方式為從左至右；使用垂直(Vertical)屬性後，各元件排列的方式則為從上至下。. Ch. engchi. i n U. 表 2-1： LinearLayou 的屬性和說明。屬性 android:id android:layout_width android:layout_height. 說明該屬性指定一個辨識符號給元件，並自動在 R.java 中建立索引，透過此 id 可用來調用元件。該屬性定義元件的寬度和高度，可使用的屬性值有”fill_parent”(填滿容器空間)、”wrap_content”(根據內部內容延展至適當大小)、”match_parent”(大致上功能與”fill_parent”相同，2.2 版本才可使用)。 13.

(34) 表 2-2：Android 上實作 LinearLayout 元件佈局。 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_weight="fill_parent" android:layout_height="fill_parent" > <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn1" android:text="Button1" /> <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn2" android:text="Button2" /> <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn3" android:text="Button3" /> <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn4" android:text="Button4" /></LinearLayout>. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-3：LinearLayout。. 2.3.2. 表格佈局(TableLayout). 它可以把畫面切割為表格，使用者可以依照設計需求，把畫面切割為像是 2X4 的區塊。每一個區塊都可以放一個 GUI 元件，如果需要的畫面不是一個固定的表格，也可以調整它們的區塊。這樣的畫面配置需使用「TableLayout」標籤，搭配「TableRow」標籤建立所需的表格。TableLayout 會控制畫面元件的寬與高，所以在這個標籤中的畫面元件都不 14.

(35) 需要設定寬與高，就算加入設定也不會有效果。表 2-3 提供了 TableLayout 與 TableRow 常用的屬性，並以 XML 來實作對應屬性的程式碼(如表 2-4 所示)，最後完成使用者介面(如圖 2-4 所示)。. 表 2-3：Tablelayout 與 TableRow 的屬性和說明。 Tablelayout 的屬性 android:stretchColumns android:shrinkColumns android:collapseColumns TableRow 的屬性 android:layout_span android:layout_column. 立. 說明指定欄位填滿剩餘的空間，欄位索引從 0 開始縮小指定欄位的空間，欄位索引從 0 開始刪除指定欄位，欄位索引從 0 開始說明擴展該攔位的格數，包括本身欄位用來標註該攔的索引. 政治大. ‧ 國. 學. 表 2-4：Android 上實作 TableLayout 元件佈局. ‧. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_weight="fill_parent" android:layout_height="fill_parent" android:stretchColumns="0,1,2" > <TableRow> <Button android:text="Button1" /> <Button android:text="Button2" android:layout_span="2" /> </TableRow> </TableLayout>. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-4：TableLayout。. 2.3.3. 相對佈局(RelativeLayout). 由於應用程式需要的畫面可能不會都是很規則的排列，如果畫面元件的位置與排列比較複雜與不規則的時候，就比較適合使用 RelativeLayout 這種排列方式。它可以讓使用者決定元件在畫面上位置，以及設定元件與元件之間的相關位置與對齊方式。這種比較靈 15.

(36) 活的配置方式使用「RelativeLayout」標籤當各個元件的位置有對應關係時最常用的排版方式。表 2-5 提供了 RelativeLayout 常用的屬性，並以 XML 來實作對應屬性的程式碼 (如表 2-6 所示)，最後完成使用者介面(如圖 2-5 所示)。. 表 2-5：RelativeLayout 中的屬性和說明。屬性 android:layout_above android:layout_below android:layout_toLeftOf android:layout_toRightOf android:layout_alignParentTop android:layout_alignParentRight android:layout_alignParentLeft android:layout_alignParentBottom. 政治大. 學. ‧ 國. 立. 說明將此元件置於"指定元件"上方. 將此元件置於"指定元件"下方. 將此元件置於"指定元件"左方. 將此元件置於"指定元件"右方. 將此元件對齊於佈局畫面上邊線將此元件對齊於佈局畫面右邊線將此元件對齊於佈局畫面左邊線將此元件對齊於佈局畫面底線. 表 2-6：Android 上實作 RelativeLayout 元件佈局。. ‧. n. al. er. io. sit. y. Nat. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_weight="fill_parent" android:layout_height="fill_parent" > <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:id="@+id/Button1" android:text="Button1" /> <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:id="@+id/Button2" android:text="Button2" android:layout_below="@+id/Button1" android:layout_toRightOf="@+id/Button1" /> <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:id="@+id/Button3" android:text="Button3" android:layout_above="@+id/Button2" android:layout_toRightOf="@+id/Button2" /> </RelativeLayout>. Ch. engchi. 16. i n U. v.

(37) 圖 2-5：RelativeLayout。. 2.3.4. 框架佈局(FrameLayout). 為螢幕上的一個空白備用區域，該佈局可用在特定區塊中顯示單一元件項目，當該佈局. 政治大. 有多個元件需呈現時，會以堆疊方式進行呈現。因此元件呈現的順序會以堆疊最上層的. 立. 元件為主。如表 2-8 的範例，當兩個元件大小相同或上層元件大於下層元件時，下層的. ‧ 國. 學. 元件就會被上層元件覆蓋，因此本範例中的下層元件被中層元件給覆蓋了，而中層元件一部分被上層元件覆蓋，所以使用此佈局方式要注意覆蓋的問題。. ‧. 表 2-7 提供了 FrameLayout 常用的屬性，並以 XML 來實作對應屬性的程式碼(如表 2-8. sit. y. Nat. 所示)，最後完成使用者介面(如圖 2-6 所示)。. al. n. 屬性. android:layout_width android:layout_height. er. io. 表 2-7：FrameLayout 中的屬性和說明。. i n U. v. 說明該屬性定義元件的寬度和高度，可使用的屬性值有"fill_parent"(填滿容器空間)、"wrap_content"(根據內部內容延展至適當大小)、"match_parent"(大致上功能與"fill_parent"相同，2.2 版本才可使用).. Ch. engchi. 表 2-8：Android 上實作 FrameLayout 元件佈局。 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation=" vertical" android:layout_weight="fill_parent" android:layout_height="fill_parent" > <Button android:layout_weight="wrap_content" 17.

(38) android:layout_height="wrap_content" android:text="下層元件" /> <Button android:layout_weight=" fill_parent " android:layout_height="wrap_content" android:text="中層元件" /> <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:text="上層元件" /> </FrameLayout>. 圖 2-6：FrameLayout。. 學 ‧. 2.3.5. ‧ 國. 立. 政治大. 絕對佈局(Absolutelayout). sit. y. Nat. 可以讓元件根據指定的 X 和 Y 座標值顯示於螢幕上，起始左上角為(X,Y)座標為(0,0)，. io. er. 向右或向下移動時數值增加，由於 AbsoluteLayout 是以沒有外框的概念設計，因此元件有可能超出螢幕或是互相重疊，不易在不同螢幕尺寸的環境下使用。表 2-9 提供了. n. al. Ch. i n U. v. FrameLayout 常用的屬性，並以 XML 來實作對應屬性的程式碼(如表 2-10 所示)，最後完成使用者介面(如圖 2-7 所示)。. engchi. 表 2-9：AbsoluteLayout 中元件的屬性和說明。屬性 android:layout_x android:layout_y android:layout_width android:layout_height. 說明設置元件的 X 座標設置元件的 Y 座標設置元件寬度設置元件高度. 18.

(39) 表 2-10：Android 上實作 AbsoluteLayout 元件佈局。 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation=" vertical" android:layout_weight="fill_parent" android:layout_height="fill_parent" > <EditText android:layout_weight="fill_paren" android:layout_height="wrap_content" /> <Button android:layout_x ="250px" android:layout_y ="40px" android:layout_weight="70px" android:layout_height="wrap_content" android:text="Button" /> </ AbsoluteLayout >. 立. 政治大. ‧. ‧ 國. 學 y. sit. io. n. er. Nat 2.4 Android 元件介紹 a. 圖 2-7：AbsoluteLayout。. iv l C n hengchi U. 一個活動(Activity)上會所有的按鈕(Button)、文字(Text)、勾選框(CheckBox)等元件稱為視圖(View)，View 之上其實會有一個佈局(Layout)去控制所有 View 的位置及其他特性，一個簡單應用程式(Android Application)組件包含關係是 Application > Activity > Layout > View。Android 可以由 Java 程式碼控制 Button 與 Text 等在 Activity 上的顯示和效果，也可以透過編寫 XML 檔的方式實現，Eclipse 在編輯時提供一個圖形化介面(Graphical Interface)方便用戶設計所有元件的位置，同一時間 Eclipse 會產生對應的 XML 文件。圖 2-8 為 Android 元件的繼承關係圖，以下會介紹深色區塊的元件的功能與實作的效果。 19.

(40) View. TextView. ImageView. ViewGroup. Button. ImageButton. AdapterView. EditText. CompoundButton. 立. CheckButton. RadioButton. GridView. ListView. Spinner. ‧ 國. 學. 圖 2-8：Android 元件的繼承關係圖。. ‧. 2.4.1. AbsSpinner 政治大. 按鈕(Button). y. Nat. sit. Button 元件介面定義是透過 XML 所宣告並設定相關屬性而呈現，在處理 Button 的事件. n. al. er. io. 上是由 Java 程式碼所控制，其中觸發事件是透過 Button.ClickListener 控制。表 2-11 為. i n U. v. Button 在 XML 中的宣告方式，圖 2-9 為螢幕上顯示的效果。. Ch. engchi. 表 2-11：Android 上實作 Button 元件。 <Button android:layout_weight="wrap_content" android:layout_height="wrap_content" android:text="Click me!" />. 圖 2-9：Button 元件。 20.

(41) 2.4.2. 單選對話框(RadioButton). RadioButton 繼承了 Button 按鈕，因此它們都可以直接使用 Button 支持的各種屬性和方法。但與普通按鈕不同的是它們多了一個可選中的功能。RadioButton 和 CheckBox 都可額外指定一個 android:checked 屬性，該屬性用於指定 RadioButton 和 CheckBox 初始時是否被選中。RadioButton 的特點在於，能選擇選項中的其中一個。因此 RadioButton 通常要與 RadioGroup 一起使用，用於定義一組單選按鈕。RadioButton 元件介面定義是透過 XML 所宣告並設定相關屬性而呈現，在處理 RadioButton 的事件上是由 Java 程式碼所控制，其中觸發事件是透過 RadioGroup.OnCheckedChangeListener 控制。表 2-12 為. 政治大. RadioButton 在 XML 中的宣告方式，圖 2-10 為螢幕上顯示的效果。. 立. 表 2-12：Android 上實作 RadioButton 元件。. ‧ 國. 學. ‧. <RadioGroup android:orientation="horizontal" android:layout_gravity ="center_horizontal" android:id="@id/radioGroup"/> <RadioButton android:layout_weight="wrap_content" android:layout_height="wrap_content" android:text="Man"/> <RadioButton android:layout_weight="wrap_content" android:layout_height="wrap_content" android:text="Woman"/> </ RadioGroup>. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-10：RadioButton 元件。. 2.4.3. 多選對話框(CheckBox). CheckBox 同 RadioButton 都繼承了 Button 按鈕，因此可直接使用 Button 支持的各種屬性和方法。CheckBox 可額外指定一個 android:checked 屬性，該屬性用於指定 CheckBox 初始時是否被選中。CheckBox 的特點在於，能選擇多個項目；與 RadioButton 的不同之 21.

(42) 處在於，只能選擇其中一個。CheckBox 元件介面定義是透過 XML 所宣告並設定相關屬性而呈現，在處理 CheckBox 的事件上是由 Java 程式碼所控制，其中觸發事件是透過 CompoundButton.OnCheckedChangeListener 控制。表 2-13 為 CheckBox 在 XML 中的宣告方式，圖 2-11 為螢幕上顯示的效果。. 表 2-13：Android 上實作 CheckBox 元件。 <CheckBox android:layout_weight="wrap_content" android:layout_height="wrap_content" android:text="Man"/> <CheckBox android:layout_weight="wrap_content" android:layout_height="wrap_content" android:text="Woman"/>. 政治大. 立. ‧ 國. 學 ‧. 表單顯示(ListView). sit. y. Nat. 2.4.4. 圖 2-11：CheckBox 元件。. io. er. ListView 可以顯示多筆資料項目讓使用者瀏覽、選擇與執行後續的操作。ListView 的使用需要搭配調配器(Adapter)，而 Adapter 的用途是用於連接資料和 ListView。它除了會. n. al. Ch. i n U. v. 用在 ListView 中，另外也會用在下拉式選單(Spinner)的元件中。在處理 ListView 的事件. engchi. 上是由 Java 程式碼所控制，其中觸發事件是透過 AdapterView.OnItemClickListener()控制。表 2-14 為 ListView 在 XML 中的宣告方式，圖 2-12 為螢幕上顯示的效果。. 表 2-14：Android 上實作 ListView 元件。 <ListView android:layout_weight="fill_parent" android:layout_height="fill_parent" android:id="@+id/listView" android:text="@string/……" />. 22.

(43) 圖 2-12：ListView 元件。. 2.4.5. 文字顯示(TextView). TextView 是一個主要用於處理文字的 View。表 2-15 為 ListView 在 XML 中的宣告方式，圖 2-12 為螢幕上顯示的效果。. 政治大表立 2-15：Android 上實作 TextView 元件。 ‧. ‧ 國. 學. <TextView android:layout_weight="wrap_content" android:layout_height="wrap_content" android:text="@string/……" />. y. er. io. sit. Nat. 圖 2-13：TextView 元件。. 文字對話框(EditText) a. n. iv l C n EditText 繼承了 TextView 以及它所有的功能，是一個主要用於處理輸入資料的部分。 hengchi U 2.4.6. 表 2-16 為 ListView 在 XML 中的宣告方式，圖 2-14 為螢幕上顯示的效果。. 表 2-16：Android 上實作 TextView 元件。 <EditText android:layout_weight="wrap_content" android:layout_height="wrap_content" />. 圖 2-14：EditText 元件。 23.

(44) 2.4.7. 下拉式選單(Spinner). Spinner 是 ViewGroup 的間接子類別，因此在資料的使用上需要透過調配器(Adapter)進行封裝才能使用。Spinner 具有一些選中選項的觸發事件，由於本身並沒有定義這些事件，均繼承自間接父類別 AdapterView。常用的事件有： • AdapterView.OnItemCLickListener(列表項目被點擊時觸發)， • AdapterView.OnItemLongClickListener(列表項目被長按時觸發)， • AdapterView.OnItemSelectedListener(列表項目被選擇時觸發)。由於處理 Spinner 元件的過程較繁雜，因此 Android 官方有提供一套基本的 ArrayAdapter. 政治大表 2-17 為 Spinner 在 XML 中的宣告方式，圖 2-15 為螢幕上顯示的效果。立. 以及 android.R.layout.simple_spinner_item，方便使用者採用預設的樣式實作。. ‧ 國. 學. 表 2-17：Android 上實作 Spinner。. n. al. er. io. sit. y. ‧. Nat. <Spinner android:layout_weight="fill_parent" android:layout_height="wrap_content" android:id="@+id/……" android:text="@string/……"/>. Ch. engchi. i n U. v. 圖 2-15：Spinner 元件。. 2.4.8. 圖像視圖(ImageView). ImageView 圖像視圖，直接繼承自 View 類，它的主要功能是用於顯示圖片。實際上它不僅僅可以用來顯示圖片，任何 Drawable【32】的對象都可以使用 ImageView 來顯示，例如：利用 ImageView 顯示動畫。 ImageView 可以適用於任何佈局中，並且 Android 為 24.

(45) 其提供了縮放和著色的一些操作。ImageView 提供圖像的顯示的 View(視景)，使開發人員能夠在螢幕上提供圖像的顯示，在應用上常用來取得手機內的圖片資料並顯示在螢幕上。表 2-18 為 ImageView 在 XML 中的宣告方式，圖 2-16 為螢幕上顯示的效果。. 表 2-18：Android 上實作 ImageView。 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_weight="fill_parent" android:layout_weight="fill_parent"> <Button android:id="@+id/button1" android:layout_weight="fill_parent" android:layout_weight="wrap_content"/> <ImageView android:id="@+id/image1" android:layout_weight="fill_parent" android:layout_weight="wrap_content"/> </LinearLayout>. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. v i n Ch 圖 2-16：ImageView 元件。 engchi U. 2.5 Model-Driven Architecture, MDA 現今的軟體開發大多是以程式碼為中心，亦即所有的系統分析與系統設計的結果最後均是以程式碼方式保存與呈現。由於程式碼的分離程度不足，無法區分何者屬於平台無關的部分，以及何者為與平台相關的程式碼，因此重複使用性低。為了解決此問題，OMG 組織提出了 MDA 架構希望能改善此問題。從程式語言的抽象化程度來看，早期低階的 25.

(46) 組合語言(assembly language)是透過「組譯器」(assembler)將程式碼轉換成硬體可以執行的機器碼。而高階的程式語言(例如 C/C++, Java)則是透過「編譯器」(compiler)將程式碼轉換成組合代碼(assembly code)，再透過組譯器的支援轉換成機器碼。到近期的 MDA 架構，主要是利用建立模型的方式進行系統的分析與設計，然後透過「模型編譯器」(model compiler)將模型轉換成一般的高階語言程式碼，再透過編譯器的支援得到可執行的機器碼，所以 MDA 架構將系統開發的中心由高階語言的程式往上提升至更抽象化的模型層次。再從可重複使用性來看，早期的組合語言以巨集(macro)的方式來達到重複使用的效果，而在高階語言裡則以函數(function)的方式來進行，直到物件導向程式設計(Object-. 政治大從巨集到類別的使用其主要的目標都是往如何提高模組化、抽象化的設計理念去發展，立. Oriented Programming)的出現，才以類別(class)的資料結構來達到程式碼的重複使用性。. 藉此來降低程式碼之間的相依性並且提高互通性，所以 MDA 使用模型的方式來提高程. ‧ 國. 學. 式的抽象化層次與重複使用性，希望能讓程式開發者能更專注在使用者的需求上進行程式的設計與開發，降低直接進行程式碼撰寫的負擔。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 2-17：MDA 概念圖。. 26. v.

(47) MDA 的主要概念是以模型作為系統開發的核心，如圖 2-17 所示，在進行系統分析時利用一個通用的模型標準描述語言，如 UML【23】、MOF【9】或 Ecore【10】等模型語言，來進行整個系統的描述與設計，接著再利用相關的模型工具，將模型自動轉換成符合各個平台特性的程式碼，如 Java、Eclipse、Android 等。我們希望能夠透過 MDA 的系統開發的流程，將它應用在導引精靈領域裡，提供一個快速且有效率的方式產生各種相關的導引精靈程式，讓就算是不懂 Android 語言的程式開發者，也能寫出 Android 的導引精靈程式。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. al. n. v i n CMOF 圖 2-18：以為基礎的四層 MDA 架構圖。 U hen i h gc MDA 的基礎架構，如圖 2-18 所示，主要是由一個超模型架構(Meta-Modeling Architecture)與幾個 OMG 制定的相關模型標準所組成，超模型架構主要是以抽象化的程度來做區分的標準，分為四層越上層表示抽象化的程度越高，從最上層開始分別是 M3 層(meta-metamodel)、M2 層(metamodel)、M1 層(model)與最下層的 M0 層(instance)，相關的模型標準包含 UML(Unified Modeling Language) 、 MOF(Meta-Object Facility) 與 XMI(XML Metadata Interchange)【24】。 27.

(48) M3 層主要是定義整個超模型架構的標準，也就是所謂的 Metametamodel。所有的 Metamodel(超模型)都必須符合自訂規範。為此 OMG 提出了 MOF(Meta-Object Facility) 來做為 Metamodel 的標準。MOF 本身具有自我描述的能力，可以定義自己與所有的超模型，但除了 MOF 之外，EMF(Eclipse Modeling Framework)【4】裡的 Ecore 模型也是常被用來定義超模型。M2 層 Model，指的是所有使用 MOF 定義的 Metamodel，主要是用來規定模型的種類、屬性、格式與關聯性，並且限制模型的描述範圍。其中最常被使用的 Metamodel 就是 UML，是由 OMG 所提出的圖形化模型語言，由於 UML 是一種開放式的圖型語言，並且在對大範圍且複雜的系統進行模型化已有不錯的效果，因此漸漸. 政治大將欲開發的程式以 Model 的方式加以描述。M0 層 Model 包含的則是 M1 層 Model 的實立的成為被大家公認的一種標準。M1 層 Model，指的是利用在 M2 層定義出來的 model，. 例(instances)。如果以一般程式語言來對應的話，Metamodel 就是程式語言(如 C/C++、. ‧ 國. 學. Java)，而 Model 則是程式語言設計出來的類別(class)或程式，至於 M0 物件則是程式執行所產生的實例，至於 Metametamodel 則相似於定義語言的文法描述系統。. ‧. 在整個超模型架構中，對於模型資料的儲存與各層之間訊息的互通，XMI(XML. Nat. sit. y. Metadata Interchange)扮演著一個極重要的角色，當 MDA 的系統開發者將相關的模型設. er. io. 計完成後，必須對相關的模型資料進行儲存。XMI 定義了符合 MOF 規定的相關對應關. al. 係，如圖 2-19 所示，屬於 M2 Layer 的 Metamodel 與 XML Schema 之間的對應關係，以. n. v i n 及屬於 M1 Layer 的 Model 與 C XML h e文件檔案之間的對應關係。透過這樣的關係建立， ngchi U 可以把建立好的模型轉換成 XML 檔，以利於提高儲存與讀取的便利性。. 28.

(49) 圖 2-19：XMI in MDA。. 政治大. MDA 的系統開發流程，必須先從使用者的角度對應用領域進行分析，然後利用 UML、. 立. MOF、或 Ecore 等模型語言建立應用領域的「平台無關超模型」(Platform Independent. ‧ 國. 學. Metamodel, PIMM)做為使用者進行系統模型(PIM)開發的標準。接著對相關的執行平台進行分析與定義建立「平台專屬超模型」(Platform Specific Metamodel, PSMM)作為特定. ‧. 平台系統模型(PSM)描述的標準，每一個 PSMM 都會對應到特定的程式語言或執行平台. y. Nat. (例如 Java、Eclipse、Android 等)，這樣的系統開發方式減少了系統與實作平台之間的相. io. sit. 依性。最後利用模型轉換工具建立 PIMM 與 PSMM 之間對應關係的轉換規則，將使用. n. al. er. 者設計好的 PIM 轉換成符合某個特定執行平台的 PSM，這樣就可以自動完成系統的設. i n U. v. 計。接著對 PSMM 設計專屬的程式碼產生器，即可將 PSM 自動轉換成特定平台的系統. Ch. engchi. 實作。透過這樣方式進行系統開發，使用者只需要專注在系統的需求上進行系統分析即可，減少了系統設計與程式碼撰寫的負擔。. 29.

(50) Eclipse 平台與相關工具. Eclipse 是由 IBM 公司提出的 Java 整合開發環境(Integrated Development Environment, IDE)，其主要目的是取代 IBM 原先的 Java 商業開發工具 VisualAge for Java。Eclipse 是. 政治大過外掛模組使其作為 C++、Python、PHP 等其他語言的開發工具。Eclipse 的本身只是一立著名的跨平台開源整合式開發環境(IDE)。最初主要用來 Java 語言開發，目前亦有人透. 個框架平台，但是眾多外掛模組的支援，使得 Eclipse 擁有較佳的靈活性。許多軟體開. ‧ 國. 學. 發商以 Eclipse 為框架開發自己的 IDE。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3-1：Eclipse 平台架構圖。. 30.

(51) 一般當提到 Eclipse 時，通常指的是 Eclipse 軟體開發工具(Software Development Kit, SDK)主要包含 Java IDE 與其他的相關輔助開發工具，然而 Eclipse SDK 則是由多個 Project 組成，其中包含 Eclipse Platform【2】、JDT(Java Development Tools)與 PDE(Plugin Development Environment)【15】。Eclipse Platform 是建構所有開發環境的基礎，由許多的元件(例如 Workbench、Workspace、Help 和 Debug 等)所組成，其中 Eclipse RCP(Rich Client Platform)則是所有元件中的一個子集合也是 Eclipse 的基礎平台。Eclipse Platform 包含了建構一個 IDE 所需的基礎功能，因此所有的相關工具與應用都必須建構在此之上，所以 JDT 與 PDE 就是建構在此之上的 plug-in。. 政治大念，提供其他 plug-in 程式一個擴充的框架，Eclipse 本身提供了許多的擴充點，讓程式立 Eclipse 平台的成功關鍵在於擁有強大的擴充機制，透過擴充點(extension point)的概. 開發者可以依照自己的需求安裝各種相關的 plug-in，並且將其整合到 Eclipse 平台上，. ‧ 國. 學. 使得所有的程式開發過程都能在 Eclipse 平台上就可以完成，每一個 plug-in 程式也能提供自己的擴充點，以便讓其他的 plug-in 程式也能擴充在此之上。相對的由於 Eclipse 所. ‧. 有的標準、規格和原始碼都是開放的，使得程式開發者也能利用 Eclipse 提供的 PDE 自. Nat. sit. y. 行設計與開發符合自己需求的 plug-in，除了供自己使用外也可以讓其他程式開發者使用。. n. al. er. io. 基於這樣的概念，Eclipse 讓每一個程式開發者都能擁有屬於自己專用的 IDE。. C. 3.1 Eclipse Modeling Framework, h e EMF. ngchi. i n U. v. Eclipse Modeling Framework 是屬於 Eclipse Modeling Projects【5】裡的核心專案，主要目標是以一個結構化的模型來描述相關的工具與應用程式，進一步產生整個程式框架的 Java 程式碼。對於原本就有物件導向建模概念的程式開發者來說，可以不必拋棄原本舊有的模型概念，直接透過 EMF 的使用會讓原本的建立模型方式變得更有效率與正確。一般建模的格式通常是利用如 UML 所定義的圖形化標準模型來建立，對於整個建模的過程，往往需要花費很多的時間在物件導向分析與設計(Object Oriented Analysis and 31.