Устанавливаем SceneBuilder
В отличие от Swing где можно править код прямо в среде. Для JavaFX надо установить отдельное приложение, чтобы можно было редактировать интерфейс в режиме WYSIWYG.
Для этого идем сюда https://gluonhq.com/products/scene-builder/#download и скачиваем версию под свою систему.
Хотя есть и разные версии под разные java, желательно выбрать соответствующую вашей. Например, у нас в компьютерном классе всюду java 8, поэтому лучше скачать 8 версию.
Восьмая версия еще особенно хороша тем что ей не надо админских прав и можно ставить в компьютерных классах
по завершению установки запустится SceneBuilder
но он нам пока не нужен, так что можно его закрыть.
Создаем JavaFX приложение
Делаем новый проект типа 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 и внутри него наша кнопочка
Можно попробовать запустить:
Добавляем реакцию на нажатие
Но кнопка — это не кнопка если нажимая на нее ничего не происходит. Попробуем добавить реакцию на клик.
Переключимся на файл Controller.java:
Помните я упомянул атрибут fx:controller=”sample.Controller” внутри sample.fxml, так вот мы сейчас в том самом классе на который указывал этот атрибут. За счет него происходит связывание интерфейса и логики (контроллера).
Чтобы добавить реакцию на клик достаточно сделать следующие операции.
Сначала надо добавить функцию. Такую, например, пусть она просто выводит сообщение в консоль
Можно даже попробовать запустить. И потыкать кнопку
хехе, очевидно ничего не произойдет. Мы ж пока функцию не привязали =)
А теперь переключимся на SceneBuilder и привяжем кнопку к функции
не забудем сохранить, и запустим проект по-новому
Кстати можно открыть файлик sample.fxml и глянуть что там произошло:
видите, появился атрибут onAction=»#showMessage» в котором указана функцию через решетку, которую надо вызвать при клике
Читаем значение из текстового поля
Ну тыкать на кнопочки и выполнять всякие функции — это конечно важное умение. Но не менее важно уметь считать значение из поля, например, текстового.
Делается это в некотором роде проще чем привязка кнопки.
Например, хочу я добавить поле для ввода текста, и чтобы по нажатию на кнопку выводилось содержимое этого поля.
Что я сделаю? Сначала создам в классе поле, через которое образуется связь
теперь переключимся на SceneBuilder, перетащим текстовое поле на форму, а затем привяжем его к нашему классу, путем указания свойства fx:id:
если вдруг у вас в этом поле ничего не высветилось, то можете смело вписать туда вручную txtInput.
Сохраним в SceneBuilder и вернемся обратно в Idea. Если глянуть в файлик fxml то увидим
теперь вернемся в наш Controller и подправим метод showMessage:
Меняем значения текстового поля
О, давайте еще научимся изменять значение в списке, но тут все просто
В принципе вот и вся наука =)
Теперь можно пилить что-нибудь посложнее.
Ремарка
Наверное, не будем рассматривать как делать конкретно приложение под вашу задачку. Все-таки в прошлом году мы уже пилили интерфейсы. И принцип должен быть понятен.
Но, очевидно, полезно рассмотреть, как можно добавлять разные компоненты и заставить их реагировать на ваши данные.
К тому же в JavaFX есть много хитрых особенностей, которые в WindowsForms не встречалось.
Добавление выпадающего списка (ComboBox)
И так, попробуем добавить выпадающий список. Действуем по выше предложенному алгоритму. Сперва добавим поле в контроллер:
теперь добавляем на форму
затем подключаем по fx:id
не забываем сохраниться в SceneBuilder.
Запускаем и проверяем:
Ура! Есть список! Правда пустой пока…
Заполняем список (интерфейс Initializable)
суть стенаний виртуальной машины заключается в том, что comboBox нулевой. А нулевой он потому что привязка полей помеченных декоратором @FXML происходит уже после вызова конструктора, где-то в терньях фреймворка JavaFX.
Поэтому добавление элемента в конструкторе не прокатит.
Что ж делать? Оказывается все просто! Надо наследоваться от некого интерфейса Initializable и переопределить одну функцию, которую используется как своего конструктор формы. Делается это так
загоним теперь в метод initialize наш вызов добавления элемента
Добавляем реакцию на переключения списка
Давайте сначала добавим еще несколько элементов
Есть как минимум два способа добавить реакцию на переключения
Через SceneBuilder
не забываем сохраниться.
2) Затем в IDEA тыкаем правой кнопкой мыши на название метода
выбираем первый пункт Show Context Actions, а затем:
3) Нас перекинет в контроллер где мы увидим новодобавленный метод
в принципе, его можно было и руками добавить >_>
Этот метод будет вызываться каждый раз, когда мы будем переключать элемент списка. Давайте чего-нибудь там будем выводить:
Через лямбда-функцию
Ну тут просто в методе инициализации привязываете лямбда-функцию к реакции на изменение свойства.
Я на лекции расскажу что тут происходит на самом деле
Работа с CheckBox
Еще может пригодится чекбокс, для вывода всяких булевых значений. Добавим его на форму
добавим в Controller:
теперь подключим checkbox к форме
ну теперь мы можем, например, управлять им кликая на кнопку:
ой, забыли кнопке указать другую функцию
Вот теперь красота! =)
кстати если хотите текст поменять то правьте поле Text:
Сохраняем состояние формы
Одним из важных принципов при разработке приложений, а особенно GUI приложений заключается в том, что состояние формы (значения в полях, размеры и положение) после закрытия приложения и при последующем открытии должно сохранятся.
Как правило для хранения состояния приложения используют простые файлы в каком-нибудь распространённом формате типа *.xml, *.ini, *.json
Выбор моментов фиксации самого состояние остается на совести разработчика, это может быть момент сразу после изменения значений в полях, может быть реакцией на клик какой-нибудь кнопки (в идеале чем чаще, тем лучше), а может быть просто момент закрытия формы.
Подключаем обработчик закрытия формы
Мы будем сохранять в момент закрытия формы.
Вот мы недавно уже мучались с поиском момента создания формы, теперь так же помучаемся с определением момента закрытия формы.
К сожалению, тут простым интерфейсом не отделаешься. Вообще в JavaFX нет как такового понятия формы.
Там есть понятие stage (англ. состояние, сцена как место где происходят события), которое представляет собой окно приложения и scene (англ. тоже сцена, но уже в качестве события) которая, если немного упростить, представляет собой fxml файлик + контроллер.
Ну и ясно что именно к scene привязывается класс Controller. И так как scene за окно формы (то бишь stage) не отвечает, то из него и нельзя получить прямого доступа к событию закрытия окна.
Но можно получить не прямой. Для этого надо поймать событие закрытия формы (то бишь stage) и проксировать его в Controller. Делается это так:
Сначала пойдем в контроллер и создадим функцию которая должна будет вывязываться при закрытии формы. Такую:
теперь идем в Main и делаем магические пассы:
Сохраняем состояние формы в файл
И так, хотя данные на форме и так уже имеют привязанные поля, и можно считывать значения сразу с формы и сразу куда-то писать мы так делать не будем. Потому что в этом случае нам самим придется организовывать запись в файл, а затем еще учится парсить результат обратно. В общем, в современной разработке, это такой себе подход. Да и в прошлом семестре мы этого и так наелись.
Поэтому мы создадим класс который будет хранить состояние формы, а работу по сохранения/чтения его в файл отдадим на откуп встроенному в java XML сериализатору.
И так создаем новый класс
фиксируем в него поля
теперь идем в Controller и в методе закрытия формы прописываем:
а теперь добавляем сериализацию в файл. Тут все просто
теперь проверяем как работает
Так-так, файлик появился. У меня внутри такие строчки:
теперь попробуем добавить чтение из файла. Чтение стало быть делаем в инициализаторе:
1 Installing JavaFX Scene Builder
This guide provides information on how to download and install JavaFX Scene Builder 2.0 on a Windows, Linux, or Mac OS X system. Download information for the JavaFX Scene Builder samples is also included.
JavaFX Scene Builder is a design tool that enables you to drag and drop graphical user interface (GUI) components onto a JavaFX scene. It can help you to quickly prototype interactive applications that connect GUI components to the application logic. It automatically generates the FXML source code as you define the GUI layout for your application.
System Requirements
Use the following information to help you get set up and successfully start using JavaFX Scene Builder.
Ensure that your system meets the requirements listed in the JDK Certified System Configurations section of the Java SE Downloads page. JavaFX Scene Builder 2.0 supports the same Java 8, Standard Edition (Java SE 8) platforms that support JavaFX, with the exception of Linux ARM.
Download JDK 8 from http://www.oracle.com/technetwork/java/javase/downloads/index.html and install it to successfully run the JavaFX Scene Builder 2.0 samples.
However, there are also instructions in the JavaFX Scene Builder Getting Started tutorial that guide you to complete the sample application using only a standalone JavaFX Scene Builder tool and the ANT utility. You can also use Using JavaFX Scene Builder with Java IDEs to get information about how to use other Java IDEs to create JavaFX projects and use Scene Builder to work on the FXML file for your application’s GUI layout.
Installation
In the JavaFX Scene Builder 2.0 section, accept the license agreement, if you agree to its terms.
Click the link for your operating system and follow the prompts to save the installer file.
Use the following information to install in your specific platform.
( Windows platform ) Run the
javafx_scenebuilder-2_0-windows.msi installer file. Respond to the prompts as indicated in the installation wizard.
By default, the JavaFX Scene Builder software is installed at
C:\Program Files\Oracle\JavaFX Scene Builder 2.0 on a Windows platform. If you install JavaFX Scene Builder on a 64-bit Windows machine, the default installation location is C:\Program Files (x86)\Oracle\JavaFX Scene Builder 2.0.
( Mac OS X platform ) Open the
javafx_scenebuilder-2_0-macosx-universal.dmg file and drag the JavaFX Scene Builder 2.0.app application into the Applications folder.
For any of the supported platforms, the installed software contains the files similar to or a subset of what is shown in Figure 1-1, which shows the installation layout on a Windows platform.
Figure 1-1 Contents of a JavaFX Scene Builder 2.0 Installation on a Windows Platform
Description of «Figure 1-1 Contents of a JavaFX Scene Builder 2.0 Installation on a Windows Platform»
Getting Started
To get started with Scene Builder, read through the following documentation:
Running the JavaFX Scene Builder Samples
Download the JavaFX Scene Builder samples to see some applications you can build using the Scene Builder tool.
Locate the JavaFX Scene Builder section, click the Samples link, and follow the prompts to save the javafx_scenebuilder_samples-2_0.zip file to your local file system.
Extract the sample files from the zip file to a directory on your local file system.
To run the samples, you must have the JDK 8 software. Since the samples include the corresponding NetBeans projects files, using the NetBeans IDE is the simplest way to run the sample applications. However, you can also run them using the Ant utility, Eclipse, or IntelliJ IDEA. See below for more information.
Using NetBeans IDE
Use NetBeans 8 or later to run the JavaFX Scene Builder 8.0 samples.
Go to the javafx_scenebuilder_samples-2_0-install directory in which you extracted the sample files.
Run a sample by opening the project in the NetBeans IDE, compiling it, and then running it. For example, to run the Login application, open the Login project in NetBeans IDE, right-click the project node in the Projects window, and select Run.
Source code for each sample is in the src folder for each NetBeans project.
Using Eclipse or IntelliJ IDEA
See Using JavaFX Scene Builder with Java IDEs for information on how to run the samples in either the Eclipse or IntelliJ IDEA environment.
Using the Ant Utility
If you choose not to run the samples in NetBeans or any other IDE, you can use the Apache Ant utility (version 1.8 or later) to build and run the sample application on the command line. Enter a command similar to that in Example 1-1. Note that the examples shown use JDK 8.
Example 1-1 Ant Command to Run the Sample Application
Example 1-2 Using Ant to Run the Login Sample
Uninstalling JavaFX Scene Builder
To uninstall JavaFX Scene Builder, use the standard uninstall process for your operating system.
Русские Блоги
[Учебник по JavaFx] Часть 1: Scene Builder
Первая часть темы
Вам нужно подготовить
Конфигурация затмения
Сконфигурируйте JDK и Scene Builder, используемый Eclipse:
Откройте настройки Eclipse и найдитеJava | Installed JREs 。
Нажмите наAdd…ВыберитеStandard VMИ выберите тот, где вы устанавливаете JDK 8Directory 。
Удалите другие JRE или JDK, чтобыJDK 8 становится по умолчанию。 
вJava | CompilerСредняя настройкаУровень соответствия компилятора до 1,8。 
вJavaFXУкажите путь к исполняемому файлу Scene Builder.
Справочная ссылка
Вы можете добавить в закладки следующую ссылку:
Создать новый проект JavaFX
В Eclipse (с установленным e (fx) clipse) нажмитеFile | New | Other…И выберите * JavaFX Project *. Укажите название проекта (например, * AddressApp *) и нажмите * Готово *.
еслиapplicationПакет будет создан автоматически, затем удалите его и его содержимое.
Создать пакет
Model-View-Controller (MVC)Это очень важный принцип проектирования программного обеспечения. В соответствии с моделью MVC, мы можем разделить наше приложение на 3 части, а затем создать свой собственный пакет для каждой части (щелкните правой кнопкой мыши папку с исходным кодом и выберите New | Package):
Создать файл макета FXML
Щелкните правой кнопкой мыши на пакете представления, чтобы создать новый * FXML документ * и назовите его PersonOverview 。
Используйте Scene Builder для разработки вашего интерфейса
Примечание:Вы можете скачать исходный код этой части руководства, которая уже содержит разработанный файл макета.
в PersonOverview.fxml Щелкните правой кнопкой мыши и выберите * Открыть с помощью Scene Builder *, затем вы увидите фиксированную область дизайна интерфейса (слева от всего интерфейса) в открытом Scene Builder.
Выберите эту область дизайна интерфейса, вы можете изменить ее размер в панели настройки свойств справа:
Перетащите один из левой панели управления Scene BuilderSplite Pane(Horizontal Flow)Перейдите в область дизайна интерфейса, выберите вновь добавленную панель в правой структуре представления Builder и выберите во всплывающем меню правой кнопки мыши.Fit to Parent 。
Также перетащите один из левой панели управленияTableViewкSplitPaneСлева, выберите этот TableView (не его столбцы), чтобы установить его макет, вы можетеAnchorPaneОтрегулируйте внешние поля четырех сторон этого TableView. (more information on Layouts).
Нажмите на менюPreview | Show Preview in WindowВы можете просмотреть интерфейс, который вы разработали, попробуйте увеличить интерфейс предварительного просмотра, вы увидите, что TableView будет меняться с увеличением окна.
Измените имена столбцов в TableView, «Имя» и «Фамилия», элементы настройки свойств на правой панели
Выберите этоTableViewВ правой панели измените егоColumn Resize PolicyМодифицировано вconstrained-resize(Также в настройках свойств элементов). Убедитесь, что столбец TableView может заполнить все доступное пространство.
Добавить одинLabelПерейдите в правую часть * SplitePane * и установите для его отображаемого текста значение «Сведения о человеке» (подсказка: найти его можно, выполнив поискLabelЭто контроль). Используйте якоря для настройки макета этого элемента управления.
Добавить ещеGridPaneВ правой части * SplitePane * используйте якоря, чтобы настроить расположение макета этого элемента управления.
Следуйте схеме ниже, чтобы добавить несколько * Lables * в таблицу.
Примечание. Чтобы добавить элемент управления в существующую строку, можно щелкнуть правой кнопкой мыши номер строки в этой строке и выбрать «Добавить строку».
Добавьте 3 кнопки к этомуGridPaneНиже. Совет: выберите эти 3 кнопки и щелкните правой кнопкой мыши * Wrap In | HBox *, затем они будут помещены в HBox. Вам может понадобиться указать HBoxspacingВ то же время вам нужно установить свои правые и нижние якоря.
Тогда дизайн интерфейса был в основном завершен, вы можете передатьPreviewДавайте предварительно просмотрим интерфейс, который вы разработали, и увеличим масштаб окна, чтобы проверить правильность положения каждого элемента управления.
Создать главное приложение
Нам также нужно создать новый файл * FXML * в качестве основного файла макета, который будет содержать строку меню и хранить файл макета, который мы создали ранее. PersonOverview.fxml 。
Создайте новый в пакете представленияFXML Documentназываться RootLayout.fxml На этот раз выберитеBorderPaneКак его корневой узел
Открыть в Scene Builder RootLayout.fxml 。
УстановивPref Width600 и 600Pref HeightУстановите 400, чтобы изменить размер этой * BorderPane *.
Добавьте * MenuBar * вверху, не добавляя никаких функций в это меню.
The JavaFX Main Class
Теперь нам нужно создатьmain java classИспользуется для загрузки RootLayout.fxml Добавить в то же время PersonOverview.fxml Перейдите на * RootLayout.fxml *, этот основной класс будет входом в наше приложение.
Назовите этот класс MainApp Поместите это в пакет контроллера, который построен выше ch.makery.address (Примечание: в этом пакете есть два подпакета, которые view и model )。
Возможно, вы заметили, что сгенерированная среда разработки MainApp.java Наследуется от Application Есть два метода одновременно. Это самая основная структура кода приложения JavaFX. Самый важный метод здесь start(Stage primaryStage) Он пройдет внутри, пока приложение работает main Метод вызывается автоматически.
Как видите, это start(. ) Метод получит Stage Введите параметры, на следующем рисунке показана базовая структура приложения JavaFX.
Image Source: http://www.oracle.com
Все выглядит как спектакль в театре: Здесь Stage Это основной контейнер, который мы обычно называем окном (со сторонами, высотой и шириной и кнопкой закрытия). В этом Stage Внутри вы можете разместить один Scene Конечно, вы можете переключиться на что-то другое Scene И в этом Scene Внутри мы можем разместить различные элементы управления.
Для более подробной информации, вы можете обратиться кWorking with the JavaFX Scene Graph.
Комментарии в коде помогут вам понять смысл кода.
Если вы запустите эту программу сейчас, вы увидите интерфейс, подобный изображенному в начале этой статьи.
Проблемы, с которыми вы можете столкнуться
Если ваша заявка не может найти ту, которую вы указали fxml Файл макета, после чего система выдаст следующую ошибку:
java.lang.IllegalStateException: Location is not set.
Вы можете проверить свои fxml Является ли имя файла с ошибкой
