到目前为止,我们已经把所有的应用程序内容放在一个页面上。随着我们添加越来越多的特性,我们希望将内容拆分并将其放在不同的页面上。

在这一步中,我们将使用SAPUI5导航特性加载并显示一个单独的详细信息页面,稍后我们可以使用该页面显示发票的详细信息。在前面的步骤中,我们直接在app视图中定义了页面,以便在加载app时显示页面。现在我们将使用SAPUI5 router类来加载页面并自动更新URL。我们为应用程序指定路由配置,并为应用程序的每个页面创建单独的视图,然后通过触发导航事件连接视图。

Preview

A second page is added to display the invoice

Coding

You can view and download all files at Walkthrough - Step 31.

webapp/manifest.json

{
"_version": "1.12.0",

"sap.ui5": {

"models": {

},
"routing":{
"config":{
"routerClass":"sap.m.routing.Router",
"viewType":"XML",
"viewPath":"sap.ui.demo.walkthrough.view",
"controlId":"app",
"controlAggregation":"pages",
"async":true
},
"routes":[
{
"pattern":"",
"name":"overview",
"target":"overview"
},
{
"pattern":"detail",
"name":"detail",
"target":"detail"
}
],
"targets":{
"overview":{
"viewID":"overview",
"viewName":"Overview"
},
"detail":{
"viewId":"detail",
"viewName":"Detail"
}
}
}
}
}

config我们向描述符的sap.ui5部分添加了一个新的“routing”部分。定义app的路由和导航结构有三个小节:

本节包含适用于所有路由和目标的全局路由器配置和默认值。我们定义我们想要使用的router类,以及视图位于app中的位置。为了自动加载和显示视图,我们还指定了用于显示页面的控件以及在显示新页面时应该填充哪些聚合。

routes

每个路由定义一个名称、一个模式和一个或多个目标,以便在路由被命中时导航到这些目标。模式基本上是与路由匹配的URL部分,我们为app定义了两条路由。第一个是默认路由,它将显示概述页面和前面步骤中的内容,第二个是详细路由,它具有URL模式详细信息,将显示一个新页面。

targets

目标定义了一个显示的视图,它与一个或多个路由相关联,也可以从应用程序内部手动显示。每当显示一个目标时,相应的视图就被加载并显示在应用程序中。在我们的应用程序中,我们简单地定义了两个具有与目标名称相对应的视图名称的目标。

webapp/Component.js

sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/walkthrough/controller/HelloDialog"
], function (UIComponent, JSONModel, HelloDialog) {
"use strict"; return UIComponent.extend("sap.ui.demo.walkthrough.Component", { metadata: {
manifest: "json"
}, init: function () {
… // set dialog
this._helloDialog = new HelloDialog(this.getRootControl());
// create the views based on the url/hash
this.getRouter().initialize();
},
}); exit : function() {
this._helloDialog.destroy();
delete this._helloDialog;
}, openHelloDialog : function () {
this._helloDialog.open();
}
});
});

在组件初始化方法中,我们现在添加一个调用来初始化路由器。我们不需要手动实例化路由器,它是基于我们的AppDescriptor配置自动实例化并分配给组件的。

初始化路由器将计算当前URL并自动加载相应的视图。这是在AppDescriptor中配置的路由和目标的帮助下完成的。如果某个路由被命中,则加载并显示其对应目标的视图。

webapp/view/Overview.view.xml (New)

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Pagetitle="{i18n>homePageTitle}">
<headerContent>
<Button
icon="sap-icon://hello-world"
press="onOpenDialog"/>
</headerContent>
<content>
<mvc:XMLViewviewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
<mvc:XMLViewviewName="sap.ui.demo.walkthrough.view.InvoiceList"/>
</content>
</Page>
</mvc:View>

我们将前面步骤的内容从App视图移动到一个新的Overview视图。为简单起见,我们不更改控制器,因为它只包含打开对话框的helper方法,这意味着我们将controller sa .ui.demo.walk .controller. app用于两个不同的视图(用于新的概览和app视图)。但是,该控制器的两个实例在运行时实例化。通常,为引用控制器的每个视图实例化控制器的一个实例。

webapp/view/App.view.xml

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<Appclass="myAppDemoWT"id="app"/>
</mvc:View>

我们的App视图现在只包含空的App标签。路由器会自动将与当前URL相对应的视图添加到app控件中。路由器用与AppDescriptor中的属性controlId相对应的ID标识应用程序控件:“app”。

webapp/view/Detail.view.xml (New)

<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page
title="{i18n>detailPageTitle}">
<ObjectHeader
title="Invoice"/>
</Page>
</mvc:View>

webapp/i18n/i18n.properties现在我们为detail视图添加第二个视图。它只包含一个页面和一个ObjectHeader控件,该控件目前显示静态文本发票。


# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done # Detail Page
detailPageTitle=Walkthrough - Details

我们为详细页标题向资源包添加一个新字符串。

webapp/view/InvoiceList.view.xml

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List …>

<items>
<ObjectListItem title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
numberUnit="{view>/currency}"
numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"
type="Navigation"
press="onPress">
<firstStatus>
<ObjectStatus text="{
path: 'invoice>Status',
formatter: '.formatter.statusText'
}"/>
</firstStatus>
</ObjectListItem>
</items>
</List>
</mvc:View>

在invoice list视图中,我们向列表项添加了一个press事件,并将项目类型设置为导航,以便可以实际单击该项目。

webapp/controller/InvoiceList.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/walkthrough/model/formatter",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
"use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", { … onPress:function(oEvent){
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail");
}
});
});

我们将事件处理程序函数添加到发票列表的控制器中。现在可以通过单击发票列表中的项目导航到详细信息页面。我们通过调用helper方法sap.ui.core.UIComponent.getRouterFor(this)来访问应用程序的router实例。在路由器上,我们调用navTo方法来导航到路由配置中指定的详细路由。

当您单击发票列表中的项目时,现在应该会看到详细信息页面。

Conventions

  在描述符中定义路由配置

Parent topic: Walkthrough

Previous: Step 30:
Debugging Tools

Next: Step 32:
Routing with Parameters

Related Information

Routing and
Navigation

Tutorial:
Navigation and Routing

API Reference: sap.m.routing.Router

Samples: sap.m.routing.Router

UI5-文档-4.31-Routing and Navigation的更多相关文章

  1. elasticsearch系列三:索引详解(分词器、文档管理、路由详解(集群))

    一.分词器 1. 认识分词器  1.1 Analyzer   分析器 在ES中一个Analyzer 由下面三种组件组合而成: character filter :字符过滤器,对文本进行字符过滤处理,如 ...

  2. elasticsearch最全详细使用教程:入门、索引管理、映射详解、索引别名、分词器、文档管理、路由、搜索详解

    一.快速入门1. 查看集群的健康状况http://localhost:9200/_cat http://localhost:9200/_cat/health?v 说明:v是用来要求在结果中返回表头 状 ...

  3. Sharepoint学习笔记—ECM系列—文档列表的Metedata Navigation与Key Filter功能的实现

    如果一个文档列表中存放了成百上千的文档,想要快速的找到你想要的还真不是件容易的事,Sharepoint提供了Metedata Navigation与Key Filter功能可以帮助我们快速的过滤和定位 ...

  4. 31 Godoc: documenting Go code 编写良好的文档关于godoc

    Godoc: documenting Go code  编写良好的文档关于godoc 31 March 2011 The Go project takes documentation seriousl ...

  5. Elasticsearch增删改查 之 —— mget多文档查询

    之前说过了针对单一文档的增删改查,基本也算是达到了一个基本数据库的功能.本篇主要描述的是多文档的查询,通过这个查询语法,可以根据多个文档的查询条件,返回多个文档集合. 更多内容可以参考我整理的ELK文 ...

  6. RabbitMq 技术文档

    RabbitMq 技术文档 目录 1 AMQP简介 2 AMQP的实现 3 RabbitMQ简介 3.1 概念说明 3.2 消息队列的使用过程 3.3 RabbitMQ的特性 4 RabbitMQ使用 ...

  7. HighCharts 详细使用及API文档说明

    一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下 ...

  8. HighCharts 具体使用及API文档说明

    一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每一个部分,比方配置标题(title),副标题(subtitle)等,当中每一个部分又有更细的參数配置,比方标 ...

  9. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  10. 使用 Flask-Docs 自动生成 Api 文档

    影响我写文档的原因可能是代码和文档分离,有时候写完代码会忘记补文档,而且不能及时查看,使用 Flask-Docs 可以解决我的问题,这个插件可以根据代码注释生成文档页面,代码注释改动文档可以及时更新, ...

随机推荐

  1. Web Js推断键盘出发事件

      window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : wind ...

  2. Apache2.4配置(全)

    http://blog.csdn.net/u012291157/article/details/46492137

  3. 使用 phpStudy + VSCODE 进行 PHP 断点调试

    使用 phpStudy + VSCODE 进行 PHP 断点调试 自己摸索过程有点曲折,但还是配置成功了,现分享如下. 原料 phpStudy 2018 VSCODE 配置过程 安装 phpStudy ...

  4. poj 2096 Collecting Bugs && ZOJ 3329 One Person Game && hdu 4035 Maze——期望DP

    poj 2096 题目:http://poj.org/problem?id=2096 f[ i ][ j ] 表示收集了 i 个 n 的那个. j 个 s 的那个的期望步数. #include< ...

  5. Openwrt 3g模块

    支持Huawei E367 一.编译选项的选择 都选上 都选上 Network目录下 Utiles Luci 二.USB连接3G模块时,显示如下,表示成功 三.没找到:

  6. 【shell】awk命令

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  7. 分析报告:云之家V9 VS 钉钉3.5

    http://news.yesky.com/hotnews/1/244252501.shtml 1.市场调研 1.1 企业需求 笔者所在单位是一家中型企业,企业流程和信息化基础较为成熟.随着移动互联网 ...

  8. spring Annotation based configuration

    spring 注解相关 https://docs.spring.io/spring/docs/3.0.0.M3/reference/html/ch04s11.html

  9. 【EasyUI学习-1】MyEclipse+easyui学习官方Demo

    介绍 easyui的介绍,网上很多,这里就不进行介绍了. easyUI获取 官网: http://www.jeasyui.com/  下载地址:http://www.jeasyui.com/downl ...

  10. java web程序 登陆验证页面 4个页面人性化设置

    到这里,快期末考试了,老师不讲课,我心里有苦不想说,也许没有考虑到老师的感受,让老师难堪了 但是我的行为已不再是我可以做的了.不可能了,我只是职业性的机械的做事了. 思路: 1.第一个是form表单, ...