一步步使用SAP云平台的WebIDE开发SAP UI5应用-阿里云开发者社区

开发者社区> jerrywangsap> 正文

一步步使用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>

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
springboot 学习与回顾 :springboot 如何改变spring应用程序开发的
springboot,自动配置、起步依赖、命令行界面、Actuator
53 0
iOS开发中 关于阿里云服务器的使用与安全策略 韩俊强的博客
使用背景:         云服务已经很多年了,早期没能加入使用云大军中的一员,后来后悔莫及。2015年记得当时没办法租用的虚拟主机三天两天挂了,导致我认认真真的考虑了一次,觉得还是要使用云服务器! 从免费的主机屋学习版到各种虚拟机的实验,再到之前是用300元左右买的别人的虚拟主机,空间有几G,感觉还行,正好又值他们搞活动,买两年送一年!预存还有返还!心动了,就没有任何考虑就预存了一千块! 开始的几个月感觉还行,速度什么的还过得去,就没去管网站的事了。
1421 0
关于安卓开发使用AlertDialog实现按钮对话框
AlertDialog 类的功能非常强大,它不仅可以生成带按钮的提示对话框,还可以生成带列表的对话框。 使用AlertDialog实现对话框建一个layout文件 alert.xml  添加一个按钮 命名为:显示带取消中立确定按钮的对话框建一个activity  AlertDialog_lianxi.
729 0
讲座:基于云平台进行微博应用开发
  作为CSDN俱乐部的例行活动,今天由我为同学们讲新浪微博开发。原计划大一的继续在计算中心玩编程,高年级的听讲座,但据说大一的有意见,也就本周暂停编程比赛。   反思自己的思路,不管何种形式,不是要让同学们多见识一些吗?不是一直推荐“不要强调基础,能做就尽快做起来”的一种思维吗?每周五的活动尽可能变着点花样,而不是让大家感觉“苦逼”的日子从学校开始,这也是俱乐部活动长期健康进行的基础。
1037 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载