HTML5从入门到精通——SAP UI5篇(9)-职坐标

HTML5从入门到精通——SAP UI5篇(9)

沉沙 2018-06-26 来源：阅读 2408 评论 0

摘要：之前我们对于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频道！

web前端开发app html5移动web开发指南 html5教程百度网盘

本文由 @沉沙发布于职坐标。未经许可，禁止转载。