好久沒有更新了,實在不知道應該寫一些什么內容,因為作為入門系列,實際上應該更多的是操作而不是理論,而在UI5 SDK中的EXPLORER里面有着各種控件的用法,所以在這里也沒有必要再來一遍,還是看官方的用法更地道。
看一下基於最新的庫所推薦的項目結構。
另外,我覺得對於初學者來說是一個非常好的消息,就是UI5版本從1.28更新到1.30以及更高之后,Tutorial系列有了重大更新,之前的Get Started->Tutorials->Application Best Practice現在改為Tutorial->Walkthrough,跟隨着Walkthrough把所有的步驟走完,基本上UI5就算可以入門了,每一個步驟在EXPLORED中可以看到效果,並且可以下載到完整的代碼,所以基於這個原因,我覺得我之前寫的入門系列基本上可以不用再看了,跟着這個Walkthrough走就足夠了。
鏈接貼在這里:https://openui5.hana.ondemand.com/#docs/guide/3da5f4be63264db99f2e5b04c5e853db.html
除了Walkthrough之外,1.30及更高版本的更新還增加了不少其他的改動,這里列舉一下我覺得比較重要的部分,這些內容在做Walkthrough的過程應該也都會感受到。
項目目錄結構
在之前的版本中,官方的最佳實踐或者樣例代碼一般都是把視圖文件和控制器文件放到一個目錄中,顯然,這種組織代碼的方式對於管理稍大型的應用就會顯得比較混亂,但是官方之前對於如何組織代碼並未給出明確的方式,而在1.30版本更新之后,在文檔中專門有一篇來介紹目錄結構。這里我就大致的介紹一下。
三個主要的目錄是root, webapp以及test目錄。
- root 目錄
顧名思義,是整個項目的根目錄,目錄名可以是任意的項目名稱,在這個目錄之下包含的文件應該是你寫的APP的代碼以外的一些輔助文件,比如工程文件或者是一些說明性的文件,如果這些文件比較多,也可以在這之下再創建一個目錄來管理。比如可以把所有的文檔文件都放在doc目錄中等等。 - webapp 目錄
這個目錄包含的是應用的所有代碼文件,比如視圖文件,處理邏輯的js文件,本地化資源文件i18n文件,模型文件(可選),以及測試相關的文件(放到單獨的test目錄中)。 - test 目錄
這個目錄應該用來存放測試相關的文件。
具體細節還是看官方的介紹吧:https://openui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html
應用描述符文件
在1.28及之前,單獨的一個應用可以被包到Component中,可以通過Component的metadata來描述一些應用的信息,比如依賴的庫,資源文件(css、i18n)等等,或者應用公共的一些配置信息,都放到Component.js中。 從1.30開始,UI5引入了應用描述符文件manifest.json,官方是這么說的:
The descriptor for applications, components, and libraries is inspired by the Web Application Manifest concept introduced by the W3C. The descriptor provides a central, machine-readable and easy-to-access location for storing metadata associated with an application, an application component, or a library.
我們可以把應用的一些配置信息都放到這個manifest.json里面,UI5提供了API來檢索相應的配置信息,同時,當我們需要把這個app放到Fiori Launchpad的時候,一些相應的配置信息也會被Fiori Launchpad讀到。
總結
UI5的Developer Guide的可讀性越來越強,所以建議如果想要真正掌握UI5還是要靜下心來花點時間把Guide都過一遍,不過慚愧的是我自己都沒有完完整整的看過,都是碰到哪里不明白了再去查找,好在1.30之后,增加了搜索的功能,可以快速的定位到自己感興趣的部分。
至於這個UI5學習入門系列,就像最開始說的,我覺得基於現在官方Guide足夠強大已經沒有再自己造車輪的必要了。如果要進一步的深入的學習,JavsScript的深入理解是必不可少的,同時要看到SAP現在也是在積極的擁抱開源,在UI5庫中用到不少開源的庫,所以對於這些庫我們也需要做深入的了解,然后在這個基礎之上我們再去理解UI5的架構,那時才能做到舉重若輕。


