交互设置
时长:
指导老师:Axure官网
困难程度:容易
第四课 交互设置——使用按钮形状的OnClick事件、在用例编辑器中设置文本框组件焦点。然后,使用onpageload事件让光标在页面加载时停留在文本框组件
公共步骤:新建文件
步骤1:添加一个按钮形状控件和两个文本框控件

1.1 添加按钮形状,两个文本框
拖动按钮形状部件和两个文本框部件到线框图窗口。
1.2 编辑按钮形状文字
编辑按钮形状的文字为"Swap Focus"
1.3 为按钮形状添加标签
选中按钮形状,在部件属性窗口的标签栏添加标签名称"Button1"
1.4 编辑文本框文字
在文本框1内编辑文字"Text Field 1".
1.5 Label TextField1
选中文本框1,在部件属性窗口的标签栏添加部件标签为"TextField1"
步骤2:禁用文本框2

2.1 编辑文本框2文字
编辑文本框2文字为"Text Field 2"
2.2 禁用文本框2
右键单击文本框2,在菜单中选择(编辑文本字段>设为禁用)
2.3 文本框2添加标签
选中文本框2,在部件属性窗口的标签栏添加部件标签为"TextField2"
步骤3:单击按钮形状以禁用文本框1

3.1 选择Button1
点击选择"Swap Focus"按钮组件
3.2 设置OnClick事件
在部件属性窗口双击“OnClick”事件。
3.3 添加禁用动作
在最左边的“添加动作”中选择”禁用部件
3.4 配制文本框1
在最右边的“配制动作”中勾选文本框1的复选按钮
3.5 不要点击确定
我们还要在事件中添加下一步动作
步骤4:启用文本框2

4.1 添加启用组件动作
选择“启用部件”,为同一事件添加其它动作
4.2 配制文本框2
勾选文本框2的复选按钮
4.3 不要点击确定
这个事件还没有设置完,我们需要添加第三个动作
步骤5:在文本框2组件上设置焦点

5.1 添加设置焦点动作
选择“设置部件获取焦点” ,为同一事件添加其它动作
5.2 配制文本框2
勾选文本框2的复选按钮
5.3 检查动作
确保动作设置完全正确
5.4 点击确定
单击确定按钮以确认所有的设置
步骤6:设置页面载入时鼠标停留在文本框1的焦点处

6.1 在OnPageLoad上添加一个用例
在页面交互窗口双击OnPageLoad事件
6.2 添加设置焦点动
在左边“添加动作”窗口选择“设置部件获取焦点”
6.3 配制文本框1
在最右边的“配制动作”中勾选文本框1的复选按钮
6.4 点击确定
单击确定按钮以确认所有的设置
公共步骤:生成原型
生成原型。注意,第一个文本框在页面加载时获得了焦点。点击Swap Focus形状按钮,文本框1被禁用、文本框2被启用和获得焦点。在浏览器刷新页面事件将被重置。