Client side technologies JavaFX

Dennis Kirch, Bao Loc Nguyen Ngo, Nicolas Osterloh, Torsten Sehy, Stephan Wels

Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/11 1 The slides are licensed under a

Creative Commons Attribution 3.0 License

Overview

Web Technologies 2

Introduction

Orientation

Concept

Examples

Video Puzzle

Winter Olympics App

Creating a Project Programming basic

JavaFX in NetBeans

Browser integration

Live Coding

Future Development

JavaFX 2.0

Conclusion

Orientation

Web Technologies 3

Main Ideas

Framework for rich internet applications

Rapid GUI Development

Platform independence

Target multiple device types

Drag-to-install

Security

Web Technologies 4

Platform Architecture

Web Technologies 5

Desktop Elements

Mobile Elements

TV Elements

Common Elements

JavaFX Runtime

Program Structure

Scripting language JavaFX Script.

Object oriented. Multiple inheritance possible.

GUI-design with JavaFX Script or CSS.

Event driven interaction.

Program logic based on state machine NetBeans IDE Feature.

Individual logic-layer for each state.

Time triggered state change.

Code induced state change.

Web Technologies 6

Technical Details

Compiler creates Java Byte Code. Platform independence

JavaVM installed on 75% of all Desktop-Computers.

Proven and tested Runtime Environment.

Multiple website-embedding techniques Java Web Start

Java Applet

Interaction with Website JavaScript to JavaFX Communication

DOM access

Web Technologies 7

Security Concepts

Sandboxing Limited HDD usage.

No access to extern servers.

Signatures Unsigned Programs

Execution always demands agreement.

Self signed Programs

Enables trusted parties.

Signed Programs

Web Technologies 8

Examples

Web Technologies 9

Video-Puzzle: Official Winter Olympics App:

Programming in JavaFX - Overview

Objects and Data Types

Content and media

Events and Bindings

Web Technologies 10

Objects & Data Types

Web Technologies 11

Content and Media

Web Technologies 12

Content and Media

Web Technologies 13

Content and Media

Web Technologies 14

Content and Media

Web Technologies 15

Content and Media

Web Technologies 16

Events and Bindings (1)

Web Technologies 17

Events and Bindings (2)

Web Technologies 18

Observer Pattern

Events and Bindings (3)

Web Technologies 19

Observer Pattern

Events and Bindings (4)

Web Technologies 20

Events and Bindings (5)

Web Technologies 21

Web Technologies 22

NetBeans IDE

Web Technologies 23

Palette

NetBeans IDE

Web Technologies 24

Palette

Properties

NetBeans IDE

Web Technologies 25

Palette

Properties Navigator

NetBeans IDE

Web Technologies 26

Palette

Properties Navigator

Design- preview

NetBeans IDE

Web Technologies 27

Palette

Properties

State window

Navigator

Design- preview

NetBeans IDE

Design Code Generation

Web Technologies 28

Browser Integration

Web Technologies 29

• Integration as Java-Applet possible

• JavaScript code generated by JavaFX

SDK

• Problem: Needs enabled JavaScript

Live Coding

Web Technologies 30

Components Stage

Scene

Nodes

Live Coding

Web Technologies 31

Components Stage

Scene

Nodes

Code Example

Stage {

title : "DiaShow",

scene : Scene {

content : [

…//some nodes

]

} // end Scene

} //end Stage

Web Technologies 32

The Diashow (1)

Features Display one image at a time

Switch image

Switching modes Simple replacement

Fade in / Fade out

Fade in / Fade out (rotating)

Web Technologies 33

The Diashow (2)

IDE : Eclipse JavaFX Plugin available

Step by Step Step 1 : Display image and button

Step 2 : Switch between images

Step 3 : Fade in / Fade out

Step 4 : Rotate images

Web Technologies 34

Future Development – JavaFX 2.0

Release in second half of 2011.

New scripting language.

Old scripting language discontinued. No downward compatibility.

Complete rewrite projects to use new features.

Full screen video support

Multithreading Improvements

Improved Startup Performance.

Web Technologies 35

Conclusions

Ideal for fast graphical RIAs.

Late involvement in RIA development by Sun. Maybe too late.

Flash dominates the market.

Wait for JavaFX 2.0 New Features

Only need to write the code once(New scripting language)

Most features realizable with HTML5 Better compatibility especially for mobile Devices (e.g iPhone,

iPad, Windows Phone 7)

HTML5 canvas element slower.

Web Technologies 36