В этой главе вы создадите новый файл макета FXML с помощью команды «New»(Создать) в среде IDE NetBeans или команды «New» в JavaFX Scene Builder. Затем вы назначаете каскадную таблицу стилей (CSS) для использования в макете FXML и создаете базовые панели для запуска разработки графического интерфейса приложения.

Макет FXML, который вы собираетесь создать для приложения IssueTrackingLite, представляет собой интерфейс, который позволяет запрашивать существующие проблемы проекта, изменять их или добавлять новые проблемы. Создайте свой собственный пользовательский интерфейс IssueTrackingLite, выполнив следующие действия:

  1. Создайте новый файл FXML, выполнив действия, описанные в разделе Использование мастера "New" IDE NetBeans или Использование команды "New"JavaFX Scene Builder.

  2. Установите корневой контейнер, CSS и класс стиля для использования для всего макета.

  3. Создайте базовые панели для макета.

Использование мастера "New" IDE NetBeans

Создайте новый пустой файл FXML с помощью мастера создания среды IDE NetBeans.

  1. В окне "Projects"(Проекты) среды IDE щелкните правой кнопкой мыши узел папки Issueetrackinglite в разделе "Source Packages"(Исходные пакеты), выберите "New", а затем "Other"(Другое).

  2. В диалоговом окне "New File"(Новый файл) выберите категорию JavaFX и выберите тип файла Empty FXML, как показано на рисунке 4-1. Нажмите кнопку "Next"(Далее).

    Рисунок 4-1 Выбор пустого типа файла FXML

    Description of Figure 4-1 follows
  3. В диалоговом окне «New Empty FXML»(Новый пустой FXML) введите IssueTrackingLite в текстовое поле «FXML Name»(Имя FXML). Убедитесь, что в текстовом поле пакета указано значение Issueetrackinglite. Нажмите Готово

    Файл IssueTrackingLite.fxml открывается в редакторе исходного кода IDE. Этот новый файл FXML находится в той же папке, что и предоставленный исходный код контроллера, IssueTrackingLiteController.java, который будет подключаться к пользовательскому интерфейсу, который вы создаете с помощью этого руководства.

  4. В окне "Projects"(Проекты) дважды щелкните узел IssueTrackingLite.fxml, чтобы открыть файл в инструменте JavaFX Scene Builder.

    Главное окно инструмента JavaFX Scene Builder появляется с файлом FXML, открытым на панели "Content"(Содержание), как показано на рисунке 4-2.

    Рисунок 4-2 Главное окно JavaFX Scene Builder при запуске из IDE NetBeans

    Description of Figure 4-2 follows
  5. На панели Scene Builder «Hierarchy»(Иерархия) щелкните правой кнопкой мыши узел AnchorPane и выберите «Delete»(Удалить).
    Макет IssueTrackingLite, который вы создаете в этом руководстве, использует другой верхний контейнер, который вы добавите в Установите корневой контейнер, CSS и класс стиля.

  6. Выберите "File"(Файл), а затем "Save"(Сохранить) в строке меню JavaFX Scene Builder.

Использование команды "New"JavaFX Scene Builder

Если вы решили не использовать IDE NetBeans для выполнения этого руководства, выполните следующие действия, чтобы создать новый пустой файл FXML с помощью команды «New»(Создать) в Scene Builder.

В строке меню Scene Builder выберите File, а затем New.

Появится новое окно JavaFX Scene Builder с пустым файлом FXML, открытым на панели "Content"(Содержание), как показано на рисунке 4-2. Панель Content изначально пуста.

Рисунок 4-3 Главное окно JavaFX Scene Builder после создания нового файла

Description of Figure 4-3 follows

Установите корневой контейнер, CSS и класс стиля

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

Совет:

В строке меню почаще выберайте команду File->Save. Кроме того, в строке меню выберите Edit->Undo, чтобы при необходимости отменить действия во время сборки приложения IssueTrackingLite.

  1. Перетащите контейнер VBox с панели Библиотека на панель Содержимое, как показано на рис. 4-4.

    Рис. 4-4 Добавление исходного контейнера VBox

    Description of Figure 4-4 follows
  2. Задайте файл CSS для использования в новом макете FXML.

    1. В разделе «Hierarchy»(Иерархия) панели «Document»(Документ) убедитесь, что выбран корневой элемент контейнера VBox.

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

    3. В диалоговом окне «Add Style Sheet»(Добавить таблицу стилей) перейдите туда, где вы извлекли образец файла IssueTrackingLite. Откройте папку IssueTrackinglite и выберите файл IssueTrackingLite.css. Щелкните Open.

  3. Установите класс стиля.

    1. Убедитесь, что корневой контейнер VBox все еще выбран на панели Hierarchy.

    2. В разделе «Properties»(Свойства) на панели «Inspector»(Инспектор) найдите текстовое поле «Style Class»(Класс стиля) и щелкните стрелку раскрывающегося списка. Список классов стилей извлекается из файла IssueTrackingLite.css. Выберите тему, как показано на Figure 4-5

      Рисунок 4-5 Установка класса стиля для макета

      Description of Figure 4-5 follows
  4. Сохраните новый файл FXML, прежде чем продолжить остальную часть учебника.

    1. В строке главного меню выберите «File», а затем «Save», если вы создали файл с помощью IDE NetBeans, или «Save As», если вы создали файл с помощью команды Scene Builder «File»> «New».

    2. В диалоговом окне «Save As» перейдите туда, где вы извлекли образец файла IssueTrackingLite. Разверните папки IssueTrackingLite, src, а затем IssueTrackinglite.

    3. Введите IssueTrackingLite.fxml в текстовое поле «File name» и нажмите «Save».

    4. Выберите Да, когда вас спросят, хотите ли вы заменить существующий файл IssueTrackingLite.fxml.

Изменение размера сцены и окна Scene Builder

Измените размер сцены и окна Scene Builder, чтобы у вас была большая рабочая область.

  1. Измените ширину и высоту сцены на панели «Content», чтобы увеличить рабочую область.

    1. На панели Inspector выберите раздел Layout.

    2. В разделе Size измените значение свойства Pref Width на 800, а значение свойства Pref Height на 600.

    3. Измените значения свойств Min Width, Min Height, Max Width и Max Height на USE_COMPUTED_SIZE (ИСПОЛЬЗОВАТЬ РАСЧЕТНЫЙ РАЗМЕР), как показано на рисунке 4-6.

      Рисунок 4-6 Изменение размера сцены

      Description of Figure 4-6 follows
  2. Измените размер окна Scene Builder, чтобы вы могли просматривать весь контейнер VBox.

Создайте базовые панели

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

  1. Откройте раздел «Hierarchy»(Иерархия) на панели «Document»(Документ), если он еще не открыт.

  2. Добавьте объект SplitPane.

    1. С панели Library перетащите контейнер SplitPane (пустой) в раздел Hierarchy панели Document и поместите его внутри элемента VBox, как показано на рисунке 4-7.

      Рисунок 4-7 Добавление пустой панели SplitPane в контейнер VBox

      Description of Figure 4-7 follows
    2. Выберите SplitPane на панели «Hierarchy»(Иерархия) и в строке меню выберите «Modify»(Модифицировать), а затем «Use Computed Sizes»(Использовать вычисленные размеры).

    3. На панели «Inspector»(Инспектор) выберите раздел «Layout»(Расположение). Установите для свойства Vgrow значение ALWAYS (ВСЕГДА).

  3. Добавьте еще один элемент SplitPane и измените его содержимое.

    1. Из раздела «Containers»(Контейнеры) панели «Library»(Библиотека) перетащите элемент SplitPane (вертикальный) в ранее добавленную панель SplitPane на панели «Hierarchy»(Иерархия), как показано на рисунке 4-8.

      Рисунок 4-8 Добавление элемента разделенной панели (вертикального)

      Description of Figure 4-8 follows

      Обратите внимание, что после удаления элемента SplitPane (Vertical) он добавляется на панель «Document» вместе со своими дочерними элементами AnchorPane.

    2. В строке меню выберите «Modify», а затем «Use Computed Size» (Использовать вычисленный размер). Или вы можете нажать Ctrl + Shift + K.

    3. На панели «Hierarchy» разверните только что добавленный второй элемент контейнера SplitPane, чтобы отобразить его содержимое. Щелкните правой кнопкой мыши первый узел AnchorPane и выберите «Delete»(Удалить) из контекстного меню.

    4. Выберите узел для оставшейся панели AnchorPane и в строке главного меню выберите «Modify»(Изменить), а затем «Use Computed Sizes»(Использовать вычисленные размеры).
      Обратите внимание, что в разделе «Layout»(Макет) панели «Inspector»(Инспектор) свойства «Sizes»(Размеры) для AnchorPane обновляются до значения USE_COMPUTED_SIZE.

  4. В строке меню выберите File, а затем Save. Кроме того, вы можете нажать Ctrl-S (для платформ Windows или Linux) или Cmd-S (для платформы Mac OS).
    Часто выполняйте действие «Save», чтобы сохранить свою работу.

 

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