-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-06-26
来源 ：
阅读 1545
评论 0
摘要：SAP UI5采用的也是MVC的基础架构模型。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5 SAP UI5的理解更加深入。
我们开始系统的进行SAP UI5的学习。SAP UI5采用的也是MVC的基础架构模型。
在index.html中，我们需要做的内容如下：
①引入相关的SAP UI5库文件
②html标签编辑组件的盛放容器：
<body class="sapUiBody" id="content"></body>
③编写相关的js代码（这个以后要放到单独的文件中）
1. sap.ui.getCore().attachInit(function () {
2. new sap.m.Text({
3. text : "Hello World"
4. }).placeAt("content");
5. });在这里我们使用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文件，代码如下：
1. <mvc:View 2. xmlns="sap.m" 3. xmlns:mvc="sap.ui.core.mvc"> 4. <Text text="Hello World"/> 5. </mvc:View>
在这里定义了一个view，Text标签及里面的内容都是之后可以读取的。关于XML语言会在以后进行进一步的的学习和介绍。
UI5中采用命名空间的机制，对视图进行加载。我们首先创建一个命名空间sap.ui.demo.wt，并在index.html中加载，修改后代码如下：
1. <script
2. id="sap-ui-bootstrap"
3. src="/resources/sap-ui-core.js"
4. data-sap-ui-theme="sap_bluecrystal"
5. data-sap-ui-libs="sap.m"
6. data-sap-ui-compatVersion="edge"
7. data-sap-ui-preload="async"
8. data-sap-ui-resourceroots='{
9. "sap.ui.demo.wt": "./"
10. }' >最后一段引入了这个命名空间，之后我们可以在js代码中引用该视图：
1. sap.ui.getCore().attachInit(function () {
2. sap.ui.xmlview({
3. viewName: "sap.ui.demo.wt.view.App"
4. }).placeAt("content");
5. });通过sap.ui.xmlview引用xml文件，viewName带入文件的命名空间和文件名，就完成了xml视图的引用。运行效果和之前的一样。我们在xml中的代码会被UI5自动编辑成我们需要的代码并正确显示。
本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
