SlideShare a Scribd company logo
Client side technologies
JavaFX
Dennis Kirch, Bao Loc Nguyen Ngo, Nicolas Osterloh,
Torsten Sehy, Stephan Wels
Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111
The 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
Orientation
Web Technologies3
Main Ideas
 Framework for rich internet applications
 Rapid GUI Development
 Platform independence
 Target multiple device types
 Drag-to-install
 Security
Web Technologies4
Platform Architecture
Web Technologies5
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 Technologies6
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 Technologies7
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 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 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 Technologies34
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 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
Ad

More Related Content

What's hot (19)

Android Presentation
Android PresentationAndroid Presentation
Android Presentation
Bram Vandeputte
 
Mastinder singh visualcv_resume
Mastinder singh visualcv_resumeMastinder singh visualcv_resume
Mastinder singh visualcv_resume
Mastinder Singh
 
Azure Mobile Services (+ Universal Apps)
Azure Mobile Services (+ Universal Apps)Azure Mobile Services (+ Universal Apps)
Azure Mobile Services (+ Universal Apps)
Shahed Chowdhuri
 
Android basics
Android basicsAndroid basics
Android basics
Berglind Ósk Bergsdóttir
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
Sasha dos Santos
 
Revue des annonces WWDC2015
Revue des annonces WWDC2015Revue des annonces WWDC2015
Revue des annonces WWDC2015
CocoaHeads France
 
Framework dynamic par Simone Sivetta
Framework dynamic par Simone SivettaFramework dynamic par Simone Sivetta
Framework dynamic par Simone Sivetta
CocoaHeads France
 
O futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saberO futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saber
Danilo Bordini
 
Android Handheld Systems
Android Handheld SystemsAndroid Handheld Systems
Android Handheld Systems
Vyakhya Shrivastava
 
Light-up-your-out-of-the-box LightSwitch Application
Light-up-your-out-of-the-box LightSwitch ApplicationLight-up-your-out-of-the-box LightSwitch Application
Light-up-your-out-of-the-box LightSwitch Application
Boulos Dib
 
Docker Switzelrand Meetup #18 DockerCon Recap
Docker Switzelrand Meetup #18 DockerCon RecapDocker Switzelrand Meetup #18 DockerCon Recap
Docker Switzelrand Meetup #18 DockerCon Recap
Brian Christner
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to android
srinivasansoundar
 
Nitin devops
Nitin devopsNitin devops
Nitin devops
Nitin Mahajan
 
Android Overview
Android OverviewAndroid Overview
Android Overview
Raju Kadam
 
Sencha touchonbb10 bootcamp
Sencha touchonbb10 bootcampSencha touchonbb10 bootcamp
Sencha touchonbb10 bootcamp
n_adam_stanley
 
Capturing Your Audience with Kinect
Capturing Your Audience with KinectCapturing Your Audience with Kinect
Capturing Your Audience with Kinect
Shahed Chowdhuri
 
Introduction to android basics
Introduction to android basicsIntroduction to android basics
Introduction to android basics
Hasam Panezai
 
Nightly build done right
Nightly build done rightNightly build done right
Nightly build done right
Liora Milbaum
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanley
n_adam_stanley
 
Mastinder singh visualcv_resume
Mastinder singh visualcv_resumeMastinder singh visualcv_resume
Mastinder singh visualcv_resume
Mastinder Singh
 
Azure Mobile Services (+ Universal Apps)
Azure Mobile Services (+ Universal Apps)Azure Mobile Services (+ Universal Apps)
Azure Mobile Services (+ Universal Apps)
Shahed Chowdhuri
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
Sasha dos Santos
 
Framework dynamic par Simone Sivetta
Framework dynamic par Simone SivettaFramework dynamic par Simone Sivetta
Framework dynamic par Simone Sivetta
CocoaHeads France
 
O futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saberO futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saber
Danilo Bordini
 
Light-up-your-out-of-the-box LightSwitch Application
Light-up-your-out-of-the-box LightSwitch ApplicationLight-up-your-out-of-the-box LightSwitch Application
Light-up-your-out-of-the-box LightSwitch Application
Boulos Dib
 
Docker Switzelrand Meetup #18 DockerCon Recap
Docker Switzelrand Meetup #18 DockerCon RecapDocker Switzelrand Meetup #18 DockerCon Recap
Docker Switzelrand Meetup #18 DockerCon Recap
Brian Christner
 
Android Overview
Android OverviewAndroid Overview
Android Overview
Raju Kadam
 
Sencha touchonbb10 bootcamp
Sencha touchonbb10 bootcampSencha touchonbb10 bootcamp
Sencha touchonbb10 bootcamp
n_adam_stanley
 
Capturing Your Audience with Kinect
Capturing Your Audience with KinectCapturing Your Audience with Kinect
Capturing Your Audience with Kinect
Shahed Chowdhuri
 
Introduction to android basics
Introduction to android basicsIntroduction to android basics
Introduction to android basics
Hasam Panezai
 
Nightly build done right
Nightly build done rightNightly build done right
Nightly build done right
Liora Milbaum
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanley
n_adam_stanley
 

Viewers also liked (7)

Presentation JavaFX
Presentation JavaFXPresentation JavaFX
Presentation JavaFX
recon4
 
Pictures from DCF Workshop within Case Champ. 18 Feb 2011
Pictures from DCF Workshop within Case Champ. 18 Feb 2011Pictures from DCF Workshop within Case Champ. 18 Feb 2011
Pictures from DCF Workshop within Case Champ. 18 Feb 2011
Case Champ
 
Case champ - what case is
Case champ - what case isCase champ - what case is
Case champ - what case is
Case Champ
 
Фото с мастер-класса от компании ITT
Фото с мастер-класса от компании ITTФото с мастер-класса от компании ITT
Фото с мастер-класса от компании ITT
Case Champ
 
Hardware
HardwareHardware
Hardware
miketrain
 
Arcanum (online round)
Arcanum (online round)Arcanum (online round)
Arcanum (online round)
Case Champ
 
Cv guide from case champ
Cv guide from case champCv guide from case champ
Cv guide from case champ
Case Champ
 
Presentation JavaFX
Presentation JavaFXPresentation JavaFX
Presentation JavaFX
recon4
 
Pictures from DCF Workshop within Case Champ. 18 Feb 2011
Pictures from DCF Workshop within Case Champ. 18 Feb 2011Pictures from DCF Workshop within Case Champ. 18 Feb 2011
Pictures from DCF Workshop within Case Champ. 18 Feb 2011
Case Champ
 
Case champ - what case is
Case champ - what case isCase champ - what case is
Case champ - what case is
Case Champ
 
Фото с мастер-класса от компании ITT
Фото с мастер-класса от компании ITTФото с мастер-класса от компании ITT
Фото с мастер-класса от компании ITT
Case Champ
 
Arcanum (online round)
Arcanum (online round)Arcanum (online round)
Arcanum (online round)
Case Champ
 
Cv guide from case champ
Cv guide from case champCv guide from case champ
Cv guide from case champ
Case Champ
 
Ad

Similar to Presentation JavaFX (20)

Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
Stephen Chin
 
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet""BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
Software Park Thailand
 
JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014
Ryan Cuprak
 
Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
 Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
Codemotion
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Ryan Cuprak
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
Stephen Chin
 
Android : How Do I Code Thee?
Android : How Do I Code Thee?Android : How Do I Code Thee?
Android : How Do I Code Thee?
Viswanath J
 
Crosswalk and the Intel XDK
Crosswalk and the Intel XDKCrosswalk and the Intel XDK
Crosswalk and the Intel XDK
Intel® Software
 
Web development concepts using microsoft technologies
Web development concepts using microsoft technologiesWeb development concepts using microsoft technologies
Web development concepts using microsoft technologies
Hosam Kamel
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
juanjosanchezpenas
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
Sascha Corti
 
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Stephen Chin
 
JSF basics
JSF basicsJSF basics
JSF basics
airbo
 
[English version] JavaFX and Web Integration
[English version] JavaFX and Web Integration[English version] JavaFX and Web Integration
[English version] JavaFX and Web Integration
Kazuchika Sekiya
 
OpenJFX on Android and Devices
OpenJFX on Android and DevicesOpenJFX on Android and Devices
OpenJFX on Android and Devices
Stephen Chin
 
WebLogic and GraalVM
WebLogic and GraalVMWebLogic and GraalVM
WebLogic and GraalVM
Michel Schildmeijer
 
Guides To Analyzing WebKit Performance
Guides To Analyzing WebKit PerformanceGuides To Analyzing WebKit Performance
Guides To Analyzing WebKit Performance
National Cheng Kung University
 
WebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and SmartphonesWebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and Smartphones
Kyle McInnes
 
Busy developer-html5-javaee7
Busy developer-html5-javaee7Busy developer-html5-javaee7
Busy developer-html5-javaee7
Geertjan Wielenga
 
A164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdkA164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdk
Toby Corbin
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
Stephen Chin
 
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet""BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
Software Park Thailand
 
JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014
Ryan Cuprak
 
Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
 Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
Codemotion
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Ryan Cuprak
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
Stephen Chin
 
Android : How Do I Code Thee?
Android : How Do I Code Thee?Android : How Do I Code Thee?
Android : How Do I Code Thee?
Viswanath J
 
Crosswalk and the Intel XDK
Crosswalk and the Intel XDKCrosswalk and the Intel XDK
Crosswalk and the Intel XDK
Intel® Software
 
Web development concepts using microsoft technologies
Web development concepts using microsoft technologiesWeb development concepts using microsoft technologies
Web development concepts using microsoft technologies
Hosam Kamel
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
Sascha Corti
 
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Stephen Chin
 
JSF basics
JSF basicsJSF basics
JSF basics
airbo
 
[English version] JavaFX and Web Integration
[English version] JavaFX and Web Integration[English version] JavaFX and Web Integration
[English version] JavaFX and Web Integration
Kazuchika Sekiya
 
OpenJFX on Android and Devices
OpenJFX on Android and DevicesOpenJFX on Android and Devices
OpenJFX on Android and Devices
Stephen Chin
 
WebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and SmartphonesWebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and Smartphones
Kyle McInnes
 
Busy developer-html5-javaee7
Busy developer-html5-javaee7Busy developer-html5-javaee7
Busy developer-html5-javaee7
Geertjan Wielenga
 
A164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdkA164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdk
Toby Corbin
 
Ad

Presentation JavaFX