javaFX

UI控件

label标签

用来显示文本的控件

javaFX - 图1

标签分为3中：带有图像的文本元素，旋转的文本，换行的文本。

  2.         //空标签
  3.         Label label1 = new Label();
  4.         //文本标签
  5.         Label label2 = new Label("Search");
  6.         //带图像的标签
  7.         Image image = new Image(getClass().getResourceAsStream("/cai_title.jpg"));
  8.         Label label3 = new Label("Search", new ImageView(image));
  9.         //设置图片和文本的距离
  10.         label3.setGraphicTextGap(15);
  11.         //在其布局区域内更改标签内容的位置
  12.         label3.setTextAlignment(TextAlignment.JUSTIFY);
  13.         //图形相对于文本的位置
  14.         label3.setContentDisplay(ContentDisplay.BOTTOM);
  15.         //设置字体
  16.         label3.setFont(Font.font("Cambria", 32));
  17. //        Label label4 = new Label("A label that needs to be wrapped");
  18.         //当渲染控件不足显示文本时就会分解（包装）文本
  19. //        label4.setWrapText(true);
  20.         root.getChildren().add(label3);
  22.         //旋转标签
  23.         Label label5 = new Label ("Values");
  24.         label5.setFont(new Font("Cambria", 32));
  25.         label5.setRotate(270);
  26.         label5.setTranslateY(50);
  28.         //缩放
  29.         Label label6 = new Label("A label that needs to be wrapped");
  30.         label6.setOnMouseEntered((MouseEvent e) -> {
  31.             label6.setScaleX(1.5);
  32.             label6.setScaleY(1.5);
  33.         });
  34.         label6.setOnMouseExited((MouseEvent e) -> {
  35.             label6.setScaleX(1);
  36.             label6.setScaleY(1);
  37.         });

Button按钮

javaFX - 图2

  2.         //没有文本的按钮
  3.         Button button1 = new Button();
  4.         //带文本的按钮
  5.         Button button2 = new Button("Accept");
  6.         //带图标的按钮
  7.         Image imageOk = new Image(getClass().getResourceAsStream("/error.png"));
  8.         Button button3 = new Button("Accept", new ImageView(imageOk));
  9.         Label label = new Label();
  10.         //监听
  11.         /*button3.setOnAction((ActionEvent e)-> {
  12.             label.setText("Accept");
  13.         });*/
  15.         DropShadow shadow = new DropShadow();
  16.         //鼠标光标打开时添加阴影
  17.         button3.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
  18.             button3.setEffect(shadow);
  19.         });
  21.         //鼠标光标关闭时去除阴影
  22.         button3.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
  23.             button3.setEffect(null);
  24.         });

Radio Button 单选按钮

  2.         RadioButton rb1 = new RadioButton();
  3.         rb1.setText("Home");
  4.         //带图标的单选按钮
  5.         Image image = new Image(getClass().getResourceAsStream("/error.png"));
  6.         RadioButton rb2 = new RadioButton("Agree");
  7.         rb2.setGraphic(new ImageView(image));
  9.         //一组单选按钮
  10.         final ToggleGroup group = new ToggleGroup();
  11.         RadioButton rb3 = new RadioButton("Home");
  12.         rb3.setToggleGroup(group);
  13.         rb3.setSelected(true); //默认选中
  14.         RadioButton rb4 = new RadioButton("Calendar");
  15.         rb4.setToggleGroup(group);
  16.         RadioButton rb5 = new RadioButton("Contacts");
  17.         rb5.setToggleGroup(group);
  18.         //事件
  19.         group.selectedToggleProperty().addListener((ov, oldToggle, newToggle) -> {
  20.             System.out.println(ov.getValue());
  21.         });

Toggle Button 切换按钮（与单选按钮类似）

javaFX - 图3

  2.         final ToggleGroup group = new ToggleGroup();
  3.         ToggleButton tb1 = new ToggleButton("Minor");
  4.         tb1.setToggleGroup(group);
  5.         tb1.setSelected(true);
  7.         ToggleButton tb2 = new ToggleButton("Major");
  8.         tb2.setToggleGroup(group);
  10.         ToggleButton tb3 = new ToggleButton("Critical");
  11.         tb3.setToggleGroup(group);
  12.         //事件
  13.         group.selectedToggleProperty().addListener((ov, oldToggle, newToggle) -> {
  14.             System.out.println(ov.getValue());
  15.         });

Checkbox 多选框

  1. final String[] names = new String[]{"Security", "Project", "Chart"};
  2. final Image[] images = new Image[names.length];
  3. final ImageView[] icons = new ImageView[names.length];
  4. final CheckBox[] cbs = new CheckBox[names.length];
  6. for (int i = 0; i < names.length; i++) {
  7.     final Image image = images[i] =
  8.         new Image(getClass().getResourceAsStream(names[i] + ".png"));
  9.     final ImageView icon = icons[i] = new ImageView();
  10.     final CheckBox cb = cbs[i] = new CheckBox(names[i]);
  11.     cb.selectedProperty().addListener(
  12.         (ObservableValue<? extends Boolean> ov,
  13.             Boolean old_val, Boolean new_val) -> {
  14.                 icon.setImage(new_val ? image : null);                
  15.     });
  16. }

Choice Box 选择框（下拉框）

  2.         HBox root = new HBox();
  3.         Label label = new Label();
  4.         final String[] greetings = new String[]{"1","2","3","4","5"};
  5.         final ChoiceBox<String> boxs = new ChoiceBox<>(FXCollections.observableArrayList("1","2","3","4","5"));
  6.         boxs.setTooltip(new Tooltip("Select the number"));//设置提示
  7.         boxs.getSelectionModel().selectedIndexProperty().addListener((observable,oldValue,newValue) ->{
  8.             label.setText(greetings[newValue.intValue()]);
  9.         });
  10.         root.getChildren().addAll(boxs,label);
  11.         Scene scene = new Scene(root, 800, 750);
  12.         stage.setScene(scene);
  13.         stage.show();

Text Field 文本输入框

  1. Label label1 = new Label("Name:");
  2. TextField textField = new TextField ();
  3. HBox hb = new HBox();
  4. hb.getChildren().addAll(label1, textField);
  5. hb.setSpacing(10);

Password Field 密码框

  1. PasswordField passwordField = new PasswordField();
  2. passwordField.setPromptText("Your password");

Scroll Bar 滚动条

  1.     final ScrollBar sc = new ScrollBar();
  2.     final Image[] images = new Image[5];
  3.     final ImageView[] pics = new ImageView[5];
  4.     final VBox vb = new VBox();
  5.     DropShadow shadow = new DropShadow();
  7.     @Override
  8.     public void start(Stage stage) {
  9.         Group root = new Group();
  10.         Scene scene = new Scene(root, 180, 180);
  11.         scene.setFill(Color.BLACK);
  12.         stage.setScene(scene);
  13.         stage.setTitle("Scrollbar");
  14.         root.getChildren().addAll(vb, sc);
  16.         shadow.setColor(Color.GREEN);
  17.         shadow.setOffsetX(2);
  18.         shadow.setOffsetY(2);
  20.         vb.setLayoutX(5);
  21.         vb.setSpacing(10);
  23.         sc.setLayoutX(scene.getWidth()-sc.getWidth());
  24.         sc.setMin(0);
  25.         sc.setOrientation(Orientation.VERTICAL);//默认情况下，滚动条水平放置。设置垂直方向
  26.         sc.setPrefHeight(180);
  27.         sc.setMax(360);
  28.          /*
  29.             sc.setMin(0);      设置导航栏的最小值
  30.             sc.setMax(100);    设置导航栏的最大值
  31.             sc.setValue(50);   设置导航栏的初始值
  32.         */
  34.         for (int i = 0; i < 5; i++) {
  35.             final Image image = images[i] =
  36.                     new Image(getClass().getResourceAsStream(
  37.                              "/" + (i+1)+ ".jpg")
  38.                     );
  39.             final ImageView pic = pics[i] =
  40.                     new ImageView(images[i]);
  41.             pic.setEffect(shadow);
  42.             vb.getChildren().add(pics[i]);
  43.         }
  45.         sc.valueProperty().addListener((ObservableValue<? extends Number> ov,
  46.                                         Number old_val, Number new_val) -> {
  47.             vb.setLayoutY(-new_val.doubleValue());
  48.         });
  50.         stage.show();

Scroll Pane 滚动窗格

  1.     final ScrollPane sp = new ScrollPane();
  2.     final Image[] images = new Image[5];
  3.     final ImageView[] pics = new ImageView[5];
  4.     final VBox vb = new VBox();
  5.     final Label fileName = new Label();
  6.     final String [] imageNames = new String [] {"1.jpg", "2.jpg",
  7.             "3.jpg", "4.jpg", "5.jpg"};
  9.     @Override
  10.     public void start(Stage stage) {
  11.         VBox box = new VBox();
  12.         Scene scene = new Scene(box, 180, 180);
  13.         stage.setScene(scene);
  14.         stage.setTitle("Scroll Pane");
  15.         box.getChildren().addAll(sp, fileName);
  16.         VBox.setVgrow(sp, Priority.ALWAYS);
  17. //        sp.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
  18. //        sp.setVbarPolicy(ScrollPane.ScrollBarPolicy.ALWAYS);设置滚动窗格的滚动条策略
  20.         fileName.setLayoutX(30);
  21.         fileName.setLayoutY(160);
  23.         for (int i = 0; i < 5; i++) {
  24.             images[i] = new Image(getClass().getResourceAsStream("/" + imageNames[i]));
  25.             pics[i] = new ImageView(images[i]);
  26.             pics[i].setFitWidth(100);
  27.             pics[i].setPreserveRatio(true);
  28.             vb.getChildren().add(pics[i]);
  29.         }
  31.         sp.setVmax(440);
  32.         sp.setPrefSize(115, 150);
  33.         sp.setContent(vb);//定义用作该滚动窗格内容的节点
  34.         sp.vvalueProperty().addListener((ObservableValue<? extends Number> ov,
  35.                                          Number old_val, Number new_val) -> {
  36.             fileName.setText(imageNames[(new_val.intValue() - 1)/100]);
  37.         });
  38.         stage.show();
  39.     }

List View 列表视图

创建列表视图并设置高宽

  1. ListView<String> list = new ListView<>();
  2. ObservableList<String> items =FXCollections.observableArrayList (
  3.     "Single", "Double", "Suite", "Family App");
  4. list.setItems(items);
  6. list.setPrefWidth(100);//设置高宽
  7. list.setPrefHeight(70);
  8. //list.setOrientation(Orientation.HORIZONTAL); 水平展示

ListView使用SelectionModel和FocusModel类跟踪对象的选择和焦点。要获取每个项目的当前状态，请结合使用以下方法：

  • getSelectionModel().getSelectedIndex() –以单选模式返回当前所选项目的索引
  • getSelectionModel().getSelectedItem() –返回当前选择的项目
  • getFocusModel().getFocusedIndex() –返回当前关注项目的索引
  • getFocusModel().getFocusedItem() –返回当前关注的项目
  1.     public static final ObservableList<String> names =
  2.             FXCollections.observableArrayList();
  3.     public static final ObservableList<String> data =
  4.             FXCollections.observableArrayList();
  6.     @Override
  7.     public void start(Stage primaryStage) {
  8.         primaryStage.setTitle("List View Sample");
  10.         final ListView<String> listView = new ListView<>(data);
  11.         listView.setPrefSize(200, 250);//宽度和高度
  12.         listView.setEditable(true);//设置可以编辑
  14.         names.addAll(
  15.                 "Adam", "Alex", "Alfred", "Albert",
  16.                 "Brenda", "Connie", "Derek", "Donny",
  17.                 "Lynne", "Myrtle", "Rose", "Rudolph",
  18.                 "Tony", "Trudy", "Williams", "Zach"
  19.         );
  21.         for (int i = 0; i < 18; i++) {
  22.             data.add("anonym");//初始值
  23.         }
  25.         listView.setItems(data);
  26.         listView.setCellFactory(ComboBoxListCell.forListView(names));//可以选择的值
  28.         StackPane root = new StackPane();
  29.         root.getChildren().add(listView);
  30.         primaryStage.setScene(new Scene(root, 200, 250));
  31.         primaryStage.show();
  32.     }
  1.     ListView<String> list = new ListView<>();
  2.     ObservableList<String> data = FXCollections.observableArrayList(
  3.             "chocolate", "salmon", "gold", "coral", "darkorchid",
  4.             "darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
  5.             "blueviolet", "brown");
  6.     final Label label = new Label();
  8.     @Override
  9.     public void start(Stage stage) {
  10.         VBox box = new VBox();
  11.         Scene scene = new Scene(box, 200, 200);
  12.         stage.setScene(scene);
  13.         stage.setTitle("ListViewSample");
  14.         box.getChildren().addAll(list, label);
  15.         VBox.setVgrow(list, Priority.ALWAYS);
  17.         label.setLayoutX(10);
  18.         label.setLayoutY(115);
  19.         label.setFont(Font.font("Verdana", 20));
  21.         list.setItems(data);
  23.         list.setCellFactory((ListView<String> l) -> new ColorRectCell());
  25.         list.getSelectionModel().selectedItemProperty().addListener(
  26.                 (ObservableValue<? extends String> ov, String old_val,
  27.                  String new_val) -> {
  28.                     label.setText(new_val);
  29.                     label.setTextFill(Color.web(new_val));
  30.                 });
  31.         stage.show();
  32.     }
  34.     static class ColorRectCell extends ListCell<String> {
  35.         @Override
  36.         public void updateItem(String item, boolean empty) {
  37.             super.updateItem(item, empty);
  38.             Rectangle rect = new Rectangle(100, 20);
  39.             if (item != null) {
  40.                 rect.setFill(Color.web(item));
  41.                 setGraphic(rect);
  42.             } else {
  43.                 setGraphic(null);
  44.             }
  45.         }
  46.     }

Table View 表格视图

  2.     private final TableView<Person> table = new TableView<>();
  3.     private final ObservableList<Person> data =
  4.             FXCollections.observableArrayList(
  5.                     new Person("Jacob", "Smith", "jacob.smith@example.com"),
  6.                     new Person("Isabella", "Johnson", "isabella.johnson@example.com"),
  7.                     new Person("Ethan", "Williams", "ethan.williams@example.com"),
  8.                     new Person("Emma", "Jones", "emma.jones@example.com"),
  9.                     new Person("Michael", "Brown", "michael.brown@example.com")
  10.             );
  12.     public static void main(String[] args) {
  13.         launch(args);
  14.     }
  16.     @Override
  17.     public void start(Stage stage) {
  18.         Scene scene = new Scene(new Group());
  19.         stage.setTitle("Table View Sample");
  20.         stage.setWidth(450);
  21.         stage.setHeight(500);
  23.         final Label label = new Label("Address Book");
  24.         label.setFont(new Font("Arial", 20));
  26.         table.setEditable(true);
  28.         TableColumn<Person,String> firstNameCol = new TableColumn<>("First Name");
  29.         firstNameCol.setMinWidth(100);
  30.         firstNameCol.setCellValueFactory(
  31.                 new PropertyValueFactory<>("firstName"));
  33.         TableColumn<Person,String> lastNameCol = new TableColumn<>("Last Name");
  34.         lastNameCol.setMinWidth(100);
  35.         lastNameCol.setCellValueFactory(
  36.                 new PropertyValueFactory<>("lastName"));
  38.         TableColumn<Person,String> emailCol = new TableColumn<>("Email");
  39.         emailCol.setMinWidth(200);
  40.         emailCol.setCellValueFactory(
  41.                 new PropertyValueFactory<>("email"));
  43.         table.setItems(data);
  44.         table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);
  46.         final VBox vbox = new VBox();
  47.         vbox.setSpacing(5);
  48.         vbox.setPadding(new Insets(10, 0, 0, 10));
  49.         vbox.getChildren().addAll(label, table);
  51.         ((Group) scene.getRoot()).getChildren().addAll(vbox);
  53.         stage.setScene(scene);
  54.         stage.show();
  55.     }
  57.     public static class Person {
  59.         private final SimpleStringProperty firstName;
  60.         private final SimpleStringProperty lastName;
  61.         private final SimpleStringProperty email;
  63.         private Person(String fName, String lName, String email) {
  64.             this.firstName = new SimpleStringProperty(fName);
  65.             this.lastName = new SimpleStringProperty(lName);
  66.             this.email = new SimpleStringProperty(email);
  67.         }
  69.         public String getFirstName() {
  70.             return firstName.get();
  71.         }
  73.         public void setFirstName(String fName) {
  74.             firstName.set(fName);
  75.         }
  77.         public String getLastName() {
  78.             return lastName.get();
  79.         }
  81.         public void setLastName(String fName) {
  82.             lastName.set(fName);
  83.         }
  85.         public String getEmail() {
  86.             return email.get();
  87.         }
  89.         public void setEmail(String fName) {
  90.             email.set(fName);
  91.         }
  92.     }

布局

BorderPane

BorderPane布局面板提供了五个区域，在其中放置节点：上，下，左，右和中心

javaFX - 图4

HBox

HBox布局面板提供了一个单行排列的一系列节点的简单方法

javaFX - 图5

VBox

VBox布局窗格类似于HBox布局窗格中，不同之处在于节点被布置在单个列中

javaFX - 图6

StackPane

在StackPane布局面板将所有节点与前一个节点的顶部增加每个新节点的单一堆栈中。此布局模型提供了一种将文本覆盖在形状或图像上或将常见形状重叠以创建复杂形状的简便方法

GridPane

GridPane布局面板使您能够创建行并在其中布置节点列的灵活栅格。节点可以放置在网格中的任何单元中，并且可以根据需要跨越单元。网格窗格可用于创建表单或按行和列组织的任何布局

javaFX - 图7

FlowPane

FlowPane布局窗格中的节点连续布置，并环绕在窗格的边界集处。节点可以垂直（按列）或水平（按行）流动。垂直流动窗格环绕在窗格的高度边界处。水平流动窗格环绕窗格的宽度边界

javaFX - 图8

TilePane

TilePane布局窗格将所有节点的网格中，其中每个小区，或瓦，是相同的大小。节点可以水平（按行）或垂直（按列）布局。水平平铺将瓷砖平铺在窗格的宽度边界处，垂直平铺将瓷砖平铺在高度边界处。使用prefColumns和prefRows属性来建立图块窗格的首选大小。

可以设置间隙属性来管理行和列之间的间距。可以设置padding属性来管理节点与窗格边缘之间的距离

AnchorPane

AnchorPane布局面板使您能够锚节点的顶部，底部，左侧，右侧或中心窗格。调整窗口大小时，节点将保持其相对于锚点的位置。节点可以锚定到一个以上的位置，并且可以将一个以上节点锚定到同一位置

javaFX - 图9