SAP UI5 快速指南

---

---

SAP UI5 - 概述

SAP 提供各種工具，使用者可以使用這些工具來增強使用者體驗，為 Web 業務應用程式建立具有豐富使用者介面的應用程式。最常見的啟用工具包括：

• 主題設計器
• NWBC 和側邊欄
• FPM 螢幕
• SAP UI5 開發工具

使用 SAP UI5 建立的基於 Web 的應用程式提供了更一致的使用者體驗，並且可以在平板電腦、智慧手機和筆記型電腦等裝置上訪問。使用 NetWeaver 閘道器和 UI5，您可以定義使用者介面和業務邏輯之間的清晰分離。

SAP UI5 提供以下關鍵特性：

• 程式碼和應用程式級別的可擴充套件性概念。
• 能夠為典型用例建立複雜的 UI 模式和預定義佈局。
• 模型-檢視-控制器 (MVC) 和資料繫結方法。
• 鍵盤互動支援和輔助功能。
• SAP UI5 基於開放標準，如 JavaScript、CSS 和 HTML5。
• 基於 CSS 的主題支援。

以下是 SAP UI 在業務中使用的優勢：

• 它有助於提高生產力。
• 提高使用者適應性。
• 減少人為錯誤。
• 降低培訓成本。
• SAP 系統的高效能。
• 完美設計的 API，易於使用。

SAP UI5 ─ 版本

以下是已釋出的最新 UI5 版本列表。每個 UI5 版本都相較於之前的版本提供了新的功能和增強功能，包括平臺支援、可用性增強等。

• SAP UI5 1.26
• SAP UI5 1.28
• SAP UI5 1.30
• SAP UI5 1.32
• SAP UI5 1.34
• SAP UI5 1.36
• SAP UI5 1.38 以及更多版本，例如 SAP UI5 1.6

版本方案

SAP UI5 使用三位數的版本號。例如，SAPUI5 1.36.5。這裡，數字 (1) 指定主版本。第二位數字 (36) 指定次版本號。第三位數字指定補丁版本號 (5)。

在每個 SAP UI5 版本中，主版本和次版本以及補丁版本都可以用來識別補丁。

SAP UI5 與 Open UI5 的比較

SAP UI5 和 Open UI5 都提供 UI 開發環境。但是，它們在以下方面有所不同：

SAP UI5 是 SAP 產品套件的一部分，不是單獨的許可證。它與不同的 SAP 產品整合，例如：

• SAP NW 7.4 或更高版本
• SAP NetWeaver AS 7.3x
• SAP HANA 雲和本地解決方案

Open UI5 是一種用於應用程式開發的開源技術，它以 Apache 2.0 許可證釋出。

UI5 瀏覽器支援

SAP UI5 支援來自 Microsoft、Google 和 Firefox 的所有主要瀏覽器及其最新版本。但是，支援的功能會因瀏覽器版本和廠商而異。

SAP UI5 - 架構

在 SAP UI5 架構中，您有三層：

• 最頂層是表示層，UI5 元件由移動裝置、平板電腦和筆記型電腦等裝置使用。

• 中間層是應用程式客戶端，包括用於主題和控制元件的 SAP UI5 庫。UI5 控制元件庫包括

  • Sap.viz

  • Sap.ui.commons（文字欄位和按鈕等控制元件）

  • Sap.ui.table（表格的輸入控制元件）

  • Sap.ui.ux3

  • Sap.m（包括移動裝置的輸入控制元件）

• 底層是可選的伺服器元件。這包括用於 ABAP/Java 的 SAP NetWeaver 應用伺服器、SAP 後端、用於開發或資料庫的 HANA XS 引擎。

SAP UI5 - 關鍵元件

SAP UI5 具有多個元件，它們是 UI5 應用程式中獨立且可重用的物件。這些元件可以由不同的人開發，並可用於不同的專案。

一個應用程式可以使用來自不同位置的元件，因此您可以輕鬆獲得應用程式的結構。您可以在 SAP UI5 開發下建立不同型別的元件。

無介面元件

無介面元件用於從後端系統獲取資料，並且不包含使用者介面。

示例 - 它們是 sap.ui.core.component 類的一部分

UI 元件

UI 元件用於新增渲染功能，並在使用者介面上表示螢幕區域或元素。

示例 - UI 元件可以是一個帶有設定以執行某些任務的按鈕。它是類的一部分：sap.ui.core.UIComponent

注意 - sap.ui.core.component 是無介面元件和 UI 元件的基類。為了定義可擴充套件性功能，元件可以繼承自基類或 UI 開發中的其他元件。

元件的模組名稱稱為包名稱，以及.component，其中包名稱定義為傳遞給元件建構函式的引數的名稱。

SAP UI5 元件也可以根據系統環境進行劃分：

• 客戶端元件：這包括：
  • 控制元件庫 sap.m、sap.ui.common 等。
  • 核心 Javascript
  • 測試包括 HTML 和 Javascript
• 伺服器端元件
  • 主題生成器
  • Eclipse 中的控制元件和應用程式開發工具
  • 資源處理器

元件的結構

每個元件都以資料夾的形式表示，幷包含元件的名稱以及管理元件所需的資源。

每個元件都應包含以下檔案：

• Component.json 檔案包含設計時元資料，僅用於設計時工具。

• Component.js 用於定義屬性、事件和元件方法，這些方法負責執行時元資料。

如何建立一個新的 SAP UI5 元件？

要建立一個新元件，您必須建立一個新資料夾。讓我們將其命名為button。

接下來是建立component.js 檔案

然後，您必須擴充套件 UI 元件基類 sap.ui.core.UIComponent.extend 並輸入元件的名稱和包路徑。

稍後，要定義一個新元件，您必須從require語句開始，如下所示：

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

下一步是在您的資料夾中定義 component.json，如下所示：

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

如何使用元件

要使用元件，您必須將元件包裝在元件容器中。您不能直接使用 placeAt 方法在頁面中使用 UI 元件。另一種方法是將元件傳遞給 componentContainer 建構函式。

使用 placeAt 方法

這包括將元件新增到容器中並使用placeAt方法將元件放置在頁面上。

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

使用 componentContainer 建構函式

元件容器包含特定設定，還包含常規控制元件的生命週期方法。以下程式碼段顯示瞭如何將元件傳遞給 componentContainer 建構函式。

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");

SAP UI5 - 控制元件庫

您可以結合使用各種 JavaScript 和 CSS 庫來進行應用程式開發。SAPUI5 可以結合使用這些庫，它們被稱為 SAPUI5 控制元件庫。

常見的 SAPUI5 控制元件庫：

• Sap.ui.commons 用於控制元件欄位、按鈕等。
• Sap.m 是最常見的控制元件庫，用於移動裝置
• Sap.ui.table 包含表格控制元件
• Sap.ui.ux3

注意 - SAPUI5 控制元件庫 sap.m 是最常見的庫，用於應用程式開發。這些庫可以與其他控制元件庫結合使用。

控制元件庫組合

• 您可以將控制元件庫 sap.m 與其他控制元件庫一起使用 - sap.ui.unified、sap.viz、sap.ui.table、sap.ui.layout 和 sap.suite。

• 您可以將控制元件庫 - sap.ui.commons、sap.ui.table、sap.ui.ux3 和 sap.ui.suite 彼此結合使用。

• 您還可以將控制元件庫 sap.ui.commons 和 sap.ui.ux3 與其他庫結合使用，如 sap.ui.core、sap.ui.unified、sap.ui.layout 和 sap.ui.table。

• 您可以將 sap.viz 與所有其他庫結合使用。

下表顯示了主要的 SAPUI5 控制元件庫及其說明：

SAP UI5 - 開發工具包

用於 HTML5 的 SAP UI5 開發工具包為您提供了一個用於開發基於 Web 的應用程式的環境，它為應用程式提供一致的使用者體驗。使用 SAP UI5 開發的 Web 應用程式在瀏覽器和裝置之間具有響應能力，並且可以在智慧手機、平板電腦和桌上型電腦上執行。

UI 控制元件會自動適應每個裝置的功能。

您可以在以下平臺上使用 SAP UI5：

• SAP HANA
• SAP HANA Cloud Platform
• 適用於 SAP NetWeaver 7.4 或更高版本的 SAP NetWeaver
• 適用於 SAP NetWeaver 應用伺服器 7.3x 的 SAP NetWeaver 使用者介面附加元件

您可以將應用程式部署到伺服器上，其中包括儲存庫和從資料庫獲取資料。您可以使用 NetWeaver 應用伺服器或 HANA Cloud 平臺進行應用程式部署，並且可以使用 OData 模型透過 Gateway 訪問業務應用程式的資料。請檢視以下插圖。

當用戶從其移動裝置/筆記型電腦傳送客戶端請求時，會向伺服器傳送請求以在瀏覽器中載入應用程式，並透過資料庫訪問資料，並訪問相關庫。

要構建 UI5 應用程式，您可以下載 Eclipse 的 SAP UI5 開發者工具。下載後，您可以解壓縮檔案並將其部署到 Web 伺服器上。對於 ABAP，您可以安裝適用於 SAP NetWeaver 的 UI 附加元件，這也包括 UI5 主題設計器。

SAP UI5 的前提條件

要安裝和更新用於 HTML5 的 UI5 開發工具包，您應該滿足以下前提條件：

現在讓我們繼續討論如何在您的系統中安裝 SAP UI5 開發工具包。

步驟 1 - 要安裝 JDK，請訪問 Oracle.com 並搜尋所需的 JDK 版本。

步驟 2 - 下載並執行安裝程式。您將收到如下截圖所示的訊息。

步驟 3 - 要安裝 Eclipse，請訪問 www.Eclipse.org/downloads

步驟 4 - 解壓檔案，如下面的截圖所示。

步驟 5 - 要執行安裝程式，請轉到解壓後的資料夾並執行應用程式檔案，如下面的截圖所示。

步驟 6 - 要安裝 SAPUI5 工具，請轉到 Eclipse → Help → Install New software。

您可以直接使用 URL 安裝，也可以輸入 UI5 演示工具包的路徑。

步驟 7 - 接下來，在安裝對話方塊中輸入 URL https://tools.hana.ondemand.com/mars

步驟 8 - 檢視可用的功能。按 ENTER 鍵。您可以選擇功能並單擊 Next。它將顯示要安裝的功能列表 → 單擊 Next。

步驟 9 - 接受許可協議並單擊 Finish 開始安裝。

步驟 10 - 從以下連結下載 UI 開發工具包 for HTML 5：

http://scn.sap.com/community/developer-center/front-end 並將內容解壓到同一個資料夾中。

步驟 11 - 啟動 Eclipse 環境。轉到 Help → Install New Software。

步驟 12 - 單擊 Add → Local。

步驟 13 - 接下來，導航到本地更新站點位置，並選擇工具更新站點資料夾，並將您解壓 HTML5 開發工具包的資料夾作為更新源。

步驟 14 - 選擇所有要安裝的外掛和功能。

步驟 15 - 在安裝過程中選擇“Contact all update sites”對話方塊以查詢所需的軟體。

步驟 16 - 單擊 Finish 按鈕完成設定。重新啟動 Eclipse。

步驟 17 - 您可以透過 Eclipse 選單 File → New → Other 底部建立一個新的 SAPUI5 應用程式專案來驗證安裝。選擇 SAP UI5 Application Development 資料夾並展開以建立新專案。

步驟 18 - 輸入專案名稱，選擇庫，您可以選中複選框以建立初始檢視。

步驟 19 - 使用專案中的一些示例程式碼建立一個檢視。輸入檢視的名稱並單擊 Next 按鈕。

步驟 20 - 選擇開發範例並單擊 Finish。您將在新視窗中看到一個新的 SAPUI5 開發專案，如下面的截圖所示。

現在，要展示您的應用程式或在生產環境中執行它，您可以將您的 SAPUI5 應用程式部署到 tomcat 伺服器上。如果您沒有像 MAVEN 這樣的工具，您可以使用匯出選項手動匯出專案。右鍵單擊 Project → Export。

步驟 21 - 輸入要放置 war 檔案的目標路徑。

接下來，將 war 檔案複製到您的 apache tomcat 的 webapps 目錄。您可以透過訪問此路徑來訪問您的應用程式 - https://:8080/<your_app>/

注意 - 在正常情況下，許多 SAP 專案都在 Internet Explorer 中執行，但對於 SAPUI5 開發，建議使用帶有 firebug 外掛的 Google Chrome 或 Firefox，因為這兩個系統都允許使用工具和外掛來除錯 JavaScript，以及使用 HTML 和 CSS。

SAP UI5 - MVC 概念

SAP UI5 開發中使用模型-檢視-控制器 (MVC) 概念來使應用程式資料與使用者互動分開。這允許您獨立開發 Web 應用程式並對應用程式進行更改。

模型-檢視-控制器在 UI 開發中扮演不同的角色：

• 模型負責管理資料庫/後端中的應用程式資料。

• 檢視負責向用戶定義使用者介面。當用戶從其裝置傳送請求時，檢視負責根據提交的請求顯示資料。

• 控制器用於根據使用者互動控制資料和檢視事件，透過更新檢視和模型。

您可以使用以下功能在 SAPUI5 中定義模型-檢視-控制器概念：

模型

• 模型充當檢視和應用程式資料之間的橋樑。
• 模型用於獲取來自檢視的請求並根據使用者的輸入進行響應。
• 模型不依賴於類。

檢視

• 檢視負責管理向用戶顯示的資訊。
• 檢視基於模型。

控制器

• 控制器負責接收裝置提供的輸入，並與模型/檢視通訊以觸發正確的操作。

• 控制器基於模型。

SAP UI5 以單個檔案的形式提供檢視和控制器：

• sap.ui.core.mvc.XMLView
• sap.ui.core.mvc.JSView
• sap.ui.core.mvc.Controller
• sap.ui.core.mvc.JSONView

JSON 模型

• JSON 模型是客戶端模型，用於小型資料集。
• JSON 模型支援雙向繫結。資料繫結概念在本教程的後半部分提到。
• JSON 模型可用於將控制元件繫結到 JavaScript 物件資料。

XML 模型

• XML 模型可用於將控制元件繫結到 XML 資料。
• XML 也是客戶端模型，因此僅用於小型資料集。
• XML 模型不提供任何用於基於伺服器的分頁或增量載入的機制。
• XML 模型也支援雙向資料繫結。

SAP UI5 - 檢視

檢視使用 SAP 庫定義如下：

• 帶有 HTML 的 XML，混合或獨立：庫 - sap.ui.core.mvc.XMLView
• JavaScript：庫 - sap.ui.core.mvc.JSView
• JSON：庫 - sap.ui.core.mvc.JSONView
• HTML：庫 - sap.ui.core.mvc.HTMLView

JavaScript 檢視示例

Sap.ui.jsview(“sap.hcm.address”, {
   getControllerName: function() {
      return “sap.hcm.address”;
   },
   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({ text: “Hello” });
      oButton.attachPress(function() {
         oController.Hello();
      })
      Return oButton;
   }
});

HTML 檢視示例

<template data-controller-name = ”sap.hcm.address’>
   <h1>title</h1>
   <div> Embedded html </div>
   <div class = ”test” data-sap-ui-type = ”sap.ui.commons.Button”
      Id = ”Button1” data-text =  ”Hello” Data-press = ”sayHello”>
   </div>
</template>

類似地，您可以建立從 sap.ui.core.mvc.JsonView 派生的 JSON 檢視。

{
   “type”:”sap.ui.core.mvc.JsonView”,
   “controllerName”:”sap.hcm.address”,
   ……………………….
   …………………...
   …………………….
}

檢視型別的比較

下表列出了與 MVC 概念相關的關鍵功能以及不同檢視型別關於這些功能的比較。

SAP UI5 - 開發者工作室

SAPUI5 Developer Studio 提供簡化 UI5 開發過程的工具。以下是其功能：

• 控制元件開發嚮導
• 專案建立嚮導
• 檢視/控制器建立嚮導

您可以使用連結 https://support.sap.com/software.html. 從 SAP Marketplace 下載它。搜尋 UI Add-on 1.0 for NetWeaver。

轉到軟體下載並輸入您的 ID 和密碼。然後，轉到支援包和補丁。搜尋 sapui5 tools ide plugin 1.00。

SCN 還提供 SAPUI5 框架的試用版。您可以訪問此連結 http://scn.sap.com/community/developer-center/front-end

SAP UI5 - 建立 UI5 專案

步驟 1 - 要在 UI5 developer Studio 中建立一個新專案，請轉到 File → New → Project。

步驟 2 - 輸入專案名稱、目標裝置和“建立初始檢視”。

步驟 3 - 在下一個視窗中輸入檢視名稱和檢視型別，然後單擊 Next。

步驟 4 - 在最後一個視窗中，您將看到專案摘要。它向您顯示專案屬性。單擊 Finish 按鈕建立專案。

步驟 5 - 系統將提示您切換到 Java EE 透檢視。單擊 Yes，它將開啟一個新的 UI5 專案視窗，其中包含一個初始檢視 - JSView。

步驟 6 - 現在要向此檢視新增 Shell，您可以使用庫 sap.ui.ux3.Shell()。

步驟 7 - 由於 Shell 不是 sap.ui.commons 的一部分，因此您需要新增 sap.ui.ux3 庫。您可以向 data-sap-ui-libs 新增其他庫。

要執行應用程式，您有兩個選項：

• 在伺服器上執行
• 在 webapp 上執行

推薦在伺服器上執行，因為它具有固定的埠，並且不像在 webapp 上執行那樣使用一次性隨機埠。

SAP UI5 ─ 配置

如下表所示，您可以在 SAP UI5 中定義各種配置屬性：

核心功能

SAP UI5 中的核心功能如下：

• Sap.ui.getCore() - 用於獲取核心例項。

• Sap.ui.getCore().byid(id) - 用於獲取使用 id 建立的 UI5 控制元件的例項。

• Sap.ui.getCore().applyChanges() - 用於立即執行並呈現 UI5 控制元件的更改。

• jQuery.sap.domById(id) - 用於獲取任何具有 id 的 HTML 元素。如果存在具有 id 的 UI5 控制元件，則返回的元素是 UI5 控制元件的最頂層 HTML 元素。

• jQuery.sap.byId(id) - 用於返回具有指定 Id 的 DOM 元素的 jQuery 物件。

SAP UI5 - 控制元件

在開發 UI5 應用程式時，您可以使用不同型別的 UI 控制元件。這些控制元件允許您在 UI5 應用程式中新增按鈕、表格、影像、佈局、組合框和各種其他控制元件。

常見的控制元件型別包括：

• 簡單控制元件
• 複雜控制元件
• UX3 控制元件
• 對話方塊
• 佈局

影像控制元件

Var image = new sap.ui.commons.Image();
Image.setSrc(“Image1.gif”);
Image.setAlt(“alternat.text”);

組合框

您可以使用組合框提供預定義的條目。

屬性 - 專案、selectedKey

Var oComboBox2 = new sap.ui.commons.ComboBox (“ComboBox”,{
   Items:{path:”/data”,
      Template:oItemTemplate, filters:[oFilter]},
   Change: function(oEvent){
      Sap.ui.getCore(). byId(“field”).setValue(
         oEvent.oSource.getSelectedKey());
   }
});

簡單按鈕控制元件

使用 attachPresss 為推送操作分配事件處理程式。

Var oButton = new sap.ui.commons.Button ({text : “Click”,
   Press: oController.update
});

自動完成控制元件

自動完成輸入的值。

Var uiElement = new sap.ui.commons.AutoComplete({
   Tooltip: ”Enter the product”,
   maxPopupItems: 4
});
For (var i = 0; i<aData.lenght; i++){
   uiElement.addItem(new sap.ui.core.ListItem(
      {text: aData[i].name}));
}

表格控制元件框

它派生自 sap.ui.table，每個表都包含列。

Var oTable = new sap.ui.table.Table({
   Columns: [
      New sap.ui.table.Column({
         Label: new sap.ui.commons.lable({ text: “First Column”}),
         Template: new sap.ui.commons.TextView({ text: “{Firstcolumn}” }),
         Width: “120px”
      })

SAP UI5 - 資料繫結

在 SAP UI5 中，資料繫結概念用於透過將資料與儲存應用程式資料的控制元件繫結來自動更新資料。使用資料繫結，您可以將文字欄位、簡單按鈕等簡單控制元件繫結到應用程式資料，並在有新值時自動更新資料。

使用雙向資料繫結，當繫結控制元件的值發生變化時，應用程式資料也會更新。值可以透過不同的方法更改，例如使用者輸入等。

在 SAP UI5 中，可以使用不同的資料模型進行資料繫結。這些資料模型支援不同的功能：

JSON 模型

JSON 模型用於將 JavaScript 物件繫結到控制元件。此資料模型是客戶端模型，建議用於小型資料集。它不提供任何伺服器端分頁或載入機制。

主要功能包括：

• 用於資料繫結的 JSON 模型支援 JavaScript 表示法格式的資料。
• 它支援雙向資料繫結。

建立模型例項：

Var oModel = new sap.ui.model.json.JSONModel(dataUrlorData);

XML 模型

XML 資料繫結的 XML 模型允許您將控制元件繫結到 XML 資料。它用於客戶端物件和小資料集。它不提供任何伺服器端分頁或載入機制。

主要功能包括：

• XML 資料繫結的 XML 模型支援 XML 資料。
• 它也支援雙向資料繫結。

建立模型例項：

Var oModel = new sap.ui.model.xml.XMLModel(dataUrlorData);

OData 模型

OData 模型是伺服器端模型，因此所有資料都存在於伺服器端。客戶端只能看到行和欄位，您無法在客戶端使用排序和篩選。需要向伺服器傳送此請求才能完成這些任務。

OData 模型中的資料繫結是單向的，但您可以使用實驗性寫入支援啟用雙向繫結。

主要功能包括：

• OData 資料繫結的 OData 模型支援符合 OData 規範的資料。
• 此資料模型允許您建立 OData 請求並處理響應。
• 它支援實驗性雙向繫結。

建立模型例項：

Var oModel = new sap.ui.model.odata.ODataModel (dataUrl [,useJSON, user, pass]);

分配模型

您可以使用 setModel 方法將模型分配給特定的控制元件或核心。

Sap.ui.getcore().setModel(oModel);

將模型繫結到檢視：

Var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewname:”view name”});
myView.setModel(oModel);

將模型繫結到控制元件：

Var oTable = sap.ui.getCore().byId(“table”);
oTable.setModel(oModel);

您可以將控制元件的屬性繫結到模型屬性。您可以使用 bindproperty 方法將模型的屬性繫結到控制元件。

oControl.bindProperty(“controlProperty”, “modelProperty”);
or by using below methodvar
oControl = new sap.ui.commons.TextView({
   controlProperty: “{modelProperty}”
});

聚合繫結

您可以使用聚合繫結來繫結值集合，例如將多行繫結到表。要使用聚合，您必須使用充當模板的控制元件。

您可以使用 bindAgregation 方法定義聚合繫結。

oComboBox.bindaggregation( “items”, “/modelaggregation”, oItemTemplate);

SAP UI5 - 設計模式

設計模式是 SAP UI5 開發中一個新的術語，當我們談論 SAP 開發或 SAP Fiori 系統時。SAP 正在努力尋找新的設計模式，以支援使用 UI5 SDK 在 SAP 系統中進行開發。

SAP 釋出了不同型別的設計模式：

主-詳情

這是應用程式繫結的第一步，並由 SAP UI5 的 SplitApp 控制元件支援。此設計模式支援內容列表，並允許引導選擇和詳細檢視。

主-主-詳情

此設計模式在詳情部分顯示事務的詳情。

示例：您正在網上訂購，並且希望看到一個確認頁面，該頁面顯示您正在購買的內容並顯示交易的詳細資訊以及詳細檢視。

全屏

此設計模式主要推薦用於顯示圖表、圖片資料和各種型別的圖形。

多流程

當您使用複雜的應用程式流程並且需要使用所有設計模式來構建工作應用程式時，推薦使用此設計模式。

SAP UI5 - 模組化

在用於大型 JavaScript 應用程式的 SAPUI5 開發中，UI5 框架提供了對模組化的內建支援。模組化概念允許您將應用程式拆分為較小的部分，並且可以在執行時將它們組合在一起。這些較小的應用程式部分稱為模組。

您可以透過呼叫 query jQuery.sap.declare 函式來宣告您自己的 JavaScript 模組，這用於跟蹤模組名稱和已載入的模組。

要載入模組，您必須使用 jQuery.sap.require

示例

<script>
   jQuery.sap.require(“sap.ui.commons.MessageBox”);
   ………………………
</script>

當需要模組 jQuery.sap.require 且該模組未載入時，它會自動載入。它呼叫 declare 方法，因此當呼叫 require 時，它知道該模組已載入。

SAP UI5 - 本地化

SAP UI5 基於 Java 平臺支援本地化概念。

識別語言程式碼：為了識別語言，框架使用字串型別的語言程式碼。

資源包：資源包檔案是 Java 屬性檔案，包含鍵/值對，其中值是依賴於語言的文字，鍵與語言無關，應用程式使用它來識別和訪問相應的​​值。

資源包是*.properties檔案的集合。所有檔案都使用相同的基名稱（標識資源包的字首）、可選後綴（標識每個檔案中包含的語言）和固定的 .properties副檔名命名。

語言字尾是根據舊的 JDK 區域設定語法形成的。按照約定，應該存在一個沒有語言字尾的檔案，其中包含開發人員語言中的原始未翻譯文字。如果找不到更合適的語言，則使用此檔案。

資源包 sap.ui.commons.message_bundle 包含以下檔案：

• sap.ui.commons.message_bundle.properties：此檔案包含來自開發人員的原始文字，它確定鍵集。

• sap.ui.commons.message_bundle_en.properties：此檔案包含英文文字。

• sap.ui.commons.message_bundle_en_US.properties：此檔案包含美式英語文字。

• sap.ui.commons.message_bundle_en_UK.properties：此檔案包含英式英語文字。

在應用程式中使用本地化文字

SAPUI5 提供了兩種在應用程式中使用本地化文字的選項：jQuery.sap.resources 模組和資料繫結。

以下程式碼用於獲取給定語言的資源包：

jQuery.sap.require(“jquery.sap.resources”);
var oBundle = jQuery.sap.resources({url ; sUrl, locale:sLocale});

以下程式碼用於訪問資源包中的文字：

Var sText = oBundle.getText(sKey);

以下程式碼用於獲取資源的 URL：

Var sUrl = sap.ui.resource(“sap.ui.table”,”messagebundle.properties”);

SAP UI5 - 記事本控制元件

控制元件用於定義外觀和螢幕區域。它包含諸如寬度和文字之類的屬性。這些屬性用於修改外觀或更改控制元件顯示的資料。您可以建立聚合控制元件或關聯控制元件。

控制元件的關聯控制元件定義為鬆散相關的控制元件，它們不是子控制元件或主控制元件的一部分。控制元件用於觸發定義明確的事件。

SAPUI5 中的控制元件可以直接使用工具或 JavaScript 檔案建立。使用 extend() 方法建立的控制元件也稱為記事本控制元件。

以下程式碼用於使用 Extend 方法定義控制元件：

Sap.ui.core.control.extend (sname, oDefinition);

傳遞給此控制元件的引數：

• 控制元件的名稱
• 控制元件的定義

控制元件的定義包含有關控制元件 API、聚合、事件等的 資訊以及實現方法。

您還可以建立自定義控制元件。自定義控制元件的定義可以包含公共和私有方法、元資料和渲染方法等。

metadata:{
   properties: {},
   events: {},
   aggregations: {}
},

publicMethod: function() {},
_privateMethod: function() {},
init: function() {}
onclick: function(e) {},
renderer: function(rm, oControl) {}

建立一個從 Button 繼承的新控制元件：

Sap.ui.commons.Button.extend (sname, oDefinition);

控制元件定義中的元資料由控制元件屬性、事件和聚合的物件組成。

屬性

• 型別：控制元件屬性的資料型別
• 字串：字串屬性的字串
• 數字屬性的整數或浮點數
• 整數陣列的 Int[]
• 字串陣列的 String[]

事件

事件僅由事件名稱定義。您通常將空物件傳遞給事件。應用程式使用 enablePreventDefault 標誌來中斷事件。

Events: {
   Logout:{},
   Close: {
      enablePreventDefault : true
   }
}

SAP UI5 - 擴充套件應用程式

您可以擴充套件遠端或在 Web IDE 中的 UI5 應用程式。要建立新的擴充套件專案，您應該遠端或在 IDE 中擁有一個應用程式。

步驟 1：要建立新專案，請轉到檔案→擴充套件專案。

步驟 2：選擇工作區以選擇要用作原始應用程式的所需 SAP Fiori 應用程式。

步驟 3：選擇應用程式後，擴充套件專案名稱欄位將填充原始應用程式的名稱以及字尾副檔名。您可以更改此名稱→下一步

步驟 4：如有必要，選中在可擴充套件性窗格中開啟擴充套件專案複選框，以便在專案生成後自動開啟可擴充套件性窗格。

步驟 5：單擊完成。

同樣，您還可以擴充套件駐留在 SAP HANA Cloud 平臺上的應用程式。請按照以下步驟操作。

步驟 1：要建立新專案，請轉到檔案→擴充套件專案。

步驟 2：選擇開始→遠端→SAP HANA Cloud Platform→從 SAP HANA Cloud Platform 對話方塊中選擇應用程式。

步驟 3：在下一個視窗中，您必須輸入 SAP HANA Cloud Platform 帳戶、使用者名稱和密碼。

步驟 4：選擇獲取應用程式並搜尋您要擴充套件的應用程式。

步驟 5：選擇所需的應用程式→確定。擴充套件專案名稱欄位將自動填充到嚮導中。如有必要，您可以編輯此名稱。

步驟 6：單擊下一步。選擇完成以確認並建立您的擴充套件專案。

SAP UI5 - 主題

UI 主題設計器是一個基於瀏覽器的工具，允許您透過修改 SAP 提供的主題模板之一來開發主題。

示例：您可以更改配色方案或新增您公司的徽標。該工具在您設計時提供主題的即時預覽。

將您的企業品牌和外觀應用於使用 SAP UI 技術構建的應用程式。UI 主題設計器是一個基於瀏覽器的工具，用於跨主題場景。使用它可以輕鬆地透過修改 SAP 提供的主題模板之一來構建您的企業標識主題。例如，您可以更改配色方案或新增您公司的徽標。該工具面向不同的使用者群體，包括開發人員、視覺設計師和管理員。

支援的平臺

• SAP NetWeaver 作為 ABAP（透過 UI Add-On 1.0 SP4）
• SAP NetWeaver Portal（7.30 SP10 和更高版本）
• SAP HANA Cloud（計劃中）
• SAP NetWeaver Portal（7.02 計劃中）

主要功能和優勢

• 基於瀏覽器的圖形化所見即所得編輯器：更改主題引數的值，並立即檢視它如何影響所選預覽頁面的視覺化。

• 內建預覽頁面：選擇內建預覽頁面以檢視自定義主題應用於應用程式時的外觀：

  • 應用程式預覽（示例：採購訂單審批、SAP Fiori Launchpad）

  • 控制元件預覽

• 不同級別的主題：

  • 快速主題（基本的跨技術主題設定）

  • 專家主題（特定於技術的主題設定）

  • 手動 LESS 或 CSS 編輯

• 可重複使用的調色盤：指定一組引數，其中包含定義企業品牌的主要顏色值。

• 跨技術主題：建立一個一致的主題，該主題適用於各種 SAP UI 客戶端和技術：

  • SAPUI5 標準庫（包括 SAP Fiori 應用程式和 SAP Fiori Launchpad）

  • 統一渲染技術（例如 Web Dynpro ABAP 和 Floorplan Manager）

  • SAP NetWeaver業務客戶端

如何在SAP Fiori中呼叫主題設計器？

步驟1 − 登入到SAP Fiori前端伺服器。您可以使用事務程式碼：主題設計器或使用如下截圖所示的快捷方式登入。

步驟2 − 登入後，您將擁有SAP為主題設計器提供的全部預設模板。選擇預設主題並點選“開啟”。

步驟3 − 輸入Fiori Launchpad連結和應用程式名稱，然後點選“新增”。

步驟4 − 在螢幕面板的右側，您可以選擇顏色、字型、影像和其他屬性。您可以編輯顏色，如下面的截圖所示。

步驟5 − 要儲存主題，您可以點選如下截圖所示的儲存圖示。您還可以選擇“儲存並構建”選項。

點選“儲存並構建”後，它將開始儲存，完成後，您將收到一條確認訊息 - “儲存並構建完成”。

步驟6 − 要獲取此自定義主題的連結，請使用如下截圖所示的事務程式碼 −

步驟7 − 選擇您建立的主題，然後點選“資訊”選項卡。

步驟8 − 使用Ctrl+Y複製螢幕上的URL並記下它。

支援的主題

這些是UI5附帶的預設主題 −

• 藍色水晶
• 金色反射
• 移動視覺標識
• 高對比度黑色

圖表型別

sap.viz.ui5圖表庫中有多種圖表型別可用於表示業務資料。以下是幾種CVOM圖表型別：柱狀圖、氣泡圖、折線圖、餅圖等。

SAP UI5 - 移動端

SAP UI5應用程式可在iPad和智慧手機等不同的移動裝置上執行。但是，為了獲得更好的使用者體驗，您需要控制外觀、觸控互動以及各種其他UI引數。

UI5包含一個支援移動裝置應用程式開發並支援所有關鍵概念（如資料繫結、MVC等）的控制元件庫sap.m。

主要功能

• 支援Android、iOS、BlackBerry平臺
• 包含40個控制元件
• WebKit瀏覽器 - Google Chrome
• UI5概念 - MVC、本地化、模組化等

SAP UI5 - 在Web IDE中建立專案

本章將學習如何在Web IDE中建立專案。讓我們一步一步來。

步驟1 − 要啟動新專案，請轉到“檔案”→“新建”→“專案”。

步驟2 − 輸入專案的名稱。在下一個視窗中，選擇模板。

步驟3 − 選擇模板SAPUI5移動應用程式→下一步

步驟4 − 下一步是選擇資料連線。選擇服務URL→選擇

步驟5 − 下一步，您需要執行模板自定義。

步驟6 − 點選“下一步”後，您將看到“完成”按鈕。

點選“完成”後，您可以看到建立的新專案，該專案具有UI應用程式的預設結構。它包含檢視、模型和專案名稱。