用GWT(Google Web Toolkit)开发Ajax-图片浏览

用GWT(Google Web Toolkit)开发Ajax-图片浏览

用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上添加一个滚动面板。

图片服务实现

1. 一个保存图片数据的数据结构，简单点，创建一个org.jmg.client.ImageData implements IsSerializable，这个类中只有两个属性，title,url，这两个属性已经很好的表明他们的用途了，不再细说。至于getter, setter,我只提供了get,初始化用构造函数传参，你也可以根据自己习惯修改。个人原则，能不提供的方法尽量不提供。需要注意一点很重要，这个类一定要实现com.google.gwt.user.client.rpc.IsSerializable这个标志接口，这个会在编译的时候生成相应的 javascript的对象，用户在客户端运行。
   
2. 创建服务,在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

参考
更多文章