GWT and HTML5 Support

Here we gonna talk about how do we gonna use HTML 5 in GWT applications. Also with some practical examples.

Introduction

In this artcile we gonna talk about 

  • Overview of HTML 5
  • Local Storage for Performance
  • Data visualization using Canvas
  • Audio/Video 
  • Handling unsupported browsers.

So what is HTML5?

HTML 5 is basically a media rich DOM elements (Audio,Video, Canvas), enriched with lots of new apis. 

WHY HTML5?

  • HTML 5 support is rapidly increasing
  • Although some legacy browsers don't support HTML5 features, users of these legacy browsers are rapidly declining. 
  • Using HTML 5 you can have one of the sexy app that can stand out of the crowd. 

Local storage for performance

Local storage is widely supported even in IE9. The first question I ask myself is why not use cookies, and it turns out that there is a good reason. Cookies are the part of the http protocol not part of the the client protocol. So every cookie is sent with the every single request to the server. 

Local storage gives you much more space within the client machine and shared between the browsers. We can save data on in browser and load into another browser. 

GWT provides a Storage API

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

// to get data
String value= storage.getItem("foo");
 

Be sure to first check if storage is null since all browsers are not supported.

Storage map lets you access html 5 local storage using a java.util.Map like class. 

Here is the code snippet. 

 

		Storage storage= Storage.getLocalStorageIfSupported();
if(storage!=null){
StorageMap map=new StorageMap(storage);
storage.put("foo","bar");

} 

Why to use local storage?

- To improve performance. 
- To improve user experience. 
- To make the app workable on offline environment. 
- To cache data on the client.

How do we use local storage to improve performance

In the traditional gwt app you call the rpc method and get the data from the server and show to the user. For improved performance we can cache data from the rpc calls and load cached data on startup if available and then send the rpc request.  Cache data might not be upto date but that might make sense to the user until the rpc request is fulfilled. Then we update the data once the data is available from rpc. 

Here is the typical workflow. 

  • Call the rpc for data for the first time

  • Save data to the local storage. 

  • Next time use enters the page, load immediately from the local storage and fill the UI with local storage data. 

  • Send the rcp request for the fresh data.

  • Update the local storage with the new data.  

How to use 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.

HTML 5 Canvas

Use used basically  for better visualization of data (eg: Graph, pie chart etc). Using canvas in gwt is very easy. 

Here is the basic workflow
- Initialize the canvas
- Get the dimensions of the canvas
- Clear the contex
- Draw the shape. 

Code to draw pie in gwt

		final Canvas canvas= Canvas.createIfSuported();
canvas.setCoordinateSpaceHeight(300);
canvas.setCoordinateSpaceWidth(300);
canvas.setPixelSizze(300,300);

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;

Context2d context= canvas.getContext2d();
context.clearRect(0,0,width,height);

context.setFillStyle(CssColor.make(255,211,25));
context.beginPath();
context.moveTo(cx,cy);
context.arc(cx,cy,radius,0,Math.PI);
context.fill(); 

What is coordinate space?

HTML 5 Canvas has a coordinate space separate from DOM size. Coordinate space is always scaled to the DOM size. Small coordinate space means  faster performance but low quality. And large coordinate space results into  higher quality but rendering will be slower resulting into slower performance. 

If you have couple to graphs to render no problem if there are lots of canvas rendering involved, you should consider matching coordinate space to  the DOM size. 

There are two ways to match coordinate space to the DOM Size. Assign a fixed size to the DOM element or Catch resize events and adjust the co-ordiante space. 

Audio Element

Audio is the least used media on the web. Basically Audio element is used to stream music. But there are other couple of usages for better user experience. For eg: use audio element to play a notification sound or something like that.

 Browser supports for various audio formats.

Chrome - Ogg, mp3 
Firefox - ogg, wav
IE - mpg,wav
Opera- ogg, wav
Safari -mp3,wav

To support on all these browsers choose at least two formats from main three formats (ogg, mp3, wav). 

Code (In Plain HTML 5)

		<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> 

Code in GWT

		public Audio getAudio(){
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);
audio.setConrols(true);
return audio;
}
 

Its a widget you can add to the page. Not all browsers are smart enough to figure out which file to download. They might download all three files. Probably no problem if the sound clip is small but makes sense when the sound is really large. Downloading all three files will slow down the performance and should be avoided. You should really make sure that only one supported file is downloaded. 

Here is how to manually specify which file to download. 
We can ask the browser if if can play the type for eg: ogg and it responds either probably or maybe or nothing.

Here is the code in gwt. 

		Audio audio= Audio.createIfSupported();
if(audio==null){
 return;
}
if(MediaElement.CAN_PLAY_PROBABLY.equals(audio.canPlayType

(AudioElement.TYPE_OGG)){
	aduio.setSrc("path/file.ogg");
}
else if(----

}
 

Preloading the audio file


We can force the browser to preload when we want or let the browser decide when to preload the audio file. 

Force browser to preload

audio.load();

Let the browser decide

audio.setPreLoad(MediaElement.PRELAOAD_AUTO);

Video Element

We will not talk much about Video element since it is quite similar to audio element we already discussed. 

Supported formats of video for different browsers
Chrome - ogg, mp4, webm
Firefox- ogg, webm
IE- mp4
opera- ogg, webm
safari - mp4

So choose atleast two with mp4. (oog and mp4) or (webm or mp4). 


Like us

See also

GWT Offline application

How to use the linker file in GWT to automatically update the cache manifest file to enable offline capabilities in GWT web app.

GWT and HTML5 Support

Here we gonna talk about how do we gonna use HTML 5 in GWT applications. Also with some practical examples.