GWT 中实现“CSS Sprite”
近段时间在弄GWT这一块，开发中遇到的一些不错的方法或者技巧，在此做个分享和记录，有不同见解可发表意见 互相切磋。
在web开发中，必然涉及到网页中的图片，本地浏览网页，要下载在服务器端的图片，然后才能正常浏览。那么浏览器从服务器上下载资源时，时间都耗在TCP/IP的连接，然后服务器还要准备资源。如果一个网页中有几十甚至上百张图片的话，其中消耗的时间可想而知。在普通的html网页中，我们可以把所有的一些常用图标放在一张图片中，然后通过"background-positon:x y"来定位，我们称之为"CSS Sprite"。但这确实是一件费力费时的事，要事先计算好每个图片的坐标。
下图是亚马逊的图标的一部分：
在GWT中也时常要引用图片，它也提供了这样的方法，我称之为GWT的"CSS Sprite"，不过它实现比较简单，不用把图片合并一张图片然后自己计算坐标。它使用ClientBundle接口，借助它的注解功能实现。(本人使用的是GWT2.5，之前使用ImageBundle可以，后来发现该类已经@Deprecated了)
要是有ClientBundle接口，首先需要在gwt.xml文件中加入如下代码：
1 <inherits name="com.google.gwt.resources.Resources" />
然后写一个接口继承ClientBundle:
1 import com.google.gwt.resources.client.ClientBundle; 2 import com.google.gwt.resources.client.ImageResource; 3 4 public interface 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文件，关于更多方法，详细说明可以参照文档：http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html
然后在我们的GWT项目的入口类里添加控件，并把图片添加进去：
1 public class Test implements EntryPoint { 2 3 private final MyImageBundle imgBundle = GWT.create(MyImageBundle.class); 4 /** 5 * This is the entry point method. 6 */ 7 private Image firImg; 8 private Image lasImg; 9 public void onModuleLoad() { 10 RootPanel rootPanel = RootPanel.get(); 11 VerticalPanel panel = new VerticalPanel(); 12 panel.setWidth("700px"); 13 SimplePanel simple = new SimplePanel(); 14 SimplePanel simple2 = new SimplePanel(); 15 16 firImg = new Image(imgBundle.downicon());//获取图片资源 17 lasImg = new Image(imgBundle.upicon()); 18 19 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"的图片，打开后，会发现是刚才那两张图片合并在一起的，就是这么神奇！
