我們開發(fā)的這個(gè)SAP UI5應(yīng)用需要消費(fèi)一個(gè)OData服務(wù)，請(qǐng)求該服務(wù)得到一系列采購(gòu)訂單的數(shù)據(jù)，再顯示到UI5應(yīng)用上。所以需要先申請(qǐng)?jiān)揙Data服務(wù)所在的服務(wù)器ES5上的用戶。

申請(qǐng)鏈接：

https://register.sapdevcenter.com/SUPSignForms/

申請(qǐng)完畢后，可以通過webUI進(jìn)入該系統(tǒng)。

OData服務(wù)的地址：

https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PO_APV/PurchaseOrders?$format=json

登錄SAP云平臺(tái)，創(chuàng)建一個(gè)指向ES5的Destination：

打開SAP云平臺(tái)的WebIDE，新建一個(gè)項(xiàng)目，基于template創(chuàng)建一個(gè)SAP UI5應(yīng)用：

右鍵菜單，新建一個(gè)OData服務(wù)：

從service catalog的下拉菜單里選擇剛剛創(chuàng)建的Destination，能帶出該Destination指向的ES5服務(wù)器上部署的所有OData服務(wù)：

選擇采購(gòu)訂單OData服務(wù)：

WebIDE會(huì)幫我們生成一個(gè)UI5應(yīng)用的骨架，直接點(diǎn)run按鈕試著運(yùn)行：

在Chrome開發(fā)者工具里看到OData服務(wù)的metadata已經(jīng)可以成功取回了：

XML視圖的實(shí)現(xiàn)代碼：

<mvc:View controllerName="com.sap.PurchaseOrderApp.controller.Mainview" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"><Shell id="shell"><App id="app"><pages><Page title="Purchase Orders"><!-- INSERT IN STEP 3 OF THE NEXT TUTORIAL --><content><List noDataText="No purchase orders found" items="{/PurchaseOrders}"><StandardListItem type="Navigation" title="{POId}" description="{SupplierName}" press="onClickPO"/></List></content></Page><!-- INSERT CODE IN STEP 5.2 HERE --></pages></App></Shell> </mvc:View>

將上面的xml視圖代碼實(shí)現(xiàn)之后，整個(gè)應(yīng)用的外觀如下：

最后通過右鍵菜單將這個(gè)應(yīng)用從WebIDE部署到SAP云平臺(tái)：

部署成功：

該應(yīng)用的controller源代碼：

sap.ui.define(["sap/ui/core/mvc/Controller" ], function (Controller) {"use strict";return Controller.extend("com.sap.PurchaseOrderApp.controller.Mainview", {onInit: function () {}, // INSERT IN STEP 2 OF THE NEXT TUTORIALonClickPO: function (oEvent) {var oApp = this.getView().getContent()[0].getApp();var sBindingPath = oEvent.getSource().getBindingContext().getPath();var oDetailsPage = oApp.getPages()[1].bindElement(sBindingPath);oApp.to(oDetailsPage.getId());}// INSERT CODE IN SUB-STEP 6.2 HERE}); });<mvc:View controllerName="com.sap.PurchaseOrderApp.controller.Mainview" xmlns:html="http://www.w3.org/1999/xhtml"xmlns:f="sap.ui.layout.form" xmlns:layout="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"><Shell id="shell"><App id="app"><pages><Page title="Purchase Orders"><!-- INSERT IN STEP 3 OF THE NEXT TUTORIAL --><content><List noDataText="No purchase orders found" items="{/PurchaseOrders}"><StandardListItem type="Navigation" title="{POId}" description="{SupplierName}" press="onClickPO"/></List></content></Page><!-- INSERT CODE IN STEP 5.2 HERE --><Page id="details" title="Details" navButtonPress="onNavButtonPress" showNavButton="true"><f:SimpleForm columnsM="1" editable="false" layout="ResponsiveGridLayout" singleContainerFullSize="false"><f:content><!-- INSERT CODE IN SUB STEP 5.3 HERE --><Label text="Purchase Order ID" width="100%"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{POId}"/><Label text="Supplier Name"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{SupplierName}"/><Label text="OrderedByName"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{OrderedByName}"/><Label text="DeliveryAddress"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{DeliveryAddress}"/><Label text="GrossAmount"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{GrossAmount}"/><Label text="CurrencyCode"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{CurrencyCode}"/><Label text="ItemCount"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{ItemCount}"/><Label text="Changed At"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{ChangedAt}"/><Label text="DeliveryDateEarliest"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{DeliveryDateEarliest}"/><Label text="LaterDelivDateExist"><layoutData><layout:GridData span="L4 M4"/></layoutData></Label><Text text="{LaterDelivDateExist}"/></f:content></f:SimpleForm></Page></pages></App></Shell> </mvc:View>

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的一步步使用SAP云平台的WebIDE开发SAP UI5应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。