KubeEdge架构与技术应用培训-火龙果软件

EA中的用户界面仿真

作者：王玉俎涛（火龙果软件工程）

1524 次浏览

31 次

2021-1-22

什么是用户界面仿真

首先我们说一下仿真，仿真就是根据现有的模型和特定的条件对具体的过程进行模拟，从而得到一个预期结果。仿真可以帮助我们评估项目的可行性、检测未来可能出现的问题等等，至于具体的仿真内容在这里就不多说了，大家感兴趣的可以查看我们网站的另一篇文章进行了解《EA模型的仿真—验证未来》。

接下来我们就说一下用户界面仿真，用户界面仿真其实就是在软件中对用户可见的界面，以及用户在界面上操作时可能产生的交互行为进行仿真。

下面就是一个用户界面仿真示意图：

在执行仿真时，状态机模型通过编写的JS命令访问用户界面模型，以此来达到其与动态模型的交互。

为什么要做用户界面仿真

模型的仿真可以即时的了解模型的行为过程，直观的跟踪具体的执行情况。

用户界面的仿真将界面设计和系统流程连接起来，可以：

进行系统原型的设计，和软件架构的搭建。

根据模型的执行过程进行用户界面测试。

用户界面仿真有什么

EA目前支持针对于Win32用户界面的仿真，所以下面我们就介绍下EA中支持用户界面设计和仿真的Win32 UI控件和进行配置UI控件行为的标记值。

元素列表

说明

Dialog：对话框
Button：按钮
Check Box：多选框
Edit Control：编辑框
Combo Box：组合框
List Box：列表框
Group Box：分组框
Radio Button:单选按钮
Static Text：静态文本
Slider Control: 滑动条控件
Spin Control：数值调节控件
Progress Control：进度条控件
List Control:列表控件
Tree Control：树形图控件
Tab Control：选项卡控件
Rich Edit Control：富文本编辑控件
Label：标签

接下来介绍一下配置UI控件行为的标记值

标记值	说明
Columns	主要适用于列表控件，用于定义列表的列名和宽度。
OnClick	按钮的点击事件，当按钮被点击的时候触发，可以用于响应按钮上OnClick 事件执行JS命令。
OnCheck	复选框选中事件，当复选框被选中事后触发。
OnChangeSelection	单选按钮的选择事件，当选项改变的时候被触发。
Range	主要适用于滑动条控件，数值调节控件，进度条控件，用于识别控件最大及最小值。
Tabs	主要适用于选项卡控件，用于定义选项卡的名称。

EA中如何进行用户界面仿真

进行用户界面仿真主要分为三部分：

第一步，创建体现用户交互行为的动态模型，我们以状态机为例

具体的操作过程如下：

1. 创建一张新的图
2. 图类型选择UML
3. 选择Behavioral行为模型
4. 最后选择State Machine状态机图，随后点击OK。

第二步，创建Win32用户界面模型

注意：创建的Win32模型时必须与状态机模型处在同一分支中。

具体的操作过程如下：

1. 创建新的模型图
2. 在图类型中找到交互设计
3. 选择Win32 UI模型
4. 图类型中选择UI Win32，随后点击OK即可创建完成。

第三步，编写JS命令对相关元素属性配置，进行仿真

为了让动态模型与用户界面进行交互，在模型中通过使用JavaScript 编程命令的dialog关键字产生交互。

例如，UI模型中的登陆按钮的配置

1. 打开Login按钮的属性框
2. 添加Tagged Value属性
3. Tag值设置为JS的OnClick事件，Value设置为
UIBroadcastSignal("Login",{'Name':dialog.Login.Username.Text,'Password': dialog.Login.suppliedPassword.Text });

UIBroadcastSignal函数将用户在UI模型中输入的用户名、密码传送到动态模型的仿真事件中，而动态模型根据获取到的参数执行下一次的判断。

用户界面仿真实例

下面我们就以用户登陆为例介绍用户界面仿真过程。

在进行仿真之前，首先创建的是描述登录过程的状态机模型：

如下是用户界面建模中状态机元素的说明字典：

元素	说明
Initial	开始状态。
State	状态，对象某个特征的持续阶段。
Choice	选择，根据条件选择下一个状态。
Final	结束状态。

如下是用户界面建模中的类之间的关系目录：

起点类	关系	终点类
起点	Transition	登陆
登陆	Transition	登陆判断
登陆判断	Transition	登陆成功
登陆成功	Transition	终点
登陆判断	Transition	失败
失败	Transition	Choice
Choice	Transition	登陆
Choice	Transition	登陆失败
登陆失败	Transition	终点

然后建模登陆相关的用户界面原型：

如下是用户界面建模中用户界面模型元素的说明字典：

元素	说明
Screen	屏幕，直接展示给用户浏览的界面窗口。
Static Text	静态文本，提示信息。
Edit Control	编辑控件，编辑传递的参数内容。
Button	按钮，通过添加” OnClick”响应事件，触发触发器向动态模型发送的信号。

用户界面和状态机模型搭建好之后，还要对其相关元素属性进行配置，例如登陆时传递参数所需的触发器和可用于广播的信号。

具体的交互过程：

1. 仿真开始，通过开始状态转移到登陆状态，而登陆状态中包含了用户界面的的显示和隐藏事件；
2. 进入登陆状态后打开用户登陆的用户界面；
3. 在用户界面中输入用户名和密码，通过Login按钮触发触发器将输入的用户名和密码作为参数传递到动态机模型中；
4. 将接收到的参数在登陆判断元素中进行判断；
5. 参数正确，活动转移到登陆成功状态，然后转移到结束状态，当前事件结束；
6. 参数错误，活动转移至失败状态，然后转移到Choice进行判断；
7. 在Choice元素中判断密码的输入错误次数，小于3次，从新转移至登陆状态，然后再重新进行刚才的活动；
8. 当密码输入错误大于3次，转移至登陆失败活动，然后转移到结束状态，事件结束。

如下是基于状态机的用户界面仿真的运行效果截图：