`
hehailin1986_163.com
  • 浏览: 153713 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

从Flex3到Flex4的转变一览(样式应用、主题等)

    博客分类:
  • Flex
阅读更多
文章转载http://devilkirin.iteye.com/blog/465812

文章转载的目的:吸取前辈的学习经验,方便以后自己记录查阅。

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"/>  
 


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。暂时还未探究。
分享到:
评论

相关推荐

    Flex3样式设计工具4IN1Flex3样式设计工具4in1.rar

    这个"Flex3样式设计工具4in1.rar"是一个压缩包,包含了多个与Flex3样式设计相关的工具和资源,帮助开发者更有效地管理及定制应用的外观。 1. **Flex3 Component Explorer**:这是一个组件浏览器,允许开发者查看和...

    Flex3与flex4的区别

    虽然从Flex3迁移到Flex4需要一些调整,但总体来说,Flex4提供了一系列增强功能,旨在提高开发效率和应用程序性能。对于那些寻求利用最新技术改进其Flex应用程序的开发者来说,Flex4无疑是一个值得探索的选择。

    Flex3与Flex4对比

    - **内存概要分析器**:同样在Flex3与Flex4的高级版本中提供,用于监测内存使用情况,确保应用不会因为内存泄漏等问题而崩溃。 - **网络监视器**:仅在Flex4的高级版本中提供,可以帮助开发者监控网络请求的状态,这...

    Flex3 StyleExplorer 样式生成器

    Flex3 StyleExplorer是一款专为Adobe Flex 3设计的样式生成工具,它允许开发者和设计师探索、测试和定制Flex组件的外观。这个工具是Flex SDK的一部分,帮助用户理解并利用MXML和CSS(Cascading Style Sheets)来控制...

    FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看

    10. **部署和优化**:最后,教程还会介绍如何将Flex4应用打包并部署到不同的平台,以及优化应用性能的技巧,如减少内存占用、提升加载速度等。 在《Flex4教程 - Flex4从入门到精通》这本书中,你将系统地学习这些...

    应用flash制作flex样式

    4. **应用样式**:在Flex的CSS文件中,定义皮肤类,并引用从Flash导出的SWF资源。使用`embed`关键字将SWF文件嵌入到CSS中,然后将其作为组件的背景图像或图形资源。 5. **调整样式属性**:通过CSS,可以设置组件的...

    flex主题(skin)

    3. 应用主题:根据所选主题,Flex会自动应用到所有的组件上。 4. 自定义调整:如果默认主题不能满足需求,可以通过覆盖默认样式或创建新的组件皮肤来进行个性化调整。 皮肤机制是Flex框架的一大亮点,它使得Flex...

    Flex3 css样式代码自动生成

    2. **主题**: Flex3允许创建和应用主题,主题是一组全局样式,可以统一应用到整个应用程序,确保一致的视觉体验。 3. **嵌套样式**: 类似于标准CSS,Flex3也支持类选择器和ID选择器,可以针对组件的特定状态(如...

    flex3应用程序示例

    Flex3应用程序示例是针对初学者的一个小型项目,旨在帮助他们了解并掌握Adobe Flex 3这一编程框架。Flex 3是Adobe开发的一款用于构建富互联网应用程序(RIA)的开源框架,它基于ActionScript 3.0,允许开发者创建...

    flex主题 vista风格 苹果风格11款漂亮主题

    4. **主题的应用**:在Flex项目中,主题文件(通常是CSS或MXML格式)用于控制整个应用程序的外观。这些11款主题可能包含了不同的颜色方案、字体选择、组件样式等,开发者可以根据需求选择或定制适合的应用主题。 5....

    flex3使用说明

    Flex3 是一个高效、免费的开源框架,用于构建具有表现力的 Web 应用程序。Flex3 可以与 Java 后台进行通信,并与 FusionCharts 结合使用,实现数据可视化。下面是 Flex3 的详细介绍: 一、Flex 简介 Flex 是一个...

    FLEX3程序的皮肤集合

    在收集的Flex3应用皮肤中,可能包括了各种类型的组件皮肤,如按钮、滑块、面板、导航条等,以及预设的主题皮肤。开发者可以根据需要选择合适的皮肤导入到项目中,或者作为灵感来源进行二次设计。 使用这些皮肤时,...

    Flex3中文版API

    Flex3中文版API是针对Adobe Flex 3框架的详尽指南,它为开发者提供了全面的文档,涵盖了从基础概念到高级特性的所有内容。Flex3是一个用于构建富互联网应用程序(RIA)的开源开发平台,主要基于ActionScript 3.0语言...

    Flex4开发实践PPT

    Flex4,全称为Adobe Flex 4,是Adobe公司推出的一款强大的富互联网应用程序(RIA)开发框架,主要用于构建具有丰富用户体验的Web应用。本PPT详细讲述了Flex4的开发实践,旨在帮助开发者从基础到实践全面掌握这一技术...

    flex4 实战 flex4 in action

    书中涵盖的主题可能包括MXML和ActionScript的混合编程、使用数据服务、图形和动画、移动设备开发,以及如何利用Flex 4的新特性来提高应用的性能和可维护性。 随书提供的源码包括各种示例应用和项目,它们展示了Flex...

    flex3d效果展示

    Flex3D,全称为Adobe Flex 3D,是Adobe Flex框架的一个扩展,它允许开发者创建具有强大三维(3D)视觉效果的富互联网应用程序(RIA)。这个技术在2000年代中期非常流行,尤其在需要展示复杂数据或提供动态交互体验的...

    flex主题(34个)

    此外,CSS样式主题通常包括颜色方案、字体、边距、背景等视觉元素的定义,因此这34个Flex主题也可能包含了这些方面的设定,使得整体布局更具一致性且易于定制。对于学习Flex布局和提升前端开发效率来说,这是一个...

    flex 经典 皮肤主题

    Flex的经典皮肤主题是其强大UI设计能力的一个体现,通过CSS样式和自定义皮肤,开发者可以打造出各种风格的应用。通过理解Flex项目的结构和皮肤系统的工作原理,我们可以更好地定制和优化应用程序的外观,提升用户...

    从零开始系列-Flex3视频教程

    第十五章"样式和主题"讨论了如何通过自定义样式和使用Flex主题来美化应用程序的外观。高级篇则以创建MP3播放器为例,实际操作了从界面设计到功能实现的全过程,涵盖播放控制、数据模型、进度显示等多个功能模块。 ...

Global site tag (gtag.js) - Google Analytics