Использование мастера "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

   

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

   

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 после создания нового файла

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

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

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

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

   

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 Установка класса стиля для макета

      

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 Изменение размера сцены

      

2. Измените размер окна Scene Builder, чтобы вы могли просматривать весь контейнер VBox.

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

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

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

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

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

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

      

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

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

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

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

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

      

      Обратите внимание, что после удаления элемента 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», чтобы сохранить свою работу.