Axure-RP原型设计图解微课视频教程第9章课件

第9章用中继器模拟数据库操作Axure RP 原型设计图解微课视频教程互 联 网 职 业 技 能 系 列第9章 用中继器模拟数据库操作Axure RP 原型设计图内 容导 读中继器部件是Axure RP 7.0新增的部件，也有人将中继器称为数据集，因为从表面上看它可以动态存储数据，可以模拟数据库的操作，进行增删改查、搜索、排序和分页操作。这些数据库可以完成的操作，中继器部件同样可以完成。中继器通过动态地管理数据，体现了一种动态的交互效果，提高了用户的体验度，如图所示。中继器部件是Axure RP 7.0新增的部件，也有人将中继内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结9.1 认识中继器9.2 中继器绑定数据9.3 新增数49.1认识中继器中继器部件可用来显示重复的文本、图片、链接，可以模拟数据库的操作，进行数据库的增删改查。经常会使用中继器来显示商品列表信息、联系人信息、用户信息等。9.1认识中继器中继器部件可用来显示重复的文本、图片、链接内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结9.1 认识中继器9.2 中继器绑定数据9.3 新增数69.2.1 中继器布局设计1、先来制作表格的标题。拖曳一个横向菜单（Classic Menu-Horizontal）部件，第一列作为复选框的选中列，可以选中所有行。拖曳一个复选框部件，文本内容命名为“全选”，标签命名为“全选复选框”，第二列为员工编号，第三列为姓名，第四列为部门，第五列为职位，第六列为操作，字体加粗，灰色（999999）背景。2、拖曳一个中继器部件，标签命名为“员工信息”，双击进入中继器部件，先来设计它的数据集，需要4列，分别为员工编号、姓名、部门、职务，将它们命名为英文“employeeID”“employeeName”“department”和“job”，添加3行数据，如图所示。9.2.1 中继器布局设计1、先来制作表格的标题。拖曳一个79.2.1 中继器布局设计3、接下来要设计中继器的项，也就是重复显示的布局。先删除矩形部件，拖曳一个表格部件，删除两行，留一行就可以了，表格有6列，第一列放置选中复选框，用来作为选中行操作，标签命名为“行内复选框”。4、最后一列是操作列，提供修改和删除操作。拖曳两个标签部件，文本内容分别命名为“修改”和“删除”，字体颜色设置为蓝色（0000FF），如图所示。9.2.1 中继器布局设计3、接下来要设计中继器的项，也就89.2.2 中继器数据绑定1、中继器数据集和中继器的项编辑完成后，中继器并没有显示数据集里的数据。2、双击进入中继器，在下方管理区域中选择“中继器项目交互”选项卡，添加“每项加载时”触发事件，先绑定员工编号数据，单击“设置文本”，勾选中继器里的“员工编号”复选框，单击“fx”按钮。3、单击“插入变量”，要给中继器里的员工编号赋值，插入数据集里的员工编号这一列值，这样就可以将数据集里的数据绑定到中继器上，如图所示。9.2.2 中继器数据绑定1、中继器数据集和中继器的项编辑完99.2.2 中继器数据绑定4、用同样的方式绑定姓名、部门、职务这3列。5、返回“员工信息管理”页面，可以看到已将数据集里的数据绑定到了中继器里，如图所示。9.2.2 中继器数据绑定4、用同样的方式绑定姓名、部门、职内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结9.1 认识中继器9.2 中继器绑定数据9.3 新增数119.3新增数据弹出框设计1、拖曳一个HTML按钮部件，作为新增数据的按钮；拖曳一个动态面板部件，宽度设置为1200，高度设置为1000，动态面板命名为“员工信息”，状态命名为“新增修改弹出框”，新增和修改都可以使用这个弹出框。2、进入“新增修改弹出框”状态，拖曳一个矩形，宽度设置为1200，高度设置为1000，填充为黑色，标签命名为遮罩层，遮罩层一般有半透明的感觉，设置不透明度为30；再拖曳一个矩形部件，作为弹出框的背景，宽度设置成340、高度设置成330，填充为蓝色（0099FF），设置圆角半径3，如图所示。9.3新增数据弹出框设计1、拖曳一个HTML按钮部件，作为129.3新增数据弹出框设计3、拖曳一个标签部件，作为弹出框的标题，文本内容为“员工信息管理”，15号字，加粗，白色字体（FFFFFF）；拖曳一个标签部件，作为关闭按钮，文本内容为“关闭”，放在右侧，15号字，加粗，白色字体（FFFFFF）。4、拖曳一个矩形部件，作为新增页面的背景，去掉边框，调整大小，中继器数据集里有4列，员工编号、姓名、部门、职务。拖曳一个标签部件，重新命名为“员工编号”，字体加粗；拖曳一个文本框单行部件，标签命名为IDInput，如图所示。9.3新增数据弹出框设计3、拖曳一个标签部件，作为弹出框的139.3新增数据弹出框设计5、选中员工编号和输入框，按住Ctrl键向下拖曳复制一个，修改为“姓名”，标签命名为“nameInput”，再复制一个，修改为“部门”，给它设置一个下拉菜单，输入几个下拉选项，标签命名为“departInput”。6、选中员工编号和输入框，按住C t r l键复制一个，修改为“职务”，标签命名为“jobInput”，需要保存和关闭两个按钮，拖曳两个HTML按钮部件，保存按钮设置得大一些，如图所示。9.3新增数据弹出框设计5、选中员工编号和输入框，按住Ct内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结9.1 认识中继器9.2 中继器绑定数据9.3 新增数159.4中继器新增数据操作1、进入“新增修改弹出框”的状态里，选中“关闭”按钮，给它添加鼠标单击时触发事件，隐藏“员工信息”动态面板，并且将它置于底层，设置员工编号、姓名、职务输入框里的值为空值和设置部门为默认值“办公室”。2、选中“保存”按钮，给它添加鼠标单击时触发事件，在第二步下面找到中继器的“新增行”操作，勾选“员工信息管理”中继器，再单击“新增行”按钮，如图所示。9.4中继器新增数据操作1、进入“新增修改弹出框”的状态里169.4中继器新增数据操作3、弹出“新增行到中继器”对话框，先给中继器数据集里的员工编号赋值，单击“fx”按钮，将“员工编号”输入框里的值赋值给中继器数据集里的员工编号。4、运用同样的方式给中继器数据集里的姓名、职务、部门赋值，但是在给部门赋值的时候要注意，局部变量赋值方式是通过下拉列表框“选中项值”进行的，其他都是文本输入框，如图所示。9.4中继器新增数据操作3、弹出“新增行到中继器”对话框，179.4中继器新增数据操作5、中继器新增数据完成之后，隐藏“员工信息”动态面板，并且将它置于底层，设置“员工编号”“姓名”和“职务”输入框里的值为空值，设置“部门”为默认值“办公室”。6、按F5键发布看一下效果。单击新增按钮，弹出框显示出来，单击关闭按钮弹出框隐藏起来，插入一条数据，如图所示。9.4中继器新增数据操作5、中继器新增数据完成之后，隐藏“内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结9.1 认识中继器9.2 中继器绑定数据9.3 新增数199.5.1 删除行内数据1、进入“员工信息管理”中继器，选中“删除”按钮，给它添加鼠标单击时触发事件，在第二步中继器下面单击“标记行”操作，勾选“员工信息管理”，将当前行先标记起来。2、在第二步中继器下面单击“删除行”操作，勾选“员工信息管理”，选中“已标记”，将当前行删除，如图所示。9.5.1 删除行内数据1、进入“员工信息管理”中继器，选中209.5.2 删除全局数据1、拖曳一个HTML按钮部件，文本内容命名为“删除”，作为全局删除按钮。2、进入“员工信息管理”中继器，选中行内复选框，给它添加选中状态改变时触发事件，新增条件，如果选中状态值为true，标记当前行；如果选中状态值为false，取消标记当前行，如图所示。9.5.2 删除全局数据1、拖曳一个HTML按钮部件，文本内219.5.2 删除全局数据3、回到“员工信息管理”页面里，选中全选复选框，给它添加选中状态改变时触发事件，新增条件，如果选中状态值为true，设置行内复选框为选中状态；如果选中状态值为false，设置行内复选框为未选中状态。4、选中全局删除按钮，给它添加鼠标单击时触发事件，在第二步下面单击“删除行”操作，删除已标记的行，如图所示。9.5.2 删除全局数据3、回到“员工信息管理”页面里，选中内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结9.1 认识中继器9.2 中继器绑定数据9.3 新增数小结Summary本章主要学习Axure中继器模拟数据库操作，应当做到以下几点。01OPTION02OPTION03OPTION04OPTION1学会什么是中继器以及中继器数据集和中继器的项2学会将中继器数据集里的数据绑定到中继器上，然后在中继器里显示出来。3学会利用Axure部件制作新增数据弹出框。4学会利用中继器部件来动态地新增数据操作。05OPTION5学会使用中继器进行删除行内数据操作和删除全局数据操作本章主要学习Axure中继器模拟数据库操作，应当做到以下几点谢 谢 观 赏Axure RP 原型设计图解微课视频教程互联网职业技能系列谢谢观赏Axure RP 原型设计图解微课视频教程互联网职