第21节-中继器 | 剑雨Axure RP9系列【基础】

1、中继器

中继器是AXURE中一个高级的组件(Widget), 用于显示文本、图像和其他元素的重复集合。中继器是一个容器,容器中的每一个项目称作"item", 由于"tem中的数据由数据集来驱动,因此每一个item可以在展示的时候与其他不同。

中继器由数据集(可以理解为轻量级的数据库)来驱动,因此它可以用来显示动态排序和过滤。当你需要演示动态可排序/可过滤的设计(例如动态表格或产品列表)时,它将是你最优的选择。

中继器部件可在AXURE左侧的元件部分,直接拖至画布(中间的区域)中。


项目和数据集

  • AXURE8界面:
    中继器.png

  • AXURE9界面:
    中继器9.png

中继器部件由两部分组成:

  1. 由多个零件组成的item,这个item重复多个(你可以在右侧的样式栏目中设置他的布局方式);
  2. 数据集dataset:用来控制显示外观的数据表。
    存储在数据集中的文本、图像、数字等等通过中继器的OnitemLoad交互事件来显示在每个要展示的项目上。

项目item

每一个重复部分所有元件(文本、矩形、图片等等)的集合称为项目item。可以直接双击画布上的“中继器”或在“概要-页面”栏目中直接双击中继器或者中继器item包含的部件进入到item项目。在编辑项目item时,您将只看到其包含的窗口小部件的一个实例(instance)。

注:在AXURE9中, 您可以通过单击画布右上角的“隔离”来隐藏页面上的其他部件(这一点与AXURE8不同,AXURE8的同学可以忽略此条)
在中继器的数据集中,每一行将会被重复一次,例如,在您第一次将中继器从原件库中拖入到画布中时, 有三行,每一行只有一个矩形,因此,你在右侧中继器的数据集中会看到三行

  • 中继器item:
    repeater-item.png

  • 首次拖入时:
    repeater-item-firsttime.png

注:AXURE8与AXURE9在此界面基本一致。

数据集

控制中继器项目数据展示的数据表称为“数据集”。您可以在“样式”栏目中查看和编辑中继器的数据集。通过“单击“ 添加列”,“ 添加行”或使用表格上方的图标,你可以增加行或者列。同时你也可以在下面的单元格中单击鼠标右键来增加/减少行或者列。

Tips:

  • 其中,有多少行说明有多少个重复的item;有多少个列,说明就有多少个需要传递的变量(数据)。
  • 可以通过Ctrl+V(Windows)或者CMD+V(Mac)将数据直接粘贴到这里(当然图片还是需要单独导入的)

在项目item中显示数据

文本
  • 文本的键入:选中右侧数据集中单元格输入;
  • 文本值在item里面的展示:依次点击每项加载时–>设置文本–>选择元件, 选择一个中继器的列名,然后插入一个全局变量。点击完成即可。
  • AXURE9流程:

    在OnItemLoad事件中的“ 设置文本”操作。在“ 设置为”下拉列表中选择文本,然后单击“ 值”字段右侧的fx图标。在出现的“编辑文本”对话框的顶部,单击“ 插入变量”或“函数”。在下拉列表的中继器Repeater部分中,单击Item.ColumnName,其中“ColumnName”是包含文本的数据集列的名称。(例如,如果您正在使用默认转发器,则会在列表中看到Item.Column0。)
    单击“ 确定”关闭“ 编辑文本”对话框。现在,您选择的数据集列中的文本应显示在中继器项目中的目标窗口小部件上。

repeater-set_text.gif

图片
  • 导入图片:在数据集中还可以向项目item中传入图片对象。右键单击一个单元格,然后选择“ 导入图像”可以从电脑中选择所需的图像。
  • 设置图片显示:在“每项加载时”选择设置图片–>选择目标–>–>点击fx–>选择中继器/数据集,然后对应图片的列名,确定完成。
    RepeaterImageSet9.jpg

RepeaterImageSet8.png

####参考页面&URL
可以在中继器item容器里面的部件上设置交互.比如,可以设置打开外部链接。 新建交互单击时 打开链接,即可选择打开页面或者链接至外部url。在出现的“ 编辑值”对话框的顶部,单击“ 插入变量”或“函数”。在下拉列表的Repeater部分中,单击Item.ColumnName,其中“ColumnName”是包含URL和页面引用的数据集列的名称。

单击“ 确定”关闭“ 编辑值”对话框。在Web浏览器中预览原型时,您现在应该能够通过刚创建的交互导航到转发器数据集中引用的URL和原型页面。
9RepeaterItemWidgetSet.png

特殊属性

### 间距、布局和分页
默认情况下,所有中继器的项(item)都是可见的,并在一列中垂直布局,项(item)之间没有空格。您可以使用“ 样式”窗格的“ 间距”,“ 布局 ”和“ 分页 ”中的选项对其进行更改。

  • 间距:指每个item之间的间距像素;
  • 布局:可选择水平或垂直;
  • 分页:注意此分页为浏览器展示时每个页面展示多少个。同时可以设置从第几页开始载入。

    注:如果分页每页展示数大于item数时,展示直观上只有一页。

适应HTML内容

“适应HTML内容”复选框位于“ 样式”窗格中数据集的正上方,默认情况下处于启用状态。启用此选项后,每个转发器项将自动调整大小以适合其包含的小部件。

如果禁用此选项,则每个转发器项目将保持固定大小,而不管其包含的小组件的大小,位置或可见性是否发生任何更改。如果小部件超出其自身项目的固定边界,则动态移动或显示的小部件可能会与其他转发器项重叠。

中继器的遮罩(Mask)

默认情况下,中继器覆盖有绿色遮罩,以使其包含的小部件更容易与画布上的其他小部件区分开来。可以在AXURE中“ 视图”>“遮罩”中切换开关。

隔离单选组和选择组

将在高级教程中讲解

特殊交互

将在高级教程中讲解

排序、过滤、动态编辑数据集

将在高级教程中讲解

中继器数据集对象&属性

Item和TargetItem

将在高级教程中讲解

中继器Repeater对象及其属性值

将在高级教程中讲解


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部