Flex-Jsp-Mysql简单结合例子

上一篇 / 下一篇 2008-03-05 22:32:37 / 个人分类：Flex

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

/*==============================================================*/
/**//*Table: tblmobile*/
/**//*==============================================================*/
createtabletblmobile
(
idinteger(11)notnulldefault0,
categoryidinteger(11),
namevarchar(255),
imagevarchar(255),
pricedecimal(12,2),
addtimedatetime,
primarykey(id)
);

/**//*==============================================================*/
/**//*Index: i_tblMobile_categoryid*/
/**//*==============================================================*/
createindexi_tblMobile_categoryidontblmobile
(
categoryid
);

/**//*==============================================================*/
/**//*Index: pk_tblmobile*/
/**//*==============================================================*/
createuniqueindexpk_tblmobileontblmobile
(
id
);

/**//*==============================================================*/
/**//*Index: i_tblmobile_addtime*/
/**//*==============================================================*/
createindexi_tblmobile_addtimeontblmobile
(
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.*"%>

Stringsql="";

Stringurl="";

StringcategoryID=request.getParameter("categoryID");

try{

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:Applicationxmlns:mx="http://www.macromedia.com/2003/mxml"

verticalGap="10"

backgroundColor="#FFFFFF"

pageTitle="手机"

initialize="initApp()">

<mx:Style.source="main.css"/>

<mx:HTTPServiceid="phoneService"url="phonelist.jsp"resultFormat="xml">

<mx:request>

<categoryID>{categoryId}</categoryID>

</mx:request>

</mx:HTTPService>

<mx:Modelid="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:LinkBarstyleName="title"width="500"click="">

<mx:dataProvider>

<mx:Array>

<mx:Objectlabel="首页"link="main"/>

<mx:Objectlabel="手机分类"link="catagory"/>

<mx:Objectlabel="论坛"link="forum"/>

<mx:Objectlabel="关于"link="about"/>

</mx:Array>

</mx:dataProvider>

</mx:LinkBar>

<mx:Labeltext="搜索"/>

<mx:TextInputid="key"width="120"/>

<mx:Buttonlabel="Go"/>

</mx:HBox>

<mx:HBox>

<mx:Imagesource="images/qd_2.jpg"/>

<mx:Labelid="debug"text="123"/>

</mx:HBox>

<mx:Effect>

<mx:Zoomname="zoomBig"zoomTo="107"duration="100"/>

<mx:Zoomname="zoomSmall"zoomTo="100"duration="100"/>

</mx:Effect>

<mx:HBox>

<mx:Panelid="main"title=""height="360">

<mx:Tilewidth="520">

<mx:Repeaterid="plist"dataProvider="{phonelist}"startingIndex=""count="">

<mx:VBoxid="itemBox"verticalGap="0"horizontalAlign="center"mouseUp="">

<mx:Canvaswidth="100"height="100"clipContent="false">

<mx:Imagewidth="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:Labelid="itemName"text="{plist.currentItem.name}"/>

<mx:Labelid="itemPrice"text="RMB{plist.currentItem.price}"/>

</mx:VBox>

</mx:Repeater>

</mx:Tile>

<mx:ControlBar>

<mx:Buttonlabel="上一页"click=""/>

<mx:Buttonlabel="下一页"click=""/>

<mx:Buttonlabel="refresh"click="initApp()"/>

</mx:ControlBar>

</mx:Panel>