GWT + HTML5    GTUG Atlanta    David Chandler drfibonacci@google.com    Philip Rogers pdr@google.comThursday, June 30, 201...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Overview  • What to expect    o Lots of demos    o Lots of code examples  • What you will learn    o How to use HTML5 in y...
Overview    What is HTML5?   • HTML5 includes lots of stuff      o Media rich DOM elements      o Useful new APIs      o C...
Why now?Thursday, June 30, 2011   5
Why now?                          Hint:Thursday, June 30, 2011           6
HTML5 for Designers                    header,nav,footer -- more semantic meaning                    aside concept        ...
HTML5 for Programmers                     • WebSockets                     • Client-side storage                        o ...
HTML5 support                          http://www.html5rocks.com/                             http://html5test.comThursday...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Local Storage    Isnt it just a cookie?Thursday, June 30, 2011       11
Local Storage    Isnt it just a cookie?  • Cookies are sent with each request!  • Local storage provides MBs worth of stor...
Local Storage    Available in GWT  • GWT provides a Storage API    Storage storage = Storage.getLocalStorageIfSupported();...
Local Storage    Available in GWT  • GWT provides a Storage API    Storage storage = Storage.getLocalStorageIfSupported();...
Local Storage    Available in GWT  • GWT provides a Storage API    Storage storage = Storage.getLocalStorageIfSupported();...
Local Storage    Available in GWT  • StorageMap lets you access storage using a java.util.Map        o   Contributions by ...
Local Storage    For improved performance  • Cache data from RPC calls  • Load cached data on startup for faster startup t...
Local Storage    For improved performance  • Cache data from RPC calls  • Load cached data on startup for faster startup t...
Local Storage    For improved performance                           DemoThursday, June 30, 2011           19
Local Storage    For improved user experience  • Save temporary state to local storage  • Restore state when user re-enter...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Canvas    Adding visualizations to your app                                        • This slide is boring         Past Due...
Canvas    Adding visualizations to your app                                        • Charts bring data to life            ...
Canvas    Adding visualizations to your app                                DemoThursday, June 30, 2011                 24
Canvas    Adding visualizations to your app     1. Initialize the canvas     2. Calculate values for new shapes     3. Cle...
    // Initialize the canvas.    final Canvas canvas = Canvas.createIfSupported();    canvas.setCoordinateSpaceHeight(300);...
    // Initialize the canvas.    final Canvas canvas = Canvas.createIfSupported();    canvas.setCoordinateSpaceHeight(300);...
    // Initialize the canvas.    final Canvas canvas = Canvas.createIfSupported();    canvas.setCoordinateSpaceHeight(300);...
    // Initialize the canvas.    final Canvas canvas = Canvas.createIfSupported();    canvas.setCoordinateSpaceHeight(300);...
Canvas    Adding visualizations to your app  • Canvas has a coordinate space separate from DOM size  • Coordinate space is...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Audio  • Embed audio using the Audio widget  • Play a sound or streamThursday, June 30, 2011                  32
Audio                          DemoThursday, June 30, 2011          33
Audio  • Format support varies across browsers  • Choose at least two of the three main formats                           ...
Audio    Specify multiple sources  • You can specify multiple sources in HTML5  • Dont forget the "type" attribute     o B...
Audio    Specify multiple sources (2.4)public Audio createAudio() {  Audio audio = Audio.createIfSupported();  if (audio =...
Audio    Specify multiple sources (2.4)public Audio createAudio() {  Audio audio = Audio.createIfSupported();  if (audio =...
Audio    Specify multiple sources (2.4)public Audio createAudio() {  Audio audio = Audio.createIfSupported();  if (audio =...
Audio    Specify multiple sources (2.4)public Audio createAudio() {  Audio audio = Audio.createIfSupported();  if (audio =...
Audio    Manually choose the source  • You can ask the browser which files it might support     o Tells you "probably", "m...
public Audio createAudio() {         Audio audio = Audio.createIfSupported();         if (audio == null) {           retur...
public Audio createAudio() {        Audio audio = Audio.createIfSupported();        if (audio == null) {          return; ...
Audio    Preloading a file  • Let the browser decide when to preload          Audio audio = Audio.createIfSupported();    ...
Audio    Preloading a file  • Let the browser decide when to preload          Audio audio = Audio.createIfSupported();    ...
Audio    Preloading a file  • Let the browser decide when to preload          Audio audio = Audio.createIfSupported();    ...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Video  • Embed videos using the Video widget  • Play a static video or a streamThursday, June 30, 2011                   47
Video                          DemoThursday, June 30, 2011          48
Video  • Format support varies across browsers  • Choose at least two of the three main formats     o Safari only supports...
Videopublic Video createVideo() {  Video video = Video.createIfSupported();  if (video == null) {    return null; }  video...
Videopublic Video createVideo() {  Video video = Video.createIfSupported();  if (video == null) {    return null; }  video...
Videopublic Video createVideo() {  Video video = Video.createIfSupported();  if (video == null) {    return null; }  video...
Videopublic Video createVideo() {  Video video = Video.createIfSupported();  if (video == null) {    return null; }  video...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Drag and Drop  • Move stuff around... with style  • Associate text or ID with the event  • Many types of drag eventsThursd...
Drag and Drop                          DemoThursday, June 30, 2011          56
Drag and Drop    Make a widget draggable     • Set the "draggable" attribute to "true"     • Add a DragStart handler     •...
Drag and Drop    Make a widget draggable   // Make the widget draggable.   Label w = new Label("Drag Me");   w.getElement(...
Drag and Drop    Make a widget draggable   // Make the widget draggable.   Label w = new Label("Drag Me");   w.getElement(...
Drag and Drop    Make a widget draggable   // Make the widget draggable.   Label w = new Label("Drag Me");   w.getElement(...
Drag and Drop    Make a widget draggable   // Make the widget draggable.   Label w = new Label("Drag Me");   w.getElement(...
Drag and Drop    Make a widget draggable   // Make the widget draggable.   Label w = new Label("Drag Me");   w.getElement(...
Drag and Drop    Create a target     • Add a DragOver handler     • Add a Drop handler        o Prevent default action    ...
Label target = new Label("Drag onto me");      // Required: You must add a DragOverHandler to      // create a target.    ...
Label target = new Label("Drag onto me");      // Required: You must add a DragOverHandler to      // create a target.    ...
Label target = new Label("Drag onto me");      // Required: You must add a DragOverHandler to      // create a target.    ...
Label target = new Label("Drag onto me");      // Required: You must add a DragOverHandler to      // create a target.    ...
Label target = new Label("Drag onto me");      // Required: You must add a DragOverHandler to      // create a target.    ...
Drag and Drop    On any widget       • Some widgets do not implement drag handlers       • You can always use addDomHandle...
Drag and Drop    + File API?        • Spec is still changing rapidly.        • Not in GWT (yet!)      File[] files = event....
Drag and Drop Uploader                          DemoThursday, June 30, 2011          71
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Partial Support    Because if all browsers supported it, it would be too easy  • GWT provides APIs that are not supported ...
Partial Support    Fallback to another implementation    public void showChart(AcceptsOneWidget panel,        ChartData da...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
CSS3    Style your GWT app  • Nothing special required for CSS3     o Rounded corners, drop shadows, animations, group opa...
CSS3 in GWTs Widgets  • As of GWT 2.3, widgets now use CSS3  • On legacy browsers, widgets will be "usable"               ...
Agenda  •     Overview  •     Local Storage for performance  •     Visualizations via Canvas  •     Enrich your app with A...
Angry Birds / ForPlay                            DemoThursday, June 30, 2011            79
Angry Birds    An HTML5 GWT app  • Announced at Google IO 2011  • Built with a library called ForPlay    o Uses GWT for Ja...
Angry Birds    An HTML5 GWT app  • Announced at Google IO 2011  • Built with a library called ForPlay    o Uses GWT for Ja...
ForPlay    In 30 seconds  • Cross-platform library for games     o Cross-browser (HTML5): WebGL, Canvas, 3D CSS     o Andr...
ForPlay    An GWT library for games  • Some demos    o Joel Webbers XNA Platormer port    o Aquarium by Mohamed Ousgougou ...
GWT + HTML5    GTUG Atlanta    David Chandler drfibonacci@google.com    Philip Rogers pdr@google.comThursday, June 30, 201...
Upcoming SlideShare
Loading in...5
×

GWT Plus HTML 5

2,201

Published on

Discussion of GWT+HTML5 at Atlanta GTUG. See also http://www.google.com/events/io/2011/sessions/gwt-html5-a-web-developers-dream.html

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,201
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GWT Plus HTML 5

  1. 1. GWT + HTML5 GTUG Atlanta David Chandler drfibonacci@google.com Philip Rogers pdr@google.comThursday, June 30, 2011 1
  2. 2. 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 / ForPlayThursday, June 30, 2011 2
  3. 3. 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 appThursday, June 30, 2011 3
  4. 4. 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 outThursday, June 30, 2011 4
  5. 5. Why now?Thursday, June 30, 2011 5
  6. 6. Why now? Hint:Thursday, June 30, 2011 6
  7. 7. 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)Thursday, June 30, 2011 7
  8. 8. HTML5 for Programmers • WebSockets • Client-side storage o LocalStorage API o Web SQL (its 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 eventsThursday, June 30, 2011 8
  9. 9. HTML5 support http://www.html5rocks.com/ http://html5test.comThursday, June 30, 2011 9
  10. 10. 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 / ForPlayThursday, June 30, 2011 10
  11. 11. Local Storage Isnt it just a cookie?Thursday, June 30, 2011 11
  12. 12. Local Storage Isnt it just a cookie? • Cookies are sent with each request! • Local storage provides MBs worth of storage • Local storage can be shared between browser windowsThursday, June 30, 2011 12
  13. 13. Local Storage Available in GWT • GWT provides a Storage API Storage storage = Storage.getLocalStorageIfSupported(); if (storage != null) {   storage.setItem("foo", "bar"); } Storage storage = Storage.getLocalStorageIfSupported(); if (storage != null) {   String value = storage.getItem("foo"); }Thursday, June 30, 2011 13
  14. 14. Local Storage Available in GWT • GWT provides a Storage API Storage storage = Storage.getLocalStorageIfSupported(); if (storage != null) {   storage.setItem("foo", "bar"); } Storage storage = Storage.getLocalStorageIfSupported(); if (storage != null) {   String value = storage.getItem("foo"); }Thursday, June 30, 2011 14
  15. 15. Local Storage Available in GWT • GWT provides a Storage API Storage storage = Storage.getLocalStorageIfSupported(); if (storage != null) {   storage.setItem("foo", "bar"); } Storage storage = Storage.getLocalStorageIfSupported(); if (storage != null) {   String value = storage.getItem("foo"); }Thursday, June 30, 2011 15
  16. 16. Local Storage Available in GWT • StorageMap lets you access storage using a java.util.Map o Contributions by Bart Guijt Storage storage = Storage.getLocalStorageIfSupported(); if (storage != null) {   StorageMap map = new StorageMap(storage);   storage.put("foo", "bar"); }Thursday, June 30, 2011 16
  17. 17. Local Storage For improved performance • Cache data from RPC calls • Load cached data on startup for faster startup timesThursday, June 30, 2011 17
  18. 18. Local Storage For improved performance • Cache data from RPC calls • Load cached data on startup for faster startup timesThursday, June 30, 2011 18
  19. 19. Local Storage For improved performance DemoThursday, June 30, 2011 19
  20. 20. Local Storage For improved user experience • Save temporary state to local storage • Restore state when user re-enters app • Prevent lost work on network disconnectThursday, June 30, 2011 20
  21. 21. 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 / ForPlayThursday, June 30, 2011 21
  22. 22. Canvas Adding visualizations to your app • This slide is boring Past Due 3 Due Tomorrow 1 On Time 1 No Due Date 6Thursday, June 30, 2011 22
  23. 23. Canvas Adding visualizations to your app • Charts bring data to life • Canvas brings charts to the webThursday, June 30, 2011 23
  24. 24. Canvas Adding visualizations to your app DemoThursday, June 30, 2011 24
  25. 25. Canvas Adding visualizations to your app 1. Initialize the canvas 2. Calculate values for new shapes 3. Clear the current canvas 4. Draw the new shapesThursday, June 30, 2011 25
  26. 26.   // 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();Thursday, June 30, 2011 26
  27. 27.   // 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();Thursday, June 30, 2011 27
  28. 28.   // 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();Thursday, June 30, 2011 28
  29. 29.   // 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();Thursday, June 30, 2011 29
  30. 30. Canvas Adding visualizations to your app • 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 30x30Thursday, June 30, 2011 30
  31. 31. 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 / ForPlayThursday, June 30, 2011 31
  32. 32. Audio • Embed audio using the Audio widget • Play a sound or streamThursday, June 30, 2011 32
  33. 33. Audio DemoThursday, June 30, 2011 33
  34. 34. 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/Thursday, June 30, 2011 34
  35. 35. Audio Specify multiple sources • You can specify multiple sources in HTML5 • Dont 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>Thursday, June 30, 2011 35
  36. 36. 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;}Thursday, June 30, 2011 36
  37. 37. 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;}Thursday, June 30, 2011 37
  38. 38. 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;}Thursday, June 30, 2011 38
  39. 39. 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;}Thursday, June 30, 2011 39
  40. 40. 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 sourceThursday, June 30, 2011 40
  41. 41. public Audio createAudio() { Audio audio = Audio.createIfSupported(); if (audio == null) { 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( audio.canPlayType(AudioElement.TYPE_OGG)) { audio.setSrc("path/file.mp3"); } else if (MediaElement.CAN_PLAY_MAYBE.equals( audio.canPlayType(AudioElement.TYPE_MP3)) { audio.setSrc("path/file.mp3"); } return audio; }Thursday, June 30, 2011 41
  42. 42. public Audio createAudio() { Audio audio = Audio.createIfSupported(); if (audio == null) { 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( audio.canPlayType(AudioElement.TYPE_OGG)) { audio.setSrc("path/file.mp3"); } else if (MediaElement.CAN_PLAY_MAYBE.equals( audio.canPlayType(AudioElement.TYPE_MP3)) { audio.setSrc("path/file.mp3"); } return audio; }Thursday, June 30, 2011 42
  43. 43. Audio Preloading a file • Let the browser decide when to preload Audio audio = Audio.createIfSupported(); audio.setSrc("path/file.ogg"); audio.setPreload(MediaElement.PRELOAD_AUTO); • Or force the browser to preload Audio audio = Audio.createIfSupported(); audio.setSrc("path/file.ogg"); audio.load();Thursday, June 30, 2011 43
  44. 44. Audio Preloading a file • Let the browser decide when to preload Audio audio = Audio.createIfSupported(); audio.setSrc("path/file.ogg"); audio.setPreload(MediaElement.PRELOAD_AUTO); • Or force the browser to preload Audio audio = Audio.createIfSupported(); audio.setSrc("path/file.ogg"); audio.load();Thursday, June 30, 2011 44
  45. 45. Audio Preloading a file • Let the browser decide when to preload Audio audio = Audio.createIfSupported(); audio.setSrc("path/file.ogg"); audio.setPreload(MediaElement.PRELOAD_AUTO); • Or force the browser to preload Audio audio = Audio.createIfSupported(); audio.setSrc("path/file.ogg"); audio.load();Thursday, June 30, 2011 45
  46. 46. 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 / ForPlayThursday, June 30, 2011 46
  47. 47. Video • Embed videos using the Video widget • Play a static video or a streamThursday, June 30, 2011 47
  48. 48. Video DemoThursday, June 30, 2011 48
  49. 49. 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_videoThursday, June 30, 2011 49
  50. 50. Videopublic 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);  // Show audio controls.  video.setControls(true);  return video;}Thursday, June 30, 2011 50
  51. 51. Videopublic 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);  // Show audio controls.  video.setControls(true);  return video;}Thursday, June 30, 2011 51
  52. 52. Videopublic 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);  // Show audio controls.  video.setControls(true);  return video;}Thursday, June 30, 2011 52
  53. 53. Videopublic 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);  // Show audio controls.  video.setControls(true);  return video;}Thursday, June 30, 2011 53
  54. 54. 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 / ForPlayThursday, June 30, 2011 54
  55. 55. Drag and Drop • Move stuff around... with style • Associate text or ID with the event • Many types of drag eventsThursday, June 30, 2011 55
  56. 56. Drag and Drop DemoThursday, June 30, 2011 56
  57. 57. Drag and Drop Make a widget draggable • Set the "draggable" attribute to "true" • Add a DragStart handler • Set data in the DragStart handlerThursday, June 30, 2011 57
  58. 58. Drag and Drop Make a widget draggable // 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);  } });Thursday, June 30, 2011 58
  59. 59. Drag and Drop Make a widget draggable // 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);  } });Thursday, June 30, 2011 59
  60. 60. Drag and Drop Make a widget draggable // 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);  } });Thursday, June 30, 2011 60
  61. 61. Drag and Drop Make a widget draggable // 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);  } });Thursday, June 30, 2011 61
  62. 62. Drag and Drop Make a widget draggable // 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);  } });Thursday, June 30, 2011 62
  63. 63. 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 objectThursday, June 30, 2011 63
  64. 64. 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); } });Thursday, June 30, 2011 64
  65. 65. 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); } });Thursday, June 30, 2011 65
  66. 66. 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); } });Thursday, June 30, 2011 66
  67. 67. 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); } });Thursday, June 30, 2011 67
  68. 68. 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); } });Thursday, June 30, 2011 68
  69. 69. Drag and Drop On any widget • Some widgets do not implement drag handlers • You can always use addDomHandler() to add a handler // Add a DragStartHandler. w.addDomHandler(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);  } }, DragStartEvent.getType());Thursday, June 30, 2011 69
  70. 70. 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);Thursday, June 30, 2011 70
  71. 71. Drag and Drop Uploader DemoThursday, June 30, 2011 71
  72. 72. 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 / ForPlayThursday, June 30, 2011 72
  73. 73. 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!Thursday, June 30, 2011 73
  74. 74. 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 isnt supported.     String imageUrl = encodeChartData(data);     panel.setWidget(new Image(imageUrl);     return;  }   // Create a canvas chart.   ...   // Display the canvas.   panel.setWidget(canvas); }Thursday, June 30, 2011 74
  75. 75. 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 / ForPlayThursday, June 30, 2011 75
  76. 76. 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 GWTs UIBinderThursday, June 30, 2011 76
  77. 77. CSS3 in GWTs Widgets • As of GWT 2.3, widgets now use CSS3 • On legacy browsers, widgets will be "usable" Example: Rounded CornersThursday, June 30, 2011 77
  78. 78. 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 / ForPlayThursday, June 30, 2011 78
  79. 79. Angry Birds / ForPlay DemoThursday, June 30, 2011 79
  80. 80. 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 itThursday, June 30, 2011 80
  81. 81. 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/UZ4X4Thursday, June 30, 2011 81
  82. 82. 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.Thursday, June 30, 2011 82
  83. 83. ForPlay An GWT library for games • Some demos o Joel Webbers 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 youd like to join in: http://gwtforplay.comThursday, June 30, 2011 83
  84. 84. GWT + HTML5 GTUG Atlanta David Chandler drfibonacci@google.com Philip Rogers pdr@google.comThursday, June 30, 2011 84
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×