克米亚sap论坛,中国最好的sap论坛,sap系统,sap培训,kemiya,克米亚,sap账号,sap ides,sap mm,sap hana,sap fico,sap pp

 找回密码
 注册
查看: 32|回复: 1

UI5开发 – Eclipse编辑代码

[复制链接]
kmy 发表于 2019-1-7 09:21:35 | 显示全部楼层 |阅读模式
                        前面已经详细介绍了UI5开发模板,并且已经创建了model,参考文章UI5开发 – 创建Model,并且对该model进行了功能开发,参考文章UI5开发 – Model编程, 接下来在gateway server上注册了服务,UI5编程 – 注册service到SAP gateway server, 本文介绍如何在Eclipse里面进行编程,完善我们的应用。  

  应用设计:该App使用master-detail模板,左边显示plant清单,右边显示plant详细信息,有两个iconTab,一个显示plant的地址信息,一个显示google地图中plant的位置。
为了节省时间,我们不使用模板,而是用webide创建一个初始程序,然后在Eclipse中取得生成的代码进行修改。今天登陆webide发现SAP又有了版本的更新,目前是1.9.3,不知道模板文件是否有什么新变化,在以下开发过程中慢慢查看。

根据template创建项目注意要选择我们前面创建的model

在template创建过程中,新版本并没有任何变化。
从gateway server取得生成的模板文件,参考Eclipse开发UI5 – 使用WebIDE生成的代码模板为了能够直接测试,我们需要把Template生成的文件复制到Eclipse中的WebContent目录下,如图:

修改component.js,因为我们使用webide直接调用我们的model创建的模板,所以这里无需修改,如果使用其他的模板,需要更新一下model的定义信息。config : {      resourceBundle : “i18n/messageBundle.properties”,      serviceConfig : {      name: “ZBLOG_PLANT_SRV”,      serviceUrl: “/sap/opu/odata/sap/ZBLOG_PLANT_SRV/”      }      },  运行这个app,看看我们需要修改那些信息:
  • List 界面应该不需要修改,我们只要显示plant name以及plant number
  • Detail header部分,去掉一些不需要的,同样,只要name和number
  • 第一个iconTab用来显示地图,目前不做修改
  • 第二个iconTab的信息并没有把model中的地址信息列全,我们需要加几个字段。

修改detail页面header部分,注释掉不用的代码
修改address iconTab,添加model中定义的字段  
<label id=""zlabel1"        text="Address Number">      Label>       <Text        id="ztext1"       text="{Addrnumber}"       maxLines="0">      Text>  按照以上代码添加region字段
修改index.html,在Head部分加载google api <script type="text/javascript"       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0Lh5jRLPVVcct3iMVNyS_4NoiUJlvPW4&sensor=false">      script>  修改detail页面第一个iconTab,图标改成地图图标,加载google地图
  • 修改icon: icon=”sap-icon://map”
  • 修改key,连接到model中的geocode entity: key=”GeoCode”
  • 在iconTabFilter中的content里面删除不用的信息,添加google page
    "iconTabFilter1"        key="GeoCode"        icon="sap-icon://map">       <content>       <f:SimpleForm        id="iconTabFilter1form"        minWidth="1024"        editable="false"        layout="ResponsiveGridLayout"        labelSpanL="3"        labelSpanM="3"        emptySpanL="4"        emptySpanM="4"        columnsL="1">       <f:content>       <Label        id="zlabel3"        text="Lat">       Label>        <Text        id="ztext3"       text="{Latitude}"       maxLines="0">       Text>        <Label        id="zlabel4"        text="Long">       Label>       <Text        id="ztext4"       text="{Longitude}"       maxLines="0">       Text>        <core:ExtensionPoint        name="extIconTabFilterForm1"/>       f:content>       f:SimpleForm>        <VBox fitContainer="true" justifyContent="Center" alignItems="Center">        <HBox height="500px" width="100%" id="map_canvas" fitContainer="true" justifyContent="Center" alignItems="Center">       HBox>        VBox>       content>      IconTabFilter>  修改Detail.controller.js,添加显示google map的代码
  • 定义全局变量:

  • 每次显示地图之前清空:

  • 添加iconTab bar的事件触发:

  • 显示地图代码如下:

ShowMap: function(){       oController = this;       if (googleMap == null){       var myOptions = {       zoom : 15,       mapTypeId : google.maps.MapTypeId.ROADMAP       };       googleMap = new google.maps.Map(this.getView().byId("map_canvas").getDomRef(), myOptions);       var currentPosition = new google.maps.LatLng(0,0);       marker = new google.maps.Marker({       position: currentPosition,       map: googleMap,       draggable : true,       animation : google.maps.Animation.DROP,        });       marker.setTitle("Plant Position");       google.maps.event.addListener(marker, 'dragend', function() {       oController.SetMarker(marker, googleMap, marker.getPosition().lat(), marker.getPosition().lng());       });        }        currentPositionX=this.getView().byId("ztext3").getText();       currentPositionY=this.getView().byId("ztext4").getText();       this.SetMarker(marker, googleMap, currentPositionX, currentPositionY);      },      SetMarker: function(marker, googleMap, latitude, longitude){       // get the position of customer       var currentPosition = new google.maps.LatLng(latitude,longitude);      // this.getView().byId("upGeoLat").setValue(latitude);      // this.getView().byId("upGeoLong").setValue(longitude);       marker.setPosition(currentPosition);       googleMap.setCenter(currentPosition);       },  测试应用
  在下篇文章中会介绍如何debug这个应用,以及如何把这个应用放到Fiori LaunchPad上面。
               

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|克米亚sap论坛,sap账号,sap系统,sap ides,sap学习机,sap练习环境 ( 渝ICP备18002525号-5 )

GMT+8, 2019-1-18 18:22

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表