HTML5开发移动web应用——SAP UI5篇(3)
我们开始系统的进行SAP UI5的学习。SAP UI5采用的也是MVC的基础架构模型。
在index.html中，我们需要做的内容如下：
①引入相关的SAP UI5库文件
②html标签编辑组件的盛放容器：
<body class="sapUiBody" id="content"></body>
③编写相关的js代码（这个以后要放到单独的文件中）
sap.ui.getCore().attachInit(function () {
new sap.m.Text({
text : "Hello World"
}).placeAt("content");
});
在这里我们使用SAP UI5中的control，定义了一个Text。Text组件在sap.m中，所以我们通过sap.m.Text的方法创建一个新的Text。通过text属性设定其内容为Hello World，这和Sencha Touch的工作原理和编码方式都非常相像。最后利用placeAt方法，将它放置到content中。这就是最简单的Hello world程序。
但是在SAP UI5中，一般的视图采用的都是xml的文件而不是直接写在js代码里，这是和Sencha Touch很大的不同之处。我们改造上面代码，利用xml文件呈现相同的视图。
编写APP.view.xml文件，代码如下：
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/> </mvc:View>
在这里定义了一个view，Text标签及里面的内容都是之后可以读取的。关于XML语言会在以后进行进一步的的学习和介绍。
UI5中采用命名空间的机制，对视图进行加载。我们首先创建一个命名空间sap.ui.demo.wt，并在index.html中加载，修改后代码如下：
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}' >
最后一段引入了这个命名空间，之后我们可以在js代码中引用该视图：
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName: "sap.ui.demo.wt.view.App"
}).placeAt("content");
});
通过sap.ui.xmlview引用xml文件，viewName带入文件的命名空间和文件名，就完成了xml视图的引用。运行效果和之前的一样。我们在xml中的代码会被UI5自动编辑成我们需要的代码并正确显示。