JavaFX基础应用开发全解析

# JavaFX 基础应用开发全解析 ## 1. JavaFX 列表选择监听器实现 在 JavaFX 中，ListViewer 的选择监听器实现即选择项属性（selectionItemProperty）。需要创建并添加一个 ChangeListener 来监听选择事件。当用户选择一个上级时，TableView 会被清空并填充该上级的员工信息。这实际上是 ObservableList 的作用，它会通知 TableView 发生的变化。以下是通过 teamMembers（ObservableList）变量填充 TableView 的代码： ```java teamMembers.clear(); teamMembers.addAll(observable.getValue().employeesProperty()); ``` ## 2. 使用分割视图组织 UI ### 2.1 问题描述 希望使用分割分隔控件来分割 GUI 屏幕。 ### 2.2 解决方案 使用 JavaFX 的 SplitPane 控件。javafx.scene.control.SplitPane 类可以将屏幕划分为类似框架的区域，用户可以使用鼠标移动任意两个分割区域之间的分隔线。 以下是创建使用 SplitPane 类的 GUI 应用程序的代码，该代码将屏幕划分为三个窗口区域：左列、右上区域和右下区域，并在这三个区域添加了 Text 节点。 ```java public void start(Stage primaryStage) { primaryStage.setTitle("Chapter 14-4 Organizing UI with Split Views"); Group root = new Group(); Scene scene = new Scene(root, 350, 250, Color.WHITE); // Left and right split pane SplitPane splitPane = new SplitPane(); splitPane.prefWidthProperty().bind(scene.widthProperty()); splitPane.prefHeightProperty().bind(scene.heightProperty()); //List<Node> items = splitPane.getItems(); VBox leftArea = new VBox(10); for (int i = 0; i < 5; i++) { HBox rowBox = new HBox(20); final Text leftText = new Text(); leftText.setText("Left " + i); leftText.setTranslateX(20); leftText.setFill(Color.BLUE); leftText.setFont(Font.font(null, FontWeight.BOLD, 20)); rowBox.getChildren().add(leftText); leftArea.getChildren().add(rowBox); } leftArea.setAlignment(Pos.CENTER); // Upper and lower split pane SplitPane splitPane2 = new SplitPane(); splitPane2.setOrientation(Orientation.VERTICAL); splitPane2.prefWidthProperty().bind(scene.widthProperty()); splitPane2.prefHeightProperty().bind(scene.heightProperty()); HBox centerArea = new HBox(); InnerShadow iShadow = new InnerShadow(); iShadow.setOffsetX(3.5f); iShadow.setOffsetY(3.5f); final Text upperRight = new Text(); upperRight.setText("Upper Right"); upperRight.setX(100); upperRight.setY(50); upperRight.setEffect(iShadow); upperRight.setFill(Color.LIME); upperRight.setFont(Font.font(null, FontWeight.BOLD, 35)); upperRight.setTranslateY(50); centerArea.getChildren().add(upperRight); HBox rightArea = new HBox(); final Text lowerRight = new Text(); lowerRight.setText("Lower Right"); lowerRight.setX(100); lowerRight.setY(50); lowerRight.setEffect(iShadow); lowerRight.setFill(Color.RED); lowerRight.setFont(Font.font(null, FontWeight.BOLD, 35)); lowerRight.setTranslateY(50); rightArea.getChildren().add(lowerRight); splitPane2.getItems().add(centerArea); splitPane2.getItems().add(rightArea); // add left area splitPane.getItems().add(leftArea); // add right area splitPane.getItems().add(splitPane2); // evenly position divider ObservableList<SplitPane.Divider> dividers = splitPane.getDividers(); for (int i = 0; i < dividers.size(); i++) { dividers.get(i).setPosition((i + 1.0) / 3); } HBox hbox = new HBox(); hbox.getChildren().add(splitPane); root.getChildren().add(hbox); primaryStage.setScene(scene); primaryStage.show(); } ``` ### 2.3 工作原理 如果见过简单的 RSS 阅读器或 Javadocs，会发现屏幕被分隔线分成了多个部分。此方案创建了三个区域：左、右上和右下。 - 首先创建一个 SplitPane 来分隔场景的左右区域，并将其宽度和高度属性绑定到场景，以便在用户调整舞台大小时，这些区域能占据可用空间。 - 接着创建一个 VBox 布局控件代表左区域，在 VBox 中循环生成一系列 Text 节点。 - 然后生成分割窗格的右侧部分。以下代码片段允许 SplitPane 控件水平分割： ```java SplitPane splitPane = new SplitPane(); splitPane.prefWidthProperty().bind(scene.widthProperty()); splitPane.prefHeightProperty().bind(scene.heightProperty()); ``` - 再创建一个 SplitPane 来垂直分割区域，形成右上和右下区域。以下代码用于垂直分割窗口区域： ```java // Upper and lower split pane SplitPane splitPane2 = new SplitPane(); splitPane2.setOrientation(Orientation.VERTICAL); ``` - 最后组装分割窗格并调整分隔线的位置，使屏幕空间均匀分配。以下代码组装分割窗格并遍历分隔线列表以更新其位置： ```java splitPane.getItems().add(splitPane2); // evenly position divider ObservableList<SplitPane.Divider> dividers = splitPane.getDividers(); for (int i = 0; i < dividers.size(); i++) { dividers.get(i).setPosition((i + 1.0) / 3); } HBox hbox = new HBox(); hbox.getChildren().add(splitPane); root.getChildren().add(hbox); ``` ## 3. 向 UI 添加标签 ### 3.1 问题描述 想要创建一个带有标签的 GUI 应用程序。 ### 3.2 解决方案 使用 JavaFX 的标签和标签窗格控件。javafx.scene.control.Tab 和 javafx.scene.control.TabPane 类允许将图形节点放置在各个标签中。 以下代码示例创建了一个简单的应用程序，该应用程序具有菜单选项，允许用户选择标签的方向，可用的标签方向有顶部、底部、左侧和右侧。 ```java public void start(Stage primaryStage) { primaryStage.setTitle("Chapter 14-15 Adding Tabs to a UI"); Group root = new Group(); Scene scene = new Scene(root, 400, 250, Color.WHITE); TabPane tabPane = new TabPane(); MenuBar menuBar = new MenuBar(); EventHandler<ActionEvent> action = changeTabPlacement(tabPane); Menu menu = new Menu("Tab Side"); MenuItem left = new MenuItem("Left"); left.setOnAction(action); menu.getItems().add(left); MenuItem right = new MenuItem("Right"); right.setOnAction(action); menu.getItems().add(right); MenuItem top = new MenuItem("Top"); top.setOnAction(action); menu.getItems().add(top); MenuItem bottom = new MenuItem("Bottom"); bottom.setOnAction(action); menu.getItems().add(bottom); menuBar.getMenus().add(menu); BorderPane borderPane = new BorderPane(); // generate 10 tabs for (int i = 0; i < 10; i++) { Tab tab = new Tab(); tab.setText("Tab" + i); HBox hbox = new HBox(); hbox.getChildren().add(new Label("Tab" + i)); hbox.setAlignment(Pos.CENTER); tab.setContent(hbox); tabPane.getTabs().add(tab); } // add tab pane borderPane.setCenter(tabPane); // bind to take available space borderPane.prefHeightProperty().bind(scene.heightProperty()); borderPane.prefWidthProperty().bind(scene.widthProperty()); // add menu bar borderPane.setTop(menuBar); // add border Pane root.getChildren().add(borderPane); primaryStage.setScene(scene); primaryStage.show(); } private EventHandler<ActionEvent> changeTabPlacement(final TabPane tabPane) { return (ActionEvent event) -> { MenuItem mItem = (MenuItem) event.getSource(); String side = mItem.getText(); if ("left".equalsIgnoreCase(side)) { tabPane.setSide(Side.LEFT); } else if ("right".equalsIgnoreCase(side)) { tabPane.setSide(Side.RIGHT); } else if ("top".equalsIgnoreCase(side)) { tabPane.setSide(Side.TOP); } else if ("bottom".equalsIgnoreCase(side)) { tabPane.setSide(Side.BOTTOM); } }; } ``` ### 3.3 工作原理 使用 TabPane 控件时，可能已经知道希望标签显示的方向。此应用程序允许通过左、右、上和下菜单选项来设置方向。 如果熟悉 Swing API，会发现 JavaFX 的 TabPane 与 Swing 的 JTabbedPanel 非常相似。不同的是，这里只需添加 javafx.scene.control.Tab 实例。以下代码片段将 Tab 控件添加到 TabPane 控件中： ```java TabPane tabPane = new TabPane(); Tab tab = new Tab(); tab.setText("Tab" + i); tabPane.getTabs().add(tab); ``` 更改 TabPane 控件的方向时，使用 setSide() 方法。以下代码设置 TabPane 控件的方向： ```java tabPane.setSide(Side.BOTTOM); ``` 在此方案中，使用一个 Menu 来更改 TabPane 控件的方向。将不同的方向分配给 Menu 的不同 MenuItem 节点，并使用一个名为 changeTabPlacement 的 EventHandler 在选择不同的 MenuItem 时更改方向。EventHandler 会检查 MenuItem 的文本，以确定应将哪个方向应用于 TabPane。 ## 4. 开发对话框 ### 4.1 问题描述 想要创建一个包含对话框的应用程序，对话框中包含一些供用户输入的文本字段。 ### 4.2 解决方案 使用 JavaFX 的 stage（javafx.stage.Stage）和 scene（javafx.scene.Scene）API 来创建对话框。以下源代码是一个模拟更改密码对话框的应用程序，该应用程序包含用于弹出对话框的菜单选项。除了使用菜单选项外，用户还可以设置对话框的模态状态。 ```java public class DevelopingADialog extends Application { static Stage LOGIN_DIALOG; static int dx = 1; static int dy = 1; /** * @param args the command line arguments */ public static void main(String[] args) { Application.launch(args); } private static Stage createLoginDialog(Stage parent, boolean modal) { if (LOGIN_DIALOG != null) { LOGIN_DIALOG.close(); } return new MyDia ```