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

9

Программирование JavaFX: использование SceneBuilder

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

Несмотря на то что интерфейсы возможно создавать только в коде, и в прошлый раз мы ознакомились с целым семейством классов, которые позволяют это делать, вряд ли кто-то будет спорить с тем фактом, что графическое создание по принципу Drag&Drop является более удобным и быстрым. К тому же (со временем) я всё чаще прихожу к пониманию того, что глубокое знание того, что происходит под капотом тех или иных технологий, должно дополняться ещё и средствами ускорения разработки. Так как время — это наше всё. Итак.

Установка SceneBuilder

Для начала вам необходимо пройти по ссылке и скачать SceneBuilder.

После установки и запуска у вас появится вот такое окно, в котором вы для примера, можете щёлкнуть на вкладку Empty, что приведёт к созданию пустого приложения без какого-либо содержимого:

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

Например, давайте перетащим из левой части контейнер Pane и поместим в него кнопку Button. При нажатии на эту кнопку мы видим, что в правой части экрана, появилось большое количество свойств этой кнопки, которые могут быть настроены:

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

Именно это и является целью визуального средства разработки SceneBuilder: удобное и быстрое генерирование кода визуального интерфейса.

Однако мы ведь работаем не только над интерфейсом — он должен быть связан с выполняющимся кодом. Воспользуемся для этого средой разработки IntelljIDEA.

Для начала вам необходимо перейти в раздел настроек, нажав сочетание кнопок Ctrl+Alt+S.

Переходим в раздел Plugins-Marketplace и устанавливаем себе плагин JavaFX:

Альтернативой этому методу является скачивание jdk и указывание, где он лежит (для среды разработки).

Для этого мы также идём в настройки, в раздел Path Variables. Там жмём на плюсик и показываем, где у нас лежит скачанная jdk, а заодно придумываем название для этого пути:

Указываем вплоть до папки lib:

Далее мы идём в раздел Run — Edit Configuration и в строке VM options — вписываем следующее (у меня здесь будет моё название, вы же можете назвать путь до библиотеки по-своему, только оно должно совпадать с тем названием пути, который мы уже сконфигурировали ранее):

Это глобальные настройки, которые будут применяться ко всем новым создаваемым проектам (таким образом, мы просто упростили себе жизнь, если бы мы этого не сделали, нам пришлось бы вводить эти настройки каждый раз заново, в разделе File-Project Structure).

Далее нам необходимо показать среде разработки, где у нас лежит установленная программа SceneBuilder (путь до exe-шника).

Для этого опять жмём Ctrl+ Alt + S, идём в раздел Languages&Frameworks — JavaFX и показываем полный путь до программы:

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

Первое приложение

Теперь, когда у нас всё готово, мы можем попробовать создать своё первое приложение с использованием этого средства разработки GUI.

Для этого мы проходим по пути: File-New-Project и выбираем JavaFX Application:

Далее мы вписываем имя проекта и нажимаем Finish:

Как мы видим в структуре проекта, у нас создаётся три файла, один из которых является запускающим и объединяющим всё (класс Main), второй — выполняющим некие действия (класс Controller), и последний — файл визуальной части, в формате разметки FXML (sample.fxml):

Теперь, если мы кликнем на файл sample.fxml, то увидим, что он, как и положено, открылся в правой части окна. В нижней части окна мы увидим два интересных переключателя: Text и SceneBuilder:

Соответственно, если мы кликнем на SceneBuilder, то произойдёт следующее: наш файл sample.fxml будет открыт в правой части прямо внутри SceneBuilder. Таким образом после всех наших манипуляций — эта программа будет встроена прямо в среду разработки:

Таким образом, мы можем вносить изменения в интерфейс прямо внутри среды разработки!

Правда есть один минус, который заключается в том, что многие из менюшек этой программы мы видеть не будем. Однако всё это легко поправить! Кликаем правой кнопкой мыши по названию файла и выбираем Open In SceneBuilder:

После чего этот файл откроется в абсолютно новом окне, а именно в натуральном интерфейсе SceneBuilder:

Мы можем абсолютно спокойно набросать интерфейс в этой программе, после чего нажать на Ctrl+S (то есть просто сохранить файл) и закрыть интерфейс программы, все необходимые изменения сохранятся и останутся в файле, который отображается в IntellijIDEA.

Итак, создадим простое приложение. Для этого откроем файл sample.fxml в SceneBuilder, перетащим из левой панели в середину, в контейнер Pane, поместим прямо на него кнопку Button и сразу поменяем надпись на кнопке, используя правую панель свойств кнопки:

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

Для этого мы переходим в меню Code: Button и вписываем идентификатор в поле fx:id, а реакцию на нажатие кнопки в поле On Action:

Сохраним получившийся файл и закроем SceneBuilder. Теперь, если мы посмотрим на файл sample.fxml в режиме текста в ItellijIDEA, то мы увидим, что все наши изменения отразились в коде:

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

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

После внесённых изменений код контроллера будет выглядеть следующим образом:

Теперь перейдём в главный класс Main, код которого выглядит следующим образом:

и запустим наш тестовый пример. Всё работает:

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

Ну вот и всё! Теперь ваше средство визуальной разработки SceneBuilder и среда разработки программ IntellijIDEA представляют собой единое целое, что в процессе работы позволяет легко переключаться с одного на другое.

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

Уберите другие добавленные JDK и 8-я JDK будет использоваться по умолчанию.

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

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

— документация по стандартным классам Java; — документация по классам JavaFX; — документация по дополнительным элементам JavaFX из проекта ControlsFX; — официальный учебник по JavaFX от Oracle.

Создание нового проекта JavaFX

• ch.makery.address — содержит большинство классов-контроллеров (Controller) (= классов бизнес логики);
• ch.makery.address.model — содержит классы Моделей (Model);
• ch.makery.address.view — содержит Представления (View).

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

На вкладке Hierarchy выберите компонент AnchorPane, и справа, на вкладке Layout установите значение характеристикам Pref Width и Pref Height — 600 и 300 соответственно.

На вкладке Hierarchy в компонент AnchorPane добавьте новый компонент SplitPane (horizontal). Кликните по нему правой кнопкой мыши и выберите Fit to Parent.

Теперь, в левую часть компонента SplitPane со вкладки Controls перетащите компонент TableView. Выделите его целиком (а не отдельный столбец) и проставьте отступы от краёв так, как показано на рисунке. Внутри компонента AnchorPane всегда можно проставить отступы от четырёх границ рамки (дополнительная информация о разметках).

В таблице измените заголовки колонок (вкладка 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”.

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

В пакете view создайте другой fxml-документ, и назовите его RootLayout.fxml . На этот раз в качестве корневого элемента выберите BorderPane.

Установите предпочитаемое значение ширины и высоты компонента: 600 и 400 соответственно.

В верхний слот компонента BorderPane добавьте компонент MenuBar. Функциональность меню мы будем реализовывать в последующих уроках.

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

Кликните правой кнопкой мыши по нашему проекту, перейдите к пункту New | Other… и выберите JavaFX Main Class.

Назовите класс MainApp и поместите его в пакет ch.makery.address (примечание: это пакет является родительским для view и model ).

Источник изображения: http://www.oracle.com/

Русские Блоги

Сконфигурируйте 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. — ControlsFX projectДокументы для дополнительных элементов управления JavaFX. -Oracle официальный учебник JavaFX.

Все готово, начнем!

Создать новый проект JavaFX

В Eclipse (с установленным e (fx) clipse) нажмитеFile | New | Other…И выберите * JavaFX Project *. Укажите название проекта (например, * AddressApp *) и нажмите * Готово *.

еслиapplicationПакет будет создан автоматически, затем удалите его и его содержимое.

Создать пакет

Model-View-Controller (MVC)Это очень важный принцип проектирования программного обеспечения. В соответствии с моделью MVC, мы можем разделить наше приложение на 3 части, а затем создать свой собственный пакет для каждой части (щелкните правой кнопкой мыши папку с исходным кодом и выберите New | Package):

• ch.makery.address -Разместить все классы контроллеров (то есть бизнес-логику приложения)
• ch.makery.address.model -Установите все классы моделей
• ch.makery.address.view -Установите все интерфейсы и классы управления

Примечание:Пакет представления может содержать некоторые классы контроллера, на которые может напрямую ссылаться одно представление, мы называем этоView — Controller。

Создать файл макета FXML

Существует два способа создания пользовательского интерфейса: один определяется с помощью файла XML, а другой — непосредственно с помощью Java-кода. Оба метода можно найти в Интернете. Мы будем использовать XML Создать большую часть интерфейса. Потому что этот способ лучше разделит вашу бизнес-логику и интерфейс, чтобы сделать код простым. В следующем материале мы представим использование Scene Builder (что вы видите, это то, что вы получаете) для редактирования нашего файла макета XML, что может помешать нам напрямую изменить файл XML.

Щелкните правой кнопкой мыши на пакете представления, чтобы создать новый * 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 *, этот основной класс будет входом в наше приложение.

Щелкните правой кнопкой мыши по проекту и выберите * New | Other . *, затем выберите * JavaFX Main Class *.

Назовите этот класс 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.

открытый MainApp.java , Замените существующий код следующим кодом:

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

Если вы запустите эту программу сейчас, вы увидите интерфейс, подобный изображенному в начале этой статьи.

Проблемы, с которыми вы можете столкнуться

Если ваша заявка не может найти ту, которую вы указали fxml Файл макета, после чего система выдаст следующую ошибку:

java.lang.IllegalStateException: Location is not set.

Вы можете проверить свои fxml Является ли имя файла с ошибкой

Добро пожаловать обратить внимание на публичный номер:

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

• Главная
• Разное
• Java
• JavaFX
• JavaFX Scene Builder: Руководство пользователя
• 04 Использование команд строки меню

04 Использование команд строки меню

• Java
• JavaFX
• FXML
• Scene Builder

В этой главе описываются команды, доступные в строке главного меню Scene Builder.

Строка меню отображает меню команд, которые можно выполнять с файлом макета FXML. В следующих разделах описан список подкоманд, доступных при выборе команды в строке меню. В Табл. 4-1 описаны подкоманды для команды File.

Сочетание клавиш, показанное в таблицах ниже, относится к платформе Windows. Замените клавишу Ctrl на клавишу Cmd, чтобы использовать эквивалентную комбинацию клавиш для платформы Mac OS X.

Table 4-1 List of File Subcommands

Создайте новый файл FXML и откройте его в отдельном окне Scene Builder.

New from Template

Создайте новый макет FXML, используя один из доступных шаблонов: диалоговое окно предупреждения, базовое приложение, сложное приложение, диалоговое окно предупреждения — CSS, диалоговое окно предупреждения — локализованное, базовое приложение — CSS, базовое приложение — локализованное, сложное приложение — CSS и сложное приложение — Локализованные макеты.

В диалоговом окне «Open FXML» выберите существующий файл FXML для открытия.

Выберите файл для открытия из списка недавно открытых файлов FXML.

Сохраните изменения, сделанные с момента выполнения последнего действия «Save». Если это новый документ FXML, вам будет предложено ввести новое имя файла. Если это существующий файл FXML, текущее имя файла сохраняется.

Save As (Ctrl+Shift+S)

Сохраните текущий файл FXML, над которым вы работаете, с возможностью сохранения изменений в другом файле.

Revert to Saved

Отменить изменения, внесенные с момента выполнения последнего действия «Сохранить».

Reveal in Explorer (Windows),
Reveal on Desktop (Linux),
Reveal in Finder (Mac OS X)

Откройте системный файловый браузер, который отображает папку, содержащую текущий файл FXML, и дает вам возможность открыть файл.

Импортируйте существующее изображение, FXML или медиафайл.

Команда Import> FXML вставляет содержимое импортированного файла в текущий файл FXML, над которым вы работаете.

Изображение или мультимедийный файл следует импортировать в Scene Builder из каталога источников вашего проекта. Если изображение или файл мультимедиа, который вы импортируете, находится где-то в другом месте, кроме каталога источников вашего проекта, вам необходимо переместить или скопировать файл. Scene Builder не копирует за вас импортированное изображение или медиафайл. Он создает ссылку на импортированный файл мультимедиа или изображения, используя путь относительно местоположения файла FXML, над которым в настоящее время работает. Следовательно, если относительное расположение импортированного изображения или файла мультимедиа во время выполнения отличается, ваш файл FXML может не загружаться должным образом. Вам необходимо убедиться, что все импортированные файлы правильно упакованы в вашей среде IDE и что их относительное расположение во время выполнения и времени редактирования совпадает.

Самый простой способ добиться этого — импортировать только изображения или мультимедийные файлы, которые уже находятся в каталоге источников вашего проекта, и указать вашей среде IDE включить эти файлы в упаковку, что обычно выполняется по умолчанию.

Вставьте FXML, отредактируйте включенный файл или откройте включенный файл.

Команда Insert FXML вставляет конструкцию fx:include в ваш документ FXML.

Команда «Edit the Included File» (Редактировать включенный файл) позволяет редактировать любой импортированный или включенный файл FXML, на который ссылается оператор fx: include, определенный для выбранного элемента. Когда вы редактируете включенный файл FXML, открывается новое окно JavaFX Scene Builder. Изменения, которые вы сохраняете во включенном файле FXML, отражаются в файле макета FXML, из которого вы открыли включенный файл FXML.

Команда «Reveal Included File» (Показать включенный файл) открывает системный файловый браузер, чтобы показать папку, содержащую включенный файл.

Close Window (Ctrl+W)

Закройте текущее окно. Если у вас есть несохраненные изменения, вам будет предложено сохранить файл перед закрытием окна. Все остальные активные окна остаются открытыми до тех пор, пока они не будут закрыты или пока вы не выйдете из инструмента.

Задайте предпочтительные значения, которые будут использоваться для определенных свойств в инструменте. Вы можете изменить значения по умолчанию для ширины и высоты корневого контейнера, изображения, используемого для фона инструмента, цветов, используемых для направляющих выравнивания и выпадающих / родительских колец, темы для использования для инструмента Scene Builder, отображения по умолчанию режим, используемый для панелей «Hierarchy» и «Library», порядок, в котором отображаются столбцы анализатора CSS, и количество файлов, которые нужно указать в команде «Open»(Открыть)> «Recent Items»(Последние элементы). Вы можете сбросить настройки до значений по умолчанию, нажав «Reset to Built-in Default Values»(Сбросить до встроенных значений по умолчанию).

Закройте инструмент. Все открытые окна Scene Builder закрываются. Вам будет предложено сохранить все несохраненные изменения.

При выборе меню команды «Edit»(Редактировать) отображаются подкоманды, позволяющие выбрать команду «Undo»(Отменить) или «Redo»(Вернуть) для последнего действия, выполненного в текущем макете FXML. Кроме того, вы можете выбрать команды «Cut»(Вырезать), «Copy»(Копировать), «Paste»,(Вставить) «Paste Into»(Вставить в), «Duplicate»(Дублировать) и «Delete»(Удалить), которые можно применить к выбранным элементам на панели «Content»(Содержимое) или «Hierarchy»(Иерархия). Команды «Вырезать», «Копировать» и «Вставить» используют собственный редактор и буфер обмена, если не выбран элемент текстового поля. Это означает, что когда вы копируете или вырезаете элемент и вставляете его в текстовый редактор, на самом деле копируется и вставляется код FXML, который определяет элемент Group, который обертывает выбранный элемент и все его дочерние элементы. Если фокус находится на элементе текстового поля, то команды выбора, копирования и вставки выполняются из элемента текстового поля и в него. С помощью команды «Вставить в» вам нужно сначала выбрать, куда вы хотите вставить элемент, прежде чем выбирать команду «Вставить в».

Выберите команду «Select All»(Выбрать все), чтобы выбрать все элементы в макете FXML, в то время как команда «Select None»(Отменить выбор) снимает выделение с любых выбранных элементов. Команда «Select Parent» (Выбрать родителя) выбирает родительский контейнер для выбранного элемента. Команды «Select Next»(Выбрать следующий) и «Select Previous»(Выбрать предыдущий) позволяют выбрать следующий и предыдущий элемент в иерархии соответственно.

Выберите команду «Trim Document to Selection»(Обрезать документ до выделения), чтобы удалить все элементы до выбранной строки на панели «Иерархия». Когда вы выбираете команду «Обрезать документ до выделения» и выбранный элемент является элементом контейнера, этот выбранный элемент контейнера становится новым контейнером корневого узла вашего документа FXML.

В Табл. 4-2Table 4-2 описаны подкоманды, доступные при выборе команды «View»(Просмотр) в строке меню.

Table 4-2 List of View Subcommands

Установить фокус на панель «Content»(Содержимое).

Открыть раздел «Properties»(Свойства) на панели «Inspector»(Инспектор) и навести на него текущий фокус.

Открыть раздел «Layout»(Макет) на панели «Inspector»(Инспектор) и навести на него фокус.

Открыть раздел «Code»(Код) на панели «Inspector»(Инспектор) и навести на него фокус.

Hide/Show Library (Ctrl+4)

Скрыть или показать панель «Library»(Библиотека) в левой части текущего окна. Если панель «Document»(Документ) все еще видна, она автоматически настраивается, чтобы занять всю левую часть окна. Если панель «Документ» не отображается, панель «Content»(Содержимое) регулируется, чтобы занять оставшуюся часть левой стороны окна.

Hide/Show Document (Ctrl+5)

Скрыть или показать панель «Document»(Документ) . Если панель «Библиотека» все еще видна, она автоматически настраивается, чтобы занимать всю левую часть окна. Если панель «Библиотека» не отображается, панель «Содержимое» автоматически настраивается, чтобы занимать оставшуюся часть левой части окна.

Show/Hide CSS Analyzer
(Ctrl+6)

Показать или скрыть панель «CSS Analyzer»(CSS анализатор). Панель появится в нижней части окна.

Hide/Show Left Panel (Ctrl+7)

Скрыть или показать панели в левой части окна. Панели «Библиотека» и «Документ» отображаются с помощью команды «Показать левую» независимо от того, была ли панель «Документ» или «Библиотека» единственной активной левой панелью при последнем выполнении команды «Скрыть левую панель».

Hide/Show Right Panel (Ctrl+8)

Скрыть или отобразить панель инспектора в правой части окна.

Show/Hide Outlines (Ctrl+E)

Отобразить или скрыть контур каждого элемента во всем макете, как показано на рисунке 4-1. На схеме показано свойство LayoutBounds каждого элемента. См. Документацию API для получения дополнительной информации о свойстве LayoutBounds класса Node в пакете javafx.scene .

Show/Hide Sample Data

Показать или скрыть демонстрационные данные для тех элементов, таких как древовидное представление (tree view), с которыми связаны некоторые образцы данных. Образцы данных не сохраняются в вашем файле макета FXML.

Disable/Enable Alignment Guides

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

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

Show Sample Controller Skeleton

Открыть окно, в котором отображается образец кода скелета, который можно использовать для создания класса контроллера для создаваемого макета FXML.

Рисунок 4-1 Показать контуры

Выберите команду «Insert»(Вставить) в строке меню, чтобы вы могли выбрать элементы графического интерфейса, такие как контейнеры (containers), элементы управления (controls), содержимое меню (menu content), фигуры (shapes), диаграммы (charts), пользовательские компоненты (custom components), 3D и прочие элементы, которые можно добавить в текущий макет FXML. Это те же элементы графического интерфейса, которые доступны на панели «Библиотека». Если ни один из существующих элементов графического интерфейса пользователя в макете не выбран, точкой вставки нового элемента является центр панели содержимого. Если один из элементов выбран до выбора команды «Вставить», новый добавляемый элемент размещается немного сбоку, но поверх выбранного элемента. Подменю «Вставить» отображает только допустимые элементы управления графическим интерфейсом пользователя, которые можно вставить в выбранный элемент или контейнер.

Подкоманды, отображаемые при выборе «Modify»(Изменить) в строке меню, описаны в Табл. 4-3.

Таблица 4-3 Список подкоманд Modify

Fit to Parent (Ctrl+K)

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

Use Computed Sizes (Ctrl+Shift+K)

Сбросить значения свойств макета выбранного элемента до значений по умолчанию. Значение USE_COMPUTED_SIZE используется для свойств макета «Min Width»(Минимальная ширина), «Min Height»(Минимальная высота), «Pref Width»(Предварительная ширина), «Pref Height»(Предварительная высота), «Max Width»(Максимальная ширина) или «Max Height»(Максимальная высота). (Дополнительную информацию см. В документации по API для класса Region в пакете javafx.scene.layout .)

Отобразить все подкоманды, доступные для работы с выбранным компонентом Grid Pane в вашем макете. Вы можете удалять, перемещать, добавлять или изменять размер строк или столбцов в выбранной области сетки.

Применить эффекты, такие как тень или отражение, к выбранному элементу или группе элементов в макете. Редактор эффектов позволяет вам установить цепочку эффектов для объекта.

Add Popup Control

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

Установить размер экрана, выбрав из списка предопределенных размеров.

Используйте меню «Arrange»(Упорядочить), показанное на рис. 4-2, чтобы переместить выбранный элемент на передний план, отправить его назад или переместить вперед или назад. При выборе субкоманды «Wrap In»(Обернуть в) выбранные элементы помещаются в один из доступных контейнеров, например в Anchor Pane, HBox или Grid Pane. Команда «Unwrap» (Снять обертку) удаляет текущий выбранный контейнер, но оставляет элементы графического интерфейса, которые он содержит, нетронутыми.

Рисунок 4-2 Строка меню с открытым меню упорядочивания

Подкоманды, отображаемые при выборе команды «Preview»(Предварительный просмотр) в строке меню, описаны в Табл. 4-4.

Таблица 4-4 Список подкоманд предварительного просмотра «Preview»

Show Preview in Window (Ctrl+P)

Отобразить окно, которое позволяет предварительно просмотреть дизайн пользовательского интерфейса, отображаемый вашим текущим кодом FXML при его развертывании.

Установить тему JavaFX для использования в просматриваемом макете FXML. В раскрывающемся списке отображается доступный выбор.

Scene Style Sheets

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

Позволяет устанавливать, удалять или открывать файл ресурсов в собственном файловом браузере.

Позволяет вам установить размер окна предварительного просмотра на один из предопределенных размеров сцены в качестве альтернативы предпочтительному размеру, определенному в документе FXML.

Выбор меню «Window»(Окно) дает вам список имен файлов FXML, которые в настоящее время открыты в окнах JavaFX Scene Builder. Когда вы выбираете одно из имен файлов в списке, это имя отмечается флажком, и соответствующее ему окно Scene Builder становится активным.

При выборе «Help»(Справка), а затем «Scene Builder Help»(Справка по Scene Builder) открывается ваш веб-браузер по умолчанию и отображается веб-сайт, содержащий доступную документацию по построителю сцен JavaFX. Выберите команду «About Scene Builder»(О Scene Builder), чтобы открыть окно, в котором отображается информация о версии для используемого вами JavaFX Scene Builder.

Часть 1: Scene Builder

Нам нужно указать среде разработки 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; — документация по классам 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-документ в приложении 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. Также установите привязки к границам (правой и нижней).

1. Если всё сделано правильно, то у нас должно получится что-то похожее на рисунок ниже. Используйте пункт меню 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:

Источник изображения: http://www.oracle.com/

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

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

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

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

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

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

Если JavaFX не может найти указанный fxml -файл, то вы получите следующее сообщение об ошибке:

java.lang.IllegalStateException: Location is not set.

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

Что дальше?

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

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

Уберите другие добавленные JDK и 8-я JDK будет использоваться по умолчанию.

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

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

— документация по стандартным классам Java; — документация по классам JavaFX; — документация по дополнительным элементам JavaFX из проекта ControlsFX; — официальный учебник по JavaFX от Oracle.

Создание нового проекта JavaFX

• ch.makery.address — содержит большинство классов-контроллеров (Controller) (= классов бизнес логики);
• ch.makery.address.model — содержит классы Моделей (Model);
• ch.makery.address.view — содержит Представления (View).

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

На вкладке Hierarchy выберите компонент AnchorPane, и справа, на вкладке Layout установите значение характеристикам Pref Width и Pref Height — 600 и 300 соответственно.

На вкладке Hierarchy в компонент AnchorPane добавьте новый компонент SplitPane (horizontal). Кликните по нему правой кнопкой мыши и выберите Fit to Parent.

Теперь, в левую часть компонента SplitPane со вкладки Controls перетащите компонент TableView. Выделите его целиком (а не отдельный столбец) и проставьте отступы от краёв так, как показано на рисунке. Внутри компонента AnchorPane всегда можно проставить отступы от четырёх границ рамки (дополнительная информация о разметках).

В таблице измените заголовки колонок (вкладка 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”.

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

В пакете view создайте другой fxml-документ, и назовите его RootLayout.fxml . На этот раз в качестве корневого элемента выберите BorderPane.

Установите предпочитаемое значение ширины и высоты компонента: 600 и 400 соответственно.

В верхний слот компонента BorderPane добавьте компонент MenuBar. Функциональность меню мы будем реализовывать в последующих уроках.

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

Кликните правой кнопкой мыши по нашему проекту, перейдите к пункту New | Other… и выберите JavaFX Main Class.

Назовите класс MainApp и поместите его в пакет ch.makery.address (примечание: это пакет является родительским для view и model ).

Источник изображения: http://www.oracle.com/

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

Часть 1: Scene Builder

Уберите другие добавленные JDK и 8-я JDK будет использоваться по умолчанию.

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

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

— документация по стандартным классам Java; — документация по классам JavaFX; — документация по дополнительным элементам JavaFX из проекта ControlsFX; — официальный учебник по JavaFX от Oracle.

Создание нового проекта JavaFX

• ch.makery.address — содержит большинство классов-контроллеров (Controller) (= классов бизнес логики);
• ch.makery.address.model — содержит классы Моделей (Model);
• ch.makery.address.view — содержит Представления (View).

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

На вкладке Hierarchy выберите компонент AnchorPane, и справа, на вкладке Layout установите значение характеристикам Pref Width и Pref Height — 600 и 300 соответственно.

На вкладке Hierarchy в компонент AnchorPane добавьте новый компонент SplitPane (horizontal). Кликните по нему правой кнопкой мыши и выберите Fit to Parent.

Теперь, в левую часть компонента SplitPane со вкладки Controls перетащите компонент TableView. Выделите его целиком (а не отдельный столбец) и проставьте отступы от краёв так, как показано на рисунке. Внутри компонента AnchorPane всегда можно проставить отступы от четырёх границ рамки (дополнительная информация о разметках).

В таблице измените заголовки колонок (вкладка 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”.

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

В пакете view создайте другой fxml-документ, и назовите его RootLayout.fxml . На этот раз в качестве корневого элемента выберите BorderPane.

Установите предпочитаемое значение ширины и высоты компонента: 600 и 400 соответственно.

В верхний слот компонента BorderPane добавьте компонент MenuBar. Функциональность меню мы будем реализовывать в последующих уроках.

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

Кликните правой кнопкой мыши по нашему проекту, перейдите к пункту New | Other… и выберите JavaFX Main Class.

Назовите класс MainApp и поместите его в пакет ch.makery.address (примечание: это пакет является родительским для view и model ).

Источник изображения: http://www.oracle.com/