flex初步认识

一切开始的地方

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute" >
< mx:Panel >
< mx:TextArea  text ="Say hello to Flex!"   />
< mx:Button  label ="Close"   />
</ mx:Panel >
</ mx:Application >

1 头两行包含了版本号、编码、以及命名空间的信息
2 Flex 应用程序所有的具体内容都被放在<mx:Application>标签对中
3 在MXML 文件中的每个标签都有前缀mx，它是Flex 的设计命名空间
4 父标签对中嵌套子标签对,标签是成对出现的

连接数据

Flex 应用程序不直接与数据库进行连接，使用MXML 和ActionScript 代码来操作和管理数据

连接数据库的第一步是生成将在Flex 程序中使用到的数据
步骤：
1. 创建一个数据库（如MySQL）。
2. 编写脚本连接MySQL 数据库并生成XML 格式的数据。

(一)连接外部数据源

对于 所生成的XML 格式数据，你可以使用HTTPService 组件来请求获取数据
例(php)：

< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute" >
< mx:HTTPService
id ="productsRequest"
url ="http://www.somesite.com/products.php"   />

HTTPService 组件定义了一个请求ID，你将使用这个ID 来控制提供数据的URL 或者
服务器与数据之间的绑定。

(二)外部数据与数据驱动控制的绑定

通过数据与数据驱动控制（data-driven control）的绑定，你就可以处理HTTPService的结果（XML 数据），
就象这样：

< mx:DataGrid  x ="20"  y ="80"  id ="productGrid"  width ="400"
dataProvider ="{productRequest.lastResult.products.items}"   >
< mx:columns >
< mx:DataGridColumn  headerText ="Name"  dataField ="name"   />
< mx:DataGridColumn  headerText ="Price"  dataField ="price"   />
</ mx:columns >
</ mx:DataGrid >

数据绑定的语法显示在数据控制的dataProvider 属性中（在波浪形的括号里），它包含了HTTPService 请求ID、
lastResult 方法、以及XML 文件的数据结构。在这个例子中，XML数据源的数据结构看起来就象这样：

< XML >
< products >
< item >
< name > Mobile Phone </ name >
< price > $199 </ price >
</ item >
< item >
< name > Car Charger </ name >
< price > $34 </ price >
</ item >

</ products >
</ XML >

通过设置dataField 属性，项目数据（name 和price）作为数据栅格中每一列的数据。

(三)在运行时加载数据

你还可以在Flex 程序开始运行时加载数据，就象随后所示，在 HTTPService 中向某个特定的URL 发送一个请求：

< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"
creationComplete ="productsRequest.send()"   >

当你将creationComplete 方法添加到应用程序标签里后，数据会在运行时进行加载并交于数据驱动控制（在这个例子中是数据栅格）。
你还可以将HTTPService 请求添加到一个控制事件上而不是程序里的标签中，就象如下所示：

< mx:Button  x ="50"  y ="8"  label ="Get Data"  click ="productsRequest.send();"   />

Flex 提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调用、数据服务、或者其它企业级技术来操纵和管理数据。

Flex 应用程序设计界面布局

1 通过设置组件的属性值来控制Flex 应用程序的界面布局，就象如下所示：

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute" >
< mx:Panel  layout ="absolute"  width ="80%"  height ="80%" >
< mx:TextArea  text ="Say hello to Flex!"  top ="10"  bottom ="70"  left ="10"
right ="30" />
< mx:Button  label ="Close"  right ="30"  bottom ="40" />
</ mx:Panel >
</ mx:Application >

许多容器组件都允许以绝对坐标的方式创建布局，这就意义着你可以使用精确的x 和y的坐标来放置组件。你还可以对应其父容器的相对位置来
放置组件并约束它们，使它们在应用程序的界面放大或缩小时仍然保持其彼此的位置。
2 使用风格和主题增强视觉方面的设计
1)如果样式/style 的属性值没有被指定，将由整个程序中运行的主题/theme 来进行控制。在默认情况下，Flex 应用程序使用Halo 主题
2)创建主题