《AxureRP9网站与App原型设计》教学教案—09用中继器模拟数据库操作.docx

第9章用中继器模拟数据库操作
课时内容
用中继器模拟数据库操作
课时
4
教学目标了解中继器，掌握Axure中继器模拟数据库操作教学重点 Axure中继器模拟数据库操作
教学难点 Axure中继器模拟数据库操作
1 .教学思路：通过实例引入中继器元件的概念；通过多媒体演示和实机操讲解中继器 教小、几、+ 绑定数据、新增数据弹出框设计、中继器新增数据、中继器删除数据等操作。
数于双计2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件
教学内容~~中继器元件是在Axure RP 7.0后新增的元件，也有人把中继器叫作数据集，因为从外表上看它 可以动态存储数据，也可以模拟数据库的操作，如增、删、改、查、搜索、排序以及分页操作等。 中继器元件可以通过动态的管理数据，给用户一种动态的交互效果，提高用户的体验度。
中国移动 4G073%® 08:09
<r转入T
余额自动转入
201604-28 03:27+300.00
496.18单次转入
2016-04-2516:26+ 180.00
395.06单次转入 201604-2511:27
单次转入2016-04-2511:27
余额自动转入2016-04-22 02:51
单次转入2016-04-1512:23
+433.005215.06
+4,676.004782.06
+88.00106.06
+33.0046.96
单次转入2016-04-09 21:23
+50.00165.36
退款转入 2016-04-09 21:15+244.50
513.86中继器模仿数据库的交互效果
9.1认识中继器
中继器元件可以用来显示重复的文本、图片、链接，需要注意，它是用来显示重复的、有规律 可循的文本和图表，并动态地管理它们。它可以模拟数据库的操作，进行数据库的增、册h改、查 操作，因此经常会使用中继器来显示商品列表信息、联系人信息、用户信息等。

X交互编辑器七 章mw*声 添加^t
国•动作
翻开朝
关曲口
框架中翻开1瞬
漆动到元件
元件动作
皖加
设置面板状态
iSBS%
设置图片
设置选中
设置列表选中项
启用噤用
移动
旋转
设置尺寸
置于顶层/底层
设置不透明
我取焦点

七 章mw*声 添加^t
国•动作
翻开朝
关曲口
框架中翻开1瞬
漆动到元件
元件动作
皖加
设置面板状态
iSBS%
设置图片
设置选中
设置列表选中项
启用噤用
移动
旋转
设置尺寸
置于顶层/底层
设置不透明
我取焦点
辘丽
▼单击时
显示E
瞪藏员工信息
苴于姬/庭后
员工信息到顶层
设置文本
员工编号为1
设置文本
姓名为-
设置文本
职务为
设置列表选中项 departinput为办公室
自忘 departinput
£X^)
选项
选项
办公室
关闭按钮交互
(2)选中“保存”按钮，为其添加鼠标单击时触发事件，在添加动作面板中单击“添加行”选 项，勾选“员工信息”复选项，在设置动作面板单击“添加行”按钮。

关闭按钮交互
(2)选中“保存”按钮，为其添加鼠标单击时触发事件，在添加动作面板中单击“添加行”选 项，勾选“员工信息”复选项，在设置动作面板单击“添加行”按钮。
x交互编辑器
区勘*液HBWt组织动作
Q ▼单击时
展开畋起丽点
中/器动作|员工信息添加。行
通谢序 移除排序 游加径进 树飙选 设置当前显示页面 设置每页工程数量
| |
更新行 热除行
其之动作 设置自适应视图
其它
喙融
X
*22
员工信息o
取消
添加行操作
(3)先给中继器数据集里的员工编号赋值，在弹出的“添加行到中继器”对话框中单击 employeelD列中的fx图标，在弹出的编辑值对话框中将员工编号输入框里的值赋值给中继器数据集 里的员工编号。

X交互编辑器
X添加行到中继器
u滋m事件
置于顶层底层
设置不透明
荻取焦点
展开/收起树节点
Q

| ?mployeeNa... department job1
n
添加行
五 |£1fl

＞；编辑值
目标
员工信息
中继造33作
添力獭序
移除排序
融喻选
移除停进
ISS当前砺娜
设置等支工程数量
同昭
取i酶记
更新行
删除行
其它动作
设置目适应视图
W
其它 触发事件
在下方输入文本,变量名称或表达式要写在"[[]]"中。例如：
•插入变量[[MyVar]],获取变量"MyVar"的当前值；
•插入表达式[[VarA + VarB]],获取'VarA + VarB”的和；
•插入系统变邕[PageName]],获取当前页面名称.
侵人变量或由数
[[LVAR1]]
局部虹
在下方创立用于插入元件值的局部变量，局部变量名称必须是字母数字.不允许包含空■格.
游加局部旁展
LVAR1
=元件文字
IDInput▼ x
取消
取消
中继器数据集员工编号赋值
＞;交互编辑器
（4）运用同样的方式给中继器数据集里的姓名、职务、部门赋值，但是在给部门赋值的时候要 注意，局部变量赋值方式是通过被选项进行赋值，因为部门项是下拉列表，而其他都是文本输入框。
x添加行到中继器employeelD | jmployeeNa... |department|job

employeelD | jmployeeNa... |department|job
设置不透明 获取焦点 展开瞰点
＞；编辑值
添加行 人|手.
箍枷
目标
员工信息

中旌品动作
添力的序 移除排序 凌）喘选
移除落选
设置当前显示页面
设置每页工程数量
融而
1^7
更新行
删除行
其它年作
设置自适应视图 iSSSM 一
其它
触发事件

在下方输入文本.变量名称或表达式要写在"[[]]"中.例如：
■插入变量[[MyVar]],获取变量"MyVar”的当前值；
•插入表达式[[VarA + VarB]],获取"VarA + VarB”的和；
,插入系统变基[PageName]],获取当前页面名称.
插入变量或用数
[[LVAR1]]
在下方创立用于插入元件值的局部变量，局部变量名称必质是字母数字.不允许包含空格. 添加局娥虽
IVAR1 =元件文字-IDInput取消

取消
确定中继器数据集姓名部门职务赋值
（5）中继器新增完数据之后，隐藏“员工信息”动态面板，并且将它置于底层，设置员工编号、 姓名、职务输入框里的值为空值，并设置部门为默认值办公室。
X交互编辑器
&添mw*夕4■添ms?作
链接动作
翻开链接
关闭窗口
框柒中翻开链接
港动到元件 元件动作
姗脸
设置面板状态
设置图片
设置选中
设置列表选中项
启用/禁用
移动
螭
设置尺寸
资加踞
设置不透明
费取焦点
展开Mi起的节点 中金Si动作
涉碘序
汨幻才作
▼单击时
员工信息添加1行 显示假趣
哙藏员工信息
置于顶J5/庭JS 员工信息到顶层
设苣文本
IDInput 为"" 设置文本 nameinput 为""
设置文本 jobinput 为"" 设首列表选中项 departlnput为办公室
iSSSOfF
目标 departinput
选项
速项
办公室
取消
隐藏弹出框
101回I区I
（6）按F5键发布原型检查效果，单击“新增”按钮，显示出弹出框，单击“关闭”按钮隐藏 弹出框并插入一条数据。
D员工信息管理<--> C ① 127.0.0. l:32767/$tart.ht・l#id=c0xvp9&p=员工信息管理
Local Preview
三员工信息管理新塔
全选
员工端号
姓名
部门

操作
口选中
1001
运
人力资源部

修改删除
□选中
1002
李四
行政管理部
助理
修改删除
□选中
1003
珏

修改删除
□选中
1004
小刚
开发部

修改删除
插入数据
可以看到该表格插入了一条新的数据。进行动态的新增数据、与操作数据库的效果在外观上是 一致的，数据库进行新增数据操作，会将数据保存到库里，而使用中继器新增数据，并没有将数据 保存到数据集里，刷新浏览器页面，会发现新增的数据丧失掉，表格中仅显示数据集里默认添加的 数据。
9.5中继器删除数据操作
中继器元件除了可以新增数据还可以删除数据，中继器删除数据操作，分为行内删除数据和全 局删除数据，行内删除数据只能将当前行删除掉，而全局删除数据，可以删除选中行数据。
9.5.1 行内删除数据实战演练
(1)进入到“员工信息管理”中继器里，选中删除标签元件，为其添加鼠标单击时触发事件， 在添加动作面板单击“标记行”选项，勾选“员工信息”复选项，在设置动作面板选择“当前”单 选项，将当前行先标记起来。
X交互编辑器Q不加事件釉间ft
Q置于顶层/底层
设置不透明
点展开/收起何节点
中旌翳动作
面曲游移除排序
渤喘选移除碎
设置当前显示页面设黄号煲工程数量
添力昭更新行
删除行 其它动作设置自适应视图
领研▼单击时
标记行
虹信息当面^5^
员工信息行
◎当前o全部O规那么取消
标记要删除的行数据
(2)在添加动作面板单击“删除行”选项，勾选“员工信息”复选项，在设置动作面板选中“已 标记”单项选择项，将当前行删除。
>:交互编辑器
电 曲网的£♦笈［ns*
置于顶层/底层设置不透明 获取零点 展开/收起的节点
中理疆动作添力嘛序
移脚郦添力陈5选 移除缁选
设置当前显示页面
iSS每那么目四
利而
会刷
更新行|基除行|
其它动作
设置目适应视图辘於
▼单击时
标记行信息当惭
翻履行
员工信息中已标记的行目标
员工信息行
O当前O规那么@已标记删除标记数据
(3)按F5键发布原型，单击删除标签，可以看到将当前行数据删除掉。
取消

发布原型

9.5A全局删除数据
全局数据可以删除一条或者多条数据，它是通过复选框选中要删除的行数据，然后再单击删除 按钮，删除数据。
实战演练员工信息管理 x
令

员工信息管理 x
令
(1)拖曳一个“按钮”元件到工作区域，将其文本内容命名为“删J除”，作为全局删除按钮。
1四、12po ,।14Po ,：5pq ।16po ,17Pq新增

员工编号
姓名
部门
职务
操作
口选中
1001
诏
人力资源部

修改删除
口选中
1002
李四
行政管理部
助理
修改删除
口选中
1003
珏
设让部
设计师
修改删除
Vf□o
]删除□
全局删除按钮
(2)进入到“员工信息”中继器里，选中行内复选框，为其添加选中时触发事件；标记当前行, 再添加取消选中时触发事件，取消标记当前行。
行内复选框交互

(3)回到“员工信息管理”页面里，选中全选复选框，为其添加选中时触发事件；选中行内复 选框，再为其添加取消选中时触发事件，取消选中行内复选框。
员工信息管理
令
交互・ 说明
全选复选框 tit
全选复选框交互
（4）选中全局删除按钮，为其添加鼠标单击时触发事件，在添加动作面板单击“删除行”选项, 删除已标记的行。
300
400
500
600
700
说明
tit
单击时
1
姓名
部门
职务
掾作
-

恒
人力资源部

修改删除

李四
行政管理部
助理
修改删除

珏

istm
修改删除

V
新增
—D—
删除
删除行
员工信息中已标记的行
客用交互

鼠标悬停交互样式全局删除按钮交互
按F5键发布原型，勾选多个要删除的行数据，再单击全局删除按钮，可以看到同时删除多行数 据，也可以有选择性地进行删除。
I O I回I汉丁
D员工信息管理x +
全局删除

（1）学会什么是中继器、中继器数据集和中继器的项。
（2）学会将中继器数据集里的数据绑定到中继器上，然后在中继器里显示出来。
小结
（3）学会利用Axure元件制作新增数据弹出框。
（4）学会利用中继器元件来动态地进行新增数据操作。
（5）学会使用中继器进行行内删除数据操作和全局删除数据操作。
同时将数据绑定
练习
利用中继器元件来设计余额宝转入记录，设计余额宝界面布局,
到中继器元件里，并显示出来。
中国移动4G6
与73%■3 08:09
转入
T
余额自动转入
+300.00
2016-04-28 03:27
496.18
单次转入
+180.00
2016-04-25 16:26
395.06
单次转入
+433.00
2016-04-25 11:27
5215.06
单次转入
+4,676.00
2016-04-25 11:27
4782.06
余额自动转入
+88.00
2016-04-22 02:51
106.06
单次转入
+33.00
2016-04-1512:23
46.96
单次转入
+50.00
201 &-04-09 21:23
165.36
退款转入
+244 50
2016-04-09 21:15
513.86
余额宝转入记录
□□□
概要
Page 1 X
国 Page 1
Default
表单元件^
8
§
FTiTc] H I .
*1 1 1 I
+ 为
H
下拉列表
理.
说明
100
中继器数据集
1匚
II I 1 1II I I 1
中继器
中继器图标
中继器元件由两方面组成：中继器数据集和中继器的项。
先来看看什么是中继器的数据集。拖曳一个中继器元件到工作区域，在检视区域可以看到中继 器的数据集。
中继器数据集有点像数据库的表，数据集的列名就是数据库表的列名，可以对其重新命名，要 注意一点，不可以将数据集的列附命名为中文，如果命名为中文，它会提示列名无效。
数据集功能条的操作包括新增行操作、删除行操作、上移行操作、下移行操作、新增列操作、 删除列操作、左移列操作、右移列操作等，通过这些功能条操作，可以对中继器数据集进行管理。
什么是中继器的项呢？
当双击中继器元件进入中继器里面的时候，会看到一个矩形元件。而在检视区域可以看到它包 括3行数据，而矩形元件只有一个，它是中继器元件的基础布局元件，就把它称为中继器的项，数 据集有3行数据，它就被重复使用3次。
X5H
国 Page 1
Default
概要
8
I
内区
FTiTcl H I I 1 q | | fill]
中遒器
内联通
表单元件,
+ & :
8 T
8
Z
中继器的项
样式 交互. 说明
（中继器名称）
位查和尺寸
73 x 146

可以删除该矩形元件，自己重新制作中继器的项，也就是重新制作重复的单元。删除矩形元件, 拖曳一个水平菜单元件到工作区域，可以看到该水平菜单元件也被使用了 3次，中继器的项可以作 为基础布局，也就是可以重复的单元。
S Page 1
7Ctt
Default
t=
概要
□ 口
页面尺寸
Auto
添加自适应视国
默认
页面排列
A0B
t±±d 表格
中继器
Ol
N
图片

9.2 中继器绑定数据
软件制作时经常会由员工信息管理的需求，员工信息表格可能有这样几列，员工编号、姓名、 部门、职务等，在管理员工信息时，如果新来一位员工，要新增员工信息，如果某位员工离职，要 删除员工信息，员工信息有变动，要修改员工信息，除了这些还可能要查询员工信息。
新增 I 删除员工信息管理
□全选
员工编号
姓名
部门
职假设
操作
□选中
1001
张三
人力奥源部
经理
修改删除
□选中
1002
李四
行政管理部
助理
修改删除
□选中
1003
王五
设计部
设计师
修改删除

下面利用中继器来完成员工信息的管理，看看中继器是如何动态地新增员工数据以及删除员工 数据，来到达和数据库同样操作效果的。
9.2.1 中继器布局设计实战演练
sieet9B ▼
: ।, ,|驷，」，，，，I-.」，，，J—,, ।, I— , ।,,, ,1呐，，।— ।「秋：
（1）先来制作表格的标题，有6歹U，拖曳一个“水平菜单”元件到工作区域，将其第1列作为 复选框的选中列，可以选中所有行，拖曳一个“复选框”元件到工作区域，将其文本内容命名为“全 选”，标签命名为“全选复选框”，将表格的第2〜6列的文本内容分别命名为“员工编号”“姓名” “部门”“职位”“操作”，字体加粗，设置表格背景为灰色（#999999）。
Q田口:
叵员工信旦管理Default
表格标题
（2）拖曳一个“中继器”元件到工作区域，将其标签命名为“员工信息”，双击进入到中继器 元件里，先来设计它的数据集，需要4歹U,分别时“员工编号”“姓名” “部门”“职务”，把它 们命名为英文 “employeelD” “employeeName” udepartment“job”，添加 3 行数据。
出面概要
Q国口
目员工信旦管理
羽
Q+ （5> !
Default二
Iffl：S
内酸33!看
国宣
员工信息
交互・
90 x 121
employeel D
|employeeName
| department
[job|
1001
运
人力资源部
经理
1002
李四
行政管理部
助理
1003

口侬 HTML内容
-2 == 3SE t 黑成浜a

编辑中继器数据集
（3）接下来设计中继器的项，也就是重复显示的布局，先把矩形元件删除，拖曳一个表格元件 到工作区域，删除表格的后两行，新增几列使表格总列数为6歹U,第一列放置选中复选框，用来进 行选中行操作，标签命名为“行内复选框”。
员工信息笞理X I‘XX屯 0 , , , ।| 100, , , , 200 , , । , 13pq , , , 400 , । , 明 ,, J 剑
q 0 q LT 唇 a员工信息管理
渣 I Q Q+ （5> ：
DefaultC肉 国昌二
下拉列表列表程编辑中继器的项
页面概要
Q国口
@员工信息管理
潘
Q +：
Default：
铤螭钮一纵礴
H2H3
（4）最后一列是操作列，提供修改和删除操作，拖曳两个“标签”元件到工作区域，将其文本 内容分别命名为“修改”“删除”，字体颜色设置为蓝色（#0000FF） o修改删除操作
员工信息管理xl
. o . . . 1 ..
100 .
200 ,
300 ,
400 ,
50Q
（5）需要给各个列添加标签，分别为“复选框”“员工编号”“姓名”“部门” “职务”“操 作”。
Table Cell
Arial
Normal
A 百：口
簸：1
概要
说明
!员工信息管理
Default
[•utton|
BUTTON
o
100
200
300
400
点击上方
员工编号
常用交互
tit
鼠标息停交互样式日）

9.2.2 中继器数据绑定
✓ \实战演练
（1）中继器数据集和中继器的项编辑结束后，中继器中并没有显示数据集里数据。
概要
民工信J3管理xj
100
3oq
400
59° x
ZZm
700

目员工信息管理Default

Default
二全选
员工编号
姓名
部门

□选中

修改删除
□选中

修改删除
□选中

修改删除

§

员工信息中继器
（2）选中“员工信息”中继器，添加每项加载时触发事件，先绑定员工编号数据，操作是在添加动作面板单击“设置文本”选项，勾选“员工编号”复选项，在设置动作面板单击fx图标。
X交互编辑器列表项尺寸ej®时

列表项尺寸ej®时
Q
取消
员工编号设置文本
（3）在弹出的“编辑文本”对话框中单击“插入变量或函数…”链接，要给中继器里的员工编 号赋值，就插入数据集里的员工编号这一列值，即在弹出的下拉列表中选择“Item.employeelD”。 这样就可以把数据集里的数据绑定到中继器上。
x编辑文本在下方输入文本.变重2称或表达式要写在“旧『中。例如：
•插入变量[[MyVar]],获取变量'MyVar”的当前值；
•插入表达式[[VarA + VarB]],获取“VarA + VarB”的和；
•插入M^^^IPageName]],获取当前页面名称.

在下方输入文本.变重2称或表达式要写在“旧『中。例如：
•插入变量[[MyVar]],获取变量'MyVar”的当前值；
•插入表达式[[VarA + VarB]],获取“VarA + VarB”的和；
•插入M^^^IPageName]],获取当前页面名称.
OnLoadVariable
▼中继器做据集

▼中继器做据集
Item
Item emptoyeelD
Item emptoyeeName
Item.department
Item.job
index
isFirst
陵量名称必须是字母数字.不允许包含空格。
isLast
取消
插入数据集里的值
（4）用同样的方式绑定姓名、部门、职务3列数据。

x交互编辑器
电初事件/志加9祚
理IBS）作
翻开榜接
关闭窗口
海桀中翻开糙接
流动到元件
元件动作
设置面板状态
设置图片
设置选中
▼每项加线时
设置文本
员#为"（（Item emptoyeelD]]"
设性文本
姓名为"（[Item employeeName）], 设者文本
部门为“【Hem department]]"
设置文本
职务为"（[item job]]"
职务
[[Item.job]]

设置列表选中项启用盛用
移动螭 设置尺寸
出百不透明获取焦点
取消
确定中继器绑定数据
（5）返回到“员工信息管理”页面，可以看到数据集里的数据被绑定到中继器里。

员工编号
ns
部门
螃

□选中
1001

人力资源部
经理
修改删除
□选中
1002
李四
行政管理部
助理
修改删除
□选中
1003
珏

修改删除

数据绑定成功
回顾绑定的步骤：拖曳一个中继器，设计中继器的数据集，接着设计中继器的项，添加每项加 载时的触发事件，选中要赋值的目标，插入变量，找到数据集的列，这样就可以将数据集里数据绑 定到中继器上。
9.3 新增数据弹出框设计
在新增数据的时候，往往会用一个弹出框来显示新增数据的页面，修改数据的时候也会用到弹 出框，用来显示修改数据的页面。下面开始来设计新增数据的弹出框。
实战演练
d）拖曳二个“按钮”元件到工作区域，将其作为新增数据的按钮；拖曳一个“动态面板”元 件到工作区域，将其宽度设置为1200,高度设置为1000,动态面板命名为“员工信息”，状态命名 为“新增修改弹出框”，新增和修改数据都可以使用此弹出框。
胜 超 蹒
员工信息
位百和尺寸
0X 0Y
1200W .1000H
动"极，
从不濠动
□自适应内容
口 100%^ （做览器中粉）

胜 超 蹒
员工信息
位百和尺寸
0X 0Y
1200W .1000H
动"极，
从不濠动
□自适应内容
口 100%^ （做览器中粉）
员工信息动态面板

（2）进入到“新增修改弹出框”状态里，拖曳一个“矩形1”元件到工作区域，将其宽度设置 为1200,高度设置为1000,填充为黑色，将其标签命名为遮罩层。遮罩层一般是半透明的，因此需 设置不透明度为30；再拖曳一个“矩形1”元件到工作区域，将其作为弹出框的背景，将矩形1元 件的宽度设置成340,高度设置成330,填充为蓝色（#0099FF）,设置圆角半径为3。
-Normal -13-A 填充：线段■三»
弹出框背景
（3）拖曳一个“文本标签”元件到工作区域，将其作为弹出框的标题，文本内容为“员工信息 管理”，15号字，加粗，白色字体（FFFFFF）；拖曳一个“文本标签”元件到工作区域，将其作为 关闭按钮，文本内容为“关闭"放在右侧，15号字，加粗，白色字体（FFFFFF）。

员工信息管理弹出框标题及关闭按钮
（4）拖曳一个“矩形1”元件到工作区域，将其作为新增页面的背景，去掉边框并调整大小。 拖曳一个标签元件到工作区域，将其重新命名为“员工编号”，字体加粗；拖曳一个“文本框”元 件到工作区域，将其标签命名为IDInput。
员工信息管理关闭
员工编号员工编号输入
（5）选中员工编号标签和文本框，按住Ctrl键向下拖曳复制，修改标签元件为“姓名”，修改 文本框标签为“nameinput"，再复制一个标签元件，重命名其为“部门”，拖曳一个“下拉菜单” 元件到工作区域，为其设置几个下拉选项，将其标签命名为“departinput”。
'Droplist▼X编辑下拉列表
Arial添加和组织列表选项.
勾选一项作为默认项，未勾选那么默认为第一项.
+添加三编冬冬项Normal
员工信息.新增修改弹出框▼娥离回关闭X
□ ■献：
□办公室□
□人力资源部□财务部
□开发部确定
取消姓名和部门输入
（6）选中员工编号标签和文本框，按住Ctrl键复制，修改标签元件为“职位”，修改文本框标 签为“jobinput" ；拖曳两个“按钮”元件到工作区域，分别命名为“保存” “关闭”。

员工信息管理关闭
职务及保存按钮

这样就把员工信息管理的新增数据弹出框设计完成。应该先把弹出框隐藏起来，并置于底层； 并给新增按钮添加鼠标单击时触发事件，在单击新增按钮时显示员工信息动态面板，并将该动态面 板置于顶层。
员工信息曹理X
$1，11 …|1
说明
tit
—D—
新增
—O-
▼单击时
显示;除藏
显示员工信息
y
置于顶层/底层
员工信息到顶层
新增按钮交互
新通交互
常用交互
中继器新增数据操作
利用中继器元件和新增数据的弹出框来实现新增数据的操作，看看如何实现中继器新增数据操 作。
实战演练
(1)进入到“新增修改弹出框”的状态里，选中“关闭”按钮，为其添加鼠标单击时触发事件, 隐臧“员工信息”动态面板，并且将它置于底层；设置员工编号、姓名、职务输入框里的值为空值, 并设置部门为默认值一一办公室。