在这一步中,我们将改进应用程序的响应能力。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. 读写XML文档时,去掉新增加节点的“空命名空间”(xmlns=””)

    在做对ReprotViewer编程时,想做一个用户可以更改显示/打印列的功能,大致看了下,只需要通过对rdlc文件中改变其<Hidden>节点值为false/true,即可实现对应某列的显 ...

  2. cookie、localStorage、sessionStorage 的生命周期

    生命周期 存储 生命周期 cookie 没有设置 expires 选项时,cookie 的生命周期仅限于当前会话中,关闭浏览器意味着这次会话的结束,所以会话 cookie 仅存在于浏览器打开状态之下. ...

  3. centos7 MFS drbd keepalived

    环境: centos7.3 + moosefs 3.0.97 + drbd84-utils-8.9.8-1 + keepalived-1.2.13-9 工作原理: 架构图: 节点信息: 节点名     ...

  4. sqlserver 同义名的使用

    USE [ccflow5]GOdrop synonym ccusergo/****** Object:  Synonym [dbo].[ccuser]    Script Date: 11/12/20 ...

  5. POJ1006——中国剩余定理

    题目:http://poj.org/problem?id=1006 中国剩余定理:x= m/mj + bj + aj 讲解:http://www.cnblogs.com/MashiroSky/p/59 ...

  6. git: fatal: Could not read from remote repository

    This is probably an Intellij problem. Your key are managed natively by ssh, and Intellij has it's ow ...

  7. paramiko不能通过cd改变路径分析

    原文: 意思就是 每次执行execute_command()会重新创建一个新的会话,而新会话的当前路径为缺省目录. (这和linux中每次终端登录类似) 解决方法: .execute_command( ...

  8. Makefile | Linux嵌入式编程 使用详细图解

    针对的是对Makefile一点都不会的小白哦! 练习之前我们要做好准备: (1):第一步创建一个目录,因为实验过程中生成的文件会很多,不要把你系统里的文件搞得乱七八糟. [cjj@bogon ~]$ ...

  9. 分布式一致性协议之:Gossip(八卦)算法

    Gossip算法因为Cassandra而名声大噪,Gossip看似简单,但要真正弄清楚其本质远没看起来那么容易.为了寻求Gossip的本质,下面的内容主要参考Gossip的原始论文:<<E ...

  10. R语言学习——输入与输出

    导入数据: grades<-read.table("D:/ProgramData/test1.txt",sep="\t") 求均值:mean() 求方差: ...