標籤:
好久沒有更新了,實在不知道應該寫一些什麼內容,因為作為入門系列,實際上應該更多的是操作而不是理論,而在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的架構,那時才能做到舉重若輕。
OPEN(SAP) UI5 學習入門系列之四:更好的入門系列-官方Walkthrough