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

第9章 用中继器模拟数据库操作 课时内容 用中继器模拟数据库操作 课时 4 教学目标 了解中继器，掌握Axure中继器模拟数据库操作 教学重点 Axure中继器模拟数据库操作 教学难点 Axure中继器模拟数据库操作 教学设计 1.教学思路：通过实例引入中继器元件的概念；通过多媒体演示和实机操讲解中继器绑定数据、新增数据弹出框设计、中继器新增数据、中继器删除数据等操作。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 中继器元件是在Axure RP 7.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）在弹出的“编辑文本”对话框中单击“插入变量或函数…”链接，要给中继器里的员工编号赋值，就插入数据集里的员