开源框架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
以下是实现效果：
