点击此处--->   群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）

前面已经详细介绍了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
<IconTabFilter   

     id="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上面。

翱翔云天的博客