GWT Plus HTML 5

GWT + HTML5
GTUG Atlanta
David Chandler drfibonacci@google.com
Philip Rogers pdr@google.com

Thursday, June 30, 2011 1

Agenda

• Overview
• Local Storage for performance
• Visualizations via Canvas
• Enrich your app with Audio
• Embedding Video in your app
• Drag and Drop support
• Handling unsupported browser versions
• CSS3 makes its way into GWT
• Angry Birds / ForPlay


Overview

• What to expect
o Lots of demos
o Lots of code examples
• What you will learn
o How to use HTML5 in your GWT app


Overview
What is HTML5?
• HTML5 includes lots of stuff
o Media rich DOM elements
o Useful new APIs
o CSS3 enhancements
• Support is increasing very rapidly
• Embrace it to make your apps stand out


Why now?


Why now?

Hint:


HTML5 for Designers

header,nav,footer -- more semantic meaning
aside concept
HSL color
@font-face
border-radius
transforms, transitions
Canvas
HTML5 video player (sans Flash)


HTML5 for Programmers
• WebSockets
• Client-side storage
o LocalStorage API
o Web SQL (it's dead, Jim)
o indexedDB
• Web Workers
• form fields
o type=email,date,range,search,tel,color,...
• <meter>,<progress>
• app cache
• notifications
• geolocation
• device orientation
• server side events


HTML5 support

http://www.html5rocks.com/

http://html5test.com


Agenda

• Overview


Local Storage
Isn't it just a cookie?


Local Storage
Isn't it just a cookie?

• Cookies are sent with each request!
• Local storage provides MBs worth of storage
• Local storage can be shared between browser windows


Local Storage
Available in GWT
• GWT provides a Storage API

Storage storage = Storage.getLocalStorageIfSupported();
if (storage != null) {
storage.setItem("foo", "bar");
}

String value = storage.getItem("foo");
}


Local Storage
Available in GWT

}

}


Local Storage
Available in GWT
• StorageMap lets you access storage using a java.util.Map
o Contributions by Bart Guijt

StorageMap map = new StorageMap(storage);
storage.put("foo", "bar");
}


Local Storage
For improved performance
• Cache data from RPC calls
• Load cached data on startup for faster startup times


Local Storage
• Cache data from RPC calls
• Load cached data on startup for faster startup times


Local Storage

Demo


Local Storage
For improved user experience

• Save temporary state to local storage
• Restore state when user re-enters app
• Prevent lost work on network disconnect


Agenda

• Overview


Canvas
Adding visualizations to your app

• This slide is boring

Past Due 3
Due Tomorrow 1
On Time 1
No Due Date 6


Canvas

• Charts bring data to life
• Canvas brings charts to the web


Canvas

Demo


Canvas

1. Initialize the canvas
2. Calculate values for new shapes
3. Clear the current canvas
4. Draw the new shapes


// Initialize the canvas.
final Canvas canvas = Canvas.createIfSupported();
canvas.setCoordinateSpaceHeight(300);
canvas.setCoordinateSpaceWidth(300);
canvas.setPixelSize(300, 300);
// Get the dimensions of the canvas.
int width = canvas.getCoordinateSpaceWidth();
int height = canvas.getCoordinateSpaceHeight();
double radius = Math.min(width, height) / 2.0;
double cx = width / 2.0;
double cy = height / 2.0;
// Clear the context.
Context2d context = canvas.getContext2d();
context.clearRect(0, 0, width, height);
// Draw a filled arc.
context.setFillStyle(CssColor.make(255, 211, 25));
context.beginPath();
context.moveTo(cx, cy);
context.arc(cx, cy, radius, 0, Math.PI);
context.fill();


context.ﬁll();


Canvas

• Canvas has a coordinate space separate from DOM size
• Coordinate space is scaled to the DOM size
o Small coordinate space = faster performance
o Large coordinate space = higher quality
• Match coordinate space to DOM size
o Assign a fixed size to the DOM element, or
o Catch resize events and adjust the coordinate space

300x300 30x30


Agenda

• Overview


Audio

• Embed audio using the Audio widget
• Play a sound or stream


Audio

Demo


Audio

• Format support varies across browsers
• Choose at least two of the three main formats

Ogg Vorbis MP3 WAV

Chrome ✓ ✓
Firefox ✓ ✓
Internet
Explorer ✓ ✓
Opera ✓ ✓
Safari ✓ ✓
Source: http://html5doctor.com/native-audio-in-the-browser/


Audio
Specify multiple sources

• You can specify multiple sources in HTML5
• Don't forget the "type" attribute
o Browsers will load all source files
o Must load meta data to detect mime-type
o Cannot assume mime-type from file extension

<audio controls>
<source src="path/file.ogg" type="audio/ogg" />
<source src="path/file.mp3" type="audio/mpeg" />
<source src="path/file.wav" type="audio/wav" />
</audio>


Audio
Specify multiple sources (2.4)
public Audio createAudio() {
Audio audio = Audio.createIfSupported();
if (audio == null) {
return;
}

audio.addSource("path/file.ogg", AudioElement.TYPE_OGG);
audio.addSource("path/file.mp3", AudioElement.TYPE_MP3);
audio.addSource("path/file.wav", AudioElement.TYPE_WAV);

// Show audio controls.
audio.setControls(true);
return audio;
}


Audio
return;
}


return audio;
}


Audio
Manually choose the source
• You can ask the browser which files it might support
o Tells you "probably", "maybe", or ""
• Ensures that you only load that source


return;
}
if (MediaElement.CAN_PLAY_PROBABLY.equals(
audio.canPlayType(AudioElement.TYPE_OGG)) {
audio.setSrc("path/file.ogg");
} else if (MediaElement.CAN_PLAY_PROBABLY.equals(
audio.canPlayType(AudioElement.TYPE_MP3)) {
audio.setSrc("path/file.mp3");
} else if (MediaElement.CAN_PLAY_MAYBE.equals(
}
return audio;
}


return;
}
if (MediaElement.CAN_PLAY_PROBABLY.equals(
audio.setSrc("path/file.ogg");
} else if (MediaElement.CAN_PLAY_PROBABLY.equals(
}
return audio;
}


Audio
Preloading a file
• Let the browser decide when to preload

audio.setSrc("path/ﬁle.ogg");
audio.setPreload(MediaElement.PRELOAD_AUTO);

• Or force the browser to preload

audio.load();


Audio
Preloading a file



audio.load();


Agenda

• Overview


Video

• Embed videos using the Video widget
• Play a static video or a stream


Video

Demo


Video

• Format support varies across browsers
• Choose at least two of the three main formats
o Safari only supports mp4

Ogg Vorbis MP4 WebM

Chrome ✓ ✓
Firefox ✓ ✓
Internet
Explorer ✓
Opera ✓ ✓
Safari ✓
Source: http://en.wikipedia.org/wiki/HTML5_video


Video
public Video createVideo() {
  Video video = Video.createIfSupported();
if (video == null) {
return null;
}

  video.addSource("path/file.ogg", VideoElement.TYPE_OGG);
video.addSource("path/file.mp4", VideoElement.TYPE_MP4);
video.addSource("path/file.webm", VideoElement.TYPE_WEBM);

  video.setControls(true);
return video;
}


Video
return null;
}


return video;
}


Agenda

• Overview


Drag and Drop

• Move stuff around... with style
• Associate text or ID with the event
• Many types of drag events


Drag and Drop

Demo


Drag and Drop
Make a widget draggable
• Set the "draggable" attribute to "true"
• Add a DragStart handler
• Set data in the DragStart handler


Drag and Drop
// Make the widget draggable.
Label w = new Label("Drag Me");
w.getElement().setDraggable(Element.DRAGGABLE_TRUE);

// Add a DragStartHandler.
w.addDragStartHandler(new DragStartHandler() {
public void onDragStart(DragStartEvent event) {
// Required: set data for the event.
event.setData("text", "Hello World");

// Optional: show a copy of the widget under cursor.
event.getDataTransfer().setDragImage(w.getElement(),
10, 10);
}
});


Drag and Drop


10, 10);
}
});


Drag and Drop
Create a target
• Add a DragOver handler
• Add a Drop handler
o Prevent default action
o Get the data from the transfer object


Label target = new Label("Drag onto me");

// Required: You must add a DragOverHandler to
// create a target.
target.addDragOverHandler(new DragOverHandler() {
public void onDragOver(DragOverEvent event) {
target.getElement().setBackgroundColor("#ffa");
}
});

// Add a DropHandler.
target.addDropHandler(new DropHandler() {
public void onDrop(DropEvent event) {
// Prevent the native text drop.
event.preventDefault();

// Get the data out of the event.
String data = event.getData("text");
target.setText(data);
}
});



// create a target.
}
});


}
});


Drag and Drop
On any widget
• Some widgets do not implement drag handlers
• You can always use addDomHandler() to add a handler

w.addDomHandler(new DragStartHandler() {

event.getDataTransfer().setDragImage(w.getElement,
10, 10);
}
}, DragStartEvent.getType());


Drag and Drop
+ File API?
• Spec is still changing rapidly.
• Not in GWT (yet!)

File[] files = event.getDataTransfer().getFiles();

// read an entire file
String txt = FileReader.readAsBinaryString(files[0]);

// read a chunk of a file
Reader reader = new Reader();
Blob blob = files[0].slice(startingByte, length);
String txt = reader.readAsBinaryString(blob);


Drag and Drop Uploader

Demo


Agenda

• Overview


Partial Support
Because if all browsers supported it, it would be too easy

• GWT provides APIs that are not supported in all browsers
o Modern browsers gaining market share rapidly
• Implementors of PartialSupport provide two static methods:
o isSupported()
o createIfSupported()
 "Compiles out" if on a non-supported permutation!


Partial Support
Fallback to another implementation
public void showChart(AcceptsOneWidget panel,
ChartData data) {
Canvas canvas = Canvas.createIfSupported();
if (canvas == null) {
// Fallback to an image if Canvas isn't supported.
String imageUrl = encodeChartData(data);
panel.setWidget(new Image(imageUrl);
return;
}

// Create a canvas chart.
...

// Display the canvas.
panel.setWidget(canvas);
}


Agenda

• Overview


CSS3
Style your GWT app

• Nothing special required for CSS3
o Rounded corners, drop shadows, animations, group opacity,
multiple backgrounds, 3D transforms, etc.
o No changes required for GWT's UIBinder


CSS3 in GWT's Widgets
• As of GWT 2.3, widgets now use CSS3
• On legacy browsers, widgets will be "usable"

Example: Rounded Corners


Agenda

• Overview


Angry Birds / ForPlay

Demo


Angry Birds
An HTML5 GWT app

• Announced at Google IO 2011
• Built with a library called ForPlay
o Uses GWT for Java -> HTML5 step.
• Uses most of the technologies talked about here
o Canvas, Audio*, Storage, CSS3
o Prove it


Angry Birds
An HTML5 GWT app

• Announced at Google IO 2011
• Built with a library called ForPlay
o Uses GWT for Java -> HTML5 step.
• Uses most of the technologies talked about here
o Canvas, Audio*, Storage, CSS3
o Prove it

• Check out the I/O talk:
Kick-Ass Game Programming
with Google Web Toolkit
• http://goo.gl/UZ4X4


ForPlay
In 30 seconds

• Cross-platform library for games
o Cross-browser (HTML5): WebGL, Canvas, 3D CSS
o Android, Flash, and Java apps too
• Write and debug games using the ForPlay API, compile
onto many platforms.
• API includes cross-platform abstractions for startup,
asset management, input (keyboard, touch, mouse),
audio, graphics, physics engine (box2d), json parsing,
etc.


ForPlay
An GWT library for games

• Some demos
o Joel Webber's XNA Platormer port
o Aquarium by Mohamed Ousgougou / SFEIR
o http://p4cdroid.appspot.com/
o more examples, including source at gwtforplay.com

• For more info or if you'd like to join in:
http://gwtforplay.com


GWT + HTML5
GTUG Atlanta
David Chandler drfibonacci@google.com
Philip Rogers pdr@google.com


GWT Plus HTML 5

More Related Content

Similar to GWT Plus HTML 5 (20)

More from David Chandler (13)

Recently uploaded (20)

GWT Plus HTML 5