`
VerRan
  • 浏览: 459701 次
  • 性别: Icon_minigender_1
  • 来自: 陕西.西安
社区版块
存档分类
最新评论

Flex学习笔记

    博客分类:
  • Flex
 
阅读更多

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,全称为Flex Builder,是由Adobe公司开发的一款基于MXML和ActionScript的开源框架,用于构建富互联网应用程序(RIA)。它允许开发者创建具有交互性、响应性和丰富用户体验的Web应用。FLEX的...

    Flex学习笔记-基本语法

    在本文中,我们将深入探讨Flex学习过程中的基础语法,特别是从AS2到AS3的变化。 首先,ActionScript 3(AS3)是AS的一个重大升级,它引入了完全的面向对象编程(OOP)概念。这意味着AS3具有类、继承、封装和多态性...

    Flex学习笔记.rar

    本压缩包“Flex学习笔记.rar”显然是一份针对初学者的教程资料,旨在帮助新接触Flex的开发者快速上手。 在“FlexBeginner.pdf”这份文档中,你可以期待找到以下关键知识点: 1. **Flex概述**:介绍Flex技术的基本...

    flex学习笔记,技巧学习

    根据提供的信息,我们可以总结出以下关于Flex学习笔记中的关键技术知识点: ### 1. Flex 基础设置 在Flex开发中,通常会涉及到基础样式的设置。例如,在给定的部分内容中提到了字体大小、颜色及背景色的设置。虽然...

    flex学习笔记

    ### Flex 学习笔记知识点详解 #### 一、Flex 技术概述 - **定义**:Flex 是一种用于构建和部署跨浏览器、跨平台的丰富互联网应用程序 (RIA) 的开源框架。 - **特点**: - 强大的 UI 构建能力:允许开发者创建高度...

    Flex学习笔记(flex必知必会).doc

    Flex学习笔记(flex必知必会).docFlex学习笔记(flex必知必会).doc

    Flex学习笔记1

    Flex学习笔记1 - 容器布局对象状态的切换和数据绑定 在 Flex 应用程序中,容器布局对象状态的切换是非常常见的需求。例如,在购物车应用程序中,我们可能需要在不同的状态之间切换,例如从商品浏览状态到购物车状态...

    Flex学习笔记.doc

    Flex学习笔记概述 Flex是一种由Adobe开发的企业级富互联网应用(RIA)的表示层解决方案,其主要目的是提供高度交互和动态的用户体验。Flex的核心在于它的编程语言MXML和ActionScript(AS),这两种语言结合在一起,...

    flex学习笔记,自己学习的时候写的

    flex学习笔记,刚刚入门的可以看一下,有什么问题可以和我联系,谢谢

    flex学习笔记 flex学习总结 flex学习教程

    本教程是作者精心编写的Flex学习资料,适合初学者入门,通过图文并茂的方式,帮助读者快速掌握Flex的基本概念和核心技能。 1. **Flex基础**:Flex提供了MXML和ActionScript两种编程方式。MXML是一种声明式语言,...

    Flex学习笔记,入门材料

    ### Flex学习笔记:ActionScript与Flex开发入门 #### 1. ActionScript核心概念 ##### 1.1 类和对象(Class and Object) 类是对象的模板,定义了一组具有相同特性和行为的对象的共同属性和方法。在ActionScript中...

    Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站

    Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站 希望对爱好有帮助!!

    Flex学习笔记-由浅入深

    Flex是Adobe公司推出的一种用于构建富互联网...随着对Flex的深入学习,开发者将掌握更多高级特性,如数据绑定、动画效果、组件自定义以及与后端服务器的深度集成等,从而能够创建出更复杂、功能丰富的富互联网应用。

Global site tag (gtag.js) - Google Analytics