FLEX学习-4 登录界面

1、在flash builder 4.0中新建一个MXML应用程序；

2、在.mxml中增加如下的内容：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx=" http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Declarations>
  <mx:StringValidator source="{username}" property="text" minLength="4" maxLength="10" />
 </fx:Declarations>
 <s:Panel title="Form Container Example"
    width="75%" height="75%"
    horizontalCenter="0" verticalCenter="0"> 
  <s:VGroup left="10" right="10" top="10" bottom="10">
   <mx:Form x="10" y="10" width="300" height="152" defaultButton="{submitButton}">
    <mx:Formheading label="用户登录"/>
    <mx:FormItem label="用户名：">
     <s:TextInput id="username" />
    </mx:FormItem>
    <mx:FormItem label="密码：" >
     <s:TextInput id="password"  />
     <s:Button id="submitButton" label="提交" />
    </mx:FormItem>
   </mx:Form>
  </s:VGroup>
 </s:Panel>
</s:Application>

4、编译后为如下效果