比如在访问需要授权的地方，显示登录界面：

登录后可以看到授权的界面：

如果退出，将返回到登录界面：

登录的用户，如果没有授权，比如没有上传权限，当执行文件上传时，提示权限不足。

当然，不具备权限的用户，应该看不到上传视频界面才对。这里只是演示针对授权不足的服务器端与客户端交互的实例。在正式的系统中，应该根据用户授权生成用户界面，另外，也还要提供服务器端的检查和客户端的提示机制。

下面说说集成gwt和spring security的基本思路。

spring security提供了对web的认证和授权支持。但是，是基于传统的web mvc模式的，视图由服务器端生成。而gwt，视图都在浏览器端由javascript生成，只需从服务器端获取数据，比如json格式的数据。spring security没有提供对ajax的通用支持。

这里就需要考虑，是否还要使用spring security，自己实现认证和授权不也可以么？经过比较，还是使用spring security工作量小，至少大部分认证授权功能都可以使用，只是需要考虑如何与gwt对接。

如何与gwt集成，spring security提供了三种web认证形式，比较主要的是form和basic，都做了集成的实验。还是form方式比较好集成，因为form方式可以通过服务器端的重定向等动作识别和拦截，而basic，是通过请求头信息，以及返回401/403码和浏览器通信，会造成浏览器的响应早于javascritp。

具体方案，是在web app中，增加一个靠前的Filter，用于检查是否有对*.json和j_spring_security_check。

因为，如果spring security受保护的资源被访问，会重定向到登录界面，要求用户登录。而gwt不需要这个重定向，因为gwt有自己的登录界面，只是需要服务器端触发它。因此监控*.json和j_spring_security_check如果被重定向到spring_security_login，也就是登录界面，则不执行重定向操作，改为返回401（未授权错误），gwt根据401，产生事件，触发登录界面。

有关认证部分的配置和代码。

web.xml的配置：

<filter>
    <filter-name>ajaxAuthFilter</filter-name>
    <filter-class>com.easymorse.videos.server.FormAuthenticationFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>ajaxAuthFilter</filter-name>
    <url-pattern>*.json</url-pattern>
</filter-mapping>

<filter-mapping>
    <filter-name>ajaxAuthFilter</filter-name>
    <url-pattern>/j_spring_security_check</url-pattern>
</filter-mapping>

 

Filter代码：

package com.easymorse.videos.server;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletResponseWrapper;

public class FormAuthenticationFilter implements Filter {

    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse = new AuthenticationResponseWrapper(
                (HttpServletResponse) response);
        chain.doFilter(request, httpServletResponse);
    }

    @Override
    public void init(FilterConfig config) throws ServletException {
    }

}

class AuthenticationResponseWrapper extends HttpServletResponseWrapper {

    public AuthenticationResponseWrapper(HttpServletResponse response) {
        super(response);
    }

    @Override
    public void sendRedirect(String location) throws IOException {
        if (location.contains("spring_security_login")) {
            this.sendError(401, "need login");
        } else {
            if (!location.endsWith("json")) {
                super.sendRedirect(location);
            }
        }
    }

}

 

gwt有关代码，使用了gwt的mvp模式，http 401会引发NeedLoginEvent事件，代码就不贴出来了，可以见google code上的源代码。

还有一种情况，是授权不够的问题，即已经登录了，但是这个用户没有足够权限访问某个资源。按理说，应该根据用户的权限动态生成界面，这样用户就不会访问未授权的资源了。但是也可能是这样，比如用户有两个帐号，一个普通用户，一个管理员的。用户的操作可能产生url的变化，在gwt中是token，比如：

http://easymorse.com/aaa/a.html#admin

用户用管理员权限登录访问过上述资源，并保留了书签，下次直接访问书签，却用了普通用户登录。这时就需要上面提到的处理方式。

源代码见：

http://easymorse.googlecode.com/svn/tags/Videos-0.3.2/

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>

 

spring的配置：

<bean
    class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
    <property name="webBindingInitializer">
        <bean
            class="org.springframework.web.bind.support.ConfigurableWebBindingInitializer">
            <property name="validator" ref="validator" />
        </bean>
    </property>
</bean>

<bean id="validator"
    class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean" />

 

然后写点儿代码即可。首先是domain对象，就是javabean，要校验的名词对象，需要这样写：

@NotNull
@NotEmpty
private String name;

 

表示不能为空，也不能为空字串。这里NotEmpty不是jsr303标准的注解，是hibernate扩展的。

使用校验：

@RequestMapping(value = "/save.json", method = RequestMethod.POST)
public String save(@Valid Weapon weapon, BindingResult results) {
    if (results.hasErrors()) {
        throw new RuntimeException(results.getAllErrors().toString());
    }

    if (weapon.getId() == null || weapon.getId().isEmpty()) {
        create(weapon);
    } else {
        update(weapon);
    }

    return "saved";
}

在这里通过Valid注解，标注需要校验的变量。后面的BindingResult，是存储错误信息的对象。这里做的很简单，如果校验有错误，将直接抛出runtime异常。因为正常情况下都应该通过客户端的校验机制处理了。

这里将客户端校验代码屏蔽，测试到的结果是返回了异常：

java.lang.RuntimeException: [Field error in object 'weapon' on field 'name': rejected value []; codes [NotEmpty.weapon.name,NotEmpty.name,NotEmpty.java.lang.String,NotEmpty]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [weapon.name,name]; arguments []; default message [name],{org.hibernate.validator.constraints.NotEmpty.message},[Ljava.lang.Class;@1d6ced0,[Ljava.lang.Class;@1a3ece5]; default message [may not be empty]]
    at com.easymorse.weapons.server.WeaponService.save(WeaponService.java:74)

另外，还可以在注解中使用提示信息，比如：

@NotEmpty(message=”请输入名称”)

还有，校验注释有：

@Pattern(regex=, flag=)

这是标准的，可以写正则表达式。

源代码：

http://easymorse.googlecode.com/svn/tags/Weapons-0.5.5

这需要服务器端（Spring MVC）和客户端（GWT）两部分程序。

spring mvc这部分比较简单。需要类库支持：

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.1</version>
</dependency>

 

然后，需要配置spring的支持：

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="100000" />
</bean>

最后，写spring程序部分，需要至少传递一个id参数和一个文件内容部分。

@RequestMapping("/upload.do")
public void upload(@RequestParam("id") String id,
        @RequestParam("file") MultipartFile file,
        HttpServletRequest request, HttpServletResponse response) {
    try {
        if (id != null && !id.isEmpty()) {
            File image = new File(request.getSession().getServletContext()
                    .getRealPath("/images/" + id));
            if (image.exists()) {
                image.delete();
            }
            FileOutputStream outputStream = new FileOutputStream(image);
            outputStream.write(file.getBytes());
            outputStream.close();
            response.getWriter().append("ok");
        } else {
            response.getWriter().append("undo while no id");
        }
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
}

 

客户端，代码有点儿乱，主要是事件处理部分，采用比较直接的方式写了这部分的对话框和处理代码。

点击图片，将弹出替换图片的对话框。这里面是一个form，和form提交的监听器，这里只写了提交成功的监听器。

@Override
public void setData(final Weapon weapon) {
    this.name.setValue(weapon.getName());
    this.description.setValue(weapon.getDescription());
    this.image = new Image("/getImage.do?id=" + weapon.getId() + "&time="
            + System.currentTimeMillis());
    this.detailsTable.setWidget(2, 1, this.image);

    this.image.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            final DialogBox dialogBox = new DialogBox();
            dialogBox.setText("替换图片");
            dialogBox.setGlassEnabled(true);
            dialogBox.setAnimationEnabled(true);
            VerticalPanel dialogContents = new VerticalPanel();

            final FormPanel form = new FormPanel();
            form.setAction("/upload.do");
            form.setEncoding(FormPanel.ENCODING_MULTIPART);
            form.setMethod(FormPanel.METHOD_POST);

            form.addSubmitCompleteHandler(new SubmitCompleteHandler() {
                @Override
                public void onSubmitComplete(SubmitCompleteEvent event) {
                    dialogBox.setGlassEnabled(false);
                    dialogBox.hide();
                    setData(weapon);
                }
            });
            dialogContents.add(form);

            HorizontalPanel uploadPanel = new HorizontalPanel();
            form.add(uploadPanel);

            final FileUpload fileUpload = new FileUpload();
            uploadPanel.add(fileUpload);
            fileUpload.setName("file");
            Hidden hidden = new Hidden("id", weapon.getId());
            uploadPanel.add(hidden);

            Button sendButton = new Button("上传", new ClickHandler() {

                @Override
                public void onClick(ClickEvent event) {
                    if (fileUpload.getFilename().isEmpty()) {
                        Window.alert("请选择文件后上传");
                    } else {
                        form.submit();
                    }
                }
            });
            uploadPanel.add(sendButton);

            Button closeButton = new Button("关闭", new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    dialogBox.setGlassEnabled(false);
                    dialogBox.hide();
                }
            });
            dialogContents.add(closeButton);

            dialogContents.setSpacing(4);
            dialogBox.setWidget(dialogContents);
            dialogBox.show();
        }
    });

源代码见：

http://easymorse.googlecode.com/svn/tags/Weapons-0.5.0

使用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);
    }
}

 

其他的，变化不大，需要在web.xml文件中增加映射：

<servlet-mapping>
    <servlet-name>controller</servlet-name>
    <url-pattern>*.do</url-pattern>
</servlet-mapping>

 

这样就可以动态加载图片了。

但是问题在于，gwt这边只加载一次同url的图片，如果再次创建带图片的对话框，将不再和服务器端通信。这需要GWT端的解决方案。

做的不是很彻底，只是简单的。细作的话，需要调整事件处理部分。

截图：

另外，修改了小的bug，通过除firefox浏览器提交中文都是乱码，包括iphone和htc g3，查了一下原因，比如android的chrome，默认的字符集是iso-8859-1。

通过spring的filter强制服务器端做utf-8编码，问题解决。

<filter>
    <filter-name>Set Character Encoding</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>utf8</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>Set Character Encoding</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

见代码：

http://easymorse.googlecode.com/svn/tags/Weapons-0.4.2

目前实现功能截图，列表功能：

增加新记录：

保存后的效果：

在实现过程中发现原来写的WeapenDeleteEvent和相关Handler类没有作用。在event包下面的代码应该是事件和对应处理类。只有需要视图切换的时候才需要创建这些。

所有和视图切换有关的代码，都应该集中到AppController中，在presenter包中的部分，都是具体视图内部的事件变化和控制。

这里牵扯到一些技术点，Weapon是javabean，虽然是JavaScriptObject类型的，不能直接实例化，比如new，这是因为其实它是javacript在java中的代理对象。

之前没有问题，因为并不需要实例化Weapon对象，因为是从response中得到文本，借助GWT自动得到Weapon对象。但是现在需要将表单中的数据发送到服务器端。好像不用封装为对象也可以，但是这样其实并不省事儿。表单的参数很多，传递起来不方便，不利于维护。

需要实例化Weapon，不能new，而是要这样：

this.weapon = JavaScriptObject.createObject().cast();

然后，通过POST，提交到服务器端，用的方式和前面删除功能类似：

RequestBuilder requestBuilder = new RequestBuilder(RequestBuilder.POST,
        "../save.json");
requestBuilder.setHeader("Content-Type",
        "application/x-www-form-urlencoded");

requestBuilder.setRequestData(new StringBuilder().append("name=")
        .append(weapon.getName()).append("&description=").append(
                weapon.getDescription()).toString());

 

然后，需要spring mvc这边能够比较舒服的得到Weapon实例。代码如下：

@RequestMapping(value = "/save.json", method = RequestMethod.POST)
public String save(Weapon weapon) {

    if (weapon.getId() == null) {
        create(weapon);
    }

    return "saved";
}

可以看到spring可以自动将同名参数注入到方法的参数中。

源代码如下：

http://easymorse.googlecode.com/svn/tags/Weapons-0.3/

在原有列表功能基础上增加了删除功能。不过还不完善，没有加上地址栏历史处理部分。

主要需要解决的是，删除功能，因为改变了资源，通过的是POST方法（当然最好是用DELETE方法）。

在GWT客户端的POST写法是：

RequestBuilder requestBuilder = new RequestBuilder(RequestBuilder.POST,
“../delete.json”);
requestBuilder.setHeader(“Content-Type”,
“application/x-www-form-urlencoded”);

StringBuilder builder = new StringBuilder();

for (Integer id : selectedRows) {
builder.append(“id=”).append(id).append(“&”);
}

requestBuilder.setRequestData(builder.toString());

requestBuilder.setCallback(new RequestCallback() {

@Override
public void onResponseReceived(Request request, Response response) {
list();
}

@Override
public void onError(Request request, Throwable e) {
Window.alert(“error”);
}
});
try {
requestBuilder.send();
} catch (RequestException e) {
e.printStackTrace();
}

在服务器端使用的是spring，写法是：

@RequestMapping(value = “/delete.json”, method = RequestMethod.POST)
public String delete(@RequestParam(“id”) List<Integer> ids) {
for (Integer id : ids) {
data.remove(id.intValue());
}
return “delete”;
}

这里限制是POST方法提交才可以。

这个代码还有很多问题，比如对异常的处理，对GWT model部分的处理（需要使用观察者模式解耦）等。在后续演化版本中逐渐加入。

源代码见：

http://easymorse.googlecode.com/svn/tags/Weapons-0.2

下一个版本，将实现“增加”武器功能。

http://code.google.com/p/gwt-mvp-sample/

但是这个示例使用的是rpc方式和服务器通信。我们使用spring 3.0和json通信。

因此参照它写了个简单的实例，主要是解释json数据如何发送和如何获取。另外，临摹了一下，体会mvp模式。

spring的json返回视图，默认情况下将ModelMap中的所有对象都转化了，而实际上客户端只需要其中的某个对象。

这需要这样，比如：

@RequestMapping(“/list.json”)
@ModelAttribute(“data”)
public List list() {
return data;
}

这里使用了ModelAttribute注解，这样只返回名为data的对象，在这里是个List，样子大概是这样：

{“data”:[{"name":"w1","id":"1","description":"w1.desc","imageUrl":"w1.png"},{"name":"w2","id":"2","description":"w2.desc","imageUrl":"w2.png"}]}

一个名为data的数组。

那么，在gwt的客户端，我只想要这个数组，而不是带data属性的对象，怎么办呢？见Weapon代码，用于表示客户端的模型：

package com.easymorse.weapons.client.model;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;

public class Weapon extends JavaScriptObject {

protected Weapon() {
}

public final native String getId() /*-{
return this.id;
}-*/;

public final native void setId(String id) /*-{
this.id = id;
}-*/;

public final native String getName() /*-{
return this.name;
}-*/;

public final native void setName(String name) /*-{
this.name = name;
}-*/;

public final native String getDescription() /*-{
return this.description;
}-*/;

public final native void setDescription(String description) /*-{
this.description = description;
}-*/;

public final native String getImageUrl() /*-{
return this.imageUrl;
}-*/;

public final native void setImageUrl(String imageUrl) /*-{
this.imageUrl = imageUrl;
}-*/;

public static native JsArray<Weapon> arrayFromJson(String jsonString) /*-{
return eval(‘(‘ + jsonString + ‘)’).data;
}-*/;
}

这里在eval方法执行后，加.data，表示只取data属性的内容，也即数组。当然数组的格式是JsArray而不是java的List啥的了。

其他部分，使用了MVP模式，但是还不完全，因为没有事件处理部分。在后续实例中逐渐加上。

源代码见：

http://easymorse.googlecode.com/svn/tags/Weapons-0.1

   [WARN] Error starting handlers
java.lang.NoSuchMethodError: javax.servlet.ServletContext.getContextPath()Ljava/lang/String;
    at org.springframework.web.context.ContextLoader.createWebApplicationContext(ContextLoader.java:254)
    at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:192)
    at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:47)
    at org.mortbay.jetty.handler.ContextHandler.startContext(ContextHandler.java:543)
    at org.mortbay.jetty.servlet.Context.startContext(Context.java:136)

但是如果在命令行中：

mvn gwt:run

或者:

mvn jetty:run

都没有错误。

pom文件中的serlvet和jsp版本是：

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.4</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.0</version>
    <scope>provided</scope>
</dependency>

 

更换为高版本后，问题解决：

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.1</version>
    <scope>provided</scope>
</dependency>

 

主要原因是，spring 3.0使用了2.5版本的servlet。javax.servlet.ServletContext.getContextPath()方法是2.5版本中加入的。

代码见：

http://easymorse.googlecode.com/svn/tags/spring.json.demo-0.2

返回值如下：

{"page":{"results":[{"authors":[{"name":"张三","id":"1"},{"name":"李四","id":"2"}],"name":"五百年来谁著史","id":"1"}],"pageNo":2}}

主要复杂了的部分是：

@Controller
public class DemoService {
	@RequestMapping("/a.json")
	public String doService(ModelMap modelMap) {
		Pagination pagination = new Pagination();
		pagination.setPageNo(2);
		pagination.setResults(new ArrayList<Object>());
		Book book = new Book();
		book.setId("1");
		book.setName("五百年来谁著史");
		book.setAuthors(new ArrayList<Author>());
		pagination.getResults().add(book);
		Author author = new Author();
		author.setId("1");
		author.setName("张三");
		book.getAuthors().add(author);
		author = new Author();
		author.setId("2");
		author.setName("李四");
		book.getAuthors().add(author);

		modelMap.put("page", pagination);
		return "list";
	}