之前我们对于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. cocos2d-x 3.0 Loading界面实现

    这个世界每一天都在验证我们的渺小,但我们却在努力创造,不断的在这生活的画卷中留下自己的脚印.或许等到我们老去的那一天,老得不能动仅仅能靠回顾的那一天.你躺在轮椅上,不断的回顾过去.相思的痛苦忘不了,相 ...

  2. searchView-风格调整

    5.1以后的searchView 风格调整属性相比于4.4有了些更改.我们先看代码 <style name="DeskClock.Theme" parent="an ...

  3. php课程 12-38 php的类的构造方法和析构方法怎么写

    php课程 12-38 php的类的构造方法和析构方法怎么写 一.总结 一句话总结:a.__construct(参数){},__destruct(){},b.如果类中的一个方法和类名相同,则该方法为构 ...

  4. ELKstack 中文指南

    https://www.elastic.co/downloads ELKstack 中文指南 .net Elasticsearch 学习入门笔记   一. es安装相关1.elasticsearch安 ...

  5. c#的中英文混合字符串截取

    public class StringHelper     {         public static string GetSubString(string str, int len)       ...

  6. 让人难过的 openssl_pkcs7_encrypt

    让人难过的 openssl_pkcs7_encrypt 用PHP.NET的范例,没有加密结果,也没有报错信息,而openssl_pkcs7_sign()函数则返回 error opening inpu ...

  7. nuxt按需引入 element-UI、自定义主题色（终极按需引入）

    首先你要知道 nuxt.js怎么引入第三方插件 : 不多BB. 一.按需引入element-UI 第一步:安装 babel-plugin-component: npm install babel-pl ...

  8. vc 常用语句

    1) CMainFrame* pmainframe=(CMainFrame*)AfxGetMainWnd();CChildFrame *m_finderframe=(CChildFrame*)pmai ...

  9. Dcloud课程5 php如何实现文件缓存技术（静态数据缓存）

    Dcloud课程5 php如何实现文件缓存技术(静态数据缓存) 一.总结 一句话总结:保存在磁盘上的静态文件,用PHP生成数据到静态文件中.其实cookie和session使用的就是这样的技术,所以c ...

  10. Hamming correct

    从数的最左边开始,并标记为1 将2的平方的位置留出来,做为校验位例如,8位2进制数10011010===>_ _ 1 _ 0 0 1 _ 1 0 1 0 位置1用来校验最右边的位位1的位置1 3 ...