随笔-124  评论-49  文章-56  trackbacks-0
一切开始的地方
<?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)创建主题

posted on 2009-12-16 11:30 junly 阅读(256) 评论(0)  编辑  收藏 所属分类: other

只有注册用户登录后才能发表评论。


网站导航: