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中的地址信息列全，我们需要加几个字段。