JavaFX introduction + development cycle. Presented at JavaEdge 2009 by Yoav Aharoni.

1. JavaFX
From Sketch Board to Production
Yoav Aharoni, Web Consultant

2. 2
» JavaFX - In a Nutshell.
» 7 Steps to creating your JavaFX application:
For each step {
• Covering tools and resources.
• Getting just a bit technical.
}
» When you leave, you should know:
 What you can do with JavaFX
 What is available for you when developing with JavaFX.
Agenda
Introduction

3. Java Is a Great Language
But Not For UI

4. 5
» Sun’s Answer to RIA, Rich Internet Application.
(Because Swing sucks...)
» It’s a platform for developing applications.
» Meaning, it has a whole set of tools for that.
» Including a verrry cooool scripting language.
So, What’s JavaFX?
Introduction
Stage {
scene: Scene {
content: Label {text:"Don't Make a Scene"} } }

5. 6
» Runs on the JVM (+ Java Browser Plug-in).
» The famous “Write once, Run anywhere.”
 Common API + APIs for Applets, Web Starts, Mobile and TV.
» Supported by device manufacturers and content
developers (LG, Ericsson, MobiTV, ...)
Where Does It Run?
Introduction

6. 7
What Can I Do With It?
Introduction
This
And
More...

7. 8
» Great!
» Sounds really cool!
» I want one!
» ... How do I get started?
Cool... So How Do I Get Started?
Introduction

8. Creating Your First JavaFX Application
Going From Sketch Board to Production

9. 10
1. Sketch
2. Setup DevEnv
3. Draw UI
4. Develop
5. Build
6. Test
7. Deploy
7 Steps TODO List
Things You Gotta Do:
Steps For Creating JavaFX Application

10. Sketch
Step 1
Sketch DevEnv Draw Develop Build Test Deploy Finish

11. 12
» This is the step in which you come up with an
idea for an application and sketch it...
Explanation
» Alcohol or Jelly Beans
» Paper and Pencil
» Friends and Colleagues
» Sketch Board
Ingredients
Step 1: Sketch

12. Setup Development Environment
Step 2
Sketch DevEnv Draw Develop Build Test Deploy Finish

13. 14
» JavaFX SDK (currently SDK 1.2.1)
» JDK , at least 6u10 (currently 6u17)
» IDE Of Choice
» Maven (Optional)
Ingredients
» Download JavaFX SDK & JDK
» Choose IDE
» Create Project
What We’ll Do
Step 2: Setup Dev. Environment

14. 15
» You got 3 options:
1. IntelliJ – Great Java IDE. Not yet for JavaFX.
2. Eclipse – Good Java IDE. Two plug-ins are available:
• Sun’s JavaFX Studio Plug-in – Better, still not so good.
• Exadel JavaFX Eclipse Plug-in – Better, still not so good.
3. NetBeans - Good Java IDE (although I rather use Eclipse);
» So - NetBeans is best for JavaFX so far.
Choose Your IDE
Step 2: Setup Dev. Environment

15. 16
» You got 3 options:
1. IntelliJ – Great Java IDE. Not yet for JavaFX.
2. Eclipse – Good Java IDE. Two plug-ins are available:
• Sun’s JavaFX Studio Plug-in – Better, still not so good.
• Exadel JavaFX Eclipse Plug-in – Better, still not so good.
3. NetBeans - Good Java IDE (although I rather use Eclipse);
» So (unfortunately for me) - NetBeans is best for JavaFX
so far.
Choose Your IDE
Step 2: Setup Dev. Environment

16. 17
» You got 3 options:
1. IntelliJ – Great Java IDE. Not yet for JavaFX.
2. Eclipse – Good Java IDE. Two plug-ins are available:
• Sun’s JavaFX Studio Plug-in – Better, still not so good.
• Exadel JavaFX Eclipse Plug-in – Better, still not so good.
3. NetBeans - Good Java IDE (although I rather use Eclipse);
» So - NetBeans is best for JavaFX so far.
Choose Your IDE
Step 2: Setup Dev. Environment
Run, Debug JavaFX Projects
Auto Complete, Syntax Highlighting
No Auto Import
Occasionally Null-Pointer Exception

17. 18
» You got 3 options:
1. IntelliJ – Great Java IDE. Not yet for JavaFX.
2. Eclipse – Good Java IDE. Two plug-ins are available:
• Sun’s JavaFX Studio Plug-in – Better, still not so good.
• Exadel JavaFX Eclipse Plug-in – Better, still not so good.
3. NetBeans - Good Java IDE (although I rather use Eclipse);
» So - NetBeans is best for JavaFX so far.
Choose Your IDE
Step 2: Setup Dev. Environment
Run, Debug JavaFX Projects
Auto Complete, Syntax Highlighting
Auto Import
Auto Import Comment Bug
Auto Complete Is Missing Options

18. 19
» You got 3 options:
1. IntelliJ – Great Java IDE. Not yet for JavaFX.
2. Eclipse – Good Java IDE. Two plug-ins are available:
• Sun’s JavaFX Studio Plug-in – Better, still not so good.
• Exadel JavaFX Eclipse Plug-in – Better, still not so good.
3. NetBeans - Good Java IDE (although I rather use Eclipse);
» So - NetBeans is best for JavaFX so far.
Choose Your IDE
Step 2: Setup Dev. Environment
Run, Debug JavaFX Projects
Auto Complete, Syntax Highlighting
Auto Import
No Exceptions

19. 20
» Focus on two options:
Create a JavaFX Project
Step 2: Setup Dev. Environment
(1)
IDE
(2)

20. 21
» I Don’t speak Yiddish...
» Go ask Baruch, he’s giving a lecture on build systems.
» Maven is a build util and much more...
*Maven* You said?
Step 2: Setup Dev. Environment

21. 22
» It’s a good way to describe your project.
» You can easily find and get 3rd-party dependencies.
(No need to add them jars to source control).
» You can easily move between IDEs.
» Fellow Java developers won’t need JavaFX SDK.
» Will be used in later steps (build, test, deploy)...
Why I Choose Maven
Step 2: Setup Dev. Environment

22. 23
» Create a POM describing your project.
» Add dependencies for JavaFX artifacts.
» Add and configure jfrog-javafx-plugin.
Setting Up a Maven JavaFX Project
Step 2: Setup Dev. Environment

23. 24
POM Code Snippet
Step 2: Setup Dev. Environment
<dependency>
<groupId>javafx</groupId>
<artifactId>javafx-common</artifactId>
</dependency>
...
<plugin>
<groupId>org.jfrog.maven.plugins</groupId>
<artifactId>jfrog-javafx-plugin</artifactId>
<executions> ... </executions>
<configuration> ... </configuration>
</plugin>

24. 25
» Problem: in NetBeans, JavaFX and Maven don’t mix...
» Solution: There’s half a solution
» Other Solutions:
 Fallback to Eclipse.
Oh oh...
Step 2: Setup Dev. Environment
@#@!%
&**!!!

25. Draw UI
Step 3
Sketch DevEnv Draw Develop Build Test Deploy Finish

26. 27
» Literally draw your application UI.
» A developer? Better have a graphic designer for this...
What We’ll Do
» JavaFX Production Suite
» JFX Builder (Web Start)
» Adobe Illustrator / Photoshop
» Inkscape Snapshot (Devel)
» Any Other SVG Editor (Sketsa, Sodipodi, Amaya,...)
Ingredients
Step 3: Draw UI

27. 28
Drawing Process...
Step 3: Draw UI
Developer Designer Drawing Tool
JavaFX
Production Suite

28. 29
Designer’s Options
Step 3: Draw UI
Adobe Illustrator
Adobe Photoshop
+ JavaFX Plug-in
Pros: Powerful, Well-Known
Cons: $$$
Inkscape +
JavaFX Module
Pros: Easy, Open-Source
Cons: No Animations, Forms
JavaFX Builder
(Web Start App)
Pros: Animations, Forms
Cons: Poor UI (Relatively)
Other SVG Editor
+ SVG to JavaFX Converter
Pros: Free Choice
Cons: One More Step

29. 30
» JavaFX Production Suite will generate a *.fxz file.
 It’s a zip containing *.fxd source code.
 Either extract and edit it.
 Or use FXDLoader.load(“url”).
» Notes:
 Give good Ids to elements you’ll use in code.
 Give “JFX:” prefix to Ids.
Getting The JavaFX Code
Step 3: Draw UI
Give
Ids

30. 31
Quick Demo
Step 3: Draw UI

31. Develop JavaFX
Step 4
Sketch DevEnv Draw Develop Build Test Deploy Finish

32. 33
» Wikis, Examples and Blogs
» 3rd Party Libs: WidgetFX, JFXtras, Nelson, ...
Ingredients
» Learn JavaFX
» Use JavaFX SDK APIs
» Use 3rd-Party Libs
What We’ll Do
Step 4: Develop JavaFX

33. 34
» Frankly, this stuff can be covered in dozens of
presentations.
» But we only have ½ hour.
» So, lets just review some pointers.
Time Limit
Step 4: Develop JavaFX

34. 35
» Relevent Sites:
 JavaFX Official Site
 Planet JFX Wiki
 Free JavaFX Lessons
 James Weaver’s Blog
 Chris Oliver’s Blog
 Steve on Java Blog
 Sun’s JavaFX Blog
» Resources are at end of this presentation.
First Things First - Learning JavaFX
Step 4: Develop JavaFX
About JavaFX,
Quick Starts
Demos, ...

35. 36
» Get familiar with JavaFX script features like:
 Array-like “Sequences” with cool built-in queries.
 Out-of-the-box Data Binding
 Triggers
 String Expressions
 Closures
 Pseudo-Variables like __DIR__ (for images/other resources).
Know Thy Language Features
Step 4: Develop JavaFX
Small Demo

36. 37
» You can do lots of stuff just out-of-the-box,
Learn the classes and utilities involved for doing:
 Visual Effects (Shadow, Glow, Mask,...)
 Interactive Forms, Components and Widgets
 Animation
 Charts
 Swing Integration
 CSS Skinning
 Drag n’ Drop
 Audio, Video
And Thy SDK API
Step 4: Develop JavaFX
Small Demo

37. 38
» You also have device specific APIs:
 Applet?
• Interact with containing page.
• Execute JavaScript (Live Connect/AppletStageExtension).
• Drag applet drop out of the browser.
 Desktop?
• Make Transparent or Always On Top desktop application.
 Mobile?
• MSA (JSRs 248 and 249)
Know Thy Other APIs
Step 4: Develop JavaFX

38. 39
» You also have device specific APIs:
 Applet?
• Interact with containing page.
• Execute JavaScript (Live Connect/AppletStageExtension).
• Drag applet drop out of the browser.
 Desktop?
• Make Transparent or Always On Top desktop application.
 Mobile?
• MSA (JSRs 248 and 249)
Know Thy Other APIs
Step 4: Develop JavaFX
JSR 177
Security &
Trust services
JSR 229
Payments
Security &
Commerce
JSR 135
Mobile Media
JSR 184
3D Graphics
JSR 226
SVG
JSR 234
Multimedia
Supplements
Graphics
JSR 238
Mobile I18n
JSR 172
Web Services
JSR 211
Content
Handler
Application
Connectivity
JSR 120
SMS
JSR 82
Bluetooth
JSR 205
MMS
JSR 180
SIP
Comms
JSR 75
PIM & File
JSR 179
Location
Personal
Information
JSR 118, 271
MIDP
JSR 248
MSA
clarifications
JSR 139
CLDC
Environment JSR 218
CDC

39. 40
» Can’t have it all in the SDK...
» JFXtras have some nice utils and components:
 SceneToJComponent - Embedding JavaFX in Swing.
 JSONHandler, XMLHandler - Stream --> JavaFX objects.
 “Debugging” - SideHatch
 Layouts, Borders, Menu, Grid, Shapes,...
» If you’re creating a desktop widget you might want to
check out WidgetFX SDK and widget library.
3rd-Party Projects and Libs
Step 4: Develop JavaFX
Small Demo

40. 41
» The Nelson Framework also has some widgets, utils
and a grid.
» Accessibility? – FXAccessible!
» If you need Inverse Kinematics (simulate body
motion), FXUtil is a nice library.
3rd-Party Projects and Libs
Step 4: Develop JavaFX
Small Demo

41. 42
» Need Java Objects in JavaFX?
» Just import them, it’s as simple as that.
» Use JavaFX Binder for binding to Java beans.
» Need JavaFX objects in Java?
 Use Java interfaces.
 Use JSR 223 (Scripting for the Java).
 Or FXBean.
JavaFX <--> Java
Step 4: Develop JavaFX

42. 43
» Use modules.
» Use Java for back-end / model.
 JavaFX has no annotations, collections or generics.
 Use JavaFX Binder for binding.
» Do quick code-test cycles with Lobo Browser.
» Write JavaFXdoc.
 XML instead of HTML
 A nice @example feature.
Development Tips
Step 4: Develop JavaFX

43. 44
Development Tips
» Use modules.
» Use Java for back-end / model.
 JavaFX has no annotations, collections or generics.
 Use JavaFX Binder for binding.
» Do quick code-test cycles with Lobo Browser.
» Write JavaFXdoc.
 XML instead of HTML
 A nice @example feature.
@example
Step 4: Develop JavaFX
Syntax Highlighting
+ Screenshot

44. 45
Nice Effects App

45. Build
Step 5
Sketch DevEnv Draw Develop Build Test Deploy Finish

46. 47
» IDE
» Maven
 Maven JavaFX Plug-in
» Ant
What Are We Doing
» Creating JARs for deployment...
Ingredients
Step 5: Build
A Different Build

47. 48
Bob, Choose a Build Tool
Step 5: Build
JavaFXPackager
Found in SDK
Chosen IDE
Maven Ant (+ Ivy)
Using JavaFxAntTask

48. 49
» You can build using Desktop or Mobile profile.
» For desktop you’ll get a jar file, 2 *.jnlp files and html
file for running as an Applet or a Web Start.
» For mobile you’ll get a jar file and a jad file.
What Are We Getting
Step 5: Build
JNLP = Java Network Launch Protocol

49. 50
» Sign your jars
 Using JavaFXPackager do javafxpackager -sign
 In Eclipse/NetBeans there’s a checkbox you can check.
 Using maven jar:sign.
Security
Step 5: Build

50. 51
30 Lines / 3000 Characters - Contest Winner
Break... A Quick Demo
Matthew Hegarty’s Video Poker

51. Test Application
Step 6
Sketch DevEnv Draw Develop Build Test Deploy Finish

52. 53
» Maven / Ant (Optional)
» JFXtras
Ingredients
» Unit Testing out application
What Are We Doing?
Step 6: Test

53. 54
» You can write JUnit tests with JavaFX.
» You’ll be running into trouble, so:
 Use the JUnit 3.x approach (extend TestCase).
 Execute it using TestRunner.
 Or by patching JUnit.
» When using robots, there are hacks for getting JFrame.
» Write JavaFX tests using JFXtras Test base class.
 To be replaced with FEST-JavaFX.
Test JavaFX with JavaFX
Step 6: Test

54. 55
» Will Give
JFXtras Test Example
Step 6: Test
Test {
say: "factorialGood should return 24."
do: function () { factorialGood (4) }
expect: Expect.equalTo (24)
}.perform ();
test: factorialGood should return 24.
Test Results: 1 passed, 0 failed, 0
skipped.
Test run was successful!

55. 56
» (Lucky) Windows Users
 Using Mobile Emulator found in JavaFX SDK.
 Or using Java ME SDK 3.0.
» Mac Users
 There’s an Java ME SDK early access on MacOS.
» Linux Users
 Sorry, not yet.
 But working on it...
 You always can use VirtualBox ...
Emulate Mobile Devices
Step 6: Test

56. 57
3D Maze

57. Deploy
Step 7
Sketch DevEnv Draw Develop Build Test Deploy Finish

58. 59
» Web Server
» Artifactory Maven Repository
Ingredients
» Put our built app on the web as an Applet or
Web Start.
What We’ll do
Step 7: Deploy

59. 60
1. Edit JNLP jar references
and codebase.
2. <a>link</a> to the JNLP.
3. Or better, add
Deployment Toolkit
JavaScript.
1. Add dtfx.js to page.
2. Use javafx().
3. Or use Deployment
Toolkit JavaScript.
* Prefer JNLP configuration.
Deploy Web Start Deploy Applet
Step 7: Deploy
This is Where Maven
is handy - You Don’t
re-edit the JNLP.

60. 61
» Here’s a twist, deploy to a Maven Repository –
Artifactory.
 Artifactory has an addons package for doing just that.
» Pros:
 Automatic jar signing at deployment.
 Easily re-deploy modules of your application.
 Client cache and reuse common modules/jars.
 Get usage statistics.
A New Way to Deploy JavaFX
Step 7: Deploy

61. 64
Break! – Bon Appétit

62. Resources
Links to what we talked about

63. 66
» See What JavaFX Can Do
» Dublin Pubs
» Jelly Beans Stores
Step 1 Resources
Step 1: Sketch

64. 67
» Download JDK 6u16 + JavaFX 1.2.1 SDK
» Download Netbeans + JavaFX Plug-in.
» Download Eclipse
» Sun’s JavaFX Feature Eclipse Plug-in
» Exadel JavaFX Studio Eclipse Plug-in
» Download Maven
» JavaFX Maven Plugin
Step 2 Resources
Step 2: Setup Dev. Environment

65. 68
» Download Inkscape Snapshot (Devel)
» Download Adobe CS4
» Download JavaFX Production Suite
» Download Sketsa SVG Editor
» Sodipodi Project
» Launch JFXBuilder
» Images and Other Resources
Step 3 Resources
Step 3: Draw UI

66. 69
» Learn JavaFX
 JavaFX Official Site
 JavaFX at Sun
 Free JavaFX Training
 Planet JFX Wiki
 JFXStudio
» Blogs
 James Weaver’s Blog
 Learning JavaFX
 The Java FX Journey
 Sun’s JavaFX Blog
 Chris Oliver’s Blog
 Steve on Java Blog
Step 4 Resources
Step 4: Develop JavaFX

67. 70
» 3rd Party Libs
 JFXtras
 WidgetFX
 FXUtil
 JavaFX Binder
 Nelson Framework
 FXAccessible
» Tools
 JavaFX Pad
 Lobo Project
More Step 4 Resources
Step 4: Develop JavaFX

68. 71
» JavaFX SDK
» Maven
» JavaFX Maven Plugin
» About JavaFxAntTask
» Executing JavaFXPackager from Ant
» Baruch’s JavaEdge 2009 Presentation on Build
Step 5 Resources
Step 5: Build

69. 72
» JFXtras Test Class API
» Download Java ME SDK 3.0
» Steve on Java Blog
Step 6 Resources
Step 6: Test

70. 73
» JavaFX Deployment Tutorial
» Java Rich Internet Applications Deployment Advice
» JavaOne: Distributing JavaFX Applications
» Using Java Deployment Toolkit with JavaFX Applets
» Java Web Start
» Frogs JavaEdge 2009 Presentation on Artifactory
Step 7 Resources
Step 7: Deploy

71. 74
» Java Web Start
» Java Deployment Toolkit
Step 8 Resources
Step 8: Final Touches

72. Thank You
Questions?