开源框架GWT-MAPS研究

      本人独自在研究GWT--GOOGLE MAPS的过程中出现了很多问题，但天道酬勤，经过好几天的摸索。有点小收获。希望我的文章能给那些研究GWT框架，同时也在研究开源框架GWT-MAPS的朋友有所帮助，开源的力量是无限的，它让我们深入到了一些技术的底部，探索者大师带给我们的喜悦与惊喜。同时也为我们的学习带来很好的提材和资源，当我们将框架技术部署完成，并顺利通过时，我们就像是当时的大师们一样，获得无限的喜悦和惊喜。下面我当这些带给你们，希望对你们有所帮助和提示。

     1.获得GWT（GOOGLE WEB TOOLKET)我当时最初选的版本是GWT WINDOWS 1.5/2.0,当时造成的结果是import com.google.gwt.user.client.ui.DockLayoutPanel;该JAVA类的类的缺失。然后我又选择GWT 2.2，当时我运行了HELLO-MAPS Sample，成功通过我当时非常高兴。但是当我RUN RECOMIPLE的时候，我出现了一个严重的问题。如下所示：

 

 

 

 

你们可能

 

你们可能会问我为什么要 run compile application，我要告诉大家的是如果不compile的话，则修改的结果在Brower中输入http://127.0.0.1:8888/HelloMaps.html?gwt.codesvr=127.0.0.1:9997后就得不到正确的反馈。笔者在运行的时候出现过这个问题。经过compile的话，直接输入http://127.0.0.1:8888/HelloMaps.html就可以了。

 

上面我介绍这么多，无非就是要告诉大家，在开始写程序的时候，编译环境，所用SDK开发版本非常重要，如果没有选好，则会出现我之前所走的痛苦的路，但我现在痛苦并快乐着，哇哈哈～～～～

 

我现在要说的是下载的版本是：gwt-2.1.0.m2（下载地址是：http://code.google.com/p/google-web-toolkit/downloads/detail?name=gwt-2.1.0.m2.zip&can=2&q=）这个网址是我在搜索老外的解决方案时，搜索出来的版本，在我机子上测试，recomple后没有出现上面图中出现的错误。

 

 

 

我现在介绍一个非常重要的应用GOOGLE MAPS 开源框架，这个框架方便了我们在GWT中开发地图软件。所有的API都写好了，留下了大师带给我们的喜悦和惊喜。开源地址是： http://code.google.com/p/gwt-google-apis/wiki/MapsGettingStarted

 

当

 

当然我们还可以继续研究其他的开源框架，如下所示

 

当然我要配置GWT ECLIPSE PLUGIN，过程略，因为这是一个基础的开发环境介绍。我会在一篇文章中专门介绍配置过程。

 

下面我介绍一下HELLO-MAPS例子的源码分析：

 

首先配置好GWT-MAPS,GWT-2.1-M2.jar加入CLASSPATH中

 

MapsDemo.java介绍，只需有个内部抽像类MapsDemoInfo类。里面有抽象方法没有实现。

 

/**
 * All HelloMaps demos extend this class.
 */
public abstract class MapsDemo extends Composite {

  /**
   * This inner static class creates a factory method to return an instance of
   * MapsDemo.

         内部抽象类
   */
  public abstract static class MapsDemoInfo {

    private MapsDemo instance;

    /**
     * @return a new instance of MapsDemo
     */
    public abstract MapsDemo createInstance();

    /**
     * @return an HTML description of this demo
     */
    public HTML getDescriptionHTML() {
      return new HTML("<p><i>Description not provided.</i></p>/n"
          + "<p>(Add an implementation of <code>getDescriptionHTML()</code> "
          + "for this demo)</p>");
    }

    /**
     * Factory method for MapsDemo.
     *
     * @return an instance of this MapsDemo class

        使用单例模式

     */
    public MapsDemo getInstance () {
      if (instance == null) {
        instance = createInstance();
      }
      return instance;
    }

    public abstract String getName();
  }

  /**
   * Method that gets called by the main demo when this demo is now active on
   * the screen.
   */
  public void onShow() {
  }
}

 

DemoList.java类：

/**
 * The left panel that contains all of the sinks, along with a short description
 * of each.

        这个是自定义组件 ，在EntryPoint实现类中供使用
 */
public class DemoList extends Composite {

  // private HorizontalPanel list = new HorizontalPanel();
  private ListBox list = new ListBox();
  private ArrayList<MapsDemoInfo> sinks = new ArrayList<MapsDemoInfo>();

  public DemoList() {
    initWidget(list); //该方法必须实现
    list.setVisibleItemCount(1);
    list.addChangeHandler(new ChangeHandler() {
      public void onChange(ChangeEvent event) {
        History.newItem(list.getItemText(list.getSelectedIndex()));
      }
    });
  }

  public void addMapsDemo(final MapsDemoInfo info) {
    String name = info.getName();
    list.addItem(name);
    sinks.add(info);
  }

  public MapsDemoInfo find (String sinkName) {
    for (int i = 0; i < sinks.size(); ++i) {
      MapsDemoInfo info = sinks.get(i);
      if (info.getName().equals(sinkName)) {
        return info;
      }
    }
    return null;
  }

  public MapsDemoInfo getNext() {
    int nextIndex = list.getSelectedIndex() + 1;
    if (nextIndex >= sinks.size()) {
      nextIndex = 0;
    }
    return sinks.get(nextIndex);
  }

  public void setMapsDemoSelection (String name) {
    for (int i = 0; i < list.getItemCount(); i++) {
      if (name.equals(list.getItemText(i))) {
        list.setSelectedIndex(i);
        break;
      }
    }
  }
}

 

.我抽取其中的SimpleDemo.java （The Basics)进行介绍

/**
 * The following example creates a map with default values.
 */
public class SimpleDemo extends MapsDemo {

  private static HTML descHTML = null;
  private static final String descString = "<p>Creates a 500 x 300 pixel map viewport "
      + "centered on the default position, where the equator intersects 0 degrees longitude. "
      + "You should be able to scroll the viewport by clicking and dragging "
      + "with the mouse.  Zoom in and out by using left and right double clicks.</p>/n"
      + "<p>Equivalent to the Maps JavaScript API Example: "
      + "<a href=/"http://code.google.com/apis/maps/documentation/examples/map-simple.html/">"
      + "http://code.google.com/apis/maps/documentation/examples/map-simple.html</a></p>/n";

  public static MapsDemoInfo init() {
    return new MapsDemoInfo() {

      @Override
      public MapsDemo createInstance() {
        return new SimpleDemo();
      }

      @Override
      public HTML getDescriptionHTML() {
        if (descHTML == null) {
          descHTML = new HTML(descString);
        }
        return descHTML;
      }

      @Override
      public String getName() {
        return "The Basics";
      }
    };
  }

  private MapWidget map;

  public SimpleDemo() {
    map = new MapWidget();
    map.setSize("500px", "300px");
    initWidget(map);
  }
}

 

 

EntryPoint实现类：

/**
 * Main class for implementing the HelloMaps gwt-google-apis demo.
 */
public class HelloMaps implements EntryPoint , ValueChangeHandler<String> {

  protected DemoList list = new DemoList();
  private MapsDemoInfo curInfo;
  private MapsDemo curMapsDemo;
  private HTML description = new HTML();
  private VerticalPanel innerPanel = new VerticalPanel();
  private FlexTable outerPanel = new FlexTable();

  public void onModuleLoad() {

    if (!Maps.isLoaded()) {
      Window.alert("The Maps API is not installed."
          + "  The <script> tag that loads the Maps API may be missing or your Maps key may be wrong.");
      return;
    }

    if (!Maps.isBrowserCompatible()) {
      Window.alert("The Maps API is not compatible with this browser.");
      return;
    }

    // Load all the MapsDemos.
    loadMapsDemos();

    innerPanel.setStylePrimaryName("hm-mapinnerpanel");
    // innerPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

    HorizontalPanel horizPanel = new HorizontalPanel();
    list.setStylePrimaryName("hm-demolistbox");
    Button nextLink = new Button(">>");
    nextLink.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        show(list.getNext(), true);
      }
    });

    horizPanel.add(new Label("Select Demo: "));
    horizPanel.setSpacing(4);
    horizPanel.add(list);
    horizPanel.add(nextLink);
    innerPanel.add(horizPanel);
    innerPanel.add(description);
    innerPanel.setSpacing(10);

    History.addValueChangeHandler(this);

    outerPanel.setStylePrimaryName("hm-outerpanel");
    outerPanel.insertRow(0);
    outerPanel.insertRow(0);
    outerPanel.insertRow(0);
    outerPanel.insertRow(0);
    outerPanel.insertRow(0);

    outerPanel.addCell(0);
    outerPanel.addCell(1);
    outerPanel.addCell(2);
    outerPanel.addCell(3);
    outerPanel.addCell(4);

    outerPanel.setWidget(0, 0, new HTML(
        "This Maps-enabled application was built using the Google "
            + "API Library for GWT, "
            + "<a href=/"http://code.google.com/p/gwt-google-apis//">"
            + "http://code.google.com/p/gwt-google-apis/</a>. "
            + "The drop down list below allows you to select a scenario that "
            + "demonstrates a particular capability of the Maps support."));

    outerPanel.setWidget(1, 0, innerPanel);

    DecoratorPanel decorator = new DecoratorPanel();
    decorator.add(outerPanel);

    RootPanel.get("hm-map").add(decorator);

    // Show the initial screen.
    String initToken = History .getToken ();
    if (initToken.length() > 0) {
      onValueChange(initToken);
    } else {
      showInfo();
    }
  }

  public void onValueChange(ValueChangeEvent<String> event){
    String token = event.getValue();
    onValueChange(token);
  }

  public void show(MapsDemoInfo info, boolean affectHistory) {
    // Don't bother re-displaying the existing MapsDemo. This can be an issue
    // in practice, because when the history context is set, our
    // onHistoryChanged() handler will attempt to show the currently-visible
    // MapsDemo.
    if (info == curInfo) {
      return;
    }
    curInfo = info;

    // Remove the old MapsDemo from the display area.
    if (curMapsDemo != null) {
      innerPanel.remove(curMapsDemo);
    }

    // Get the new MapsDemo instance, and display its description in the
    // MapsDemo list.
    curMapsDemo = info.getInstance();
    list.setMapsDemoSelection(info.getName());

    // If affectHistory is set, create a new item on the history stack. This
    // will ultimately result in onHistoryChanged() being called. It will call
    // show() again, but nothing will happen because it will request the exact
    // same MapsDemo we're already showing.
    if (affectHistory) {
      History.newItem(info.getName());
    }

    // Display the new MapsDemo and update the description panel.
    innerPanel.add(curMapsDemo);
    outerPanel.setWidget(2, 0, info.getDescriptionHTML());

    outerPanel.setWidget(
        3,
        0,
        new HTML(
            "These concepts behind these demos"
                + " are explained in the "
                + "<a href=/"http://www.google.com/apis/maps/documentation/index.html/">"
                + "Google Maps API Concepts</a> document."));

    // info is an inner class of the class we want to display. Strip off the
    // generated anonymous class name.
    String strippedClassName = info.getClass().getName();
    int lastIndex = strippedClassName.lastIndexOf('$');
    if (lastIndex > 0) {
      strippedClassName = strippedClassName.substring(0, lastIndex);
    }

    outerPanel.setWidget(4, 0, new HTML("<h5> See source in "
        + strippedClassName + "</h5><h5>Maps API version: " + Maps.getVersion()
        + "</h5>"));

    curMapsDemo.onShow();
  }

  /**
   * Adds all MapsDemos to the list. Note that this does not create actual
   * instances of all MapsDemos yet (they are created on-demand). This can make
   * a significant difference in startup time.
   */
  protected void loadMapsDemos() {
    list.addMapsDemo(SimpleDemo.init());

     //...........................这里可以添加许多个SAMPLE
  }

  private void onValueChange(String token) {
    // Find the MapsDemoInfo associated with the history context. If one is
    // found, show it (It may not be found, for example, when the user mis-
    // types a URL, or on startup, when the first context will be "").
    MapsDemoInfo info = list.find(token);
    if (info == null) {
      showInfo();
      return;
    }
    show(info, false);
  }

  private void showInfo() {
    show(list.find("The Basics"), false);
  }
}

 

编译HelloMaps,编译通过，如下图所示：

 

在浏览器中输入，http://127.0.0.1:8888/HelloMaps.html ，请不要输入http://127.0.0.1:8888/HelloMaps.html?gwt.codesvr=127.0.0.1:9997

以下是实现效果：