В этой главе описывается панель «Document»(Документ) инструмента JavaFX Scene Builder.

Панель «Документ», показанная на рисунке 7-1, расположена в нижней левой части окна инструмента. Он состоит из разделов «Hierarchy»(Иерархия) и «Controller»(Контроллер). Вы можете скрыть панель «Документ», выбрав «View»(Просмотр) в главном меню, а затем выбрав «Hide Document»(Скрыть документ) или «Hide Left Side Panel»(Скрыть левую боковую панель), чтобы скрыть ее вместе с панелью «Library»(Библиотека).

Рисунок 7-1 Панель документа

Image with Layers Panel opened

Раздел иерархии

В разделе «Hierarchy»(Иерархия) показаны все элементы графического интерфейса, составляющие ваш макет FXML, в том числе те, которые не отображаются на панели «Content»(Содержимое). Вы можете использовать панель Иерархия, чтобы сосредоточиться на одном конкретном элементе графического интерфейса, будь то родительский узел или листовой узел. После того, как элемент изолирован, вы можете использовать панель «Содержимое» или панель «Inspector»(Инспектор), чтобы сосредоточить свою работу на этом конкретном элементе и его свойствах. Путь от корня макета FXML к конкретному элементу графического интерфейса отображается на панели «Путь и выделение», когда элемент графического интерфейса изолирован на панели «Иерархия». Выбранный объект графического интерфейса выделяется на панели «Иерархия» и на панели «Содержимое».

Вы также можете добавить новый элемент графического интерфейса пользователя в макет FXML, перетащив его с панели «Библиотека» в желаемое место на панели «Иерархия». Это особенно полезно при добавлении элемента управления Popup, такого как Tooltip или ContextMenu. Например, чтобы добавить всплывающую подсказку к элементу Button, перетащите элемент управления Tooltip с панели «Библиотека» на целевой элемент Button на панели «Иерархия». Подсказка становится дочерним элементом этого элемента Button.

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

Панель «Иерархия» также полезна для добавления графического элемента к элементу графического интерфейса пользователя, имеющему графическое свойство в соответствии с его API. Например, вы можете добавить графический элемент к элементу Button, но не к элементу GridPane. Используйте следующие шаги, чтобы добавить графический элемент Circle к элементу Button с помощью панели Hierarchy:

  1. С панели «Библиотека» перетащите элемент «Circle»(Круг) на целевой слой «Button»(Кнопка) на панели «Иерархия».

  2. Не отпуская курсор мыши, наведите указатель мыши на слой «Кнопка» на секунду, и вы заметите, что для Круга создается новый подслой.

  3. Отпустите курсор мыши, и на панели содержимого появится круг с радиусом по умолчанию 100.

  4. В разделе «Layout»(Макет) на панели «Инспектор» уменьшите радиус круга до 6, чтобы он лучше вписывался в кнопку.
    Одновременно к элементу Button можно добавить только один графический элемент. Чтобы добавить новую графику, вы должны сначала удалить существующую. Если элемент является контейнером, то он может содержать любое количество графических элементов.

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

Рисунок 7-2 Панель иерархии с раскрывающимся списком команд

Description of Figure 7-2 follows

Когда вы щелкаете стрелку раскрывающегося списка, которая обведена в правом верхнем углу на рис. 7-3, и выбираете Отображение иерархии, вы можете выбрать Info, fx: id или Node Id для отображения рядом с каждым из элементов, перечисленных в панель Иерархия. Режим отображения по умолчанию - «Информация», который отображает любую связанную информацию для элемента или значение свойства text, если элемент имеет свойство text. В режиме отображения fx: id отображается значение свойства fx: id каждого элемента, которое используется классом контроллера приложения. Когда вы выбираете Node Id, на панели Hierarchy отображаются те же имена узлов, которые используются на панели Selection для каждого элемента.

Рисунок 7-3 Меню отображения иерархии на панели документа

Description of Figure 7-3 follows

Секция контроллера

Раздел «Controller»(Контроллер), показанный на рис. 7-4, позволяет вам управлять классом контроллера, который вы хотите использовать с вашим документом FXML. Класс контроллера предоставляет логику для обработки поведения объектов в вашем макете FXML. В текстовом поле класса контроллера вы устанавливаете полное имя класса Java для файла класса контроллера, который вы хотите использовать. Этот файл должен находиться в той же папке, подпапке или родительской папке, в которой также находится файл FXML. Если файл класса контроллера уже существует в той же папке, что и файл FXML, с которым вы работаете, вы можете выбрать класс контроллера из раскрывающегося списка, щелкнув стрелку вниз, обведенную на рис. 7-4. Если вы используете IDE NetBeans с JavaFX Scene Builder и ваш FXML-файл находится в проекте NetBeans, тогда java-файл класса Controller может находиться в любом java-пакете внутри папки src вашего проекта NetBeans.

Список всех значений fx:id, используемых в документе FXML, отображается в виде таблицы. В раздел «Контроллер» также включен флажок конструкции fx:root, который создает ссылку на ранее определенный корневой элемент. Чтобы узнать больше об элементе <fx:root>, обратитесь к документации JavaFX API.

Рисунок 7-4 Секция контроллера на панели документа

Description of Figure 7-4 follows

 

Предыдущая   Следующая