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)创建主题