Here's some lessons I've learned recently in getting my GWT application to run across Safari, Chrome, Firefox, Internet Explorer and the Webkit mobile phone browsers.
1. Drawing on a canvas. My application uses a third party javascript drawing package that uses a canvas for drawing elaborate diagrams. This works great on all my browsers, except Internet Explorer. Nothing is drawn. Alas, Internet Explorer doesn't have this native canvas built into it and must be given one. In my main html file the addition of:
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
did the trick.
2. Right click popup menus. Any right click you do in a browser produces the typical browser popup menu. The one to View Source, or Open in New Window. However, what about when I want to implement my own right click popups and put up my own menus. In my main html file the addition of:
<body oncontextmenu = "return false;">
did the trick here too. Now only my popup menus show up and nothing else.
3. Gradients. Those light to dark or dark to light backgrounds that make your screen really stand out and look slick. The following displays a white to blue gradient and works on all browsers.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F3F7FB'); /* IE compatible */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F3F7FB)); /* Webkit compatible */
background: -moz-linear-gradient(top, #FFFFFF, #F3F7FB); /* Firefox compatible */
4. Mobile phone. Any browser based application, like GWT, should also run on all the mobile platform browsers by default. But what if you application is just too big to fit nicely or to be useable on a mobile platform? In this case, you should think about presenting the data in a different view on a mobile device as opposed to being on laptop/desktop computer with adequate screen real estate. Here's two critical things I did to build a mobile version of my GWT app:
First - how to detect if my application is trying to be run on Android or iPhone?
// Is this an Android or iPhone device?
if (Navigator.getUserAgent() != null)
{
if (Navigator.getUserAgent().toLowerCase().contains("android") ||
Navigator.getUserAgent().toLowerCase().contains("iphone"))
{
mobileDevice = true;
}
}
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
Was added to my main html file. In my case, rather than show my entire GWT application on a mobile device, I chose to show just a list of objects with the ability to touch each one and see more details. Something simple, something usable, something informative, something that fits on the phone.
As I continue down the path of GWT....I'm sure there will be more browser tweaks needed...keeps me on my toes.
