Использование панели анализатора CSS

Панель анализатора CSS позволяет понять, как различные возможные правила CSS могут влиять на аспекты выбранного в данный момент элемента графического интерфейса. Он отображает обзор всех возможных источников значений свойств. Каждое значение свойства CSS, присвоенное определенному аспекту выбранного элемента GUI, может происходить либо из API, либо из предопределенных правил CSS. Источники перечислены в порядке приоритета, что позволяет понять, почему один источник имеет приоритет над другим. Панель также предоставляет средства для перехода к источнику значения свойства CSS, чтобы помочь вам разрабатывать и устранять неполадки в таблицах стилей CSS.

Панель CSS Analyzer по умолчанию не отображается. Чтобы отобразить панель, выберите «Просмотр» в главном меню и затем «Показать анализатор CSS», как показано на рисунке11-4.

Рисунок 11-4 Показать анализатор CSS

Панель CSS Analyzer появляется в нижней части главного окна, как показано на рисунке 11-5.

Рисунок 11-5 Отображение панели анализатора CSS

Панель включает следующие разделы, большинство из которых выделено на рис.11-5.

• Текстовое поле поиска: находится в правом верхнем углу панели. Это позволяет вам изолировать определенные свойства, которые вы хотите просмотреть.

• Меню анализатора CSS: находится справа от текстового поля поиска. Щелкните стрелку раскрывающегося списка, чтобы увидеть меню доступных команд, как показано на рисунке 11-6.

  • View As: позволяет выбрать формат отображения для свойств стиля. По умолчанию используется табличный вид. В режиме просмотра «Правила» свойства отображаются в формате правил CSS. В режиме просмотра текста свойства отображаются в стиле текста.

  • Copy Styleable Path: Позволяет скопировать текущее значение в текстовое поле Styleable Path и вставить его в файл CSS, чтобы изменить стиль текущего выбранного компонента или его подэлемента.

  • Hide Properties with Default Values: Удаляет из просмотра все свойства, которым присвоены только значения по умолчанию. Свойства со значениями, отличными от значений по умолчанию, например таблицы стилей и встроенные стили, по-прежнему отображаются. В поле «Show Properties with Default Values»(Показать свойства со значениями по умолчанию) отображаются все свойства компонента.

  • Split Defaults: Обновляет представление свойств, чтобы включить два столбца для значений свойств стиля по умолчанию: значения по умолчанию для API и значения по умолчанию для темы FX. Команда "Join Defaults"(Объединить значения по умолчанию) отображает объединенные значения по умолчанию в один столбец, который используется по умолчанию.

  Рисунок 11-6 Меню анализатора CSS

  

• Styleable Path text field:  расположено в верхнем левом углу панели. Это позволяет вам обнаруживать подэлементы, когда вы нажимаете стрелки на пути. Вы можете скопировать этот путь с помощью меню анализатора CSS и вставить его в свой файл CSS, чтобы назначить новое значение стиля.

• CSS Picking Mode button: Расположен под текстовым полем поиска. Это режим по умолчанию, когда открыт CSS Analyzer. Это позволяет вам выбрать подэлемент текущего выбранного компонента. На рис.11-5 выбрана кнопка «CSS Picking Mode»(Режим выбора CSS). Это позволило вам выбрать нижнюю горизонтальную полосу прокрутки компонента ScrollPane на панели «Content»(Содержимое). Полоса прокрутки выделена желтым цветом, чтобы указать, что это текущий выбранный вложенный элемент ScrollPane. Соответственно, «Styleable Path»(Настраиваемый путь) показывает полный путь к текущему выбранному элементу. Эта функция показывает, как можно стилизовать скины.

• CSS Selection Mode button: Расположен рядом с кнопкой «CSS Picking Mode»(Режим выбора CSS). Это стандартный режим выбора, позволяющий выбрать компонент.

• Properties column: Первый столбец в таблице. Отображает все доступные свойства стиля, доступные для текущего выбранного элемента.

• Defaults column: Отображает значения по умолчанию как из API, так и из темы JavaFX, которые предоставляются для свойства стиля.

• Inspector column: Отображает значение свойства, установленное с помощью панели «Inspector»(Инспектор). Некоторые свойства отображаются как в разделе «Properties»(Свойства) на панели «Inspector»(Инспектор), так и в панели «CSS Analyzer»(Анализатор CSS). Чтобы отредактировать эти свойства, наведите курсор мыши на соответствующую ячейку панели CSS Analyzer и щелкните значок шестеренки в правом верхнем углу, чтобы выбрать «Reveal in Inspector»(Показать в инспекторе). Соответствующее свойство выделяется синим кольцом в разделе «Properties»(Свойства) панели «Inspector»(Инспектор).

• Stylesheets column: Отображает значение, определенное для свойства с помощью файла CSS, установленного в текстовом представлении таблицы стилей в разделе «Properties»(Свойства) панели «Inspector»(Инспектор). Имя файла CSS, из которого получено значение, включено в столбец. Вы также можете щелкнуть значок шестеренки в верхнем правом углу ячейки и выбрать команду «Open»(Открыть), чтобы открыть файл CSS в редакторе CSS по умолчанию.

• Inline Styles column: Отображает значение встроенного стиля, которое определено для свойства в текстовом представлении «Style»(Стиль) в подразделе JavaFX CSS в разделе «Properties»(Свойства) панели «Inspector»(Инспектор). Вы можете выбрать команду «Reveal in Inspector»(Показать в инспекторе), используя значок шестеренки в верхнем правом углу ячейки таблицы, чтобы отобразить текстовое представление стиля на панели «Inspector»(Инспектор).

Вы можете изменить значения свойств из вашего файла CSS. В качестве альтернативы вы можете использовать подраздел JavaFX CSS в разделе «Properties»(Свойства) на панели «Inspector»(Инспектор) для редактирования свойства CSS или использования свойства Style для переопределения любого свойства CSS.

Когда значение свойства CSS присваивается текущему выбранному компоненту графического интерфейса, новый стиль немедленно отображается на панели «Content»(Содержимое).

Чтобы узнать больше о функциях анализатора CSS, выполните следующие действия, чтобы настроить компонент «Button»(Кнопка) так, чтобы края были закруглены, и используйте этот стиль для всех кнопок, которые впоследствии добавляются в макет FXML.

1. Перетащите кнопку из библиотеки на панель содержимого.

   Вы увидите, что анализатор CSS отображает значение -fx -background-radius, показанное на рисунке 11-7, как одно из свойств CSS для кнопки.

   Рисунок 11-7 Свойства кнопки, отображаемые в анализаторе CSS

   

2. Щелкните имя свойства -fx -background-radius в столбце «Properties»(Свойства), и вы попадете в соответствующую интерактивную документацию по API в Справочном руководстве JavaFX CSS, в котором описан синтаксис, который можно использовать со значением каждого свойства.

3. Измените значение свойства -fx-background-radius.

   1. В окне Scene Builder щелкните раздел «Properties»(Свойства) на панели «Inspector»(Инспектор).

   2. Щелкните текстовое поле «Style»(Стиль), расположенное в подразделе JavaFX CSS, и выберите -fx-background-radius из раскрывающегося списка.

   3. Введите 10px в текстовое поле Style в подразделе JavaFX CSS, как показано на рисунке 11-8.
      Обратите внимание, что компонент «Button»(Кнопка) на панели «Content»(Содержимое) теперь закруглен по углам. Кроме того, на панели анализатора CSS вы увидите, что строка для свойства -fx-background-radius теперь имеет два значения: значение по умолчанию и значение встроенного стиля 10 пикселей, которое вы только что ввели в свойстве Style, как показано на Рисунок 11-8. Цвет фона этой ячейки также изменился на синий, что означает, что значение теперь является текущим значением, отображаемым в текущем выбранном компоненте.

   Рисунок 11-8 Закругление кнопки

   

4. Создайте правило CSS, чтобы можно было применить новый стиль кнопки ко всем кнопкам, добавляемым в текущий макет FXML.

   1. Используя команду вашей системы, создайте пустой файл CSS, например test.css в том же каталоге, где находится ваш текущий макет FXML.

   2. В разделе «Properties»(Свойства) панели «Inspector»(Инспектор) нажмите кнопку «+» в свойстве «Stylesheets»(Таблицы стилей), как показано на рисунке 11-8.

   3. В диалоговом окне «Add Style Sheet»(Добавить таблицу стилей) перейдите к расположению файла test.css, выберите его и нажмите «Open»(Открыть), чтобы добавить его в свойство «Stylesheets»(Таблицы стилей).
      Вы увидите, что файл test.css добавлен в свойство «Stylesheets»(Таблицы стилей).

   4. Отредактируйте файл test.css, щелкнув стрелку вниз в свойстве «Stylesheets»(Таблицы стилей) и выбрав «Open»(Открыть) test.css.

   5. Добавьте следующее правило CSS в test.css и сохраните файл.

      Пример 11-1 Добавление правила CSS для кнопки с закругленными краями

      .button {
      -fx-background-radius: 10px;
      }
      

   6. Снова нажмите кнопку на панели содержимого. Обратите внимание, что на панели «CSS Analyzer»(CSS-анализатор) кнопка теперь наследует правило CSS из файла test.css, поскольку кнопка является дочерним элементом компонента AnchorPane. Поскольку ему по-прежнему присвоено значение встроенного стиля, это значение имеет приоритет и является стилем, отображаемым на панели «Content»(Содержимое). Если вам не нужно менять стиль для этой конкретной кнопки, вы можете удалить это значение стиля из раздела «Properties»(Свойства) на панели «Inspector»(Инспектор).