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 Application Server 7.3x 的 SAP NetWeaver 使用者介面附加元件

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

Development Kit

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

要構建 UI5 應用程式,您可以下載 Eclipse 的 SAP UI5 開發人員工具。下載後,您可以解壓縮檔案並部署到 Web 伺服器上。對於 ABAP,您可以安裝用於 SAP NetWeaver 的 UI 附加元件,其中還包括 UI5 Theme Designer。

SAP UI5 的先決條件

要安裝和更新用於 HTML5 的 UI5 開發工具包,您應該滿足以下先決條件 -

Eclipse 平臺 Mars (4.5)
作業系統 Windows 作業系統 (XP、Vista、7 或 8/8.1)
Java 執行時環境 JRE 版本 1.6 或更高版本,32 位或 64 位
SAP GUI

僅在安裝 SAP UI5 ABAP 儲存庫團隊提供程式時相關

  • 對於 Windows 作業系統:適用於 Windows 7.30/7.40 的 SAP GUI
微軟

僅在安裝 SAP UI5 ABAP 儲存庫團隊提供程式時相關

對於 Windows 作業系統:需要與後端系統通訊的 DLL VS2010

注意:根據您的 32 位或 64 位 Eclipse 安裝,安裝 x86 或 x64 變體。

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

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

Java SE Development Kit

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

Java SE

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

Eclipse IDE

步驟 4 - 解壓縮檔案,如下面的螢幕截圖所示。

Extra Compressed

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

Eclipse Data Created

步驟 6 - 要安裝 SAPUI5 工具,請轉到 Eclipse → 幫助 → 安裝新軟體。

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

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

Ondemand

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

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

License Agreement SAP Development Tools

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

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

SAP UI5 Developer

步驟 11 - 啟動 Eclipse 環境。轉到幫助 → 安裝新軟體。

IDE WEB

步驟 12 - 單擊新增 → 本地。

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

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

Features

步驟 15 - 在安裝過程中選擇“聯絡所有更新站點”對話方塊以查詢所需的軟體。

Contact Updates

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

Java EE

步驟 17 - 您可以透過 Eclipse 選單檔案 → 新建 → 其他(在底部)建立一個新的 SAPUI5 應用程式專案來驗證安裝。選擇 SAP UI5 應用程式開發資料夾並展開以建立新專案。

Overview

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

Project Name

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

Create New View

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

Development Paradigm

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

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

WAR Export

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

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

廣告