HTML5开发移动web应用——SAP UI5篇(3)
来源:互联网 发布:域名评价 编辑:程序博客网 时间:2024/04/29 17:12
我们开始系统的进行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自动编辑成我们需要的代码并正确显示。
- HTML5开发移动web应用——SAP UI5篇(3)
- HTML5开发移动web应用——SAP UI5篇(1)
- HTML5开发移动web应用——SAP UI5篇(2)
- HTML5开发移动web应用——SAP UI5篇(4)
- HTML5开发移动web应用——SAP UI5篇(5)
- HTML5开发移动web应用——SAP UI5篇(6)
- HTML5开发移动web应用——SAP UI5篇(7)
- HTML5开发移动web应用——SAP UI5篇(8)
- HTML5开发移动web应用——SAP UI5篇(9)
- HTML5开发移动web应用—JQuery Mobile(3)-列表
- HTML5开发移动web应用—JQuery Mobile(1)
- HTML5开发移动web应用—JQuery Mobile(4)-事件
- HTML5开发移动web应用——Sencha Touch篇(4)
- HTML5开发移动web应用——Sencha Touch篇(5)
- HTML5开发移动web应用——Sencha Touch篇(6)
- HTML5开发移动web应用——Sencha Touch篇(7)
- HTML5开发移动web应用——Sencha Touch篇(8)
- HTML5开发移动web应用——Sencha Touch篇(9)
- 黑马程序员-学习日记09
- C# 拆分数组的方法
- [Python 与 炒股] TuShare 使用篇之二
- Java 基础知识
- SAE上使用curl函数附带cookie的一些细节
- HTML5开发移动web应用——SAP UI5篇(3)
- ViewPager实现大图轮播
- Linux内核模块简介
- cxf拦截器
- HDU 5624 KK's Reconstruction(最小生成树)
- 蓝桥杯 字符图形 2013年基础题
- HIWORD和LOWORD
- VS2015 安装不成功,运行时xxxxpackage找不到或没有正确配置
- SQL快速入门