FLEX学习-4 登录界面

来源：互联网发布：网站seo竞争分析工具编辑：程序博客网时间：2024/05/29 19:35

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、编译后为如下效果