本次以矩形部件,实现点击事件,链接到百度页面作为一个例子。
1.1 添加事件
为部件添加事件包括选取哪个部件、选取哪种事件类型。所谓的事件也就是用来反映用户的输入,例如用户点击一个部件,就会引发单击(OnClick)事件;页面加载时,触发一个页面加载(OnPageLoad)事件。在每个事件中可以添加多个用例,每个用例又可包括多个动作,这样就可以通过不同的用例和动作来让部件按外界的输入来展现出相应的行为,以此实现互动效果。
下面以一个矩形部件为例,实现如何为一个部件添加事件。
从部件区域中拖曳矩形部件到页面区域,点击页面区域的矩形,在部件属性区域中你会看到当前部件所支持的所有事件。矩形部件仅仅支持鼠标单击(OnClick)、鼠标移入(OnMouseEnter)、鼠标移出(OnMouseOut)三个事件,而动态面板(Dynamic Panel)部件还支持拖曳(OnDrag)、移动(OnMove)等事件。
为了便于大家阅读,先上传一张界面操作的各区域分布图。
1.1 界面操作图
步骤:
01 拖曳矩形部件到页面区域,添加文字为点击。将鼠标点击这块矩形,则会出现右侧的事件,包括鼠标单击时、鼠标移入时、鼠标移出时。如下图显示
02 添加哪个事件,双击事件名称,比如我们添加一个鼠标单击事件(OnClick),双击后就可以进入相应事件的用例编辑器(case editor)。如下图则是用例编辑器(case editor)。
图1.2 用例编辑器
然后,可以进行每个用例的添加条件和添加动作。添加条件我们之后在做介绍,现在先做个简单的链接例子。
1.2 添加动作
我们以链接到百度页面为例子。在添加动作中可看到打开链接这个动作,点击打开链接,在配置动作中选取链接到url添加百度的链接,点击确认即可。
点击确认后,可以看到主页面中在事件下显示了case1(即就是矩形部件的用例默认的用例名称)当前的动作。在矩形部件中也相应的数字,数字表示该页面的第几个事件。
点击预览,你可以在浏览器中查看效果;点击这个矩形部件,则可在当前的页面中链接到百度页面。如下所示
总结添加部件步骤:
01 选中部件
02 在部件属性区域中双击事件名称
03 在用例编辑器中选择相应的一个或者一组动作(动作的先后就是已动作排列的先后)
04 为动作配置参数
05 保存结束