Creating JavaFX™ User
Experiences That Work
Jeff Hoffman
Jindrich Dinga
Karen Stanley
Sun Microsystems, Inc.
BOF-5150

Goals
Provide some tips on how we would do things
Share ideas
2

Agenda
Examples
Customizing the Experience
Visual Design
Resources (more examples, links & code samples)
This presentation is available at the Design at Sun
blog http://blogs.sun.com/designatsun
3

Pogo.com #1 - Best User Experience
User has the required version of Java already
installed
4

5

6

Pogo.com #2 - Clunky User Experience
The user has an old Java or Java is not installed
No detection on web site
User is left on his own - Bad user experience
7

8

9

Microsoft
IE Dialog
10

Doesn’t
really guide
you through
the process
11

Pogo.com #3 - Smoother User Experience
Required version of Java is not installed
JavaScript detection on web site
User is directed to Java.com web site and then sent
back to the original web page
12

13

Customized
dialog box
14

This is
actually
java.com
(sneaky)
15

16

17

18

After install
completes, user
is routed back to
pogo.com
19

20

21

JavaFX PIE Example
The following is an example of a JavaFX applet that
has been deployed on the JavaFX.com website
Machine without Java Installed
22

PIE Example – Default User Experience
23

PIE Example – media room (default)
Big White
Box
24

PIE Example – click to install Java
JavaFX DT
JavaScript
introduces this
message
25

PIE Example – Java install sequence
java.com is
loaded
26

PIE Example – Java install sequence
ActiveX warning
(replaced with
download dialog
in 6u14)
27

PIE Example – Java install sequence
IE Security
Warning Dialog
28

PIE Example – Java install
Installer starts
29

PIE Example – Java install complete When install is
complete, DT
takes you back
to the original
page
30

PIE Example – loading media room
Default animated
GIF on Big White
Box
31

PIE Example – media room applet starts
Applet begins
(and loads more
data)
32

PIE Example – media room applet running
33

JavaFX PIE Example - Smoother User
Experience
Remove some of the steps
Add custom touches to keep the user involved in
the web experience
34

PIE Example – home page
35

PIE Example – No Java
Customized
message
inserted (no
more big white
box!)
36

PIE Example – Install complete
Your website
maintains it’s
design during
Java install
37

PIE Example – media room applet starts
Custom loading
GIF means no
Big White Box!
38

PIE Example – media room applet running
39

PIE Example – some lessons
Using Deployment Toolkit (DT)
JavaFX DT: http://dl.javafx.com/1.2/dtfx.js
Java DT: http://java.com/js/deployJava.js
Java install invoked via customized button
Can customize the DT code and deploy on your
own site (it's just JavaScript)
40

Application Deployment Flow
Applet Loading
App Web Determine Drag to
Page System Running
Desktop
Required
Java? Web Start Splash Loading
Help Install
Page Java
IFTW or Error
Kernel Page
41

Application Deployment Flow
Applet Loading
Can
Customize the
App Web Determine UE basedDrag to
on OS
Page System or Browser Running
Desktop
Required
Java? Web Start Splash Loading
Help Install
Page Java
IFTW or Error
Kernel Page
42

Application Deployment Flow
Applet Loading
App Web Determine Drag to
Page System Running
Desktop
Required
Java? Web Start Splash Loading
Help Install Route the user as
Page Java necessary. Consider
using another page
IFTW or Error
Kernel Page
43

Application Deployment Flow
Applet Loading
Applet or Web
Start? Both now
App Web Determine Drag to use JNLP!
Page System Running
Desktop
Required
Java? Web Start Splash Loading
Help Install
Page Java
IFTW or Error
Kernel Page
44

Application Deployment Flow
Make your
applet behave like a
Applet Loading Web Start app
App Web Determine Drag to
Page System Running
Desktop
Required
Java? Web Start Splash Loading
Help Install
Page Java
IFTW or Error
Kernel Page
45

Application Deployment Flow
Applet Loading
App Web Determine Drag to
Page System Running
Desktop
Required
Java? Web Start Splash Loading
Point to
Help Install java.com help or
Page Java roll your own
IFTW or Error
Kernel Page
46

Customizing the Experience
Make it your own...
What do you get by default?
Java branded loading graphics
Java branded splash screen
Where you can define your own experiences...
Applet loading graphic & loading strategies (such as
loading a small applet that in turn loads the rest)
Web Start splash screen
Desktop/Start Menu items
How to invoke “Drag to the desktop”
Web page appearance if Java isn't installed yet...
47

Java Branded Graphics
Applet Loading Web Start
Splash Screen
48

Visual Design
Make a positive impression on the user
Consumer user experiences are becoming more
engaging...you need to think like a movie
producer.
Catch the user's attention and make them want to
install Java to run your app.
Take advantage of JavaFX Production Suite to
make incorporating artwork in your app easy.
49

Linksys EasyLink Advisor
50

Linksys EasyLink Advisor
51

HP Total Care Advisor
52

HP Total Care Advisor Nice icons, but
function can be
overshadowed
53

HP Machine Setup
54

Tech Test Train Application
55

Key Take Aways
Don't just do the default - it's not much effort to
make a big difference
Keep users in your web experience
Visual design is important to keep the user engaged
This presentation is available at the Design at Sun
blog http://blogs.sun.com/designatsun
56

Resources
Related Sessions
Useful Links
The End User's System
Sample Deployment Toolkit (DT) Code
Security Dialogs
Dealing with Unexpected Events
57

More Info on the Deployment Toolkit
Check out these sessions
Name (Session ID) When?
Upcoming Session
Distributing JavaFX™ Applications
with Java™ Web Start Software/
Friday June 05 4:10PM
Maven Repository Manager
(TS-4388)
Previous Sessions
Deploying Java™ Technology to
The Masses: How Sun Deploys Tuesday June 02 10:50 AM
The JavaFX™ Runtime (TS-4381)
Meet the Java™ Deployment
Tuesday June 02 7:30PM
Team (BOF-4383)
58

More Info on JavaFX Production Suite
A really great link between design and development
Previous Sessions
Getting the Most from the
Designers with the JavaFX™ Tuesday June 02 4:40 PM
Production Suite (TS-5494)
Quo Vadis JavaFX™ Production
Tuesday June 02 7:30 PM
Suite (BOF-5493)
JavaFX™ Technology in Action:
Wednesday June
From Design Tool to Desktop to 11:05 AM
03
Mobile Device (TS-4069)
59

www.timeanddate.com - IE
Default detection & default message
User is directed to another web site to get Java
The only way how to get the content running is
using Back button to navigate back to the original
page or type the URL again
This user experience may result in the user being
unsuccessful in getting back to the original page
and running the content
www.timeanddate.com/worldclock/
personalapplet.html
60

61

62

63

www.timeanddate.com - FF
Default detection & default message
User is told that Java is missing
After Java installation the browser does not load
Java automatically and displays that Java is still
missing
In order to run the content, the user must restart
browser manually
This user experience may result in the user being
unsuccessful in getting their content and installing
Java over and over again
www.timeanddate.com/worldclock/
personalapplet.html 64

65

66

67

68

69

70

71

72

www.cruisecheap.com - IE&FF
No detection at all
360° Viewer does not work and user does not know
why because there is no information that Java is
needed in order to start using Viewer
This user experience falls short of providing users
what they were promised. Although user may still
get the information (placeholder content), they
will not see the viewer and will not know why.
www.cruisecheap.com/virtual_ship_tours.asp
73

74

BMTtron game - FF
User is told that Java is missing and is directed to
another web site to get Java
The only way how to get the content running is
using Back button to navigate back to the original
page or type the URL again and reload the
browser
This user experience may result in the user being
unsuccessful in getting back to the original page
and running the content
www.hotscripts.com/category/java/applets/games-
entertainment/
75

76

77

78

79

80

81

82

Applet Deployment – Chemwriter
Detects that
Java is not
installed
Takes the user to a
custom page with
instructions
83

Applet Deployment – Chemwriter (2)
Launches
Java
Installer
84

Applet Deployment – Chemwriter (3)
Applet Running
85

Applet Deployment – Chemwriter (4)
Page describes
install process in
current site context
86

Chemwriter Example
Home Page Applet Running
Installer Panel
Help Page
87

Customizing the Experience
Useful Links
Pointers on how to update
Applet loading graphic & loading strategies
For example, see this jGuru article
Getting Started with WebStart Blog Entry
• Web Start splash screen
• Desktop/Start Menu items
Drag to the desktop experience
Web page appearance if Java isn't installed yet...
Web Start JNLP has many options – see this article
JavaScript for Getting User Information from a web
page visitor
88

Visual Design Useful Links
JavaFX.com
Finding Great Artwork for Your App
Create Visual Appeal in Your UI
More coming soon...
89

The End User's System
What does the user need to run your app?
Consider what's out there...
Minimum: Java 5+
Best: Latest (Java 6 Update 14 on Windows)
Possible situations – the machine has:
The version they need and it's loaded
The version they need, but it's not loaded
No Java at all
A version of Java that's too old for the app
Runs an OS that isn't supported by the app
90

Determining the End User's Needs
Use the Deployment Toolkit (DT)
If the users don't have what they need, the DT
helps you make sure they can run your app.
DT JavaScript can be used to:
Determine which version of Java (and JavaFX) is
on the user's system (if any)
Launch the Java installer (when necessary)
Return the user to the appropriate page
91

When Java Needs to be Installed
Various installers are available...
IFTW (Install from the Web) or Online Installer
renamed to JavaSetup6u14.exe
“Currently the most popular”, Approx 7MB overall,
Initial download < 1MB
Kernel Installer
“Just the essentials...and the rest comes later”,
Initial download < 1MB, Java apps can run after
about 4MB. The rest trickles down in the
background as needed. See Google Chrome.
Offline Installer (backup option)
“Everything and the kitchen sink”, approx 14MB
92

Installer Details
IFTW (JavaSetup6u14.exe)
java.com (and DT) invokes this one by default
setInstallerType: function(“online”)
Kernel
setInstallerType: function(“kernel”)
Offline
Direct the user to the java.com manual download
page and ask them to select the Offline Installer
93

java.com Manual Download
Online/IFTW
installer for
Windows
Offline installer
for Windows
94

Get the User Started
How does the user launch the app?
Applet placed directly on a web page
Application starts when the user clicks on a button
Download an executable JAR
Drag a running applet from the browser to the
desktop
The application then behaves like it was launched
via Web Start
95

Simple DT Example
<script src=\"http://java.com/js/deployJava.js\"></script>
<script>
var list = deployJava.getJREs();
var result = \"\";
result = list[0];
for (var i=1; i<list.length; i++) {
result += \", \" + list[i];
}
document.writeln(\"<p> You have installed:\\n \"+ result);
if (result == \"\") {
document.writeln(\"<p>You no Java installed.\");
deployJava.installLatestJRE();
} else {
document.writeln(\"<p>You have Java installed.\");
}
</script>
96

Drag to Desktop
Supported Browsers
Internet Explorer 6+ on Windows XP and Vista
Firefox 3 on Windows XP & Vista, Solaris, Linux
Simple APPLET code
<APPLET archive=\"my_applet.jar\"
code=\"MyApplet\" width=\"300\" height=\"300\">
<PARAM name=\"draggable\" value=\"true\">
</APPLET>
97

Menus, Shortcuts, Help
<shortcut online=\"true\">
<desktop />
<menu submenu=\"Corp Apps\"/>
</shortcut>
<information>
<title> MyApp </title>
<homepage href=\"myapp.html\">
</information>
98

Security Dialogs
When are they necessary?
Users perceive these dialogs as a “speed bump” on
the way to their goal (running YOUR app)
JavaFX now lets you perform many useful functions
without signing your app
Full Screen Video (on user initiated action)
Cross Domain Access
Local storage via the JNLP Persistence API,
updated for JavaFX
Upcoming Session
New Security Features in JDK™
Wednesday June 03 7:45PM
Releases 6 and 7 (BOF-5102)
99

Dealing with the Unexpected
Help the user get back on track...
Integrated error handling will help get the user back
on the right track.
As simple as pointing to the help pages on
java.com, or giving your own advice as it pertains
to your application (i.e. Chemwriter example)
100

Jeff Hoffman
jeff.hoffman@sun.com
Jindrich Dinga
jindrich.dinga@sun.com
Karen Stanley
karen.stanley@sun.com
Java User Experience Design