Upload
recon4
View
228
Download
0
Embed Size (px)
DESCRIPTION
Team ASD
Citation preview
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