UI5-文档-2.3-使用SAPUI5工具为Eclipse开发应用程序

var aControls = [];
       var oButton = new sap.ui.commons.Button({
         id : this.createId("MyButton"),
         text : "Hello JS View"
       });
       aControls.push(oButton.attachPress(oController.doIt));
       return aControls;

　　▪ 在HTML视图中，向template标签添加以下内容：

<div data-sap-ui-type="sap.ui.commons.Button" id="MyButton"
  data-text="Hello HTML View" data-press="doIt">
</div>

　　▪ 在XML视图中，向core标签添加以下代码：

<Button id="MyButton" text="Hello XML View" press="doIt"/>

　　▪ 在JSON视图中，向content函数添加以下内容：

"Type":"sap.ui.commons.Button",
      "id":"MyButton",
      "text":"Hello JSON View",
      "press":"doIt"

　　一个按钮被添加到您的视图中，当用户按下该按钮时将触发一个事件。

　　下一步：

　　在这些视图类型中调用的doIt方法是在控制器中实现的：Implement a Method in the Controller。

2.3Implement a Method in the Controller

所有与用户界面不直接相关的功能都应该在控制器中处理，以确保UI和数据之间的清晰分离。在本例中，您添加了一个方法来处理事件，该方法被附加到一个按钮上。

先决条件：您已经创建了一个按钮，描述如下: Add a Control to Your View。

创建过程：

　　为处理此事件，向控制器添加以下功能：

doIt : function(oEvent) { alert(oEvent.getSource().getId() + " does it!"); }

2.4Create an Additional View

SAPUI5应用程序视图只能为使用SAPUI5应用程序向导创建的SAPUI5应用程序项目创建，而不能为其他类型的项目创建。

环境：

　　▪ SAPUI5应用程序视图名需要在项目文件夹中是唯一的。

　　▪ SAPUI5应用程序视图的指定文件夹需要是WebContent/<application name>或子文件夹。

创建过程：

　　1.选择New->Other... ->SAPUI5 Application Development ->View，打开SAPUI5 Application View 文件向导。
　　

　　2.填写所需数据

　　▪ 选择要在其中创建视图的SAPUI5应用程序项目。

　　▪ 选择要存储视图的文件夹(default is WebContent/<application name>).

　　▪ 输入视图的名称。

　　▪ 选择您想要开发视图的开发范例。

结论：

　　完成向导后，系统将在指定文件夹中创建视图。文件名后缀表示开发范例：

<viewname>.view.js for JavaScript views
<viewname>.view.xml for XML views
<viewname>.view.json for JSON views
<viewname>.view.html for HTML views

　　如果对应的index.html文件在引导过程中包含sap.m库，也就是说，如果为移动目标设备创建了SAPUI5应用程序项目，那么该视图包含用于实例化移动页面控件sap.m. page的代码。系统还创建一个控制器文件<viewname>.controller.js与草稿编码。对于JavaScript视图，代码补全是可用的，请参见JavaScript Code Completion。

　　请注意：如果重命名视图或控制器文件，或者将它们移动到另一个文件夹，则需要手动调整视图和控制器以及视图使用位置中的编码。

　　相关信息：Views

2.5Integrate a New View

要集成新视图，可以将其添加到index.html或将其嵌套到另一个视图中。

先决条件：如果为现有的SAPUI5应用程序项目创建新视图，则需要手动调用该视图。

创建过程：

　　若要调用视图，请从以下选项中选择:

　　▪ 直接将新视图嵌入index.html页面

　　▪ 所有视图都可以独立于视图类型嵌套。每种视图类型的行为都与任何SAPUI5控件类似。viewName属性定义了嵌入哪些视图。要嵌套一个视图，按照给定的例子进行:

　　对于XML视图类型：　　

<mvc:View controllerName="sap.hcm.Address" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
   <Panel>
      <mvc:JSView id="myJSView" viewName="sap.hcm.Bankaccount" />
   </Panel>
<core:View>

　　对于HTML视图，嵌套视图如下所示：　　

<template data-controller-name= "example.mvc.test" >
  <div data-sap-ui-type= "sap.ui.core.mvc.HTMLView" id= "MyHTMLView" data-view-name= "example.mvc.test2" ></div>
  <div data-sap-ui-type= "sap.ui.core.mvc.JSView" id= "MyJSView" data-view-name= "example.mvc.test2" ></div>
  <div data-sap-ui-type= "sap.ui.core.mvc.JSONView" id= "MyJSONView" data-view-name= "example.mvc.test2" ></div>
  <div data-sap-ui-type= "sap.ui.core.mvc.XMLView" id= "MyXMLView" data-view-name= "example.mvc.test2" ></div>
</template>