Axure教程：Axure中继器元件详细使用教程.doc

《Axure教程：Axure中继器元件详细使用教程.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Axure教程：Axure中继器元件详细使用教程　　这是本人在“人人都是产品经理”发表的第一篇文章，主要目的是教会小白使用Axure7.0新增的组件——中继器（Repeater）。才疏学浅，如有纰漏，还请指正。　　　　使用之前　　在使用之前，我们总得搞清楚我们将要使用的元件是什么东西。　　据Axure官网介绍，中继器是一种用于展示模式重复的文本或图标的元件。没看懂？不急，我们先看一下效果演示，然后再一步步把这个效果做出来，就可以开始使用中继器了~　　一、初识中继器　　从元件库中找到中继器，按住并拖入中间的操作区，我们可以看到它已经有一列三行，分别写着1、2、3。　　　　那

2、么操作区中的1、2、3从哪里来的呢？聪明的同学已经看出来了，在右侧的“检视：中继器——中继器”栏有一个编辑区，里边便有1、2、3。但是这还不够，如果我们把“检视：中继器——交互——每项加载时”中的“case1”删除，那么操作区中1、2、3便消失了。由此可见，还需要“case1”把操作区和编辑区联系在一起。　　　　按“Ctrl+Z”撤销“删除case1”操作，双击“case1”打开用例编辑，我们来看看“case1”究竟做了什么。　　　　只见上面写着设置文字于（矩形）=“[[Item.Column0]]”。顿生疑惑：什么？矩形？什么矩形？Item又是什么？Column0又是什

3、么？Item.Column0又是什么？为什么要用“[[]]”包起来？　　关掉用例编辑，回到主界面，双击操作区的中继器，打开中继器模式编辑操作区。　　　　点击中继器模式编辑操作区中的矩形，可以看到右侧“检视：矩形”中名称栏显示“（矩形名称）”，这就是上文中的“（矩形）”。　　　　点击“检视：矩形”中的名称栏，我们给这个矩形取名为“动物”。　　　　选中中继器模式编辑操作区中的矩形，按“Ctrl+C”和“Ctrl+V”复制粘贴出新的矩形，拖动矩形放置在原矩形的右侧，并在右侧“检视：矩形”中名称栏将矩形名称改为“食物”。　　　　将操作区切换回index页面，我们可以看到发生了一些

4、变化：中继器变成了两行三列，“case1”中的“矩形”也变成了“动物”。这是我们刚才在中继器模式编辑操作区修改的结果。　　　　接下来，我们要做更多的操作。在右侧“检视：中继器——中继器”中，双击“Column0”，更名为“FirstColumn”，双击“添加列”，取名为“SecondColumn”。让我们看看“case1”发生了什么变化。　　　　我们将“Column0”改名“FirstColumn”之后，“case1”中的“Column0”也变为“FirstColumn”，由此我们可以意会他们的关系。　　二、每项加载时　　接下来，我们在“检视：中继器——中继器”的编辑区中

5、填入一些动物和食物的对应关系，可以看到，操作区也发生了改变，但是只显示了第一列，第二列却没有显示。　　　　这是因为“case1”只同步了第一列却没有同步第二列。接下来我们试着同步第二列。双击“case1”打开用例编辑，可以看到，“case1”只将“动物（矩形）”和“FirstColumn”联系起来。　　　　有样学样，我们把“食物（矩形）”和“SecondColumn”也联系起来。先勾选“食物（矩形）”，再将右下角的值由默认的“[[Item.FirstColumn]]”改为“[[Item.SecondColumn]]”。聪明的同学应该可以意识到，这个“[[Item.xxxx

6、xx]]”是一种默认格式，代表编辑区中xxxxxx列的值。很正确，Item就代表这个中继器的编辑区，“[[]]”则代表取值，取中继器编辑区xxxxxx列的值。　　　　点击确定按钮，关闭用例编辑，回到操作区，我们看到操作区中的中继器的第二列成功地与编辑区中的第二列同步。　　　　看到这里，你已经明白了很多。但是依然有疑惑：如果只是静态地展示一个表格那么直接使用“表格”元件不久可以了？耍我呢？　　稍安勿躁，学习了以上知识，下面我们可以准备起飞了。　　三、动态添加　　首先，我们添加两个文本框分别用于输入“动物”和“食物”，再添加个用于提交数据的提交按钮。　　什么？提交数据？　　　

7、　将两个文本框和提交按钮分布在右侧检视的名称栏改名为“输入动物”、“输入食物”和“提交按钮”。　　　　点击提交按钮，在右侧“检视：提交按钮——交互”中双击“鼠标单击时”，打开用例编辑。在左侧添加动作栏双击“中继器——数据集”中的“添加行”。在右侧配置动作栏勾选“（中继器）”（因为我们还没给我们的中继器取名，所以显示为“（中继器）”，跟前面提到的“（矩形）”一个道理）。　　　　右侧配置动作栏下面点击添加行打开添加行到中继器。　　点击“FirstColumn”下方，“添加行”右侧的“fx”，打开编辑值面板。点击“局部变量”中的“添