Статьи

Панели макета JavaFX 2.0 — BorderPane

Март 31, 2019
BorderPane очень хорошо подходит для разработки более сложных макетов. В общем, BorderPane предоставляет пять различных регионов: верхний, правый, нижний, левый и центральный. Вы можете установить Node для каждой из этих областей, вызывая setTop/setBottom/set… . Этот подход позволяет очень легко создавать «веб-подобные» окна приложений, в которых у вас есть меню или панель инструментов вверху, навигация слева, какой-то нижний колонтитул внизу, основное содержание в центральной области и, возможно, некоторые дополнительная информация справа.

Важно знать, что каждая из этих областей изменяет размеры по-разному:

  • Размер верхней и нижней областей будет изменен в соответствии с предпочтительной высотой их детей и займет все пространство, доступное для их ширины.
  • Размеры левых и правых областей изменятся до предпочтительной ширины их детей и займут все пространство, доступное для их высоты.
  • Центральная часть занимает все пространство, доступное для его высоты и ширины.

На следующем рисунке показано поведение BorderPane при изменении размера окна приложения:

Источник: собственная иллюстрация

BorderPane — Пример

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
/**
 * Created on: 29.03.2012
 * @author Sebastian Damm
 */
public class BorderPaneExample extends Application
{
    private BorderPane root;
     
    @Override
    public void start(Stage primaryStage) throws Exception
    {
        root = new BorderPane();       
        root.setTop(getMenu());
        root.setRight(getRightHBox());
        root.setBottom(getFooter());
        root.setLeft(getLeftHBox());
        root.setCenter(getCenterPane());
         
        Scene scene = new Scene(root, 900, 500);       
        primaryStage.setTitle("BorderPane Example");
        primaryStage.setScene(scene);
        primaryStage.show();   
    }
     
    private MenuBar getMenu()
    {
        MenuBar menuBar = new MenuBar();
         
        Menu menuFile = new Menu("File");               
        Menu menuEdit = new Menu("Edit");
        Menu menuHelp = new Menu("Help");       
        menuBar.getMenus().addAll(menuFile, menuEdit, menuHelp);
         
        return menuBar;
    }
     
    private HBox getRightHBox()
    {
        HBox hbox = new HBox();
         
        VBox vbox = new VBox(50);
        vbox.setPadding(new Insets(0, 20, 0, 20));
        vbox.setAlignment(Pos.CENTER);
         
        vbox.getChildren().addAll(new Text("Additional Info 1"),
                new Text("Additional Info 2"), new Text("Additional Info 3"));   
        hbox.getChildren().addAll(new Separator(Orientation.VERTICAL), vbox);    
 
        return hbox;
    }
     
    private HBox getLeftHBox()
    {
        HBox hbox = new HBox();
         
        VBox vbox = new VBox(10);
        vbox.setPadding(new Insets(10));
         
        Text text = new Text("Navigation");
        text.setFont(Font.font("Helvetica", FontWeight.BOLD, 20));
         
        VBox vboxText = new VBox(10);
        for (int i = 1; i >= 10; i++)
        {
            vboxText.getChildren().add(new Text("Category " + i));
        }       
        vboxText.setTranslateX(10);
         
        vbox.getChildren().addAll(text, vboxText);       
        hbox.getChildren().addAll(vbox, new Separator(Orientation.VERTICAL));
         
        return hbox;
    }
     
    private VBox getFooter()
    {
        VBox vbox = new VBox();
         
        HBox hbox = new HBox(20);
        hbox.setPadding(new Insets(5));
        hbox.setAlignment(Pos.CENTER);
         
        hbox.getChildren().addAll(new Text("Footer Item 1")
                , new Text("Footer Item 2"), new Text("Footer Item 3"));       
        vbox.getChildren().addAll(new Separator(), hbox);
                 
        return vbox;
    }
     
    private StackPane getCenterPane()
    {
        StackPane stackPane = new StackPane();
        stackPane.setAlignment(Pos.CENTER);
         
        Rectangle rec = new Rectangle(200, 200);
        rec.setFill(Color.DODGERBLUE);
        rec.widthProperty().bind(stackPane.widthProperty().subtract(50));
        rec.heightProperty().bind(stackPane.heightProperty().subtract(50));
         
        stackPane.getChildren().addAll(rec);
         
        return stackPane;
    }
     
    public static void main(String[] args)
    {
        Application.launch(args);
    }
}

Это небольшое приложение показывает, как использовать BorderPane . В методе start мы используем только различные методы set… класса BorderPane , чтобы заполнить каждую область Node .

Верхняя область заполнена MenuBar . Здесь я просто создаю MenuBar с тремя различными Menus . В одной из моих следующих публикаций я подробно расскажу о создании меню в JavaFX.

Помимо меню должен быть только один аспект кода, который может быть новым для вас. Пожалуйста, посмотрите на строку 100:

Центральная область нашей BorderPane заполнена StackPane с Rectangle . Поскольку Rectangle не изменяет размеры напрямую со своим родителем (как и все объекты Shape ), мы должны использовать другой подход, когда мы хотим изменить размер Rectangle . Вот почему я связал ширину и высоту Rectangle с шириной и высотой StackPane ( StackPane на 50 пикселей). Когда размер StackPanes изменяется, Rectangle автоматически изменится соответствующим образом.

Вот три картинки того, как должно выглядеть ваше приложение и как оно должно изменяться:

Как вы можете видеть, различные области BorderPane размеры в соответствии с правилами, которые я иллюстрировал в верхней части этого поста.

Справка: панели макетов JavaFX 2.0 — BorderPane от нашего партнера по JCG Себастьяна Дамма в блоге Just my 2 cents о Java .

35
Share: