Mikel
flex4 lesson 2 : dynamic hello world interacting with server
flex选修课
基于flex4技术从零开发flex博客系统
sban 2009-4-19
第二课：与servlet服务端交互
上一节课，我们讲了如何配置开发环境，包括客房端flex开发环境，以及服务端java开发环境，并且编写了一个客房端示例程序 helloworld，但遗憾的是，目前这一个helloworld不是动态的。如果客户端不能与服务端进行数据交互，那么我感觉我并没有真正入门。
我审视了一下eclipse为我创建的gapp_flexblog项目，它包括以下目录结构：
src/
…Java source code…
META-INF/
…other configuration…
war/
…JSPs, images, data files…
WEB-INF/
…app configuration…
lib/
…JARs for libraries…
classes/
…compiled classes…
src为java源码目录，war为程序布署目录，包括了编译之后的所有文件（注：Google App Engine采用标准的war格式组织web程序目录）。与flex中的bin-release目录相当。flex默认把编译之后的文件放在bin- Debug目录下，这是在Debug模式下，如果是发布模式，则放在bin-release目录下。
我在sban.flexblog.server下添加了一个HelloWorldServlet.java文件:
import java.io.IOException;
import javax.servlet.http.*;
public class HelloWorldServlet extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws IOException
{
String[] name = req.getParameterValues("name");
resp.setContentType("text/plain");
resp.getWriter().println("Hi " + name[0] + ",Hello, world.");
}
}
Google App Engine采用java servlet处理客户端与服务端的数据交互。该类继承于HttpServlet，doGet用于处理客户端的get指求。（注：如果是post请求，将报错）
那么Google App Engine是如何处理客户端请求的呢，或者说对于url是怎么处理的？在war/WEB-INF目录下，有一个web.xml文件。当服务端接收到一个 url时，web.xml负责把特定的url地址映射到特定的servlet类。我希望把/gapp_flexblog/hello请求映射到刚才添加的 类HelloWorldServlet上，我添加了如下内容：
<servlet-name>helloWorld</servlet-name>
<servlet-class>sban.flexblog.server.HelloWorldServlet</servlet-class>
</servlet>
…
<servlet-mapping>
<servlet-name>helloWorld</servlet-name>
<url-pattern>/gapp_flexblog/hello</url-pattern>
</servlet-mapping>
它可以帮我把/gapp_flexblog/hello请求交给HelloWorldServlet处理。
点击运行，eclipse打开Google Web Toolkit Hosted mode窗口，弹出浏览器运行窗口，表示服务端程序已经到位，客户端可以发出请求了。
如果你安装了curl，可以就可以用它测试服务端代码是否工作正常，打开cmd，输入:
返回正确。我修改了客户端的静态的helloworld程序，如下：
<FxApplication xmlns="http://ns.adobe.com/mxml/2009">
<Script>
<![CDATA[
import mx.controls.Alert;
import flash.net.URLLoader;
import flash.net.URLRequest;
private function greet() : void
{
new URLLoader( newURLRequest("http://localhost:8080/gapp_flexblog/hello?name=" + vNameTxt.text) )
.addEventListener(Event.COMPLETE,
function(event : Event) : void
{
Alert.show(event.currentTarget.data);
vSendBtn.enabled = true;
}
);
vSendBtn.enabled = false;
}
]]>
</Script>
<HGroup>
<FxTextInput id="vNameTxt" text="sban" />
<FxButton id="vSendBtn" label="greet" click="greet()" />
</HGroup>
</FxApplication>
我用URLLoader及URLRequest向服务端发起一个http get请求，参数为name。我对URLLoader注册了一个事件监听，监测其complete事件，该事件发生在请求返回数据之后，而 URLloader的data属性便记录了返回结果。因为URLLoader在实例化如果有URLRequest，它会自动调用load方法，故而无须再 显式调用load方法。
本课最终源码：source.zip
