UI5-文档-4.35-Responsiveness
在这一步中,我们将改进应用程序的响应能力。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的更多相关文章
- Python批量创建word文档(1)- 纯文字
Python创建word文档,任务要求:小杨在一家公司上班,每天都需要给不同的客户发送word文档,以告知客户每日黄金价格.最后贴上自己的联系方式.代码如下: 1 ''' 2 #python根据需求新 ...
- 这些.NET开源项目你知道吗?.NET平台开源文档与报表处理组件集合(三)
在前2篇文章这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧 和这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,大伙热情高涨.再次拿出自己的私货,在.NET平台 ...
- 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 ...
- 将word文档A表格中的内容拷贝到word文档B表格中
Function IsFileExists(ByVal strFileName As String) As Boolean ) <> Empty Then IsFileExists = T ...
- 调用webapi 错误:使用 HTTP 谓词 POST 向虚拟目录发送了一个请求,而默认文档是不支持 GET 或 HEAD 以外的 HTTP 谓词的静态文件。的解决方案
第一次调用webapi出错如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// ...
- Android多媒体--MediaCodec 中文API文档
*由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不 ...
- tweenmax.js 文档
TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的 ...
- Python array,list,dataframe索引切片操作 2016年07月19日——智浪文档
array,list,dataframe索引切片操作 2016年07月19日——智浪文档 list,一维,二维array,datafrme,loc.iloc.ix的简单探讨 Numpy数组的索引和切片 ...
- 树莓派配置文档 config.txt 说明(转)
原文连接:http://elinux.org/RPi_config.txt 由于树莓派并没有传统意义上的BIOS, 所以现在各种系统配置参数通常被存在"config.txt"这个文 ...
- 分析优秀的.NET 文档设计工具Vsdocman 7.1 软件保护技术
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释. 我们知道.NET源代码的注释是Xml格式的注释,在生成程序集时,只需用选中生成Xml注释,Vis ...
随机推荐
- svn分支开发注意事项
1.切换的时候最好查看本文件的是主干上的还是分支上的, 单击右键,点击属性,可以看到以下图片,其中"URL"就可以 看到是主干还是分支 2.切换到分支 点击切换后就选择要切换到的路 ...
- linux和mac使用virtualenv使用和安装
virtualenv是python的三大神器之一,用于创建独立的python虚拟环境,多个python版本相互独立,互不影响,可以在一台电 脑上同时安装多个版本的python,而且不影响本机pytho ...
- JUC锁之 框架
根据锁的添加到Java中的时间,Java中的锁,可以分为"同步锁"和"JUC包中的锁". 同步锁 即通过synchronized关键字来进行同步,实现对竞争资源 ...
- asp.net core 2.0 试用
1.win7专业版,创建core2.0应用后,运行一直报网关错误,后重装社区版, 安装了asp.net和web开发 数据存储和处理 创建Core2.0应用及打开原2.0应用均正常. 2.win10专业 ...
- bzoj 2616 SPOJ PERIODNI——笛卡尔树+树形DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2616 把相同高度的连续一段合成一个位置(可能不需要?),用前缀和维护宽度. 然后每次找区间里 ...
- POJ3585 Accumulation Degree(二次扫描与换根法)
题目:http://poj.org/problem?id=3585 很容易想出暴力.那么就先扫一遍. 然后得到了指定一个根后每个点的子树值. 怎么转化利用一下呢?要是能找出当前点的父亲的 “ 不含当前 ...
- Nginx 整合 FastDFS 实现文件服务器
原文地址:Nginx 整合 FastDFS 实现文件服务器 博客地址:http://www.extlight.com 一.前言 本篇衔接<FastDFS 环境搭建>内容进行讲解,上篇文章我 ...
- java Map实例
此段资料在自于<黑马程序员_毕向东_Java基础视频教程第16天-06-集合(Map练习)> HashMap 如果对象可能会产生很多对象,可能就会需要存储,就有可能会存到hashSet(哈 ...
- [转]Serv-U 配置
- C# winfrom ComboBox 调整下拉菜单的高度
1.设置属性 // 1.属性设置 DrawMode ->OwnerDrawVariable this.cboBoxPostID.DrawMode = System.Windows.Forms.D ...