很漂亮的Flex 使用者登入介面

心靈小公寓發表於2016-11-24
Flex

Java程式碼  

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[0x000000,0x323232]" fontSize="12">  
  3.     <mx:Script>  
  4.         <![CDATA[  
  5.             // Import easing classes if you use them only in MXML.  
  6.             import mx.effects.easing.Bounce;  
  7.         ]]>  
  8.     </mx:Script>  
  9.   
  10.     <!-- Define the transition to animate the change of view state. -->  
  11.     <mx:transitions>  
  12.        <mx:Transition>  
  13.             <mx:Parallel   
  14.               targets="{[loginPanel, registerLink, loginButton, confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">  
  15.                 <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>  
  16.                 <mx:Sequence targets="{[confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">  
  17.                    <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>  
  18.                    <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>  
  19.                 </mx:Sequence>  
  20.             </mx:Parallel>  
  21.         </mx:Transition>  
  22.     </mx:transitions>  
  23.           
  24.     <mx:states>  
  25.         <mx:State name="Register">  
  26.             <mx:AddChild relativeTo="{loginForm}"   
  27.                 position="lastChild">  
  28.                 <mx:FormItem id="confirm" label="確   認:">  
  29.                     <mx:TextInput/>  
  30.                 </mx:FormItem>  
  31.             </mx:AddChild>   
  32.             <mx:AddChild relativeTo="{loginForm}"   
  33.                 position="lastChild">  
  34.             <mx:FormItem id="realnameL" label="真實姓名：">  
  35.                 <mx:TextInput id="realname"/>  
  36.             </mx:FormItem>  
  37.             </mx:AddChild>   
  38.             <mx:AddChild relativeTo="{loginForm}"   
  39.                 position="lastChild">  
  40.             <mx:FormItem id="telL" label="電話：">  
  41.                 <mx:TextInput id="tel"/>  
  42.             </mx:FormItem>  
  43.             </mx:AddChild>  
  44.             <mx:AddChild relativeTo="{loginForm}"   
  45.                 position="lastChild">  
  46.             <mx:FormItem id="emailL" label="Email：">  
  47.                 <mx:TextInput id="email"/>  
  48.             </mx:FormItem>  
  49.             </mx:AddChild>  
  50.             <mx:AddChild relativeTo="{loginForm}"   
  51.                 position="lastChild">  
  52.             <mx:FormItem id="areanameL" label="所在區域：">  
  53.                 <mx:TextInput id="areaname"/>  
  54.             </mx:FormItem>  
  55.             </mx:AddChild>                                                                
  56.             <mx:SetProperty target="{loginPanel}"  
  57.                 name="title" value="使用者註冊"/>              
  58.             <mx:SetProperty target="{loginButton}"  
  59.                name="label" value="註冊"/>  
  60.             <mx:RemoveChild target="{registerLink}"/>  
  61.             <mx:AddChild relativeTo="{spacer1}" position="before">  
  62.                 <mx:LinkButton label="返回登入"   
  63.                     click="currentState=''"/>  
  64.             </mx:AddChild>  
  65.         </mx:State>  
  66.     </mx:states>  
  67.   
  68.     <mx:Panel id="loginPanel"   
  69.         title="使用者登入" color="0xffffff" borderAlpha="0.15"  
  70.         horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalCenter="0" verticalCenter="022">  
  71.   
  72.         <mx:Form id="loginForm" color="0x323232">  
  73.         <mx:FormItem label="使用者名稱:">  
  74.             <mx:TextInput/>  
  75.         </mx:FormItem>  
  76.         <mx:FormItem label="密   碼:">  
  77.             <mx:TextInput/>  
  78.         </mx:FormItem>  
  79.     </mx:Form>  
  80.       
  81.     <mx:ControlBar>  
  82.         <mx:LinkButton id="registerLink"  
  83.             label="新使用者註冊"   
  84.             click="currentState='Register'"/>  
  85.         <mx:Spacer width="100%" id="spacer1"/>  
  86.         <mx:Button label="登入" id="loginButton"/>  
  87.     </mx:ControlBar>  
  88.     </mx:Panel>  
  89.   
  90. </mx:Application>  

相關文章