贴个Flex-Jsp-Mysql简单结合例子

数据库表
这个sql是用pd生成的，具体内容大家自己看一下好了，很简单，数据也自己填充一下。标题上说是用mysql，其实无所谓用啥数据库了，这里我推荐Postgresql，现在有for win平台了，不用cygwin来模拟unix环境，这个Postgresql一来小巧，二来功能齐全，看起来有点象Oracle，当然速度也很快了。

/**//*==============================================================*/
/**//* Table: tblmobile                                             */
/**//*==============================================================*/
create table tblmobile
(
   id                             integer(11)                    not null default 0,
   categoryid                     integer(11),
   name                           varchar(255),
   image                          varchar(255),
   price                          decimal(12,2),
   addtime                        datetime,
   primary key (id)
);

/**//*==============================================================*/
/**//* Index: i_tblMobile_categoryid                                */
/**//*==============================================================*/
create index i_tblMobile_categoryid on tblmobile
(
   categoryid
);

/**//*==============================================================*/
/**//* Index: pk_tblmobile                                          */
/**//*==============================================================*/
create unique index pk_tblmobile on tblmobile
(
   id
);

/**//*==============================================================*/
/**//* Index: i_tblmobile_addtime                                   */
/**//*==============================================================*/
create index i_tblmobile_addtime on tblmobile
(
   addtime
);

phonselist.jsp
Jsp服务器用的是Tomcat，顺便做flex的服务器，版本没啥大关系，我现在用的是5.0.28，Jsp功能是按手机分类id从mysql数据库获取手机列表，这里为方便起见直接在jsp页面里进行数据库访问，正确的做法应该由javabean来分工，其后总jsp生成的是一个xml文件。

<?xml version="1.0" encoding="utf-8"?>
<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import="java.sql.*"%>
<phonelist>
<%
    String sql = "";
    String url = "";

    String categoryID = request.getParameter("categoryID");

    try {
        Class .Class.forName("com.mysql.jdbc.Driver").newInstance();
        url = "jdbc:mysql://localhost/web?user=flex&password=flex&useUnicode=true&characterEncoding=gb2312";
        Connection conn = DriverManager.getConnection(url);
        Statement stmt = conn.createStatement();

        sql = "select id, name, price, image from tblMobile where categoryid=" + categoryID;
        ResultSet rs = stmt.executeQuery(sql);

        while (rs.next()){
            out.println("<phone id=\"" + rs.getString(1) + "\">");
            out.println("<id>" + rs.getString(1) + "</id>");
            out.println("<name>" + rs.getString(2) + "</name>");
            out.println("<price>" + rs.getString(3) + "</price>");
            out.println("<image>" + rs.getString(4) + "</image>");
            out.println("</phone>");
        }

        rs.close();
        stmt.close();
        conn.close();

    } catch (Exception e) {
        out.println(e);
    }
%>
</phonelist>

mobile.mxml
这里要注意一下<mx:HTTPService>中的resultFormat="xml"的设置，在这里应该把这个取掉（我原来是用来做Tree用的）。phonelisg.jsp和mobile.mxml放在相同的目录下，当然你也可以修改url的路径。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
    verticalGap="10"
    backgroundColor="#FFFFFF"
    pageTitle="手机"
    initialize="initApp()">
    
    <mx:Style source="main.css"/>

    <mx:HTTPService id="phoneService" url="phonelist.jsp" resultFormat="xml">
        <mx:request>
            <categoryID>{categoryId}</categoryID>
        </mx:request>
    </mx:HTTPService>

    <mx:Model id="phonelist">
        {phoneService.result.phonelist.phone}
    </mx:Model>


    <mx:Script>
        <![CDATA[

        var categoryId = 2;
        var categoryName = "Moto";
    
        function initApp() {
            phoneService.send();
        }

        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:LinkBar styleName="title" width="500" click="" >
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="首 页" link="main"/>
                    <mx:Object label="手机分类" link="catagory"/>
                    <mx:Object label="论 坛" link="forum"/>
                    <mx:Object label="关 于" link="about"/>
                </mx:Array>
            </mx:dataProvider>
        </mx:LinkBar>
        <mx:Label text="搜索"/>
        <mx:TextInput id="key" width="120"/>
        <mx:Button label="Go"/>
    </mx:HBox>
    
    <mx:HBox>
        <mx:Image source="images/qd_2.jpg"/>
        <mx:Label id="debug" text="123"/>
    </mx:HBox>

    <mx:Effect>
        <mx:Zoom name="zoomBig" zoomTo="107" duration="100"/>
        <mx:Zoom name="zoomSmall" zoomTo="100" duration="100"/>
    </mx:Effect>

    <mx:HBox>
        <mx:Panel id="main" title="" height="360">            
                <mx:Tile width="520">
                    <mx:Repeater id="plist" dataProvider="{phonelist}" startingIndex="" count="">
                        <mx:VBox id="itemBox" verticalGap="0" horizontalAlign="center" mouseUp="">
                            <mx:Canvas width="100" height="100" clipContent="false">
                                <mx:Image width="90" height="90" source="{plist.currentItem.image}" toolTip="RMB {plist.currentItem.price}" mouseOverEffect="zoomBig" mouseOutEffect="zoomSmall" visible="false" complete="event.target.visible=true;"/>
                            </mx:Canvas>
                            <mx:Label id="itemName" text="{plist.currentItem.name}"/>
                            <mx:Label id="itemPrice" text="RMB{plist.currentItem.price}"/>
                        </mx:VBox>
                    </mx:Repeater>
                </mx:Tile>
            <mx:ControlBar>
                <mx:Button label="上一页" click=""/>
                <mx:Button label="下一页" click=""/>
                <mx:Button label="refresh" click="initApp()"/>
            </mx:ControlBar>
        </mx:Panel>
    </mx:HBox>


    <mx:HBox horizontalAlign="center">
        <mx:Label text="Copy Right 2004  dannyr's Studio "/>
    </mx:HBox>
</mx:Application>

 

最后：配置Flex服务器
flex-config.xml

<http-service-proxy>  
    <whitelist> 
            <unnamed>            
                <url>http://{localserver}/flex/phonelist.jsp</url>
            </unnamed>
    </whitelist>
         
         
      </http-service-proxy>