之前我们对于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"/>

                     <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开发移动web应用——SAP UI5篇(9)的更多相关文章

  1. HTML5开发移动web应用——SAP UI5篇(6)

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

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

    本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...

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

    SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...

  4. HTML5开发移动web应用——Sencha Touch篇(10)

    我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...

  5. HTML5开发移动web应用——Sencha Touch篇(7)

    Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...

  6. HTML5开发移动web应用——Sencha Touch篇(8)

    DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...

  7. 【翻译】HTML5开发——轻量级Web Database存储库html5sql.js

    方式1: html5sql官方网址:http://html5sql.com/ 阅读之前,先看W3C关于WEB Database的一段话: Beware. This specification is n ...

  8. HTML5开发移动web应用—JQuery Mobile(1)

    JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...

  9. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

随机推荐

  1. 【LeetCode-面试算法经典-Java实现】【144-Binary Tree Preorder Traversal（二叉树非递归前序遍历）】

    [144-Binary Tree Preorder Traversal(二叉树非递归前序遍历)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a bina ...

  2. Android开源图表库XCL-Charts版本号公布及展示页

    XCL-Charts V2.1 Android开源图表库(XCL-Charts is a free charting library for Android platform.) XCL-Charts ...

  3. hdu1874 畅通project续 最短路 floyd或dijkstra或spfa

    Problem Description 某省自从实行了非常多年的畅通project计划后.最终修建了非常多路.只是路多了也不好,每次要从一个城镇到还有一个城镇时,都有很多种道路方案能够选择.而某些方案 ...

  4. 68.qq号索引结构体写入内存,并实现快速排序

    //两个步骤,第一步读取文件,并且初始化索引结构体,把初始化的索引结构体写入到文件,第二步,读取这个文件到索引结构体 //并对这个结构体进行快速排序,得到顺序的索引,再写入文件 #define _CR ...

  5. the resource is not on the build path of a java project错误

    在eclipse中,使用mavenimport了一个工程,但是在对某一个类进行F3/F4/ctrl+alt+H操作的时候报错:“the resource is not on the build pat ...

  6. C#截取指定长度中英文字符串方法 (修改)

    public static string GetFirstString(string stringToSub, int length) { Regex regex = new Regex(" ...

  7. weblogic虚拟路径配置

    首发地址 https://blog.leapmie.com/archives/344/ 前言 weblogic的虚拟路径配置有两种: 一种是在项目下配置,即在weblogic.xml中配置,该方法配置 ...

  8. Vue神之大坑处理：获取通过URL的的参数不可直接操作

    比如: $router.query['isZero'] == 'false';  //不会生效,刷新页面又好使了.打印处理是蓝色的false,再次刷新字体就变浅黑了. 解决:($router.quer ...

  9. hdu5301(2015多校2)--Buildings（构造）

    Buildings Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tota ...

  10. 2.Web开发过程流程图

    转自:https://blog.csdn.net/hello_simon/article/details/19993343 最近公司在进行一系列新模块的开发,在痛苦开发的过程中,大家不时在一起进行总结 ...