[Flex]flex选修课之第二课:与servlet服务端交互

baacloud免费翻墙vpn注册使用

flex4 lesson 2 : dynamic hello world interacting with server

flex选修课
基于flex4技术从零开发flex博客系统
sban 2009-4-19

第二课:与servlet服务端交互

上一节课,我们讲了如何配置开发环境,包括客房端flex开发环境,以及服务端java开发环境,并且编写了一个客房端示例程序 helloworld,但遗憾的是,目前这一个helloworld不是动态的。如果客户端不能与服务端进行数据交互,那么我感觉我并没有真正入门。

我审视了一下eclipse为我创建的gapp_flexblog项目,它包括以下目录结构:

Guestbook/
  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文件:

package sban.flexblog.server;

 

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>
    <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窗口,弹出浏览器运行窗口,表示服务端程序已经到位,客户端可以发出请求了。
google web tookit server

google-app-browser

如果你安装了curl,可以就可以用它测试服务端代码是否工作正常,打开cmd,输入:

curl http://localhost:8080/gapp_flexblog/hello?name=sban

curl hello

返回正确。我修改了客户端的静态的helloworld程序,如下:

<?xml version="1.0" encoding="utf-8"?>
<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方法。

input your name:

result

本课最终源码:source.zip

 

http://blog.sban.com.cn/

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏