Flex和Jsp创建用户登入系统

 

在开始之前我们先来看下效果：【userName==password都是test】

这个例子中出了使用Flex与JSP验证用户登入之外呢，另外一个看点就是登入之后配合了states使用的resize效果来展示用户正确登入后的界面。

本文是根据Viper Creaitons中的Create a Login System with Flex and PHP 例子上把后台的php更改成JSP来实现的。【理由很简单，我不会PHP 】,后台数据的验证的方法是采用HttpService的，至于前台的参数传递使用的是<mx:Request>方式。网上找了下，还有一种方法是使用URLVariables对象。具体参考：http://blog.csdn.net/cjd007/archive/2007/05/25/1625823.aspx 。

先来看前台UserLogin.mxml

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:states>  
4.         <mx:State name="Logged In">  
5.             <mx:SetProperty target="{panel1}" name="width" value="95%"/>  
6.             <mx:SetProperty target="{panel1}" name="height" value="95%"/>  
7.             <mx:RemoveChild target="{password}"/>  
8.             <mx:RemoveChild target="{username}"/>  
9.             <mx:RemoveChild target="{label1}"/>  
10.             <mx:RemoveChild target="{Submit}"/>  
11.             <mx:RemoveChild target="{label2}"/>  
12.             <mx:SetProperty target="{panel1}" name="title" value="Today is Present"/>  
13.             <mx:AddChild relativeTo="{panel1}" position="lastChild">  
14.                 <mx:Label x="10" y="10" text="Today is a gift"/>  
15.             </mx:AddChild>  
16.             <mx:AddChild relativeTo="{panel1}" position="lastChild">  
17.                 <mx:Label x="10" y="36" text="That's way we call it the present!"/>  
18.             </mx:AddChild>  
19.             <mx:AddChild relativeTo="{panel1}" position="lastChild">  
20.                 <mx:Label x="10" y="62" text="Liceven"/>  
21.             </mx:AddChild>  
22.         </mx:State>  
23.     </mx:states>  
24.     <mx:Script>  
25.         <![CDATA[  
26.             import mx.rpc.events.ResultEvent;  
27.               
28.         ]]>  
29.     </mx:Script>  
30.     <mx:Script>  
31.        
32.   
33. <![CDATA[  
35. private function checkLogin(evt:ResultEvent):void  
36. {  
38.     if(evt.result.loginResult == "yes")  
40.     {  
42.     currentState = "Logged In";  
44.     }  
46.     if(evt.result.loginResult == "no")  
48.     {  
49.           
50.         mx.controls.Alert.show('Invalid username/password');  
52.     }          
53. }  
55. ]]>  
56.   
57. </mx:Script>  
58.     <mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://localhost:8080/UserLogin/loginCheck.jsp" useProxy="false">  
59.         <mx:request xmlns="">  
60.             <username>  
61.                 {username.text}   
62.             </username>  
63.             <password>  
64.                 {password.text}   
65.             </password>  
66.         </mx:request>  
67.     </mx:HTTPService>  
68.        
69.     <mx:Panel resizeEffect="Resize" width="250" height="200" layout="absolute" title="Login System" horizontalCenter="0" verticalCenter="-2" id="panel1">  
70.         <mx:Label x="10" y="10" text="Username:" id="label1"/>  
71.         <mx:TextInput x="10" y="36" id="username"/>  
72.         <mx:Label x="10" y="66" text="Password:" id="label2"/>  
73.         <mx:TextInput x="10" y="92" id="password" displayAsPassword="true"/>  
74.         <mx:Button x="10" y="122" label="Submit" id="Submit" click="login_user.send();"/>  
75.     </mx:Panel>  
76.        
77. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
        <mx:State name="Logged In">
            <mx:SetProperty target="{panel1}" name="width" value="95%"/>
            <mx:SetProperty target="{panel1}" name="height" value="95%"/>
            <mx:RemoveChild target="{password}"/>
            <mx:RemoveChild target="{username}"/>
            <mx:RemoveChild target="{label1}"/>
            <mx:RemoveChild target="{Submit}"/>
            <mx:RemoveChild target="{label2}"/>
            <mx:SetProperty target="{panel1}" name="title" value="Today is Present"/>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="10" y="10" text="Today is a gift"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="10" y="36" text="That's way we call it the present!"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="10" y="62" text="Liceven"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            
        ]]>
    </mx:Script>
    <mx:Script>
    

<![CDATA[

private function checkLogin(evt:ResultEvent):void
{

    if(evt.result.loginResult == "yes")

    {

    currentState = "Logged In";

    }

    if(evt.result.loginResult == "no")

    {
        
        mx.controls.Alert.show('Invalid username/password');

    }        
}

]]>

</mx:Script>
    <mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://localhost:8080/UserLogin/loginCheck.jsp" useProxy="false">
        <mx:request xmlns="">
            <username>
                {username.text}
            </username>
            <password>
                {password.text}
            </password>
        </mx:request>
    </mx:HTTPService>
    
    <mx:Panel resizeEffect="Resize" width="250" height="200" layout="absolute" title="Login System" horizontalCenter="0" verticalCenter="-2" id="panel1">
        <mx:Label x="10" y="10" text="Username:" id="label1"/>
        <mx:TextInput x="10" y="36" id="username"/>
        <mx:Label x="10" y="66" text="Password:" id="label2"/>
        <mx:TextInput x="10" y="92" id="password" displayAsPassword="true"/>
        <mx:Button x="10" y="122" label="Submit" id="Submit" click="login_user.send();"/>
    </mx:Panel>
    
</mx:Application>

 下面是后台loginCheck.jsp

Html代码

1. <%   
2.     response.setContentType("text/xml");   
3.     out.println("<?xml version=/"1.0/" encoding=/"utf-8/"?>");   
4.     String userName = request.getParameter("username");   
5.     String password = request.getParameter("password");   
6.   
7.     //Here we do a simple checking to make sure userName equals to password   
8.   
9.     //and then outprints yes or not   
10.   
11.     String loginResult = "<loginResult>";   
12.     if (userName.equals(password)) {   
13.         loginResult += "yes";   
14.     } else {   
15.         loginResult += "no";   
16.     }   
17.     loginResult += "</loginResult>";   
18.   
19.     out.println(loginResult);   
20. %>  

<%
    response.setContentType("text/xml");
    out.println("<?xml version=/"1.0/" encoding=/"utf-8/"?>");
    String userName = request.getParameter("username");
    String password = request.getParameter("password");

    //Here we do a simple checking to make sure userName equals to password

    //and then outprints yes or not

    String loginResult = "<loginResult>";
    if (userName.equals(password)) {
        loginResult += "yes";
    } else {
        loginResult += "no";
    }
    loginResult += "</loginResult>";

    out.println(loginResult);
%>