3. 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
4. Pogo.com #1 - Best User Experience
User has the required version of Java already
installed
4
7. 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
12. 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
22. 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
40. 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
41. 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
42. 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
43. 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
44. 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
45. 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
46. 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
47. 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
49. 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
56. 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
57. Resources
Related Sessions
Useful Links
The End User's System
Sample Deployment Toolkit (DT) Code
Security Dialogs
Dealing with Unexpected Events
57
58. 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
59. 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
60. 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
64. 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
73. 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
75. 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
86. Applet Deployment – Chemwriter (4)
Page describes
install process in
current site context
86
87. Chemwriter Example
Home Page Applet Running
Installer Panel
Help Page
87
88. 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
89. Visual Design Useful Links
JavaFX.com
Finding Great Artwork for Your App
Create Visual Appeal in Your UI
More coming soon...
89
90. 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
91. 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
92. 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
93. 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
95. 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
96. Simple DT Example
<script src=quot;http://java.com/js/deployJava.jsquot;></script>
<script>
var list = deployJava.getJREs();
var result = quot;quot;;
result = list[0];
for (var i=1; i<list.length; i++) {
result += quot;, quot; + list[i];
}
document.writeln(quot;<p> You have installed:n quot;+ result);
if (result == quot;quot;) {
document.writeln(quot;<p>You no Java installed.quot;);
deployJava.installLatestJRE();
} else {
document.writeln(quot;<p>You have Java installed.quot;);
}
</script>
96
97. 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=quot;my_applet.jarquot;
code=quot;MyAppletquot; width=quot;300quot; height=quot;300quot;>
<PARAM name=quot;draggablequot; value=quot;truequot;>
</APPLET>
97
99. 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
100. 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