UI5-文档-4.37-Content Density
在本演练教程的这一步中,我们将根据用户的设备调整内容密度。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
API
Reference: sap.ui.Device.media.RANGESETS
API
Reference: jQuery.sap.syncStyleClass
UI5-文档-4.37-Content Density的更多相关文章
- BooStrap4文档摘录 2 Content, Component
Content Reboot:从新写了主要元素的排列. 本章讲了各种元素及其相关的类. ⚠️ 文档左上角有搜索栏. Components Alert✅ Badge✅ Button✅和Button gr ...
- Java生成word文档
itext-rtf-2.1.7.jar,下载地址:http://download.csdn.net/detail/xuxu198899223/7717727 itext-2.1.7.jar 下载地址: ...
- JavaScript获取IE版本号与HTML设置ie文档模式
JavaScript获取IE版本代码: var gIE = getIE(); alert(gIE.version) function getIE() { var rmsie = /(msie) ([\ ...
- Jquery重新学习之四[核心属性与文档处理属性]
1:核心.each(callback),size(),length(),get([index]) 1.1 .each(callback)通过它可以遍历对象.数组的属性值并进行处理 <form i ...
- Umbraco(2) - Creating Your First Template and Content Node(翻译文档)
创建(编辑)你的第一个模板(Template) 展开 Settings > Templates文件夹 - 然后你应该看到子节点名为"Homepage" - 这是我们在创建Do ...
- FOUC - Flash Of Unstyled Content 文档样式闪烁
问题描述 偶然间看到FOUC这个单词,在Google里找了半天终于发现了它的含义:Flash Of Unstyled Content.它指的是在某些情况下,IE在加载网页时会出现短暂的CSS样式失 ...
- FOUC(Flash Of Unstyled Content)文档样式闪烁
今天看面试题看到了这个新名词..我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧. 什么是文档样式闪烁(Flash Of Unstyled Co ...
- sharepoint 2010 如何创建文档库内容类型content type
转:http://biancheng.dnbcw.info/linux/441643.html 这次主要是记录下,如何来创建文档内容类型,例如新建文档的时候,可以选择不同模板,有word,excel文 ...
- 第15.37节 PyQt(Python+Qt)入门学习:containers容器类部件QMdiArea多文档界面部件详解及编程开发案例
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.引言 老猿在前期学习PyQt相关知识时,对每个组件的属性及方法都研 ...
- Java多种方式动态生成doc文档
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5280272.html 本来是要在Android端生成doc的(这需求...),最后方法没有好的方法能够在An ...
随机推荐
- S5PV210 移植无线wifi网卡 MT7601
一.准备工作 1.MT7601驱动下载 点击下载 2.插入usb WiFi 启动开发板linux,lsusb查看usb驱动 Bus 001 Device 003: ID 148f:7601看到的是该驱 ...
- 基于TLS(线程局部存储)的高效timelog实现
什么是timelog? 我们在分析程序性能的时候,会加入的一些logging信息记录每一部分的时间信息 timelog模块的功能就是提供统一的接口来允许添加和保存logging 我们正在用的timel ...
- gphoto2
连上usb线,系统会跳出detect到camera的提示,这里一定要选择“unmount”,否则会面的命令执行会有问题 hjs@ubuntu:~$ gphoto2 --auto-detect Mode ...
- mysql ssh 端口转发
某些时候 mysql 只允许 指定的 ip连接 .这时候怎么在本机 连接mysql 的呢? 条件 1 mysql 只有 允许 指定ip连接 2 有连接 指定 ip 服务器的 账密 这时候我们可以通 ...
- 优化Django ORM中的性能问题(含prefetch_related 和 select_related)
Django是个好工具,使用的很广泛. 在应用比较小的时候,会觉得它很快,但是随着应用复杂和壮大,就显得没那么高效了.当你了解所用的Web框架一些内部机制之后,才能写成比较高效的代码. 怎么查问题 W ...
- Telnet 工具远程连接服务器
1.启动tomcat 2. 使用telnet命令 打开CMD,输入telnet localhost 8080 3.显示如下界面,说明已经连接成功 4. 复制如下代码到连接成功的界面 HEAD / ...
- SQL 将非标准日期格式转换成标准格式,进行条件判断
a.JLDate为非标准日期格式: 例: 2011-8-28 0:00:000011-8-28 0:00:000111-8-4 0:00:00 select CONVERT(varchar(50),C ...
- yii framework config 可以被配置的项目
http://hi.baidu.com/lossless1009/item/990fdb33a52ffcf1e7bb7a4c <?php002 003 // 取消下行的注释,来定义一个路径别名0 ...
- 修改mui accordion(折叠面板)默认展开收缩行为
mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素. 实际需求:展开其中一个不必收缩同级元素. 分析mui.js源代码: window.addEven ...
- spring boot学习(2) SpringBoot 项目属性配置
第一节:项目内置属性 application.properties配置整个项目的,相当于以前的web.xml: 注意到上一节的访问HelloWorld时,项目路径也没有加:直接是http://loca ...