Главная » Статьи » Короткие уроки по JavaFX IntelliJ IDEA

Короткие уроки по JavaFX IntelliJ IDEA

Короткие уроки по JavaFX IntelliJ IDEA

От автора: разработка на «кофейном» языке все больше склоняется к созданию приложений на основе различных платформ. Именно потому запрос в Google «JavaFX IntelliJ IDEA уроки» является весьма популярным среди веб-разработчиков. С одной стороны, это возможность работать с одной из самых мощных платформ, которая обеспечивает едва ли ни каждую вторую программу с ярким интерфейсом. С другой — возможности разработки в IntelliJ IDEA привлекают все больше программистов, даже несмотря на высокую цену. Сегодня покажем, как использовать эти инструменты для разработки простейшего приложения, а также проведем мини-обучение с созданием.

Платформа для эпохи

В наше время пользователи скачивают очень много приложений для мобильных устройств, а на стационарных ПК предпочитают использовать онлайн-решения. Причин этому много, но разбираться в них сегодня не будем. Лишь скажем о том, что существует инструмент JavaFX, который отлично подходит как для создания мобильных приложений, так и для Rich Internet Application — веб-приложений, которые выполняют функции стационарных программ в онлайне.

Короткие уроки по JavaFX IntelliJ IDEA

Все знают о Swing’овском интерфейсе, и у большинства дизайнеров он ассоциируется с чем-то устаревшим и неладным. И это справедливо: библиотека Swing сегодня используется лишь для утилитарных решений, где пользователь непривередлив к внешнему виду. JavaFX призвана изменить этот порядок вещей, параллельно конкурируя с Silverlight и стремительно устаревающим Flash.

Кстати, сама технология была разработана той же компанией, которая занималась выпуском и поддержкой языка Java — Sun. Позже, вместе с остальными активами Sun, эта наработка перешла к конгломерату Oracle, который поглотил не одну мощную систему. Сегодня можно сказать, что именно Production Suite, который был представлен в платформе, сделал разработку интерфейса столь быстрой. К примеру, благодаря использованию Photoshop и Illustrator программисты смогли портировать нарисованные изображения в код: не нужно придумывать велосипед, а просто переносить код, который сгенерировала программа.

Точно так же можно поступить и с графикой SVG. Набор инструментов Media Factory переводит изображение в код, а далее вы редактируете его средствами JavaFX Script. Кстати, декларативный язык и настоящий Java могут использоваться совместно. К примеру, вы делаете внешний вид приложений на «скрипте», а сам движок приложения на стандартном Java, который лучше подходит для этого.

Учиться легко

Но не с самого начала. Тот, кто не знает основ Java, не сможет понять, чем так хороша платформа. Поэтому, если вы уже хотите создать свое первое приложение на Android, то не стоит бежать к первому видеокурсу по взаимодействию с Java FX. Для начала вам придется изучить основы программирования, а также научиться рисовать дизайн в графических редакторах. Только после этого вы сможете в полной мере насладиться комплексным подходом от FX.

Привет, мир!

В этом разделе преобразуем пример приложения, созданного IntelliJ IDEA, в очень простое приложение JavaFX Helloworld. Таким образом показываем основные функции поддержки кодирования, предоставляемые IDE. (Пример приложения автоматически создается IntelliJ IDEA при создании проекта для разработки приложения JavaFX с нуля, см. Создание проекта для разработки JavaFX .)

Разработка пользовательского интерфейса

Чтобы показать вам, как IntelliJ IDEA может помочь в написании кода, давайте реализуем Hello World JavaFX. В пользовательском интерфейсе определим кнопку, которая при нажатии будет отображать текст «Hello World!». Для этого добавим следующие два элемента между открывающим и закрывающим <GridPane< тегами в файле sample.fxml:

<Button text= "Say 'Hello World'" onAction= "#say Hello World"/>
<Label GridPane.rowIndex= "1" fx:id= "helloWorld"/>

Предлагаем вам посмотреть, как работает завершение кода. Это видно на скриншоте:

Короткие уроки по JavaFX IntelliJ IDEA

Введите пробел, введите t и выберите «текст». Аналогичным образом добавьте оставшиеся фрагменты кода. Полученный код будет выглядеть примерно так:

Короткие уроки по JavaFX IntelliJ IDEA

Как видите, say Hello World отображается красным, и helloWorld также подсвечивается. Это означает, что IntelliJ IDEA не может разрешить такие ссылки.

Для решения проблем воспользуемся быстрыми исправлениями, предложенными IntelliJ IDEA.

Завершение кода для класса Sample Controller

Теперь собираемся определить поле helloWorld в SampleController. Также добавим соответствующий метод обработчика события (say Hello World), который установит текст для helloWorld. При этом, как уже упоминалось, будем использовать быстрые исправления, предложенные IntelliJ IDEA.

В sample.fxml поместите курсор внутрь helloWorld. Выберите желтую лампочку (Идея!) или нажмите Alt+Enter. Выберите «Создать поле ‘helloWorld’».

Короткие уроки по JavaFX IntelliJ IDEA

IntelliJ IDEA переключается туда, где было добавлено объявление поля.

Короткие уроки по JavaFX IntelliJ IDEA

Обратите внимание на красную рамку вокруг Label. Вы можете редактировать тип поля сразу. Сейчас не собираемся делать это, поэтому нажмите Enter, чтобы выйти из режима рефакторинга.

Также обратите внимание на только что добавленный оператор импорта (import javafx.scene.control.Label;) и значок слева от объявления поля. Это значок навигации —щелкните по нему, чтобы вернуться к sample.fxml.

Поместите курсор внутрь say Hello World и нажмите Alt+Enter. Выберите «Создать метод void sayHelloWorld (ActionEvent)».

Короткие уроки по JavaFX IntelliJ IDEA

Соответствующее объявление метода добавлено в SampleController.java.

Короткие уроки по JavaFX IntelliJ IDEA

Нажмите Shift+Enter, чтобы выйти из режима рефакторинга и начать новую строку. Введите следующее, чтобы установить текст для метки:

helloWorld.setText("Hello World!")

Короткие уроки по JavaFX IntelliJ IDEA

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

Чтобы запустить приложение, нажмите play на панелии инструментов или нажмите Shift+F10. Окно приложения теперь содержит кнопку «Say Hello World». Нажмите эту кнопку, чтобы увидеть текст «Hello World!».

Короткие уроки по JavaFX IntelliJ IDEA

Закройте окно приложения.

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

На этом заканчиваем наш рассказ. Помните, что JavaFX — это не помощник новичка, а профессиональный инструмент. Он хорошо работает в руках того, кто знает толк в программировании. Если же вы решили стать на путь мобильного разработчика, то книги по Java — это то, что должно интересовать вас больше всего.