之前我们对于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. 4.使用 WSDL 指定的标准 SOAP 消息格式

    转自:https://technet.microsoft.com/zh-cn/sysinternals/x2ccke44(v=vs.94) 为 XML 文档(定义 Web 服务)定义架构的行业标准 W ...

  2. 开源性能测试工具——jemeter介绍+安装说明

    一. Apache JMeter介绍 1. Apache JMeter是什么 Apache JMeter 是Apache组织的开放源代码项目,是一个100%纯Java桌面应用,用于压力测试和性能测量. ...

  3. position记录

    1.  relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位.可通过z-index进行层次分级.均是以父级的左上角 ...

  4. 洛谷 P3817 小A的糖果

    P3817 小A的糖果 题目描述 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任意两个相邻的盒子中加起来都只有x颗或以下的糖果,至少得吃掉几颗糖 ...

  5. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  6. PHP盛宴——经常使用函数集锦

    近期写了蛮多PHP,也接触到挺多经常使用的函数,大多都记了笔记,发个博客出来.共同学习.事实上感觉学习一门语言,语法逻辑是软素养.而对语言的熟悉程度仅仅能随着使用时间的增长而慢慢增长,当对一门语言的函 ...

  7. iOS 友盟分享

    iOS 友盟分享 这个主要是提到怎样通过友盟去自己定义分享的步骤: 一.肯定要去友盟官网下载最新的SDK包,然后将SDK导入到你的project目录里面去. 二.注冊友盟账号.将你的APP加入到你的账 ...

  8. animation-list -帧动画

    帧动画实现起来比较简单,今天接触到使用xml来创建帧动画,记录下来. 它说白了,其实就是动态的展示图片而已 1.在xml中定义帧动画,如下 <?xml version="1.0&quo ...

  9. 10.Maven依赖排除 禁止依赖传递 取消依赖的方法

    转自:https://www.cnblogs.com/duanxz/p/6084494.html 大家都知道Maven的优点是依赖管理,特别是前期使用ANT的开发者都有很多感触.最近要开发一个java ...

  10. 用Promise对象封装JQuery的AJAX过程

    let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...