SAP UI5 初學者教程之八 - 多語言的支持試讀版 一套適合 SAP UI5 初學者循序漸進的學習教程

一套適合 SAP UI5 初學者循序漸進的學習教程

教程目錄

說明

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.

關於剩下的詳細步驟,請參考我的教程:SAP UI5 初學者教程之八 - 多語言的支持

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章