Axure原型设计基础项目六全局变量和局部变量的应用学习目标 1.了解全局变量和局部变量的概念。2.掌握全局变量和局部变量的应用方法。3.掌
握通过变量进行已注册的验证的方法。6.1 全局变量 变量是一个数据的存储容器,可将有用的数据存储在里面,以便在需要的时候调用。对变
量的操作方式只有两种:存入和读取。Axure中的变量有两种:一种是全局变量,另一种是局部变量。全局变量(Global Variab
le):默认显示名称OnLoadVariable,作用范围为一个页面,即在站点地图面板中的一个节点(不包含子节点)内有效。全局变量
可以直接赋值。局部变量(Local Variable):默认显示名称LVAR1,LVAR2…,作用范围为一个case里面的一个事务
,一个事件里面有多个case,一个case里面有多个事务,可见局部变量的作用范围非常小。例如,在case里设置一个条件时,如果用到
了局部变量,则这个变量只在这个条件语句里生效。局部变量只能依附于已有组件的使用,不能直接赋值。下面以如图6-1所示的页面效果为例讲
解全局变量的应用。图6-1 页面效果在A页面中输入“赵大”,并且选择性别“男”,单击“跳转”按钮,跳转到B页面并显示“欢迎你,赵大
帅哥!”;而输入“王晓”,选择性别“女”的时候,跳转到B页面并显示“欢迎你,王晓美女!”。(1)新建A页面“pageA”,放入元件
并命名文本框为“username”,性别选项使用单选按钮,男性为“male”,女性为“female”,并在属性中设置为一个单选按钮
组,组名为“sex”。跳转按钮使用形状按钮,可以不命名。(2)如果需要在B页面获取A页面中的数据,必须通过全局变量进行传递。所以,
必须在A页面跳转之前,将页面上的数据保存到变量中,否则就会丢失。在这个案例中,我们需要创建两个全局变量:一个用来存放输入的用户名,
另一个用来存放输入的性别。选择“项目”菜单中的“全局变量”命令,打开“全局变量”编辑窗口,这里默认创建了一个名为“OnLoadVa
riable”的全局变量。我们可以将其删除,也可以重命名。新建全局变量只需要单击窗口中的“+”按钮。(3)鼠标右键单击默认的全局变
量名称并为其重命名为“uname”,然后,新建一个全局变量,命名为“usex”,还可以为全局变量设置默认值,如图6-2所示。图6-
2 新建全局变量(4)创建完变量后单击“确定”按钮关闭“全局变量”编辑窗口。要保存的数据中,性别的数据是通过单选按钮来输入的,当任
何一个单选按钮被选中时,全局变量“usex”保存的数据都应该随之变化。因此,应给每个单选按钮添加事件用例。(5)单选按钮被单击时一
定会变为被选中状态,所以,只需在单选按钮被单击时让全局变量中存入相应的数据就可以了。单选按钮的“鼠标单击时”事件没有直接显示在触发
事件列表中,需要在列表下方的“更多事件”中选择。(6)先为单选按钮“男”添加用例动作,选择触发事件之后,在动作列表中找到“设置变量
值”,并勾选记录性别的全局变量“usex”,将其值设置为“帅哥”,如图6-3所示。图6-3 设置变量值1 (7)同理,为单选按钮
“女”添加用例动作,设置全局变量“usex”的值为“美女”,如图6-4所示。图6-4 设置变量值2(8)在“跳转”按钮的“鼠标单击
时”事件上添加用例动作。单击“跳转”按钮后,除应跳转页面,还应在页面跳转之前将文本框中输入的用户名保存到全局变量“uname”中。
注意:在用例编辑页面“组织动作”列表中,一定要把跳转页面的动作放到最后。因为在Axure中,程序的执行顺序是由上至下的,当前页面的
动作不能到跳转后的页面去执行,页面跳转的动作会直接影响后面的动作,使它们失效。(9)设置全局变量“uname”的值为“元件文字”“
username”,如图6-5所示。图6-5 设置全局变量 (10)通过以上的操作,我们就完成了A页面中的操作,下面设置B页面“
pageB”,如图6-6所示。图6-6 设置另一页面(11)B页面打开后应显示一句欢迎词:“欢迎你,XXYY!”。XX代表用户名,
YY代表根据性别的不同称谓,如图6-7所示。(12)我们需要一个元件来显示欢迎词,可以用一个没有文字的文本标签,命名为“welco
me”。图6-7 页面显示 (13)欢迎词是在页面打开的时候显示的。所以,需要在“页面交互”的触发事件“页面载入时”中添加用例动
作。设置元件“welcome”的文本为“值”,内容为“欢迎你!”,如图6-8所示。图6-8 设置元件值(14)用户名和性别对应的称
谓都是通过全局变量传递的,那么,在设置元件“welcome”的文本时,如何把变量值嵌入这句欢迎词当中呢?一共需要3个步骤:1)单击
“值”的输入框后面的“fx”,如图6-9所示,打开“编辑文本”窗口。图6-9 单击“fx”按钮2)单击“插入变量或函数”,如图6-
10所示,打开变量或函数列表。图6-10 单击“插入变量或函数”链接3)单击列表中全局变量的名称,将其插入写好的文本当中,如图6-
11所示。当然,按照变量名格式手动输入也可以。完成这两个步骤后,保存并返回主界面。图6-11 插入变量6.2 局部变量 局部变量只
存在于特定的范围,只在这个特定范围内有效,只能够被一次写入,但可以被多次读取。在Axure中写在“[[]]”里面的内容可以进行运算
,而写在“[[]]”外面或者多个“[[]]”的内容写在一起时,则是将返回值与文字或返回值连接为一个字符串,如图6-12所示。图6-
12 局部变量的使用6.3 运用全局变量和局部变量 在这里我们设置了3组用户名和密码,第一组用户名是cmy,密码是123456;第
二组用户名是wang,密码是123123;第三组用户名是meng,密码是121212。输入第一组用户名和密码,单击“登录”按钮,会
跳转到首页;输入第二组、第三组,都能跳转到首页。将显示错误提示的元件命名为“tishi”并隐藏。如图6-13所示为登录验证的条件。
图6-13 登录验证的条件要实现这样的效果,就需要用到全局变量和局部变量(小括号用于区分每组数据,冒号用于区分每组数据中的用户名和
密码)。(1)判断用户名或密码为空时的情况。错误提示为:用户名或密码不能为空。选中“登录”按钮,添加交互事件“鼠标单击时”,进行条
件判断,如图6-14所示。按照图6-15所示进行设置。图6-14 条件判断图6-15 设置文本(2)判断密码正确、用户名输入错误时
的情况。错误提示为:用户名不正确,请重新输入。添加第二个用例,进行条件判断。其中,“user”是用户名文本框的名称,如图6-16所
示。按照图6-17所示进行设置。图6-16 添加用例图6-17 设置文本(3)判断用户名正确、密码输入错误时的情况。错误提示为:密
码不正确,请重新输入。添加第三个用例,进行条件判断。其中,“user”是用户名文本框的名称,“password”是密码文本框的名称
,如图6-18所示。按照图6-19所示进行设置。图6-18 添加用例图6-19 设置文本添加最后一个用例,即用户名和密码全都输入正
确,登录成功,跳转到首页,如图6-20所示。图6-20 添加用例如图6-21所示为多用户验证的所有用例。图6-21 多用户验证用例
6.4 通过变量进行已注册的验证 注册后,即可成功登录。那么,如何把注册成功的信息加到“denglu”这个全局变量里面呢?当注册成
功之后,即跳转到登录页之前,我们需要在变量里置入所输入的用户名和密码。也就是说把“denglu”变量里面的内容全部取出来,通过连接
字符串连接新的内容,新的内容就是新注册的用户名和密码,如图6-22所示。图6-22 连接字符串注意:如果先打开登录页的话,这一步(
存储变量)是不执行的,因为页面已经跳转了,动作就不再执行了,所以必须先给变量赋值,再打开登录页。项目小结 变量是一个数据的存储容器,可将有用的数据存储在里面,以便在需要的时候调用。对变量的操作方式只有两种:存入和读取。Axure中的变量有两种:全局变量和局部变量。全局变量的作用范围为一个页面;局部变量的作用范围为一个case里面的一个事务。通过变量进行已注册的验证时,必须先给变量赋值,再打开登录页。感谢观看 THANKS! |
|
