flex2 + jsp +mysql sample

数据库表
这个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.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>

posted on 2006-11-27 16:58 leoli 阅读(532) 评论(0)  编辑  收藏 所属分类: Flex


只有注册用户登录后才能发表评论。


网站导航:
 

导航

<2024年12月>
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

统计

常用链接

留言簿(6)

随笔分类

随笔档案(17)

文章分类(86)

收藏夹(3)

flex blog

good site

java blog

my friend

tools

抓虾

搜索

最新评论

阅读排行榜

评论排行榜