Flex-Jsp-Mysql简单结合例子

 

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 >