本文和大家重點討論一下Flex界面設計的方法，使用組件可快速有效開發應用界面。以下介紹最簡單的幾個組件應用過程，登陸作為檢驗合法用戶身份的有效方法，被廣泛應用于Web開發中。

Flex界面設計

使用組件可快速有效開發應用界面。以下介紹最簡單的幾個組件應用過程，登陸作為檢驗合法用戶身份的有效方法，被廣泛應用于Web開發中。

1單擊File-New-FlexProject命令，彈出NewFlexProject對話框。
2在PrejectName文本框中輸入工程名稱。單擊Next按鈕，彈出設置工程路徑對話框。
3在"Folder"文本框中輸入工程路徑。單擊"Finish"按鈕。
4單擊編輯器上的"Design"按鈕，切換至Flex界面設計模式。從左下角Compinents(組件面板)中拖拽Panel組件到編輯區，拖拽兩個文本標簽，兩個文本框，兩個按鈕到編輯區。5單擊編輯區上方的Source按鈕，切換至代碼編輯區查看代碼。

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mxxmlns:mxmxxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
</mx><mx> 
 &lt;![CDATA[  
  importmx.controls.Alert  //調用Alert類，彈出警告  
  privatefunctionloginHandle():void  
  {  
   if(txtUsername.text==""||txtPassword.text=="")  //用戶密碼為空  
   {  
    Alert.show("請輸入完整數據！");  
   }  
   else  
   {  
    //合法用戶  
    if(txtUsername.text=="starrynight"&amp;&amp;txtPassword.text=="123456")  
    {  
     Alert.show("登陸成功！");  
    }  
    //登陸失敗  
    else  
    {  
     Alert.show("用戶名或密碼錯誤！");  
    }  
   }  
  }  
  //重置函數  
  privatefunctionresetHandle():void  
  {  
   txtUsername.text="";  //用戶清空  
   txtPassword.text="";  //密碼清空  
  }  
 ]]&gt; 
</mx> 
 <mxxmxx="10"y="10"width="250"height="200"layout="absolute"title="用戶登陸"fontsize="12"> 
  </mx><mxxmxx="13.5"y="26"text="用戶名"> 
  </mx><mxxmxx="13.5"y="56"text="密碼"> 
  </mx><mxxmxx="56.5"y="24"id="txtUsername"> 
  </mx><mxxmxx="56.5"y="54"id="txtPassword"displayaspassword="true"> 
  </mx><mxxmxx="44"y="97"label="登陸"click="loginHandle()"> 
  </mx><mxxmxx="117"y="97"label="重置"click="resetHandle()"> 
 </mx> 

按鈕組件中的click事件監聽對按鈕的單擊動作。以下代碼定義了"loginHandle"函數，用以處理"登陸"事件。

privatefunctionloginHandle():void  
  {  
   if(txtUsername.text==""||txtPassword.text=="")  //用戶密碼為空  
   {  
    Alert.show("請輸入完整數據！");  
   }  
   else  
   {  
    //合法用戶  
    if(txtUsername.text=="starrynight"&&txtPassword.text=="123456")  
    {  
     Alert.show("登陸成功！");  
    }  
    //登陸失敗  
    else  
    {  
     Alert.show("用戶名或密碼錯誤！");  
    }  
   }  
  }<mxxmxx="44"y="97"label="登陸"click="loginHandle()"></mx>重置事件處理函數"resetHandle"  
 
privatefunctionresetHandle():void  
  {  
   txtUsername.text="";  //用戶清空  
   txtPassword.text="";  //密碼清空  
  }<mxxmxx="117"y="97"label="重置"click="resetHandle()"></mx>***Ctrl+F11運行  
 

 下面看一下 Flex界面設計的效果

用戶名：starrynight
密碼：123456

【編輯推薦】

1. 解析Flexbuilder4十大新特性
2. 從Flex Builder更名看Flash平臺戰略
3. Flex及FlexBuilder2.0開發環境詳解
4. FlexBuilder3.0與Eclipse3.4的***結合
5. 學習筆記 FlexBuilder2.0中如何使用基于Lists的控件