Как установить scene builder в ubuntu

Обновлено: 06.07.2024

Как добавить фоновое изображение к AnchorPane с помощью Scene Builder?

Я пробовал это как:

Как я установил это в Scene Builder.

И сгенерированный FXML:

3 ответа

Вы можете попробовать установить его прямо в Scene Builder как:

Требуется указать схему / протокол.

Но предлагаемый способ - разделить стили CSS в файле CSS. Например, вы можете создать класс стилей CSS в вашем файле CSS (назовем его application.css):

Затем в файле FXML вы добавляете эту таблицу стилей в корень и добавляете класс стиля anchor к AnchorPane :

Примечание. Таблицы стилей должны быть добавлены к корневому узлу (в этом примере AnchorPane является корневым).

Вам нужно создать новый файл CSS и поместить в него код, указанный ниже, вписать свое имя изображения в URL-адрес.

После этого вам нужно выбрать панель привязки, перейти к их свойствам, выбрать таблицу стилей CSS и выбрать класс Stle. После этого ваш фон изменится.

Я нашел полное руководство, подробно объясняющее все моменты. Изменить фон вашего приложения в Scene Builder

Я новичок в JavaFX, но я добавил фоновое изображение в свою AnchorPane без какого-либо программирования. Просто перетащите изображение. Для этого был разработан Scene Builder, не так ли? Думаю, это лучшее, что было после нарезанного хлеба.

1) Я отредактировал фоновое изображение в Photoshop, чтобы получить такой же размер, как у AnchorPane, 800 x 600 пикселей. Я также создал в Photoshop новый пустой файл того же размера. Файл, новый, пустой файл. Затем я скопировал фоновое изображение и вставил его поверх пустого файла, чтобы установить непрозрачность 50% (прозрачность). Мне это нравится, это делает мой фоновый рисунок «мягким».

2) Я скопировал фоновое изображение с непрозрачностью 50% (50% прозрачности) в папку src (исходный код) моего проекта NetBeans. Папка src - это обычная папка проводника Windows.

3) Перетащите фоновое изображение jpg из папки src в Scene Builder как ImageView на значок AnchorPane (узел), который находится в Document, Hierarchy. Левая часть Scene Builder. Если ImageView упадет в другое место, перетащите его туда, где он принадлежит, вы хотите, чтобы он был в AnchorPane, это фон.

4) Выбрав фоновое изображение ImageView (выделено), исправьте настройки на правой панели Scene Builder, Inspector, Layout: ImageView. Установите для параметра Anchor Pane Constraints (элемент паутины) слева и сверху значение 0. И зафиксируйте Size, Fit Width 800, Fit Height 600.

Проще простого. Кодировать не нужно, Scene Builder автоматически напишет код за вас. Также нет необходимости в файле css. Какое удовольствие, ты видишь, что делаешь. Wysiwyg, что ты видишь, то и получаешь.

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

Откройте настройки среды разработки Eclipse и перейдите к пункту Java | Installed JREs.

Нажмите Add…, выберите Standart VM и укажите путь к установленной JDK 8.

Перейдите к пункту Java | Compiler. Установите значение настройки Compiler compliance level в 1.8.

Перейдите к пункту JavaFX и укажите путь к исполняемому файлу приложения Scene Builder.

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

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

- документация по стандартным классам Java; - документация по классам JavaFX; - документация по дополнительным элементам JavaFX из проекта ControlsFX; - официальный учебник по 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).

На вкладке 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, чтобы протестировать созданное окно и его реакцию на изменение размеров.

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

Нам необходимо создать ещё один файл 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:

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

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

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

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

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

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

java.lang.IllegalStateException: Location is not set.

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

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

Что дальше?

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

Пару дней назад, искал решение одной задачи, а задача состояла в том что нужно создать интерфейс на Java, нарисовать кнопку и повесить на нее событие. Если бы это был JavaScript то это пустяк но с Java я почти не знаком. И что делать и кому молиться не известно. Я пошел за советом к всезнающему Гуглу. И тут понеслось, море инфы и не понятно какую использовать. Мой взор упал на JavaFX , а если быть точнее то на JavaFX Scene Builder 2.0. Очень крутая штука, для написания кода я использую Eclipse nano. Естественно все было установлено отдельно но заставить их работать вместе не составит особого труда. И такс вернемся к нашим баранам. Кнопка она же button находиться в Scene Builder, а путь к ней такой: Insert->Controls->Button. Сам не люблю читать когда много воды, но тут не получится написать в двух словах. Начнем все по порядку.

Что бы создать новый проект JavaFX, (на примере будем рассматривать Eclipse nano ) нужно нажать File->New->Other-> JavaFX ->Classes-> JavaFX Main Class. Этот класс будет у нас главным так как в нем мы наследуем класс Application, и плюс ко всему здесь же находится метод start.

После того как создали новый класс Main мы должны импортировать нужные нам библиотеки для работы.

Пример мое кода без библиотек, так как я их написал выше не вижу смысла дважды писать:

public class main extends Application

private Stage primaryStage;

/*Подключаем макет программы*/

public void start(Stage primaryStage) throws Exception

public void show_my_programm()

FXMLLoader loader = new FXMLLoader();

AnchorPane button = (AnchorPane) loader.load();

/*Отображаем сцену макета*/

Scene scene = new Scene(button);

> catch (IOException e)

public static void main(String[] args)

private Stage primaryStage - назначаем поле (свойство).

this.primaryStage.setTitle("Моя программа") - имя окна программы.

show_my_programm() - вызываем метод для работы.

public void show_my_programm() - данный методы нужно писать в try catch иначе будет выводиться ошибка.

FXMLLoader loader = new FXMLLoader() - инициализируем объект класса FXMLLoader для работы с *.fxml(макетами интерфейса).

loader.setLocation(main.class.getResource("button.fxml")) - main это имя нашего главного класса, button.fxml - имя макета, так как макет лежит в одной папке с классами то и путь указан соответственно.

Scene scene = new Scene(button) - инициализируем сцену.

Для взаимодействия с нашим макетом button.fxml нужно создать controller который будет все обрабатывать.

К нашей кнопки мы привяжем метод который будет срабатывать по клику.

Создаем класс Controller с таким содержанием:

public class Controller

public void onClickMethod()

Button button = new Button();

Тут все просто до безобразия так что расписывать не стану.

Теперь приступим к разработке нашего макета на *.fxml

Нажимаем правой кнопкой мыши на нашу папку package New->Other->JavaFX->New FXML Document. Что бы данный документ открывался в Scene Builder , то нужно нажать правой кнопки мышки и выбрать открывать в другой программе и выбрать Scene Builder. И у вас появится данное окно.

Нам нужно добавить в Hierarchy AnchorPane , что бы это сделать, нужно в левом углу Containers выбрать AnchorPane и перетянуть в Hierarchy.

Для AnchorPane нужно задать высоту и ширину. В правом верхнем углу находится Layout, PrefWidth - ширина, PrefHeight - высота. Зададим ширину 600, а высоту 300, и у вас будет что то наподобие.

Что бы добавить кнопку, нужно в левом верхнем углу нажать Controls и выбрать Button, а точнее перетащить ее в AnchorPane .

Кнопку, нужно привязать к методу onClickMethod. Для этого дважды нажмите на кнопку и в правом верхнем углу выберите Code. Где в fx:id укажите имя уникальное кнопки, а в On Action укажите имя метода то есть onClickMethod.

Теперь в нашем макете нужно прописать путь к контроллеру. Для этого нажмите по макету правой кнопкой мышки и выберет открыть в FXML Editor ну или в другом редакторе xml. И вы увидите код нашего макета.

В <AnchorPane нужно прописать fx:controller="Controller" - имя нашего файла(класса) контроллера. Путь указан подобным образом ибо контроллер и макет в одной папке.

Хотя есть и разные версии под разные java, желательно выбрать соответствующую вашей. Например, у нас в компьютерном классе всюду java 8, поэтому лучше скачать 8 версию.

Восьмая версия еще особенно хороша тем что ей не надо админских прав и можно ставить в компьютерных классах

по завершению установки запустится SceneBuilder

но он нам пока не нужен, так что можно его закрыть.

Делаем новый проект типа JavaFX

назову его CustomTypeGUI

получаем такую структуру проекта:

Принцип организации javafx интерфейса

Кликнем дважды на файлик sample.fxml чтобы открыть его и увидим там что-то такое:

fxml – это такой аналог html, только в рамках java, тут даже есть всякие импорты. И есть тэги, определяющие что будет отображаться. Тут к нас пока только один тэг GridPane, которые используется для выравнивания компонент по сетке.

Правда пока выравнивать нечего, так что пока это по сути пустой контейнер.

Особо стоит обратить внимание на атрибут fx:controller в нем указан класс вместе с полным путем, в котором мы будем писать код для интерфейса.

И так, попробуем запустить программу. Увидим что-то такое

Откуда же это все взялось? А на самом деле ничего хитрого нет. Открываем файлик Main.java и видим

Добавляем кнопку

Вернемся к файлу sample.fxml. Теперь запустим SceneBuidler, выбираем Open Project

и открываем наш файлик. Увидим что-то такое

Перетянем теперь кнопку на форму. Так как пока у нас пустой GridPane наша форма выглядит как пустота. Но тянуть можно:

Сохраним перетянутое Ctrl+S и переключимся обратно в Idea. И глянем что у нас выросло с файлике sample.fxml. Там у нас будет такое:

Видим, что тут много чего поменялось. Появились какие-то Constraints (это так называем ограничения на размеры колонок и строк, нам они пока не интересны).

Ну и главное, что тут появился тег children и внутри него наша кнопочка

text – это то что написано на кнопке
mnemonicParsing – это специальный тег для обработки горячих клавиш, но нам это сейчас неинтересно, так что можно игнорировать

Можно попробовать запустить:

ура, есть кнопочка! =)

Добавляем реакцию на нажатие

Но кнопка — это не кнопка если нажимая на нее ничего не происходит. Попробуем добавить реакцию на клик.

Переключимся на файл Controller.java:

Помните я упомянул атрибут fx:controller=”sample.Controller” внутри sample.fxml, так вот мы сейчас в том самом классе на который указывал этот атрибут. За счет него происходит связывание интерфейса и логики (контроллера).

Чтобы добавить реакцию на клик достаточно сделать следующие операции.

Можно даже попробовать запустить. И потыкать кнопку

хехе, очевидно ничего не произойдет. Мы ж пока функцию не привязали =)

А теперь переключимся на SceneBuilder и привяжем кнопку к функции

не забудем сохранить, и запустим проект по-новому

Кстати можно открыть файлик sample.fxml и глянуть что там произошло:

Читаем значение из текстового поля

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

Делается это в некотором роде проще чем привязка кнопки.

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

Что я сделаю? Сначала создам в классе поле, через которое образуется связь

теперь переключимся на SceneBuilder, перетащим текстовое поле на форму, а затем привяжем его к нашему классу, путем указания свойства fx:id:

если вдруг у вас в этом поле ничего не высветилось, то можете смело вписать туда вручную txtInput.

Сохраним в SceneBuilder и вернемся обратно в Idea. Если глянуть в файлик fxml то увидим

теперь вернемся в наш Controller и подправим метод showMessage:

Меняем значения текстового поля

О, давайте еще научимся изменять значение в списке, но тут все просто

В принципе вот и вся наука =)

добавил поле в контроллер
добавил объект в SceneBuilder
связал через fx:id, либо связал с методом.

Теперь можно пилить что-нибудь посложнее.

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

Но, очевидно, полезно рассмотреть, как можно добавлять разные компоненты и заставить их реагировать на ваши данные.

К тому же в JavaFX есть много хитрых особенностей, которые в WindowsForms не встречалось.

И так, попробуем добавить выпадающий список. Действуем по выше предложенному алгоритму. Сперва добавим поле в контроллер:

теперь добавляем на форму

затем подключаем по fx:id

не забываем сохраниться в SceneBuilder.

Запускаем и проверяем:

Ура! Есть список! Правда пустой пока…

Заполняем список (интерфейс Initializable)

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

запускаем и… бдыщь

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

Поэтому добавление элемента в конструкторе не прокатит.

Что ж делать? Оказывается все просто! Надо наследоваться от некого интерфейса Initializable и переопределить одну функцию, которую используется как своего конструктор формы. Делается это так

загоним теперь в метод initialize наш вызов добавления элемента

Добавляем реакцию на переключения списка

Давайте сначала добавим еще несколько элементов

Есть как минимум два способа добавить реакцию на переключения

Через SceneBuilder

не забываем сохраниться.

2) Затем в IDEA тыкаем правой кнопкой мыши на название метода

выбираем первый пункт Show Context Actions, а затем:

3) Нас перекинет в контроллер где мы увидим новодобавленный метод

в принципе, его можно было и руками добавить >_>

Этот метод будет вызываться каждый раз, когда мы будем переключать элемент списка. Давайте чего-нибудь там будем выводить:

Через лямбда-функцию

Ну тут просто в методе инициализации привязываете лямбда-функцию к реакции на изменение свойства.

Я на лекции расскажу что тут происходит на самом деле

Еще может пригодится чекбокс, для вывода всяких булевых значений. Добавим его на форму

добавим в Controller:

теперь подключим checkbox к форме

ну теперь мы можем, например, управлять им кликая на кнопку:

ой, забыли кнопке указать другую функцию

Вот теперь красота! =)

кстати если хотите текст поменять то правьте поле Text:

Одним из важных принципов при разработке приложений, а особенно GUI приложений заключается в том, что состояние формы (значения в полях, размеры и положение) после закрытия приложения и при последующем открытии должно сохранятся.

Как правило для хранения состояния приложения используют простые файлы в каком-нибудь распространённом формате типа *.xml, *.ini, *.json

Выбор моментов фиксации самого состояние остается на совести разработчика, это может быть момент сразу после изменения значений в полях, может быть реакцией на клик какой-нибудь кнопки (в идеале чем чаще, тем лучше), а может быть просто момент закрытия формы.

Подключаем обработчик закрытия формы

Мы будем сохранять в момент закрытия формы.

Вот мы недавно уже мучались с поиском момента создания формы, теперь так же помучаемся с определением момента закрытия формы.

К сожалению, тут простым интерфейсом не отделаешься. Вообще в JavaFX нет как такового понятия формы.

Там есть понятие stage (англ. состояние, сцена как место где происходят события), которое представляет собой окно приложения и scene (англ. тоже сцена, но уже в качестве события) которая, если немного упростить, представляет собой fxml файлик + контроллер.

Ну и ясно что именно к scene привязывается класс Controller. И так как scene за окно формы (то бишь stage) не отвечает, то из него и нельзя получить прямого доступа к событию закрытия окна.

Но можно получить не прямой. Для этого надо поймать событие закрытия формы (то бишь stage) и проксировать его в Controller. Делается это так:

Сначала пойдем в контроллер и создадим функцию которая должна будет вывязываться при закрытии формы. Такую:

теперь идем в Main и делаем магические пассы:

Сохраняем состояние формы в файл

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

Поэтому мы создадим класс который будет хранить состояние формы, а работу по сохранения/чтения его в файл отдадим на откуп встроенному в java XML сериализатору.

И так создаем новый класс

фиксируем в него поля

теперь идем в Controller и в методе закрытия формы прописываем:

а теперь добавляем сериализацию в файл. Тут все просто

теперь проверяем как работает

Так-так, файлик появился. У меня внутри такие строчки:

теперь попробуем добавить чтение из файла. Чтение стало быть делаем в инициализаторе:

Читайте также: