之前我们对于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. Css3 过渡（Transition）特效回调函数

    Css3 出来之后,能够说是替代了Flash,通过使用Html5和Css3的完美结合.就能够做出不论什么你想得到的特效,这里不再阐述... 近期在做一个喝水签到的功能.在想签到成功之后,签到框能够模拟 ...

  2. Java IO：SocketChannel和Selector在ZooKeeper中应用

    转载请注明出处:jiq•钦's technical Blog 假设不了解SocketChannel和Selector.请先阅读我的还有一篇博文:点击打开链接 ZooKeeper的启动从QuorumPe ...

  3. 华为畅玩5 (CUN-AL00) 刷入第三方twrp Recovery 及 root

    华为畅玩5 (CUN-AL00) 刷入第三方twrp Recovery  及 root 下载地址    http://pan.baidu.com/s/1hsn6VzA 1. 在官网申请解锁码    申 ...

  4. Mysql基本增删改查

    1登陆服务器 mysql -h localhost -u username -p password 2查看存在数据库 show databases; 3创建一个数据库(例如名字为class1,以下都是 ...

  5. Vue+TypeScript学习

    Vue CLI 内置了 TypeScript 工具支持.在 Vue 的下一个大版本 (3.x) 中也计划了相当多的 TypeScript 支持改进,包括内置的基于 class 的组件 API 和 TS ...

  6. [Python] Object spread operator in Python

    In JS, we have object spread opreator: const x = { a: '1', b: '2' } const y = { c: '3', d: '4' } con ...

  7. sass和less，优秀的前端样式预处理器

    身为切图界的一员,或者说在前端界打滚了一段日子的你.会慢慢地发现.如今的css编写已经不能满足自己的效率. 假设有更强大的框架,让你的css更灵活和更easy复用和维护,那该多好啊.非常明显,这个早已 ...

  8. C#调用天气预报网络服务

    本程序通过调用网络上公开的天气预报网络服务来显示某个地区三天的天气,使用到的网络服务地址:http://www.webxml.com.cn/WebServices/WeatherWebService. ...

  9. Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值

    Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值 题外话:一个问题研究到最后,那边记录文档的前半部分基本上都是没用的,甚至是错误的. 重点在最后,前边不过一些假想猜測. ht ...

  10. Qt Creator 源码学习 03：qtcreator.pro

    当我们准备好 Qt Creator 的源代码之后,首先进入到它的目录,来看一下它的源代码目录有什么奥秘. 这里一共有 9 个文件夹和 9 个文件.我们来一一看看它们都是干什么用的. .git: 版本控 ...