SAP UI5 setProperty 的执行逻辑单步调式和分析

简介: SAP UI5 setProperty 的执行逻辑单步调式和分析

按照 Jerry 这篇文章介绍的代码,运行之后,给类型为 sap.ui.model.type.Currency 的字段设置一个非 number 类型的值之后,触发该数据类型自带的数据校验机制,显示 Enter a number 的错误消息。

SAP UI5 应用开发教程之四十六 - 使用 Message Manager 实现开箱即用的验证(Validation)信息抛出

本文介绍 SAP UI5 ManagedObjectsetProperty 方法的执行原理。

首先明确,什么是 ManagedObject

托管属性表示 ManagedObject 的状态。 它们可以存储简单数据类型(如“字符串”或“整数”)的单个值。 它们具有名称(例如“size”)和获取当前值(getSize)或设置新值(setSize)的方法。 当通过调用 setter 修改属性时,ManagedObject 被标记为无效。 可以使用 #bindProperty 方法将托管属性绑定到 sap.ui.model.Model 中的属性。 对模型属性的更新将自动反映在托管属性中,并且 - 如果 TwoWay 数据绑定处于活动状态,则对托管属性的更改将反映在模型中。 可以通过调用#unbindProperty 删除现有绑定。


当 input 控件失去 focus 之后,触发 onsapfocusleave,这个方法调用 onChange

传入的输入参数,event 类型为 sapfocusleave


如果当前最新的值和之前的值 getLastValue() 不相等,则调用 this.setValue

Input.setValue 调用 InputBase.setValue:

setValue 最终调用 setProperty,属性名称为 value


正式进入 setProperty 方法,首先从 mProperties 里得到修改之前的值:

然后进行 validateProperty


validateProperty 内部,首先从 this.getMetadata().getManagedProperty(sPropertyName) 读取该 value 属性的 元数据

关于 SAP UI5 控件的元数据设计,请参考我这篇文章:

深入学习SAP UI5框架代码系列之四:SAP UI5控件的元数据实现

获得 string 类型对象:

类型对象由一系列函数组成:

执行 normalize 操作:


将这个不合法的 value,设置到 this.mProperties[sPropertyName] 中。

进行双向绑定的逻辑处理:this.updateModelProperty

拿到绑定对象:

进入双向绑定的处理分支:

if (oBinding && oBinding.getBindingMode() == BindingMode.TwoWay) {
        oBindingInfo.skipPropertyUpdate++;
        SyncPromise.resolve(oValue).then(function(oValue) {
          return oBinding.setExternalValue(oValue);
        }).then(function() {
          oBindingInfo.skipPropertyUpdate--;
          return oBinding.getExternalValue();
        }).then(function(oExternalValue) {
          if (oValue != oExternalValue) {
            that.updateProperty(sName);
          }
          handleSuccess();
        }).catch(function(oException) {
          oBindingInfo.skipPropertyUpdate--;
          handleException(oException);
        }).unwrap();

74b603b4d178300f00f8ce519e7b3e85.png

SyncPromise.resolve(oValue).then(function(oValue) {
          return oBinding.setExternalValue(oValue);
        })

370ef0ca7e361b6287c944a36eb120bb.png

CompositeBinding.js 内部,核心逻辑是第 325 行的代码:

that.oType.parseValue(oValue, that.sInternalType, aCurrentValues);

调用 outputFormat 进行输入值的解析工作:



相关文章
|
5月前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
5月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
2月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
29 0
|
5月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
3月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
198 0
下一篇
无影云桌面