摘要: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频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号