當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍试读版

發布時間：2023/12/19 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍试读版小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一套適合 SAP UI5 初學者循序漸進的學習教程

教程目錄

SAP UI5 本地開發環境的搭建
SAP UI5 應用開發教程之一：Hello World
SAP UI5 應用開發教程之二：SAP UI5 的引導過程 Bootstrap
SAP UI5 應用開發教程之三：開始接觸第一個 SAP UI5 控件
SAP UI5 應用開發教程之四：XML 視圖初探
SAP UI5 應用開發教程之五：視圖控制器初探
SAP UI5 應用開發教程之六 - 了解 SAP UI5 的模塊(Module)概念
SAP UI5 應用開發教程之七 - JSON 模型初探
SAP UI5 應用開發教程之八 - 多語言的支持
SAP UI5 應用開發教程之九 - 創建第一個 Component
SAP UI5 應用開發教程之十 - 什么是 SAP UI5 應用的描述符 Descriptor
SAP UI5 應用開發教程之十一：SAP UI5 容器類控件 Page 和 Panel
SAP UI5 應用開發教程之十二 - 使用 CSS 類對 UI 進行進一步美化
SAP UI5 應用開發教程之十三 - 如何添加自定義 CSS 類
SAP UI5 應用開發教程之十四 - 嵌入視圖的使用方式
SAP UI5 應用開發教程之十五 - 對話框和 Fragments 的使用方式
SAP UI5 應用開發教程之十六 - 圖標 icon 的使用
SAP UI5 應用開發教程之十七 - 聚合綁定在 UI5 復合控件中的使用
SAP UI5 應用開發教程之十八 - SAP UI5 數據綁定語法里的特殊符號，以及絕對綁定和相對綁定概念詳解
SAP UI5 應用開發教程之十九 - SAP UI5 數據類型和復雜的數據綁定
SAP UI5 應用開發教程之二十 - SAP UI5 的表達式綁定用法講解
SAP UI5 應用開發教程之二十一 - SAP UI5 的自定義格式器 Custom Formatter
SAP UI5 應用開發教程之二十二 - 過濾器 filter 的開發和使用
SAP UI5 應用開發教程之二十三 - 列表控件的排序 Sort 和分組 Group
SAP UI5 應用開發教程之二十四 - 如何使用 OData 數據模型
SAP UI5 應用開發教程之二十五 - 使用代理服務器解決 SAP UI5 應用訪問遠端 OData 服務的跨域問題
SAP UI5 應用開發教程之二十六 - OData 服務配合 Mock 服務器的使用步驟詳解
SAP UI5 應用開發教程之二十七 - SAP UI5 應用的單元測試工具 QUnit 介紹
SAP UI5 應用開發教程之二十八 - SAP UI5 應用的集成測試工具 OPA 介紹
SAP UI5 應用開發教程之二十九 - SAP UI5 的路由和導航功能介紹

說明

Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之后開始接觸 SAP UI5，曾經在 SAP 社區和“汪子熙”微信公眾號上發表過多篇關于 SAP UI5 工作原理和源碼解析的文章。

在 Jerry 這篇文章對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，因此我在業余時間設計了這份適合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若干個步驟，力求每個步驟里，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 源碼分析系列文章那么深入，但力求淺顯易懂，便于 SAP UI5 初學者理解。

本教程每一個步驟的源代碼，都存放在我的 Github 上，分別用文件夾 01，02，03 等等來標識。

每一個步驟均是前一步驟的基礎上，添加了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些代碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章里給我評論，進行留言。

本教程目前為止的二十八個步驟，我們開發的 SAP UI5 僅僅包含了一個單獨的頁面。本步驟我們將額外開發一個新的頁面，并學習如何在這些不同的頁面之間進行路由(route)和導航(navigation)。

按照本文介紹的步驟開發完畢之后，我們的初始頁面如下：

http://localhost:8080/webapp/index.html

點擊發票列表里任意一個行項目，能跳轉到另一個發票明細頁面:

http://localhost:8080/webapp/index.html#/detail

注意到明細頁面對應的地址欄里的 url 已經發生了變化。

目前這個明細頁面只顯示了一條 Invoice 字符串。關于明細頁面在路由導航過程中如何實現參數傳遞，我們在下一個步驟里將會繼續介紹。

本步驟所有的源代碼，位于 Github：https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/29

下面是 SAP UI5 路由實現的明細介紹。