一步步使用SAP雲平臺的WebIDE開發SAP UI5應用

我們開發的這個SAP UI5應用需要消費一個OData服務，請求該服務得到一系列採購訂單的資料，再顯示到UI5應用上。所以需要先申請該OData服務所在的伺服器ES5上的使用者。

申請連結：

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

申請完畢後，可以通過webUI進入該系統。

OData服務的地址：

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

登入SAP雲平臺，建立一個指向ES5的Destination：

開啟SAP雲平臺的WebIDE，新建一個專案，基於template建立一個SAP UI5應用：

右鍵選單，新建一個OData服務：

從service catalog的下拉選單裡選擇剛剛建立的Destination，能帶出該Destination指向的ES5伺服器上部署的所有OData服務：

選擇採購訂單OData服務：

WebIDE會幫我們生成一個UI5應用的骨架，直接點run按鈕試著執行：

在Chrome開發者工具裡看到OData服務的metadata已經可以成功取回了：

XML檢視的實現程式碼：

```xml

<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檢視程式碼實現之後，整個應用的外觀如下：

最後通過右鍵選單將這個應用從WebIDE部署到SAP雲平臺：

部署成功：

該應用的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 TUTORIAL
		onClickPO: 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
	});
});

XML VIEW：

<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>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2676813/，如需轉載，請註明出處，否則將追究法律責任。

一步步使用SAP雲平臺的WebIDE開發SAP UI5應用

相關文章