SAP Fiori - UI5 概念

---

---

SAP UI5 是一個基於 JavaScript 的框架，用於設計多平臺業務應用程式。它支援各種資料模型和檢視，適用於桌面和移動應用程式。SAP UI5 基於開放的 Ajax，並且可以與 JavaScript 庫結合使用。

SAP UI5 最初名為 Phoenix，後來在 2011 年更名為 SAP UI5。

關鍵 UI 技術

• Web Dynpro ABAP 和 Floorplan Manager 工具可用於建立新的應用程式。

• SAP UI5 和 UI5 應用程式開發工具可用於更改、調整或開發新的應用程式。

• SAP Dynpro 用於包含螢幕 Persona 以進行 GUI 最佳化

SAP UI5 的特性

SAP UI5 的特性如下：

• 精心設計的模型，易於使用。
• 效能最佳化，符合 SAP 標準
• 支援 Ajax 開源
• 包含 JavaScript 庫
• 可擴充套件的 UI 元件模型
• 基於開放標準，如 Ajax、JavaScript、CSS 和 HTML 5。

關鍵元件 – 客戶端和伺服器 SAP UI5 -

客戶端

• JavaScript 庫、影像檔案
• 核心 JavaScript 檔案
• 測試套件 HTML 和 JavaScript 檔案

伺服器

• 應用程式開發工具
• 主題生成器
• Java 中的資源處理器
• 控制元件開發工具

UI5 瀏覽器支援

SAP UI5 支援所有主要的 Web 瀏覽器和最新版本，如 IE、Mozilla Firefox、Google Chrome 和 Safari。

SAP UI5 架構

SAP UI5 架構包括核心 JavaScript 框架（包括 jQuery）。它包含擴充套件庫、控制元件和主題。它具有可選的伺服器元件。

UI5 控制元件庫

常見的 SAP UI5 控制元件庫如下所示。

• Sap.ui.commons - 包括文字欄位、按鈕、字型等控制元件。

• Sap.ui.table - 包括表格控制元件，如行、列等。

• Sap.ui.ux3 - 包括 UX3 模式的屬性。

• Sap.m - 包括適用於移動裝置（如手機和平板電腦）的控制元件。

SAP UI5 和可擴充套件性

• SAP UI5 支援應用程式開發人員的可擴充套件性，並允許新增基於 JavaScript、HTML 和 UI5 的頁面。

• 它允許編寫新的 UI 庫和新的控制元件。

• 為 UI5 核心編寫外掛。

• 從現有的 UI5 控制元件建立控制元件。

• 包含其他 JavaScript 庫

模型-檢視-控制器概念

MVC 包含三個概念。檢視可以使用不同的語言（如 JavaScript、HTML）定義。控制器用於繫結檢視，而模型與檢視一起使用。

檢視 - 可以使用 XML 與 HTM、混合或獨立定義

• XML - (sap.ui.core.mvc.xmlview)

• JavaScript - (sap.ui.core.mvc.JSView)

• JSON - (sap.ui.core.mvc.JSONView)

• HTML - (sap.ui.core.mvc.HTMLView)

控制器 - 控制器繫結到一個檢視。它也可以與多個檢視一起使用

模型 - 資料繫結可以在檢視上使用。

不同型別檢視的比較

表格中給出了不同型別檢視的比較。

SAP UI5 資料繫結

資料繫結用於將 UI5 控制元件繫結到資料來源以儲存應用程式資料。它允許在應用程式資料發生更改時自動更改控制元件。

當您使用雙向資料繫結時，只要繫結控制元件的值發生更改，應用程式資料就會更新。

資料繫結支援簡單控制元件（如測試按鈕、列表型別控制元件等）的繫結。

資料繫結模型型別

SAP UI5 支援三種類型的模型實現：

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

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

• OData 模型 - 它建立 OData 請求並相應地處理響應。它僅支援符合 OData 的資料。它支援實驗性雙向資料繫結。