09 Определение свойств на панели инспектора

В этой главе описывается панель «Inspector»(Инспектор) инструмента JavaFX Scene Builder, включая разделы «Properties»(Свойства), «Layout»(Макет) и «Code»(Код).

Справа от панели «Content»(Содержание) находится панель Inspector, как показано на рис. 9-1 , с развернутым разделом «Layout»(Макет) и отображенным меню «Inspector»(Инспектор). Панель «Инспектор» также называется правой панелью. Он содержит контейнер Accordion с несколькими секциями. Верхний раздел содержит текстовое поле поиска, которое вы можете использовать для быстрого поиска свойств, которые вы хотите изменить. Результаты поиска отображаются в верхней части, как показано на рисунке 9-1. Вы можете напрямую изменять свойства, используя раздел «Search Results»(Результаты поиска). Вы можете отобразить меню Inspector, щелкнув стрелку раскрывающегося списка в правом верхнем углу, которая обведена на рис. 9-1. По умолчанию выбраны режимы «Show All»(Показать все) и «View Sections»(Просмотреть разделы). выбор режима «Show Edited»(Показать отредактированный) отображает только те свойства, которые явно отображаются в файле FXML. Например, только свойства Text, LayoutX и LayoutY отображаются на панели «Inspector»(Инспектор)., когда элемент Button удаляется с панели Library. при выборе режимов «View by property name»(Просмотр по имени свойства) или «View by property type»(Просмотр по типу свойства) все свойства отображаются в одном разделе с вкладками, отсортированные по имени или типу.

Разделы «Свойства», «Макет» и «Код» предоставляют доступ к свойствам выбранного элемента графического интерфейса. Каждое отображаемое имя свойства, показанное в разделах, является представлением соответствующего имени данного свойства в API JavaFX. Например, свойство minWidth в API JavaFX отображается на панели Inspector как Min Width. При щелчке по имени свойства открывается окно браузера, в котором отображается соответствующее имя API JavaFX для свойства и его описание.

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

Рисунок 9-1 Панель инспектора с отображенными результатами поиска и открытым разделом макета

Раздел свойств

Раздел «Properties»(Свойства) на панели «Inspector»(Инспектор), показанный на Figure 9-2, позволяет определить стиль выбранного элемента на панели «Hierarchy»(Иерархия) или «Content»(Содержимое).

Рисунок 9-2 Раздел свойств панели инспектора

Когда значение fx: id назначается для выбранного элемента GUI через Секцию кода, то же значение также назначается полю Id в подразделе CSS раздела свойств, только если это поле Id имеет значение null.

Текстовые области «Style»(Стиль), «Style Class»(Класс стилей) и «Stylesheets»(Таблицы стилей) в подразделе JavaFX CSS позволяют указать правило стиля и таблицу стилей для использования для конкретного компонента графического интерфейса и всех его дочерних компонентов. Вы можете добавлять, удалять и приводить в порядок применяемые таблицы стилей. Дополнительную информацию см. В главах Стилизация с помощью CSS и анализатора CSS в этом документе.

Значение свойства может быть переопределено стилем CSS, определенным в файле CSS или в свойстве Style. Значок CSS добавляется к левой стороне затронутого свойства, значение свойства которого переопределяется определением файла CSS, как показано на рисунке 9-3. Вы можете перейти к файлу CSS или свойству Style, щелкнув поле свойства.

Рисунок 9-3 Значок CSS для переопределенного значения свойства

Вы можете переходить от одного свойства к другому, нажимая клавишу Tab. Новое значение свойства сохраняется при нажатии клавиши Enter или при переходе к другому полю свойства. Вы можете управлять внешним видом выбранного элемента графического интерфейса, напрямую изменяя значение его свойств, которые доступны и доступны для редактирования. Например, вы можете определить эффекты выбранного элемента представления списка, щелкнув кнопку со стрелкой вниз, чтобы отобразить меню доступных эффектов, как показано на рисунке 9-4. Из списка доступных эффектов вы можете выбрать один или несколько эффектов для применения к выбранному элементу графического интерфейса.

Рисунок 9-4 Меню эффектов в разделе свойств панели инспектора.

Остальные свойства, отображаемые в разделе «Properties»(Свойства) панели «Inspector»(Инспектор), зависят от типа элемента графического интерфейса, выбранного на панели «Content»(Содержимое) или на панели «Hierarchy»(Иерархия). Например, если вы выбираете радиокнопку, переключатель или элемент радио-меню на панели «Content»(Содержимое), в разделе «Properties»(Свойства) отображается свойство «Toggle Group»(Переключить группу). Это свойство можно использовать, чтобы назначить один и тот же идентификатор ToggleGroup для каждого элемента управления, который вы хотите добавить в группу переключения.

Когда для свойства вводится недопустимое значение, появляется диалоговое окно с предложением выбрать одну из следующих команд: «Fix the Value»(Исправить значение) или «Revert to Previous Value»(Вернуться к предыдущему значению). Фокус вернется в текстовое поле с недопустимым значением свойства, если вы выберете команду «Исправить значение».

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

Если на панели «Content»(Содержимое) или на панели «Hierarchy»(Иерархия) выбрано несколько объектов одного типа (например, два элемента button(кнопки)) и если какое-либо из свойств имеет другое значение, в текстовом поле отображается знак «минус» (-). это свойство. Если вводится новое значение, то новое значение устанавливается для всех выбранных объектов.

Если на панели «Содержимое» или «Иерархия» выбрано несколько объектов разных типов, отображаются свойства, общие для всех объектов.

У некоторых свойств есть шестеренчатое меню, которое появляется с правой стороны поля свойства при наведении курсора мыши на редактор значений свойства, как показано на рисунке 9-5. Меню шестеренки предоставляет определенные действия, которые можно использовать для этого редактора. Например, вы можете сбросить текущее значение свойства до значения по умолчанию в JavaFX API, выбрав команду «Reset to default»(Сбросить до значения по умолчанию). На рис. 9-5 показаны действия, доступные для строки с многоточием.

Рисунок 9-5 Меню Cog для редакторов значений свойств

Любое числовое значение можно увеличить или уменьшить с помощью клавиш со стрелками вверх или вниз соответственно. Используя клавиши Shift-Up и Shift-Down, увеличивайте и уменьшайте числовое значение на 10 соответственно.

Редактор свойств Insets, Margins и Padding позволяет вам ввести первое значение (Top) и установить такое же значение для остальных трех текстовых полей (Right, Bottom, Left), выполнив следующие действия:

Введите значение в первое текстовое поле свойства.
Нажмите клавишу TAB, и фокус будет установлен на кнопку ссылки.
Нажмите клавишу Enter, чтобы применить только что введенное значение свойства к оставшимся трем текстовым полям свойств.
На рис. 9-6 показаны стандартные значения, присвоенные свойству Margin для кнопок в HBox.

Рисунок 9-6 Редактор свойств поля

Редакторы автопредложений доступны для всех свойств, у которых есть предопределенные значения. Если щелкнуть текстовое поле свойства, отобразится список предлагаемых значений. Список фильтруется, когда вы начинаете вводить текст в текстовое поле.

Для некоторых значений свойств требуются пути к файлам внешних ресурсов, таким как файлы изображений или файлы CSS. Вы можете указать пути к файлам, используя один из форматов, перечисленных в Таблице 9-1.

Таблица 9-1 Форматы путей к файлам внешних ресурсов

Типы форматов файлов	Пример
Абсолютный путь	`C:/johndoe/css/myCss.css`
Путь относительно текущего местоположения документа FXML	`@../css/myCss.css`
Путь относительно местоположения класса или файла ресурсов	`@/com/oracle/myProject/resources/myCss.css`

Редактор цвета доступен для свойств, значение которых может иметь цвет. Когда вы щелкаете по полю значения свойства, открывается окно Paint Editor. На рис. 9-7 показано окно Редактор цвета для свойства цвета заливки текста выбранного элемента Button. Вы можете изменить значение цвета для элемента графического интерфейса, перемещая курсор по цветовой палитре.

Рисунок 9-7 Редактор цвета

Когда вы щелкаете вкладку «Linear Gradient»(Линейный градиент) или «Radial Gradient»(Радиальный градиент), значение свойства «Text Fill»(Заливка текста) изменяется соответственно на «Линейный градиент» или «Радиальный градиент». Отобразится раздел Линейный или Радиальный редактор редактора цвета. На рис. 9-8 показан раздел Linear для свойства Text Fill. В этом разделе вы можете настроить значения градиента, перемещая доступные ползунки по бокам, пока не увидите желаемые цветовые оттенки, которых вы пытаетесь достичь. Отображаются значения дополнительных свойств, которые также можно редактировать в редакторе.

Когда вы настраиваете цвет, линейный градиент или сияющий градиент для конкретного элемента графического интерфейса, эти настройки также одновременно отражаются на элементе графического интерфейса, который отображается на панели «Содержимое».

Рисунок 9-8 Редактор линейного градиента

Раздел макета

Раздел Layout панели Inspector, показанный на рисунке 9-9, помогает вам указать поведение макета во время выполнения при изменении размера окна приложения. Это также позволяет вам изменять размер (например, Pref Width и Pref Height) и положение (например, Layout X и Layout Y) выбранного элемента. Некоторая информация, отображаемая в разделе «Макет», относится к самому выбранному элементу (например, минимальная ширина, максимальная высота или предварительная ширина), а некоторая информация зависит от типа элемента контейнера. Если выбранный элемент содержится в контейнере AnchorPane, то раздел AnchorPane присутствует в разделе Layout. Если выбранный элемент содержится в контейнере Grid Pane, то есть подраздел Grid Pane в разделе Layout панели Inspector. Однако некоторые контейнеры не имеют связанной контекстной информации, поэтому в разделе «Макет» не отображается подраздел контекстного контейнера.

Подраздел AnchorPane Constraints(Ограничения) появляется только тогда, когда выбранный элемент имеет AnchorPane в качестве ближайшего контейнера. Например, на рисунке 9-9 контейнер выбранного элемента HBox - это AnchorPane. Вы можете использовать диаграмму или текстовые поля в подразделе AnchorPane Constraint для управления привязками панели привязки. Якоря помогают управлять поведением выбранного элемента графического интерфейса пользователя при изменении размера окна. Вы можете щелкнуть якорные линии, чтобы указать, изменяется ли размер объекта при настройке окна приложения. При щелчке по ним линии меняются с сплошных черных на сплошные красные. Вы также можете указать числовые значения в полях вокруг диаграммы. Числовое значение, выделенное серым цветом, означает, что привязка отключена. Вы можете использовать клавишу Tab для перехода между полями привязки.

Если ближайшим контейнером элемента HBox является элемент StackPane, то верхний подраздел раздела «Макет» будет помечен как «StackPane Constraints»(Ограничения StackPane), и будут отображаться различные редактируемые свойства.

Подраздел «Transforms»(Преобразования) позволяет вам определять настройки для различных типов преобразований, таких как поворот, масштабирование и перевод.

Рисунок 9-9 Раздел компоновки панели инспектора

Раздел кода

На рис. 9-10 показан открытый раздел «Code»(Код), когда на панели «Hierarchy»(Иерархия) выбран элемент «New»(Создать). В поле fx:id вы можете назначить уникальное значение для выбранного элемента GUI. Вы можете выбрать из раскрывающегося списка доступных переменных, если вы уже назначили исходный класс контроллера для использования с макетом FXML.

Рисунок 9-10 Раздел кода на панели инспектора, когда выбрана кнопка New

В разделе «Код» можно указать действие, которое должно выполняться при перетаскивании, использовании клавиатуры, мыши или любом другом событии для выбранного элемента. В раскрывающемся списке в текстовом поле события выберите соответствующую команду, которая должна выполняться при возникновении определенного события или событий для этого элемента графического интерфейса. Данная команда является вызовом обработчика событий метода контроллера. Он обозначается знаком ведущего числа (#), который уже добавлен по умолчанию, за которым следует имя метода обработчика. Ожидается, что метод будет соответствовать сигнатуре стандартного обработчика событий, что означает, что он принимает единственный аргумент типа, который расширяет класс javafx.event.Event, и должен возвращать void. Например, на рис. 9-10 показано, что когда на кнопке происходит событие OnAction, выполняется метод контроллера newIssueFired().

Когда вы нажимаете «View»(Просмотр) в строке меню и затем выбираете «Show Sample Controller Skeleton»(Показать образец скелета контроллера), появляется окно текстового редактора, в котором отображается пример исходного файла того, как метод должен выглядеть в исходном коде вашего контроллера. Вы можете скопировать содержимое исходного файла скелета и настроить его по своему усмотрению.