- 浏览: 261477 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
qq820456878:
大神,您好,看了您的文章,深知小弟难望其项背啊。有一点不明白的 ...
Flex中捕获浏览器的前进、后退、刷新、关闭事件 -
skydove:
wushexin 写道楼主,详细说明网址打不开呀...可以去这 ...
RED5的Eclipse插件安装 -
JavaCFW:
JavaCFW 写道
FLEX利用FLASH MEDIA SERVER进行视频的在线录制和回放 -
JavaCFW:
FLEX利用FLASH MEDIA SERVER进行视频的在线录制和回放 -
daveyking:
客户端代码不太懂,是在哪写的?flash actionscri ...
抛弃LCDS和FMS,在tomcat下开发Red5应用(第三篇)-ApplicationAdapte
以下内容转载自互联网,如侵犯您的权利,请来信告知!
flex4 beta发布了,它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个flex3的开发者,当你用flex4 beta编译你的flex3应用时你应该不会遇到太大的挑战,因为flex4 beta的一个目标就是保持与flex3的兼容。
在这篇文章里我会提供关于flex4 beta主体带的一个大概的浏览,介绍一下Flex3到Flex4架构上的区别,以及在组件,布局,状态,效果上的改变。这篇文章里,halo代表flex3里的原始组件。spark代表flex4 beta里的新的组件。
将应用迁移到flex4 beta
把应用从flex3迁移到flex4,不会遇到太大的麻烦。除了看到一些bug被修补了以及默认的主题换了,你还会看到你的应用会在flex4里工作的更好。但是还是有些东西你需要注意。
◆播放器的依赖
flex4 beta 需要flash player10的支持。
◆样式选择器需要命名空间
对于一个css样式选择器以前你可能只需要这样写
Button { cornerRadius: 10; } DateField { color: #780800; }
但是在flex4 beta里你必须加上命名空间。
< mx:Style> @namespace "http://www.adobe.com/2006/mxml"; … < /mx:Style>
更进一步,如果你用了StyleManager.getStyleDeclaration("Button"),在flex4里你必须把命名空间给加上 如:StyleManager.getStyleDeclaration("mx.controls.Button")。
◆Flex3到Flex4主题的变化
主题已经由默认的halo变成了spark。所以你的应用在flex4里看起来可能会不一样了。当然了,你要是想用halo也是有办法的。你可以用-compatibility-version=3.0这个标识也可以修改additional compiler argument(附加的编译器自变量)为_local en US -theme=halo.swc。
如果你选择用Spark,你会发现很多在Halo里工作的样式到Spark里就不工作了,spark主题只支持有限的样式。想要修改如border之类的外观你需要自定义的皮肤。flex4也提供了一个Wireframe皮肤来帮助你快速建立模型。
除了默认样式的变化,预加载进度条也变化了。这个更轻量级的进度条会缩短启动的时间。你要想还是用原来的加载进度条你只需加上下面这一条:preloader="mx.preloaders.DownloadProgressBar"。
Flex3到flex4 beta架构改变一览
flex4 给设计师和开发者提供一个更平滑的工作流。为了实现这个,flex4框架提供了可视化组件和其行为的明确的分界。 在flex3里一个组件代码包括逻辑,布局和可视化的变化,但是在flex4里一个组件被分配到了不同的类,每个类都掌控不同的方面。
◆flex4里的包和命名空间
flex4里保存了flex3的全部类,它们全在mx.*的包里。当然除此之外,flex还提供全新的spark.*包来保存组件,核心类,效果,滤镜,布局, 皮肤和工具。
flex提供了一套组件,其中很多与halo有同样的名字,为了避免名字的冲突,随flex4而来的是4个不同的命名空间:MXML 2006, MXML 2009, Spark, and Halo。
MXML 2006:过时的mxml语言命名空间,曾用在flex3。如果用flex4编译flex3的应用程序,你依然可以用这个命名空间。
URI: http://www.adobe.com/2006/mxml
默认前缀:mx
MXML 2009: 全新的mxml语言命名空间,是纯的语言命名空间,不包含组件。
URI: http://ns.adobe.com/mxml/2009
默认前缀:fx
SPARK:这个命名空间里包含了所有的新的Spark组件,他应该和MXML 2009一起使用。
URI: library://ns.adobe.com/flex/spark
默认前缀: s
HALO:这个命名空间包含所有halo的组件,应该与MXML2009一起使用。
URI: library://ns.adobe.com/flex/halo
默认前缀:mx
flex4在css方面也提供了多样的命名空间的支持。所以,在使用css时必须注意命名空间已避免冲突。
- < fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/halo";
- s|Button {
- color: #FF0000;
- }
- mx|DateChooser {
- color: #FF0000;
- }
- < /fx:Style>
新的组件和容器
◆组件
flex4修改和新增了一些组件,也有些组件是halo有的,但是spark没有。adobe建议你halo和spark一起用。至于两者都有什么,没什么下面有个网址你可以去看看。
http://www.adobe.com/devnet/flex/articles/flex3and4_differences_04.html
◆state语法的改变
state语法变了,变得更加的有弹性和直接。你甚至可以根据上下文来针对性的改变你的状态。下面是重点:
1,只有状态被定义到了状态数组。
2,AddChild和RemoveChild,不能再用了。取而代之的是includeIn和excludeFrme属性 。这两个属性是组件的属性。
看例子吧!
这是flex3应用状态的方式。
- < mx:states>< mx:State name="submitState" basedOn="">
- < mx:AddChild relativeTo="{loginForm}" >
- < mx:Button label="submit" bottom="10" right="10"/>
- < /mx:AddChild>
- < mx:RemoveChild target="{firstTextInput}"/>
- < /mx:State>
- < /mx:states>
- < mx:TextInput id="firstTextInput" />
- < mx:Canvas id="loginForm" />
这是flex4
- < s:states>
- < s:State name="submitState" />
- < /s:states>
- < s:TextInput id="firstTextInput" excludeFrom="submitState" />
- < s:Group id="loginForm" >
- < s:Button label="submit" bottom="10" right="10" includeIn="submitState"/> < /s:Group>
3,setProperty,setStyle和setEvent被点语法取代了。
下面是flex3的做法
- < mx:states>
- < mx:State name="submitState" basedOn="">
- < mx:SetProperty target="{submitButton}" name="label" value="submit" />
- < mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
- < mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
- < /mx:State>
- < mx:State name="clearState" basedOn="">
- < mx:SetProperty target="{submitButton}" name="label" value="clear" />
- < mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
- < /mx:State>
- < /mx:states>
- < mx:Button id="submitButton" />
下面是flex4的做法
- < s:states>
- < s:State name="submitState" />
- < s:State name="clearState" />
- < /s:states>
- < s:Button label.submitState="submit" textDecoration.submitState="underline"
- click.submitState="trace('done')" click.clearState="emptyDocument()" label.clearState="clear" textDecoration.clearState="none"/>
4,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态。
flex4 beta还有其他的特性,以后的文章继续在讨论。
adobe官方说从flex3到flex4得转变painless。你认为呢?
Flex4相对FLex3的组件变化
customizations much more straightforward. Here is a table showing Flex 3 Halo components and their Flex 4 beta Spark counterparts:
mx.controls.Button | spark.components.Button |
mx.controls.ButtonBar | spark.components.ButtonBar |
mx.controls.CheckBox | spark.components.CheckBox |
mx.controls.ComboBox | spark.components.DropDownList (w/o editability) |
mx.controls.HorizontalList | spark.components.List (with a HorizontalLayout) |
mx.controls.HRule | spark.primitives.Line |
mx.controls.HScrollBar | spark.components.HScrollBar |
mx.controls.HSlider | spark.components.HSlider |
mx.controls.Image | spark.primitives.BitmapImage |
mx.controls.LinkBar | spark.components.ButtonBar (with a custom skin) |
mx.controls.LinkButton | spark.components.Button (with a custom skin) |
mx.controls.List | spark.components.List |
mx.controls.NumericStepper | spark.components.NumericStepper |
mx.controls.RadioButton | spark.components.RadioButton |
mx.controls.RadioButtonGroup | spark.components.RadioButtonGroup |
mx.controls.TextArea | spark.components.TextArea |
mx.controls.TextInput | spark.components.TextInput |
mx.controls.TileList | spark.components.List (with a TileLayout) |
mx.controls.ToggleButtonBar | spark.components.ButtonBar |
mx.controls.VideoDisplay | spark.components.VideoPlayer |
mx.controls.VRule | spark.primitives.Line |
mx.controls.VScrollBar | spark.components.VScrollBar |
mx.controls.VSlider |
spark.components.VSlider |
mx.core.Application | spark.components.Application |
mx.core.Window | spark.components.Window |
mx.core.WindowedApplication | spark.components.WindowedApplication |
mx.containers.Canvas | spark.components.Group |
mx.containers.HBox | spark.components.HGroup |
mx.containers.Panel | spark.components.Panel |
mx.containers.Tile | spark.components.Group (with a TileLayout) |
mx.containers.VBox | spark.components.VGroup |
Adobe encourages you to use Halo components and containers along with Spark components. Because Adobe continues to build components atop the same base class (UIComponent), there should be full interoperability between Spark and Halo. Here is a table of the components and containers that do not currently have direct Spark equivalent classes.
mx.controls.Alert |
mx.controls.ColorPicker |
mx.controls.DataGrid |
mx.controls.DateChooser |
mx.controls.DateField |
mx.controls.Menu |
mx.controls.MenuBar |
mx.controls.PopUpButton |
mx.controls.PopUpMenuButton |
mx.controls.ProgressBar |
mx.controls.RichTextEditor |
mx.controls.TabBar |
mx.controls.Tree |
mx.containers.Accordion |
mx.containers.ApplicationControlBar |
mx.containers.ControlBar |
mx.containers.DividedBox |
mx.containers.Form |
mx.containers.Grid |
mx.containers.TabNavigator |
mx.containers.TitleWindow |
mx.containers.ViewStack |
Changes in states syntax
Flex 4 beta has promoted the states functionality to a full MXML language feature. As a result, you will likely find states to be much more flexible and direct. The new states syntax is more inline, allowing state-specific changes to be specified in context. Here are the key differences in the Flex 4 beta syntax:
- Only states are defined within the states array.
- In the new states syntax, you cannot use de>AddChildde> and de>RemoveChildde>. Instead, you define a component's role in a particular state on the component itself using the de>includeInde> and de>excludeFromde> attributes.
In the following Flex 3 example, states are used to include a Button and remove a TextInput only when the de>currentStatede> of the document is de>submitStatede>. This approach can get very verbose with more complex states.
<mx:states>
<mx:State name="submitState" basedOn="">
<mx:AddChild relativeTo="{loginForm}" >
<mx:Button label="submit" bottom="10" right="10"/>
</mx:AddChild>
<mx:RemoveChild target="{firstTextInput}"/>
</mx:State>
</mx:states>
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />
Here is the simpler Flex 4 beta code using de>includeInde> and de>excludeFromde>.
<s:states> <s:State name="submitState" /> </s:states> <s:TextInput id="firstTextInput" excludeFrom="submitState" /> <s:Group id="loginForm" > <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/> </s:Group>
- de>SetPropertyde>, de>SetStylede>, and de>SetEventHandlerde> have been replaced by a new dot syntax, which allows you to qualify MXML attribute values with a specific state identifier.
In the following Flex 3 example, the code defines a property, style, and event for a Button in de>submitStatede>.
<mx:states> <mx:State name="submitState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="submit" /> <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/> <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/> </mx:State> <mx:State name="clearState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="clear" /> de><mx:SetEventHandler target="{submitButton}" name="click" de>handler="emptyDocument()" /> </mx:State> </mx:states> <mx:Button id="submitButton" />
In Flex 4 beta, the code looks like this:
<s:states> <s:State name="submitState" /> <s:State name="clearState" /> </s:states> <s:Button label.submitState="submit" textDecoration.submitState="underline" click.submitState="trace('done')" click.clearState="emptyDocument()" label.clearState="clear" textDecoration.clearState="none"/>
- A component can no longer be in an undefined or null state. By default, the first declared state is the initial state of a component.
The new syntax is available when a document uses the MXML 2009 language namespace. You cannot mix the legacy syntax and the new states syntax. The old syntax is available only in the MXML 2006 namespace.
Additionally, each component now supports a set of states defined in its skin class, which makes it simpler to apply visual changes depending on the state of a component. For example, if you look at the skin for the Spark Button, you will find the following states defined:
<s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states>
The ButtonSkin class defines what happens visually to a Spark Button in each one of these states.
This is only a brief introduction to the new Flex 4 beta states syntax. Visit the Enhanced States Syntax Spec to find more details.
发表评论
-
Java程序员学习Flex和BlazeDS的十三个理由
2009-09-18 22:59 0本文列述了13个Java程 ... -
BrowserManager和HistoryManager的应用
2009-09-18 22:55 0BrowserManager是一个Singleton 管理器, ... -
FLV播放器,完成度百分之七十
2009-09-11 09:17 1359完成度70% <object classid= ... -
Java和flash通信中数据的zlib压缩与解压缩
2009-04-08 22:23 0上篇文章介绍和如何在j ... -
Java和flash通信中数据的AMF3封装
2009-04-08 22:22 0Flash加载外部http数据有很多封装方式,常用的数据封装格 ... -
Java的RTMP客户端,可以用于RTMP的测试
2009-04-01 23:26 4106JUV Client 1.2 经过在Red5-0.6.3下测试 ... -
Flex中捕获浏览器的前进、后退、刷新、关闭事件
2009-03-31 21:46 9686如果不希望用户点击浏览器的前进、后退、刷新、关闭等误操作,可以 ... -
Text Layout Framework 聊天表情测试(依然不支持gif动画表情)
2009-02-17 22:59 3425(最后编辑于2009年2月20日17:24) 参考资料: ht ... -
使用Text Layout Framework实现图文混排
2009-02-16 11:45 86841.Flex Builder3要更新到3.0.2 http:/ ... -
从flex-ifram项目中看到的,在as中写js函数
2009-01-13 14:17 3532项目地址:http://code.google.c ... -
Flex的IFrame,解决在RIA中显示html的问题,非AIR
2008-12-31 15:00 0http://code.google.com/p/flex-i ... -
随记:flex发送XML到servlet
2008-10-16 15:58 3107一个Flex发送XML到Servlet,Servlet返回XM ... -
java后台的flex应用中电子白板文档共享的解决方法---用命令行转换任意文档为PDF和SWF
2008-07-31 22:57 8288前天安装了RED5,将OpenMeetings安装并运行一下, ... -
开启摄像头和关闭摄像头
2008-03-21 14:06 5639打开摄像头: Camera camera = Camera.g ... -
Flex的在线图片处理程序
2007-12-30 11:09 6251http://www.dreamtech.com.cn:908 ... -
Flex 概述
2007-11-11 09:13 3328一,概述 Flex是Adobe公司的支持RIA(rich ... -
讨论Flex的Package
2007-10-28 10:11 4402部分内容摘自ActionScript 3 Cookbook中文 ... -
FLEX2和FLEX3全屏的代码
2007-10-28 08:52 3354一.flex2的全屏代码 在仅仅使用Flex Builder ... -
FMS回调FLEX端的Function
2007-10-20 12:15 2659网络上找了很久这个资料,总算被解决了。 1.在FMS下新建一个 ... -
Flex连接FMS实现用户列表(使用SharedObject)
2007-10-20 10:08 32361.先在FMS的安装目录中添加自己的应用(例如我的目录D:\M ...
相关推荐
- Flex4引入了Spark组件模型,相对于MX组件,Spark组件更加强调可定制性,允许开发者更自由地设计组件外观。 2. **创建自定义皮肤** - 使用Flex SDK中的Skin类或MXML来创建自定义皮肤。皮肤通常包含一组显式状态...
Flex 3 是 Adobe 开发的一款用于构建富互联网应用程序(RIA)的框架,它基于ActionScript 3.0和Flash Player运行环境。这份“Flex 3 基本操作帮助...记得结合实际练习,理论与实践相结合,才能更好地掌握Flex 3的精髓。
这个Flex相册源码对于学习Flex编程和了解如何使用Flex构建RIA有很高的参考价值。开发者可以从中学习到如何整合Flex组件、处理数据、响应用户交互,以及如何利用Flex的高级特性来提升应用的用户体验。同时,此项目也...
总结来说,【3D螺旋相册】项目融合了Flex的MXML和ActionScript编程、3D图形处理、动画控制、用户交互以及数据管理等多个技术层面,对于提升Web应用的互动性和视觉吸引力具有重要意义。通过学习和实践这样的项目,...
Flex4相较于Flex3在生命周期管理上有显著的改进,这使得开发者能够更精确地控制组件的状态和行为。 一、Flex4生命周期概述 Flex4引入了更加灵活的生命周期模型,称为“States and Effects”(状态与效果),它允许...
4. **Flex SDK**:Flex Software Development Kit包含了编译Flex应用所需的所有工具,包括Flex编译器、Flex Builder IDE(现已被Eclipse替代)以及Flex框架库。开发者可以使用SDK中的命令行工具或集成开发环境进行...
4. **数据绑定**:Flex中的数据绑定允许开发者将UI组件的属性与应用程序的数据模型关联起来,使得UI能自动反映数据模型的变化。在相册应用中,这可能用于当照片数据更改时自动更新图片显示。 5. **事件处理**:Flex...
3. **Graphical Asset Creation (GAC)**: Flex 4提供了图形资产创建工具,可以方便地创建和管理位图、矢量图以及动画资源。 4. ** skins和states**: Flex 4的组件外观通过skins来定义,可以动态改变外观以适应不同...
注册点是图形元素的坐标原点,决定了元素如何相对于舞台或其他元素进行变换。通过改变注册点,可以实现不同的视觉效果,例如使对象看起来像是从中心旋转,或者在缩放时保持特定的视觉重心。 2. **在Flex中操作注册...
6. **事件处理和用户交互**:Flex的事件驱动模型与ArcGIS的交互机制相结合,使得用户可以通过点击、拖拽等动作与地图进行互动。例如,可以添加监听器响应地图的缩放、平移等事件,或者在地图上添加图层选择、弹出...
- **属性变化触发验证**:一旦目标源的指定属性发生变化,验证器就会被触发,执行验证逻辑。 - **事件机制**:验证完成后,验证器会通过`valid`和`invalid`事件通知外界验证的结果。其中,`valid`事件表明数据验证...
ActionScript 3.0是随着Flash CS3一起推出的一种强大的编程语言,相较于之前的ActionScript版本,它有着显著的提升和变化,特别是在性能和类型检查方面。 1. **历史简介** ActionScript的历史可以追溯到Flash 3...
此外,还可以添加堆叠柱状图,显示各组的总和,或者百分比柱状图,显示每个柱子相对于总和的比例。 4. **Java方向的案例** 虽然Flex主要面向前端开发,但可以通过 BlazeDS 或 LCDS 这样的服务端技术与Java后端进行...
总结,Flex中文教程对于想要掌握Flex技术的中文用户来说是一份宝贵的资源。通过深入学习,你可以了解到Flex的基础概念、组件使用、数据绑定、应用程序架构以及如何与后端服务交互等内容,从而成为一名熟练的Flex...
Flex是一种基于ActionScript 3.0的开源框架,主要用于创建富互联网应用程序(RIA),它可以提供丰富的用户界面和交互效果。...对于希望提升Flex开发技能或对3D效果感兴趣的人来说,这是一个宝贵的参考资料。
### Flex3组件和框架的生命周期 ...总体而言,了解Flex3组件和应用程序的生命周期对于构建高效稳定的Flex应用至关重要。通过遵循最佳实践,开发者可以充分利用Flex3的强大功能,同时避免常见的陷阱和问题。
在Flex与Java之间实现高效的数据传递,对于构建高性能的应用系统至关重要。 #### 前台与后台的数据传递机制 在本例中,我们探讨的是如何将前台Flex中输入的用户名和密码封装成一个值对象(Value Object, VO),并...
尽管Flex本身就是一个富客户端技术,但在某些场景下,与Ajax技术相结合可以带来更佳的用户体验。例如,通过Ajax异步加载部分数据而不重新加载整个页面。 以上内容涵盖了Flex开发的基本概念和技术细节,希望对学习...
理解Flex3组件和框架的生命周期对于开发高质量的应用程序至关重要。通过掌握每个阶段的具体内容和作用,开发人员能够更好地组织代码逻辑,优化性能,并确保应用程序的稳定性和可靠性。此外,遵循上述推荐的最佳实践...
等级符号专题图是一种将数据值与地图符号大小相对应的地图表现形式,通常用于展示连续或离散变量的分布情况。例如,人口数量、销售额或者污染程度等。通过调整符号的大小,我们可以直观地看出不同区域数据值的差异。...