UI5开发 – Eclipse编辑代码

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