1环境搭建
1.1安装FlexBuilder
1.2安装MyEclipse
1.3安装tomcat
1.4安装blazeds
2简单示例
2.1创建Flex项目
2.2MXML文件编辑
Flex的编程其实就是基于MXML文件的编程,MXML文件描述了UI的布局以及控件触发的事件。
2.3UI构造
界面增加了一个textarea,以及两个按钮。
第一个按钮表示通过按钮触发脚本事件关闭窗口。
Close 表示通过按钮触发属性的变更关闭窗口。
以上的操作都是基于事件触发的,类似于编写javascript代码。
2.4MXML格式定义
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style> TextArea { font-size: 36px; font-weight: bold; } </mx:Style> <mx:Script>---定义脚本 <![CDATA[ public function close() : void { myPanel.visible = false; } ]]> </mx:Script> <mx:Fade id="myFade"/> <mx:Panel id= "myPanel" layout="absolute" width="80%" height="80%" x="122" y="24" hideEffect="{myFade}"> <mx:TextArea text="Say hello to Flex!" top="10" bottom="102" left="10" right="42"/> <mx:Button label="Close" click="myPanel.visible=false" x="174" y="166"/> <mx:Button x="10" y="166" label="close with code" click="close()"/> </mx:Panel> </mx:Application>
3事件处理
3.1属性赋值处理
<mx:Button label="Close" click="myPanel.visible=false" x="174" y="166"/>
3.2Actionscript处理
<mx:Script>---定义脚本 <![CDATA[ public function close() : void { myPanel.visible = false; } ]]> </mx:Script> <mx:Button x="10" y="166" label="close with code" click="close()"/> 3.3 绑定数据赋值处理 <?xml version="1.0"?> <!-- ?xml tag must start in line 1 column 1 --> <!-- MXML root element tag. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- Flex controls exist in a container. Define a Panel container. --> <mx:Panel title="My Application"> <!-- TextInput control for user input. --> <mx:TextInput id="myInput" width="150" text=""/> <!-- Output TextArea control. --> <mx:TextArea id="myText" text="{myInput.text}" width="150"/> </mx:Panel> </mx:Application>
3.4监听器模式处理
实现美元和人民币转换程序。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createListener();"> <mx:Script> <![CDATA[ public function createListener():void { btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency); } public function convertCurrency(e:Event):void { var rate:Number = 6.2; var price:Number = Number(txtPrice.text); if (isNaN(price)) { lblResults.text = "Please enter a valid price."; } else { price = price * rate; lblResults.text = "Price in Yen: " + String(price); } } ]]> </mx:Script> <mx:Panel x="20" y="20" width="450" height="150" layout="absolute" title="Currency Converter"> <mx:Label x="25" y="37" text="Price in Dollars"/> <mx:Label x="120" y="65" id="lblResults"/> <mx:TextInput x="120" y="35" id="txtPrice"/> <mx:Button x="290" y="35" label="Convert to Yen" id="btnConvert"/> </mx:Panel> </mx:Application>
3.4.1界面绘制
<mx:Panel x="20" y="20" width="450" height="150" layout="absolute" title="Currency Converter"> <mx:Label x="25" y="37" text="Price in Dollars"/> <mx:Label x="120" y="65" id="lblResults"/> <mx:TextInput x="120" y="35" id="txtPrice"/> <mx:Button x="290" y="35" label="Convert to Yen" id="btnConvert"/> </mx:Panel>
3.4.2实现事件
public function convertCurrency(e:Event):void { var rate:Number = 6.2; var price:Number = Number(txtPrice.text); if (isNaN(price)) { lblResults.text = "Please enter a valid price."; } else { price = price * rate; lblResults.text = "Price in Yen: " + String(price); } }
3.4.3注册事件到监听器
public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}
3.4.4加载事件监听器
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createListener();">
4数据绑定
4.1程序效果图
该应用实现通过flex从远程服务中获取xml数据,然后将数据解析显示在datagrid组建中,以及将数据绑定显示在textarea组建中。
4.2MXML文件
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()"> <mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}"> <mx:DataGrid id="dgPosts" x="20" y="20" width="400" height="145" dataProvider="{feedRequest.lastResult.rss.channel.item}"> <mx:columns> <mx:DataGridColumn headerText="Posts" dataField="title"/> <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/> </mx:columns> </mx:DataGrid> <mx:TextArea x="20" y="175" width="400" height="97" htmlText="{dgPosts.selectedItem.description}"/> <mx:LinkButton x="20" y="280" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/> </mx:Panel> <mx:HTTPService id="feedRequest" url="http://weblogs.macromedia.com/mchotin/index.xml" useProxy="false"/> </mx:Application>
4.3引用服务
<mx:HTTPService
id="feedRequest"
url="http://weblogs.macromedia.com/mchotin/index.xml"
useProxy="false"/>
id 对应服务的唯一标示。
url 服务的地址
4.4发送请求
通过以下配置实现服务的请求。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
creationComplete="feedRequest.send()"
创建程序完毕后通过调用服务的send方法实现对服务的请求。
4.5返回的xml信息
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" version="2.0"> <channel> <title>Matt Chotin</title> <atom:link href="http://blogs.adobe.com/mchotin/feed" rel="self" type="application/rss+xml"/> <link>http://blogs.adobe.com/mchotin</link> <description/>....
4.6绑定并显示数据
4.6.1显示blog标题信息
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}">
4.6.2显示blog列表信息(datagrid组建)
<mx:DataGrid id="dgPosts" x="20" y="20" width="400" height="145" dataProvider="{feedRequest.lastResult.rss.channel.item}"> <mx:columns> <mx:DataGridColumn headerText="Posts" dataField="title"/> <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/> </mx:columns> </mx:DataGrid>
dataProvider : 配置rss的日志项信息,其实就是对应xml的对应内容节点。
dataField:配置xml中的具体子节点。
4.6.3显示blog详细信息(textArea组建)
<mx:TextArea x="20" y="175" width="400" height="97" htmlText="{dgPosts.selectedItem.description}"/>
HtmlText:已html形式显示选择项的description字段。
4.6.4显示blog里面的链接信息(LinkButton组建)
<mx:LinkButton x="20" y="280" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>
5常用组建
5.1ComboBox
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="10" y="10" width="350" height="200" layout="absolute" title="Rate Customer Service"> <mx:ComboBox x="20" y="20" id="cbxRating"> <mx:dataProvider> <mx:Array> <mx:String>Satisfied</mx:String> <mx:String>Neutral</mx:String> <mx:String>Dissatisfied</mx:String> </mx:Array> </mx:dataProvider> </mx:ComboBox> <mx:Button x="140" y="20" label="Send"/> </mx:Panel> </mx:Application>
5.2绑定数据
5.2.1字符串
<mx:dataProvider> <mx:Array> <mx:String>Satisfied</mx:String> <mx:String>Neutral</mx:String> <mx:String>Dissatisfied</mx:String> </mx:Array> </mx:dataProvider>
5.2.2对象
<mx:Object label="Satisfied" data="5"/> <mx:Object label="Neutral" data="3"/> <mx:Object label="Dissatisfied" data="1"/>
便于处理将显示信息和绑定数据值进行分离。
5.3获取列表数据
<mx:Label x="20" y="120" text="{cbxRating.value}" />
5.4切换组建状态
当点击 Advanced Options 链接按钮时下面自动依次渐变的显示复选框按钮。
5.4.1MXML数据
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel id="panel1" x="5" y="5" width="300" height="400" layout="absolute"> <mx:Label x="20" y="70" text="Search"/> <mx:TextInput x="20" y="90"/> <mx:Button x="185" y="90" label="Go"/> <mx:LinkButton x="20" y="120" label="Advanced Options" click="currentState='Advanced'" id="linkbutton1"/> </mx:Panel> <mx:states> <mx:State name="Advanced"> <mx:AddChild relativeTo="{panel1}" position="lastChild"> <mx:VBox x="20" y="160" width="160" height="80" id="myVBox"> <mx:CheckBox label="Regular expression"/> <mx:CheckBox label="Case sensitive"/> <mx:CheckBox label="Exact phrase"/> </mx:VBox> </mx:AddChild> <mx:SetEventHandler target="{linkbutton1}" name="click" handler="currentState=''"/> </mx:State> </mx:states> <mx:transitions> <mx:Transition id="myTransition" fromState="*" toState="Advanced"> <mx:Parallel target="{myVBox}"> <mx:WipeDown duration="2000"/> <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/> </mx:Parallel> </mx:Transition> </mx:transitions> </mx:Application>
6创建自定义组件
6.1创建组建
6.1.1新建组件
6.1.2录入组件信息
6.2绘制组件
6.2.1组建界面
6.2.2MXML文件
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275" height="150" title="Member Login"> <mx:Script> <![CDATA[ private function handleLoginEvent():void { lblTest.text = "logging in..."; //login logic } ]]> </mx:Script> <mx:Label x="10" y="12" text="Username"/> <mx:Label x="10" y="42" text="Password"/> <mx:TextInput x="74" y="10" id="txtUID"/> <mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/> <mx:Button x="178" y="70" label="Login" click="handleLoginEvent()"/> <mx:Label x="74" y="72" id="lblTest"/> </mx:Panel> </mx:Canvas>
6.3引用组建
6.3.1新建测试应用
6.3.2引用登陆组件
通过组建视图将自定义的组建拖入测试组界面。
6.3.3MXML
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="myComponents.*" xmlns:ns2="*"> <mx:Panel x="20" y="20" width="375" height="300" layout="absolute" title="Main Application Window"> </mx:Panel> <ns2:LoginBox x="403" y="20"> </ns2:LoginBox> </mx:Application>
6.4测试效果图
7WebService调用
通过webservice获取博客信息并进行显示。
7.1界面定义
7.2MXML定义
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()"> <mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="Most Popular Posts"> <mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()"> <mx:Object label="Top 5" data="5" /> <mx:Object label="Top 10" data="10" /> <mx:Object label="Top 15" data="15" /> </mx:ComboBox> <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}"> <mx:columns> <mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/> <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75"/> </mx:columns> </mx:DataGrid> <mx:LinkButton x="30" y="250" label="Select an item and click here for full post" click="navigateToURL(new URLRequest(dgTopPosts.selectedItem.postLink));" /> </mx:Panel> <mx:WebService id="wsBlogAggr" wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl" useProxy="false"> <mx:operation name="getMostPopularPosts"> <mx:request> <daysBack>30</daysBack> <limit>{cbxNumPosts.value}</limit> <categoryId>1</categoryId> </mx:request> </mx:operation> </mx:WebService> </mx:Application> 7.3webservice定义 <mx:WebService id="wsBlogAggr" wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl" useProxy="false"> <mx:operation name="getMostPopularPosts"> <mx:request> <daysBack>30</daysBack> <limit>{cbxNumPosts.value}</limit> <categoryId>1</categoryId> </mx:request> </mx:operation> </mx:WebService>
7.3.1参数说明
Operation: 对应webservice的方法名
Request:包含了调用方法的参数列表
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
<categoryId>1</categoryId>
以上信息对应webservice方法的入参名称。
7.3.2WSDL文件说明
http://feeds.adobe.com/webservices/mxna2.cfc?wsdl
<wsdl:message name="getMostPopularPostsRequest">
<wsdl:part name="daysBack" type="xsd:double"/>
<wsdl:part name="limit" type="xsd:double"/>
<wsdl:part name="categoryId" type="xsd:anyType"/>
</wsdl:message>
如上可以看出Flex 的Request 包含的内容与 wsdl的 wsld:part包含的内容匹配。
7.4执行结果
8问题
8.1Flex只支持IE
相关推荐
《FLEX学习笔记》 FLEX,全称为Flex Builder,是由Adobe公司开发的一款基于MXML和ActionScript的开源框架,用于构建富互联网应用程序(RIA)。它允许开发者创建具有交互性、响应性和丰富用户体验的Web应用。FLEX的...
在本文中,我们将深入探讨Flex学习过程中的基础语法,特别是从AS2到AS3的变化。 首先,ActionScript 3(AS3)是AS的一个重大升级,它引入了完全的面向对象编程(OOP)概念。这意味着AS3具有类、继承、封装和多态性...
本压缩包“Flex学习笔记.rar”显然是一份针对初学者的教程资料,旨在帮助新接触Flex的开发者快速上手。 在“FlexBeginner.pdf”这份文档中,你可以期待找到以下关键知识点: 1. **Flex概述**:介绍Flex技术的基本...
根据提供的信息,我们可以总结出以下关于Flex学习笔记中的关键技术知识点: ### 1. Flex 基础设置 在Flex开发中,通常会涉及到基础样式的设置。例如,在给定的部分内容中提到了字体大小、颜色及背景色的设置。虽然...
### Flex 学习笔记知识点详解 #### 一、Flex 技术概述 - **定义**:Flex 是一种用于构建和部署跨浏览器、跨平台的丰富互联网应用程序 (RIA) 的开源框架。 - **特点**: - 强大的 UI 构建能力:允许开发者创建高度...
Flex学习笔记(flex必知必会).docFlex学习笔记(flex必知必会).doc
Flex学习笔记1 - 容器布局对象状态的切换和数据绑定 在 Flex 应用程序中,容器布局对象状态的切换是非常常见的需求。例如,在购物车应用程序中,我们可能需要在不同的状态之间切换,例如从商品浏览状态到购物车状态...
Flex学习笔记概述 Flex是一种由Adobe开发的企业级富互联网应用(RIA)的表示层解决方案,其主要目的是提供高度交互和动态的用户体验。Flex的核心在于它的编程语言MXML和ActionScript(AS),这两种语言结合在一起,...
flex学习笔记,刚刚入门的可以看一下,有什么问题可以和我联系,谢谢
本教程是作者精心编写的Flex学习资料,适合初学者入门,通过图文并茂的方式,帮助读者快速掌握Flex的基本概念和核心技能。 1. **Flex基础**:Flex提供了MXML和ActionScript两种编程方式。MXML是一种声明式语言,...
### Flex学习笔记:ActionScript与Flex开发入门 #### 1. ActionScript核心概念 ##### 1.1 类和对象(Class and Object) 类是对象的模板,定义了一组具有相同特性和行为的对象的共同属性和方法。在ActionScript中...
Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站 希望对爱好有帮助!!
Flex是Adobe公司推出的一种用于构建富互联网...随着对Flex的深入学习,开发者将掌握更多高级特性,如数据绑定、动画效果、组件自定义以及与后端服务器的深度集成等,从而能够创建出更复杂、功能丰富的富互联网应用。