AxureRP7.0从入门到精通(连载34)

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

第6章    中继器

1. 中继器的组成

苏苏:楼哥,我想做一个商品列表,素材和数据都弄好了,但是做起来感觉好麻烦哦!要复制好多,还要改来改去……

小楼:呃……嫑激动!做商品列表不用一个一个去做,可以使用中继器来实现。

苏苏:中继器是什么鬼?

小楼:呃……这个说来好长好长……

中继器(Repeater)是AxureRP7.0版本新增加的一个功能强大的元件。通过使用中继器,能够让我们的原型更逼真,制作效率更快。

在ASP.NET开发环境中Repeater 控件是一个容器控件,用于显示重复的项目列表。ASP.NET中的Repeater 控件没有自己内置的呈现功能,用户必须通过创建模板来提供 Repeater 控件的布局。当网页运行时,Repeater 控件会循环通过数据源中的记录,并为每个记录呈现一个项。

Axure中的中继器(Repeater)元件与ASP.NET中的Repeater控件非常相像,也是用来呈现重复的项目列表。它用来显示的模板在编辑区中进行创建。当生成的Html文件运行时,可以通过【项目交互】中的【每项加载时】事件将【数据集】中的每条记录循环的加载在模板上,为每一条记录显示一项。中继器还可以进行【样式设置】调整项目列表的布局、分页、背景色、填充间距等。

中继器拖放到编辑区中,像是一个一列三行表格,双击这个元件,就能打开新的界面。新打开的界面中,就包含我们之前提到的编辑区、数据集、项目交互和样式设置。(图6-1)

图6-1

(图6-1)

   为了便于理解,我们将中继器内部结构分为三个部分进行理解。分别是:显示、逻辑和数据。

显示:负责显示内容的组成、布局、样式、分页、背景等设置。包括:编辑区和样式设置。

逻辑:负责通过设置交互完成数据层与显示层的数据传递。包括中继器内部的项目交互和元件交互中对中继器的控制。

数据:负责存储数据。这一部分只有数据集。

这三部分之间的关系为:

1、默认情况下,显示项的数量与中继器数据集中的数据行数保持一致,比如元件默认有一列数据“Column0”,这一列数据共有三行,对应页面中元件所显示的三个矩形;(图6-2)

图6-2

(图6-2)

2、通过逻辑才能将数据集中的数据传递给显示部分呈现出来;比如:元件中每个矩形上的数字,是通过项目交互中【每项加载时】事件中的用例动作来实现的。(图6-3)

图6-3

(图6-3)

   3、中继器数据集的数据行会在元件加载或数据发生改变时由上至下进行读取,每读取一行都会触发【每项加载时】事件,并执行该事件中设置的用例动作。

理解了中继器的组成,我们来详细的看一下每一个组成部分的功能和使用方法。


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载34)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 中继器数据集中的图片要怎样操作才能添加并显示到网页中呢?
    fengfengfeng2015-11-04 23:05 回复
  2. 小楼老师,这第一章木有了,第五章木有了,怎么木有按照您之前发的章节截图来讲课捏??
    皮蛋蛋2016-02-01 09:47 回复