壹咪阳光
BlogJava
首页
新随笔
联系
聚合
管理
随笔-124 评论-49 文章-56 trackbacks-0
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)创建主题
posted on 2009-12-16 11:30
junly
阅读(256)
评论(0)
编辑
收藏
所属分类:
other
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
开源框架Pushlet入门
dreamweaver cs4 许可证过期的解决办法
相关blog
xp下php环境配置
flex初步认识
log4j基础
junit
<
2009年12月
>
日
一
二
三
四
五
六
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(4)
给我留言
查看公开留言
查看私人留言
随笔分类
ajax/jquery/js(23)
freemark/velocity(7)
hibernate/orm(20)
ide(5)
java(31)
jdbc/jndi(4)
jsp/servlet(17)
oracle/mysql/sql(12)
OS(2)
other(7)
spring(4)
struts2/struts1.3/JSF(34)
tomcat/jboss/weblogic(8)
xml/xsl/dtd/scherma
随笔档案
2011年5月 (3)
2011年3月 (1)
2010年11月 (1)
2010年8月 (2)
2010年7月 (8)
2010年6月 (3)
2010年5月 (2)
2010年4月 (5)
2010年3月 (1)
2010年2月 (6)
2010年1月 (7)
2009年12月 (11)
2009年11月 (110)
2009年10月 (20)
收藏夹
freemard(2)
other
ajax-js
facebox
flex
flex2
IBM中国- Java 技术
java2000
Java学习室
Java开源大全
linux 命令全集
Matrix 与Java共舞
tomcat中文网
web game
技术文档
永远的nuix
脚本之家
文章
Java API
JavaTM 2 Platform Standard Edition 5.0
URLRewriter
慎用url重写
搜索
最新评论
1. re: Java 7七大新功能预览[未登录]
shit@fa
--xxx
2. re: 给Dreamweaver安装jQuery插件jQuery_API.mxp
@12
想进来看看啊,不知道字数够不够
--文君
3. re: jQuery-强大的jQuery选择器 (详解)[转]
评论内容较长,点击标题查看
--zuidaima
4. re: hibernate基础-Session_Flush
你怎么查到的>?>
--rejk
5. re: jQuery-强大的jQuery选择器 (详解)[转]
不错,阅读体验很好。内容很充实
--化缘北辰
阅读排行榜
1. jQuery-强大的jQuery选择器 (详解)[转] (103773)
2. jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中(22166)
3. Java 7七大新功能预览(16833)
4. 给Dreamweaver安装jQuery插件jQuery_API.mxp(16393)
5. 开源框架Pushlet入门(6162)
评论排行榜
1. jQuery-强大的jQuery选择器 (详解)[转] (11)
2. Java 7七大新功能预览(9)
3. 给Dreamweaver安装jQuery插件jQuery_API.mxp(5)
4. 米struts2的用户请注意这个超级安全漏洞(3)
5. dreamweaver cs4 许可证过期的解决办法(3)