UI5-文檔-2.2-使用SAP Web IDE開發應用程序

時間 2020-05-10

標籤 ui5 文檔 2.2 使用 sap web ide 開發應用程序欄目 HTML 简体版

原文原文鏈接

SAP Web IDE是一種基於Web的開發環境，它是爲使用最新的創新開發SAPUI5複雜的應用程序、開發和擴展SAP Fiori應用程序、開發移動混合應用程序以及使用插件和模板擴展SAP Web IDE而優化的。html

關鍵用例:web

　　▪ 開發新的SAP Fiori應用和SAPUI5應用json

　　▪ 擴展SAP Fiori應用程序bootstrap

　　▪ 開發SAPUI5移動混合應用(HAT插件)數組

　　▪ 使用新的插件和模板擴展SAP Web IDE瀏覽器

能夠經過SAP雲平臺訪問SAP Web IDE的試用版。服務器

有關SAP Web IDE的更多信息，請參見SAP幫助門戶上的SAP Web IDE文檔: https://help.sap.com/viewer/p/SAP_Web_IDE。app

本節內容：async

Get a Trial Account and Access SAP Web IDE編輯器

Start SAP Web IDE

Create a neo-app.json Project Configuration File

Create an index.html File

Run the App

Create a Northwind Destination

1.得到一個試用賬戶並訪問SAP Web IDE

　建立SAP雲平臺試用賬戶的步驟：

　　若是您沒法訪問SAP Web IDE，則能夠建立一個免費賬戶。要建立一個賬戶，只需在 https://account.hanatrial.ondemand.com/註冊一個SAP雲平臺試用賬戶，而後登陸便可。

　　登陸後，在SAP雲平臺駕駛艙的導航欄中選擇Services，並經過選擇SAP Web IDE tile在SAP Web IDE上打開詳細信息。

　　選擇「轉到服務」將您引向您的我的SAP Web IDE。

　　請注意：您能夠將此連接添加到書籤，以便稍後訪問SAP Web IDE。

2.啓動SAP Web IDE

　SAP Web IDE中的初始步驟

　　▪ 打開SAP Web IDE並等待初始化完成。

　　當您第一次啓動它時，您將看到一個主屏幕，其中包含關於SAP Web IDE的更多信息。

　　▪ 經過單擊左側邊欄上帶有代碼符號的圖標，切換到Development透視圖。

　　如今您將看到一個文件夾列表，左側是一個條目工做區，右側是一個空的代碼編輯器。

　　▪經過從菜單或Ctrl + Alt + Shift + N中選擇File-> New->Folder，在Workspace文件夾中建立項目。例如，輸入myProject做爲文件夾名。

3.建立一個neo-app.json項目配置文件

neo-app.json文件包含SAP Web IDE的全部項目設置，並在項目的根文件夾中建立。它是一個JSON格式文件，由多個配置鍵組成。您須要配置的最重要的設置是啓動應用程序時SAPUI5運行時所在的路徑。　

　　您可使用「routes」鍵並定義資源對象數組來完成此操做。要運行SAPUI5教程，您只須要兩個條目，一個配置SAPUI5與路徑/resources，另外一個配置SAP Fiori launchpad與路徑 /test-resources 集成所需的測試資源。

　　建立兩個配置對象，它們包含path、target和具備更多配置設置的description屬性。path和entryPath值將指向存儲SAPUI5資源的服務器上的位置。

　　SAP Web IDE在運行應用程序時自動讀取這些設置。您能夠在下面的代碼塊中看到整個配置文件。或者，您能夠添加關鍵的welcomeFile文件來配置應用程序的入口點。在web應用程序中，這一般是index.html文件。

　　請注意：根據您所使用的SAP Web IDE版本，您可能必須將項目配置爲針對SAPUI5的"snapshot"版本運行，不然應用程序將與SAP Web IDE交付的SAPUI5版本一塊兒啓動。這一般是向客戶公開發布的最新版本。您能夠經過使用CTRL + SHIFT + ALT + P打開SAPUI5調試工具來檢查SAPUI5的加載版本。若是版本對於本教程的某些特性來講太舊，則必須將version屬性添加到目標配置條目並設置值。

過程：

　　a.選擇新文件圖標並輸入neo-app.json做爲文件名。

　　b.從屏幕左側的樹結構打開新建立的文件。

　　c.在neo-app.json文件中粘貼如下代碼，並選擇Save:　　

{ "welcomeFile": "index.html", "routes": [ { "path": "/resources", "target": { "type": "service", "name": "sapui5", "version": "snapshot", "entryPath": "/resources" }, "description": "SAPUI5 Resources" }, { "path": "/test-resources", "target": { "type": "service", "name": "sapui5", "entryPath": "/test-resources" }, "description": "SAPUI5 Test Resources" } ] }

4.建立index.html文件

用一個簡單的index.html文件來測試項目配置。這個文件包含SAPUI5引導程序和一個sap.m.Text控件，該控件顯示文本「SAPUI5 is loaded successfully!」。

　　a.在標題工具欄中選擇New Folder圖標，並輸入src做爲文件夾名稱。

　　b.選擇新建立的文件夾並建立一個新index.html文件經過選擇New File圖標。

　　c.將如下代碼粘貼到新建立的index.html文件並選擇Save:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <title>SAPUI5 Walkthrough</title>
        <script id="sap-ui-bootstrap" src="/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-modules="sap.m.library" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" >
        </script>
        <script> sap.ui.getCore().attachInit(function () { new sap.m.Text({ text : "SAPUI5 is loaded successfully!" }).placeAt("content"); }); </script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
</html>

　　警告：根據您的安裝調整資源所在的路徑(src="/resources/sap-ui-core.js")。對於OpenUI5，您可使用src=「https://openui5.hana.ondemand.com/resources/sap-ui-core.js」。例如，在SAP雲平臺上訪問SAPUI5，可使用src=「https://sapui5.hana.ondemand.com/resources/sap-ui-core.js」。您能夠在教程或測試目的中使用對SAPUI5最新穩定版本的引用，但毫不可將其用於生產用途。在實際的應用程序中，您老是必須顯式地指定SAPUI5版本。

有關更多信息，請參見Variant for Bootstrapping from Content Delivery Network.

5.運行應用程序

　　SAP Web IDE提供了集成的測試特性，容許您在中央服務器上運行應用程序，而無需設置任何額外的基礎設施。您能夠經過選擇src/index.html來運行應用程序。而後單擊標題工具欄中的run按鈕。

　　這將在中央服務器和測試工具上啓動應用程序，該工具容許您配置設備的屏幕大小和方向。該特性能夠用於測試專門針對移動、平板和桌面設備的應用程序。您能夠很是容易地更改標題欄中的分辨率和方向。

　　若是您不想在測試工具中運行app，能夠調整項目的運行配置:

　　a. 右鍵單擊項目中的任何文件並選擇Run Run Configurations

　　b. 選擇+並選擇Web Application以添加新的運行配置。

　　c. 要保存配置並運行項目，請選擇save and run。

　　有關如何運行項目的更多信息，請在SAP幫助門戶https://help.sap.com/viewer/p/CP上的SAP雲平臺的SAP Web IDE Developer Guide中搜索如何配置如何運行項目Configuring How to Run Projects。

6.建立 Northwind Destination

在SAP雲平臺駕駛艙中配置一個目的地，以便繞過瀏覽器的同源策略。

　　爲了可以測試您的應用程序，您可使用遠程OData服務，該服務提供來自OData組的Northwind演示服務的產品數據。

　　在SAP雲平臺駕駛艙的導航欄中，選擇目的地Destinations ，而後在工具欄中選擇新的目的地New Destination 。

在相應字段中輸入如下值：

Field	Value
Name	northwind
Type	HTTP
Description	Northwind OData Service
URL	https://services.odata.org
Proxy Type	Internet
Authentication	NoAuthentication