GWT、mgwt和Retina显示屏

Question

我已经基于mgwt和PhoneGap实现了一个iOS应用程序。

我有一张图片。

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

还有两个相应的文件topMenuTitle.png（320px x 40px）和[e-mail]（640px x 80px）。

我不知道在应用时如何在Retina显示器中显示图像（即，当设备支持Retina显示器时加载[e-mail]，否则加载topMenuTitle.png）。

到目前为止，我尝试使用retina.js，但它没有起作用。 我猜想Retinajs在页面加载时处理图片，并且不会处理稍后出现的图像。

- Majid Laissi

Answer 1

使用mgwt时，有一个延迟绑定变量mgwt.os。它可以具有不同的值：

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

你可以使用该变量并在应用中使用不同的资源。 查看mgwt中主题设置的方式，了解如何提供不同的图像：

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

如果您正在寻找一种简单的加载图像的方法，可以这样做：

OsDetection d = MGWT.getOsDetection();

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

当然，更好的方法是使用延迟绑定来实现这一点，但对于代码中的一些图像来说，这样也可以。

- Daniel Kurka

---

谢谢你的回答（顺便说一下，mgwt真不错），有没有办法加载图片本身而不是它的样式（即图片src而不是background-image）？ - Majid Laissi

好的，有些东西还缺失。当使用视网膜图片时，图像大小必须设置为一半。 - Michael

Answer 2

使用DeferredBinding。以下是一个示例： http://retina.teknonsys.com/

- Andrei Volgin

---

谢谢您的回复，我尝试了您的建议，但由于错误（请参见编辑后的问题），我失败了。还有一种方法可以与UiBinder一起使用吗？谢谢。 - Majid Laissi

在teknonsys的例子中，您不替换捆绑包（它们是接口），而是替换生成类的捆绑包工厂。 - Andrei Volgin

为了获取我的ImageResource，我使用AppBundle.INSTANCE.topMenuImage()。我没有bundle工厂。希望我不必改变我的代码逻辑！ - Majid Laissi

我不确定缺少什么，但我的iPhone仍然无法显示视网膜图像。 - Majid Laissi

@AndreiVolgin 我也尝试了你提出的库。我的问题是屏幕上的视网膜图像也是非视网膜图像在屏幕上的两倍大小。这应该在屏幕上具有相同的大小。你有任何想法吗？ - Michael