必威体育Betway必威体育官网
当前位置:首页 > 运营推广

手把手教您使用Axure7.0的中继器(Repeater)

时间:2019-07-22 14:40:00来源:运营推广作者:seo实验室小编阅读:76次「手机版」
 

repeater

中继器(英文名repeater)是Axure RP 7.0推出的新功能,是目前为止Axure最复杂的功能(没有之一),学习它的使用有助于我们快速设计一些复杂的交互界面。下面和大家分享我的使用心得。

中继器这个翻译是让人费解的,如果直译成“重复器”虽然不太专业但是更利于理解,或者干脆不编译,用“Repeater”就行。用过Asp.Net的人,一定对里面的Repeater很熟悉,没错,Axure的Repeater与Asp.Net的原理基本上是一样的。

先来说说Repeater解决什么问题。

请看以下图片。上方是一个表单,有5个表单部件和一个“添加”按钮,界面默认显示下方4个图文区域。点击“添加”后出现第5个图文区域。每点击一次添加一个新的区域。没有Repeater之前,要制作这样的原型是非常困难的。

使用Repeater实现以上效果是比较方便的。

1、  在界面中拖入一个Repeater。中文名叫“中继器”。

刚拖进来是这个样子的。

2、     设置Repeater内部部件

双击这个Repeater,进入Repeater内部界面。默认它会有一个矩形部件,删除它,按自己的需求拖入其他部件。如下,这个由一张图片与“活动名称”、“活动状态”、“开始时间”、“结束时间”4个Label部件组成的区域就是要重复显示的内容

注意,这时要给每个部件命名。从便在Repeater的动作中找到部件。方法如下:

3、  设置Repeater的数据集(dataset)

在Repeater编辑界面下方可看到以下界面。Repeater Dataset是数据集,另外两个一会再说。

在Dataset中设置要显示的数据的结构,同时可添加默认显示的数据。也就是“Column”与“Row”。以下”Name”、”Status”、”Start”、”End”、”Image”为添加的Column,注意列名必须为英文。

4、  设置Repeater的动作(Item Interactions)

a)        设置文本部件值——“Set Text”

在OnItemLoad(注意不是OnLoad,中文版的同学请自行翻译)中双击Case。

双击后出现以下界面。根据业务需要设置部件值。比如我是要设置一张图片和四个Label,于是分别选择了Set Text与Set Image。在最右侧选择Repeater内部的部件(注意:必须在第2步时设置部件名称,否则无法区分部件。)。以下为Set Text的界面。选择部件后,在下方选择Rich Text,再点击Edit Text。

点击Edit Text后出现以下界面。

点击Insert Variable of Function。

在Repeater/Dataset中选择列的值。如item.Name,item.Status,item.Start等。然后在左侧文本框会出现带[[]]的值。[[]]是Axure取值的语法。

b)        设置图片——“Set Image”

以上说的是设置文本的方式,如果是图片,可参见下图。可直接从电脑里导入,也可设置成Dataset里的值,当然也可根据Axure的语法设置成其他值。

5、  设置Repeater的格式

下图是设置Repeater格式的界面。可以设置Wrap(自动换行),并设置每几个项目开始换行。背景什么的也可以设置。

运行一下就可以看到效果了。

6、  实现点击“添加”的效果

回到主页面,这时变成以下效果了。Repeater根据自动计算呈现出所见即所得的效果。接下来,我们添加几个表单部件与一个“添加”按钮,来实现“添加”功能。

为表单中的部件设置名称,如图。

为“添加”部件设置OnClick事件,如图,双击”Case”:

在打开的Case Editor界面中选择Repeaters-Dataset-Add Rows,勾选右侧复选框,点击右下方的Add Rows按钮。其原理是当点击“添加”按钮时向Repeater的Dataset中添加一行。

弹出以下窗口,点击Add Row,在新添的这一行中录入表单部件值。可以通过点击fx按钮添加。

点击fx后进入以下窗口。点击Add local Variable。在第一格录入变量名称,如LVAR_Name。如果要取文本框的值,第二格可以选text on widget。第三格选相应的部件。

再点击Insert Variable or Function,选择刚设置的变量LVAR_Name。点击OK。再将另几个部件值也设置上即可。

这样,就完成了点击“添加”按钮的效果了。

相关阅读

教您htc恢复出厂设置的使用技巧方法

恢复出厂设置这个功能并不是经常使用的,因为误操作引起的后果是非常严重的。恢复出厂设置从字面上就可以理解,手机中的所有设置将恢

一句话教您怎么写产品推广文案

关于SEO推广最重要的目的就是,做好公司的品牌推广与产品推广!那作为一个文案要做的就是写好公司品牌推广的文案与产品推广的文案!但

网络麻豆,手把手教你找模特~

近期最劲爆的淘女郎消息是什么 ? 无疑是“找麻豆”平台的上线,但关于这项功能如何使用, 以及其中的一些关键点, 卖家们了解过了吗

脉脉Profile怎么玩?手把手教程在这里!

一年用脉脉100个小时,定期更新Profile,你的职业梦就能一步一步实现!10万BAT员工们的脉脉经验你值得拥有!好啦,Profile是脉脉用来搭建

QQ公众号10月10日再次开放,教您获取Q码

大家一定不要错过机会哈!因为腾讯媒体开放平台账号发布的高质量内容,会被推送到腾讯新闻客户端、天天快报客户端、腾讯网、迷你首

分享到:

栏目导航

推荐阅读

热门阅读