摘要:之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP UI5组件概念。这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP UI5中提供的功能。每个不同的层次都有不同的功能。希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。
之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP UI5组件概念。这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP UI5中提供的功能。每个不同的层次都有不同的功能。
首先修改App.view.xml文件代码:
1. <mvc:View 2. controllerName="sap.ui.demo.wt.controller.App" 3. xmlns="sap.m" 4. xmlns:mvc="sap.ui.core.mvc" 5. displayBlock="true"> 6. <App> 7. <pages> 8. <Page title="{i18n>homePageTitle}"> 9. <content> 10. <Panel 11. headerText="{i18n>helloPanelTitle}"> 12. <content> 13. 14. <Button 15. text="{i18n>showHelloButtonText}" 16. press="onShowHello"/> 17. <Input 18. value="{/recipient/name}" 19. description="Hello {/recipient/name}" 20. valueLiveUpdate="true" 21. width="60%"/> 22. </content> 23. </Panel> 24. </content> 25. </Page> 26. </pages> 27. </App>
1. </mvc:View>
跟之前的相比,虽然内容相同,但是我们引入了很多组件,让这个界面更有了层次性。把所有的组件都放到了Page中,基本结构是App->Page(里面有content)->Panel(里面有content)。真正的页面内容都放在Panel中,前两层只是为了实现基础功能。另外将displayBlock设置为true,这样才能让手机页面正常显示。
在index.html文件中修改代码如下:
1. <!DOCTYPE html><html> 2. <head> 3. … 4. <script> 5. sap.ui.getCore().attachInit(function () { 6. new sap.m.Shell({ 7. app : new sap.ui.core.ComponentContainer({ 8. name : "sap.ui.demo.wt", 9. height : "100%" 10. }) 11. }).placeAt("content"); 12. }); 13. </script> 14. </head> 15. <body class="sapUiBody" id="content"> 16. </body></html>
这里面利用了SAP UI5中的Shell组件,把页面内容放在这里面可以保证页面的响应式,更好地支持移动端设备。除此之外,我们还设定了height属性为100%,表示沾满整个屏幕。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号