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 topMenuTitle@2x.png (640px by 80px).

I don't know what's the best way to show the image in retina display when applied (ie, load topMenuTitle@2x.png 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.

Daniel Kurka · Accepted Answer · 2012-09-19T05:50:35.380

4

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.

edited Sep 19 '12 at 05:50

answered Sep 18 '12 at 03:41

Daniel Kurka

7,973
2
24
43

thank you your the answer (and the great mgwt by the way), is there a way to load the image itself not its style (ie image src not background-image)? – Majid Laissi Sep 18 '12 at 23:38
Well, there is something missing. The image sized must be set to half when the retina image is used. – Michael Mar 18 '14 at 17:39

score 3 · Answer 2 · answered Sep 17 '12 at 21:59

3

Use DeferredBinding. Here is one example:

http://retina.teknonsys.com/

answered Sep 17 '12 at 21:59

Andrei Volgin

40,755
6
49
58

thank you for your reply, i tried your suggestion but i failed due to an error (see edited question). Also is there a way to use it with UiBinder ? Thanks – Majid Laissi Sep 17 '12 at 22:32
In teknonsys example you do not replace bundles (which are interfaces), you replace bundle factories that produce classes. – Andrei Volgin Sep 17 '12 at 22:48
to get my ImageResource i use `AppBundle.INSTANCE.topMenuImage()` I don't have a bundle factory. I hope i don't have to change my code logic! – Majid Laissi Sep 17 '12 at 22:52
well i'm not sure what's missing, but i still don't get retina images in my iPhone.. – Majid Laissi Sep 17 '12 at 23:13
@AndreiVolgin I also tried the lib you proposed. My problem is that the retina image on the screen is also two times the size of the non-retina image on the screen. This should have the same size on the screen. Do you have any idea on this? – Michael Mar 18 '14 at 16:15

GWT, mgwt and retina display

2 Answers2