在这一步中,我们将改进应用程序的响应能力。SAPUI5应用程序可以在手机、平板电脑和桌面设备上运行,我们可以对应用程序进行配置,以便为每个场景充分利用屏幕空间。幸运的是,SAPUI5控件类似于sap.m.Table已经提供了许多我们可以使用的特性。

Preview

A responsive table is hiding some of the columns on small devices

Coding

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

webapp/view/InvoiceList.view.xml

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Table
id="invoiceList"
class="sapUiResponsiveMargin"
width="auto"
items="{
path : 'invoice>/Invoices',
sorter : {
path : 'ShipperName',
group : true
}
}">
<headerToolbar>
<Toolbar>
<Title text="{i18n>invoiceListTitle}"/>
<ToolbarSpacer/>
<SearchField width="50%" search="onFilterInvoices"/>
</Toolbar>
</headerToolbar>
<columns>
<Column
hAlign="End"
minScreenWidth="Small"
demandPopin="true"
width="4em">
<Texttext="{i18n>columnQuantity}"/>
</Column>
<Column>
<Texttext="{i18n>columnName}"/>
</Column>
<Column
minScreenWidth="Small"
demandPopin="true">
<Texttext="{i18n>columnStatus}"/>
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="false">
<Texttext="{i18n>columnSupplier}"/>
</Column>
<Column
hAlign="End">
<Texttext="{i18n>columnPrice}"/>
</Column>
</columns>
<items>
<ColumnListItem
type="Navigation"
press="onPress">
<cells>
<ObjectNumbernumber="{invoice>Quantity}" emphasized="false"/>
<ObjectIdentifiertitle="{invoice>ProductName}"/>
<Texttext="{
path: 'invoice>Status',
formatter: '.formatter.statusText'
}"/>
<Texttext="{invoice>ShipperName}"/>
<ObjectNumber
number="{
parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
unit="{view>/currency}"
state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
</cells>
</ColumnListItem>
</items>
</Table> </mvc:View>

由于表的每行有多个单元格,我们必须为表定义列,并根据数据命名这些列。加入5个sap.m.Column列控件的列聚合和配置各略有不同:我们只需将标记< list >替换为< table >,就可以用表替换列表。该表有一个内置的响应特性,使我们能够使应用程序更加灵活。表和列表共享相同的属性集,因此我们可以简单地重用这些属性和排序器。

Quantity: 这一列将包含一个短数字,因此我们将对齐设置为End(在LTR语言中表示“正确”),并将宽度设置为4em,这对于列描述来说已经足够长了。作为描述文本,我们使用 sap.m.Text引用资源包属性的文本控件。我们将属性minScreenWidth设置为Small,以表明此列在电话上不那么重要。通过将属性demandPopin设置为true,我们将告诉表在主列下面显示这一列。

Name: 我们的主列有相当大的宽度width来显示所有的细节。它将始终显示.

Status: 状态并不是那么重要,所以我们也会将minScreenWidth设置为small, demandPopin设置为true,将它显示在小屏幕的name字段下面。

Supplier我们将minScreenWidth设置为Tablet,将demandPopin设置为false,从而完全隐藏了电话设备上的Supplier列。

Price这一栏总是可见的,因为它包含我们的发票价格。

现在我们将把信息拆分到与上面定义的列匹配的单元格上,而不是以前的ObjectListItem。因此,我们将其更改为具有相同属性的ColumnListItem控件,但现在使用的是单元格聚合。这里我们创建五个控件来显示我们的数据:

Quantity

A simple sap.m.ObjectNumber control that is bound to our data field.

Name

A sap.m.ObjectIdentifier controls that specifies the name.

Status

A sap.m.Text control with the same formatter as before.

Supplier

A simple sap.m.Text control.

Price

An ObjectNumber control with the same formatter as the attributes number and numberUnit from the previous steps.

现在我们已经响应性地定义了我们的表,并且可以在减小浏览器屏幕大小时看到结果。供应商栏没有显示在电话号码上,这两栏的数量和状态将显示在名称下面。

webapp/i18n/i18n.properties

...
# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done
columnQuantity=Quantity
columnName=Name
columnSupplier=Supplier
columnStatus=Status
columnPrice=Price # Detail Page
...

当我们减小浏览器的屏幕大小或在一个小设备上打开应用程序时,我们可以看到结果。我们将列名和属性标题添加到i18n文件中。

Conventions

  针对手机、平板电脑和桌面设备的不同屏幕大小优化应用程序。

Parent topic: Walkthrough

Previous: Step 34:
Custom Controls

Next: Step 36:
Device Adaptation

Related Information

Configuring
Responsive Behavior of a Table

UI5-文档-4.35-Responsiveness的更多相关文章

  1. Python批量创建word文档(1)- 纯文字

    Python创建word文档,任务要求:小杨在一家公司上班,每天都需要给不同的客户发送word文档,以告知客户每日黄金价格.最后贴上自己的联系方式.代码如下: 1 ''' 2 #python根据需求新 ...

  2. 这些.NET开源项目你知道吗?.NET平台开源文档与报表处理组件集合(三)

    在前2篇文章这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧 和这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,大伙热情高涨.再次拿出自己的私货,在.NET平台 ...

  3. ORACLE LINUX 6.3 + ORACLE 11.2.0.3 RAC + VBOX安装文档

    ORACLE LINUX 6.3 + ORACLE 11.2.0.3 RAC + VBOX安装文档 2015-10-21 12:51 525人阅读 评论(0) 收藏 举报  分类: Oracle RA ...

  4. 将word文档A表格中的内容拷贝到word文档B表格中

    Function IsFileExists(ByVal strFileName As String) As Boolean ) <> Empty Then IsFileExists = T ...

  5. 调用webapi 错误:使用 HTTP 谓词 POST 向虚拟目录发送了一个请求,而默认文档是不支持 GET 或 HEAD 以外的 HTTP 谓词的静态文件。的解决方案

    第一次调用webapi出错如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// ...

  6. Android多媒体--MediaCodec 中文API文档

    *由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不 ...

  7. tweenmax.js 文档

    TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的 ...

  8. Python array,list,dataframe索引切片操作 2016年07月19日——智浪文档

    array,list,dataframe索引切片操作 2016年07月19日——智浪文档 list,一维,二维array,datafrme,loc.iloc.ix的简单探讨 Numpy数组的索引和切片 ...

  9. 树莓派配置文档 config.txt 说明(转)

    原文连接:http://elinux.org/RPi_config.txt 由于树莓派并没有传统意义上的BIOS, 所以现在各种系统配置参数通常被存在"config.txt"这个文 ...

  10. 分析优秀的.NET 文档设计工具Vsdocman 7.1 软件保护技术

    Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释. 我们知道.NET源代码的注释是Xml格式的注释,在生成程序集时,只需用选中生成Xml注释,Vis ...

随机推荐

  1. ORACLE与SQL SERVER语法区别

    一.数据类型 ORACLE与SQL SERVER在数据类型的对比如下: SQL SERVER ORACLE 数字类型 DECIMAL[(P[, S])] NUMBER[(P[, S])] NUMERI ...

  2. Mac OS X 10.9.2 配置 jdk1.8.0_05 环境变量

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/gcvdsvb/article/details/24543543 首先到 oracle 站点下载 ss ...

  3. 批处理(bat)命令学习的一些总结

    这篇笔记是我对批处理学习的一些总结,能在系统帮助里找到的内容我就不写了,太偏门的也不写,只写些个人感觉很好用的技巧,大部分属于整理 一.set 篇: 1.set(无开关) set .=test set ...

  4. 4.图像sensor的特性和驱动解析

    修改 摄像头SDK中支持的sensor需要做的事 例如:ar0130 --> ov9712 1.修改加载load3518e脚本的参数 vi /etc/profile ./load3518e -i ...

  5. MongoDB注册Windows服务启动

    下载MongoDB安装到:E:\Work_App\MongoDB 这个目录 安装:E:\Work_App\MongoDB (安装在专门的目录中) 配置: 1.在E:\Work_App\MongoDB\ ...

  6. php实现Facebook风格的 time ago函数

    php实现Facebook风格的 time ago函数 非常好用,只要把里面的英文替换成中文就行了 英文函数代码如下: <?php function nicetime($date) { if(e ...

  7. 监督学习(Supervised learning)

    定义符号 m:训练样本的数目 n:特征的数量 x‘s:输入变/特征值 y‘s:输出变量/目标变量 (x,y):训练样本 ->(x(i),y(i)):训练集,第i个训练样本,i=1,2..,m 监 ...

  8. golang channel 的使用

    本文对channel使用中的几个疑惑,以例子的形式加以说明. 普通channel 缺省情况下,发送和接收会一直阻塞着,直到另一方准备好. 例如: package main import ( " ...

  9. 【python】python GUI开发框架介绍

    Python GUI开发的库不少.最常用的的也就几个. Tkinter -Tk是Python自带的GUI库, 上手简单, 做个简单界面基本够用了,但是不够美观,功能不全面. wxPython -开源免 ...

  10. json格式字符串处理

    public class InternalClass         {             public int MID;             public string Name;     ...