将网页做成书签：SAP UI5 路由书签功能指南

2023-05-03 12:36:15

用 SAP UI5 路由书籤讓網頁靈活好用如書籤

在瞬息萬變的網路世界裡，我們經常在網路上搜尋資訊，找到有用的資料後，通常會將它們儲存為書籤，以便日後輕鬆存取。然而，傳統書籤只能儲存網頁網址，卻無法儲存頁面狀態。換句話說，當我們再次造訪書籤頁面時，必須重新導航到頁面的正確狀態，這可能會帶來一些不便。

SAP UI5 路由書籤：儲存網頁狀態，輕鬆導航

SAP UI5 路由書籤功能解決了這個問題。它能讓開發人員在 SAP UI5 應用程式中建立書籤，這些書籤可以儲存頁面狀態，讓使用者輕鬆回到頁面的先前狀態。

SAP UI5 路由書籤功能的優點：

使用者可以輕易儲存及存取頁面狀態。
提升使用者體驗，讓使用者能夠輕鬆導航到感興趣的頁面狀態。
強化應用程式的可用性，讓使用者能夠輕易找到所需的資訊。

如何使用 SAP UI5 路由書籤功能？

要使用 SAP UI5 路由書籤功能，請按照下列步驟操作：

在 SAP UI5 應用程式中建立一個路由。
在路由中定義一個書籤參數。
在頁面上使用書籤參數來儲存頁面狀態。
建立一個書籤按鈕或連結，讓使用者可以將頁面狀態儲存為書籤。
當使用者點選書籤按鈕或連結時，頁面狀態會儲存到瀏覽器的本地儲存中。
當使用者再次造訪書籤頁面時，頁面狀態會從瀏覽器的本地儲存中讀取並還原。

範例程式碼：

// 建立一個路由
var oRouter = new sap.m.routing.Router();
oRouter.addRoute("route1", {
  pattern: "route1/:param1",
  view: "View1"
});

// 在路由中定義一個書籤參數
oRouter.addRoute("route2", {
  pattern: "route2/:param1",
  view: "View2",
  bookmarkable: true
});

// 在頁面上使用書籤參數來儲存頁面狀態
var oView = sap.ui.getCore().byId("view1");
oView.attachEvent("beforeShow", function() {
  var sParam1 = this.getBindingContext().getProperty("param1");
  this.setBindingContext(new sap.ui.model.Context(this.getModel(), "/" + sParam1));
});

// 建立一個書籤按鈕或連結
var oButton = new sap.m.Button({
  text: "Bookmark",
  press: function() {
    oRouter.navTo("route2", {
      param1: "value1"
    }, true);
  }
});

// 當使用者點選書籤按鈕或連結時，頁面狀態會儲存到瀏覽器的本地儲存中
oRouter.attachEvent("beforeRouteMatched", function(oEvent) {
  if (oEvent.getParameter("bookmark")) {
    var sParam1 = oEvent.getParameter("arguments").param1;
    this.setBindingContext(new sap.ui.model.Context(this.getModel(), "/" + sParam1));
  }
});