Axure新手养成计划(连载24)

Axure书籍 小楼一夜听春语 16782℃ 0评论

第3章       变量

1.    变量简介

苏苏:楼哥,我这两天在一些Axure群里经常看到有人提到变量,变量到底是什么呢?

小楼:变量,只看名称可能觉得非常难懂。其实,如果知道它的作用,抛开它的名称,就会变得很容易!你知道谷氨酸钠是什么吗?

苏苏:药……药……

小楼:切克闹……

苏苏:别闹!

小楼:呃……谷氨酸钠俗称“味精”!

苏苏:说变量怎么扯到味精了……

小楼:哦,扯远了。变量是一个数据的存储容器,有用的数据可以存储在里面,需要的时候去使用。它只有两个操作:存入和读取。就像……

苏苏:就像装味精的袋子,可以把味精存进去,用的时候倒出来。

小楼:……

2.    变量类型

Axure中的变量有两种,一种是全局变量,另外一种是局部变量。具体的使用方法,我们下面做详细的介绍。

2.1.  全局变量

全局变量是变量中的一种类型。

我们知道,在乘坐交通工具,可以办一张通用的公交卡,然后可以在所有的公交车、地铁线路中使用,它的使用范围就是整个公共交通系统。就像公交卡有它的使用范围,变量同样有使用范围。公共交通系统就像我们当前整个原型项目,地铁、公交就像是每个页面。全局变量就像公交卡一样能够在整个原型的所有页面中使用。

举例:在A页面中输入”小楼”并且选择性别“男”,点击“跳转”按钮,跳转到B页面显示“欢迎你,小楼帅哥!”,而输入“苏苏”选择性别“女”的时候,跳转到B页面时显示“欢迎你,苏苏美女!”

首先,我们新建A页面“pageA“放入元件并命名,文本框为“username”,性别选择我们使用单选按钮,男性为“male”,女性为“fmale”,并在属性中设置为一个单选按钮组,组名“sex”。跳转按钮使用形状按钮,可以不加命名。

然后,我们来分析一下,如果需要在B页面获取到A页面中的数据,必须通过全局变量进行传递。所以,我们在A页面的跳转动作之前,必须要将页面上的数据保存到变量中,否则就丢失了。但是,变量在哪里呢?

我们需要先创建全局变量,才能够使用。在这个案例中,我们需要两个全局变量,一个用来存放输入的用户名,另外一个用来存放输入的性别。

下面我们就创建全局变量。

打开导航菜单“项目“的列表,选择倒数第二项”全局变量“,打开全局变量的编辑页面,这里默认创建了一个名为”OnLoadVariable“的全局变量。我们可以删除它,也可以重命名。新建全局变量只需要点击界面中的”+“就可以了。

在这里,我们鼠标右键点击默认的全局变量名称为其重命名为“uname“,然后,新建一个全局变量命名为”usex“。大家注意在这里,还可以为全局变量设置默认值。(图136)

136

(图136)

创建完变量后点击“确定“关闭全局变量管理界面。

我们知道要保存的数据中,性别的数据是通过单选按钮选择的,所以,当任何一个单选按钮被选中时,全局变量“usex“保存的数据都应该随之变化。那么我们就给每个单选按钮添加事件用例。

但是,使用哪个触发事件呢?我们来想象一下,单选按钮被点击时一定会改变为被选中状态,所以,当单选按钮被点击时,我们就让全局变量中存入相应的数据就可以了。

单选按钮的【鼠标单击时】事件,没有直接在触发事件列表中显示,而是在列表下方的【更多事件】中选择。

我们先为单选按钮“男“添加用例动作,选择了触发事件之后,在动作列表中找到【设置变量值】,并勾选记录性别的全局变量”usex“,为其设置【值】为”帅哥“。(图137)

137

(图137)

参考上面,我们也为单选按钮“女“添加用例动作,设置全局变量”usex“的值为”美女“。

完成了单选按钮的事件设置,接下来就是跳转按钮了。

跳转按钮被鼠标点击的时候,除了跳转页面,还要在页面跳转之前将文本框中输入的用户名保存到全局变量“uname“中。这里大家千万要注意在用例编辑页面组中动作的列表中,一定要把跳转页面的动作放在最后。因为axure中程序的执行顺序是由上至下的,页面跳转的动作会直接影响到其后面的动作失效,因为当前页面的动作不能到跳转后的页面去执行。

知道了要做什么,我们就在跳转按钮的【鼠标单击时】事件上添加相应的用例动作就可以了。

首先,设置全局变量“uname“的值为【元件文字】”username“。(图138)

138

(图138)

然后,在当前窗口打开“pageB“。

通过以上的操作,我们完成了A页面中的操作,下面我们来设置B页面“pageB“。

B页面,要在页面打开后,显示一句欢迎词:“欢迎你,XXYY!”XX代表用户名,YY代表根据性别的不同称谓。

根据上面的描述,我们能看出需要一个元件来显示欢迎词,这个元件我们用一个没有文字的文本标签,命名为“welcome“。

显示欢迎词是在页面打开的时候完成的。所以,我们需要在【页面交互】的触发事件【页面载入时】中添加用例动作。设置元件“welcome“的文本为【值】,值的内容我们先键入”欢迎你,!“。(图139)

139

(图139)

在前面我们已经提到,用户名和性别对应的称谓都是通过全局变量传递的,那么到了设置元件“welcome“的文本时,怎么把变量值嵌入到这句欢迎词当中呢?很简单,一共3个步骤(图140):

  1. 点击【值】的输入框后面的“fx“,打开编辑文本的界面;
  2. 点击“插入变量或函数…“,打开变量与函数列表;
  3. 单击列表中全局变量的名称,将其插入到写好的文字当中去。当然,按照[[变量名]]格式手工输入也是可以的。

140

(图140)

完成这两个步骤后,保存并返回到主界面,就完成了我们想要的效果了。

备注:在浏览器中查看原型时,如果带有站点地图,我们就能够实时看到全局变量的值。在站点地图中第三个功能图标“X=”相当于一个变量跟踪器,它能够时时将项目中所有的变量以及当前的值显示出来。

本节任务:不参考教程完成上述案例。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载24)

喜欢 (37)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. pageA中单选按钮的事件设置,【鼠标单击时】和【选中改变时】都可以实现相应的效果,对不?
    一默如雷2015-09-23 10:13 回复
    • 同问
      无敌大元帅2015-09-28 14:43 回复
  2. ①不填写姓名和选择性别,直接点击跳转也会进入pageB,显示“欢迎你,!”②username添加限定条件,应该怎样添加才能达到这样的结果:若不填写姓名和性别,会分别提示请填写姓名和性别,当光标在username中,提示被隐藏,刚刚试了几次,没有成功,请指教 💡
    后入丈母娘2015-10-09 15:53 回复
    • 你越学越回头去了。。前面有讲到2个用例,如果,则。在点击“提交&跳转”的时候先设置为条件不满足的提示,然后再设置成如果就跳转即可,前面课程有讲到,请回头复习。
      。。。2015-12-14 16:40 回复
  3. 选了男的可以显示出来,但女的不行
    pp2015-11-21 11:54 回复
    • 说明你的变量不对,另外男女必须合成一个单项组。
      。。。2015-12-14 16:32 回复
  4. 跳转到pageB时名字的变量一直出不来,同时A页面我设置有点击时间的话就无法输入文字了;
    炎玄2016-06-01 14:04 回复
  5. 测试的时候正常输入名字,选择性别,结果是正确的,但返回后,重新输入姓名,性别默认之前选择的性别,page B就不会显示帅哥/美女了,这是正常的操作结果吗?
    lulu2016-11-14 14:28 回复
    • 我用的8.0,返回自动清空,没有出现你说的情况
      djiprvtd2017-06-08 16:09 回复
  6. 没有设置局部变量,到pageb接收不到名字的
    没事画这玩2017-03-11 16:40 回复