您的位置：首页 > Web前端 > HTML5

HTML5开发移动web应用——SAP UI5篇(3)

2016-02-07 11:02 736 查看
我们开始系统的进行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自动编辑成我们需要的代码并正确显示。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航