近段时间在弄GWT这一块，开发中遇到的一些不错的方法或者技巧，在此做个分享和记录，有不同见解可发表意见 互相切磋。
在web开发中，必然涉及到网页中的图片，本地浏览网页，要下载在服务器端的图片，然后才能正常浏览。那么浏览器从服务器上下载资源时，时间都耗在TCP/IP的连接，然后服务器还要准备资源。如果一个网页中有几十甚至上百张图片的话，其中消耗的时间可想而知。在普通的html网页中，我们可以把所有的一些常用图标放在一张图片中，然后通过”background-positon:x y”来定位，我们称之为”CSS Sprite”。但这确实是一件费力费时的事，要事先计算好每个图片的坐标。
下图是亚马逊的图标的一部分：
在GWT中也时常要引用图片，它也提供了这样的方法，我称之为GWT的”CSS Sprite”，不过它实现比较简单，不用把图片合并一张图片然后自己计算坐标。它使用ClientBundle接口，借助它的注解功能实现。(本人使用的是GWT2.5，之前使用ImageBundle可以，后来发现该类已经@Deprecated了)
要是有ClientBundle接口，首先需要在gwt.xml文件中加入如下代码：
然后写一个接口继承ClientBundle:
1 import com.google.gwt.resources.client.ClientBundle; 2 import com.google.gwt.resources.client.ImageResource;MyImageBundle extends ClientBundle { 5@Source(“201.png”) 6 ImageResource upicon(); 7 8@Source(“202.png”) 9 ImageResource downicon();10 }
其中5行与8行声明使用的图片名称，此处只写名称是因为该图片和java类放在一个文件夹下，如果放在其他位置，需要加入对应的地址。
6行与8行声明两个方法，返回类型是ImageResource，根据Google官方文档，查到可以返回类型较多，有TextResource可用于I18N，DataResource用于返回对应数据资源，ExternalTextResource和TextResource一样，返回txt文档，只不过前者是异步获取，返回一个方法，，CssResource用于返回css文件，关于更多方法，详细说明可以参照文档：
然后在我们的GWT项目的入口类里添加控件，并把图片添加进去：
Test implements EntryPoint {MyImageBundle imgBundle = GWT.create(MyImageBundle.class);* This is the entry point method. Image firImg; 8private Image lasImg; onModuleLoad() {10RootPanel rootPanel = RootPanel.get();11VerticalPanel panel = new VerticalPanel();12panel.setWidth(“700px”);13SimplePanel simple = new SimplePanel();14SimplePanel simple2 = new SimplePanel();1516firImg = new Image(imgBundle.downicon());//获取图片资源17lasImg = new Image(imgBundle.upicon());1819 simple.add(firImg);20 simple2.setWidget(lasImg);21 panel.add(simple);22 panel.add(simple2);23 rootPanel.add(panel);24 }25 }
第三行是通过GWT.create()方法获取该类。第16和第17行通过该类写的方法，获取到对应的图片。
最后 我们在eclipse中开始编译项目。在”war-项目名”目录下，会生成类似于”74EBE333D8BEBF96EA4673E8E087D621.cache.png”这样的一张名称很”crazy”的图片，打开后，会发现是刚才那两张图片合并在一起的，就是这么神奇！
福报不够的人，就会常常听到是非；
