捕获无效哈希值

学习目标

如果输入的哈希值没有匹配的路由，则显示通知视图

无效哈希值

如果用户尝试访问与任何已配置路由都不匹配的无效模式，则应通知他们出现了问题。

浏览器显示“资源不可用”消息的屏幕截图。

要实现此功能，路由配置中提供了 bypassed 属性。使用该属性，你可以指定在未匹配到任何导航模式时使用的导航目标。如果使用此设置，你还必须在 targets 部分中定义相应的目标。

示例路由配置，其中突出显示了 notFound 目标。

在所示示例中，应用描述符中的路由配置已通过添加 bypassed 属性进行了扩展。它告知路由器在当前哈希值没有匹配路由时显示 notFound 目标。

notFound 目标在 targets 部分中配置。它会将 XML 视图 sap.training.exc.view.NotFound 以无动画（show 转场）方式加载到 Id 为 app 的 UI 控件的 pages 聚合中。

注意

要在视图上显示与路由相关的错误消息，你可以使用 sap.m.MessagePage 控件。

捕获无效哈希值

业务场景

在之前的练习中，你配置了两条路由。使用你所做的配置，如果浏览器的哈希值为空，则显示 Overview 视图。此外，如果浏览器的哈希值等于 detail，则显示 Detail 视图。

在本练习中，你将实现一个名为 NotFound 的视图；如果输入的哈希值没有匹配的路由，则应通过适当的配置显示该视图。NotFound 视图应显示一条错误消息和一个链接，允许用户从 NotFound 视图导航到 Overview 视图。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/24_back_navigation模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/25_invalid_hashes

任务 1：实现 NotFound 视图

注意

为简单起见，项目中已包含实现 NotFound 视图所需的文件 *NotFound.view.xml* 和 *NotFound.controller.js*。但是，该视图上目前还没有任何 UI 元素，控制器实现也仍为空。

在本练习的这一任务中，你将向 NotFound 视图添加一个 MessagePage UI 元素，其中包含可翻译的标题和可翻译的错误消息。你将在接下来的步骤中实现它。

在本练习的最后一个任务中，你还将向 NotFound 视图添加一个链接，允许用户导航到 Overview 视图。

步骤

在编辑器中打开 *i18n* 文件夹中的 *i18n.properties* 资源包文件。
向 *i18n.properties* 文件中添加以下键值对，以便为下一步要创建的 MessagePage UI 元素定义可翻译的标题和可翻译的错误消息：

# NotFound View
notFoundPageTitle=Not Found
notFoundPageText=Sorry, but the requested resource is not available.

结果

i18n.properties 资源包文件现在应如下所示：生成的 i18n.properties 文件。 3. 在编辑器中打开 *webapp/view* 文件夹中的 *NotFound.view.xml* 文件。 4. 向视图中添加以下代码，以显示一个带有上述标题和文本的消息页面：

<MessagePage
title="{i18n>notFoundPageTitle}"
text="{i18n>notFoundPageText}">
</MessagePage>

结果

NotFound 视图现在应如下所示：

NotFound.view.xml 文件，其中突出显示了 MessagePage 标签。

任务 2：为 NotFound 视图配置路由

步骤

在编辑器中打开 *webapp* 文件夹中的 *manifest.json* 应用描述符。
在应用描述符中，找到 sap.ui5 命名空间中的 routing 属性：

"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "sap.training.exc.view",
"controlAggregation": "pages",
"controlId": "app"
},
"routes": [
{
"name": "overview",
"pattern": "",
"target": [
"overview"
]
},
{
"name": "detail",
"pattern": "detail",
"target": [
"detail"
]
}
],
"targets": {
"overview": {
"viewId": "overview",
"viewName": "Overview",
"viewLevel": 1
},
"detail": {
"viewId": "detail",
"viewName": "Detail",
"viewLevel": 2
}
}
}

向 config 部分添加以下属性，以指定在未匹配到任何导航模式时使用的导航目标：

"bypassed": {
"target": [
"notFound"
]
}

注意

所引用的 notFound 目标将在下一步中定义。

结果

路由配置现在应如下所示： manifest.json 文件，其中突出显示了 bypassed 属性。 4. 最后，向 targets 对象添加以下属性，以指定上面引用的 notFound 目标将用于加载 NotFound 视图：

"notFound": {
"viewId": "notFound",
"viewName": "NotFound",
"transition": "show"
}

结果

路由配置现在应如下所示：

manifest.json 文件，其中突出显示了 notFound 属性。

任务 3：实现从 NotFound 视图到 Overview 视图的导航

步骤

向 *i18n.properties* 资源包文件中添加以下键值对：

navToOverviewLinkText=Show Overview Page

注意

该键值对为 NotFound 视图上你将在下一步中创建的链接提供可翻译文本。该链接将允许用户从 NotFound 视图导航到 Overview 视图。

结果

i18n.properties 资源包文件现在应如下所示：生成的 il18n.properties 文件。 2. 现在如下所示向 NotFound 视图上的 <MessagePage> 标签添加 customDescription 聚合，以在该页面上显示一个带有上述文本的链接：

<customDescription>
<Link text="{i18n>navToOverviewLinkText}" press=".onNavToOverview"/>
</customDescription>

注意

此处为按下链接注册的 onNavToOverview 事件处理程序将在下一步中实现。

结果

NotFound 视图现在应如下所示： Notfound.view.xml 文件，其中突出显示了 customDescription 代码。 3. 现在在编辑器中打开 *webapp/controller* 文件夹中的 *NotFound.controller.js* 文件。 4. 如下所示在 NotFound 视图控制器上实现 onNavToOverview 事件处理方法，以便在按下链接时显示 Overview 视图：

onNavToOverview: function () {
var oRouter = this.getOwnerComponent().getRouter();
oRouter.navTo("overview", {}, true);
}

结果

视图控制器现在应如下所示： Notfound.view.xml 文件，其中突出显示了 onNavtoOverview 行。 5. 通过从 SAP Business Application Studio 中启动应用来测试运行你的应用。

小心

如果你未连接到后端系统，请使用 start-mock npm 脚本启动应用。确保在输入的哈希值没有匹配的路由（例如 foo）时显示 NotFound 视图。还要确保用户可以通过该处显示的链接从 NotFound 视图导航到 Overview 视图。

右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后在出现的上下文菜单中选择 预览应用。
在出现的对话框中选择名为 start-mock 的 npm 脚本。
在打开的应用中，检查该组件是否按预期工作。