Scene builder intellij idea как пользоваться

Configure JavaFX Scene Builder

IntelliJ IDEA allows you to open .fxml files in JavaFX Scene Builder right from the IDE after you specify the path to the Scene Builder application in the settings.

Configure Scene Builder in settings

1. Download and install the latest version of Scene Builder.
2. In the Settings dialog ( Control+Alt+S ), select Languages & Frameworks | JavaFX .
3. Click in the Path to SceneBuilder field.
4. In the dialog that opens, select the Scene Builder application (executable file) on your computer and click OK .
5. Apply the changes and close the dialog.

Download Scene Builder from the IDE

If your project doesn’t have JavaFX Scene Builder, you will see a notification on the Scene Builder tab for .fxml files.

• Click Download Scene Builder Kit in the notification to download and install the tool.

After that you can open .fxml files in Scene Builder right in the editor.

Open files in Scene Builder

When you open an .fxml file in the editor, there are two tabs underneath the editing area: the Text tab is for developing the markup, and the Scene Builder tab is for editing the file in Scene Builder.

• Scene Builder 2.x. and later. If you are using Scene Builder of the version 2.x. and later, the files will be opened in Scene Builder on the Scene Builder tab by default.
• Scene Builder 1.x If you are using Scene Builder of the version 1.x, the Scene Builder tab is empty. In this case, right-click the necessary .fxml file in the Project tool window and select Open In SceneBuilder from the context menu.

Scene builder intellij idea как пользоваться

Создадим простейший проект для JavaFX в среде разработки IntelliJ IDEA. Данная среда предлагает нам несколько вариантов: мы можем выбрать шаблон проекта для обычных Java-приложений и затем добавить в него все необходимые библиотеки, либо мы можем выбрать встроенный шаблон JavaFX и также подключить к нему все необходимые библиотеки. Выберем первый способ. При создании нового проекта выберем шаблон Java :

Далее в качестве шаблона проекта выберем Command Line App :

Затем дадим проекту какое-либо имя, например, HelloJavaFX:

По умолчанию сгенерированный проект содержит файл Main.java. Изменим его код:

package com.metanit; import javafx.application.Application; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.Group; import javafx.scene.text.Text; public class Main extends Application < public static void main(String[] args) < launch(args); >@Override public void start(Stage stage) < // установка надписи Text text = new Text("Hello METANIT.COM!"); text.setLayoutY(80); // установка положения надписи по оси Y text.setLayoutX(80); // установка положения надписи по оси X Group group = new Group(text); Scene scene = new Scene(group); stage.setScene(scene); stage.setTitle("JavaFX Application"); stage.setWidth(300); stage.setHeight(250); stage.show(); >>

Это простейшее JavaFX-приложение, которое отображает небольшое окно. Но при добавлении кода мы можем увидеть, что среда не распознает используемые пакеты:

Чтобы все работало, нам надо подключить библиотеки JavaFX. Для этого перейдем в меню File -> Project Structure :

В открывшемся окне перейдем к пункту Libraries :

В этой вкладке нажмем на знак + и в появившемся небольшом окошке выберем Java .

Далее в открывшемся диалоговом окне выберем путь к каталоге lib в папке, где распакован JavaFX SDK. И нажмем на OK для подключения библиотек.

И далее нажмем на кнопку Apply для применения изменений и затем на кнопку OK.

Далее перейдем в меню Run -> Edit Configuration

И в открывшемся окне перейдем к полю VM options . Если это поле отстутствует, то нажмем на опцию Modify options и в контекстном меню выберем Add VM options

После этого будет добавлено поле VM options . И далее в этом поле пропишем следующий параметр:

--module-path "путь к JavFX SDK\lib" --add-modules javafx.controls,javafx.fxml

Например, в моем случае JavaFX SDK распакован в папку C:\javafx-sdk-17.0.0.1 , поэтому я указываю

--module-path "C:\javafx-sdk-17.0.0.1\lib" --add-modules javafx.controls,javafx.fxml

И в конце нажмем на кнопки Apply и OK.

После этого мы сможем наслаждать разработкой на JavaFX в IntelliJ IDEA.

При создании нового проекта мы могли бы выбрать шаблон JavaFX :

Но его единственное отличие состоит в том, что он добавляет ряд дополнительных файлов, которые уже по умолчанию формируют простейщее приложение JavaFX. Преимуществом этого типа является то, что в проект уже по умолчанию добавляются ссылки на библиотеки JavaFX SDK.

Глобальные настройки

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

Для этого перейдем к пункту меню File -> Settings и затем в открывшемся окне перейдем к пункту Appearance & Behavior -> Path Variables

Нажмем на добавление новой переменной и в окне введем в качестве названия переменной PATH_TO_FX , а в качестве ее значения — путь к каталогу lib в папке JavaFX SDK.

Однако в этом случае в меню Run -> Edit Configuration для поля VM options также необходимо задать параметр:

--module-path $ --add-modules javafx.controls,javafx.fxml

Часть 1: Scene Builder

Нам нужно указать среде разработки Eclipse использовать JDK 8, а также задать путь к приложению Scene Builder:

1. Откройте настройки среды разработки Eclipse и перейдите к пункту Java | Installed JREs.
2. Нажмите Add…, выберите Standart VM и укажите путь к установленной JDK 8.
3. Уберите другие добавленные JDK и 8-я JDK будет использоваться по умолчанию.
   
4. Перейдите к пункту Java | Compiler. Установите значение настройки Compiler compliance level в 1.8.
   
5. Перейдите к пункту JavaFX и укажите путь к исполняемому файлу приложения Scene Builder.
   

Полезные ссылки

Возможно, вы захотите добавить закладки на следующие ссылки:

• Java 8 API — документация по стандартным классам Java;
• JavaFX 8 API — документация по классам JavaFX;
• ControlsFX API — документация по дополнительным элементам JavaFX из проекта ControlsFX;
• Oracle’s JavaFX Tutorials — официальный учебник по JavaFX от Oracle.

Ну что же, давайте приступим к изучению!

Создание нового проекта JavaFX

В приложение Eclipse (с уже установленным e(fx)clipse) в меню выберите пункт File | New | Other…, и затем выберите JavaFX Project.
Укажите имя проекта (наше будет называться AddressApp) и нажмите Finish.

Если Eclipse автоматически создало какие-то начальные файлы и пакеты, то удалите их.

Создание структуры пакетов

С самого начала мы будем следовать хорошим принципам проектирования ПО. Один из них — это шаблон проектирования Модель-Представление-Контроллер (MVC). Опираясь на этот шаблон мы разобьём код нашего приложения на три части и создадим для каждой из них свой пакет (правый клик на папке src, New… | Package):

• ch.makery.address — содержит большинство классов-контроллеров (Controller) (= классов бизнес логики);
• ch.makery.address.model — содержит классы Моделей (Model);
• ch.makery.address.view — содержит Представления (View).

Заметка: Внутри пакета view также будут лежать некоторые классы-контроллеры, которые непосредственно связаны с конкретными представлениями. Давайте называть их контроллеры-представлений (view-controllers).

Создание файла разметки FXML

Есть два пути создания пользовательского интерфейса: либо использовать файл разметки FXML, либо программировать всё на Java. В большинстве своём мы будем использовать XML (.fxml). Я считаю, что этот способ больше подходит для отделения контроллеров от представлений. В дальнейшем мы сможем использовать Scene Builder для визуального редактирования наших XML-файлов. А это значит, что мы не будем напрямую работать с XML.

Кликните на пакете view правой кнопкой мышки и создайте новый документ FXML с названием PersonOverview .

Проектировка визуального интерфейса в Scene Builder

Примечание: Если по какой-то причине ваш код не заработает, то скачайте исходники к этой части учебника и возьмите файл fxml оттуда.

Откройте только что созданный fxml-документ в приложении Scene Builder — клик правой кнопкой мышки по файлу PersonOverview.fxml , Open with SceneBuilder. На вкладке Hierarchy должен находиться единственный компонент AnchorPane.

(Если Scene Builder не запустился, то открываем пункт меню Window | Preferences | JavaFX и настраиваем верный путь к исполняемому файлу установленного приложения Scene Builder).

1. На вкладке Hierarchy выберите компонент AnchorPane, и справа, на вкладке Layout установите значение характеристикам Pref Width и Pref Height — 600 и 300 соответственно.
   
2. На вкладке Hierarchy в компонент AnchorPane добавьте новый компонент SplitPane (horizontal). Кликните по нему правой кнопкой мыши и выберите Fit to Parent.
   
3. Теперь, в левую часть компонента SplitPane со вкладки Controls перетащите компонент TableView. Выделите его целиком (а не отдельный столбец) и проставьте отступы от краёв так, как показано на рисунке. Внутри компонента AnchorPane всегда можно проставить отступы от четырёх границ рамки (дополнительная информация о разметках).
   
4. Чтобы увидеть, правильно ли отображается созданное окно, выполните пункт меню Preview | Show Preview in Window. Попробуйте поменять размер окна. Добавленная таблица должна изменятся вместе с окном, так как она прикреплена к границам окна.
5. В таблице измените заголовки колонок (вкладка Properties компонента TableColumn) на “First Name” и “Last Name”.
   
6. Выберите компонент TableView и во вкладке Properties измените значение Column Resize Policy на constrained-resize. Выбор этой характеристики гарантирует, что колонки таблицы всегда будут занимать всё доступное пространство.
   
7. В правую часть компонента SplitPane перетащите компонент Label и измените его текст на “Person Details” (подсказка: используйте поиск для скорейшего нахождения компонентов). Используя привязки к границам (вкладка Layout) скорректируйте его положение.
   
8. На правую панель SplitPane добавьте компонент GridPane и так же настройте привязки к границам, как показано на рисунке.
   
9. Приведите своё окно в соответствие с тем, что показано на рисунке, добавляя компоненты Label внутрь ячеек компонента GridPane.
   Примечание: для того, чтобы добавить новый ряд в компонент GridPane, выберите существующий номер ряда (он окрасится жёлтым), кликните правой кнопкой мышки на номере ряда и выберите пункт “Add Row Above” или “Add Row Below”.
   
10. Внизу добавьте ButtonBar, а в него три кнопки Button. Теперь установите привязки к границам (правой и нижней), чтобы ButtonBar всегда находилась справа.

Так как панель ButtonBar доступна только с JavaFX 8, и её поддержка в Scene Builder на данный момент несколько хромает, то имеется альтернативный способ. Добавьте три компонента Button в правую часть так, как показано на предыдущем рисунке. Выделите их всех вместе (Shift + клик), кликните по ним правой кнопкой мышки и выберите пункт Wrap In | HBox. Это действие их сгруппирует. Вы можете задать расстояние (Spacing) между компонентами во вкладке Properties компонента HBox. Также установите привязки к границам (правой и нижней).

1. Если всё сделано правильно, то у нас должно получится что-то похожее на рисунок ниже. Используйте пункт меню Preview, чтобы протестировать созданное окно и его реакцию на изменение размеров.

Создание основного приложения

Нам необходимо создать ещё один файл fxml-разметки, в котором будет компонент полосы меню. Этот файл будет служить обёрткой для только что созданного PersonOverview.fxml .

1. В пакете view создайте другой fxml-документ, и назовите его RootLayout.fxml . На этот раз в качестве корневого элемента выберите BorderPane.
   
2. Откройте файл RootLayout.fxml в приложении Scene Builder.
3. Установите предпочитаемое значение ширины и высоты компонента: 600 и 400 соответственно.
   
4. В верхний слот компонента BorderPane добавьте компонент MenuBar. Функциональность меню мы будем реализовывать в последующих уроках.
   

Основной класс приложения JavaFX

Теперь нам надо создать основной класс Java, который будет запускать наше приложение с RootLayout.fxml и добавлять в его центральную область PersonOverview.fxml .

1. Кликните правой кнопкой мыши по нашему проекту, перейдите к пункту New | Other… и выберите JavaFX Main Class.
2. Назовите класс MainApp и поместите его в пакет ch.makery.address (примечание: это пакет является родительским для view и model ).

Созданный класс MainApp.java расширяет класс Application и содержит два метода. Это базовая структура, которая необходима для запуска приложения JavaFX. Нам интересен метод start(Stage primaryStage) . Он автоматически вызывается при вызове метода launch(. ) из метода main .

Как можно заметить, метод start(. ) в качестве параметра принимает экземпляр класса Stage . На следующем рисунке представлена структура любого приложения JavaFX:

Источник изображения: http://www.oracle.com/

Это как театральное представление Stage (театральные подмостки) является основным контейнером, который, как правило, представляет собой обрамлённое окно со стандартными кнопками: закрыть, свернуть, развернуть. Внутрь Stage добавляется сцена Scene , которая может быть заменена другой Scene . Внутрь Scene добавляются стандартные компоненты типа AnchorPane , TextBox и другие.

Для получения более детальной информации о такой компоновке обратитесь к этому руководству: Working with the JavaFX Scene Graph.

Откройте класс MainApp.java и замените его содержимое на это:

package ch.makery.address; import java.io.IOException; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.scene.layout.AnchorPane; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class MainApp extends Application < private Stage primaryStage; private BorderPane rootLayout; @Override public void start(Stage primaryStage) < this.primaryStage = primaryStage; this.primaryStage.setTitle("AddressApp"); initRootLayout(); showPersonOverview(); >/** * Инициализирует корневой макет. */ public void initRootLayout() < try < // Загружаем корневой макет из fxml файла. FXMLLoader loader = new FXMLLoader(); loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml")); rootLayout = (BorderPane) loader.load(); // Отображаем сцену, содержащую корневой макет. Scene scene = new Scene(rootLayout); primaryStage.setScene(scene); primaryStage.show(); >catch (IOException e) < e.printStackTrace(); >> /** * Показывает в корневом макете сведения об адресатах. */ public void showPersonOverview() < try < // Загружаем сведения об адресатах. FXMLLoader loader = new FXMLLoader(); loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml")); AnchorPane personOverview = (AnchorPane) loader.load(); // Помещаем сведения об адресатах в центр корневого макета. rootLayout.setCenter(personOverview); >catch (IOException e) < e.printStackTrace(); >> /** * Возвращает главную сцену. * @return */ public Stage getPrimaryStage() < return primaryStage; >public static void main(String[] args) < launch(args); >>

Комментарии могут служить подсказками того, что и как делается.

Запустив приложение мы должны увидеть что-то похожее на то, что изображено на рисунке в начале этой статьи.

Часто встречающиеся проблемы

Если JavaFX не может найти указанный fxml -файл, то вы получите следующее сообщение об ошибке:

java.lang.IllegalStateException: Location is not set.

Для решения этой проблемы внимательно проверьте правильность указания пути к файлам fxml и правильность написания его названия.

Если и после этого не удастся запустить приложение, то скачайте исходники к этой части и запустить их.

Что дальше?

Во 2-й части учебника мы добавим в наше приложение некоторые данные и функциональность.

Вам могут быть интересны также некоторые другие статьи на английском языке:

• JavaFX Dialogs (official)
• JavaFX Date Picker
• JavaFX Event Handling Examples
• JavaFX TableView Sorting and Filtering
• JavaFX TableView Cell Renderer

Subscribe to receive updates by Email.

Создание Java программы с дизайном! Изучение библиотеки JavaFx

Разработка программ на Java – не особо сложный процесс. В статье мы разработаем крутое приложение с отличным дизайном и функциями. Для программы мы воспользуемся JavaFx.

Установка всего

Наша программа будет на языке Джава и она должна иметь графический интерфейс. Чтобы обеспечить такую смесь лучше всего установить и работать с библиотекой JavaFx. Скачать библиотеку можно по этой ссылке .

Также зайдите на сайт Oracle и скачайте Java . Рекомендуем скачать и установить Java 11, так как с Java 13 будут разного рода ошибки при работе с Javafx.

Создание проекта

Через любую среду разработки создайте новый JavaFx проект.

После создания проекта нужно добавить библиотеку JavaFx. Если вы работаете с Intellij IDEA, то вам нужно зайти в «File — Project Structure», далее перейти в модули и добавить в качестве нового модуля все файлы из папки lib , что находится в скачанной папке JavaFx . После добавления не забываем установить галочку, а также нажать на Окей.

После заходим в настройки: «Run — Edit configuration» и в поле «VM Options» прописываем полный путь к папке JavaFx:

--module-path D:\Java\javafx-sdk-11.0.2\lib (Вот здесь прописываете ваш путь) --add-modules javafx.controls,javafx.fxml

Создание дизайна

Для создания дизайна используйте программу Scene Builder . Внутри неё откройте ваш проект, а именно файл «sample.fxml». Через эту программу вы можете прописать весь дизайн для приложения.

После перетаскивания объектов и добавления к ним стилей, вы можете добавить ID для объектов, с которыми вы будете взаимодействовать, а также вам стоит указать рабочий контроллер для обработки всех функций в приложении.

В этой же программе можно посмотреть готовый вариант дизайна, а также же можно получить шаблон кода для класса контроллера. Для этого переходим: «View — Show sample skeletone code», где мы получаем весь код и копируем его. Этот же код разместите в контроллере вашего приложения.

Создание функций

Остается прописать весь функционал. Ниже представлен полный код основного контроллера, но также по этой ссылке вы можете скачать готовый проект всей программы.

Код класса контроллера:

package sample; import javafx.fxml.FXML; import javafx.scene.control.Button; import javafx.scene.control.RadioButton; import javafx.scene.control.ToggleGroup; import javafx.scene.text.Text; import java.util.Arrays; import java.util.Collections; import java.util.List; public class Controller < // Поля, что ссылаются на объекты внутри дизайна @FXML private ToggleGroup answers; @FXML private Text question_text; @FXML private RadioButton radio_btn_1; @FXML private RadioButton radio_btn_2; @FXML private RadioButton radio_btn_3; @FXML private RadioButton radio_btn_4; @FXML private Button answerBtn; // Массив на основе класса Questions. Каждый объект – вопрос с набором возможных ответов private Questions[] questions = new Questions[] < new Questions("В каком из вариантов представлен корректный формат вывода информации на экран?", new String[] ), new Questions("Какой тип данных отвечает за целые числа?", new String[] ), new Questions("Где правильно присвоено новое значение к многомерному массиву?", new String[]  = 1;", "a[0][0] = 1;">), new Questions("Какой метод позволяет запустить программу на Java?", new String[] ), new Questions("Каждый файл должен называется. ", new String[] ), new Questions("Сколько параметров может принимать функция?", new String[] ) >; // Переменные для установки текущего номера вопроса и для подсчета количества верных ответов private int nowQuestion = 0, correctAnswers; // В эту переменную будет устанавливаться корректный ответ текущего вопроса private String nowCorrectAnswer; @FXML public void initialize() < // Берем корректный ответ для текущего вопроса nowCorrectAnswer = questions[nowQuestion].correctAnswer(); // Отслеживание нажатия на кнопку "Ответить" answerBtn.setOnAction(e -> < // Получаем выбранную кнопку пользователем RadioButton selectedRadioButton = (RadioButton) answers.getSelectedToggle(); // Код будет выполняться только если пользователь выбрал ответ if(selectedRadioButton != null) < // Получаем текст ответа String toogleGroupValue = selectedRadioButton.getText(); // Сверяем ответ с корректным if(toogleGroupValue.equals(nowCorrectAnswer)) < // Выводим информацию и увеличиваем количество верных ответов System.out.println("Верный ответ"); correctAnswers++; >else System.out.println("Не верный ответ"); // Если сейчас был последний вопрос, то скрываем все поля if(nowQuestion + 1 == questions.length) < radio_btn_1.setVisible(false); // Скрываем все поля для выбора radio_btn_2.setVisible(false); radio_btn_3.setVisible(false); radio_btn_4.setVisible(false); answerBtn.setVisible(false); // Скрываем кнопку ответа // Показываем текст в конце question_text.setText("Вы ответили корректно на " + correctAnswers + " из " + questions.length + " вопросов!"); >else < // Если еще есть вопросы. // Увеличиваем номер текущего вопроса nowQuestion++; // Указываем новый текст верного ответа nowCorrectAnswer = questions[nowQuestion].correctAnswer(); // Меняем текст вопроса в программе question_text.setText(questions[nowQuestion].getQuestion()); // Получаем массив ответов String[] answers = questions[nowQuestion].getAnswers(); // Преобразовываем в список (так удобнее сортировать элементы) ListintList = Arrays.asList(answers); // Сортируем в случайном порядке Collections.shuffle(intList); // Подставляем ответы в радио кнопки radio_btn_1.setText(intList.get(0)); radio_btn_2.setText(intList.get(1)); radio_btn_3.setText(intList.get(2)); radio_btn_4.setText(intList.get(3)); // Снимаем выделение, что указал пользователь ранее selectedRadioButton.setSelected(false); > > >); > >

Видео на эту тему

Также вы можете просмотреть детальное видео по разработке данного приложения:

Дополнительный курс

На нашем сайте также есть углубленный курс по изучению языка Java . В ходе огромной программы вы изучите не только язык Java, но также научитесь создавать веб сайты, программы под ПК, приложения под Андроид и многое другое. За курс вы изучите массу нового и к концу программы будете уметь работать с языком Java и создавать на нём полноценные проекты.

Больше интересных новостей

10 классных проектов GitHub на языке Python

Сотни тысяч просмотров в инстаграм

Chrome стал наиболее уязвимым браузером 2022 года

Как правильно осуществить автоматизацию при помощи Python: инструкция