JavaFX 2.0 overview
Alexander Potochkin
Senior software developer
November 28, 2011
JavaFX 2.0

• Дальнейшее развитие средств Java для создания rich
  applications
  – AWT/Swing
  – JavaFX 1.X
• Целевая аудитория
  – Cуществующие и будущие Java разработчики
  – Веб разработчики




                                                       2
                                                           2
Rich Applications
• Интернет становится более насыщенным
  • Это можно только поприветствовать!
• Не только веб приложения
  • Но и обычные приложения в не меньшей степени
  • Мы хотим, чтобы JavaFX использовался везде
  • Мы не соперничаем с HTML
• Не только для конечных пользователей
  • Но и для корпоративных приложений



                                                   3
JavaFX 2.0 and Java

• Java – основной язык JavaFX 2.0
  – 100% Java API
  – Все скриптовые возможности JavaFX 1.X
    • Свойства (properties)
    • Связывание (binding)
    • Анимация (transitions, animations)
• Использование из других языков
  – JavaScript, Groovy, JRuby, Jython, Scala
  – Все языки, поддерживаемые JVM



                                               4
                                                   4
Java Ecosystem

• Миллионы Java разработчиков
  – Нет необходимости изучать новый язык
  – Простота использования и обучения
• Множество средств разработки
  –   Интегрированные среды разработки
  –   Отладчики кода
  –   Инструменты для тестирования
  –   Средства измерения производительности
  –   Средства анализа кода



                                              5
                                                  5
TIOBE Index




              6
                  6
Java Beans

• Существующий дизайн Java Beans имеет ряд
  недостатков
  –   Уведомления содержат как старое, так и новое значения
  –   Неэффективная обработка примитивных типов
  –   Большое количество вспомогательного кода
  –   Корректность обеспечивается на уровне соглашения об
      именах, а не проверяется компилятором
• Поэтому JavaFX 2.0 использует новую модель



                                                              7
                                                                  7
JavaFX Beans

• Bean
  – Получение уведомлений об изменениях свойств объекта
• Property
  – Необязательный getter
  – Необязательный setter
  – Ссылка на модель – объект, который хранит значение
• Mного вспомогательного кода
  – Но этот код тривиальный
  – Разумный компромисс между производительностью,
    количеством классов и удобством использования

                                                          8
                                                              8
Binding Example

     public class Rectangle {
         private DoubleProperty x = new DoubleProperty();
         public DoubleProperty xProperty() { return x; }
         public double getX() { return x.get(); }
         public void setX(double value) { x.set(value); }
     }


     Rectangle r1 = new Rectangle();
     r1.setX(100);


     Rectangle r2 = new Rectangle();
     r2.xProperty().bind(r1.xProperty());




                                                            9
                                                                9
Demo: Ensemble




                 10
SceneGraph

• Направленный граф без циклов
• Логический и физический уровни абстракции
• Представление элементов UI
  – Графические примитивы
  – Компоненты
  – Эффекты




                                              11
                                                   11
SceneGraph Nodes
•   ID
•   Стиль, класс стиля
•   Размеры и положение
•   Эффекты
    – Трансформации
    – Прозрачность
• Обработчики и диспетчеры событий
• Состояние
    – Курсор
    – Видимость

                                     12
                                          12
SceneGraph Performance

•   Монолитный дизайн
•   Быстрое вычисление границ узлов сцены
•   Отслеживание невалидных областей
•   Кэширование отрисованных частей сцены
•   Неявная отрисовка
    – Лучше подходит для обработки на GPU
    – Отдельный поток для отрисовки
• Приемлемый объем использованной памяти
    – Проверено на приложениях с 50К+ узлами


                                               13
                                                    13
Transforms

• Преобразования координат
  –   Сдвиг (x, y, z)
  –   Растяжение и сжатие (ширина, высота, глубина)
  –   Поворот (угол + вектор оси поворота)
  –   Произвольные аффинные преобразования (матрица 3х3)
  –   Перспективная проекция (матрица 4х4, для 3D)
• Преобразования применены к любому узлу сцены
  – Возможно кэширование некоторых значений внутри узла




                                                           14
                                                                14
Effects

• “Эффект” – применение фильтра к изображению
  –   Размытие
  –   Отражение
  –   Sepia tone
  –   Grayscale
• Ускорение с помощью D3D/OpenGL
  – В некоторых случаях использование CPU оказывается более
    эфективным




                                                          15
                                                               15
Animations

• Transitions
  – Набор простых предопределенных действий
     • Rotate, scale, translate, fade
  – Операции с узлами сцены
• KeyFrame
  – Спецификация значений свойств в нужные моменты времени
  – Или просто вызовы функции в эти моменты
• Timeline
  – Изменение значений переменных, заданных в KeyFrame
  – Может и не осуществлять непосредственно анимацию

                                                         16
                                                              16
Animation Example
     Text text = new Text();
     text.setText(“Hello World!”);


     Transition rotate =
        new RotateTransition(Duration.millis(1000), text);
     rotate.setToAngle(180);
     rotate.play();


     Timeline timeline = new Timeline();
     timeline.setCycleCount(Timeline.INDEFINITE);
     timeline.setAutoReverse(true);
     KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300);
     KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
     timeline.getKeyFrames().add(kf);
     timeline.play();

                                                                       17
                                                                            17
Event Handling

• За основу взята модель событий DOM
• Две фазы обработки
  – Capturing




                                       Capturing




                                                            Bubbling
  – Bubbling
• Поглощение на любой стадии                       Parent



• Разные уровни обработки                           Child


  – on* свойства узлов
  – EventHandler, EventFilter
  – EventDispatcher


                                                                       18
                                                                            18
Events

• Input events
  –   Mouse
  –   Key
  –   Touch
  –   Drag&Drop
• Window events
• Focus events
• Control events



                   19
                        19
Pulse Events

• События от платформы каждые 1/60с
  – FPS может снижаться до 30, 15 и т.д в случае нагрузки
• Во время пульса
  –   Обработка анимации
  –   Раскладка узлов сцены
  –   Применение CSS ко всем требуемым узлам
  –   Синхронизация модели сцены с графическим представлением




                                                            20
                                                                 20
Graphics
• Прозрачность для приложений
  – Отрисовка SceneGraph происходит автоматически
  – Большие возможности для оптимизаций
• Prism – новый графический стек JavaFX 2.0
  – Поддержка 2D и 3D
• Аппаратное ускорение
  – Direct3D, OpenGL
  – Использование шейдеров для отрисовки примитивов
  – Программная реализация для старого оборудования
• Decora – библиотека для наложения эффектов

                                                      21
                                                           21
Controls
•   Button         •   ProgressBar
•   RadioButton    •   ProgressIndicator
•   ToggleButton   •   ScrollPane
•   CheckBox       •   SplitPane
•   ChoiceBox      •   TabPane
•   Cell           •   TitledPane
•   IndexedCell    •   ScrollBar
•   ListCell       •   Separator
•   TreeCell       •   Slider
•   Label          •   TextBox
•   MediaPlayer    •   PasswordBox
•   Menu           •   Tooltip
•   MenuBar        •   ToolBar
•   MenuButton     •   ListView
•   MenuItem       •   TableView



                                           22
                                                22
HTML
• Поддержка современных веб стандартов
  – CSS3
  – DOM
• WebEngine
  – Загрузка данных, построение DOM дерева
  – Выполнение скриптов
• WebView
  – Визуальное отображение страницы




                                             23
                                                  23
Media
• Поддержка аудио и видео
  – fxm, mp3, H.264
• МеdiaPlayer
  – Воспроизведение Media
• MediaView
  – Визуальное отображение
  – Несколько MediaView могут быть связаны с одним MediaPlayer
• MediaControl



                                                            24
                                                                 24
Deployment
• Различные модели развертывания
  – Отдельное приложение
  – Java Plugin
  – Java Web Start

• JFXPanel
  – Использование JavaFX внутри приложений Swing




                                                   25
                                                        25
Demo: SwingInterop




                     26
Время писать на JavaFX!




        http://www.oracle.com/technetwork/java/
               javafx/downloads/index.html




                                                  27
JavaFX 2.0 overview
Alexander Potochkin
Senior software developer
November 28, 2011

JavaFX 2.0 overview

  • 1.
    JavaFX 2.0 overview AlexanderPotochkin Senior software developer November 28, 2011
  • 2.
    JavaFX 2.0 • Дальнейшееразвитие средств Java для создания rich applications – AWT/Swing – JavaFX 1.X • Целевая аудитория – Cуществующие и будущие Java разработчики – Веб разработчики 2 2
  • 3.
    Rich Applications • Интернетстановится более насыщенным • Это можно только поприветствовать! • Не только веб приложения • Но и обычные приложения в не меньшей степени • Мы хотим, чтобы JavaFX использовался везде • Мы не соперничаем с HTML • Не только для конечных пользователей • Но и для корпоративных приложений 3
  • 4.
    JavaFX 2.0 andJava • Java – основной язык JavaFX 2.0 – 100% Java API – Все скриптовые возможности JavaFX 1.X • Свойства (properties) • Связывание (binding) • Анимация (transitions, animations) • Использование из других языков – JavaScript, Groovy, JRuby, Jython, Scala – Все языки, поддерживаемые JVM 4 4
  • 5.
    Java Ecosystem • МиллионыJava разработчиков – Нет необходимости изучать новый язык – Простота использования и обучения • Множество средств разработки – Интегрированные среды разработки – Отладчики кода – Инструменты для тестирования – Средства измерения производительности – Средства анализа кода 5 5
  • 6.
  • 7.
    Java Beans • Существующийдизайн Java Beans имеет ряд недостатков – Уведомления содержат как старое, так и новое значения – Неэффективная обработка примитивных типов – Большое количество вспомогательного кода – Корректность обеспечивается на уровне соглашения об именах, а не проверяется компилятором • Поэтому JavaFX 2.0 использует новую модель 7 7
  • 8.
    JavaFX Beans • Bean – Получение уведомлений об изменениях свойств объекта • Property – Необязательный getter – Необязательный setter – Ссылка на модель – объект, который хранит значение • Mного вспомогательного кода – Но этот код тривиальный – Разумный компромисс между производительностью, количеством классов и удобством использования 8 8
  • 9.
    Binding Example public class Rectangle { private DoubleProperty x = new DoubleProperty(); public DoubleProperty xProperty() { return x; } public double getX() { return x.get(); } public void setX(double value) { x.set(value); } } Rectangle r1 = new Rectangle(); r1.setX(100); Rectangle r2 = new Rectangle(); r2.xProperty().bind(r1.xProperty()); 9 9
  • 10.
  • 11.
    SceneGraph • Направленный графбез циклов • Логический и физический уровни абстракции • Представление элементов UI – Графические примитивы – Компоненты – Эффекты 11 11
  • 12.
    SceneGraph Nodes • ID • Стиль, класс стиля • Размеры и положение • Эффекты – Трансформации – Прозрачность • Обработчики и диспетчеры событий • Состояние – Курсор – Видимость 12 12
  • 13.
    SceneGraph Performance • Монолитный дизайн • Быстрое вычисление границ узлов сцены • Отслеживание невалидных областей • Кэширование отрисованных частей сцены • Неявная отрисовка – Лучше подходит для обработки на GPU – Отдельный поток для отрисовки • Приемлемый объем использованной памяти – Проверено на приложениях с 50К+ узлами 13 13
  • 14.
    Transforms • Преобразования координат – Сдвиг (x, y, z) – Растяжение и сжатие (ширина, высота, глубина) – Поворот (угол + вектор оси поворота) – Произвольные аффинные преобразования (матрица 3х3) – Перспективная проекция (матрица 4х4, для 3D) • Преобразования применены к любому узлу сцены – Возможно кэширование некоторых значений внутри узла 14 14
  • 15.
    Effects • “Эффект” –применение фильтра к изображению – Размытие – Отражение – Sepia tone – Grayscale • Ускорение с помощью D3D/OpenGL – В некоторых случаях использование CPU оказывается более эфективным 15 15
  • 16.
    Animations • Transitions – Набор простых предопределенных действий • Rotate, scale, translate, fade – Операции с узлами сцены • KeyFrame – Спецификация значений свойств в нужные моменты времени – Или просто вызовы функции в эти моменты • Timeline – Изменение значений переменных, заданных в KeyFrame – Может и не осуществлять непосредственно анимацию 16 16
  • 17.
    Animation Example Text text = new Text(); text.setText(“Hello World!”); Transition rotate = new RotateTransition(Duration.millis(1000), text); rotate.setToAngle(180); rotate.play(); Timeline timeline = new Timeline(); timeline.setCycleCount(Timeline.INDEFINITE); timeline.setAutoReverse(true); KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300); KeyFrame kf = new KeyFrame(Duration.millis(500), kv); timeline.getKeyFrames().add(kf); timeline.play(); 17 17
  • 18.
    Event Handling • Заоснову взята модель событий DOM • Две фазы обработки – Capturing Capturing Bubbling – Bubbling • Поглощение на любой стадии Parent • Разные уровни обработки Child – on* свойства узлов – EventHandler, EventFilter – EventDispatcher 18 18
  • 19.
    Events • Input events – Mouse – Key – Touch – Drag&Drop • Window events • Focus events • Control events 19 19
  • 20.
    Pulse Events • Событияот платформы каждые 1/60с – FPS может снижаться до 30, 15 и т.д в случае нагрузки • Во время пульса – Обработка анимации – Раскладка узлов сцены – Применение CSS ко всем требуемым узлам – Синхронизация модели сцены с графическим представлением 20 20
  • 21.
    Graphics • Прозрачность дляприложений – Отрисовка SceneGraph происходит автоматически – Большие возможности для оптимизаций • Prism – новый графический стек JavaFX 2.0 – Поддержка 2D и 3D • Аппаратное ускорение – Direct3D, OpenGL – Использование шейдеров для отрисовки примитивов – Программная реализация для старого оборудования • Decora – библиотека для наложения эффектов 21 21
  • 22.
    Controls • Button • ProgressBar • RadioButton • ProgressIndicator • ToggleButton • ScrollPane • CheckBox • SplitPane • ChoiceBox • TabPane • Cell • TitledPane • IndexedCell • ScrollBar • ListCell • Separator • TreeCell • Slider • Label • TextBox • MediaPlayer • PasswordBox • Menu • Tooltip • MenuBar • ToolBar • MenuButton • ListView • MenuItem • TableView 22 22
  • 23.
    HTML • Поддержка современныхвеб стандартов – CSS3 – DOM • WebEngine – Загрузка данных, построение DOM дерева – Выполнение скриптов • WebView – Визуальное отображение страницы 23 23
  • 24.
    Media • Поддержка аудиои видео – fxm, mp3, H.264 • МеdiaPlayer – Воспроизведение Media • MediaView – Визуальное отображение – Несколько MediaView могут быть связаны с одним MediaPlayer • MediaControl 24 24
  • 25.
    Deployment • Различные моделиразвертывания – Отдельное приложение – Java Plugin – Java Web Start • JFXPanel – Использование JavaFX внутри приложений Swing 25 25
  • 26.
  • 27.
    Время писать наJavaFX! http://www.oracle.com/technetwork/java/ javafx/downloads/index.html 27
  • 28.
    JavaFX 2.0 overview AlexanderPotochkin Senior software developer November 28, 2011