AXURE RP 9 中继器 Repeaters
目录
I.简述
II.实操
A.中继器原理理解
B.中继器添加行
C.中继器删除行
D.中继器更新/(修改)行
E.中继器的排序
F.中继器的筛选
I.简述
中继器是Axure 9.0中的高级元件,利用它可以实现很多重复元素的内容。
中继器元件由中继器数据集和中继器项两部分构成。
中继器可以用于需要重复设置的元件,如商品列表页、资讯列表页、联系人列表、表格等。
介绍
(1)编辑中继器:
从元件库——找到【中继器】元件,直接拖动到画布中;
双击进入中继器编辑页面;可以调整中继器的画布大小;、
画布外的元件,将会同步至中继器的左侧或上方。
中继器画布右上角有2个:
- 隔离——作用和动态面板一致,默认为关闭(隔离);点击开启后,会将中继器周围的其他元件均纳入进来;
- 关闭——
(2)中继器数据收集:
中继器元件是由中继器数据集的数据填充,填充的数据项可以是文本、图片、链接等。
在页面右侧即可看到类似于表格形状的数据集,在单元格里可以任意填充数据。
数据集的行与列的数据可以任意编辑,(注:数据集列的命名——需为英文;否则在中继器项载入数据时,无法关联数据集的内容)
(3)中继器的项:
中继器中重复布局的元件称为【项】。
II.实操
A.中继器原理理解
1.从元件库中拖入中继器到工作区;默认显示为一列三行;
中继器的数据来源可以简单概括为2种:
- 提前写入数据
- 用户提交数据
(1)构建一个关于花的中继器,命名为【花】,并填入对应数据:
(2)双击中继器【花】,此时要将表格中的数据展示到中继器中:
①:根据源数据进行中继器的编辑,导入3个对应的字段并分别进行命名;编辑后退出中继器,如下图显示:
②:要将数据导入到中继器中;打开交互模式
每项加载——添加目标,对每个字段进行值的设置
③:展示出后,还可以对整个中继器进行样式设置。
B.中继器添加行
eg:建立一个【植物】
(1)可以先建立一个文本输入框;并设置提示文字,并对每个文本框进行名称编辑
(2)建立中继器
①建立对应的中继器;并进行修改;
②对此中继器,设置交互
(3)设置【提交】按钮;并进行交互设置;
①选中按钮,进行交互设置(单击时——目标:中继器——选择【添加行】)
②先设置一个局部变量(因为要把所需的数据导入到对应的中继器中且显示出来)
再将设置的局部变量值,插入到对应的中继器里;依次分别设置数据;
C.中继器删除行
(1)在中继器中,继续添加一个字段【删除】;因为只是对某行数据进行删除,暂不牵涉数据,所以单独设置交互即可
(2)设置交互【单击时——选择中继器【删除行】——选当前】
(3)设置后,插入一些数据,进行预览设置即可
D.中继器更新/(修改)行
(1)在原有的中继器中,加入【修改】;
①对【修改】进行交互设计,需要的是单击后可以弹出修改弹框;{单击时——显示/隐藏 加入的修改弹框}
②进行标记设置:找到中继器中的标记行操作,设置标记(因为是对目前的此行数据进行修改,选择当前即可)
(2)在中继器更新弹框中,设置交互
①先进行单击操作,导入对应的数值;需要加入局部变量(对数据输入的文本框进行名称设置也需要)
也可以进行修改完,对【确定】按钮,进行单击,隐藏更新操作的设置。
设置后,可进行预览操作。
E.中继器的排序
1.先加入排序矢量图形,并将其转化为动态面板;
2.设置交互
选中这个排序图标,选择【单击时-找到中继器中的添加排序】,进行对应的设置即可。
(①可能有时候,会把那个图标设置的很小,不是很好点击;这时可以加入【热区】覆盖到这个标题,当点击热区范围中的任意位置都会进行排序)
②:可能有些Axure RP9 ,设置中继器排序后,无响应;确认操作无误后,那基本上就是汉化包的锅啦,有些汉化包可能会出错,导致无反应;只要删除汉化包【lang】文件夹,重新打开,即可进行正常的排序交互。
F.中继器的筛选
1.元素置放
先放一个文本框,并设置提示文字说明;再加入一个矢量图标,便于观感
2.设置交互
(1)点击“查找”图标,设置交互【单击时——选中中继器中的添加筛选——目标为中继器名称,设置对应的规则】
(2)交互设置
先添加一个局部变量lavr1,然后进行公式设置:
选择对应的中继器维度
(eg : 名称——item.name,进行赋值 等于搜索框的内容即lavr1);因为还要设置其他表头的,之间的关系是或 ||,用此连接。
[[(Item.name==LVAR1)||(Item.price==LVAR1)||(Item.count==LVAR1)]]
(3)对文本框设置交互
需求:
在没有文字输入的时候,可以复原;
交互设计:
设置文本改变时——,目标为 该中继器,全部;——移除筛选
添加一个情形:当当前文字为空的时候 ,移除筛选
设置成功后,进行预览即可。