AxureRP教程–变量运算

AxureRP在6.0版本以下的版本是不支持数学运算的,到6.0版本的时候加入了变量的数学运算,支持简单的加减乘除运算。但在6.0版本之前,如5.5,5.6版本里是不支持数学运算的,那要实现变量的加法运算该怎么办呢,还是有办法来实现的,不过需要简单修改一下生成的原型文件的js代码,通过这样间接的方式来实现变量运算。

这种间接的方式需要用户稍微懂一点脚本代码,至少能明白基础的关键字的意思,比如字符串型是String,数字型是Number,所以对于没有脚本代码基础的朋友可能会比较困难一些,不过这里介绍过操作方法之后依葫芦画瓢就可以了,编写过JS代码的话就没有任何问题了。AxureRP生成的原型是HTML格式的,其上带的交互效果在转换成HTML之后都是通过JS脚本来实现交互功能的,这里要修改的就是这些JS脚本文件。

下面介绍修改操作的具体步骤,首先当然还是要先在AxureRP中制作设计好页面,比如这里分别要模拟加减乘除四种运算,就设置四种运算的模拟界面,如下图所示,并将对应的组件都分类命名。

再就是设置每种运算后面的计算按钮的单击事件,这里需要新增两个变量a,b,用来存储每种运算的前两个输入框的值,然后将运算值赋给第三个输入框,这里需要注意的是,需要判断前两个输入框是否为空,这里默认为空的话就不响应运算,除法的时候还需判断第2个输入框不能够为0,就是需要判断一些运算的常见规则。设置方式见下图,也可以查看源文件。

设置好之后就要生成原型,这个时候去点击计算按钮是不能运算的,会输出来一个类似“a+b”这样类型的字符串,而不是实际结果,这个当然不是我们要的结果,后面就需要去修改文件代码了。

找到原型文件生成目录,在目录下找到Home_files文件夹,这个文件夹下面会有一个axurerp_pagespecificscript.js文件,用记事本或者其他文本编辑器打开这个文件,在靠近页末的地方找到以下四行代码:

SetWidgetFormText(‘u4’, PopulateVariables(‘a+b’));

SetWidgetFormText(‘u10’, PopulateVariables(‘a-b’));

SetWidgetFormText(‘u15’, PopulateVariables(‘a*b’));

SetWidgetFormText(‘u20’, PopulateVariables(‘a/b’));

将其修改为:

SetWidgetFormText(‘u4’, String(Number($a)+Number($b)));

SetWidgetFormText(‘u10’, String(Number($a)-Number($b)));

SetWidgetFormText(‘u15’, String(Number($a)*Number($b)));

SetWidgetFormText(‘u20’, String(Number($a)/Number($b)));

改好之后保存这个js文件,再刷新页面,现在就能得到正确的计算结果了。

以上就是通过修改文件的方式实现的AxureRP6.0以下版本的变量运算方式,对JS脚本比较熟悉的朋友可以加多一些限制条件,比如小数点位数啊什么的,可以灵活变通,反正都已经到改代码的地步了,不过建议在做原型的时候不要出现很复杂的计算演示,简单一点就好。AxureRP6.0下做运算是没有什么问题的,可以设计实现简易计算器的功能,后续会介绍。

以上在AxureRP 5.5版本下演示通过,高版本的都适用

点此查看演示

点此下载源文件

 



无觅相关文章插件,快速提升流量

“AxureRP教程–变量运算”有1条评论

commenter

AxureRP 6.0以上版本已经不再需要这么做了,已经支持四则运算