【ETestDEV5教程49】UI设计器之属性面板

ETestDEV是一款面向测试系统的测试软件开发环境，主要应用于嵌入式软件测试、快速原型验证、硬件在环测试、工业自动化测试等场景。本教程针对ETestDEV5的使用方法进行详细说明。若有疑问，欢迎留言。

属性面板

在UI组件设计中，属性决定了组件的渲染和行为，可通过编辑器的属性面板进行配置；属性分为以下五类：通用属性、样式属性、选项属性、交互属性和事件属性。

一、通用属性

通用属性，是UI组件的渲染所需要的基本属性，包括UI的定位位置，组件的宽度、高度、名称、值（选中项）、别名等。

二、样式属性

样式属性，是UI组件视觉呈现效果的核心属性，包括但不限于字体大小粗细、对齐方式、提示语、名称宽度比例、禁用、只读、颜色等设置。

三、选项属性

选项属性是为部分UI组件（如下拉框、复选框、组合框、单选组等）预定义的属性，其功能是为用户提供一个可供选择的预置值列表或选项列表，如下图所示。

四、交互属性

交互属性用于配置UI组件的动态行为，包含以下两类属性。

• 格式化脚本允许您使用JS代码对组件值进行实时转换。
• 绑定变量则用于建立与后端实时数据（如网络变量）的连接，确保UI能随下位机数据更新而自动刷新。

4.1 格式化脚本

例如，输出组件显示格式化数据形如"我的XX"的格式，配置如下图所示：

格式化脚本示例，可参考如下使用方法。

使用JS条件运算符格式化输出。

/*
 条件运算符判断组件值，格式化输出结果。
*/
(v) => v > 5  ? "溢出" : "正常"

对输出内容进行字符串连接。

/*
 字符串拼接组件值，格式化输出。
*/
(v) => '我的'+ v

4.2 验证函数

输入组件验证数据是否正确，使用JS表达式，配置如下图所示：

验证数据示例，可参考如下使用方法。

/*
判断数字类型，返回验证结果。
*/
(v) => !isNaN(v)

判断输入数据大于10。

/*
判断数字大于10，返回验证结果。
*/
(v) => !isNaN(v) && v > 10

4.3 绑定网络变量

网络变量充当了UI界面与下位机之间的"数据线"。开发者在设计UI时，只需将组件属性与指定的网络变量绑定。当UI运行时，任何由下位机更新的变量值都会通过后端服务实时推送到浏览器，并自动刷新界面上对应组件的显示内容。

4.4 绑定ICD信号变量

ICD信号变量，是UI组件用来与下位机ICD激励进行数据交互的媒介。在设计UI时，将UI组件绑定ICD变量。在UI运行时，下位机即可将ICD信号的最新状态值推送到UI，UI组件的属性内容与ICD信号最新状态值保持同步。

4.5 绑定选项变量

通过绑定选项网络变量，实现选项动态可变，配置如下图所示。

网络变量声明如下图所示，其中选项绑定网络变量格式类似图中的option。

执行页面后，下拉框选项如下图所示。

4.6 动态背景

通过给组件背景绑定网络变量，实现背景色动态可变，配置如下图所示，绑定的网络变量需要为颜色字符串，比如："#00ff00"。

执行后结果如下图所示。

4.7 动态禁用

通过给组件可用性绑定网络变量，实现可用性动态可变，绑定的网络变量需要为数字1、0，分别代表可用、禁用。

修改网络变量$.dynamicEnable声明为0，执行界面如下图所示。

4.8 动态显示

通过给组件显示绑定网络变量，实现显示动态可变，绑定的网络变量需要为数字1、0，分别代表显示、隐藏。

修改网络变量$.dynamicShow声明为0，执行界面如下图所示。

五、事件属性

事件属性用于配置UI组件的交互事件，实现界面操作与程序逻辑之间的联动控制。通过事件配置，可完成指令发送、显示弹窗及界面跳转功能。

事件属性支持的类型如下，默认为向程序发送指令。

• 向程序发送指令
• 弹出指定UI界面
• 跳转到UI界面
• 自定义代码

不同UI组件支持的事件触发方式如下：

• 按钮组件：点击触发；
• 选择类组件：勾选触发，比如：复选组、单选组、复选按钮；
• 输入框类组件：在输入完成后，当光标离开输入框或点击界面其他区域时触发事件，比如数字输入、文本输入等；
• 下拉类组件：选中值改变时触发事件，比如下拉框、组合框等；
• 树组件：选中节点变化时触发事件；
• 其他组件：改变时触发，比如评分、开关、日历、日期

5.1 向程序发送指令

该事件用于调用执行程序中的全局函数，配置如下图所示，调用绑定测试序列关联脚本中函数cmdFun4，cmdFun4函数内容为更新网络变量$.time（日期组件绑定网络变量）。

• 对应API：api.cmd；
• 设备选择：选择当前界面绑定的测试序列所使用的仿真设备名称；
• 全局函数：选择执行程序中已定义的全局函数；
• 参数配置：当函数包含参数时，可选择网络变量作为实参传入，支持参数增加/删除。

执行界面后，点击"按钮2"按钮后，如下图所示，日期框内容更新为"2018-11-29 09:15:00"。

5.2 弹出指定UI界面

该事件用于在当前界面上弹出新的UI窗口，配置如下图所示，弹窗标题配置为"弹窗标题"，宽度为500。

• 对应API：api.show；
• 界面：选择需要弹出的UI界面名称；
• 弹窗名称：显示在弹窗左上角，作为弹窗标题；
• 弹窗宽度：默认300，可修改，高度为根据宽度自适应；
• 确认回调：点击【确认】按钮后执行的函数，格式为()=>{}
• 取消回调：点击【取消】按钮后执行的函数，格式为()=>{}

执行界面后，点击"打开弹窗2"按钮后，如下图所示。

5.3 跳转到UI界面

该事件用于在当前窗口中切换至其他界面，配置如下图所示，跳转页面配置为"界面1"。

• 对应API：api.goto；
• 界面名称：选择要跳转界面的名称；
• 测试序列：选择与要跳转界面关联的测试序列，可缺省。

执行界面后，点击"跳转界面1"按钮后，如下图所示。

5.4 自定义代码

自定义代码类型，事件处理函数采用Javascript语言语法描述。处理函数采用Javascript箭头函数进行描述，如下图所示。

• api
  可选参数，是服务API的对象。
• value
  可选参数，是组件向回调函数的传值对象。
• statement
  执行语句，对应回调函数的执行语句
  回调函数常用场景及实现案例，供配置使用参考。
  调用下位机脚本函数。

回调函数向下位机调用传递多个参数。

/*
api,下位机服务API对象；
cmd,下位机服务名；
set_value,是下位机脚本函数名；
value, 传给下位机脚本函数参数*/
(api, {value}) => {api.cmd("set_value",[value]) }

回调函数调用JS函数用于调试。

/*
  函数执行体内部实现调试信息输出。
*/
() => {console.log("test value"); }