SAP UI5 sap.ui.Device.media.initRangeSet 方法的单步调试

简介: SAP UI5 sap.ui.Device.media.initRangeSet 方法的单步调试

每个 SAP UI5 应用在初始化时,都会触发这个方法的调用。


调用栈的上下文:


image.png

sap.ui.define(['sap/ui/Device'], function(Device) {


可以看到 Device.js 文件内,有这两行代码进行默认 RangeSet 的初始化:


//Always initialize the default media range set
  Device.media.initRangeSet();
  Device.media.initRangeSet(RANGESETS["SAP_STANDARD_EXTENDED"]);



Device.media._predefinedRangeSets 就是 SAP UI5 官网里介绍的预定义的 Range Set:


image.png


默认的 RangeSet:


image.png


默认的 RangeSet 是 SAP_STANDARD, 如下图第 1041 行代码所示:

image.png



两个 point 决定三个 device type:


image.png

三个 query 和对应的 device type:


image.png

这里是通过 window 原生 API,matchMedia 来计算的。


image.png


注册 RangeSet 变更的事件监听函数:


if (oQuery.media.addEventListener) {
oQuery.media.addEventListener("change", oConfig.listener);


sap.ui.Device.orientation:


image.png

sap.ui.Device.os:


image.png


这里设置 oReducedNavigator:


var setDefaultNavigator = function () {
  oReducedNavigator = {
    userAgent: window.navigator.userAgent,
    platform: window.navigator.platform
  };
  // Only add property standalone in case navigator has this property
  if (window.navigator.hasOwnProperty("standalone")) {
    oReducedNavigator.standalone = window.navigator.standalone;
  }
  };


首先使用正则表达式试图匹配 iOS 系统:

image.png


rPlatform = /\(([a-zA-Z ]+);\s(?:[U]?[;]?)([\D]+)((?:[\d._]*))(?:.*[\)][^\d]*)([\d.]*)\s/;
  aMatches = userAgent.match(rPlatform);
  if (aMatches) {
    var rAppleDevices = /iPhone|iPad|iPod/;


如果匹配不成功,再试图匹配 Android:


//Firefox on Android
  rPlatform = /\((Android)[\s]?([\d][.\d]*)?;.*Firefox\/[\d][.\d]*/;
  aMatches = userAgent.match(rPlatform);
  if (aMatches) {
    return ({
    "name": OS.ANDROID,
    "versionStr": aMatches.length == 3 ? aMatches[2] : ""
    });
  }




image.png

最后再匹配 DesktopOS:


image.png

从 userAgent 字段就能知道是 Windows10,X64 架构:


image.png


最后设置到 Device 对象里,方便其他代码消费:


image.png


OS 大写,模拟其他编程语言里的枚举类型。


sap.ui.Device.resize

保存了当前窗口的宽度(width)和高度(height)。


在 SAP UI5 应用初始化时,会执行 setResizeInfo(Device.resize);


image.png


执行到这一步时,Device 对象明细如下图:

image.png


使用 windowsSize 获取当前 window 尺寸:

image.png


实际上就是使用的 windows 全局对象的 innerHeight 和 innerWidth 这两个属性。



image.png

Support Detect 的实现源代码:


image.png


var detectTouch = function () {
  return !!(('ontouchstart' in window)
    || (window.navigator.maxTouchPoints > 0)
    || (window.DocumentTouch && document instanceof window.DocumentTouch)
    || (window.TouchEvent && Device.browser.firefox));
  };
  Device.support.touch = detectTouch();


相关文章
|
Java Android开发 iOS开发
SAPGUI 里运行的老程序,如何对新的 SAP Fiori Belize Theme 进行适配?
SAPGUI 里运行的老程序,如何对新的 SAP Fiori Belize Theme 进行适配?
|
Java BI 数据库
使用 SAP UI5 ABAP Repository 部署本地 SAP UI5 应用到 ABAP 服务器的单步调试
使用 SAP UI5 ABAP Repository 部署本地 SAP UI5 应用到 ABAP 服务器的单步调试
|
API Android开发 iOS开发
SAP UI5 sap.ui.Device.media.initRangeSet 方法的单步调试
SAP UI5 sap.ui.Device.media.initRangeSet 方法的单步调试
|
Web App开发 测试技术 API
SAP UI5 sap.ui.Device.media 的使用介绍
SAP UI5 sap.ui.Device.media 的使用介绍
|
前端开发 开发者
SAP UI5 sap.ui.Device.media.RANGESETS 的使用介绍
SAP UI5 sap.ui.Device.media.RANGESETS 的使用介绍
|
前端开发
SAP UI5 sap.ui.Device.media 公有方法介绍
SAP UI5 sap.ui.Device.media 公有方法介绍
SAP UI5 BaseObject.extend 方法的单步调试
SAP UI5 BaseObject.extend 方法的单步调试
|
安全 UED CDN
关于 SAP UI5 floating footer 显示与否的单步调试以及使用 SAP UI5 的收益
关于 SAP UI5 floating footer 显示与否的单步调试以及使用 SAP UI5 的收益
|
Web App开发 前端开发 API
关于 SAP UI5 Device API 的使用介绍
设备 API ( sap.ui.Device ) 是一个 API,它提供有关设备细节的信息,例如操作系统及其版本、浏览器和浏览器版本、屏幕尺寸、当前方向以及对特定功能的支持,如触摸事件支持, 方向变化等等。
|
Web App开发 前端开发 开发者
SAP Fiori Launchpad 上看不到任何 tile 应该怎么办?
SAP Fiori Launchpad 上看不到任何 tile 应该怎么办?