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

Flex界面設(shè)計

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

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

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mxxmlns:mxmxxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
</mx><mx> 
 &lt;![CDATA[  
  importmx.controls.Alert  //調(diào)用Alert類，彈出警告  
  privatefunctionloginHandle():void  
  {  
   if(txtUsername.text==""||txtPassword.text=="")  //用戶密碼為空  
   {  
    Alert.show("請輸入完整數(shù)據(jù)！");  
   }  
   else  
   {  
    //合法用戶  
    if(txtUsername.text=="starrynight"&amp;&amp;txtPassword.text=="123456")  
    {  
     Alert.show("登陸成功！");  
    }  
    //登陸失敗  
    else  
    {  
     Alert.show("用戶名或密碼錯誤！");  
    }  
   }  
  }  
  //重置函數(shù)  
  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事件監(jiān)聽對按鈕的單擊動作。以下代碼定義了"loginHandle"函數(shù)，用以處理"登陸"事件。

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

 下面看一下 Flex界面設(shè)計的效果

用戶名：starrynight
密碼：123456

【編輯推薦】

1. 解析Flexbuilder4十大新特性
2. 從Flex Builder更名看Flash平臺戰(zhàn)略
3. Flex及FlexBuilder2.0開發(fā)環(huán)境詳解
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件