学习笔记 如何进行Flex界面设计

开发 后端
Flex界面设计的步骤你是否熟悉,使用组件可快速有效开发应用界面。本文就向大家介绍最简单的几个组件应用过程,希望对你有所帮助。

本文和大家重点讨论一下Flex界面设计的方法,使用组件可快速有效开发应用界面。以下介绍最简单的几个组件应用过程,登陆作为检验合法用户身份的有效方法,被广泛应用于Web开发中。

Flex界面设计

使用组件可快速有效开发应用界面。以下介绍最简单的几个组件应用过程,登陆作为检验合法用户身份的有效方法,被广泛应用于Web开发中。

1单击File-New-FlexProject命令,弹出NewFlexProject对话框。
2在PrejectName文本框中输入工程名称。单击Next按钮,弹出设置工程路径对话框。
3在"Folder"文本框中输入工程路径。单击"Finish"按钮。
4单击编辑器上的"Design"按钮,切换至Flex界面设计模式。从左下角Compinents(组件面板)中拖拽Panel组件到编辑区,拖拽两个文本标签,两个文本框,两个按钮到编辑区。5单击编辑区上方的Source按钮,切换至代码编辑区查看代码。

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mxxmlns:mxmxxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
  3. </mx><mx> 
  4.  &lt;![CDATA[  
  5.   importmx.controls.Alert  //调用Alert类,弹出警告  
  6.   privatefunctionloginHandle():void  
  7.   {  
  8.    if(txtUsername.text==""||txtPassword.text=="")  //用户密码为空  
  9.    {  
  10.     Alert.show("请输入完整数据!");  
  11.    }  
  12.    else  
  13.    {  
  14.     //合法用户  
  15.     if(txtUsername.text=="starrynight"&amp;&amp;txtPassword.text=="123456")  
  16.     {  
  17.      Alert.show("登陆成功!");  
  18.     }  
  19.     //登陆失败  
  20.     else  
  21.     {  
  22.      Alert.show("用户名或密码错误!");  
  23.     }  
  24.    }  
  25.   }  
  26.   //重置函数  
  27.   privatefunctionresetHandle():void  
  28.   {  
  29.    txtUsername.text="";  //用户清空  
  30.    txtPassword.text="";  //密码清空  
  31.   }  
  32.  ]]&gt; 
  33. </mx> 
  34.  <mxxmxx="10"y="10"width="250"height="200"layout="absolute"title="用户登陆"fontsize="12"> 
  35.   </mx><mxxmxx="13.5"y="26"text="用户名"> 
  36.   </mx><mxxmxx="13.5"y="56"text="密码"> 
  37.   </mx><mxxmxx="56.5"y="24"id="txtUsername"> 
  38.   </mx><mxxmxx="56.5"y="54"id="txtPassword"displayaspassword="true"> 
  39.   </mx><mxxmxx="44"y="97"label="登陆"click="loginHandle()"> 
  40.   </mx><mxxmxx="117"y="97"label="重置"click="resetHandle()"> 
  41.  </mx> 

按钮组件中的click事件监听对按钮的单击动作。以下代码定义了"loginHandle"函数,用以处理"登陆"事件。

 

  1. privatefunctionloginHandle():void  
  2.   {  
  3.    if(txtUsername.text==""||txtPassword.text=="")  //用户密码为空  
  4.    {  
  5.     Alert.show("请输入完整数据!");  
  6.    }  
  7.    else  
  8.    {  
  9.     //合法用户  
  10.     if(txtUsername.text=="starrynight"&amp;&amp;txtPassword.text=="123456")  
  11.     {  
  12.      Alert.show("登陆成功!");  
  13.     }  
  14.     //登陆失败  
  15.     else  
  16.     {  
  17.      Alert.show("用户名或密码错误!");  
  18.     }  
  19.    }  
  20.   }<mxxmxx="44"y="97"label="登陆"click="loginHandle()"></mx>重置事件处理函数"resetHandle"  
  21.  
  22. privatefunctionresetHandle():void  
  23.   {  
  24.    txtUsername.text="";  //用户清空  
  25.    txtPassword.text="";  //密码清空  
  26.   }<mxxmxx="117"y="97"label="重置"click="resetHandle()"></mx>***Ctrl+F11运行  
  27.  

 下面看一下 Flex界面设计的效果

用户名:starrynight
密码:123456

 

【编辑推荐】

  1. 解析Flexbuilder4十大新特性
  2. 从Flex Builder更名看Flash平台战略
  3. Flex及FlexBuilder2.0开发环境详解
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件 

 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-07-27 11:08:12

Flex

2010-07-30 13:52:17

Flex组件

2010-08-02 16:33:11

Flex Spring

2010-07-30 09:28:09

Flex数据绑定

2010-05-13 10:26:42

Subversion配

2013-01-28 10:11:24

敏捷设计敏捷开发

2011-06-01 10:58:57

2011-12-20 10:42:22

Android应用界面设计

2010-01-20 10:49:29

Visual C++界

2010-07-27 10:39:25

Flex组件

2010-08-10 16:41:54

FlexJSP

2010-08-04 09:26:27

Flex数据

2015-07-09 10:25:45

界面设计UI设计

2011-06-01 10:30:41

用户界面

2010-08-04 09:34:51

Flex设计

2010-03-01 16:32:36

Python语言

2010-08-12 11:05:33

Flex数据绑定

2013-06-21 16:03:40

用户体验设计UED手势

2012-01-16 16:16:49

JavaSwing

2013-04-11 10:26:37

Google Glas谷歌眼镜指南分析
点赞
收藏

51CTO技术栈公众号