DOC-03-24 菜单(Menu)

本章将介绍如何创建菜单(Menu)和菜单栏(Menu Bar),添加菜单项(Menu Item),将菜单分组,创建子菜单(Submenu),以及设置上下文菜单(Context Menu)。

你可以使用下面这些JavaFX API中的类来在你的应用程序中构建菜单。

· MenuBar

· MenuItem

· Menu

· CheckMenuItem

· RadioMenuItem

· Menu

· CustomMenuItem

· SeparatorMenuItem

· ContextMenu

图24-1显示了一个包含典型菜单栏的应用程序。

24-1包含菜单栏和三个菜单分类的应用程序

3-24-1 menu-intro

在JavaFX应用程序中构建菜单

一个菜单是一系列可以根据用户的需要进行显示的可响应事件的菜单项。当一个菜单可见时,用户一次可以选择一个菜单项。当用户点击一个菜单项后,菜单就会回到隐藏模式。通过使用菜单,你将一些不需要始终显示的功能放在其中,这样可以节省你的应用程序UI空间。

菜单栏中的菜单通常会分组到不同类别中。编码模式是定义一个菜单栏,定义一些分类菜单,为分类菜单填充菜单项。当在你的JavaFX应用程序中构建菜单时,使用下面的菜单项类。

· MenuItem – 创建一个可响应事件的选项

· Menu – 创建一个子菜单

· RadioButtonItem – 创建一个相互排斥的选项

· CheckMenuItem – 创建一个可在选中和非选中状态切换的选项

在一个分类中对菜单项进行分隔,使用SeparatorMenuItem类。

对于分类组织在菜单栏中的菜单一般位于窗口的上方,scene中其余的空间留给那些重要的控件。基于某种原因,如果你不想在你的UI中为菜单栏分配任何可见空间,你可以使用上下文菜单,它通过用户点击鼠标打开。

创建菜单栏

尽管菜单栏可以被放置在UI的任何其他地方,但是菜单栏一般是位于UI的上方,而且它包含一个或者多个菜单。菜单栏会自动伸缩以适用应用程序窗口的宽度。默认情况下,每个添加到菜单栏的菜单是由带有文本的按钮表示的。

想象一个应用程序,它显示植物的参考信息,如名称,拉丁学名,图片,和简介。你可以创建三个分类菜单:File,Edit和View,然后为这些菜单填充菜单项。例24-1展示了这样一个带有菜单栏的应用程序的源代码。

24-1 Menu Sample应用程序

与其他UI控件不一样,Menu类和其他MenuItem的扩展类不是继承自Node类。他们不能直接添加到应用程序scene中,直到通过getMenus()方法添加到菜单栏中时才可见。

24-2添加菜单栏到应用程序中

3-24-2 menu-bar

你可以使用键盘上的箭头按键来浏览所有的菜单。但是,当你选择一个菜单时,没有动作被执行,因为菜单的行为还没有被定义。

添加菜单项

通过添加以下菜单项为File菜单设置功能:

· Shuffle – 加载植物的参考信息

· Clear – 移除参考信息并清除scene

· Separator – 分隔菜单项

· Exit – 退出应用程序

例24-2中粗体的行通过MenuItem类创建了一个Shuffle 菜单,并添加了一些图像组件到应用程序scene。MenuItem类允许使用文本和图像创建一个可响应事件的菜单项。在用户点击时执行的动作可以通过setOnAction方法来定义,这和Button类很相似。

24-2 添加带图像的Shuffle菜单项

当用户选中Shuffle菜单项时,setOnAction方法中指定的shuffle()方法就会被调用,它计算出的元素位置,然后从对应的数组中取值并设置标题,拉丁学名,植物图片和描述。

Clear菜单项用于清除应用程序scene的内容。你可以通过将包含GUI元素的VBox容器设置为不可见来实现此效果,见例24-3。

24-3 创建带快捷键的Clear菜单项

MenuItem类的实现允许开发者设置一个菜单快捷键,这是一个组合键,能够执行和点击菜单项一样的动作。对于Clear菜单项,用户可以从File菜单中选择动作,也可以同时按下Ctrl和X键。

Exit菜单关闭应用程序窗口。例24-4中展示了为该菜单项设置System.exit(0)响应动作。

24-4 创建Exit菜单项

使用getItems()方法来向File菜单中新增菜单项,见例24-5。你可以创建一个分隔菜单项,并通过getItems()方法将其添加进去,以将Exit菜单隔离开。

24-5 添加菜单项

将例24-2,24-3,24-4,24-5添加到Menu Sample应用程序中,编译并运行之。选择Shuffle菜单项来加载不同植物的参考信息。然后清除scene(Clear菜单项),并关闭应用程序(Close菜单项)。图24-3显示了选中Clear菜单项的效果。

24-3 带三个菜单项的File菜单

3-24-3 menu-file

有了View菜单,你可以隐藏和显示参考信息中的某些元素。实现createMenuItem()方法,并在start()方法中调用以创建四个CheckMenuItem对象。然后添加这些新创建的CheckMenuItem到View菜单中,这些菜单项可以控制标题,拉丁学名,图片和描述的显示与否。例24-6显示了实现了这些功能的两段代码。

24-6 使用CheckMenuItem类来创建开关选项

CheckMenuItem类是MenuItem类的扩展。它可以在选中和非选中状态之间切换。当选中时,Check Menu Item会显示一个对钩标志。

例24-6创建了四个CheckMenuItem对象,并处理了他们的selectedProperty属性变化事件。例如,当用户取消选中picView菜单项,setVisible()方法会被赋以false,然后植物的图片就变得不可见了。当你添加这段代码到应用程序,编译并运行之,你可以尝试选中和取消选中这些菜单项。图24-4显示了标题和图片可见,而拉丁学名和描述不可见时的应用程序效果。

24-4 使用Check Menu Item

3-24-4 menu-check

创建子菜单

对于Edit菜单,定义两个菜单项:Picture Effect和No Effects。Picture Effect菜单项被设计为包含三个菜单项的子菜单,用于控制三种可用的视觉特效。No Effects 菜单项会移除选中的特效,将图片重置到初始状态。

使用RadioMenuItem来创建子菜单的菜单项。将Radio Menu Item添加到Toggle Group中,使各个菜单项的选中是相互排斥的。例24-7实现了这些功能。

24-7 创建带有Radio Menu Item的子菜单

通过setUserData()为每个Radio Menu Item定义了一个视觉特效。当Toggle Group中的菜单项被选中时,对应的特效就会被应用在图片上。当No Effects菜单项被选中时,setEffect()方法被赋值为null,没有特效应用在图片上。

图24-5显示了当用户正在选择Shadow菜单项时的运行效果。

24-5 带有三个Radio Menu Item的子菜单

3-24-5 menu-effect

当DropShadow特效被应用在图片上后,其效果如图24-6所示。

24-6 应用了DropShadow特效的Quince Picture

3-24-6 menu-shadow

 

你可以使用MenuItem类的setDisable()方法在没有Picture Effect子菜单中的特效被选中时禁用No Effects菜单项。将例24-7按照例24-8进行修改。

24-8 禁用菜单项

当没有RadioMenuItem选项被选中时,No Effects菜单项是被禁用的,如图24-7。当用户选择一个视觉特效,No Effects菜单项就会变得可用。

24-7 No Effects菜单项被禁用

3-24-7 menu-disabled

添加上下文菜单

当你无法分配任何UI空间给一个需要的功能时,你可以使用上下文菜单。上下文菜单是一个弹出窗口,会由一次鼠标点击事件触发显示出来。一个上下文菜单可以包含一个或者多个菜单项。

在Menu Sample应用程序中,为植物的图片设置一个上下文菜单,使得用户可以复制图像。

使用ContextMenu类来创建上下文菜单,见例24-9。

24-9 定义Context Menu

当用户右击ImageView对象,上下文菜单的show()方法就会被调用使其显示。

为上下文菜单的Copy菜单项定义的setOnAction()方法创建了一个ClipBoard并添加图像作为其内容。图24-8显示了用户正在选择Copy Image上下文菜单项的瞬间。

24-8 使用Context Menu

你可以尝试复制那个图像然后粘贴到一个图像编辑器中。

为了进一步改进,你可以添加更多的菜单项到上下文菜单中并指定不同的动作。你可以使用CustomMenuItem来创建自定义的菜单。通过这个类,你可以将任何Node作为菜单项添加到一个菜单中,比如Button或者Slider等。

相关API文档

· Menu

· MenuItem

· RadioMenuItem

· CheckMenuItem

· ContextMenu

· SeparatorMenuItem

· CustomMenuItem

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