UI5-文檔-2.3-使用SAPUI5工具為Eclipse開發應用程序

本文轉載自查看原文 2018-12-10 10:46 818 SAP-UI5

用於為簡單用例開發應用程序。用於Eclipse的SAPUI5應用程序開發工具提供向導來支持您以一種簡單的方式創建應用程序。使用application project向導，將自動創建包含視圖和控制器的必要應用程序框架。

請注意：我們只建議有經驗的開發人員使用此開發環境，並且只針對簡單的用例。對於所有其他目的，請使用SAP Web IDE。有關更多信息，請參見 App Development Using SAP Web IDE。

本節內容：

Installing SAPUI5 Tools for Eclipse

Using SAPUI5 Tools for Eclipse

1.為Eclipse安裝SAPUI5工具

　請注意：在開始安裝之前，請確保已經安裝了所需的軟件版本，並下載了相應的軟件組件。根據您所使用的產品，對於所需的軟件、軟件組件和安裝步驟，有不同之處和具體細節。

　安裝和運行SAPUI5工具所需的軟件

　要安裝和運行SAPUI5開發工具，必須安裝以下軟件：

　• Java運行時環境(JRE): JRE 1.8是必需的。

　• Eclipse版本:建議使用Eclipse Oxygen(還支持Eclipse Photon)。

　▪ 操作系統:Microsoft Windows 7(32位或64位版本)、8、8.1或10

　▪ 瀏覽器: Browser and Platform Support.

　SAPUI5工具的安裝過程

　要安裝用於Eclipse的SAPUI5工具，只需遵循https://tools.hana.ondemand.com/#sapui5中針對Eclipse的SAPUI5工具部分中的說明即可。

2.為Eclipse使用SAPUI5工具

Eclipse的SAPUI5應用程序開發工具提供向導，以一種簡單的方式支持您創建SAPUI5應用程序。使用SAPUI5應用程序項目向導，將自動創建包含視圖和控制器的必要應用程序框架。

創建SAPUI5應用程序

　　SAPUI5tools支持您根據MVC創建應用程序。在本節中，我們將通過一個簡單的示例指導您。您將創建一個SAPUI5應用程序項目，該項目包括一個控件、控制器中的一個方法和一個附加視圖。

公用程式

　　使用Eclipse，您可以使用JavaScript開發的實用程序。此外，SAPUI5還提供了模板和代碼片段。

JavaScript代碼完成

　　Eclipse JavaScript開發工具(JSDT)提供了一個編輯器，它可以解析腳本並提供代碼完成功能。代碼完成的核心庫是自動可用的。

本節內容：

Create an SAPUI5 Application Project

Add a Control to Your View

Implement a Method in the Controller

Create an Additional View

Integrate a New View

JavaScript Code Completion

Linking your Eclipse Editor to the Demo Kit

Use JavaScript and XML Templates

SAPUI5 Snippets

Running an App in the Application Preview

2.1Create an SAPUI5 Application Project

要創建SAPUI5應用程序項目，您必須在Eclipse安裝中安裝了SAPUI5應用程序開發特性。

創建過程：

　　a. 通過選擇File->New->Other...->SAPUI5 Application Development->Application Project->Next，在Eclipse中啟動SAPUI5應用程序項目向導。

　　b.輸入以下項目相關數據：

　　　▪ 輸入項目名稱(必須填寫)。

　　　▪ 輸入一個位置(可選，從當前工作區預填充)。

　　　▪ 選擇一個庫:“sa .m”(移動目標設備)或“sa .ui.commons”(桌面目標設備)。

　　　▪ 選擇“創建初始視圖”。

　　　▪ 稍后還可以使用SAPUI5應用程序視圖向導添加視圖。

　　　▪ 選擇Next。

　　c.輸入以下視圖相關數據：　　

　　▪ 選擇要在其中創建視圖的文件夾。

　　▪ 為視圖輸入惟一名稱。

　　▪ 選擇開發范式Development Paradigm。

　　d.選擇Finish。

總結：

　　完成向導后，系統將執行以下步驟：

　　▪ 創建了一個新的動態Web項目。所有相關文件都在WebContent文件夾中創建。

　　▪ 已經預創建的文件index.html，其中包含桌面目標設備引導中的sap.ui.commons庫和sap_belize主題，移動目標設備引導中的sap.m庫和sap_mvi主題。這取決於您在步驟2中所做的選擇。

　　▪ 在WEB-INF文件夾中，創建文件web.xml，其中包含用於資源處理和SimpleProxyServlet使用的設置。

　　▪ 已安裝的SAPUI5 UI lib插件將自動添加到Java構建路徑和部署程序集。

　　▪ 類路徑容器(如果可用)被自動添加到JavaScript包含路徑。

　　▪ index.html頁面在標准編輯器中打開。

　　▪ 在index.html文件JavaScript代碼塊，代碼完成是可用的，查看JavaScript Code Completion.

　　▪ J2EE透視圖將自動加載

　　▪ 如果您在SAPUI5應用程序項目向導的第一頁上選擇了Create a Initial View選項，那么將創建一個視圖和一個視圖控制器，並將調用該視圖的代碼添加到index.html文件。

　　相關信息：

JavaScript Code Completion

Use JavaScript and XML Templates

SAPUI5 Snippets

Linking your Eclipse Editor to the Demo Kit

2.2Add a Control to Your View

在SAPUI5應用程序項目中，構建應用程序的第一步是向視圖中添加控件，並實現一個方法來對用戶交互進行響應。在這種情況下，您將創建一個按鈕並實現一個函數，以便在用戶按下按鈕時進行響應。

過程：

　　若要向視圖添加控件，請根據視圖的類型添加以下代碼:

　　▪ 在JS視圖中，向createContent函數添加以下內容：　　

var aControls = [];
       var oButton = new sap.ui.commons.Button({
         id : this.createId("MyButton"),
         text : "Hello JS View"
       });
       aControls.push(oButton.attachPress(oController.doIt));
       return aControls;

　　▪ 在HTML視圖中，向template標簽添加以下內容：

<div data-sap-ui-type="sap.ui.commons.Button" id="MyButton"
  data-text="Hello HTML View" data-press="doIt">
</div>

　　▪ 在XML視圖中，向core標簽添加以下代碼：

<Button id="MyButton" text="Hello XML View" press="doIt"/>

　　▪ 在JSON視圖中，向content函數添加以下內容：

"Type":"sap.ui.commons.Button",
      "id":"MyButton",
      "text":"Hello JSON View",
      "press":"doIt"

　　一個按鈕被添加到您的視圖中，當用戶按下該按鈕時將觸發一個事件。

　　下一步：

　　在這些視圖類型中調用的doIt方法是在控制器中實現的：Implement a Method in the Controller。

2.3Implement a Method in the Controller

所有與用戶界面不直接相關的功能都應該在控制器中處理，以確保UI和數據之間的清晰分離。在本例中，您添加了一個方法來處理事件，該方法被附加到一個按鈕上。

先決條件：您已經創建了一個按鈕，描述如下: Add a Control to Your View。

創建過程：

　　為處理此事件，向控制器添加以下功能：

doIt : function(oEvent) { alert(oEvent.getSource().getId() + " does it!"); }

2.4Create an Additional View

SAPUI5應用程序視圖只能為使用SAPUI5應用程序向導創建的SAPUI5應用程序項目創建，而不能為其他類型的項目創建。

環境：

　　▪ SAPUI5應用程序視圖名需要在項目文件夾中是唯一的。

　　▪ SAPUI5應用程序視圖的指定文件夾需要是WebContent/<application name>或子文件夾。

創建過程：

　　1.選擇New->Other... ->SAPUI5 Application Development ->View，打開SAPUI5 Application View 文件向導。
　　

　　2.填寫所需數據

　　▪ 選擇要在其中創建視圖的SAPUI5應用程序項目。

　　▪ 選擇要存儲視圖的文件夾(default is WebContent/<application name>).

　　▪ 輸入視圖的名稱。

　　▪ 選擇您想要開發視圖的開發范例。

結論：

　　完成向導后，系統將在指定文件夾中創建視圖。文件名后綴表示開發范例：

<viewname>.view.js for JavaScript views
<viewname>.view.xml for XML views
<viewname>.view.json for JSON views
<viewname>.view.html for HTML views

　　如果對應的index.html文件在引導過程中包含sap.m庫，也就是說，如果為移動目標設備創建了SAPUI5應用程序項目，那么該視圖包含用於實例化移動頁面控件sap.m. page的代碼。系統還創建一個控制器文件<viewname>.controller.js與草稿編碼。對於JavaScript視圖，代碼補全是可用的，請參見JavaScript Code Completion。

　　請注意：如果重命名視圖或控制器文件，或者將它們移動到另一個文件夾，則需要手動調整視圖和控制器以及視圖使用位置中的編碼。

　　相關信息：Views

2.5Integrate a New View

要集成新視圖，可以將其添加到index.html或將其嵌套到另一個視圖中。

先決條件：如果為現有的SAPUI5應用程序項目創建新視圖，則需要手動調用該視圖。

創建過程：

　　若要調用視圖，請從以下選項中選擇:

　　▪ 直接將新視圖嵌入index.html頁面

　　▪ 所有視圖都可以獨立於視圖類型嵌套。每種視圖類型的行為都與任何SAPUI5控件類似。viewName屬性定義了嵌入哪些視圖。要嵌套一個視圖，按照給定的例子進行:

　　對於XML視圖類型：　　

<mvc:View controllerName="sap.hcm.Address" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
   <Panel>
      <mvc:JSView id="myJSView" viewName="sap.hcm.Bankaccount" />
   </Panel>
<core:View>

　　對於HTML視圖，嵌套視圖如下所示：　　

<template data-controller-name= "example.mvc.test" >
  <div data-sap-ui-type= "sap.ui.core.mvc.HTMLView" id= "MyHTMLView" data-view-name= "example.mvc.test2" ></div>
  <div data-sap-ui-type= "sap.ui.core.mvc.JSView" id= "MyJSView" data-view-name= "example.mvc.test2" ></div>
  <div data-sap-ui-type= "sap.ui.core.mvc.JSONView" id= "MyJSONView" data-view-name= "example.mvc.test2" ></div>
  <div data-sap-ui-type= "sap.ui.core.mvc.XMLView" id= "MyXMLView" data-view-name= "example.mvc.test2" ></div>
</template>