【ETestDEV5教程49】UI设计器之属性面板 ETestDEV是一款面向测试系统的测试软件开发环境主要应用于嵌入式软件测试、快速原型验证、硬件在环测试、工业自动化测试等场景。本教程针对ETestDEV5的使用方法进行详细说明。若有疑问欢迎留言。属性面板在UI组件设计中属性决定了组件的渲染和行为可通过编辑器的属性面板进行配置属性分为以下五类通用属性、样式属性、选项属性、交互属性和事件属性。一、通用属性通用属性是UI组件的渲染所需要的基本属性包括UI的定位位置组件的宽度、高度、名称、值选中项、别名等。二、样式属性样式属性是UI组件视觉呈现效果的核心属性包括但不限于字体大小粗细、对齐方式、提示语、名称宽度比例、禁用、只读、颜色等设置。三、选项属性选项属性是为部分UI组件如下拉框、复选框、组合框、单选组等预定义的属性其功能是为用户提供一个可供选择的预置值列表或选项列表如下图所示。四、交互属性交互属性用于配置UI组件的动态行为包含以下两类属性。格式化脚本允许您使用JS代码对组件值进行实时转换。绑定变量则用于建立与后端实时数据如网络变量的连接确保UI能随下位机数据更新而自动刷新。4.1 格式化脚本例如输出组件显示格式化数据形如“我的XX”的格式配置如下图所示格式化脚本示例可参考如下使用方法。使用JS条件运算符格式化输出。/* 条件运算符判断组件值格式化输出结果。 */(v)v5?溢出:正常对输出内容进行字符串连接。/* 字符串拼接组件值格式化输出。 */(v)‘我的’v4.2 验证函数输入组件验证数据是否正确使用JS表达式配置如下图所示验证数据示例可参考如下使用方法。/* 判断数字类型返回验证结果。 */(v)!isNaN(v)判断输入数据大于10。/* 判断数字大于10返回验证结果。 */(v)!isNaN(v)v104.3 绑定网络变量网络变量充当了UI界面与下位机之间的“数据线”。开发者在设计UI时只需将组件属性与指定的网络变量绑定。当UI运行时任何由下位机更新的变量值都会通过后端服务实时推送到浏览器并自动刷新界面上对应组件的显示内容。4.4 绑定ICD信号变量ICD信号变量是UI组件用来与下位机ICD激励进行数据交互的媒介。在设计UI时将UI组件绑定ICD变量。在UI运行时下位机即可将ICD信号的最新状态值推送到UIUI组件的属性内容与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 向程序发送指令该事件用于调用执行程序中的全局函数配置如下图所示调用绑定测试序列关联脚本中函数cmdFun4cmdFun4函数内容为更新网络变量$.time日期组件绑定网络变量。对应APIapi.cmd设备选择选择当前界面绑定的测试序列所使用的仿真设备名称全局函数选择执行程序中已定义的全局函数参数配置当函数包含参数时可选择网络变量作为实参传入支持参数增加/删除。执行界面后点击“按钮2”按钮后如下图所示日期框内容更新为“2018-11-29 09:15:00”。5.2 弹出指定UI界面该事件用于在当前界面上弹出新的UI窗口配置如下图所示弹窗标题配置为“弹窗标题”宽度为500。对应APIapi.show界面选择需要弹出的UI界面名称弹窗名称显示在弹窗左上角作为弹窗标题弹窗宽度默认300可修改高度为根据宽度自适应确认回调点击【确认】按钮后执行的函数格式为(){}取消回调点击【取消】按钮后执行的函数格式为(){}执行界面后点击“打开弹窗2”按钮后如下图所示。5.3 跳转到UI界面该事件用于在当前窗口中切换至其他界面配置如下图所示跳转页面配置为“界面1”。对应APIapi.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);}