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文件中加入如下代码：

　　

<inherits name="com.google.gwt.resources.Resources" />

　　然后写一个接口继承ClientBundle:

　　

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;

public interface MyImageBundle extends ClientBundle {
    @Source("201.png")
    ImageResource upicon();
    
    @Source("202.png")
    ImageResource downicon();
}            

其中5行与8行声明使用的图片名称，此处只写名称是因为该图片和java类放在一个文件夹下，如果放在其他位置，需要加入对应的地址。

6行与8行声明两个方法，返回类型是ImageResource，根据Google官方文档，查到可以返回类型较多，有TextResource可用于I18N，DataResource用于返回对应数据资源，ExternalTextResource和TextResource一样，返回txt文档，只不过前者是异步获取，返回一个方法，CssResource用于返回css文件，关于更多方法，详细说明可以参照文档：http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html

然后在我们的GWT项目的入口类里添加控件，并把图片添加进去：

public class Test implements EntryPoint {
    
    private final MyImageBundle imgBundle = GWT.create(MyImageBundle.class);
    /**
     * This is the entry point method.
     */
    private Image firImg;
    private Image lasImg;
    public void onModuleLoad() {
        RootPanel rootPanel = RootPanel.get();
        VerticalPanel panel = new VerticalPanel();
        panel.setWidth("700px");
        SimplePanel simple = new SimplePanel();
        SimplePanel simple2 = new SimplePanel();
        
        firImg = new Image(imgBundle.downicon());//获取图片资源
        lasImg = new Image(imgBundle.upicon());
        
        simple.add(firImg);
        simple2.setWidget(lasImg);
        panel.add(simple);
        panel.add(simple2);
        rootPanel.add(panel);
    }
}

第三行是通过GWT.create()方法获取该类。第16和第17行通过该类写的方法，获取到对应的图片。

最后 我们在eclipse中开始编译项目。在"war-项目名"目录下，会生成类似于"74EBE333D8BEBF96EA4673E8E087D621.cache.png"这样的一张名称很"crazy"的图片，打开后，会发现是刚才那两张图片合并在一起的，就是这么神奇！