选择SAP UI5应用的webapp文件夹,右键,选择New->SAP UI5 View, 新建一个UI5视图:
视图名称改成app:
在manifest.json文件里编辑route区域,将默认的route重命名为home,清空Pattern字段,
路由的目标,设置成我们UI5应用里的另一个视图View1:
将我们刚才新建的视图设置成这个应用的root view:
var oRouter = sap.ui.core.UIComponent.getRouterFor(this); var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID"); oRouter.navTo("Detail", { productId: selectedProductId });
新建一个Detail view:
源代码:
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sapcp.cf.tutorial.app.controller.Detail" xmlns:html="http://www.w3.org/1999/xhtml"> <App> <pages> <Page title="{i18n>DetailTitle}" showNavButton="true" navButtonPress="handleNavButtonPress" > <VBox> <Text text="{ProductName}" /> <Text text="{UnitPrice}" /> <Text text="{QuantityPerUnit}" /> <Text text="{UnitsInStock}" /> </VBox> </Page> </pages> </App></mvc:View>
在manifest.json文件里,新建一条路由规则:
pattern:detail/{productId}
路由目标为Detail view,视图level为2:
运行时测试,我点了某个列表行项目之后:
跳转到明细页面:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。