HTML5开发移动web应用——SAPUI5篇(9)

主页 » SAP文库 » Fiori

作者 fareise 2018-03-16    588

之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP UI5组件概念。这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP UI5中提供的功能。每个不同的层次都有不同的功能。

首先修改App.view.xml文件代码:


[html] view plain copy

  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>  

[html] view plain copy

  1. mvc:View>  

跟之前的相比,虽然内容相同,但是我们引入了很多组件,让这个界面更有了层次性。把所有的组件都放到了Page中,基本结构是App->Page(里面有content)->Panel(里面有content)。真正的页面内容都放在Panel中,前两层只是为了实现基础功能。另外displayBlock设置为true,这样才能让手机页面正常显示。


  在index.html文件中修改代码如下:

[html] view plain copy

  1. ><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%,表示沾满整个屏幕。


本文原始地址:http://sapdoc.cn/sap/theme/294.html

转载请注明出处来自 SAP文库

上一篇

AA固定资产|概述

下一篇

SAPUI5 (01) - OpenUI5环境搭建