GWT, mgwt and retina display

Question

I've implemented an iOS application based on mgwt and PhoneGap.

I have an image

<g:Image url="resources/img/topMenuTitle.png"></g:Image>

and two corresponding files topMenuTitle.png (320px by 40px) and [email protected] (640px by 80px).

I don't know what's the best way to show the image in retina display when applied (ie, load [email protected] when the device supports retina display and topMenuTitle.png otherwise).

So far I tried to use retina.js but it didn't work. My guess is that Retinajs processes pictures at the moment the page loads, and it does not process images that will show up later.

Answer 1

With mgwt there is a deferred binding variable mgwt.os. It can have different values:

<define-property name="mgwt.os" values="iphone, ipad, retina, ipad_retina, android, android_tablet, blackberry, desktop" />

You can use that variable and use different resources in your app. Take a look at the way theming is done in mgwt to see how to supply different images:

http://code.google.com/p/mgwt/wiki/Styling

if you are looking for an easy way to load an image you can do something like:

OsDetection d = MGWT.getOsDetection();

Image img = null;
if(d.isRetina() || isIPadRetina()){
  img = new Image("retinaurl");
}else{
  img = new Image("nonretinaurl");
}

Of course a better way to do this is use deferred binding, but this is okay for some images in your code.