一套适合 SAP UI5 初學者循序漸進的學習教程
教程目錄
SAP UI5 本地開發環境的搭建
SAP UI5 初學者教程之一:Hello World
SAP UI5 初學者教程之二:SAP UI5 的引導過程 Bootstrap
SAP UI5 初學者教程之三:開始接觸第一個 SAP UI5 控件
SAP UI5 初學者教程之四:XML 視圖初探
SAP UI5 初學者教程之五:視圖控制器初探
SAP UI5 初學者教程之六 - 了解 SAP UI5 的子產品(Module)概念
SAP UI5 初學者教程之七 - JSON 模型初探
說明
Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5,曾經在 SAP 社群和“汪子熙”微信公衆号上發表過多篇關于 SAP UI5 工作原理和源碼解析的文章。
在 Jerry 這篇文章 對 SAP UI5 一無所知的新手,從哪些材料開始學習比較好? 曾經提到,Jerry 也是從 SAP UI5 菜鳥一路走過來,深知隻有 ABAP 開發背景的開發者,向 SAP UI5 開發領域轉型的不易,是以我在業餘時間設計了這份适合 SAP UI5 初學者的學習教程,把開發一個完整的 SAP UI5 應用的流程,拆分成若幹個步驟,力求每個步驟裡,把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 源碼分析系列文章那麼深入,但力求淺顯易懂,便于 SAP UI5 初學者了解。
本教程每一個步驟的源代碼,都存放在我的 Github 上,分别用檔案夾 01,02,03 等等來辨別。
每一個步驟均是前一步驟的基礎上,添加了若幹新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者,按照順序從第一個步驟開始循序漸進地學習,把這些代碼下載下傳到本地,配合教程的文字講解,自己動手,以加深了解。
大家如果對教程的每個步驟有任何疑問,歡迎在教程對應的步驟文章裡給我評論,進行留言。
從本步驟開始,我們将 SAP UI5 控件的文本,通過單獨的資源檔案(Resources files)維護,以達到對多語言的支援(internationalization,簡稱 i18n)。
先看本文描述的步驟完成後的實作效果:
點選 Say Hello 按鈕,能看到下列的消息彈出框:
通過浏覽器 url 參數 ?sap-language=zh 指定加載該應用的中文版本,則英語版本裡 Button 和彈出對話框的 Hello 字元,變成了對應的中文内容:你好。
本步驟的實作代碼,位于我的 Github 裡。
使用方法和本教程之前的步驟一緻:代碼克隆到本地後,進入 08 檔案夾,首先執行 npm install 安裝依賴,然後執行指令行 ui5 serve:
當我們看到 Server started 的提示資訊後,通路 url:
http://localhost:8080/webapp/index.html
即可看到 UI 界面:
下面是本步驟的詳細實作細節。
(1) webapp 下建立一個檔案夾 i18n,裡面建立一個檔案 i18n.properties.
這個檔案的内容是鍵值對(key-value pair)的集合,鍵值對之間通過回車區分。
第2行的文法{0} 意思是該值支援一個輸入參數,運作時,{0}會被實際的輸入參數替換。
注意,理論上檔案夾的名稱 i18n 和 檔案 i18n.properties 的名稱可以任意指定,隻需要和後續步驟代碼裡使用到的路徑保持一緻即可。但是,按照慣例,我們一般使用預設的檔案夾名稱 i18n.