Графические интерфейсы пользователя Java - Тимур Сергеевич Машнин

class="epigraph">

Стилизуйте панель инструментов с помощью CSS.

Панель TabPane

Компонент TabPane представляет собой панель с закладками.

Панель TabPane состоит из набора закладок ObservableList, заполнить который можно с помощью метода getTabs.addAll класса TabPane.

Закладки панели TabPane представлены классом Tab, экземпляр которого может быть создан с помощью конструктора, в котором можно сразу указать заголовок закладки и узел контента.

Класс Tab обеспечивает отображение узла Node в пределах панели TabPane и имеет набор свойств.

В частности, с помощью свойства content устанавливается отображаемый в закладке узел Node.

Остальные свойства обеспечивают оформление и поведение кнопки закладки.

Свойство side класса TabPane позволяет поместить кнопки закладок на верхней, нижней, левой или правой стороне панели TabPane.

Свойство tabClosingPolicy определяет возможность закрытия закладок.

Свойства tabMaxHeight, tabMaxWidth, tabMinHeight, tabMinWidth дают возможность установить размеры кнопок закладок.

В этом примере мы создаем панель с закладками.

Методом setPrefSize устанавливаем размеры панели.

Методом setSide устанавливаем расположение кнопок закладок в верхней части панели.

Методом setTabClosingPolicy устанавливаем, можно ли закрывать закладки.

Методами setTabMinHeight и setTabMinWidth устанавливаем размеры кнопок закладок.

Далее мы создаем сами закладки, для которых методом setContent устанавливаем узел отображаемого контента.

И добавляем закладки в панель методом getTabs.addAll.

Панели компоновки

Пакет scene.layout предлагает набор панелей компоновок, для упрощения компоновки узлов графа сцены.

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

Эти части панели могут быть любого размера.

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

Такая компоновка полезна для размещения панели инструментов наверху, строки состояния внизу, панели навигации слева, дополнительной информации справа и рабочей области в центре.

Если контейнер, в котором размещается эта панель компоновки, больше пространства, необходимого для содержимого каждой части, дополнительное пространство присваивается центральной части по умолчанию.

Таким образом, свойства bottom, center, left, right и top определяют компоновку узлов Node в верхней, центральной, левой, правой и нижней части панели BorderPane, поэтому с помощью панели BorderPane можно скомпоновать максимум пять узлов графа сцены.

При распределении с помощью методов setBottom, setCenter, setLeft, setRight и setTop узлов Node в частях панели BorderPane, узлы Node автоматически добавляются в набор дочерних узлов панели BorderPane.

Дополнительно определить выравнивание и отступы узла Node в пределах своей области позволяют статические методы setAlignment и setMargin класса BorderPane.

Классы VBox и HBox представляют панели компоновки, которые компонуют свои дочерние узлы в один столбец или одну строку соответственно.

Свойство alignment определяет общее выравнивание содержимого панели.

С помощью свойства fillWidth/fillHeight регулируется заполнение дочерним узлом ширины столбца или высоты строки.

Свойство padding позволяет управлять расстоянием между узлами и краями панели.

Свойство spacing определяет интервал между соседними дочерними узлами.

В этом примере мы создаем вертикальный столбец, для которого методом setSpacing определяем расстояние между дочерними узлами, и методом setPadding определяем отступы для каждого узла.

Методом setPrefWidth определяем ширину столбца.

Затем мы определяем дочерние узлы как строки.

Для строки мы определяем расстояние между дочерними узлами и размеры строки.

В этом случае определение ширины строки не играет роли, так как свойство fillWidth столбца имеет по умолчанию значение true, и дочерний узел заполняет ширину столбца.

Задание

В этом примере сделайте так, чтобы при значении свойства fillWidth столбца true, ширина строки все равно была меньше ширины столбца.

Класс StackPane представляет панель компоновки, которая компонует свои дочерние узлы в слои по оси Z, образующие стек, где первый узел лежит в основании стека, а последний узел – в вершине стека.

Панель StackPane позволяет создавать сложные геометрические формы путем наложения простых форм одна на другую и может применяться, например, для создания привлекательных меток к компонентам.

Панель StackPane содержит набор ObservableList дочерних узлов, заполнить который можно с помощью метода getChildren.addAll класса Pane.

Регулировать заполнение определенным узлом Node слоя стека панели StackPane можно с помощью статического метода setMargin класса StackPane.

Статический метод setAlignment дает возможность регулировать выравнивание определенного узла Node внутри стека.

В этом примере мы создаем флажок и создаем метку флажка с помощью панели StackPane.

Для этой панели мы создаем прямоугольник и текст, который накладывается на прямоугольник.

Задание

Создайте такую же метку без прямоугольника, с помощью определения фона панели.

Класс GridPane представляет панель компоновки, которая компонует свои дочерние узлы в таблицу, состоящую из столбцов и строк ячеек с изменяемыми размерами.

Свойство alignment определяет общее выравнивание содержимого панели GridPane.

С помощью свойства gridLinesVisible, при установке его значения true, можно сделать видимыми линии, разделяющие строки и столбцы.

Свойства hgap и vgap определяют горизонтальный и вертикальный отступы между столбцами и строками.

Дочерний узел панели GridPane может быть помещен в любую ячейку таблицы и может покрывать несколько строк и/или столбцов таблицы.

Кроме того, дочерние узлы могут накладываться друг на друга и образовывать стек, в котором первый узел лежит в основании стека, а последний узел – в вершине стека.

Если индексы строки / столбца не заданы явно, по умолчанию дочерний узел помещается в первую ячейку таблицы и занимает только одну ячейку.

Общее количество строк и столбцов таблицы увеличивается или сокращается автоматически в зависимости от размера набора дочерних узлов панели.

По умолчанию размеры строк и столбцов изменяются автоматически в зависимости от размеров дочерних узлов.

Распределять дочерние узлы панели GridPane по ячейкам таблицы можно несколькими способами.

Первый способ – это использование метода add класса GridPane, который помещает узел Node в ячейку с определенным номером столбца и строки и количеством столбцов и строк, которые узел Node должен покрывать.

Второй способ – это применение методов addColumn и addRow, формирующих столбцы и строки таблицы узлами Node.

Третий способ – это использование статических методов setColumnIndex и setRowIndex или setConstraints, присваивающих узлу Node номер столбца и номер строки таблицы.

При этом узлы Node добавляются в набор дочерних узлов панели GridPane с помощью метода getChildren.addAll.

Регулировать размеры и выравнивание столбцов и строк таблицы можно, применяя методы getColumnConstraints, getRowConstraints и классы ColumnConstraints и RowConstraints.

В этом примере мы создаем основную панель с одним столбцом и 4 строками.

В первую строку мы добавляем узел, который методом setColumnSpan распространяем на 2 столбца.

Методом setHalignment выравниваем этот узел посередине.

Во вторую строку мы добавляем панель с 2 столбцами и 2 строками.

В 3 строку основной панели добавляем панель с 2 столбцами и 1 строкой.

И в последнюю строку добавляем узел, который методом setColumnSpan распространяем на 2 столбца.

Методом setHalignment выравниваем этот узел посередине.

Задание

С помощью панели GridPane создайте аналог панели BorderPane.

Класс FlowPane представляет панель компоновки, которая компонует свои дочерние узлы в строки или столбцы панели.

Панель FlowPane содержит набор ObservableList дочерних узлов, заполнить который