Axure RP 9原型设计实战案例教程（App与Web）教案 第八章 中继器

《AxureRP9原型设计实战案例教程（APP与Web）》课程教案课题：中继器教学目的：学会什么是中继器、中继器数据集和中继器的项。学会将中继器数据集里的数据绑定到中继器上，然后在中继器里显示出来。学会利用Axure元件制作新增数据弹出框。学会利用中继器元件来动态地进行新增数据操作。学会使用中继器进行行内删除数据操作和全局删除数据操作。课型：新授课课时：本章安排1个课时。教学重点：重点：学会什么是中继器、中继器数据集和中继器的项。教学难点：难点：学会将中继器数据集里的数据绑定到中继器上，然后在中继器里显示出来。教学过程：教学形式：讲授课，教学组织采用课堂整体讲授和分组演示。教学媒体：采用启发式教学、案例教学等教学方法。教学手段采用多媒体课件、视频等媒体技术。板书设计：本课标题中继器课次1授课方式理论课□讨论课□习题课□其他□课时安排2学分共2分授课对象普通高等院校学生任课教师教材及参考资料1.《AxureRP9原型设计实战案例教程（APP与Web）》；电子工业出版社。2.本教材配套视频教程及学习检查等资源。3.与本课程相关的其他资源。教学基本内容教学方法及教学手段课程引入中继器是AxureRP9中用于展示和管理列表数据的强大元件，它可以将一组数据以列表形式展示，并支持增删改查、筛选、排序等操作，是制作动态列表、表格、卡片列表等功能的必备工具。参考以下形式：1.衔接导入2.悬念导入3.情景导入4.激疑导入5.演示导入6.实例导入7.其他形式一、中继器元件的组成“中继器”元件是AxureRP9中的一款高级元件，是一个存放数据集的容器。通常使用中继器来显示商品列表、联系人信息列表和数据表等。“中继器”元件是由中继器数据集中的数据项填充的，数据项可以是文本、图片或页面链接。将“中继器”元件从“元件”面板中拖曳到页面中。双击页面中的“中继器”元件，进入中继器编辑模式，用户可以在这种模式下对中继器进行编辑，编辑完成后单击右上角的“关闭”按钮，即可退出中继器编辑模式，返回页面编辑模式。默认情况下，“中继器”元件显示为一列3行，其显示数量与“样式”面板中的“数据”选项下的行一致。二、项目交互与样式设置2.1数据集数据集就是一个数据表，位于“样式”面板中。数据集可以包含多行多列。单击“添加行”或“添加列”即可完成行或者列的添加。也可以通过单击顶部的图标完成添加、删除等操作。【提示】：双击列名可以对其进行编辑。需要注意的是，列名只能为字母、数字和“_”,且不能以数字开头。数据集中的内容可以包含文本、图片和页面。在单元格上单击鼠标右键，在弹出的快捷菜单中选择“引用页面”选项，在弹出的“引用页面”对话框中选择要引用的页面后，即完成页面的引用。在单元格上单击鼠标右键，在弹出的快捷菜单中选择“导入图片”选项，在弹出的“打开”对话框中选择要打开的图片后，即完成页面的引用。【提示】：从Excel复制到数据集中的数据末尾会有一个多余的空行，为了避免不必要的错误，要将其删除。2.2项目交互项目交互主要用来将数据集中的数据传递到原型中的元件并显示出来；或者根据数据集中的数据执行相应的动作。单击“交互”面板上的“新建交互”按钮，即可在下拉列表中看到项目交互事件，项目交互只有“载入时”“每项加载时”和“项目调整尺寸时”3个触发事件。3个触发事件中，比较常用的是“每项加载时”事件。选中“中继器”元件，在“交互设计编辑器”对话框中可以看到添加“每项加载”事件的动作设置。2.3样式设置选中“中继器”元件,用户可以在“样式”面板中设置其元件样式。除了与其他元件相同的“填充”“线段”“圆角”和“边距”样式以外，还能对“中继器”元件特有的“布局”“背景”和“分页”样式进行设置。2.4布局在“布局”选项下，默认情况下为“垂直”布局方式。选择“水平”方式，元件则更改为水平布局。网格排布勾选“网格排布”复选框，用户可以将“中继器”元件项目排列为网格，并可以设置每行中项目的数量。背景用户通过勾选“交替颜色”复选框，分别设置“颜色”和“交替”颜色，实现中继器背景交替效果。【提示】：要向正确显示背景交替效果，需要将双击进入中继器编辑模式，修改“填充”不透明性为0%。否则将不能显示交替效果。分页在“分页”选项下，用户可以设置中继器元件的分页显示功能。勾选“分页显示”复选框，用户可以在“每页项目数”文本框中输入每页项目的数量，在“起始页”文本框中设置起始页码。三、掌握数据集的操作掌握了中继器的组成后，接下来一起学习一下中继器数据集的操作。数据集可以完成添加、删除和修改等操作，并能够实时呈现。这就让原型产品的效果更加丰富、逼真。同时中继器还具有筛选功能，能够让数据按照不同的条件排列。3.1设置分页与数量元通过数据集填充了中继器的数据，如果希望这些数据能够分页显示，可以通过“样式”面板设置分页。然后，再通过“设置当前显示页面”动作，动态设置中继器元件默认显示的数据页。设置每页项目数量，允许改变当前可见页的数据项数量。*显示全部列表项：设置中继器在一页中显示所有项。*每页显示多少项：设置中继器每页显示数据项的数量。【提示】：在“样式”面板中直接设置的分页效果将直接显示在页面中。而通过脚本实现的效果则只能在预览页面时才显示。3.2添加和移除排序使用中继器的“添加排序”动作可以对数据集中的数据项进行排序。在“交互编辑器”对话框中设置动作面板中设置各项参数。使用中继器的“移除排序”动作可以对已添加的排序规则进行移除。用户可以在“交互编辑器”对话框中设置动作面板中选择移除所有设置或者输入名称，移除指定的设置。3.3添加和移除筛选使用中继器的“添加筛选”动作，在设置动作面板中选中中继器并给中继器添加筛选规则。如[[Item.price<=999]]，意思是将价格小于等于的数据显示出来，不符合条件的不显示。使用中继器的“移除筛选”动作，可以把已添加的过滤移除。可以选择移除所有过滤，也可以输入过滤名称，移除指定的过滤。3.4添加和移除中继器项目表述方式：通常演示操作和播放视频，讲解添加和移除中继器项目的方法。中继器的添加和删除一共包含了添加行、标记行、取消标记行、更新行和删除行5种动作。在生成的HTML原型中，中继器的项可以被添加和删除，但是要删除特定的行，必须先“标记行”。*添加行：使用“添加行”动作可以动态地添加数据到中继器数据集。*标记行：“标记行”的意思就是选择想要编辑的指定行。*取消标记行：“取消标记行”动作可以用来取消选择项。使用此动作可以取消标记当前行、取消标记全部行，或者按规则取消标记行。*更新行：使用“更新行”动作，可以动态地将值插入到已选择的中继器项中，可以更新已标记的行，也可以使用规则更新行。比如，首先使用“标记行”动作选中任意一款或多款商品，再使用“更新行”动作将选中商品的销量、价格和评价进行更新。*删除行：如果已经对中继器数据集中的项进行了标记行，则可以使用“删除行”动作删除已经被标记的行了。另外，还可以按照规则删除行。实战——使用中继器完成员工信息管理表1．教学以学生学习教材的基本内容为主，系统全面地学习税收制度的构成要素的基本内容。2．整个教学过程中，各教学点可根据实际情况，进行拓展知识的讲解。本章小结：中继器