使用 yo 命令列嚮導給 SAP UI5 應用新增一個新的檢視

注销發表於2021-05-03
命令列UI

在 使用 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：

<webapp 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的原創文章，盡在："汪子熙":

相關文章