步骤4:XML视图

练习效果

步骤4:XML视图 - 第1张  | 优通SAP

当把所有的UI及UI代码放入index.html文件会导致代码混乱,并且我们还有很多工作、代码要做。因此,我们将sap.m.Text控件放入专用视图中进行第一个模块化。SAPUI5支持多种视图类型(XML,HTML,JavaScript)。我们选择XML,因为这会产生更易读的代码,并将迫使我们将视图声明与控制器逻辑分开。但是,我们的UI外观不会改变,

源码

您可以在演练-步骤4中查看和下载所有文件。

webapp/view/App.view.xml(新)

我们在应用程序中创建一个新的视图文件夹,并在应用程序文件夹中为XML视图创建一个新文件。XML结构的根节点是view。在这里,我们引用默认的名称空间sap.m大多数UI资产所在的位置。我们定义一个额外的sap.ui.core.mvc 具有别名的名称空间 MVC,其中包含SAPUI5视图和所有其他模型视图控制器(MVC)

注意

命名空间标识项目的所有资源,并且必须是唯一性。如果开发自己的应用程序代码或控件,则不能使用名称空间前缀SAP,因为此名称空间是为SAP资源保留的。相反,只需定义自己的唯一名称空间(例如,myCompany.myApp).

webapp/view/App.view.xml

视图里,我们添加了声明性定义 文本控件具有与上一步骤中相同的属性。XML中标记映射到控件,而属性也映射到控件的属性。

webapp/index.js

在这里我们替换了 sap.m.Text控件, 应用程式XML视图。该视图是由SAPUI5的标准程序功能创建的,该功能可确保正确配置该视图并可由我们自己扩展。名称以名称空间为前缀 sap.ui.demo.walkthrough.view ,具有唯一性。

注意

从此步骤开始,有必要在Web服务器上运行该应用程序。我们使用从本地文件系统加载的多个文件来构建应用程序。如果没有Web服务器,由于安全原因,浏览器将阻止此操作。如果浏览器的开发人员工具中显示错误消息“未定义”,则需要检查文件中的resource引导程序中的路径。

您可以在Development Environment中找到有关如何为您的特定环境安装Web服务器的更多信息。

约定

在SAPUI5开发中,我们约定以下规范:

  • 视图名称大写
  • 所有视图都存储在 view 夹
  • XML视图的名称始终以 * .view.xml
  • 默认的XML名称空间是 sap.m
  • 其他XML名称空间使用SAP名称空间的最后一部分作为别名(例如,MVC 对于 sap.ui.core.mvc)

留下一个回复

你的email不会被公开。

13 − three =