- Before Starting Out
- What Are the Options?
- HTML Solution
- Detecting the Browser Type
- Flash Solution
- What About Video?
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Detecting the Browser Type
Browser-detection code is old hat for web programmers, who are quite used to having to write tests such as if isIE()... in order to allow for the various browsers' quirks. However, one of GWT's strong points is enabling the programmer to forget about such code, so how can we get our application to use either Html5AudioElement or EmbedAudioElement without having to write browser-detection code of our own? The answer requires using a basic—and quite important—GWT technique called deferred binding.
How does GWT deal with different browsers? Basically, at compile time, it produces several versions of your Java-to-JavaScript compiled code, each attuned specifically to a determined browser. When you load a GWT application, you get and execute a small "selector" piece of code, which determines what browser you're using and then loads and runs the correct compiled version of the code. (GWT also takes your locale into consideration, but let's not get into that topic now. You can read the GWT debugging info for more details.) We'll take advantage of that mechanism and have GWT use the <audio> or the <embed> class, depending on which version of the code it compiles.
For example, we could work with the Html5AudioElement class everywhere in our code, but tell the GWT compiler to substitute the EmbedAudioElement class whenever the user's browser is an Internet Explorer version. (Since both classes extend the same base class and implement the same methods, there will be no compiler objections.) To achieve this goal, we would have to specify the replacement rule in the gwt.xml file for our application (see Listing 6).
Listing 6 GWT's deferred binding feature lets you replace one class with another, depending on the user agent.
<replace-with class="com.fkereki.multimedia.client.EmbedAudioElement">
<when-type-is class="com.fkereki.multimedia.client.Html5AudioElement" />
<any>
<when-property-is name="user.agent" value="ie6" />
<when-property-is name="user.agent" value="ie8" />
</any>
</replace-with>
When GWT compiles a version of your code for Internet Explorer 6 or 8 users, it replaces all usages of the Html5AudioElement class with the EmbedAudioElement class. Thus, if you're a Safari user, you'll get code with the HTML5 <audio> tag. If you're using Microsoft's browser, you'll get code with the <embed> tag instead. You won't have to write any browser-detection code in your software; GWT will take care of that situation at compile time, and the user will get to download and execute the version of the code that's appropriate for his environment.
Using this technique, you would be able to write code that would use the correct HTML tags for the browser that the user is running. However, you still have to test all versions of your code on all kinds of browsers, since the code to be executed will vary depending on the browser.
Earlier I mentioned an alternative Flash-based solution that offers the advantage of being "one size fits all"; you won't need different versions for different browsers. Let's look at that option now.