二
1
2010
先前写的videos项目，所有Panel都是从浏览器左上角开始的。对话框都是居中的，但是因为Panel，显得很别扭。
使用DockPanel进行居中处理，基本思路是，屏幕左边是WEST，屏幕中间是CENTER，屏幕右边是EAST，将项目的Panel填到DockPanel的CENTER。
通过Window方法获取到浏览器的宽度，如果超过640px，则宽度是640，如果宽度小于640，则充满整个宽度。
如果宽度不小于640，则左（WEST）右(EAST)各占去多出的1/2宽度。
这样就实现了居中。见：
if (Window.getClientWidth() > 640) {
this.panel.setWidth("640px");
int width = (Window.getClientWidth() – 640) / 2;
this.leftPanel.setWidth(width + "px");
this.rightPanel.setWidth(width + "px");
} else {
this.panel.setWidth(Window.getClientWidth() + "px");
this.leftPanel.setWidth(0 + "px");
this.rightPanel.setWidth(0 + "px");
}
二
1
2010
gwt如何与spring security集成，这是个问题。如果能够合理的集成，可以实现很多需要认证和授权的场合。
比如在访问需要授权的地方，显示登录界面：
登录后可以看到授权的界面：
一
26
2010
在gwt上编写视频播放，可以使用bst项目，见：
使用bst，编写了一个最简单的flash播放器，代码很简单：
public void onModuleLoad() {
SimplePanel panel = new SimplePanel();
AbstractMediaPlayer player = null;try {
player = new FlashMediaPlayer(
"http://marshal.easymorse.com/videos/test.mp4");
panel.setWidget(player);
} catch (PluginNotFoundException e) {
e.printStackTrace();
} catch (PluginVersionException e) {
e.printStackTrace();
} catch (LoadException e) {
e.printStackTrace();
}
RootPanel.get().add(panel);
一
22
2010
html5提供geolocation api，用于获取浏览器所处地理位置相关信息。
![$(07FK8}AOP]%%QO4ZB``0L](http://marshal.easymorse.com/wp-content/uploads/2010/01/07FK8AOPQO4ZB0L.jpg "$(07FK8}AOP]%%QO4ZB``0L")
通过pc上面的chrome/firefox访问获得的经纬度，发现还是很准的。
获得经纬度，可以通过：
在输入框中输入：纬度,精度，就可以得到对应的卫星图或者地图。
代码编写也很容易，这里使用了gwt，其实即使不使用gwt，写javascript也很简单。
这里使用的gwt模块，文档地址在：
http://code.google.com/p/gwt-mobile-webkit/wiki/GeolocationApi
下载地址：
选择gwt-html5-geolocation-xxx.tar.gz。解压缩，将其中的.jar文件部署到gwt项目的classpath下。
在模块的配置文件中，增加：
<inherits name="com.google.code.gwt.geolocation.Html5Geolocation" />
代码：
public void onModuleLoad() {
if (Geolocation.isSupported()) {
Geolocation geo = Geolocation.getGeolocation();
if (geo != null) {
geo.getCurrentPosition(new PositionCallback() {@Override
public void onFailure(PositionError error) {
Window.alert("error");
}@Override
public void onSuccess(Position position) {
Coordinates o = position.getCoords();
RootPanel.get().add(
new HTML("位置，纬度：" + o.getLatitude() + "，经度："
+ o.getLongitude()+"，高度："+o.getAltitude()));
RootPanel.get().add(
new HTML("精度："+o.getAccuracy()));
}});
RootPanel.get().add(new HTML("支持Geolocation，使用"+Geolocation.getProviderName()));
}
}else{
RootPanel.get().add(new HTML("对不起，您的浏览器不支持HTML5 Geolocation API。"));
}
看到的效果，类似这样：
目前测试的结果是：
- android不支持，看了文档，据说是2.0版本以后的支持，测试用的是1.5版本的g3；
- iphone 3g，支持，OS 3.0；
- chrome，支持；
- firefox，支持；
- opera，不支持；
- safari，不支持。
一
22
2010
在weapon项目中，表单在客户端实现了校验，简单而有效。但是还要提防可能出现的客户端校验失效问题，在这种情况下也要做到服务器端不会录入问题数据。这就需要服务器端校验。
spring 3.0引入了jsr 303的java校验工具框架。
需要导入的类库：
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>4.0.0.GA</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.5.6</version>
</dependency>
一
21
2010
为weapon项目增加了图片上传功能。
这需要服务器端（Spring MVC）和客户端（GWT）两部分程序。
一
21
2010
在gwt框架内找了很多办法，都不能解决图片的动态加载问题。当然刷新页面可以解决，但这相当于重新加载gwt模块了。
gwt使用Image类加载图片，使用url作为参数，结果就是相同的url只加载一次，而后不再向服务器发起请求。这样即使服务器端设置no cache等特性也无济于事。
解决办法，是在flash和ajax应用中普遍使用的办法，即给请求加时间戳。这样每次请求都不一样，gwt就必须再次发起get请求了。
代码：
this.image = new Image("/getImage.do?id=" + weapon.getId()+"&time="+System.currentTimeMillis());
一
21
2010
weapon项目已经可以加载图片了，见weapon项目增加图片的显示。但是静态的。
使用spring mvc动态加载图片文件，然后将流写入到Servlet输出流中。
代码如下：
@RequestMapping("/getImage.do")
public void getImage(@RequestParam("id") String id,
HttpServletRequest request, HttpServletResponse response) {
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);if (id == null || id.isEmpty()) {
id = "1";
}try {
OutputStream outputStream = response.getOutputStream();
BufferedInputStream inputStream = new BufferedInputStream(
new FileInputStream(request.getSession()
.getServletContext().getRealPath("/images/")
+ id));
byte[] data = new byte[1024];
for (int i = inputStream.read(data); i > 0; i = inputStream
.read(data)) {
outputStream.write(data, 0, i);
}
inputStream.close();
} catch (IOException e) {
throw new RuntimeException(e);
}
}
一
20
2010
如果只是编辑文字，过于枯燥了。给weapon项目的每个记录增加一个图片。
目前还是写死在程序里面的。
稍后将改为可修改的上传的图片。这需要使用文件上传功能。另外，目前的图片如果发生改变，不刷新页面的话，会使用缓存，也需要处理。
源代码：
一
20
2010
做了个简单的处理，将weapon项目中的表单处理为对话框。
做的不是很彻底，只是简单的。细作的话，需要调整事件处理部分。
截图：
