在 使用 yo 創建好的 SAP UI5 項目里，使用命令行：

yo easy-ui5 project newview:

輸入新的視圖名稱為 Products，創建新的控制器，以及在 manifest.json 里定義新的 route：

manifest.json routing 區域里三個節點增添了新屬性：

target 區域增添了新的 id 和 name 同名的Products 視圖，實現類型為 XML：

把 pattern 里字符串內容去掉，變成"":

webapp/view/Mainview.view.xml 是整個應用的外層容器。將 app 標簽頁里的內容全部刪除：

創建出來的 Products 頁面的內容為：

<mvc:View controllerName="tutorial.products.controller.Products" displayBlock="true"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><Page id="Products" title="Available Products"><content><List items="{/Products}"><StandardListItem type="Active" title="{ProductName}" /></List></content></Page> </mvc:View>

使用 aggregation bindings，定義了一個 list.

使用命令行 yo easy-ui5 project newmodel 創建一個新模型：

所有到 data source 的數據請求，都會被發送到這個 url：

/V2/Northwind/Northwind.svc/.

Modify the uimodule/webapp/xsapp.json file to redirect the traffic to a destination.

修改 xsapp.json, 將請求重新路由到 destination.

{"welcomeFile": "/flpSandbox.html","routes": [{"source": "^/V2/(.*)$","authenticationType": "none","destination": "Northwind","csrfProtection": false},{"source": "^(.*)","target": "$1","authenticationType": "xsuaa","service": "html5-apps-repo-rt"}] }

You already created a destination named Northwind in Cloud Foundry environment of SAP BTP. Now it’s time to add a mocked destination to your local setup as well.

在 uimodule 文件夾下面的 ui5.yaml 文件里：

定義一個本地 destination：

使用 npm ui5 啟動工程。

最后的效果：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用 yo 命令行向导给 SAP UI5 应用添加一个新的视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。