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

程序员文章站 2022-03-12 20:18:22

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

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

首先修改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"></button><input value="{/recipient/name}" description="Hello {/recipient/name}" valueliveupdate="true" width="60%" data-cke-editable="1" contenteditable="false"><button text="{i18n>showHelloButtonText}" press="onShowHello"></button></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>

… <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>这里面利用了SAP UI5中的Shell组件，把页面内容放在这里面可以保证页面的响应式，更好地支持移动端设备。除此之外，我们还设定了height属性为100%，表示沾满整个屏幕。

上一篇：逆向工程二之Cycript

下一篇： SwiftUI 简明教程之自定义对齐方式

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

HTML5开发移动web应用——SAP UI5篇(8)

HTML5开发移动web应用——SAP UI5篇(7)

HTML5开发移动web应用——SAP UI5篇(5)