5.3 用例和动作
事件是通过不同的用例和动作来对外界输入做出的一种反映。所以,事件包含一个或多个用例。
用例通过判断各自的条件来执行具体动作,不同的用例不会同时发生。就相当于写 if()语句时,if(条件1){执行用例1中所有动作;}else if(条件2){执行用例2中所有动作;}。
例如,在页面加载时事件中,需要设置当全局变量testValue等于1时,testPanel动态面板元件为 State1 状态;当全局变量 testValue 等于 2 时,testPanel 动态面板元件的状态为State2 状态。此时,需要对应添加两个用例,其中,Case 1 用例的触发条件为:testValue==1,对应的动作为:切换testPanel面板状态为Sate1状态;Case 2用例的触发条件为:testValue==2,对应的动作为:切换testPanel面板状态为State2状态。
一个用例可以包含多个动作,动作可理解为具体的操作,Axure RP 8包括数以百计的动作来完成页面交互效果。切换面板状态、打开链接、设置选中状态等都属于不同的动作,例如在页面加载时事件的 Case 1 用例,触发条件为:testValue 全局变量等于 1,执行两个动作:更改testPanel面板状态为State1,将某个元件的选中状态设置为true。
5.3.1 用例
双击某个页面事件或元件事件,默认创建一个名称为“Case 1”的用例,如图5-2所示。
用例编辑器对话框包括四大部分,分别如下。
:设置用例名称,并可单击“添加条件”按钮进入“条件设立”对话框,添加1到多个该用例的触发条件,例如某个变量等于1时该用例才执行。
:添加动作区域,单击某个动作类型,会在组织动作区域中有所体现。
:组织动作,在此处可显示用例的触发条件,以及在“添加动作”区域为该用户添加的所有动作列表。
:配置动作,配置在“组织动作”区域选择的某个动作的详细信息。
图5-2 用例编辑器对话框
在非初始状态,单击某个页面事件,例如已有Case 1用例时,双击该事件名称,将创建一个新的用例,如Case 2、Case 3等。也可在“检视”面板选择某个事件后,单击“添加用例”添加一个新的用例。
如果两个用例类似,可在“检视”面板的“属性”选项卡选择该用例后,使用〈Ctrl+C〉快捷键复制该用例,然后单击选择某个事件(可以是本页面事件、其他页面事件或元件事件)后,使用〈Ctrl+V〉快捷键复制用例,非常方便。复制成功后,双击即可对该用例进行修改。
双击某个用例,即可对该用例进行修改操作。若想删除某个用例,可选择某个用例后,右击选择“删除”菜单项进行删除,也可使用〈Delete〉键删除。
5.3.2 动作
Axure RP 8支持的动作如下。
1.链接
Axure RP 8支持5种方式的链接。
1)打开链接:直接打开链接,包括 4 种情况。支持直接在当前窗口打开页面或外部链接(“链接”→“当前窗口”),以新窗口或新标签打开页面或外部链接(“链接”→“新窗口/新标签”),在弹出窗口中打开页面或外部链接(“链接”→“弹出窗口”),以及在父级窗口打开页面或外部链接(“链接”→“父级窗口”)。
2)关闭窗口:关闭当前窗口。
3)在框架中打开链接:支持在内联框架中加载页面或外部链接,或者在父级框架中打开页面或外部链接。
4)滚动到元件<锚链接>:滚动到页面的某个元件(锚点链接)。
5)设置自定义视图:Axure RP 8新增方式,设置为自定义视图。
2.元件
“组织动作”区域“元件”下包括的动作如下。
1)显示/隐藏:可对元件进行显示或隐藏操作,单击“配置动作”区域,效果如图 5-3所示。
在图 5-3 中,“可见性”可选择“显示”“隐藏”或“切换”(当前为显示状态的修改成隐藏状态,反之亦然)。
● 动画:表示进入这个状态的动态效果,若有动态效果,还需要设置切换到最终效果的毫秒数。可设置为:无、逐渐、向右滑动、向左滑动、向上滑动、向下滑动、向右翻转、向左翻转、向上翻转和向下翻转。
● 更多选项:用于设置更多的选项,“灯箱效果”表示除元件区域外其余都为被遮盖状态,单击遮盖区域当前元件被隐藏,“弹出效果”表示将该元件作为弹出式视窗,“推动元件”表示将该元件推出。
2)设置面板状态:设置某个动态面板元件的状态,并能设置状态切换的动态效果。当单击“设置面板状态”动作时,“配置动作”区域会显示该页面所有的动态面板元件,勾选某个动态面板元件,如imgPanel,效果如图5-4所示。
图5-3 显示和隐藏元件
图5-4 设置动态面板状态
图5-4中内容如下。
● 选择状态:下拉列表提供该动态面板元件的所有状态,以及 Next(下一个状态)、Previous(上一个状态)、“停止循环”和 Value(指定设置为第几个状态或指定状态名称,可以是常量,也可以是函数值)让我们选择,可以选择动画效果。
● 进入动画:表示进入这个状态的动态效果,若有动态效果,还需要设置切换到最终效果的毫秒数。可设置:无(没有进入的效果)、逐渐、向右滑动、向左滑动、向上滑动、向下滑动、向右翻转、向左翻转、向上翻转和向下翻转。
● 退出动画:表示离开这个状态的动态效果,若有动态效果,还需要设置切换到最终效果的毫秒数。下拉选项与“进入动画”一样。
● 如果隐藏则显示面板:勾选时表示如果动态面板元件没有显示时进行显示。
● 推动/拉动元件:勾选时表示推/拉下方或右侧元件。
3)设置文本:可指定当前获得焦点的某个元件,或页面的某个元件的文本值,可设置为:值、变量值、变量值长度、元件文字、焦点元件文字、元件文字长度、被选项和面板状态等。
4)设置图片:可设置某个图片元件各种情况下的动态效果,如图 5-5 所示。Default 用于设置默认的图片和值,“鼠标悬停”用于设置鼠标悬停时的图片和值,“鼠标按下”用于设置鼠标按下时的图片和值,“选中”用于设置图片元件被选中时的图片和值,“禁用”用于设置图片元件为不可用状态时的图片和值。
5)设置选中:设置矩形元件、单选按钮元件、复选框元件、图片元件、动态面板元件等为选中、取消选中或切换选中状态。
6)设置列表选中项:设置下拉列表元件和列表元件的选项值。
7)启用/禁用:将各种元件置为启用、禁用状态。
8)移动:在X轴或Y轴上将某个元件相对当前位置移动若干像素,或者将某个元件移动到绝对的X坐标或Y坐标。如图5-6所示。
图5-5 设置图片元件
图5-6 移动元件到绝对坐标
● 移动方式:有“绝对位置”和“相对位置”两个选项,前者表示移动某个元件到绝对的X坐标和Y坐标。后者表示在当前位置在X坐标和Y坐标相对移动多少像素。
● 动画:表示移动时的动画效果,包括:无、摇摆、线性、缓慢进入、缓慢退出、缓慢缓出、弹跳和弹性几个选项。
9)旋转:Axure RP 8 版本新增的一个动作,用于对元件进行旋转操作,后面的案例篇有专门的案例详细讲解该动作的使用。
10)设置尺寸:设置元件的宽度和高度,并能设置动画效果,如图5-7 所示。可以指定所选择的动态面板元件的宽度和高度(单位:像素),可为常量也可指定函数或变量。“动画”用于指定调整尺寸大小时的动画效果,包括:无、摇摆、线性、缓慢进入、缓慢退出、缓进缓出、弹跳和弹性。
11)置为顶层/底层:设置元件的放置顺序,“置于顶层”表示将某个元件置为最上方,“置于底层”表示将该元件放到最下方。
12)设置不透明:设置元件透明度,并可带有动画效果,包括:无、摇摆、线性、缓慢进入、缓慢退出、缓进缓出、弹跳和弹性。
13)获得焦点:将焦点放到某个指定元件。
14)展开/折叠树节点:将某个树状菜单元件设置为展开或收缩状态。
3.全局变量
“添加动作”区域的“全局变量”只是包括一个“设置变量值”的动作,可以选择默认全局变量、已创建的全局变量,也可在“配置动作”区域使用“添加全局变量”创建新的全局变量。
单击“配置动作”区域的“添加全部变量”按钮进入“全局变量”对话框,也可在菜单栏选择“项目”→“全部变量”菜单项进入全局变量管理界面,如图5-8所示。
图5-7 设置元件尺寸
图5-8 全局变量管理对话框
在“全局变量”对话框中可进行添加、上移、下移、删除、重命名和设置默认值操作。单击“确定”按钮,回到“用例编辑器”对话框的“配置动作”区域,勾选全局变量后,设置它的值为某个常量,或单击“fx”按钮通过函数为其设置值。
4.中继器
“配置动作”区域的“中继器”提供如下动作供选择。
1)添加排序:添加排序条件,可添加多个。单击“添加排序”动作后,“配置动作”区域如图5-9所示。
● 名称:给此次排序命名。
● 属性:用于指定数据集的列。
● 排序类型:用于指定将列当作什么形式排序,包括 Number(数字)、Text(文本,默认不区分大小写)、Text (文本,区分大小写)、Date-YYYY-MM-DD(作为年-月-日格式的日期排序)和 Date-MM/DD/YYY (作为月/日/年格式的日期进行排序)。
● 顺序:指定排序方式,包括“升序”“降序”和“切换”(切换升/降序)三个选项。
图5-9 中继器-添加排序动作配置对话框
2)移除排序:可用于删除某个中继器一个排序或全部排序。
3)添加筛选:添加过滤条件,可添加多个筛选条件。
4)移除筛选:删除过滤条件,可选择删除其中一个或删除全部。
5)设置当前显示页面:选择当前的页是中继器的第几页。
6)设置每页项目数量:设置每页多少个项目。
7)数据集:对中继器的数据集进行设置,可进行“添加行”“标记行”“取消标记”“更新行”和“删除行”操作。
5.其他
“配置动作”区域的“其他”包括如下动作提供给我们选择。
1)等待:页面等待多少毫秒,常用于模拟操作过程,或者使用在时钟中。
2)其他:定义弹出窗口显示的文字。
3)触发事件:定义自定义事件。