Элементы интерфейса и их расположение

Display List — Список отображения

Все, что можно расположить на окне — называется узлами (Node). Список отображения содержит все узлы, которые есть в окне, т.е. которые надо рисовать, и которые могут взаимодействовать с пользователем. У узлов могут быть подузлы (дети, дочерние узлы). У панели дети — это те узлы, которые на ней лежат, например, кнопки. Получается, что узлы образуют иерархию.

Видов узлов бывает много. Некоторые узлы могут иметь явно заданные размеры, а некоторые узлы не знают свой размер, но могут вычислить его по содержимому. Т.е. ширину и высоту узла можно узнать всегда. Некоторые узлы можно оформлать с помощью CSS, некоторые — нет.

Кнопка — имеет и размер, и может оформляться через CSS. ImageView — узел для отображения картинок, не имеет ничего из этого.

У многих узлов есть возможность указать бордюр, отступы (см. border, padding в CSS).

Типы узлов и похожих объектов

Stage — сцена, окно операционной системы. У него можно настраивать заголовок, конпки открытия, закрытия, можно фиксировать её размер. Scene — сцена, внутренность окна, то место, в котором происходит рисование интерфейса. Она содержит внутри себя ссылку на корневой узел (тот узел, на котором лежат все остальные), и она имеет размер. Он соответствует размеру окна. При создании сцены размер можно указать.

VBox — панелька для того, чтобы располагать на ней другие узлы, причём эти узлы выставляются по вертикали друг за другом. Т.е. эта панель сама располагает элементы внутри себя. HBox — аналогичная, но располагает элементы по горизонтали. Pane — тоже панелька для узлов, но она не управляет положением элементов, и их можно расставлять как угодно. GridPane — панелька, располагает элементы внутри себя в узлах сетки.

Button — кнопка, реагирует на нажатие Label — метка с текстом. Статический текст, не взаимодействует с пользователем TextField — поле ввода текста, одна строка (Введите имя, пароль) TextArea — поле ввода текста, многострочное и с форматированием. List — список элементов ColorPicker — компонент для выбора цвета.

Circle — кружок указанного размера, цвета. Rectangle — прямоугольник

…

Пример 1. Окно с кнопкой. JavaFXExample

Пример 2. Окно с несколькими кнопками по вертикали JavaFXExampleSeveralButtons

Пример 3. Окно с несколькими кнопками по вертикали и несколькими компонентами по горизонтали JavaFXExampleSeveralPanels

При настройке расположения элементов на панели можно 1) настроить саму панель. Например, в VBox: .setSpacing() — пропуски между элементами 2) каждому элементу на панели можно добавить свои настройки о его расположении.