Управление пользовательскими элементами графического интерфейса

Первый раздел, отображаемый на панели «Библиотека», - это пользовательский раздел, как показано на Рисунке 8-3,. В нем перечислены все настраиваемые элементы графического интерфейса, которые не являются частью библиотек API JavaFX 8, но доступны для использования в макете графического интерфейса. Пользовательский элемент GUI - это класс Java, созданный пользователем или третьей стороной и добавленный в библиотеку доступных компонентов, которые вы можете использовать в своем макете FXML.

Рисунок 8-3 Пользовательский раздел панели библиотеки

Использование контейнера панели сетки (Grid Pane)

Контейнер Grid Pane позволяет создавать гибкую компоновку элементов графического интерфейса, которые организованы в строки и столбцы. Используйте панель сетки в своем макете, выбрав область сетки в разделе «Контейнер» панели «Библиотека» и перетащив ее на панель «Содержимое» или «Иерархия». Затем вы можете добавить другие элементы графического интерфейса в контейнер Grid Pane, и элементы будут автоматически упорядочены на основе заполнения, зазора и других свойств.

Вы также можете добавить элемент контейнера Grid Pane, чтобы он содержал элементы GUI, которые вы уже добавили в свой макет. Используйте следующие шаги:

1. Выберите «Edit»(Правка), а затем «Select All»(Выбрать все) в главном меню, чтобы выбрать все элементы в макете.

2. Добавьте контейнер «Grid Pane»(Панель сетки), выбрав «Arrange» (Упорядочить)в главном меню, «Wrap in»(Обернуть) и затем «Grid Pane»(Панель сетки) из списка контейнеров.

Пустая и невыделенная панель сетки не отображается на панели «Содержимое». Чтобы сделать его границы видимыми, щелкните соответствующий слой на панели Hierarchy для этого элемента Grid Pane. Чтобы работать с определенной панелью сетки, щелкните непосредственно в ее периметре, но не на любом из элементов, которые она содержит. Если этот параметр выбран, панель сетки окружена вкладками с рамкой светло-синего цвета, и отображается каждый соответствующий номер индекса, как показано на рисунке 8-6. Чтобы выбрать один столбец или строку, щелкните вкладку границы выделения. Вкладки выбранного столбца или строки приобретают желтый фон, как показано в столбце 1 на рисунке 8-6. Вы также можете выбрать несколько строк или несколько столбцов одновременно, чтобы сразу редактировать значения для этих выбранных элементов. Однако вы не можете одновременно выбрать комбинацию строк или столбцов.

Рисунок 8-6 Панель сетки в выбранном режиме

Чтобы увидеть подменю действий, которые вы можете выполнять на панели сетки, выполните одно из следующих действий:

• Щелкните правой кнопкой мыши в любом месте панели сетки и выберите команду из контекстного меню.

• В главном меню выберите «Modify»(Изменить), а затем - «Grid Pane»(Панель сетки).

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

Раздел «Макет»(Layout) на панели «Инспектор»(Inspector ) также позволяет вам изменять текущую выбранную «Grid Pane»(Панель сетки). Свойства, связанные с выбранной строкой или столбцом, отображаются, и ими можно управлять в разделах GridPane Row или GridPane Column.

Вы можете переместить элемент из одной ячейки сетки в другую существующую ячейку сетки. На панели Content выберите элемент, который вы хотите переместить, и, удерживая кнопку мыши, перетащите элемент в целевую ячейку сетки, как показано на рисунке 8-7. Обратите внимание, что целевая ячейка сетки меняет цвет на серый, как только вы наводите на нее курсор. Когда вы отпускаете кнопку мыши, элемент перемещается в целевую ячейку сетки на панели сетки.

Рисунок 8-7 Перемещение элемента в другую ячейку сетки

Чтобы переместить элемент в новую строку или столбец, который еще не был создан, выберите элемент на панели «Содержимое» и перетащите его на разделительную линию, которая находится между строками или столбцами, куда вы хотите вставить новую строку или столбец. При наведении курсора мыши на разделитель ячеек линия разделителя становится более толстой и серой. Когда вы отпускаете курсор, создается новая строка или столбец, а элемент помещается в целевую ячейку сетки. На рис. 8-8 показан элемент Button, перетаскиваемый в новую ячейку сетки во второй строке нового столбца, который будет вставлен.

Рисунок 8-8 Перемещение элемента в новую строку или столбец

Работа с контейнером границы панели (Border Pane)

Контейнер Border Pane позволяет размещать элементы графического интерфейса пользователя в верхней, правой, левой, нижней и центральной позициях контейнера. Используйте панель границы в своем макете, выбрав элемент BorderPane в разделе «Контейнер» панели «Библиотека» и перетащив его на панель «Содержимое». На рис. 8-9 показана панель Hierarchy после добавления элемента BorderPane.

Рисунок 8-9 Панель иерархии после добавления контейнера BorderPane

Вы можете добавить элемент GUI в контейнер Border Pane, перетащив элемент с панели Library в определенное место в Border Pane. Вы также можете перетащить элемент с панели «Библиотека» на панель «Иерархия», как показано на рисунке 8-10. Обратите внимание, что когда элемент перетаскивается над целевым слоем на панели Hierarchy, соответствующее положение слоя на панели Border Pane изменяется на более темный оттенок цвета, как показано на правой стороне рисунка 8-10.

Рисунок 8-10 Добавить элемент строки меню в BorderPane

Вы можете перемещать элемент из одного положения в другое на панели границ. На панели «Содержимое» или на панели «Иерархия» выберите элемент, который вы хотите переместить, и перетащите элемент в целевое положение, как показано на рисунке 8-11. Обратите внимание, что цвет фона целевой позиции становится темнее, как только вы наводите на нее курсор. Когда вы отпускаете кнопку мыши, элемент перемещается в целевое положение на панели границ.

Рисунок 8-11 Перемещение элемента в другое положение

Использование контейнера панели вкладок (Tab Pane)

По умолчанию панель вкладок содержит два элемента вкладки, каждый из которых содержит элемент панели привязки, как показано на рис. 8-12.

Рисунок 8-12 Элемент панели вкладок, добавленный в панель иерархии и панель содержимого

Вы можете изменить заголовок элемента Tab по умолчанию, дважды щелкнув вкладку и напрямую отредактировав ее свойство Text на панели Content. Чтобы добавить еще один элемент Tab в контейнер панели вкладок, перетащите элемент вкладки с панели «Библиотека» на панель вкладок на панели «Содержимое» или панели «Иерархия». Новый элемент Tab добавляется справа от любых существующих элементов Tab. Чтобы изменить порядок элементов вкладки на панели вкладок, используйте панель «Иерархия». Перетащите строку элемента Tab на панели Hierarchy в целевое место в контейнере Tab Pane. Вы также можете использовать панель «Содержимое», чтобы перетащить ее вкладку в целевое место в контейнере панели вкладок.

Чтобы добавить элементы графического интерфейса пользователя в область привязки элемента Tab, щелкните заголовок целевого элемента Tab, чтобы выбрать его. Перетащите элемент GUI, который вы хотите добавить, с панели «Библиотека» на элемент Tab, как показано на рис. 8-13.

Рисунок 8-13 Добавление элементов графического интерфейса из панели библиотеки в элемент вкладки на панели содержимого

В зависимости от длины заголовка каждого элемента вкладки и количества элементов вкладки в контейнере панели вкладок наступает момент, когда некоторые вкладки становятся скрытыми. Когда это происходит, к строке меню контейнера Tab Pane автоматически добавляется раскрывающееся меню, как показано на рисунке 8-14. Это раскрывающееся меню позволяет выбрать нужную вкладку. Это меню неактивно на панели «Содержимое», но работает при просмотре макета в окне предварительного просмотра. Если размер контейнера панели вкладок изменить так, чтобы все элементы вкладки были полностью видны, раскрывающееся меню автоматически удаляется из строки меню панели вкладок.

Рисунок 8-14 Панель вкладок с несколькими элементами вкладок и раскрывающимся меню

Работа с элементами управления меню

Раздел «Элементы управления» на панели «Библиотека» содержит три элемента управления, относящихся к меню: панель меню, кнопка меню и кнопка разделения меню. Когда вы перетаскиваете MenuBar с панели «Библиотека» на панель «Содержимое», она заполняется элементами меню с пометками «Файл», «Правка» и «Справка». По умолчанию каждый из этих элементов меню содержит один элемент пункта меню, как показано на рисунке 8-15.

Рисунок 8-15 Строка меню и ее содержимое, отображаемое на панели иерархии

Элементы меню и элемента меню не имеют графических представлений, которые отображаются на панели «Содержимое», поэтому вы можете использовать только панель «Иерархия» для выбора и управления этими элементами. Вы можете изменить порядок отображения элементов меню в строке меню, выбрав элемент меню на панели «Иерархия» и перетащив его в новое место в меню, где он должен отображаться. Вы можете напрямую изменить текстовое свойство элемента меню или элемента меню, выбрав его и щелкнув текстовую область, что переведет вас в режим редактирования. Вы также можете использовать раздел «Свойства» на панели «Инспектор» для изменения текстового поля.

Вы можете добавить другие элементы, связанные с меню, такие как другой элемент меню или элемент меню «Separator»(Разделитель), перетащив элемент с панели «Библиотека» в желаемое место меню на панели «Иерархия». Чтобы создать меню второго уровня, поместите элемент «Меню» в уже существующий элемент «Меню» на панели «Иерархия».

Используйте меню «Preview»(Предварительный просмотр), чтобы увидеть свою панель меню в действии. В окне предварительного просмотра вы можете щелкнуть пункт меню и любое его подменю.