presentation javafx

Client side technologiesJavaFX

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

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

Creative Commons Attribution 3.0 License

Overview

Web Technologies2

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

Web Technologies3

Orientation

Main Ideas

Framework for rich internet applications Rapid GUI Development Platform independence Target multiple device types Drag-to-install Security

Web Technologies4

Web Technologies5

Platform Architecture

DesktopElements

Mobile Elements

TV Elements

Common Elements

JavaFX Runtime

Program StructureScripting 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 Technologies6

Technical DetailsCompiler 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 Technologies7

Security ConceptsSandboxing

Limited HDD usage. No access to extern servers.

Signatures Unsigned Programs

Execution always demands agreement. Self signed Programs

Enables trusted parties. Signed Programs

Web Technologies8

Examples

Web Technologies9

Video-Puzzle:Official Winter Olympics App:

Programming in JavaFX - Overview

Objects and Data Types

Content and media

Events and Bindings

Web Technologies10

Objects & Data Types

Web Technologies11

Content and Media

Web Technologies12

Content and Media

Web Technologies13

Content and Media

Web Technologies14

Content and Media

Web Technologies15

Content and Media

Web Technologies16

Events and Bindings (1)

Web Technologies17

Events and Bindings (2)

Web Technologies18

Observer Pattern

Events and Bindings (3)

Web Technologies19

Observer Pattern

Events and Bindings (4)

Web Technologies20

Events and Bindings (5)

Web Technologies21

Web Technologies22

NetBeans IDE

Web Technologies23

Palette

NetBeans IDE

Web Technologies24

Palette

Properties

NetBeans IDE

Web Technologies25

Palette

PropertiesNavigator

NetBeans IDE

Web Technologies26

Palette

PropertiesNavigator

Design-preview

NetBeans IDE

Web Technologies27

Palette

Properties

State window

Navigator

Design-preview

NetBeans IDE

Design Code Generation

Web Technologies28

Browser Integration

Web Technologies29

• Integration as Java-Applet possible• JavaScript code generated by JavaFX SDK

• Problem: Needs enabled JavaScript

Live Coding

Web Technologies30

Components Stage Scene Nodes

Live Coding

Web Technologies31

Components Stage Scene Nodes

Code Example

Stage { title : "DiaShow", scene : Scene { content : [

…//some nodes]

} // end Scene} //end Stage

Web Technologies32

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 Technologies33

The Diashow (2) IDE : Eclipse

JavaFX Plugin availableStep by Step

Step 1 : Display image and button Step 2 : Switch between images Step 3 : Fade in / Fade out Step 4 : Rotate images

Web Technologies34

Future Development – JavaFX 2.0Release 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 supportMultithreading Improvements Improved Startup Performance.

Web Technologies35

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 Technologies36