回到顶部
您的当前位置: 编程语言> FLEX> FLEX基础> 基础语法
Flex基础(一)Flex简介及MXML语法
2014-06-16 16:06:26
标签: 网络整理 Flex 简介 MXML语法
参考

Flex百度文库系列教程

Open-Open系列教程

Adobe ActionScript 3.0 官方帮助手册

Flex简介

Flex是由Adobe公司提供的全面的富客户端解决方案。Flex技术将桌面软件的响应速度和丰富功能与 Web 应用程序的广度结合在一起提供了更好的用户体验。Flex用于开发和部署丰富客户端应用程序的表示层可以在企业内部或在 Web 上创建并交付丰富 Internet 应用程序堪称最完整、最强大的富客户端开发解决方案。它使企业能够创建个性化的丰富多媒体应用程序极大地提高用户的体验彻底革新人与 Web 的交互关系。

Flex 应用程序与传统的 HTML 应用程序的主要区别在于Flex 应用程序处理更适合在客户端运行如字段校验、数据格式、分类、过滤、工具提示、合成视频、行为及效果等。  Flex 可使开发人员更好地交付应用程序这种应用程序具有更强的互动性而且界面更加友好。

注:其实FLex更适合做类似于后台管理系统的东西(个人理解)。

Flex4的组成元素

1) MXML

MXML是基于XML的标记语言,用于应用程序用户界面的布局,控制组件的样式和外观等。

2) ActionScript 3.0

ActionScript 3.0是一种符合ECMA规范的面向对象脚本语言,类似于JavaScript,运行于Flash Player平台,增强了Flash平台的能力,是Flex 4的核心编程语言。ActionScript 3.0可以完成MXML不能完成的任务,例如,控制事件,绑定数据对象到Flex控件,定义用户组件等。

3) Flex SDK

Flex SDK(Software Development Kit)是Flex开发工具包。目前(2014年)最新版本是Flex 4.6 SDK,用于编译Flex程序(如同JDK)。

4) Flash Builder 4

Flex 4中的开发环境已经更名为Flash Builder,而不是原来的Flex Builder系列。使用此集成开发环境(IDE),开发者可以快速高效地开发富互联网应用程序。

FlashBuild下载地址:点击下载(下载试用版后可进行破解)

MXML语法简介

与HTML类似,MXML是一种XML标记语言,但是专门用于Flex程序,使用它能方便快捷地完成人机界面组件的布局。MXML的基本语法非常简单,例如,要创建一个按钮控件,使用如下代码:

<s:Button x="330" y="154" label="按钮" id="ok_btn"/>

其中,x和y的属性为按钮定义在界面中的坐标,id属性为Button控件定义一个唯一的名称,以后可以使用该名称应用Button控件,label属性用于设置在按钮上显示的标签文本。

用户还可以定义组件属性为它的子标签,例如,上面的Button组件还可以使用如下代码创建:

<s:Button id="ok_btn">
  <s:x>330</s:x>
  <s:y>154</s:y>
  <s:label>按钮</s:label>
</s:Button>
MXML语法要求

1) MXML文件名

  • MXML区分大小写

  • MXML文件必须以小写的“mxml”作为后缀名

  • 在ActionScript类中,变量名必须以字母或下划线开始

  • MXML文件名不能与ActionScript类的名称、组件名一样

  • MXML文件不能命名为Application

2) 组件的属性(组件的属性值可以为以下几种类型)

  • 标量值,如字符串、数字、逻辑值

  • 由标量值组成的数组,如数组和字符串数组

  • ActionScript对象

  • 由ActionScript对象组成的数组

  • ActionScript对象的属性

  • XML数据

  • 样式属性

3) 定义URL(支持以下几种类型的URL)

  • 绝对路径

  • 动态路径

  • 编译时路径

  • 相对路径

4) 注释

  • 单行注释,如  

<!--注释内容-->
  • 多行注释,如  

<!--多行
  注释 -->

5) 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" minWidth="955" minHeight="600">
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				Alert.show("Hello Flex!");
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<s:Button x="50" y="50" click="button1_clickHandler(event)" />
</s:Application>