一步步使用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視圖的實作代碼：

<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
    });
});


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

本文來自雲栖社群合作夥伴“汪子熙”，了解相關資訊可以關注微信公衆号"汪子熙"。