Axure RP 9萌新修炼手册-第五章-交互应用(9)

AxureRP9教程 小楼一夜听春语 436℃ 0评论

五、更新

实际上,对于新增加的权限组列表项在原有列表项上方出现还有另外一种解决方法。

我们可以通过权限组ID的升序排列来实现。

案例33:更新列表数据

但是,只增加按“GroupID”列升序排序的动作并不能解决问题。

因为,我们每次【添加行】的时候,“GroupID”都是“1”。

我们需要先让原有列表项的“GroupID”都增加1,这样新增加列表项的“GroupID”才是最小的。

在新建权限组面板的“确定”按钮上,我们添加新的动作,【更新】中继器“GroupList”中【全部】数据行,让这些数据行的“GroupID”自增“1”,也就是当前的列值加1,具体公式为“[[Item.GroupID+1]]”。

注:规则中写入“true”即表示全部数据行均符合规则。

最后,再把【更新行】的动作拖动到交互的第1个位置上,以免更新新添加的行。(图5-177)

六、筛选

案例34:列表筛选功能

权限组列表能够根据权限组名称进行模糊查询。(图5-178)

1、我们先添加一些测试数据,这些数据从素材中的Excel表格中复制,并粘贴到Axure RP的数据集中。(图5-179)

2、准备查询功能的相关元件。(图5-180)

输入查询内容的文本框“KeyInput”在【鼠标悬停】和【获取焦点】时分别带有不同的【交互样式】。(图5-181)


3、为元件添加交互。

(1)搜索按钮组合“Search”在将【鼠标移入时】会【逐渐】【显示】灰色的背景“SearchBg”,并且【鼠标移出时】会【逐渐】【隐藏】。(图5-182)

(2)在搜索框中输入关键词的时候,列表会实时呈现查询结果,并不需要点击搜索按钮。所以,我们需要添加的交互是文本框“KeyInput”【文本改变时】【添加筛选】到中继器“GroupList”,筛选的【规则】是权限组名称列值中包含输入的关键字,具体公式为“[[Item.GroupName.indexOf(This.text)>=0]]”。(图5-183)

文本框“KeyInput”输入的关键字我们通过系统变量“This.text”进行获取,而权限组名称包含关键字的规则我们在条件表达式中通过函数“indexOf()”来表达。

字符串函数“indexOf()”能够查询字符串对象中是否能够找到参数字符串。如果能够找到参数字符串,函数的运算结果是参数字符串在被查询字符串中的位置。如果找不到参数字符串,函数的运算结果是“-1”。

所以,条件表达式中只需要判断函数的运算结果是否大于等于0或者大于-1就可以了。

七、系统变量

中继器相关的属性能够帮助我们显示一些关于列表的信息,例如加载的列表项数量、当前页码以及分页总数量等等。

这些属性都是系统变量,通过中继器对象调用属性即可获取到相应的数值。

案例35:获取列表信息

在权限组列表的底部包含一些关于列表的信息。(图5-184)

这些信息都应随着列表的内容变化而动态更新。

例如我们进行了关键词查询,这些信息就会动态发生变化。(图5-185)

1、准备相关的元件。(图5-186)

注:关于元件的命名,请参考本案例源文件。

2、为元件添加交互。

(1)为列表项数量元件“ItemNumber”添加【载入时】的交互,为它【设置文本】为中继器“GroupList”的加载项数量“共[[groupList.itemCount]]项”。我们通过自定义局部变量“groupList”帮助我们获取中继器“GroupList”的【元件】对象,再通过系统变量 “itemCount” 获取加载项数量的属性值。(图5-187)


(2)为分页信息“PageInfo”也添加【载入时】【设置文本】的交互,只是获取的属性分别为页码与分页总数量“[[groupList.pageIndex]]/

[[groupList.pageCount]]”。(图5-188)

通过前两个交互,我们就能够在页面打开之后看到相应的信息,但是如果进行关键字查询,这些信息也需要随之发生改变。

(3)在搜索框中输入关键字时,除了进行筛选,还要再次【触发】列表项数量“ItemNumber”(图5-189)和分页信息“PageInfo” (图5-190)的【载入时】交互事件。

八、分页

一般列表都会有分页功能。

我们已经将中继器设置为每页显示10项。

如果允许用户自由选择每页显示的列表项数量,我们可以通过动作【设置每页项目数量】实现。

案例36:列表分页功能

1、准备相关的元件。

(1)制作一个带有滚动条的列表框,命名为“SelecteRowNumber”,并将它隐藏。(图5-191)

注:本案例新增元件以及相关命名,请参考源文件;案例中列表框“SelecteRowNumber”的制作过程可以参考案例26。

(2)列表框“SelecteRowNumber”,中的每个数字元件都带有【鼠标悬停】的交互样式。(图5-192)

(3)鼠标进入“每页显示行”后方的选择框“RowNumberGroup”时,这个选择框的背景会逐渐变为灰色。我们通过给选择框背景元件“RowNumberBg”添加【鼠标悬停】的交互样式(图5-192),并勾选选择框“RowNumberGroup”属性设置中的【触发内部元件鼠标交互样式】来实现。(图5-193)

2、为元件添加交互。

(1)选择框“RowNumberGroup”被鼠标【单击时】,【显示】列表框“SelecteRowNumber”。同时,还要【旋转】箭头元件“Arrow”【到达】“180”度。(图5-194)

(2)列表框“SelecteRowNumber”显示时,点击列表框以外的区域时隐藏列表框。这个交互我们可以通过【显示时】让列表框【获取焦点】(图5-195)。【失去焦点时】,【启用情形】 “指针未接触列表框”,判断鼠标【指针】【未接触】【当前元件】时(图5-196),【隐藏】列表框(图5-197)。

(3)列表框“SelecteRowNumber”【隐藏时】,要【旋转】箭头元件“Arrow”【到达】“0”度。(图5-198)

(4)列表框“SelecteRowNumber”中每个数字按钮【单击时】都要为中继器“GroupList”【设置每页项目数量】为当前按钮上的数值(图5-199)。同时,再次【触发】分页信息“PageInfo”的【载入时】交互事件,呈现新的页面总数量。并且,【隐藏】列表框“SelecteRowNumber”。还有,每次改变显示列表项数量时,选择的数量还要在列表底部的元件“RowNumber”上显示。我们需要为“RowNumber”【设置文本】,【值】为当前被点击数量按钮的文字“[[This.text]]”。(图5-200)

另外,我们还要在列表项数量大于10项的时候,将背景矩形【设置尺寸】为更高的尺寸,新的高度为中继器显示的列表项数量乘以中继器每项高度(49像素),再加上顶部与底部多出部分的高度(98像素)。

我们先将背景矩形命名为“Background”,然后继续添加交互。

前面几个步骤都是“默认执行”的交互。

(5)我们需要为上一步添加的交互事件【启 用情形】,设置情形名称为“默认执行”,不添加任何条件。(图5-201)

(6)为列表框“SelecteRowNumber”中每个数字按钮【单击时】交互事件【添加情形】,名称为“显示列表项大于10项”,添加条件判断列表项可见项数量“[[groupList.visibleItemCount]]”【>】“10”。公式中“groupList”是自定义局部变量,获取中继器元件“GroupList”的【元件】对象。(图5-202)

然后,添加这种情形下执行的交互动作。

(7)为“显示列表项大于10项”的情形添加【设置尺寸】的交互,设置背景矩形“Background”【宽度】为“1360”像素,【高度】为列表可见项数量乘以列表项的高度加上98像素“[[groupList.visibleItemCount*49+98]]”,锚点为默认选项。公式中“groupList”是自定义局部变量,获取中继器元件“GroupList”的【元件】对象。(图5-203)

(8)继续上一步,还要【移动】列表下方的所有元件到达新的位置。

为了便于移动列表下方所有的元件,我们将这些元件组合,并命名为“ListBottom”。

【移动】“ListBottom”时,【X】轴坐标保持不变,即目标元件的X轴坐标“[[Target.x]]”;【Y】轴为背景矩形“Background”底部坐标向上46像素“[[bg.bottom-46]]”。公式中“bg”是自定义局部变量,获取背景矩形元件“Background”的【元件】对象。(图5-204)

完成这一步后,在情形名称上点击鼠标右键,上下文菜单中选择【切换为[如果]或[否则]】,将条件判断切换为“如果”。(图5-204)

(9)添加“显示列表项小于等于10项”的情形,不添加任何条件(图5-205)。为这种情形添加交互,将背景矩形【设置尺寸】为初始尺寸,【宽度】为“1360”像素,【高度】为 “588”像素。(图5-206)

(10)同时,还要【移动】列表下方的所有元件到达初始的位置,【X】轴坐标保持不变,即目标元件的X轴坐标“[[Target.x]]”;【Y】轴为“595”。(图5-207)

注:当我们完成一个数量按钮的交互事件之后,选择【单击时】交互事件进行复制,并粘贴给其他数量元件。

九、翻页

既然中继器能够对列表进行分页,那么就能够进行翻页显示。

案例37:列表翻页功能

一般来说,分页条都带有首页、尾页、上一页、下一页以及数字页码的翻页按钮,点击这些按钮就能够翻到指定的页面。

数字页码数量本来应该是根据列表分页数量确定,但是因为中继器可以添加删除数据,所以数量难以确定。

如果想实现动态的数字页码,可以考虑将数字页码也使用中继器来实现,但是,这样未免太过复杂,毕竟原型还是以表达产品需求为核心。

我们以分页数量共4页为例。

1、准备相关的元件。

数字页码选择框由一个矩形外框和4个矩形数字按钮组成,把这些元件组合,命名为“SelectePageIndex”,然后隐藏。(图5-208)

注:数字按钮带有【鼠标悬停】的【交互样式】,可参考图5-192。

并且,我们将显示分页信息的元件“PageInfo”与后方的箭头元件“Arrow2”以及底层的矩形组合到一起,命名为“PageIndexGroup”。(图5-209)

其它页码按钮,也分别与底层的矩形进行组合。(图5-210)

2、给元件添加交互。

(1)选择框“PageIndexGroup”被鼠标【单击时】,【显示】列表框“SelectePageIndex”。并且,【旋转】箭头元件“Arrow2”【到达】“180”度。这一步可参考案例36第(1)步的操作。(图5-211)

(2)列表框“SelectePageIndex”显示时,点击列表框以外的区域时隐藏列表框。这个交互我们可以通过【显示时】让列表框【获取焦点】。【失去焦点时】,如果鼠标【指针】【未接触】【当前元件】,【隐藏】列表框。并且,列表框“SelectePageIndex”【隐藏时】,要【旋转】箭头元件“Arrow2”【到达】“0”度。这一步可参考案例36第(2)(3)步的操作。(图5-212)

(3)列表框“SelectePageIndex”中每个数字按钮【单击时】都要为中继器“GroupList”【设置当前显示页面】为当前按钮上的数值“[[This.text]]”。(图5-213)

(4)同时,再次【触发】分页信息“PageInfo”的【载入时】交互事件,呈现新的页面总数量,并且,【隐藏】列表框“SelectePageIndex”。(图5-214)

(5)对列表进行翻页时,也要考虑到根据每页列表项数量的不同,改变背景矩形“Background”的尺寸,并移动列表项下方的内容。这个交互在案例36分页数量按钮上已经添加过。我们需要先为【单击时】交互事件【启用情形】,为之前已添加交互设置“默认执行”的情形,然后再将案例36中第(7)(8)(9)(10)步添加的两个情形复制,粘贴到页码的数字按钮以及翻页按钮上即可。(图5-215)

注:当我们完成一个数字页码的交互事件之后,选择【单击时】交互事件进行复制,并粘贴给其他数量元件。

(6)前一页、后一页、首页以及尾页按钮的交互和数字页码按钮基本一致,只是【设置当前显示页面】的动作中【页面】的选项不同。首页按钮将【页面】【Value】(值)设置为“1”,其它3个按钮的【页面】分别为【Previous】、【Next】和【Last】,并且无需添加【隐藏】列表框 “SelectePageIndex”的交互。(图5-216)

 

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


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

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第五章-交互应用(9)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址