Javafx Изнутри

На JavaOne 2011 была анонсирована финальная версия JavaFX 2.0. Давайте разберемся, из чего он состоит и какие инструменты предлагает.

JavaFX изнутри



Привет JavaFX

Давайте создадим и запустим наше первое приложение JavaFX. Для этого нам понадобится JavaFX 2.0 SDK И последние NetBeans .

О настройке JavaFX в Netbeans вы можете прочитать на странице http://netbeans.org/kb/docs/java/javafx-setup.html .

Запустите Netbeans, выберите в меню «Файл/Новый проект» и в диалоговом окне выберите категорию JavaFX и тип проекта «Приложение JavaFX».

Будет создан проект с одной тестовой формой, как на картинке ниже (вы можете назвать проект HelloJavaFX или как-нибудь еще).

Код класса формы:

  
  
  
  
  
  
  
   

package hellojavafx; import javafx.application.*; import javafx.event.*; import javafx.scene.*; import javafx.scene.control.*; import javafx.stage.*; public class HelloJavaFX extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Hello World"); Group root = new Group(); Scene scene = new Scene(root, 300, 250); Button btn = new Button(); btn.setLayoutX(100); btn.setLayoutY(80); btn.setText("Hello World"); btn.setOnAction(new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { System.out.println("Hello World"); } }); root.getChildren().

add(btn); primaryStage.setScene(scene); primaryStage.show(); } }

результат:

JavaFX изнутри

Посмотрим, что появится в папке dist после компиляции.

Там будут следующие файлы: — папка веб-файлов — содержит изображения, которые можно запустить в виде апплета.

— HelloJavaFX.html — страница со встроенным апплетом приложения.

- HelloJavaFX.jar - приложение, запускаемое обычным двойным щелчком мыши — HelloJavaFX.jnlp — дескриптор запуска через WebStart Нас интересует само приложение HelloJavaFX.jar. Откроем его любым архиватором (.

jar — обычный .

zip-архив) и посмотрим манифест. Основная линия запуска:

Main-Class: com/javafx/main/Main

говорит, что Netbeans добавляет в каждое приложение JavaFX стартовый класс com.javafx.main.Main, который инициализирует все библиотеки JavaFX и запускает само приложение.

Имя основного класса берется из поля JavaFX-Application-Class, в нашем случае это hellojavafx.HelloJavaFX. Ничего необычного.

На данный момент JavaFX — это просто набор библиотек, функции которых можно использовать из Java-кода.



JavaFX в Swing

Давайте рассмотрим пример формы Swing со встроенным компонентом JavaFX. Создадим новый проект в Netbeans и добавим в него ссылку на библиотеку JavaFX Runtime (по умолчанию она находится в файле C:\Program Files\Oracle\JavaFX Runtime 2.0\lib\jfxrt.jar).

После подключения Runtime вы можете встраивать любые компоненты JavaFX, используя класс JFXPanel .

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

package swingjavafx; import javax.swing.*; import java.awt.event.*; import javafx.embed.swing.*; import javafx.scene.*; import javafx.application.*; import javafx.scene.web.*; import javafx.scene.effect.*; public class SwingJavaFx extends JFrame { HTMLEditor edtr; public SwingJavaFx() { this.setSize(600, 400); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setLayout(null); JButton b1 = new JButton("Read"); b1.setSize(150, 22); b1.setLocation(10, 10); b1.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog(null, edtr.getHtmlText()); } }); this.add(b1); final JFXPanel jfx = new JFXPanel(); jfx.setSize(560, 300); jfx.setLocation(10, 40); this.add(jfx); Platform.runLater(new Runnable() { @Override public void run() { Group root = new Group(); Scene scene = new Scene(root, 400, 300); jfx.setScene(scene); javafx.scene.shape.Rectangle rctngl = new javafx.scene.shape.Rectangle(); rctngl.setTranslateX(20); rctngl.setTranslateY(30); rctngl.setWidth(500); rctngl.setHeight(250); rctngl.setEffect(new Shadow()); root.getChildren().

add(rctngl); edtr = new HTMLEditor(); edtr.setHtmlText("Blablabla"); edtr.setTranslateX(20); edtr.setTranslateY(30); edtr.setPrefWidth(500); edtr.setPrefHeight(250); root.getChildren().

add(edtr); } }); } public static void main(String[] args) { new SwingJavaFx(); } }

Результатом будет такая форма:

JavaFX изнутри

Как видно из кода кнопки «Читать», мы можем получить доступ к данным в текстовом редакторе в любое время.

Чтобы запустить такое приложение, мы должны добавить путь к библиотеке времени выполнения JavaFX в путь к классам, например так:

java -cp %cp%;"C:\Program Files\Oracle\JavaFX Runtime 2.0\lib\jfxrt.jar";SwingJavaFx.jar swingjavafx.SwingJavaFx

Все достаточно тривиально и ничем не отличается от использования других библиотек в Java-проектах.



API JavaFX

Функции JavaFX можно найти по адресу страница платформы .

API имеет набор классов для рисования примитивов, графиков и набор GUI-компонентов со своим дизайном.

Наконец, есть компонент веб-браузера и текстовый редактор с возможностями форматирования.

На странице http://www.oracle.com/technetwork/java/javafx/overview/index.html вы можете запустить демонстрационное приложение Ensemble (это похоже на Обозреватель гибких компонентов ).



JavaFX изнутри



Связывание

Привязка предназначена для привязки свойств объектов.

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

Давайте посмотрим на пример:

package bindingjavafx; import javafx.application.*; import javafx.event.*; import javafx.scene.*; import javafx.scene.control.*; import javafx.stage.*; import javafx.beans.binding.*; import javafx.beans.value.*; public class BindingJavaFX extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Hello World"); Group root = new Group(); final Scene scene = new Scene(root, 300, 250); final Button btn = new Button(); btn.setLayoutX(100); btn.setLayoutY(80); btn.setText("Hello World"); btn.setOnAction(new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { System.out.println("Hello World"); } }); final DoubleBinding db = scene.widthProperty().

subtract(150); db.addListener(new javafx.beans.value.ChangeListener< Number>() { public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) { btn.setLayoutX(db.getValue()); } }); root.getChildren().

add(btn); primaryStage.setScene(scene); primaryStage.show(); } }

Результат:

JavaFX изнутри

Строка кода

final DoubleBinding db = scene.widthProperty().

subtract(150);

создает переменную db и привязывает ее значение к ширине формы минус 150 пикселей.

К сожалению, мы не можем просто привязать координаты кнопки к этой переменной (как btn.layoutX.bind(db); что было бы очевидно и удобно).

Поэтому в созданную переменную нужно добавить Listener, в котором нужно обновить координаты кнопки:

db.addListener(new javafx.beans.value.ChangeListener< Number>() { public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) { btn.setLayoutX(db.getValue()); } });

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

Сам код API чрезмерно раздут, например класс SimpleDoubleProperty имеет иерархию наследования из шести классов и реализует девять интерфейсов.

Это новое понимание характеристики простоты.

В результате хорошая идея выглядит не очень привлекательно.

Много кода, неявные ошибки.

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



Использование CSS

Дизайн интерфейса можно указать с помощью CSS. Для этого необходимо создать описание стиля, например такое:

.

cssbutton { -fx-font: 16px "Serif"; -fx-padding: 10; -fx-background-color: #CCFF99; -fx-effect: dropshadow( one-pass-box , black , 12 , 0.0 , 1 , 1 ); }

— Стиль cssbutton устанавливает шрифт, отступы, заливку и эффект тени.

Далее вам нужно подключить файл стилей к сцене:

scene.getStylesheets().

add("cssjavafx/style.css");

и добавьте стиль к компоненту по имени:

btn.getStyleClass().

add("cssbutton");

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

JavaFX изнутри

Вы можете прочитать описание свойств, доступных в CSS. на странице документации .

Не очень понятно, зачем вообще нужно задавать дизайн стилями.

Все, что можно задать с помощью стилей, можно сделать в коде; в CSS нельзя использовать переменные или вычисления, нельзя создавать новые свойства, а стили сложно отлаживать.



Использование FXML

Расположение форм можно указать в отдельном FXML-файле и загружать из него при запуске приложения.

Этот подход используется во многих средах разработки.

Netbeans предлагает для этих целей создать проект с типом приложения JavaFX FXML. Будет создана первоначальная форма примерно следующего содержания:

package fxmljavafx; import java.net.*; import java.util.*; import javafx.event.*; import javafx.fxml.*; import javafx.scene.control.*; public class Sample implements Initializable { @FXML private Label label; @FXML private void handleButtonAction(ActionEvent event) { System.out.println("You clicked me!"); label.setText("Hello World!"); } @Override public void initialize(URL url, ResourceBundle rb) { // } }

Аннотация @FXML используется для обозначения переменных и функций, доступных при загрузке из файла FXML. Сам файл выглядит примерно так:

<Эxml version="1.0" encoding="UTF-8"?> <Эimport java.lang.*?> <Эimport javafx.scene.*?> <Эimport javafx.scene.control.*?> <Эimport javafx.scene.layout.*?> <AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml " fx:controller="fxmljavafx.Sample "> <children> <Button id="button" layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button " /> <Label id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" prefHeight="16" prefWidth="69" fx:id="label " /> </children> </AnchorPane>

Как видно из примера, внутри FXML-описания формы используются как метод handleButtonAction, так и свойство label, указанное в коде.

Загрузка формы FXML при запуске приложения называется примерно так:

Parent root = FXMLLoader.load(getClass().

getResource("Sample.fxml")); stage.setScene(new Scene(root)); stage.show();

Создание подобного графического интерфейса не дает никаких преимуществ.

Визуального редактора нет, а ручное редактирование как Java-кода, так и FXML-описания одинаково дорого.



Визуальный редактор

Отрисовка форм доступна в Visual Studio для VB и C#, в Adobe Flex, а в Oracle JBuilder есть отличный редактор для Swing. Для JavaFX 2 года назад был анонсирован визуальный редактор.

Вы даже можете посмотреть видео с ним на странице http://www.flickr.com/photos/douglasbullard/3609213630/in/photostream/ .

Но публичного релиза пока не было и неизвестно, когда он будет.

Ложка меда в мази

Общая оценка, скорее всего, неудовлетворительная.

Демонстрационные приложения работают медленно, внешний вид компонентов уступает Macintosh Aqua, Adone Flex или Microsoft Metro. Первая версия JavaFX появилась еще в 2008 году, но Sun так и не смогла реализовать эту технологию.

Однако на последнем JavaOne было много разговоров о JavaFX. Будем надеяться, что Oracle железным кулаком направит разработчиков в правильном направлении и заставит их наконец выпустить работающий инструмент, который обещает всё.

Теги: #java #JavaFX #GUI #java

Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.