|
這是 Jerry 2021 年的第 28 篇文章,，也是汪子熙公眾號總共第 299 篇原創(chuàng)文章。 Jerry 之前的文章 在沒有任何前端開發(fā)經驗的基礎上, 創(chuàng)建第一個 SAP Fiori Elements 應用,，介紹了如何使用 Visual Studio Code,，創(chuàng)建 SAP Fiori Elements 應用。 后來有朋友在微信上向我咨詢,，使用文章描述的步驟,，生成的 Fiori Elements 應用里，并不存在應用專屬的 (Application Specific) View 和 Controller,，所以不知道如何對該應用進行二次開發(fā),。 的確，生成的項目文件里,，只有一個光禿禿的 Component.js, 里面聲明了一個 json 格式的元數據描述文件 manifest.json. 而我們知道 json 格式的文件,，里面是無法編寫應用邏輯的。 另一個朋友向我詢問,，SAP 推薦的 Fiori Elements 開發(fā)工具,，到底是 WebIDE 還是 Visual Studio Code？ Jerry 首先回答第二位朋友的問題,。 SAP 社區(qū)有一篇如何使用 SAP Business Application Studio 進行 Vue 應用開發(fā)的博客,，SAP WebIDE 和 Business Application Studio 的產品經理 Yuval，在評論區(qū)里回答網友提問時,，提供了下列有用的信息： https://blogs./2021/04/12/vue-development-with-sap-business-application-studio/ 同之前 SAP云平臺 Neo 環(huán)境上傳統(tǒng)的 Full Stack WebIDE 相比,，SAP Business Application Studio 是 SAP Business Technology Platform 上的云應用開發(fā)工具，并不局限于 SAP UI5 技術,，而是支持包括 Vue.js, React 在內的任何 HTML5 前端開發(fā)技術,。 SAP Business Application Studio 支持安裝各種 Extensions，因而能夠從容適配云時代不斷涌現的各種新技術,。借助一個被稱為 SAP Fiori Tools 的擴展包,，SAP Business Application Studio 能方便地創(chuàng)建 SAP Fiori Elements 應用。SAP Fiori tools 也能在本地安裝的 Visual Studio Code 里使用,。 因此,，SAP Business Application Studio / Visual Studio Code,，都是 SAP 推薦用來開發(fā) SAP Fiori Elements 應用的工具。 關于 SAP Business Application Studio 的更多介紹,，請參考 Jerry 的文章： SAP新一代全棧開發(fā)工具：SAP Business Application Studio 回到本文標題,，用 Visual Studio Code 創(chuàng)建的 SAP Fiori Elements 應用，如何對其做二次開發(fā),？ 根據需求實現的難易程度不同,，可以采取 Adaptation 和 Extension 的方式來完成二次開發(fā)。
先看 Adaptation 的一個實際例子,。 通過 Jerry 上一篇文章 在沒有任何前端開發(fā)經驗的基礎上, 創(chuàng)建第一個 SAP Fiori Elements 應用 介紹的步驟，創(chuàng)建的 Fiori Elements 應用的表格部分,，只支持單選,，即下圖表格行項目最左端的圓形選擇控件。 下面我在 Visual Studio Code 里通過 Adaptation 方式,，將該表格改成支持多項選擇,。 Ctrl+Shift+P，打開 Guided Development,，這也是 SAP Fiori tools 擴展包里的擴展之一： 該擴展提供了若干向導,，指引開發(fā)者通過一系列步驟，完成 Fiori Elements 應用的 Adaptation. 因為我想讓表格支持多選,，所以選擇 List Report Page - Enable Multiple selection in tables: 點擊 Start Guide,， Adaptation 向導會自動定位到 manifest.json 對應區(qū)域，并顯示相應的代碼,。 下圖的含義是,，只需在 manifest.json 文件里給 table 字段添加上 multiSelect 為 true 的屬性，即可讓 Fiori Elements List Report 應用的表格,，支持多選,。點擊 Apply，即可自動完成對 manifest.json 的修改,，結束 Adaptation. 修改之后的 manifest.json 區(qū)域如下圖所示,。也就是說，如果對于 manifest.json 里支持的屬性設置非常熟悉的話,，可以直接編輯該文件,，無需使用 Fiori Guided Development 擴展,。
現在表格的選擇模式已經變成多選了：
而如果想對該 SAP Fiori Elements 應用編寫 JavaScript 自定義邏輯，需要采取 SAP UI5 的 Extension 技術,。ABAP 開發(fā)人員可以把這個技術看作是 JavaScript 版本的 BAdI. 在 manifest.json extends 區(qū)域注冊一個 extension,，類型為 sap.ui.controllerExtensions，子類型為 sap.suite.ui.generic.template.ListReport.view.ListReport. 下圖的語義是,，開發(fā)人員希望定義一個由字段 controllerName 指定的 controller extension,，來擴展 SAP Fiori Elements List Report 標準的 controller.
SAP Fiori Elements ListReport 標準的 controller，其實現代碼位于 sap.suite.ui.generic.template.ListReport.controller 的 ControllerImplementation.js 里,。
這個標準的 Controller 里,，第 641 行代碼調用 onBeforeRebindTableExtension 方法。假設我們想重新實現該方法,，在表格渲染前執(zhí)行一些自定義邏輯,，則可以將這些自定義邏輯，實現在 manifest.json 注冊的 controller extension 里,。 注意 controller extension 的實現文件里,，sap.ui.define 的第一個參數聲明的 controller 名稱，必須和 manifest.json 里注冊的 controllerName 字段保持一致,。
這樣,，運行時，在 Fiori Elements List Report 表格被渲染之前,，我們的二次開發(fā)代碼就能被框架調用：
Jerry 后續(xù)會分享更多關于 SAP Fiori Elements 的開發(fā)和擴展知識,，敬請持續(xù)關注。感謝閱讀,。 更多閱讀 |
|
|
