在完成了应用程序结构的所有工作之后,是时候改进我们的应用程序的外观了。在这一步中,您还将了解控件聚合.

Preview

A panel is now displaying the controls from the previous steps

Coding

You can view and download all files at Walkthrough - Step 11.

webapp/view/App.view.xml

<mvc:View

   controllerName="sap.ui.demo.walkthrough.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>

  ▪ 它将一些属性写入index.html的header。在移动设备上是必需的。我们将输入字段和按钮都放在一个名为sap.m. page的包含控件中。该页面提供了一个到0..n的聚合。其他N个称为内容的控件。它还在内容顶部的标题部分显示title属性。页面本身被放置到另一个名为sap.m.app控件的页面聚合中。为我们做了以下重要的事情:

  ▪ 它提供了使用动画在页面之间导航的功能。我们很快就会用到它。

  为了使视图的全屏高度正常工作,我们将值为true的displayBlock属性添加到视图中。实际内容被包装在面板控件中,以便对相关内容进行分组。

webapp/i18n/i18n.properties

# App Descriptor

appTitle=Hello World

appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel

showHelloButtonText=Say Hello

helloMsg=Hello {0}

homePageTitle=Walkthrough

helloPanelTitle=Hello World

We add new key/value pairs to our text bundle for the start page title and the panel title.

Conventions

  ▪不要隐式地使用默认聚合,但总是在视图中显式地声明聚合名称。在上面的示例中,也可以忽略内容聚合,因为面板控件将其声明为默认值,但这会使视图更难读取。

Parent topic: Walkthrough

Previous: Step 10: Descriptor for Applications

Next: Step 12: Shell Control as Container

Related Information

API Reference:sap.m.NavContainer

Samples:sap.m.NavContainer

API Reference:sap.m.Page

Samples:sap.m.Page

UI5-文档-4.11-Pages and Panels的更多相关文章

  1. ElasticSearch学习文档2018.11

    1       Elasticsearch安装 1.1    ES6.0版本安装head插件 1.1 下载head插件 下载地址:https://github.com/mobz/elasticsear ...

  2. Prism 4 文档 ---第11章 部署Prism应用程序

        要成功移动Prism应用到生产中,需要对部署计划为应用程序的设计过程的一部分.本章介绍了注意事项和你需要采取的准备以部署应用程序,以及你要在用户手中获得部署程序所需要采取的行动.     Si ...

  3. “全能”选手—Django 1.10文档中文版Part4

    第一部分传送门 第二部分传送门 第三部分传送门 3.2 模型和数据库Models and databases 3.2.2 查询操作making queries 3.3.8 会话sessions 2.1 ...

  4. 四种生成和解析XML文档的方法详解(介绍+优缺点比较+示例)

    众所周知,现在解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 下面首先给出这四种方法的jar包下载地址 DOM:在现在的Java JDK里都自带了,在xml- ...

  5. HighCharts 详细使用及API文档说明

    一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下 ...

  6. HighCharts 具体使用及API文档说明

    一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每一个部分,比方配置标题(title),副标题(subtitle)等,当中每一个部分又有更细的參数配置,比方标 ...

  7. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  8. 基于数据库的自动化生成工具,自动生成JavaBean、数据库文档、框架代码等(v5.8.8版)

    TableGo v5.8.8版震撼发布,此次版本更新如下:          1.新增两个扩展字段,用于生成自定义模板时使用.          2.自定义模板新增模板目录,可以选择不同分类目录下的模 ...

  9. 四种生成和解析XML文档的方法详解

    众所周知,现在解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 下面首先给出这四种方法的jar包下载地址 DOM:在现在的Java JDK里都自带了,在xml- ...

  10. Django 1.10文档中文版Part4

    2.10 高级教程:如何编写可重用的apps 2.10.1 重用的概念 The Python Package Index (PyPI)有大量的现成可用的Python库.https://www.djan ...

随机推荐

  1. 引用,引用形參,指针形參与指向指针的引用形參,内存泄露及free相关

    (另:关于"引用"更具体的讨论.见此.) 由做UVa133引发的一系列问题及讨论 1.引用类型    C++ Primer P51 引用就是对象的还有一个名字,使用多个变量名指向同 ...

  2. 阻塞队列 BlockingQueue

    在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便利.本文 ...

  3. WinForm下ComboBox设定SelectedValue总结 (SelectedValue==null解决办法)[转]

    http://www.cnblogs.com/qqflying/archive/2013/05/23/3096050.html 实践发现:以SelectedIndex赋值让ComboBox自动选中时能 ...

  4. Python+VSCode+Git 学习总结

    稍等,先写个脑图... 继续,读完本文,你会学会: 1.如何在VSCode中写Python代码: 2.如何在VSCode中使用Git: 为什么写这篇总结 首先,我假设你是一名Python语言初学者,你 ...

  5. IE8下部分方法失效的解决方法

    1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为  $.trim(_id) != ...

  6. webpack入门认知

    webpack 是什么? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖 ...

  7. SEO之H1,H2,H3,H4....STRONG使用方法

    作为一个SEO从业人员,我们不仅仅是要懂得如何通过网站内容和外链等SEO手段,其实一个优秀的SEOER在从事一个SEO案例时,首先着手的是如何从网站程序本身来打好网站SEO基础. 在平时和很多朋友的交 ...

  8. QWidget背景(透明)问题

    一. 背景設定為成黑色,前景色設為白色. 方法一.paltette方式,經測試,該方法不會影響到其他控制元件,建議使用 QPalette bgpal = palette();bgpal.setColo ...

  9. wxWidgets:wxApp概述

    在我们编写wxWidgets应用程序的时候,我们不需要为之定义一个main函数:不过我们需要实现wxApp派生类的一个成员函数OnInit,它的地位大致等价于一般C++程序中的main. 一般来说On ...

  10. Kibana安装及使用

    1.Kibana介绍Kibana是一个基于浏览器页面的Elasticsearch前端展示工具.Kibana全部使用HTML语言和Javascript编写的. 2.安装配置Kibana下载地址:http ...