presentation javafx
DESCRIPTION
Team ASDTRANSCRIPT
![Page 1: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/1.jpg)
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
![Page 2: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/2.jpg)
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
![Page 3: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/3.jpg)
Web Technologies3
Orientation
![Page 4: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/4.jpg)
Main Ideas
Framework for rich internet applications Rapid GUI Development Platform independence Target multiple device types Drag-to-install Security
Web Technologies4
![Page 5: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/5.jpg)
Web Technologies5
Platform Architecture
DesktopElements
Mobile Elements
TV Elements
Common Elements
JavaFX Runtime
![Page 6: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/6.jpg)
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
![Page 7: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/7.jpg)
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
![Page 8: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/8.jpg)
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
![Page 9: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/9.jpg)
Examples
Web Technologies9
Video-Puzzle:Official Winter Olympics App:
![Page 10: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/10.jpg)
Programming in JavaFX - Overview
Objects and Data Types
Content and media
Events and Bindings
Web Technologies10
![Page 11: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/11.jpg)
Objects & Data Types
Web Technologies11
![Page 12: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/12.jpg)
Content and Media
Web Technologies12
![Page 13: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/13.jpg)
Content and Media
Web Technologies13
![Page 14: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/14.jpg)
Content and Media
Web Technologies14
![Page 15: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/15.jpg)
Content and Media
Web Technologies15
![Page 16: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/16.jpg)
Content and Media
Web Technologies16
![Page 17: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/17.jpg)
Events and Bindings (1)
Web Technologies17
![Page 18: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/18.jpg)
Events and Bindings (2)
Web Technologies18
Observer Pattern
![Page 19: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/19.jpg)
Events and Bindings (3)
Web Technologies19
Observer Pattern
![Page 20: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/20.jpg)
Events and Bindings (4)
Web Technologies20
![Page 21: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/21.jpg)
Events and Bindings (5)
Web Technologies21
![Page 22: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/22.jpg)
Web Technologies22
NetBeans IDE
![Page 23: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/23.jpg)
Web Technologies23
Palette
NetBeans IDE
![Page 24: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/24.jpg)
Web Technologies24
Palette
Properties
NetBeans IDE
![Page 25: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/25.jpg)
Web Technologies25
Palette
PropertiesNavigator
NetBeans IDE
![Page 26: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/26.jpg)
Web Technologies26
Palette
PropertiesNavigator
Design-preview
NetBeans IDE
![Page 27: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/27.jpg)
Web Technologies27
Palette
Properties
State window
Navigator
Design-preview
NetBeans IDE
![Page 28: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/28.jpg)
Design Code Generation
Web Technologies28
![Page 29: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/29.jpg)
Browser Integration
Web Technologies29
• Integration as Java-Applet possible• JavaScript code generated by JavaFX SDK
• Problem: Needs enabled JavaScript
![Page 30: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/30.jpg)
Live Coding
Web Technologies30
Components Stage Scene Nodes
![Page 31: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/31.jpg)
Live Coding
Web Technologies31
Components Stage Scene Nodes
![Page 32: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/32.jpg)
Code Example
Stage { title : "DiaShow", scene : Scene { content : [
…//some nodes]
} // end Scene} //end Stage
Web Technologies32
![Page 33: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/33.jpg)
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
![Page 34: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/34.jpg)
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
![Page 35: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/35.jpg)
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
![Page 36: Presentation JavaFX](https://reader033.vdocuments.us/reader033/viewer/2022061207/5484fe055806b5d6588b4703/html5/thumbnails/36.jpg)
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