盒子
本节主要介绍 AppStudio 控件库里的盒子控件。
该控件的主要作用包括：
- 作为 FuncStudio 函数资源的输出接口，用于接收函数输出结果；
- 作为 EMTLab 模型资源实时电磁暂态仿真任务（只适用于实时仿真器）的输出接口，用于接收虚拟输出端口的值。
属性
CloudPSS 提供了一套统一的控件属性参数
通用样式
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 是否隐藏 | hidden | 选择是否隐藏控件 | 选择 | 选择隐藏或者显示，隐藏当前控件，或者显示当前控件，默认为显示状态 | |
| 透明度 | style/opacity | 输入透明度 | 常量 | 输入透明度值，控件按照透明度值变化，范围为0~1 ，默认为 1 |
样式
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 背景 | style/background | 样式背景 | 颜色选择器 | 点击文字颜色，弹出颜色选择器自定义背景颜色 | |
| 边框圆角半径 | style/border-radius | px、cm、em、rem | 输入边框圆角半径 | 常量 | 输入边框圆角半径 |
| 边框宽度 | style/border-width | px、cm、em、rem | 输入边框宽度 | 常量 | 输入边框宽度 |
| 边框颜色 | style/border-color | 边框颜色 | 颜色选择器 | 点击文字颜色，弹出颜色选择器自定义边框颜色 | |
| 边框类型 | style/border-style | 边框类型 | 选择 | 边框类型分为：默认、无边框、虚线边框、实线边框、双重边框、3D 沟槽边框、3D 脊边框、3D 突出边框、3D 嵌入边框，默认为实线边框 |
内容
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 文本 | innerText | 盒子控件文本内容 | 常量 | 盒子控件文本内容 |
文字样式
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 文字字体 | style/font-family | 选择文字字体 | 选择 | 文字字体样式，字体类型包括：默认、宋体、黑体、楷体、微软雅黑、Georgia、Palatino Linotype、Times New Roman、Arial、Arial Black、Verdana、Courier New、Trebuchet MS | |
| 文字间距 | style/letter-spacing | 输入文字间距 | 常量 | 文字间距 | |
| 文字字号 | style/font-size | 输入文字字号 | 常量 | 输入文字字号 | |
| 文字颜色 | style/color | 选择文字颜色 | 颜色选择器 | 点击文字颜色，弹出颜色选择器自定义颜色 | |
| 文字粗细 | style/font-weight | 选择文字粗细 | 选择 | 选择文字粗细，默认、100、200、300、400、500、600、700、800、900、1000 | |
| 水平对齐 | style/text-align | 选择文字水平对齐方式 | 选择 | 水平对齐方式：默认、居中、靠右 |
事件
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 点击 | @click | 当点击时触发 | 函数 | 采用点击方式触发函数 |
向导
AppStudio 为盒子控件配置了向导功能，选中盒子控件，在右侧参数配置区上方点击向导图标进入向导界面。
用于引导用户快速配置控件属性，与实时仿真任务的输出信号的监控功能灵活绑定，系统会将向导中设置的方案按照特定的表达式自动写入盒子控件的属性框中，支持快速构建自定义实时态监控应用。支持如下属性的配置：
| 属性配置 | 类型 | 功能描述 |
|---|---|---|
| 绑定资源 | 选择 | 选择资源标签页内添加的模型资源 |
| 绑定信号 | 选择 | 选择模型资源中输出通道 |
| 显示小数位数 | 常量（实数） | 显示小数位数 |
案例介绍
- 实时仿真输出向导配置
-
在资源标签页内添加需要进行实时仿真的 SimStudio 模型资源，具体的模型资源添加方法参见资源标签页。
-
可通过向导功能进行实时仿真输出的属性配置
- 选中盒子控件，在右侧参数配置区上方点击向导图标进入向导界面
-
点击绑定资源选择器，选项中会自动加载出所有函数资源和模型资源，选择需要进行实时仿真的 SimStudio 模型资源；
-
选中模型资源后，绑定信号选择器的选项中会自动加载出该模型的所有虚拟输出端口名称，选择需要绑定的端口名称；
-
填写小数位数;
-
点击向导界面的确定按钮后，会将向导中设置的方案按照特定的表达式写入盒子控件的属性框中。
进入预览模式，即可在仿真过程中通过盒子实时显示所绑定输出信号的值。
具体的操作流程参见实时仿真案例。
常见问题
- 什么是事件触发机制？
-
AppStudio 场景标签页内控件的属性有两种输入模式，一种是 (x) 值输入模式，另一种是 f(x) 表达式输入模式。 值输入模式是通过在属性框内直接输入值来配置控件属性，表达式输入模式则是在属性框内输入由变量/函数资源键名、控件属性键名构成的 math.js 表达式，通过表达式解析器计算出表达式的值来配置控件属性值。详情参见 控件属性的表达式输入
- (x) 与 f(x) 的区别
-
事件是指对控件操作后产生的效果，事件触发使用 HTML 元素事件触发的回调函数结合 math.js 的表达式解析器进行控件属性或者资源的调用。详情参考 事件触发机制