Axure原型设计基础项目八中继器——数据的添加、删除、修改、更新学习目标 1.了解中继器的组成。2.掌握中继器中的数据操作的方法。8.1
中继器组成 8.1.1 数据集数据集就是一张数据表,可以包含多行多列。可以单击“添加行”或“添加列”按钮来添加行或列,也可以单击对
应的图标进行添加,如图8-1所示。图8-1 添加行或列双击列名可以对其进行编辑,但要注意列名只能包含字母、数字和“_”,并且不能以
数字开头。数据集中的内容可以包含文本、图片和页面,图片的导入和页面的引用可以通过在单元格上单击鼠标右键来选择相应的选项来实现,如图
8-2所示。图8-2 图片的导入和页面的引用8.1.2 项目交互项目交互功能主要用于将数据集中的数据传递到模板中的元件并显示出来,
或者根据数据集中的数据执行相应的动作。项目交互只有3个触发事件,比较常用的是“每项加载时”,如图8-3所示,如果需要把数据集中的某
些数据直接显示到模板的元件上,可在这里添加用例动作。例如,Axure软件在中继器中默认添加的一个用例动作就是把数据集中“Colum
n0”这一列的值添加到矩形元件上。图8-3 添加交互8.2 中继器中的数据操作 8.2.1 添加数据添加数据其实是为中继器的数据集
添加数据,然后通过项目交互在项目列表中显示出来。添加数据这个动作叫作“添加行”。例如,可以为本项目中的球队中继器添加新的数据并显示
出来。先将中继器命名为“team”,然后,对应数据集中的4个字段放入4个文本框(分别命名为“name”“team”“shuju”“
zhanji”),用来接收输入的文字。之后,再添加一个按钮,作用是在单击这个按钮时,将4个文本框的数据保存到中继器数据集中新的行里
面。步骤1 双击按钮的“鼠标单击时”事件,打开用例编辑窗口,如图8-4所示。图8-4 步骤1步骤2 选择中继器数据集中的动作“添加
行”,如图8-5所示。图8-5 步骤2步骤3 勾选要添加行的中继器“team”,如图8-6所示。图8-6 步骤3步骤4 单击“添加
行”按钮,打开“添加行到中继器”窗口,如图8-7所示。图8-7 步骤4步骤5 在“添加行到中继器”窗口中,我们能够看到之前做好的中
继器数据集的4个列和1个空行。单击空行中每个单元格后面的“fx”,打开“编辑值”窗口,如图8-8所示。图8-8 步骤5步骤6 设置
局部变量以接收对应的文本框中输入的文字,例如,在空行中的teamrecord这一列设置局部变量“zhanji”接收文本框“zhan
ji”中的文字。步骤7 将局部变量填入值的编辑区,然后单击“确定”按钮退出。这样就把文本框中的文字写入了空行的单元格中。步骤8 编
辑完所有单元格的值后,一整行数据就组织完毕了。当单击“添加”按钮时,就会将4个文本框中的数据组织成一行数据并添加到中继器的数据集当
中,如图8-9所示。图8-9 步骤88.2.2 删除数据删除数据分为几种情况:删除当前行、按条件删除和删除单行。1.删除当前行删除
当前行只需要将之前的中继器做一下调整,在模板的最右侧添加一个“删除”按钮,然后设置交互,步骤如下:步骤1 双击按钮的“鼠标单击时”
事件,打开用例编辑窗口,如图8-10所示。图8-10 步骤1步骤2 选择中继器数据集中的动作“添加行”,如图8-11所示。图8-1
1 步骤2步骤3 勾选要添加行的中继器“team”,如图8-12所示。图8-12 步骤3步骤4 单击“添加行”按钮,打开“添加行到
中继器”窗口,如图8-13所示。图8-13 步骤4步骤5 在“添加行到中继器”窗口中,我们能够看到之前做好的中继器数据集的4个列和
1个空行。单击空行中每个单元格后面的“fx”,打开“编辑值”窗口,如图8-14所示。图8-14 步骤52.按条件删除按条件删除数据
集中的数据,关键在于条件表达式的编写,例如按队名删除。为“删除”按钮的“鼠标单击时”事件添加用例动作。步骤1 选择中继器数据集中的
动作“删除行”,如图8-15所示。图8-15 步骤1步骤2 勾选要删除行的中继器“team”,如图8-16所示。图8-16 步骤2
步骤3 窗口右下角的选项会默认选中“条件”,如图8-17所示。图8-17 步骤3步骤4 可以直接在条件输入框中输入表达式,不过这里
需要用到局部变量来获取文本框中输入的学号,所以,单击“fx”打开“编辑值”窗口,如图8-18所示。图8-18 步骤4步骤5 设置局
部变量“sname”以获取文本框“sname”的文字,如图8-19所示。图8-19 步骤5步骤6 写入条件表达式:[[Item.t
eamname==sname]]。这个表达式的意思就是当某一行“teamname”列的值(Item.teamname)等于(==)
文本框输入的内容(sname)时,将其删除,完整步骤如图8-20所示。图8-20 完整步骤3.删除单行删除单行,也就是删除最后一个
被选中的行。从原理上说,删除最后一个被选中的行其实也要有标记的动作。但是怎么才能只标记当前这一行,取消之前标记过的其他行的标记呢?
很简单,只需要在标记当前行之前再添加一个动作,取消之前全部的标记就可以了。知道了原理,我们只需给“案例:删除多行”的矩形添加3个用
例。步骤1 选中当前元件,实现单击时整行变色效果,如图8-21所示。图8-21 步骤1步骤2 勾选中继器“team”,在窗口右下角
选中“全部”,实现取消之前全部标记的效果,如图8-22所示。图8-22 步骤2步骤3 勾选中继器“team”,在窗口右下角选中“T
his”,实现标记当前行的效果,如图8-23所示。图8-23 步骤3步骤4 给“删除”按钮添加“鼠标单击时”事件的用例动作,设置动
作“删除行”,勾选中继器“team”,在窗口右下角选中“已标记行”,如图8-24所示。图8-24 完整步骤8.2.3 更新数据更新
数据是指对已有数据进行更改,包括:更新当前行、更新标记行和按条件更新。下面以更新标记行为例,讲解更新行的关键步骤。案例:按队名更新
数据步骤1 添加一个新的按钮,并为该按钮的“鼠标单击时”事件添加用例动作。步骤2 设置动作为“更新行”,如图8-25所示。图8-2
5 步骤2步骤3 勾选中继器,如图8-26所示。图8-26 步骤3步骤4 在窗口右下方选择“已标记”,如图8-27所示。图8-27
步骤4步骤5 从列表中选取要写入数据的列名;单击列名后,相应的列名会出现在下方的编辑区,可以对要写入的列值进行编辑。这里分别单击
teamname和teamplayers列名,将它们添加到下方编辑区中,如图8-28所示。图8-28 步骤5步骤6 单击单元格后面
的“fx”,然后通过局部变量获取文本框中的文字,写入列中,具体操作步骤如图8-29所示。图8-29 具体步骤8.3 案例制作 将球
队的信息以列表的形式呈现,如图8-30所示。图8-30 球队信息1.制作模板在模板中放入一张图片、4个文本标签和一个矩形,并调整好
尺寸与样式,如图8-31所示。图8-31 添加元件然后,为元件命名:用于显示球队Logo的图片元件命名为“teamLogo”;用于
显示球队名称的文本标签命名为“teamname”;其他元件不改变内容,可以不命名。接下来,在数据集中设置列与行。图8-31中的每一
项都包含了5部分内容,球队Logo、球队名称、球员、数据和战绩。所以,要在数据集中对应添加5列,并设定好列的名称。之后,对应案例中
9个球队的信息,添加9个空的数据行,如图8-32所示。图8-32 添加空数据行 最后,逐行地为每一列添加数据。2.导入图片在单元
格上单击鼠标右键,在弹出的菜单中选择“导入图片”,如图8-33所示,然后选择本地硬盘中的图片文件,即可将图片导入数据集。将9支球队
的Logo全部导入。图8-33 导入图片当图片导入数量较多时,可以先导入一张图片,选中该单元格,按快捷键“+”进行复制,然后依次选
中其他要导入图片的单元格,按快捷键“+”进行粘贴。完成粘贴后,再单击每个单元格中蓝色的小图标重选图片。3.添加文字双击单元格即可输
入文字。将9支球队的名称全部输入,如图8-34所示。接下来,参照上面的操作把每一行的数据全部编辑完成。图8-34 球队名称此时,页
面中还不能显示出数据集中的数据,因为还差了最重要的一步——在项目交互中添加“每项加载时”事件的用例动作。然后,删除元件自带的用例动
作再进行以下设置。4.设置球队名称双击“每项加载时”事件名称,在用例编辑窗口中添加动作“设置文本”,文本标签“teamname”为
“值”,然后,单击“fx”,在编辑文本窗口中单击“插入变量或函数”,选择列表中的“Item.teamname”,如图8-35所示。
图8-35 设置文本值“Item.teamname”中的“Item”是指当前所读取数据行的数据集合,也可称之为当前被读取数据行的对
象。通过“Item.teamname”就能够获取数据集合中“teamname”这一列的值。所以,通过上面的动作就完成了将数据集中的
数据向模板中元件的传递。5.设置球队Logo在动作列表中选择“设置图片”,勾选“Set teamLogo”,如图8-36所示,在图
片的“Default”设置中选择“值”,然后单击“fx”,进入“编辑值”窗口,在“插入变量或函数”的列表中选择“Item.team
Logo”后保存并退出到主界面。图8-36 设置球队Logo此时,球队Logo图片和球队名称便都已经加载到模板上并显示出来。6.样式设置样式设置功能可以帮助我们调整项目列表的排版、布局和分页等样式,如图8-37所示。图8-37 样式设置项目小结 中继器部件用于显示重复的文本、图片和链接,如商品列表、用户信息等。可以模拟数据库的增、删、改、查操作。中继器由数据集和项组成。数据集决定重复显示的项的个数;项决定数据展示的部件。感谢观看 THANKS! |
|
