在本演练教程的这一步中,我们将根据用户的设备调整内容密度。SAPUI5包含不同的内容密度,允许您为支持触摸的设备显示更大的控件,为鼠标操作的设备显示更小、更紧凑的设计。在我们的app中,我们将检测设备并相应地调整密度。

Preview

The content density is compact on desktop devices and cozy on touch-enabled devices

Coding

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

webapp/Component.js

...
init: function () {
... },
...
getContentDensityClass :function(){
if(!this._sContentDensityClass){
if(!sap.ui.Device.support.touch){
this._sContentDensityClass ="sapUiSizeCompact";
}else{
this._sContentDensityClass ="sapUiSizeCozy";
}
}
returnthis._sContentDensityClass;
} });
});

为了准备内容密度特性,我们还将添加一个助手方法getContentDensityClass。SAPUI5控件可以以多种尺寸显示,例如,为桌面和非触控设备优化的紧凑尺寸,在一个舒适的模式,是优化触摸互动。控件在应用程序的HTML结构中查找特定的CSS类,以调整其大小。

这个助手方法查询sap.ui。设备API直接用于客户端的触摸支持,如果不支持触摸交互,则返回CSS类sapUiSizeCompact,其他所有情况下都返回sapUiSizeCozy。我们将在整个应用程序编码中使用它来设置适当的内容密度CSS类。

webapp/controller/App.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { onInit:function(){
this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
},
onOpenDialog: function () {
this.getOwnerComponent().openHelloDialog();
}
});
});

webapp/controller/HelloDialog.js我们在app控制器上添加onInit方法,该方法在实例化app视图时调用。在这里,我们查询在app组件上定义的helper函数,以在app视图上设置相应的样式类,app视图中的所有控件现在将自动调整到样式定义的紧凑或舒适的大小。

sap.ui.define([
"sap/ui/base/ManagedObject"
], function (ManagedObject) {
"use strict"; return ManagedObject.extend("sap.ui.demo.walkthrough.controller.HelloDialog", { constructor : function (oView) {
this._oView = oView;
}, exit : function () {
delete this._oView;
}, open : function () {
var oView = this._oView;
var oDialog = oView.byId("helloDialog"); // create dialog lazily
if (!oDialog) {
var oFragmentController = {
onCloseDialog : function () {
oDialog.close();
}
};
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog", oFragmentController);
// connect dialog to the root view of this component (models, lifecycle)
oView.addDependent(oDialog);
// forward compact/cozy style into dialog
jQuery.sap.syncStyleClass(oView.getController().getOwnerComponent().getContentDensityClass(), oView, oDialog);
}
oDialog.open();
}
}); });

“Hello World”对话框不是app view的一部分,而是在DOM中一个叫做“static area”的特殊部分打开的。对话框不知道在app视图中定义的content density类,所以我们手动将app的style类与对话框同步。

webapp/manifest.json

...
"sap.ui5": {
...
"dependencies": {
...
},
"contentDensities":{
"compact":true,
"cozy":true
}
}

在sap.ui5命名空间的contentden密度部分,我们指定了应用程序支持的模式。像SAP Fiori launchpad这样的容器允许基于这些设置切换内容密度。

由于我们刚刚根据设备功能启用了应用程序在这两种模式下运行,所以我们可以在应用程序描述符中将这两种模式设置为true。

这是最后一步,您已经成功地完成了演练!

Summary

您现在应该熟悉SAPUI5的主要开发范式和概念,并创建了一个非常简单的第一个应用程序。

如果您想更深入地研究特定主题,可以使用其他教程,这些教程更详细地展示了本演练的一些方面和高级主题。

Parent topic: Walkthrough

Previous: Step 36:
Device Adaptation

Next: Step 38:
Accessibility

Related Information

Content
Densities

API
Reference: sap.ui.Device.media.RANGESETS

API Reference: sap.ui.Device

API
Reference: jQuery.sap.syncStyleClass

UI5-文档-4.37-Content Density的更多相关文章

  1. BooStrap4文档摘录 2 Content, Component

    Content Reboot:从新写了主要元素的排列. 本章讲了各种元素及其相关的类. ⚠️ 文档左上角有搜索栏. Components Alert✅ Badge✅ Button✅和Button gr ...

  2. Java生成word文档

    itext-rtf-2.1.7.jar,下载地址:http://download.csdn.net/detail/xuxu198899223/7717727 itext-2.1.7.jar 下载地址: ...

  3. JavaScript获取IE版本号与HTML设置ie文档模式

    JavaScript获取IE版本代码: var gIE = getIE(); alert(gIE.version) function getIE() { var rmsie = /(msie) ([\ ...

  4. Jquery重新学习之四[核心属性与文档处理属性]

    1:核心.each(callback),size(),length(),get([index]) 1.1 .each(callback)通过它可以遍历对象.数组的属性值并进行处理 <form i ...

  5. Umbraco(2) - Creating Your First Template and Content Node(翻译文档)

    创建(编辑)你的第一个模板(Template) 展开 Settings > Templates文件夹 - 然后你应该看到子节点名为"Homepage" - 这是我们在创建Do ...

  6. FOUC - Flash Of Unstyled Content 文档样式闪烁

      问题描述 偶然间看到FOUC这个单词,在Google里找了半天终于发现了它的含义:Flash Of Unstyled Content.它指的是在某些情况下,IE在加载网页时会出现短暂的CSS样式失 ...

  7. FOUC(Flash Of Unstyled Content)文档样式闪烁

    今天看面试题看到了这个新名词..我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧. 什么是文档样式闪烁(Flash Of Unstyled Co ...

  8. sharepoint 2010 如何创建文档库内容类型content type

    转:http://biancheng.dnbcw.info/linux/441643.html 这次主要是记录下,如何来创建文档内容类型,例如新建文档的时候,可以选择不同模板,有word,excel文 ...

  9. 第15.37节 PyQt(Python+Qt)入门学习:containers容器类部件QMdiArea多文档界面部件详解及编程开发案例

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.引言 老猿在前期学习PyQt相关知识时,对每个组件的属性及方法都研 ...

  10. Java多种方式动态生成doc文档

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5280272.html 本来是要在Android端生成doc的(这需求...),最后方法没有好的方法能够在An ...

随机推荐

  1. 八、面向对象模型(用例图,序列图,类图,生成Java源代码及Java源代码生成类图)

    面向对象模型 面向对象模型是利用UML(统一建模语言)的图形来描述系统结构的模型,它从不同角度实现系统的工作状态.这些图形有助于用户,管理人员,系统分析人员,开发人员,测试人员和其他人员之间进行信息交 ...

  2. ARP命令详解

    ARP是一个重要的TCP/IP协议,并且用于确定对应IP地址的网卡物理地址.实用arp命令,我们能够查看本地计算机或另一台计算机的ARP高速缓存中的当前内容.此外,使用arp命令,也可以用人工方式输入 ...

  3. Excel 从字符串中提取日期值

    因为工作需要,Excel 表中有一串字符,需要将字符里的日期提取出,并转成日期值. 需要转成如下格式: 可使用以下公式. =DATEVALUE(TEXT(MID(I2,1,4)+1&" ...

  4. Oracle GI 日志收集工具 - TFA 简介

    转载自:https://blogs.oracle.com/Database4CN/entry/tfa_collector_%E4%BB%8B%E7%BB%8D 1.TFA的目的: TFA是个11.2版 ...

  5. Hadoop和云计算

    什么是Hadoop? Hadoop代表的就是基于异步存储(HDFS)的并行计算(Map-Reduce). 首先Hdsf/ Kudu他的存储是分布式的存储,hive(map-reduce).impala ...

  6. 嵌入式QT程序的汉字显示

    因底层服务程序全是GBK格式的,所以QT程序要全部更改编码方式. 1.QT程序编码更改 creator->edit->更改编码方式GBK main程序中做如下修改,并注意语句次序 int ...

  7. bzoj 4772 显而易见的数论——拆分数(五边形数定理)+线性筛

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4772 题解:https://blog.csdn.net/Dream_Lolita/artic ...

  8. 大数据工具篇之flume1.4-安装部署指南

    一.引言 flume-ng是一个分布式.高可靠和高效的日志收集系统,flume-ng是flume的新版本的意思,其中“ng”意为new generate(新一代),目前来说,flume-ng 1.4是 ...

  9. 【Spring-AOP-学习笔记-4】@After后向增强处理简单示例

    说明 After增强处理的作用非常类似于异常处理中的finally块的作用,无论如何,他总会在方法执行结束之后被织入,因此特别适应于垃圾回收. 项目结构 程序 @Component("hel ...

  10. bzoj4161: Shlw loves matrixI

    Description 给定数列 {hn}前k项,其后每一项满足 hn = a1*h(n-1) + a2*h(n-2) + ... + ak*h(n-k) 其中 a1,a2...ak 为给定数列.请计 ...