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
Recommended
