在 使用 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的原创文章,尽在:“汪子熙”: