AxureRP7.0从入门到精通(连载36)

Axure书籍 小楼一夜听春语 16569℃ 0评论

1.2.  项目交互

项目交互主要用于将数据集中的数据传递到模板中的元件上显示出来,或者根据数据集中的数据执行相应的动作。

项目交互只有两个触发事件,比较常用的就是【每项加载时】,如果需要把数据集中的某些数据直接显示到模板的元件上去,就在这里添加用例动作。比如,软件在中继器中默认给添加的一个用例动作,就是把数据集中“Column0”这一列的值添加到矩形元件上去。(图6-7)

图6-7

(图6-7)

案例:球队信息表

比如,我们有一些球队的信息以列表的形式呈现。(图6-8)

图6-8

(图6-8)

首先,我们在编辑区中制作模板。放入一张图片、四个文本标签和一个矩形,并调整好尺寸与样式。(图6-9)

图6-9

(图6-9)

然后,为元件进行命名,用于显示球队logo的图片元件命名为“teamlogo”;用于显示球队名称的文本标签命名为“teamname”;其它元件不改变内容,可以不做命名。

接下来,我们为数据集中设置列与行。在上图中每个项都包含了五部分内容:球队logo、球队名称、球员链接、数据链接和战绩链接。所以,在数据集中,我们需要对应添加5列,并设定好列的名称。之后,再对应案例中9个球队的信息,添加9个空的数据行。(图6-10)

图6-10

(图6-10)

最后,开始逐行的为每一列添加数据。

  • 导入图片

在单元格上点击<鼠标右键>,在出现的菜单中选择【导入图片】,然后选择本地硬盘中的图片文件,即可将图片导入数据集中。这里我们将9支球队的logo全部导入。(图6-11)

图6-11

(图6-11)

当图片导入数量较多时,可以先导入一张图片,然后点中该单元格(注意不要点到蓝色的小图标),按<Ctrl+C键>进行了复制,然后依次点中其它要导入图片的单元格,按<Ctrl+V键>进行粘贴。完成粘贴后,再点击每个单元格中蓝色小图标重选图片。

  • 添加文字

双击单元格即可输入文字。这里我们将9支球队的名称全部输入进去。

  • 引用页面

引用页面也是在单元格上点击鼠标右键,然后在菜单中选择【引用页面】,然后在弹出的窗口中选择要引用的页面。引用页面只可选择当前项目站点地图中的页面,比如当前案例中预置的三个页面“players”、“data”和“record”,具体如何使用我们在后面讲解。(图6-12)

图6-12

(图6-12)

我们参照上面的操作把每一行的数据全部编辑完成。

编辑完成后,在页面中还不能显示出数据集中的数据。因为还差了最重要的一步,在项目交互中添加【每项加载时】事件的用例动作。删除掉元件自带的用例动作,然后进行如下设置:

  • 设置球队名称

双击【每项加载时】事件名称,在用例编辑界面中添加动作【设置文本】文本标签“teamname”为【值】,然后,点击【fx】,在编辑文本的界面中点击【插入变量或函数…】,选择列表中的【Item.team_name】。(图6-13)

图6-13

(图6-13)

“Item.team_name”中的“Item”是指当前所读取数据行的数据集合,或者称之为当前被读取数据行的对象。通过“Item.team_name”就能够获取数据集合中“team_name”这一列的值。所以,通过上面的动作就完成了将数据集中的数据向模板中元件的传递。

  • 设置球队logo

继续添加动作。在动作列表中选择【设置图片】,勾选图片元件“teamlogo”,在图片的【默认】设置中选择【值】,然后点击【fx】图标,进入编辑值的界面中,在【插入变量或函数…】的列表中选择【Item.team_logo】后保存退出到主界面。(图6-14)

图6-14

(图6-14)

   这是我们打开页面的编辑区,能够看到球队logo图片和球队名称文字都已经加载到模板上显示出来了。

最后,我们还要给“球员”、“数据”和“战绩”这三个文本标签,添加链接,能够在点击的时候打开相应的页面。以“球员”为例:我们在文本标签的【鼠标单击时】事件中添加用例动作,选择在【当前窗口】打开链接,选择【链接到url或文件】,然后点击【fx】,在编辑值的界面中,点开【插入变量或函数…】的列表,选择【Item.team_players】后保存退出到主界面。(图6-15)

图6-15

(图6-15)

经过以上的操作,完成了全部的交互动作设置。但是,排列的格式还不是我们想要的。(图6-16)

图6-16

(图6-16)

   那么,如何调整中继器项目列表的显示样式呢?这就是我们接下来要说的内容。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载36)

喜欢 (25)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 文本标签不是teamlogo应该是teamname
    chinesekid2015-10-04 19:00 回复
  2. 为什么把每一行的数据全部编辑完成后,在项目交互中添加【每项加载时】事件的用例动作时,选择列表中没有【Item.team_name】。。
    王小韦2015-11-18 16:19 回复
    • 我知道了。。
      王小韦2015-11-20 09:38 回复
  3. 为什么我在做交互动作时没有配置元件出现呀?
    啦啦啦小姐在起床2016-06-08 21:07 回复