HTML5开发移动web应用——SAP UI5篇(9)
2016-02-20 21:57
661 查看
之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP UI5组件概念。这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP UI5中提供的功能。每个不同的层次都有不同的功能。
首先修改App.view.xml文件代码:
在index.html文件中修改代码如下:
首先修改App.view.xml文件代码:
<mvc:View controllerName="sap.ui.demo.wt.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"> <App> <pages> <Page title="{i18n>homePageTitle}"> <content> <Panel headerText="{i18n>helloPanelTitle}"> <content> <Button text="{i18n>showHelloButtonText}" press="onShowHello"/> <Input value="{/recipient/name}" description="Hello {/recipient/name}" valueLiveUpdate="true" width="60%"/> </content> </Panel> </content> </Page> </pages> </App>
</mvc:View>跟之前的相比,虽然内容相同,但是我们引入了很多组件,让这个界面更有了层次性。把所有的组件都放到了Page中,基本结构是App->Page(里面有content)->Panel(里面有content)。真正的页面内容都放在Panel中,前两层只是为了实现基础功能。另外将displayBlock设置为true,这样才能让手机页面正常显示。
在index.html文件中修改代码如下:
<!DOCTYPE html><html> <head> … <script> sap.ui.getCore().attachInit(function () { new sap.m.Shell({ app : new sap.ui.core.ComponentContainer({ name : "sap.ui.demo.wt", height : "100%" }) }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body></html>这里面利用了SAP UI5中的Shell组件,把页面内容放在这里面可以保证页面的响应式,更好地支持移动端设备。除此之外,我们还设定了height属性为100%,表示沾满整个屏幕。
相关文章推荐
- HTML5超科幻个人主页
- golang(5):编写WebSocket服务,client和html5调用
- HTML5学习笔记<2>
- 有趣的HTML5:离线存储
- html5的网页在MAC及ipad上按钮无法正常切换的处理
- 前端学习总结(一)HTML5基础
- 支付系统界面html5
- h5页面摇一摇游戏
- html5那些事儿
- 矢量化的HTML5拓扑图形组件设计
- 矢量化的HTML5拓扑图形组件设计
- HTML5总结
- ie8及以下无法识别html5新增标签,怎么破?
- HTML5离线存储原理及实现
- H5真的很强悍?
- Modernizr——为HTML5和CSS3而生!
- Html5页面中存放可拨打电话
- HTML5:嵌入内容
- 浅析HTML5的WebSocket与服务器推送事件
- 在HTML5中使用MathML数学公式的简单讲解