DOC-03-27 分页控件(Pagination Control)

本章解释了如何向你的JavaFX程序中添加分页(Pagination)控件。它会告诉你如何向程序中添加Pagination控件,管理其分页项,并且使用CSS样式来改变控件中各元素的风格。

Pagination控件用于在被拆分为多个小部分的分页内容间进行导航。一般的应用场景包括在收件箱中浏览的电子邮件信息或从搜索结果中进行选择。在触摸式设备上,Pagination控件可以用于在查看一篇文档时翻页或在不同的屏幕之间切换。图27-1展示了一个Pagination控件,它显示了在操作系统中的所有可用字体。

27–1 Pagination控件

3-27-1 pagination-sample

创建一个Pagination控件

Pagination控件由页面内容区和页面导航区组成。页面内容区根据程序逻辑来对内容进行展现和布局。页面导航区中有一个组合式控件,它用于预览整体内容的指定分区。图27-2展示了导航区的结构和基本元素。

27–2 Pagination控件的导航区

3-27-2 pagination-navigation

你可以通过点击特定的Page indeicator或Next page、Previous page按钮来来浏览分页。若当前选中了第一页时,Previous page按钮会被禁用。类似的,当最后一页被选中时,Next page按钮会被禁用。

JavaFX SDK API提供了Pagination类来向JavaFX应用程序中增加分页控件。例27-1展示了Pagination类的三个构造方法。

27–1 Pagination类的三个构造方法

例27-1中的pagination3控件如图27-3所示。

27–3 不带内容的Pagination控件

3-27-3 pagination-empty

注意页索引从0开始。因此如果想让第3页被选中,那么你需要将currentPageIndexProperty设置为2。

pagination3控件的页面都是空的,因为没有向其中添加内容。

你无法直接向Pagination控件中添加任何内容项,因为它需要设置一个页面工厂(Page Factory)。使用Pagination类的setPageFactory方法来实现一个页面工厂,这样来定义页面的内容。

实现页面工厂(Page Factory)

setPageFactory方法用于为Pagination控件定义Page Factory。应用程序开发者需要创建一个回调方法并设置一个Page Factory来使用这个回调方法。回调方法会在一个页面被选中时触发。它会加载并返回被选中页面的内容。如果当前被选中的页面索引不存在,则必须返回null值。例27-2创建了一个带有28个页面的Pagination控件,并且使用搜索结果对页面进行了填充,在每个页面中分配了八个内容项。

27–2 Pagination控件中添加超链接

在Pagination类的构造方法中可以直接对页数和被选中的页进行定义。另外,你也可以先创建一个Pagination控件,然后再通过setPageCount和setCurrentPageIndex方法来设置页数和被选中页索引。

createPage方法声明了Pagination控件的内容,并且在setPageFactory方法中将其作为Page Factory进行了调用。在createPage方法中创建了超链接和对应的标签,并且将它们进行了纵向排列,在元素之间设置了5像素的间隔。

当你编译并运行例27-2时,你将看到如图27-4所示的界面输出。

27–4 使用Pagination 控件来预览搜索结果

3-27-4 pagination-hyperlinks

当前实现的Pagination控件会在页数超过10时显示10个Page Indicator。如果要改变显示的Page Indicator数目,可以使用Pagination类的setMaxPageIndicatorCount方法。例如,将下面的代码行添加到例27-2中则会显示7个Page Indicator:pagination.setMaxPageIndicatorCount(7);。图27-5显示了修改后的PaginationSample应用程序。

27–5 改变Page Indicator的显示数目

3-27-5 pagination-hyperlinks7

例27-3展示了Pagination控件的另外一种用法。在这个程序中的每个页面中都展示了一段文字。其中总共有5段文字,Pagination控件中声明了28个页面。为了避免出现ArrayIndexOutOfBoundsException,程序增加了页面索引检查(在例27-3中的粗体字部分),并且当页码超过5时让回调方法返回null值。

27–3 Pagination中增加文字片段

当你编译并运行例27-3,你将会看到如图27-6所示的输出界面。

27–6Pagination控件中展现文字片段

3-27-6 pagination-text

有时你无法设置精确的内容项数,因此也就无法计算Pagination控件中的页数。在这种情况下,你可以在Pagination对象的构造方法中加入计算页数的代码。例27-4输出了一个系统字体列表并且通过字体列表的长度除以每页的项数计算页数。

27–4 增加不确定大小的内容

当你编译并运行此样例时,它将会产生如图27-7所示的应用程序窗体。

27–7 使用Pagination控件来展现系统字体

3-27-7 pagination-fonts

为Pagination控件设置样式

通过设置样式类为STYLE_CLASS_BULLET,你可以将Pagination控件的Page Indicator自定义为子弹形状,替代原来数字序号Page Indicator。此外你可以修改modena样式表中Pagination的默认样式。

例27-5展示了在例27-4中的Pagination控件的视觉元素的一些可选样式。

27–5 修改后的Pagination控件样式

例27-6对Pagination控件应用了这些样式并将Page Indicator设置成了子弹形状的样式。

27–6 PaginationSample程序中启用对Pagination控件样式的修改

当你在PaginationSample程序中应用了新定义的样式、编译并运行该程序后,你将会看到如图27-8所示的程序窗体。

27–8带有子弹形状样式的Page Indicator并且应用了新的CSS样式的PaginationSample程序

3-27-8 pagination-css

除了前面所应用的样式之外,你还可以在程序中考虑使用如下的样式来改变Pagination控件的外观:

· -fx-max-page-indicator-count ——设置Page Indicator的最大数值。

· -fx-arrows-visible ——控制后一页和前一页箭头按钮的可见性,默认为true。

· -fx-tooltip-visible ——控制Page Indicator提示信息框的可见性,默认为true。

· -fx-page-information-visible ——控制页面信息的可见性,默认为true。

· -fx-page-information-alignment ——设置页面信息的对齐方式。

相关的API文档

· Pagination

· VBox

· AnchorPane

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_pagination/
百度已收录