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

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

《《AxureRP9网站与App原型设计》教学教案09用中继器模拟数据库操作.docx》由会员分享，可在线阅读，更多相关《《AxureRP9网站与App原型设计》教学教案09用中继器模拟数据库操作.docx（18页珍藏版）》请在冰豆网上搜索。

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

第9章用中继器模拟数据库操作

课时内容

用中继器模拟数据库操作

课时

4

教学目标

了解中继器，掌握Axure中继器模拟数据库操作

教学重点

Axure中继器模拟数据库操作

教学难点

Axure中继器模拟数据库操作

教学设计

1.教学思路：

通过实例引入中继器元件的概念；通过多媒体演示和实机操讲解中继器绑定数据、新增数据弹出框设计、中继器新增数据、中继器删除数据等操作。

2.教学手段：

多媒体+计算机

3.教学资料：

教材、多媒体课件

教学内容

中继器元件是在AxureRP7.0后新增的元件，也有人把中继器叫作数据集，因为从表面上看它可以动态存储数据，也可以模拟数据库的操作，如增、删、改、查、搜索、排序以及分页操作等。

中继器元件可以通过动态的管理数据，给用户一种动态的交互效果，提高用户的体验度。

中继器模仿数据库的交互效果

9.1认识中继器

中继器元件可以用来显示重复的文本、图片、链接，需要注意，它是用来显示重复的、有规律可循的文本和图表，并动态地管理它们。

它可以模拟数据库的操作，进行数据库的增、删、改、查操作，因此经常会使用中继器来显示商品列表信息、联系人信息、用户信息等。

中继器图标

中继器元件由两方面组成：

中继器数据集和中继器的项。

先来看看什么是中继器的数据集。

拖曳一个中继器元件到工作区域，在检视区域可以看到中继器的数据集。

中继器数据集

中继器数据集有点像数据库的表，数据集的列名就是数据库表的列名，可以对其重新命名，要注意一点，不可以将数据集的列命命名为中文，如果命名为中文，它会提示列名无效。

数据集功能条的操作包括新增行操作、删除行操作、上移行操作、下移行操作、新增列操作、删除列操作、左移列操作、右移列操作等，通过这些功能条操作，可以对中继器数据集进行管理。

什么是中继器的项呢？

当双击中继器元件进入中继器里面的时候，会看到一个矩形元件。

而在检视区域可以看到它包括3行数据，而矩形元件只有一个，它是中继器元件的基础布局元件，就把它称为中继器的项，数据集有3行数据，它就被重复使用3次。

中继器的项

可以删除该矩形元件，自己重新制作中继器的项，也就是重新制作重复的单元。

删除矩形元件，拖曳一个水平菜单元件到工作区域，可以看到该水平菜单元件也被使用了3次，中继器的项可以作为基础布局，也就是可以重复的单元。

中继器

9.2中继器绑定数据

软件制作时经常会由员工信息管理的需求，员工信息表格可能有这样几列，员工编号、姓名、部门、职务等，在管理员工信息时，如果新来一位员工，要新增员工信息，如果某位员工离职，要删除员工信息，员工信息有变动，要修改员工信息，除了这些还可能要查询员工信息。

员工信息管理

下面利用中继器来完成员工信息的管理，看看中继器是如何动态地新增员工数据以及删除员工数据，来达到和数据库同样操作效果的。

9.2.1中继器布局设计

（1）先来制作表格的标题，有6列，拖曳一个“水平菜单”元件到工作区域，将其第1列作为复选框的选中列，可以选中所有行，拖曳一个“复选框”元件到工作区域，将其文本内容命名为“全选”，标签命名为“全选复选框”，将表格的第2~6列的文本内容分别命名为“员工编号”“姓名”“部门”“职位”“操作”，字体加粗，设置表格背景为灰色（#999999）。

表格标题

（2）拖曳一个“中继器”元件到工作区域，将其标签命名为“员工信息”，双击进入到中继器元件里，先来设计它的数据集，需要4列，分别时“员工编号”“姓名”“部门”“职务”，把它们命名为英文“employeeID”“employeeName”“department”“job”，添加3行数据。

编辑中继器数据集

（3）接下来设计中继器的项，也就是重复显示的布局，先把矩形元件删除，拖曳一个表格元件到工作区域，删除表格的后两行，新增几列使表格总列数为6列，第一列放置选中复选框，用来进行选中行操作，标签命名为“行内复选框”。

编辑中继器的项

（4）最后一列是操作列，提供修改和删除操作，拖曳两个“标签”元件到工作区域，将其文本内容分别命名为“修改”“删除”，字体颜色设置为蓝色（#0000FF）。

修改删除操作

（5）需要给各个列添加标签，分别为“复选框”“员工编号”“姓名”“部门”“职务”“操作”。

格列命名

9.2.2中继器数据绑定

（1）中继器数据集和中继器的项编辑结束后，中继器中并没有显示数据集里数据。

员工信息中继器

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

员工编号设置文本

（3）在弹出的“编辑文本”对话框中单击“插入变量或函数…”链接，要给中继器里的员工编号赋值，就插入数据集里的员工编号这一列值，即在弹出的下拉列表中选择“Item.employeeID”。

这样就可以把数据集里的数据绑定到中继器上。

插入数据集里的值

（4）用同样的方式绑定姓名、部门、职务3列数据。

中继器绑定数据

（5）返回到“员工信息管理”页面，可以看到数据集里的数据被绑定到中继器里。

数据绑定成功

回顾绑定的步骤：

拖曳一个中继器，设计中继器的数据集，接着设计中继器的项，添加每项加载时的触发事件，选中要赋值的目标，插入变量，找到数据集的列，这样就可以将数据集里数据绑定到中继器上。

9.3新增数据弹出框设计

在新增数据的时候，往往会用一个弹出框来显示新增数据的页面，修改数据的时候也会用到弹出框，用来显示修改数据的页面。

下面开始来设计新增数据的弹出框。

（1）拖曳一个“按钮”元件到工作区域，将其作为新增数据的按钮；拖曳一个“动态面板”元件到工作区域，将其宽度设置为1200，高度设置为1000，动态面板命名为“员工信息”，状态命名为“新增修改弹出框”，新增和修改数据都可以使用此弹出框。

员工信息动态面板

（2）进入到“新增修改弹出框”状态里，拖曳一个“矩形1”元件到工作区域，将其宽度设置为1200，高度设置为1000，填充为黑色，将其标签命名为遮罩层。

遮罩层一般是半透明的，因此需设置不透明度为30；再拖曳一个“矩形1”元件到工作区域，将其作为弹出框的背景，将矩形1元件的宽度设置成340，高度设置成330，填充为蓝色（#0099FF），设置圆角半径为3。

弹出框背景

（3）拖曳一个“文本标签”元件到工作区域，将其作为弹出框的标题，文本内容为“员工信息管理”，15号字，加粗，白色字体（FFFFFF）；拖曳一个“文本标签”元件到工作区域，将其作为关闭按钮，文本内容为“关闭”，放在右侧，15号字，加粗，白色字体（FFFFFF）。

弹出框标题及关闭按钮

（4）拖曳一个“矩形1”元件到工作区域，将其作为新增页面的背景，去掉边框并调整大小。

拖曳一个标签元件到工作区域，将其重新命名为“员工编号”，字体加粗；拖曳一个“文本框”元件到工作区域，将其标签命名为IDInput。

员工编号输入

（5）选中员工编号标签和文本框，按住Ctrl键向下拖曳复制，修改标签元件为“姓名”，修改文本框标签为“nameInput”，再复制一个标签元件，重命名其为“部门”，拖曳一个“下拉菜单”元件到工作区域，为其设置几个下拉选项，将其标签命名为“departInput”。

姓名和部门输入

（6）选中员工编号标签和文本框，按住Ctrl键复制，修改标签元件为“职位”，修改文本框标签为“jobInput”；拖曳两个“按钮”元件到工作区域，分别命名为“保存”“关闭”。

职务及保存按钮

这样就把员工信息管理的新增数据弹出框设计完成。

应该先把弹出框隐藏起来，并置于底层；并给新增按钮添加鼠标单击时触发事件，在单击新增按钮时显示员工信息动态面板，并将该动态面板置于顶层。

新增按钮交互

9.4中继器新增数据操作

利用中继器元件和新增数据的弹出框来实现新增数据的操作，看看如何实现中继器新增数据操作。

（1）进入到“新增修改弹出框”的状态里，选中“关闭”按钮，为其添加鼠标单击时触发事件，隐藏“员工信息”动态面板，并且将它置于底层；设置员工编号、姓名、职务输入框里的值为空值，并设置部门为默认值——办公室。

关闭按钮交互

（2）选中“保存”按钮，为其添加鼠标单击时触发事件，在添加动作面板中单击“添加行”选项，勾选“员工信息”复选项，在设置动作面板单击“添加行”按钮。

添加行操作

（3）先给中继器数据集里的员工编号赋值，在弹出的“添加行到中继器”对话框中单击employeeID列中的fx图标，在弹出的编辑值对话框中将员工编号输入框里的值赋值给中继器数据集里的员工编号。

中继器数据集员工编号赋值

（4）运用同样的方式给中继器数据集里的姓名、职务、部门赋值，但是在给部门赋值的时候要注意，局部变量赋值方式是通过被选项进行赋值，因为部门项是下拉列表，而其他都是文本输入框。

中继器数据集姓名部门职务赋值

（5）中继器新增完数据之后，隐藏“员工信息”动态面板，并且将它置于底层，设置员工编号、姓名、职务输入框里的值为空值，并设置部门为默认值办公室。

隐藏弹出框

（6）按F5键发布原型检查效果，单击“新增”按钮，显示出弹出框，单击“关闭”按钮隐藏弹出框并插入一条数据。

插入数据

可以看到该表格插入了一条新的数据。

进行动态的新增数据，与操作数据库的效果在外观上是一致的，数据库进行新增数据操作，会将数据保存到库里，而使用中继器新增数据，并没有将数据保存到数据集里，刷新浏览器页面，会发现新增的数据丢失掉，表格中仅显示数据集里默认添加的数据。

9.5中继器删除数据操作

中继器元件除了可以新增数据还可以删除数据，中继器删除数据操作，分为行内删除数据和全局删除数据，行内删除数据只能将当前行删除掉，而全局删除数据，可以删除选中行数据。

9.5.1行内删除数据

（1）进入到“员工信息管理”中继器里，选中删除标签元件，为其添加鼠标单击时触发事件，在添加动作面板单击“标记行”选项，勾选“员工信息”复选项，在设置动作面板选择“当前”单选项，将当前行先标记起来。

标记要删除的行数据

（2）在添加动作面板单击“删除行”选项，勾选“员工信息”复选项，在设置动作面板选中“已标记”单选项，将当前行删除。

删除标记数据

（3）按F5键发布原型，单击删除标签，可以看到将当前行数据删除掉。

发布原型

9.5.1全局删除数据

全局数据可以删除一条或者多条数据，它是通过复选框选中要删除的行数据，然后再单击删除按钮，删除数据。

（1）拖曳一个“按钮”元件到工作区域，将其文本内容命名为“删除”，作为全局删除按钮。

全局删除按钮

（2）进入到“员工信息”中继器里，选中行内复选框，为其添加选中时触发事件；标记当前行，再添加取消选中时触发事件，取消标记当前行。

行内复选框交互

（3）回到“员工信息管理”页面里，选中全选复选框，为其添加选中时触发事件；选中行内复选框，再为其添加取消选中时触发事件，取消选中行内复选框。

全选复选框交互

（4）选中全局删除按钮，为其添加鼠标单击时触发事件，在添加动作面板单击“删除行”选项，删除已标记的行。

全局删除按钮交互

按F5键发布原型，勾选多个要删除的行数据，再单击全局删除按钮，可以看到同时删除多行数据，也可以有选择性地进行删除。

全局删除

小结

（1）学会什么是中继器、中继器数据集和中继器的项。

（2）学会将中继器数据集里的数据绑定到中继器上，然后在中继器里显示出来。

（3）学会利用Axure元件制作新增数据弹出框。

（4）学会利用中继器元件来动态地进行新增数据操作。

（5）学会使用中继器进行行内删除数据操作和全局删除数据操作。

练习

利用中继器元件来设计余额宝转入记录，设计余额宝界面布局，同时将数据绑定到中继器元件里，并显示出来。

余额宝转入记录