Scene builder как создать строку поиска

#6 — Создание приложения на JavaFx

#6 - Создание приложения на JavaFx

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

Видеоурок

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

Скачать IntelliJ IDEA ;
Скачать Scene Builder .

Библиотека JavaFx

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

Также существует библиотека Java Swing, которая является аналогом JavaFx. Использовать Swing на сегодняшний день не имеет смысла, ведь библиотека уже морально устарела и на замену ей пришла новая библиотека JavaFx.

Структура проекта

При создании пустого проекта на основе JavaFx вы получаете проект сразу с несколькими папками и файлами в них.

Каждая отдельная страница в приложении состоит из двух файлов: файл с дизайном и файл с функциями.

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

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

Для создания разметки можно прописывать код вручную или же воспользоваться программой Scene Builder. Программа позволяет создавать весь графический интерфейс, а также генерирует скелет класса контроллера для добавления функциональности к программе.

Для редактирования файлов в программе Scene Builder необходимо открыть нужный .fxml файл. В качестве первого объекта переместите объект Anchor Pane и на него переносите другие необходимые элементы программы.

Весь код будет доступен после подписки на проект!

Часть 1: Scene Builder

Screenshot AddressApp Part 1

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

Откройте настройки среды разработки Eclipse и перейдите к пункту Java | Installed JREs.
Нажмите Add…, выберите Standart VM и укажите путь к установленной JDK 8.
Уберите другие добавленные JDK и 8-я JDK будет использоваться по умолчанию.
Перейдите к пункту Java | Compiler. Установите значение настройки Compiler compliance level в 1.8.
Перейдите к пункту 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 .

New FXML Document

New PersonOverview

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

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

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

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

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

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

Preview

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

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

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

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

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

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

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

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

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

New FXML Document

Источник изображения: 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.

Вопросы с меткой [scene-builder]

Руководство по использованию метки scene-builder отсутствует.

60 вопросов
Конкурсные
Неотвеченные

Конкурсные 0
Неотвеченные
Цитируемые
Рейтинг
Неотвеченные (мои метки)

18 показов

Как сделать полупрозрачный фон в Scene Builder (JavaFX) не затрагивая текст, кнопки и т.д.?

Подскажите, пожалуйста, как сделать полупрозрачный фон в Scene Builder (JavaFX) не затрагивая текст, кнопки и т.д.? Я добавляю AnchorPane, накидываю туда Label, ImageView, GridePane и в эту таблицу .

задан вчера
37 показов

Иконка для приложения в JavaFX

Хочу заменить стандартную иконку в программе, но при запуске выдает ошибки, подскажите, пожалуйста, как исправить. Картинка для иконки 128х128 пикселей, 35.6КБ, расширение .ICO import javafx.

задан 4 янв в 16:19
28 показов

Как сделать, чтобы при выборе значения в одном ComboBox автоматически сбрасывался выбор в других ComboBox?

Подскажите, пожалуйста, как реализовать, чтобы при выборе значения в одном ComboBox происходил сброс значений в других ComboBox? У меня не совсем правильно получается реализовать: при выборе значения .

задан 3 янв в 14:51
36 показов

Канал, книга и т.п. по типовым проектам, программам на JavaFX

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

задан 2 янв в 17:23

Почему не работает ComboBox с условием if-else в JavaFX

Подскажите, пожалуйста, как добавить условие if-else к comboBox в JavaFX. Хочу сделать второй ComboBox зависимым от выбора в первом ComboBox. @FXML private ComboBox Region_Box; @FXML .

задан 2 янв в 16:15
36 показов

Как сделать зависимые ChoiceBox или ComboBox между собой, отображение параметров по умолчанию в JavaFX

Решил сделать пару программок себе, в программировании и в Java я человек новый. Есть у меня две трудности. В JavaFX сделал 4 ChoiceBox(Через SceneBuilder) они представляют из себя выпадающие списки 4-.

задан 31 дек 2023 в 18:02
16 показов

Не могу пробросить данные в FXML форму при ее загрузке JavaFX

Я осваиваю JavaFX и пишу небольшое приложения для рецептов. Столкнулся с проблемой вывода данных в форму при ее инициализации после срабатывания ивента. У меня есть 2 контроллера: OptionsController .

задан 23 дек 2023 в 11:12
27 показов

Калькулятор на JavaFX

Надо написать калькулятор на JavaFX, обрабатывающий все арифметические операции, но в моем коде результаты операций по какой-то причине не отображаются в метке OutputOfCalc. Раньше я использовал метод .

задан 15 дек 2023 в 16:23
14 показов

Как перенести кастомные шрифты в Scene Builder

Как перенести кастомные шрифты, которые я ставлю в Scene Builder, имеющиеся на ПК, но при переходе и запуске в Intellej не работает. При запуске, шрифты не те,, которые в Scene Builder Пробовал css, .

задан 30 окт 2023 в 20:51
16 показов

Как избавиться от выделения фокуса в JavaFX

В SceneBuilder отменила фокус убрав галочку в Focus Traversable. Но когда запускаю программу и нажимаю на TextField, чтобы что-то написать, появляется фокус. Может что-то в стилях написать?

задан 28 окт 2023 в 17:49

Как создать адаптивность для приложения на JavaFX?

Всем доброго утра, дня или вечера. Такая проблема, написано приложение на Java 18 с JavaFx+SceneBuilder. При переходе в FullScreen размер не адаптируется под экран. FXML File:
задан 12 мар 2023 в 8:54
200 показов

Exception in Application start method java.lang.reflect.InvocationTargetException

Создал свой первый javaFX проект. Наткнулся на распространённую ошибку, но не все ее могут решить (я в том числе). Fxml файл делал с помощью JavaFX Scene Builder 18.0.0 package com.example.

задан 9 мая 2022 в 8:48
182 показа

JavaFX. Ввод текста из файла в Combobox

Делаю приложение с возможностью выбора параметров из выпадающего списка. Список хочу вводить через файл «Input.txt». Использую следующий код: private void setComboBox(ComboBox .

задан 17 фев 2022 в 7:18
102 показа

Как сделать путь установки с помощью SceneBuilder и JavaFX

Никак не могу найти как сделать путь установки как на этом изображении(С помощью SceneBuilder и JavaFX):

задан 5 янв 2022 в 19:39
182 показа

Не работают кнопки SceneBuilder в JavaFX

Кнопки нажимаются, но ничего не происходит. И так только в этом окне. package com.example.myapp; import java.io.IOException; import java.net.URL; import java.sql.ResultSet; import java.sql.

задан 5 янв 2022 в 14:00
15 30 50 на странице

Важное на Мете

Связанные метки

Подписаться на ленту

Лента новых вопросов с меткой [scene-builder]

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.