5.1 页面事件
当在“页面设计”面板未选中任何元件时,我们在“检视”面板的“属性”选项卡看到的是页面事件,默认显示出来的有 3 个常用页面事件:“页面加载时”事件、“窗口尺寸改变时”事件和“窗口滚动时”事件。
若想定义某个页面事件,如“页面加载时”事件,可在“检视”面板的“属性”选项卡双击该事件,进入“用例编辑器”对话框,双击后,默认添加一个用例,可为某一个事件添加多个不同的用例。
设置页面事件的步骤如下。
5.1.1 打开用例编辑器
首先,在“页面设计”面板单击空白区域,不选中任何元件,在“检视”面板的“属性”选项卡中选择需要设置的页面事件,例如双击“页面加载时”事件,打开“用例编辑器”对话框,详见本章的“用例”章节。
5.1.2 选择页面事件的触发条件
在“用例编辑器”对话框单击“添加条件”按钮,进入该用例的“条件设立”对话框,如定义该用例在全局变量 OnLoadVariable 等于 0,椭圆形元件上文字的值等于“4”时触发,“条件成立”对话框如图5-1所示。
图5-1 “条件成立”对话框
上图共分为8个区域,内容如下。
:表示多个条件之间的逻辑关系,包括“全部”和“任何”两个选项,分别对应的and(和)和 or(或)两种关系,“全部”表示条件全部要满足才触发用例,“任何”表示条件中只要满足任意一个就触发用例。
:进行判断逻辑关系的值,包括14个选项,内容如下。
1)值:常量值作为逻辑判断。
2)变量值:根据某个变量的值进行逻辑判断。
3)变量值长度:根据某个变量值的长度进行逻辑判断。
4)元件文字:某个元件文本的值,如根据输入的用户名做特殊处理。
5)焦点文字长度:当前焦点所在元件文本的值。一般用于进行当前输入值的提示。
6)元件文字长度:某个元件文本值的长度。这个比较常用,例如注册页面验证用户名、密码和邮箱等的字符个数是否符合长度要求。
7)被选项:对下拉列表或列表的选择项的值来进行逻辑判断。
8)选中状态:判断某个元件是否被选中来进行逻辑判断,值为true或false。
9)面板状态:根据某个动态面板元件的状态来进行逻辑判断。
10)元件可见:根据某个元件为可见或不可见状态来进行逻辑判断,值为true或false。
11)按下的键:根据当前按键的值进行响应,如对按〈Enter〉键作出响应。
12)指针:根据指针进入某个元件、离开某个元件、接触、未接触某个元件来进行逻辑判断。
13)元件范围:根据某个元件所在的区域来进行逻辑判断。
14)自适应视图:从下拉列表中选择需要设置动作的自适应视图。
:选择变量名称或元件名称,会根据第二个区域的选项产生联动,如选择的是“变量值”或“变量值长度”时,该部分显示变量下拉列表。当选择的是“元件名称”“元件文字长度”等选项时,下拉列表提供元件名称供大家选择。
:选择逻辑判断的运算符,包括“==”(等于)、“!=”(不等于)、“<”(小于)、“>”(大于)、“<=”(小于等于)、“>=”(大于等于)、“包含”“不包含”“是”和“不是”选项。其中,“包含”和“不包含”常用于判断一个字符型值包含和不包含某个字符,如用户输入的网址中是否包含“http://”符号,邮箱地址是否包含“@”等。
:选择被比较的值,将第二个区域中的值与该值比较,包括9个选项:值、变量值、变量值长度、元件文字、焦点元件文字、元件文字长度、被选项、选中状态和面板状态。
:设置具体值、变量名称或元件名称,会根据第5个区域的选项产生联动,如选择的是“值”或“变量值”时,该部分显示变量下拉列表。当选择的是“元件文字”“元件文字长度”等选项时,下拉列表提供元件名称给大家选择。当“被比较的值”选择的是“值”时,单击该区域的“fx”可设置变量和函数值。
:触发条件的编辑区域,可进行新增或删除条件操作。
:逻辑描述,该部分不允许编辑,系统会自动根据在第1和第7个区域配置的条件来生成。
5.1.3 选择页面事件的动作
页面事件和元件事件支持的动作基本一样,详见本章的“动作”章节。
5.1.4 页面事件列表
Axure RP 8中,包括的页面事件如表5-1所示。
表5-1 Axure RP 8页面事件列表
(续)