弄了一个天气预报的widget，有些心得在里面，拿出来分享。

最终的效果：

使用的技术：

Flex ,asp.net,flash

关于天气数据：

本人是在气象局工作的，但对于气象局的公众服务其实相当不满，怎奈自己是个小兵，能做的只是积极献言献策，试图改变“上面”的思维。就拿数据服务来说，部门内部不论软硬件环境都很不错，至少把天气预报通过某种途径（WebService,mashup,rss等）提供借口是没有问题的。在做这个widget是才发现，根本没有直接的接口可寻，翻了翻一些大站的天气服务，总算找到一个提供Json数据的（也许人家根本不是主动提供的），就不透露是那个站了。

一些技术细节：

跨域访问数据问题

既然天气数据来自某网站，自然存在跨域问题，服务器不在你手上，自然就不是crossdomain.xml能解决的了。这个问题参考了noahgenius 关于使用asp.net作数据代理的文章，简单说就是使用自己的服务器将数据获取到，然后提供给客户端。

Flash的中文编码问题

这个问题有两部分，一个是单纯的中文显示问题，这个有好些方法，在initialize方法中添加“"flash.system.System.useCodePage=true”较为简单。另一个是flash生成连接url的中文编码问题，可以在要传递的中文参数（城市名称）上使用encodeURI方法就可以了。当然.net中也会涉及这个问题。

Flex处理Json数据的问题

Json这么新潮的数据格式，Adobe不会不考虑，提供了专门的类文件（我会防到附件里）来处理，com.adobe.serialization.json这是他的名称空间。使用方法参考岩屋的文章《Flex用JSON处理返回的数据》。

.net的WebClient缓存问题

如果每次客户端访问，服务器代理都会访问天气数据网站并下载数据，那绝对是可悲的。气象预报工作我是有一定了解的，中国的天气预报一般在北京时间8时会发布一次，包括24小时预报、48小时预报、72小时预报，下午4时会视上个预报周期后这12小时的情况，发布一次更正预报。我说上面的意思是说，其实天气预报信息一天24小时之内只会发布两次，那么最佳解决方案当然是缓存天气预报数据。我们现在是基于.net实现的，就说说.net的WebClient的缓存处理，这个你可以参考官方文档关于WebClient.CachePolicy 属性的描述。其实就是把WebClient的缓存策略（RequestCachePolicy ）设置成Revalidate。

这样服务器还是会到目标服务器上看看的，但只是去查看该文档的最后修改时间，如果没有更新，就不会获取整个数据实体。如果用Jakarta Commons

的HTTPClient的话，也是一样的道理。

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

个人觉得，GWT的客户端表现并不是Gwt这个项目最关心的方向，所以要做出表现丰富的界面，要花去不少心思，当你为做一个“可排序的Grid”被搞得焦头烂额时，想想EXT,DOJO，只有艳羡地分了。

GWT-Ext 是sanjiv.jivan为了丰富GWT的客户端表现而贡献的开源项目。项目结合了当前客户端表现和用户体验都相当完善的Ext，提供了一种操作性很强的RIA开发方式。

作者应该花了不少心思在项目上，更新很频繁，大概不到1个月就有新的版本问世，目前项目的版本为GWT-Ext 0.9.3，是 Ext 1.1.1 和 GWT 1.4 Final 的结合，在 Ext 方面实现了大多数常用的控件，如Grid、Tree、Form、TabPanel等等。具体实现效果可以查看项目中的 Showcase Demo 。

以下结合一个例子来演示一下如何使用GWT-Ext 做实际开发。

一定要认真阅读项目中的 GettingStarted ，下面起初的几段其实就是该文的中文译本。

一、在Gwt项目中集成GWT-Ext

1.下载gwtext-0.9.3.zip，之后解压，将其中的 gwtext.jar 附加到当前GWT项目（Tree）的BuildPath中。

2.下载ext-1.1.1.zip （注意：暂时还不支持最新的2.0版本），将的ext-all.js、ext-core.js以及resources和adapter两个目录拷贝到module的public中的js/ext位置。对Ext熟悉的话，可以只拷贝需要的文件而不必载入所有的资源文件。

3.修改GWT项目中module的html页面，添加Ext资源，修改后的html页面可能是这样：

4.编辑项目的Tree.gwt.xml文件，添加以下

通过以上步骤，你就可以写接近Ext功能的客户端界面了，同时也具有了Gwt的各种开发优势了，比如Java方式开发，清晰的RPC（这点尤其是在客户端需要获取服务器端数据信息时尤其方便）等等。

二、实例

下面我们就编写Showcase Demo 中的Tree节点下的Two Trees Drag & Drop，例子实现的是两个Tree中节点的任意拖放（再次感叹Ext的丰富表现）。

Tree.java代码如下，可直接拷贝到查看效果。

 注意：例子中需要的两个数据文件需放置于public目录，熟悉Ext的应该很清楚。

编译后执行的效果如下图：

以上示例只是将该种开发方式的流程顺了一下，窥一斑以示全貌，Ext各种丰富的表现都可以实现。闲下来，再写一下将数据提供（其实就是一些多维数据而已）方式改为RPC，这样开发流程就完整了。

可以下载示例程序运行一下，证明我没骗你

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

3、关于自定义ItemRenderer

个人觉得即使Flex不开源，现有的功能就很大程度的能够满足自定义的需求。对于通过数据绑定实现的控件(List，DataGrid，Chart)，每一行数据的呈现都可以自定义——自定义样式，自定义行为。对于LineChart中，默认的状况是用圆点描述每个数据，然后连起来，鼠标经过圆点时显示点上横纵座标的值。自定义的需求就有许多，比如不需要鼠标经过就显示点上的值，比如使用其它形状的点标示数据，比如用不同的颜色标示每个点，等等，其实都是一些定义ItemRenderer样式的问题。

举个例子：比如实现默认在点上标记某个数据，不需要鼠标经过，这个可以通过将ItemRenderer设置成一个Label来实现。这个Label首先要继承UIComponent，如果要实现显示该点上的数据的话就要实现 IDataRenderer 来获取。它的表现样式是通过重写updateDisplayList方法实现的。

当然也可以将ItemRenderer设置成其它空间，在Chart中常用的会是CircleItemRenderer（圆点）等等。对不同的点的现实不同效果可以通过将逻辑写到自定义的ItemRenderer里实现。

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

2、关于Linechart的背景

LineChart基于Flash Player提供了丰富的页面表现，包括丰富的颜色。个人觉得LineChart这个东西总是与分析有关，继而可能与科研有关，这个东西总是被那些“老学究”批为“花哨”。嫌自定义颜色麻烦的话可以在LineChart添加背景网格，用灰色就显得严肃了许多。看个效果图：

具体实现是这样的：

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

在项目中用了Flex，较多的使用了LineChart，遇到问题能查到文章真的很少，尤其是中文的，幸亏官方的文档写的“生动”，项目才算交差。

闲下来，想把一些细节写写，供大家查阅。讲的Linechart，其实所有的Chart控件都很相似，总是由两个轴(horizontalAxis and verticalAxis)和数值组成的。

1、关于创建日期型横轴的细节

较常见的一种形式是横轴是一段时间，纵轴是被描述的值。如果是在数据量和时间密度不大的情况下，没有必要把数据库中取出的时间串转化为日期型。但面对大跨度的时间，而其数值又分布密集，横轴标的日期显示起来就会小到看不清。这时最合理的解决方式可能是用DateTimeAxis中的dataUnits（时间显示单元，就是横轴上显示的最小时间间隔）。这要求首先LineChart的xField必须转化成日期型。Date对象是支持从日期样式的串构造的，但是有限的几种：

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

下面要写的东西是一个使用GWT编写的在有限区域内通过拖动查看整个地图的简单实现。

 一些细节：

1. 为什么能拖？

   com.google.gwt.user.client.ui.MouseListener 通过实现这个接口，可以实现UI对象对鼠标的Enter,Down,Leave,Move,Up动作的支持。

   com.google.gwt.user.client.ui.FocusPanel 并不是每个UI对象都能够实现MouseListener接口的，可以通过添加到FocusPanel来实现。

2. 怎么才能显示地图的局部，或者说怎么把其他部分藏起来？

通过样式：

java 代码

1. DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");   
2.   
3. DOM.setStyleAttribute(viewPortArea.getElement(), "position","relative");  

设置显示区域的"overflow"属性为"hidden"及"position"属性为"relative"，图片可以实现局部显示显示框内。

代码：

java 代码

1. package cn.gov.imwb.client;   
2.   
3. import com.google.gwt.user.client.DOM;   
4. import com.google.gwt.user.client.Event;   
5. import com.google.gwt.user.client.ui.AbsolutePanel;   
6. import com.google.gwt.user.client.ui.Composite;   
7. import com.google.gwt.user.client.ui.FocusPanel;   
8. import com.google.gwt.user.client.ui.Image;   
9. import com.google.gwt.user.client.ui.MouseListener;   
10. import com.google.gwt.user.client.ui.Widget;   
11.   
12. /**  
13.  * @author sheva.wen  
14.  *  
15.  */  
16. public class MapViewerPanel extends Composite {   
17.     public int areaHeight;   
18.   
19.     public int areaWidth;   
20.   
21.     public int centerLeft;   
22.   
23.     public int centerTop;   
24.   
25.     public int imageHeight;   
26.   
27.     public String imageUrl;   
28.   
29.     public int imageWidth;   
30.   
31.     public int maxLeft;   
32.   
33.     public int maxTop;   
34.   
35.     public int minLeft;   
36.   
37.     public int minTop;   
38.   
39.     private Image image;   
40.   
41.     private FocusPanel mouseListenerContainer;   
42.   
43.     public double showPositionLeftRatio;   
44.   
45.     public double showPositionTopRatio;   
46.   
47.     private int startLeft;   
48.   
49.     private int startTop;   
50.   
51.     private int startX;   
52.   
53.     private int startY;   
54.   
55.     private int state = 0;//用于判断当前用户的鼠标动作   
56.   
57.     private AbsolutePanel viewArea;   
58.   
59.     private AbsolutePanel viewPortArea = new AbsolutePanel();   
60.   
61.     /**  
62.      *   
63.      * @param areaWidth 显示区域的宽  
64.      * @param areaHeight 显示区域的高  
65.      * @param imageUrl 地图的链接  
66.      * @param imageWidth 地图的宽  
67.      * @param imageHeight 地图的高  
68.      * @param showPositionLeftRatio 地图初始显示的位置 最左占宽度的比例  
69.      * @param showPositionTopRatio 地图初始显示的位置 最上占宽度的比例  
70.      */  
71.     public MapViewerPanel(int areaWidth, int areaHeight, String imageUrl,   
72.             int imageWidth, int imageHeight, double showPositionLeftRatio,   
73.             double showPositionTopRatio) {   
74.         mouseListenerContainer = new FocusPanel(viewPortArea);   
75.         viewArea = new AbsolutePanel();   
76.         /**  
77.          * 将地图（图片）上的默认浏览器行为除去。  
78.          */  
79.         image = new Image(){   
80.             /**  
81.              * 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。  
82.              */  
83.                  public void onBrowserEvent (Event event)   
84.                  {   
85.                      DOM.eventPreventDefault(event);   
86.                      super.onBrowserEvent(event);   
87.                  }   
88.   
89.         };   
90.         viewArea.add(image);   
91.         image.setPixelSize(imageWidth, imageHeight);   
92.         image.setUrl(imageUrl);   
93.   
94.         viewPortArea.setPixelSize(areaWidth, areaHeight);   
95.         viewPortArea.addStyleName("viewportViewer");   
96.         DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");   
97.   
98.         DOM.setStyleAttribute(viewPortArea.getElement(), "position",   
99.                         "relative");   
100.         initWidget(mouseListenerContainer);   
101.            
102.            
103.            
104.         this.showPositionLeftRatio = showPositionLeftRatio;   
105.         this.showPositionTopRatio = showPositionTopRatio;   
106.         this.areaWidth = areaWidth;   
107.         this.areaHeight = areaHeight;   
108.         this.imageUrl = imageUrl;   
109.         this.imageWidth = imageWidth;   
110.         this.imageHeight = imageHeight;   
111.            
112.         /**  
113.          * 设置图片可被拖放的极限，防止图片被拖出边界  
114.          */  
115.            
116.         maxLeft = imageWidth - areaWidth;   
117.         maxTop = imageHeight - areaHeight;   
118.         minLeft = -(imageWidth - areaWidth);   
119.         minTop = -(imageHeight - areaHeight);   
120.            
121.         /**  
122.          * 地图初始应该在的位置  
123.          */  
124.         centerLeft = (int) ((areaWidth - imageWidth) * showPositionLeftRatio);   
125.         centerTop = (int) ((areaHeight - imageHeight) * showPositionTopRatio);   
126.            
127.         viewPortArea.add(viewArea, centerLeft, centerTop);   
128.         /**  
129.          * 鼠标拖放的行为  
130.          */  
131.         MouseListener listener = new MouseListener(){   
132.   
133.             public void onMouseDown(Widget sender, int x, int y) {   
134.                 state = 1;   
135.                 startX = x;   
136.                 startY = y;   
137.                 startLeft = viewPortArea.getWidgetLeft(viewArea);   
138.                 startTop = viewPortArea.getWidgetTop(viewArea);   
139.                    
140.             }   
141.   
142.             public void onMouseEnter(Widget sender) {   
143.                    
144.             }   
145.   
146.             public void onMouseLeave(Widget sender) {   
147.                 state = 0;   
148.                 DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");   
149.             }   
150.   
151.             public void onMouseMove(Widget sender, int x, int y) {   
152.                 if(state == 1){   
153.                     DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "move");   
154.                     if(viewPortArea.getWidgetLeft(viewArea) >= minLeft   
155.                             && viewPortArea.getWidgetLeft(viewArea) <= maxLeft   
156.                             && viewPortArea.getWidgetTop(viewArea) >= minTop   
157.                             && viewPortArea.getWidgetTop(viewArea) <= maxTop){   
158.                         viewPortArea.setWidgetPosition(viewArea,startLeft + (x - startX), startTop + (y - startY));   
159.                     }   
160.                 }   
161.             }   
162.   
163.             public void onMouseUp(Widget sender, int x, int y) {   
164.                 // TODO 缺报当拖放结束时，地图还在显示框内   
165.                 if(viewPortArea.getWidgetLeft(viewArea) < minLeft){   
166.                     viewPortArea.setWidgetPosition(viewArea, minLeft, viewPortArea.getWidgetTop(viewArea));   
167.                 }   
168.                 if(viewPortArea.getWidgetTop(viewArea) < minTop){   
169.                     viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), minTop);   
170.                 }   
171.                 if(viewPortArea.getWidgetLeft(viewArea) > 0){   
172.                     viewPortArea.setWidgetPosition(viewArea, 0, viewPortArea.getWidgetTop(viewArea));   
173.                 }   
174.                 if(viewPortArea.getWidgetTop(viewArea) > 0){   
175.                     viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), 0);   
176.                 }   
177.                 state = 0;   
178.                 DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");   
179.             }   
180.                
181.         };   
182.         mouseListenerContainer.addMouseListener(listener);   
183.   
184.     }   
185.   
186. }   

代码很容易理解，这只是一个很简易的实现，至少还有以下需要完善：

1. 地图分块载入
2. 支持鼠标滚轮的缩放
3. “鹰眼”功能。

感兴趣的跟进一下：)

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

最近用GWT写了几个小的项目，感觉开发起来效率还可以，最满意的是不用考虑浏览器的兼容(Cross-browser)问题，client和server端的调试。遇到问题会去查官方文档和官方论坛，要看这东西能弄出些什么新鲜玩意儿，就到国外的一些blog中去翻翻，有空把这些东西列出来，感兴趣的也可以去翻翻。

•  GWT Blog 官方blog，有什么“重大事件”，比如版本更新，可以在上面找到。
• onGWT - Tracking News on GWT 收集了很到关于GWT的新闻，作者几乎每天都会更新一两篇。
• GWT Sandbox 作者写了几个基于GWT的控件，尤其是那个模仿google maps做的“Viewport Viewer”，很有造诣。
• The Unofficial Google Wiki 是个“大全”，有不少有用的索引。

好像还有……，想不起来了，算了，以后再补吧。

补遗：

• GWT Site 罗列了最近的GWT Conference上的很多文章。 
• Google Web Toolkit Solutions 最近出版的一本关于GWT书的网站。

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师