Javafx parent что это
Для установки корневого узла в Scene применяется один из конструкторов объекта Scene. Основные из них:
Scene(Parent root) : создает Scene с корневым узлом root
Scene(Parent root, double width, double height) : создает Scene с корневым узлом root, с шириной width и высотой height
Scene(Parent root, Paint fill) : создает Scene с корневым узлом root и устанавливает фоновый цвет
Scene(Parent root, double width, double height, Paint fill) : создает Scene с корневым узлом root, с шириной width и высотой height и устанавливает фоновый цвет
При этом все конструкторы принимают в качестве первого параметра корневой узел. То есть при создании объекта Scene нам та или иначе придется установить и корневой узел.
Немного изменим код программы:
Здесь в качестве корневого узла выступает класс FlowPane, который располагает вложенные элементы подряд и который, как и Group, унаследован от класса Parent. FlowPane содержит объект Label (текстовая метка) и объект Group. А объект Group, в свою очередь, содержит объект Button (кнопка).
Визуально это будет выглядеть следующим образом:
А сам Scene Graph в данном случае будет представлять следующую структуру:
Настройка фонового цвета окна
С помощью Scene мы можем настроить фоновый цвет и размеры окна. Для этого мы можем использовать один из конструкторов:
Javafx parent что это
Все графические элементы, которые используются в объекте Scene и добавляются в Scene Graph, должны представлять класс javafx.scene.Node или иначе узел. Все встроенные классы визуальных графических элементов или узлы, например, кнопки, текстовые поля и другие, наследуется от класса Node.
При этом одни узлы Node могут содержать несколько других узлов Node. Например, класс Parent наследуется от Node, но при этом сам может содержать другие узлы Node.
Базовую иерархию классов можно представить следующим образом:
Вкратце рассмотрим эту иерархию. Основные классы, которые наследуются от класса Node:
javafx.scene.shape.Shape : является базовым классом для создания геометрических двухмерных примтивов (например, линия, прямоугольник, эллипс)
javafx.scene.shape.Shape3D : является базовым классом для создания трехмерных объектов
javafx.scene.canvas.Canvas : представляет полотно для отрисовки различного содержимого
javafx.scene.Camera : базовый класс камеры, котоый применяется для рендеринга сцены
javafx.scene.LightBase : предоставляет базовый функционал для классов, которые будут представлять источники света
javafx.scene.image.ImageView : элемент для отображения изображений
javafx.scene.media.MediaView : элемент для работы с мультимедиа
javafx.embed.swing.SwingNode : элемент для встраивания содержимого Swing в JavaFX
javafx.scene.SubScene : элемент для части сцены в JavaFX, позвляет разбить сцену на подсцены
javafx.scene.Parent : базовый класс для всех элементов, которые могут содержать другие элементы
Класс Parent
javafx.scene.web.WebView : элемент, который позволяет отображать веб-содержимое.
javafx.scene.Group : представляет контейнер для группы объектов
javafx.scene.layout.Region : базовый класс для всех элементов управления, панелей компоновки и диаграмм. Его отличительная особенность состоит в том, что он добавляет функциональность управления границами и размерами элементов.
Класс Region
Класс Region определяет свойства и методы для управления и получения ширины, высоты элемента, для управления его отступами, границами, позициониованием. Некоторые из его основных методов:
getHeight() : возвращает высоту элемента
setHeight(double height) : устанавливает высоту элемента
getWidth() : возвращает ширину элемента
setWidth(double height) : устанавливает ширину элемента
getBackground() : возвращает фон элемента в виде объекта Background
setBackground(Background value) : устанавливает фон элемента
getBorder() : возвращает границу элемента в виде объекта Border
setBorder(Border value) : устанавливает границу элемента
getPadding() : возвращает отступы элемента в виде объекта Insets
setPadding(Insets value) : задает отступы элемента
Соответственно все классы-наследники смогут использовать эти методы.
От него происходят три больших группы узлов:
Устанавливаем 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 и в методе закрытия формы прописываем:
а теперь добавляем сериализацию в файл. Тут все просто
теперь проверяем как работает
Так-так, файлик появился. У меня внутри такие строчки:
теперь попробуем добавить чтение из файла. Чтение стало быть делаем в инициализаторе:
Введение в JavaFx и работа с layout в примерах
Доброго времени суток. В этой статье я расскажу основы работы с классами пакета javafx.scene.layout.* (BorderPane, AnchorPane, StackPane, GridPane, FlowPane, TilePane, HBox, VBox) и их особенностями в пошаговых примера и иллюстрациях. Также в кратце пробежимся по иерархии классов JavaFx.
После установки Eclipse и плагина e(fx)lipse создадим новый проект:
Выбираем JavaFx проект:
По дефолту Eclipse создаст такую заготовку:
На сцену добавляется корневой узел, им должен быть класс унаследованный от Parent (узел, который может иметь детей) корневой узел добавляется на сцену (специальный контейнер для всего контента графа узлов), а она в свою очередь на стейжд, который и показывается.
Давайте разберемся с иерархией классов JavaFx:
Самым базовым абстрактным классом является Node — узел в графе сцены, наследникам предоставляются поля для настройки размеров: (minWidth — минимальная ширина, minHeight — минимальная высота, prefWidth — предпочтительная ширина, prefHeight — предпочтительная высота, maxWidth — максимальная ширина, maxHeight — максимальная высота).
Координаты узла: getLayoutX() и getLayoutY()
relocate(double x, double y) — изменяет координаты узла, если необходимо настроить положение каждой координаты по отдельности, используйте setLayoutX(double value) и setLayoutY(double value)
Важно понимать, что выставленные координаты и размеры (pref то есть prefer — предпочтительно) при компоновке, в зависимости от иерархии графа узлов и их настроек могу отличаться от ожидаемых. Примеры приведу чуть позже.
Node не может содержать дочерних элементов это и логично, для этого существует Parent прямой наследник Node, в который можно добавлять и удалять дочерние узлы. Кстати, говоря, есть классы которые представляю узлы, но не содержат дочерние узлы: Camera, Canvas, ImageView, LightBase, MediaView, Parent, Shape, Shape3D, SubScene, SwingNode.
Нас сегодня интересует подгруппа наследников класса Region (базовый класс всех лайуат контейнеров) в частности поговорим о основных потомках класса Pane о панелях, которые чаще всего требуются в повседневной разработке.
BorderPane
Это специальная панель которая располагает свою дочерние узлы верхней(setTop(Node)), нижней(setBottom(Note)), левой(setLeft(Node)), правой(setRight(Node)) и центральной(setCenter(Node)) позициях, добавим несколько кнопок во все эти позиции на BotderPane:
У секции top и bottom приоритет, поэтому они сужаю по высоте все остальные:
При попытке задать координаты к примеру у верхней кнопки:
Кнопка не изменит своего положения, почему так происходит? При компоновке детей в методе layoutChildren класса BorderPane переопределяется позиция каждого узла с учетом всех настроек. Решений исправить есть несколько, например поместить (обернуть) кнопку в дополнительный подходящий контейнер, например в базовую для всех панелей
Потому как Pane никак не переопределяет положение своих детей, мы получаем нужное смещение:
Можно не оборачивать кнопку, а просто выставить у нее внешний отступ c помощью статического метода setMargin(Node child, Insets value):
Insets — вспомогательный класс для настройки отступов, конструктор у него перегружен, может принимать один аргумент для все сторон, так и для каждой стороны в отдельности, пока мы настроили для все сторон один отступ, вот что мы получили:
Уберем отступы снизу и справа и получим желаемое смещение кнопки:
StackPane
Теперь давайте рассмотрим ситуацию в которой панель навязывает детям не только позицию, но и пытается их растянуть по всей ширине и высоте, заполнив всю область контента, заменим BorderPane и добавим туда сначала TextArea и Button.
Кстати, для добавления нескольких узлов в нужном порядке можно использовать метод:
Что мы видим, текстовое поле растянулись по нашей панели, а кнопка центрировалась:
Центрирование можно корректироваться с помощью setAlignment(Pos)
Сделать внутренний отступ с помощью setPadding(Insets)
Можно сделать индивидуальную настройку центрирования и отступов каждого узла с помощью статических методов:
AnchorPane
Якорная панель позволяет края дочерних узлов привязывать смещениями к краям панели, рассмотрим пример:
Добавим кнопку и привяжем ее к правому краю:
AnchorPane root = new AnchorPane();
Button button = new Button(«Button in AnchorPane»);
root.getChildren().add(button);
AnchorPane.setRightAnchor(button, 10.0);
Добавим привязку к нижнему краю:
Теперь в левому краю и верхнему:
Получаем что края кнопки теперь жестко привязаны к краям панели, если начать тянуть окно, кнопка будет также тянуться.
GridPane
Рассмотрим очень полезную сеточную панель, добавление детей в эту панель необходимо делать через метод add(Node child, int columnIndex, int rowIndex) в котором первый параметр добавляемый узле, второй номер колонки, третий номер строки, вот простой пример:
Мы видим, что узлы можно добавлять в любую ячейку, пустые столбцы и строки создаются автоматически:
Для работы с колонками, есть специальный класс ColumnConstraints, для этого надо создать колонки, настроить их и добавить их в GridPane, в примеру если мы хотим выставить ширины первой колонки 130, а второй 20%:
Это самые базовые возможности, потребуется написать отдельную статья, для охвата всех тонкостей настройки GridPane.
FlowPane
Давайте сразу к примеру из него сразу станет все понятно, добавим шесть кнопок в FlowPane:
Посмотрим результат, кнопка выводятся одна за другой (по дефолту у FlowPane горизонтальный вывод Orientation.HORIZONTAL)
Теперь при уменьшении окна по ширине, мы видим что дочерние узлы начинают переносится:
И соответственно если выставить вертикальную ориентацию
При при уменьшении высоты окна получаем перенос:
Вертикальные и горизонтальные отступы между элементами можно настроиться с помощью:
TilePane
Работа этой панели схожа с работой FlowPane, отличие в том что дочерние узлы помещаются в сетку ячейки которой одинакового размера, приведем предыдущий пример, но в этот раз пусть одна кнопка будет больших размеров, чем остальные:
Как мы видим все узлы теперь находятся в «тайла» одинаковых размеров, растянутых по наибольшему узлу.
HBox и VBox
Это обычные горизонтальный и вертикальный списки, комбинируйте их, чтобы добиться нужного результата:
Это все наследники класса Pane, спасибо за внимание.
