用GWT(Google Web Toolkit)开发Ajax-图片浏览
| 摘要 |
从本文开始我们开始一个有点实际意义的应用，图片浏览器，初步我们只实现简单的框架来实现图片浏览的基本功能，然后再继续深化，做出更好的界面，和更多的管理功能。 |
| 关键字 |
Google Web Toolkit GWT Ajax 图片浏览 |
设想一下简单的界面效果，和已经实现这个效果需要的提供的数据服务。
打开画图版，简单的画一下界面。
图片浏览
 |
界面说明
- 最顶上一个横向的标题栏
- 中间左边一个是小的预览图片列表
- 中间右边是图片浏览主窗口
- 最底部有一个简单的版权之类的说明
数据服务
- 一保存图片信息的数据结构
- 一个能获取指定要求的图片的集合的服务
创建界面页面构成，参看已经设计的界面，从外往内一个一个结构，把界面分成上中下三个面板，其中第二块分割成左右两个面板。这样不难得到这样的结果，在onModuleLoad方法中添加实现一下功能的代码:
VerticalPanel mainPanel;//主面板
HorizontalPanel topPart;//顶端部分
HorizontalPanel centerPart;//中间部分
HorizontalPanel bottomPart;//底端部分
HorizontalPanel imagesPart;//图片列表
HorizontalPanel previewPart;//图片预览
//按照以下安装过程组装
mainPanel.add(topPart);
mainPanel.add(centerPart);
mainPanel.add(bottomPart);
centerPart.add(imagesPart);
centerPart.add(previewPart);
注意可能我们的图片会很多,希望不会把页面撑得很长很长,GWT提供了不过的ScrollPanel，只要把
centerPart.add(imagesPart);修改成
centerPart.add(new ScrollPanel(imagesPart));就可以了。
同样图片也可能会很大，也一样在previewPart上添加一个滚动面板。
图片服务实现
- 一个保存图片数据的数据结构，简单点，创建一个org.jmg.client.ImageData implements IsSerializable，这个类中只有两个属性，title,url，这两个属性已经很好的表明他们的用途了，不再细说。至于getter, setter,我只提供了get,初始化用构造函数传参，你也可以根据自己习惯修改。个人原则，能不提供的方法尽量不提供。需要注意一点很重要，这个类一定要实现com.google.gwt.user.client.rpc.IsSerializable这个标志接口，这个会在编译的时候生成相应的 javascript的对象，用户在客户端运行。
- 创建服务,在client包中写ImageServiceAsync，ImageService,这两个接口，在server中实现 ImageServiceImpl implements ImageService。ImageServiceImpl，所需提供的方法就是获取图片列表，返回一个ImageData数组或是集合类，都可以，我这里选择了数组。
添加客户端事件
有了界面，有了服务，就可以把这两个东西组装在一起了。我们需要两个事件处理，第一个是在客户端刚刚打开的时候，在"创建界面"小节中我们已经在 onModuleLoad添加了界面大致框架的初始化，现在我们要调用服务，并且把获取到的数据，构造成 com.google.gwt.user.client.ui.Image对象，添加到imagesPart中，代码大致如下：
async.getImageData(new AsyncCallback() {
public void onFailure(Throwable caught) {
}
public void onSuccess(Object result) {
ImageData[] images = (ImageData[]) result;
for (int i = 0; i < images.length; i++) {
Image image = new Image(images[i].getUrl());//根据url构造image对象
image.setPixelSize(120, 120);//限制预览图片的大小
imagesPart.add(image);//添加到imagesPart中
}
}
});
到这里你编译部署的时候就已经可以看到大致的运行效果了。左边是一个小图片的列表，右边是一块空白的区域。
到现在剩下的事情就是需要在小图上添加一个鼠标事件，在鼠标移上去的时候，右边显示大图。
这个过程也很简单，就像写swing程序一样，只要在上边的Image对象构造好的时候添加一个mouseListener就可以了:
image.addMouseListener(new MouseListenerAdapter() {
public void onMouseEnter(Widget sender) {
sender.addStyleName("selected");
previewPart.clear();
Image img = new Image(((Image)sender).getUrl());
//注意这里的Image需要创建一个，而不是sender强换型，
//最初的时候我就是为了节省一个对象，强换型了一次，
//至于效果你可以自己动手改改试试看
img.addStyleName("big");
previewPart.add(img);
}
public void onMouseLeave(Widget sender) {
sender.removeStyleName("selected");
}
});
运行部署 到这里我们的图片浏览器就基本完成了，至于样式表之类的东西就不在这里说了。不说不是表示不重要，GWT推荐所有东西都用样式表来控制，而是很重要。这里我截了一个简单的图，仅作运行效果:
运行图例
 |
源码下载:imageviewer_src.rar
运用下载:imageviewer.rar