flex3与flex4的区别

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样式选择器以前你可能只需要这样写 [html] view plaincopyprint? ??? Button {? ? ????????? cornerRadius: 10;? ? ??? }? ? ??? DateField {? ? ????????? color: #780800;? ? ??? }? ? Button {??????? cornerRadius: 10;? }? DateField {??????? color: #780800; } ???? 但是在flex4 beta里你必须加上命名空间。 [java] view plaincopyprint? ??? < mx:Style> ? ????????? @namespace "http://www.adobe.com/2006/mxml";? ? ????????? …? ? ??? < /mx:Style>? ? < 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: Flex 3 Halo ComponentFlex 4 beta Spark Component mx.controls.Buttonspark.components.Button mx.controls.ButtonBarspark.components.ButtonBar mx.controls.CheckBoxspark.components.CheckBox mx.controls.ComboBoxspark.components.DropDownList (w/o editability) mx.controls.HorizontalListspark.components.List (with a HorizontalLayout) mx.controls.HRulespark.primitives.Line mx.controls.HScrollBarspark.components.HScrollBar mx.controls.HSliderspark.components.HSlider mx.controls.Imagespark.primitives.BitmapImage mx.controls.LinkBarspark.components.ButtonBar (with a custom skin) mx.controls.LinkButtonspark.components.Button (with a custom skin) mx.controls.Listspark.components.List mx.controls.NumericStepperspark.components.NumericStepper mx.controls.RadioButtonspark.components.RadioButton mx.controls.RadioButtonGroupspark.components.RadioButtonGroup mx.controls.TextAreaspark.components.TextArea mx.controls.TextInputspark.components.TextInput mx.controls.TileListspark.components.List (with a TileLayout) mx.controls.ToggleButtonBarspark.components.ButtonBar mx.controls.VideoDisplayspark.components.VideoPlayer mx.controls.VRulespark.primitives.Line mx.controls.VScrollBarspark.components.VScrollBar mx.controls.VSliderspark.components.VSlider mx.core.Applicationspark.components.Application mx.core.Windowspark.components.Window mx.core.WindowedApplicationspark.components.WindowedApplication mx.containers.Canvas spark.components.Group mx.containers.HBoxspark.components.HGroup mx.containers.Panelspark.components.Panel mx.containers.Tilespark.components.Group (with a TileLayout) mx.containers.VBoxspark.components.VGroupAdobe 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. Flex 3 classes with no direct Flex 4 beta counterpart 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.ViewStackChanges in states syntaxFlex 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. 本主题由 值班管理员 于 2012-7-6 13:09:05 审核通过 分享分享0 收藏收藏0 nice！nice！0 踩踩0 评分评分 北京每周末Flash游戏开发精品课程免费参与报名！ ?? ? 回复 使用道具 举报 ?? ? jinandongtian 新手入会 Rank: 1 升级? 18% 银子 ??? 26 两 金子 ??? 0 两 威望 ??? 0 点 ??? 串个门 ??? 加好友 ??? 打招呼 ??? 发消息 ?? ? 沙发 发表于 2012-7-6 11:23:42 |只看该作者 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,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,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态。 北京每周末Flash游戏开发精品课程免费参与报名！ ?? ? 点评回复 使用道具 评分 举报 ?? ? jinandongtian 新手入会 Rank: 1 升级? 18% 银子 ??? 26 两 金子 ??? 0 两 威望 ??? 0 点 ??? 串个门 ??? 加好友 ??? 打招呼 ??? 发消息 ?? ? 板凳 发表于 2012-7-6 11:28:35 |只看该作者 FLEX3和FLEX4组件变动表 Flex 4 beta 引入了许多使用新架构的新组件类，它们应当可以令外观和其他自定义操作更简单。下表列出了 Flex 3 Halo 组件及其 Flex 4 beta Spark 对应组件： Flex 3 Halo 组件? Flex 4 beta Spark 组件 ? mx.controls.Button? spark.components.Button ? mx.controls.ButtonBar? spark.components.ButtonBar ? mx.controls.CheckBox? spark.components.CheckBox ? mx.controls.ComboBox? spark.components.DropDownList（不可编辑） ? mx.controls.HorizontalList? spark.components.List（带一个 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（带一个自定义外观） ? mx.controls.LinkButton? spark.components.Button（带一个自定义外观） ? 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（带一个 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（带一个 TileLayout） ? mx.containers.VBox? spark.components.VGroup ? Adobe 鼓励您与 Spark 组件一起使用 Halo 组件和容器。由于 Adobe 在同一基类 (UIComponent) 上构建组件，Spark 与 Halo 之间应当可以实现全面的可互操作性。下表列出了目前没有 Spark 直接等效类的组件和容器。 Flex 3 类，没有直接的 Flex 4 beta 对应类 ? 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 ? 北京每周末Flash游戏开发精品课程免费参与报名！ ?? ? 点评回复 使用道具 评分 举报 ?? ? jinandongtian 新手入会 Rank: 1 升级? 18% 银子 ??? 26 两 金子 ??? 0 两 威望 ??? 0 点 ??? 串个门 ??? 加好友 ??? 打招呼 ??? 发消息 ?? ? 马扎 发表于 2012-7-6 11:30:27 |只看该作者 Flex 3.x到Flex 4.5 容器与布局组件 Flex 3.x到Flex 4.5 容器与布局组件 &raquo; 佛曰红尘? 2012-03-07 21:35:35|? 分类： 默认分类 |? 标签： |字号大 中 小 订阅 容器（Container） 在说布局之前，我们先说说Flex4中得容器的变化。Flex4中提供了一些新的容器，并且不在推荐使用Flex3中的容器了。 Group (包括HGroup、VGroup、TileGroup) 与DataGroup SkinnableContainer、SkinnableDataContainer、Panel、TitleWindow、NavigatorContent、BorderContainer,和Application（Panel、TitleWindow、NavigatorContent以及BorderContainer都是SkinnableContainer的子类） 当然Spark容器都具有以下特点： 可变的布局：除了部分已经自定义布局的容器（如HGroup、VGroup、TileGroup）的布局不能改变，其他的Spark容易都可以改变其布局，在本节后面做详细介绍Spark布局； 皮肤：我们知道Spark容器的皮肤和Flex3中的皮肤已经有很大的不同了，大部分的Spark容器都支持皮肤，当然这些容器得继承SkinnableContainer或者SkinnableDataContainer；但是为了提高性能及减小应用的大小，不是所有的容器都支持皮肤，如果容器没有继承自这两个Skinable类之一，那么他就不支持皮肤，如Group、DataGroup； 添加的子控件(Element/Child)：DisplayObject、UIcomponent、Container、IVisualElement、IGraphicElement、IVisualElementContainer、ISharedDisplayObject。这几个类型，有些是在Spark中引入的新的类型，在后面我将详细的说一说他们的作用以及之间的关系，包括和Flex3 Halo之间的联系等。【传送门待添加】 下面列出一些Flex官方推荐的与Flex3的容器的映射关系，但是我们用的时候却不一定需要按照这个来： Flex 3 Flex 4 (Spark)官方建议 实际应用备选建议 mx.containers.Canvas spark.components.BorderContainer spark.components.Group mx.containers.Box spark.components.BorderContainer spark.components.Group mx.containers.HBox spark.components.BorderContainer spark.components.HGroup mx.containers.VBox spark.components.BorderContainer spark.components.VGroup mx.containers.Panel spark.components.Panel spark.components.Panel mx.containers.Tile spark.components.BorderContainer spark.components.Group(使用TileLayout) mx.containers.TitleWindow spark.components.TitleWindow spark.components.TitleWindow mx.containers.Form spark.components.Form spark.components.Form 上面的表格中有很多地方都可以用BorderContainer或者是Group，是不是感到困惑呢？从前面的一段话中可以看出，Group是没有Skin的，BorderContainer是有Skin的，所以在使用的时候可以根据自己的需求，由于Layout已经可以自己设定，那么只需要看是否使用Skin，就可以决定究竟是使用BorderContainer还是Group。另外还有很多具体的变化，从Flex3刚转到Flex4，可能知道上面的对应关系还不够，还有很多细节，如clipping、scrollbar等问题，我会在讲解Skin的一篇说说clipping、scrollable以及如何给自定义Container。 布局（Layout） Flex4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身，正如前面提到的“可变的布局”，默认的有BasicLayout、HorizontalLayout、TileLayout、VerticalLayout四大布局方式。 基本布局 BasicLayout：这是spark组件默认的布局方式，即绝对定位布局。在FlexSDK3里面对应的是：layout=”absolute”；类似Flex3中的Canvas的布局； HorizontalLayout：这是spark组件库里面的水平布局方式。在里面对应的是：layout=”horizontal”；对应Flex3中得HBox的布局方式； VerticalLayout：这是spark组件库里面的竖直布局方式。在FlexSDK3里面对应的是：layout=”vertical”；对应Flex3中得VBox的布局； TileLayout：这是spark组件库新增的布局方式，即格子布局方式。TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式；当然可以看出这就是Flex3中得Tile组件的布局方式。 布局使用方法 我们仍然分别使用MXML和ActionScript两种方式来举例说明。首先来说最常用的方式，也就是MXML的方式： <s:Group>????? <s:layout>????????? <s:HorizontalLayout />????? </s:layout>? </s:Group>例子中用的是HorizontalLayout，当然，你可以使用其他的Layout。 ??? <fx:Script>????????? <![CDATA[????????????? import mx.core.LayoutDirection;????????????? import mx.events.FlexEvent;??????????????? import spark.layouts.HorizontalLayout;??????????????? protected function creationCompleteHandler(event:FlexEvent):void {????????????????? group.layout = new HorizontalLayout;????????????????? //group.layoutDirection = LayoutDirection.LTR;????????????? }??????????? ]]>????? </fx:Script>????? <s:Group? layoutDirection="rtl">????????? <s:Button label="A" />????????? <s:Button label="B" />????? </s:Group>当然，在上面的代码中除了设置layout，还设置了layoutDirection，这是在4.1中加入的属性，用来指定布局方式是从左往右（ltr）还是从右向左（rtl），也可以像注视中的AS代码那样设置。 Layout的属性设置 另外，Flex3中，我们可以在Container上设置设置的与布局相关的属性现在都移到了layout上，比如verticalAlign、horizontalAlign、gap以及各个方向的padding值： ??? <s:Group? layoutDirection="rtl">????????? <s:layout>????????????? <s:HorizontalLayout????????????????? verticalAlign="baseline"????????????????? horizontalAlign="left"????????????????? gap="5"????????????????? paddingBottom="1"????????????????? paddingLeft="1"????????????????? paddingRight="1"????????????????? paddingTop="1" />????????? </s:layout>????????? <s:Button label="A" />????????? <s:Button label="B" />????? </s:Group>对于这些属性基本与Flex3中得相同，只是现在是针对layout设置了。另外layout还有一些在Flex中没有见过的属性，我们特别说下面两个：clipAndEnableScrolling、useVirtualLayout，他们的设置方法和gap、padding之类的属性一样设置： clipAndEnableScrolling: 如果是true，则将超出范围的children裁掉不显示出来，如Flex3中得Canvas等，如果显示的范围超出了Canvas的范围，则不会显示；如果是false，则不管他的children是否超出他的范围，都会完全显示出来（但不会超出Application的范围）。 Flex4中有两个地方可以设置这个属性，一个是Skin中（该属性是定义在GroupBase中的property，而Skin继承GroupBase），一个是Layout中，而默认情况GroupBase中的property也是由Layout中取出，如下贴出SDK中GroupBase.get clipAndEnableScrolling的代码： ??? /**?????? *? @copy spark.core.IViewport#clipAndEnableScrolling?????? *?????? *? @default false?????? *?????? *? @langversion 3.0?????? *? @playerversion Flash 10?????? *? @playerversion AIR 1.5?????? *? @productversion Flex 4?????? */????? public function get clipAndEnableScrolling():Boolean????? {????????? if (_layout)????????? {????????????? return _layout.clipAndEnableScrolling;????????? }????????? else if (_layoutProperties &&????????????????? _layoutProperties.clipAndEnableScrolling !== undefined)????????? {????????????? return _layoutProperties.clipAndEnableScrolling;????????? }????????? else????????? {????????????? return false;????????? }????? }由此我们可以看出，该属性在layout中设置才是合情理的。 useVirtualLayout：顾名思义是虚拟布局，那么虚拟布局是什么概念呢？我想我还是从它的用途说起吧。如果你熟悉Flex3中List的ItemRenderer的渲染机制，那么我们就当作Flex3中的List就是useVirtualLayout的效果。啥意思呢？当开启useVirtualLayout（设为true）之后，并不是所有的children都会被渲染，而是只有当前能够显示出来的child才会被渲染（比如List只显示一些itemRenderer，其他的通过Scrollbar控制）。显然，这样我们可以大幅度的提高效率。 【大过年的，今天先完成到这，待补充】 自定义Layout 关于这个话题，我先推荐一篇文章，尽管这是Flex4 beta的，却依旧有很大的参考价值：Flex4 beta 的 Spark 布局【稍后会有更多内容补充】 天地会记者团火热招新中... ?? ? 点评回复 使用道具 评分 举报 ?? ? jinandongtian 新手入会 Rank: 1 升级? 18% 银子 ??? 26 两 金子 ??? 0 两 威望 ??? 0 点 ??? 串个门 ??? 加好友 ??? 打招呼 ??? 发消息 ?? ? 地板 发表于 2012-7-6 11:33:10 |只看该作者 Flex4.5中DataGrid组件的使用 Flex4.5的DataGrid控件使用示例：增删改同步数据库及页面数据? 2011-06-04 12:42:34|? 分类： flex |? 标签： |字号大 中 小 订阅 有关Flex的DataGrid文章的确不少，都是零零碎碎的，目前还没有发现有个完整的例子供网友参考，这次我花了两天时间做了下Flex关于DataGrid一个指标数据管理系统，当然设计到的mxml会很多，大都是与DataGrid相关，我就抽取最常用的DataGrid的增删改同步数据库及页面数据来讲解 首先整理下思路，首先无论是删除还是修改，必须得获取当前行所在的记录，那么可以设置个全局变量，当DataGrid的itemClick事件出发时将选中的行赋给全局变量 [Bindable]public var acItemsSelected:Object;; //事件方法 protected function myGrid_itemClickHandler(eventistEvent):void ?? { ??? acItemsSelected = myGrid.selectedItem; ?? } 这样的话就可以获得了当前选中的对象了 如果删除和修改的话，通常传到后台的肯定含有对象的ID项，那么这个ID是怎么获取的呢，通过acItemsSelected.xxxId能获取，那么这个xxxId必须是在DataGrid中有，设置为不显示就好了，例如我就是这么做的 <mxataGridColumn visible="false" dataField="targetCalId" /> 这样的话，要更改的数据等都能通过ID传到后台查询相应对象更改删除了，接下来的事是比较重要的，如果光删除数据库是不行的，页面数据也要保持同步，关于dataGrid也没有好的刷新方法，所以你上网一搜，可能有的人会告诉你对于删除这样做：dataArray.removeItemAt(myGrid.selectedIndex); 增加这样做：dataArray.addItemAt(obj,0); 修改这样做：dataArray.setItemAt(obj,myGrid.selectedIndex); 这里说的dataArray是指的是DataGrid的DataProvider的值集合【当然肯定得声明称全局变量】 这样的写法呢可能你觉得，哎，是对的，其实不然，这并没有真正起到作用，对于FLEX来说缓存是相当大的，不行的话你通过这个修改行记录的属性后，再点这行记录的属性编辑页面发现值根本没改，所以所没有进行二次查询数据库了，利用的是缓存。即便是你调用了初始化查询数据库的那个方法，也是不行的，还是有缓存，最好的做法就是，抛弃上面的三种写法，只需要两步就可以实现刷新，第一初始化DataGrid的那个方法请求必须是URLRequest的，添加一个参数类似于 var u:URLVariables=new URLVariables("temp="+Math.random()); 当然不一定非要是temp什么名字都行，然后在返回操作成功提示后调用这个初始化方法，你会发现真的起作用了。 其实建议关于URLRequest传参数的最好带上这个参数，也不费事，可以在很多场合下解决缓存不更新问题 说了这么多其实就是先做好个思想准备，理清思路，下面我就贴上我的一段代码 mxml文件 <?xml version="1.0" encoding="utf-8"?> <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" ????? xmlns:s="library://ns.adobe.com/flex/spark" ????? xmlns:mx="library://ns.adobe.com/flex/mx" width="668" height="326" ????? creationComplete="initComponent()" ? ????? title="指标计量单位" ????? fontSize="15" ????? close="closeWindow()"> ? <s:layout> ? <s:VerticalLayout /> </s:layout> <fxeclarations> ? <mx:StringValidator id="sval_1" source="{targetTypeName}" property="text" ?????? tooShortError="字符串太短了，请输入最少4个字符. " ?????? tooLongError="字符串太长了，请输入最长20个字符. " ?????? minLength="4" maxLength="20" ?????? trigger="{myButton}" triggerEvent="click" ?????? /> ? <mx:StringValidator id="sval_2" source="{targetCal}" property="text" ?????? tooShortError="字符串太短了，请输入最少4个字符. " ?????? tooLongError="字符串太长了，请输入最长20个字符. " ?????? minLength="4" maxLength="20" ?????? trigger="{myButton}" triggerEvent="click" ?????? /> </fxeclarations> <fx:Script> ? <![CDATA[ ?? import com.adobe.serialization.json.JSON; ? ? ?? import mx.collections.ArrayCollection; ?? import mx.controls.Alert; ?? import mx.events.CloseEvent; ?? import mx.events.ListEvent; ?? import mx.managers.PopUpManager; ?? import mx.rpc.events.ResultEvent; ?? import mx.utils.URLUtil; ?? import mx.validators.Validator; ? ? ?? import org.osmf.utils.URL; ? ?? [Bindable]public static var mainApp:DataCenterTargetPreserve = null;??? ? ?? [Bindable]public var gsMyString:String;?????? ? ?? [Bindable]public var gnMyNumber:Number;?????? ? ?? [Bindable]public var acItemsSelected:Object; ?? [Bindable] ?? public var dataArray:ArrayCollection; ? ? ?? private function initComponent():void ? ?? { ? ??? var u:URLVariables=new URLVariables("temp="+Math.random()); ??? var r:URLRequest=new URLRequest(); ??? r.data=u; ??? r.method=URLRequestMethod.POST; ??? r.url=mainApp.urls+"/findTargetCal.do"; ? ? ??? var l:URLLoader=new URLLoader(); ??? l.load(r); ??? l.addEventListener(Event.COMPLETE,comp2); ? ? ?? } ? ?? function comp2(e:Event):void ?? { ??? var l:URLLoader=URLLoader(e.target); ??? var array:Array=JSON.decode(String(l.data)) as Array; ??? dataArray=new ArrayCollection(array); ??? myGrid.dataProvider=dataArray; ?? } ?? private function closeWindow():void ? ?? { ? ??? PopUpManager.removePopUp(this); ? ?? }//closeWindow ? ?? private function showFinalSelection(oEvent:Event):void ? ?? { ? ??? //mainApp.tiFinalSelection.text = oEvent.target.selectedItem.album; ? ?? }//showFinalSelection ? ?? protected function button1_clickHandler(event:MouseEvent):void ?? { ??? PopUpManager.removePopUp(this); ? ? ? ?? } ?? protected function button2_clickHandler(event:MouseEvent):void ?? { ? ? ??? var all:Array=Validator.validateAll([sval_1,sval_2]); ??? if(all.length==0){ ??? var v:URLVariables=new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&temp="+Math.random()); ??? var r:URLRequest=new URLRequest(); ??? r.url=mainApp.urls+"/addTargetCal.do"; ??? r.method=URLRequestMethod.POST; ??? r.data=v; ??? var l:URLLoader=new URLLoader(); ??? l.load(r); ??? l.addEventListener(Event.COMPLETE,comp); ??? }else{ ????? Alert.show("新增失败"); ??? } ? ? ?? } ?? private function comp(e:Event):void{ ??? var l:URLLoader = URLLoader(e.target); ? ??? var o:Object=URLUtil.stringToObject(l.data,";",true); ?????? if(o.result=="add"){ ????? Alert.show("新增成功"); ????? var obj:Object=(JSON.decode(o.datas) as Object); ????? //dataArray.addItemAt(obj,0); ????? Alert.show(obj.targetCalId); ??? } ??? initComponent(); ? ? ?? } ?? private function myClick(evt:CloseEvent):void{ ??? //Alert.show("本次要删除的为"+mainDataGrid.selectedIndex); ??? if(evt.detail==Alert.YES){ ???? //Alert.show(acItemsSelected.getItemAt(0).targetId); ???? var v:URLVariables = new URLVariables("id="+acItemsSelected.targetCalId+"&temp="+Math.random()); ???? var r:URLRequest = new URLRequest(); ? ???? r.url =mainApp.urls+"/deleteTargetCal.do" ; ? ???? r.method = URLRequestMethod.POST; ? ???? r.data=v; ???? var l:URLLoader = new URLLoader();? ? ???? l.load(r); ? ??? ? ???? //dataArray.removeItemAt(myGrid.selectedIndex); ???? l.addEventListener(Event.COMPLETE,comp1); //注册请求完成后 响应获取数据事件方法 ??? ? ??? } ?? } ?? private function comp1(e:Event):void ? ?? { ? ??? var l:URLLoader = URLLoader(e.target); ??? var o:Object = URLUtil.stringToObject(l.data,true); ??? if(o.result=="delete"){ ???? Alert.show("删除成功！","友情提示"); ??? } ??? initComponent(); ? ? ?? } ?? protected function button3_clickHandler(event:MouseEvent):void ?? { ??? if(myGrid.selectedItem==null){ ???? Alert.show("请选择一项进行删除","友情提示"); ??? }else{ ???? var dlg_obj:Object=Alert.show("确认删除吗？","友情提示！",Alert.YES|Alert.NO,null,myClick); ??? } ?? } ?? protected function button4_clickHandler(event:MouseEvent):void ?? { ? ? ??? if(myGrid.selectedItem==null){ ???? Alert.show("请选择一项进行修订!","友情提示"); ??? }else{ ???? var v:URLVariables = new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&id="+acItemsSelected.targetCalId); ???? var r:URLRequest = new URLRequest(); ? ???? r.url =mainApp.urls+"/updateTargetCal.do"; ? ???? r.method = URLRequestMethod.POST; ? ???? r.data = v; ? ???? var l:URLLoader = new URLLoader();? ? ???? l.load(r); ? ???? l.addEventListener(Event.COMPLETE,comp3); //注册请求完成后 响应获取数据事件方法 ??? } ?? } ?? private function comp3(e:Event):void ? ?? { ? ? ? ??? var l:URLLoader = URLLoader(e.target); ? ??? var o:Object = URLUtil.stringToObject(l.data,true); ? ??? if(o.result=="update"){ ???? Alert.show("更新成功！","友情提示"); ???? var obj:Object=(JSON.decode(o.datas) as Object); ???? //dataArray.setItemAt(obj,myGrid.selectedIndex); ??? }else{ ???? Alert.show("操作失败！","友情提示"); ??? } ??? initComponent(); ?? } ? ?? protected function myGrid_itemClickHandler(eventistEvent):void ?? { ??? acItemsSelected =myGrid.selectedItem; ?? } ? ]]> </fx:Script> <mx:Form width="651" height="282"> ? <mx:DataGrid width="616" height="160" id="myGrid" itemClick="myGrid_itemClickHandler(event)"> ?? <mx:columns> ??? <mx:DataGridColumn headerText="计量名称" dataField="targetTypeName"/> ??? <mx:DataGridColumn headerText="计量符号" dataField="targetCal"/> ??? <mx:DataGridColumn visible="false" dataField="targetCalId" /> ?? </mx:columns> ? </mx:DataGrid> ? <mx:HBox> ?? <sabel? width="33"/> ?? <mx:FormItem label="计量名称" > ??? <s:TextInput id="targetTypeName"/> ?? </mx:FormItem> ?? <mx:FormItem label="计量符号" > ??? <s:TextInput id="targetCal"/> ?? </mx:FormItem> ?? <mx:FormItem > ??? <s:Button label="新增" id="myButton" click="button2_clickHandler(event)" /> ?? </mx:FormItem> ? ? ? </mx:HBox> ? <mx:FormItem > ? </mx:FormItem> ? ? <mx:HBox> ?? <s:Label? width="250"/> ?? <mx:FormItem > ??? <s:Button label="删除" click="button3_clickHandler(event)"/> ?? </mx:FormItem> ?? <mx:FormItem > ??? <s:Button label="修改" click="button4_clickHandler(event)"/> ?? </mx:FormItem> ?? <mx:FormItem > ??? <s:Button label="刷新"/> ?? </mx:FormItem> ?? <mx:FormItem > ??? <s:Button label="关闭" click="button1_clickHandler(event)"/> ?? </mx:FormItem> ? </mx:HBox> ? </mx:Form> </s:TitleWindow> 关于上面这个程序的mainApp就不用管它，它只是主应用程序而已，细心的可以发现这个是个弹出窗口程序 关于这个程序的三个Servletet处理类【只贴上关键代码】 FindTargetCalServlet public void doPost(HttpServletRequest request,HttpServletResponse response) ?? throws ServletException,IOException { ? request.setCharacterEncoding("UTF-8"); ? TTargetCalDAO dao=new TTargetCalDAO(); ? List<TTargetCal> cals=dao.findAll(); ? JSONArray json = JSONArray.fromObject(cals); ? String datas = json.toString(); ? System.out.println(datas); ? System.out.println(datas); ? response.setCharacterEncoding("UTF-8"); ? response.getWriter().write(datas); ? } DeleteTargetCalServlet public void doPost(HttpServletRequest request,IOException { ? TTargetCalDAO dao = new TTargetCalDAO(); ? String id = request.getParameter("id"); ? if (DataOptUtils.isNotNull(id)) { ?? TTargetCal rr = dao.findById(Integer.valueOf(id)); ?? dao.delete(rr); ? } ? response.setCharacterEncoding("UTF-8"); ? response.getWriter().write("result=delete"); } AddTargetCalServlet public void doPost(HttpServletRequest request,IOException { ????? request.setCharacterEncoding("UTF-8"); ????? TTargetCalDAO dao=new TTargetCalDAO(); ????? String targetCal=request.getParameter("targetCal"); ????? String targetTypeName=request.getParameter("targetTypeName"); ????? TTargetCal cal=new TTargetCal(); ????? cal.setTargetCal(targetCal); ????? cal.setTargetTypeName(targetTypeName); ????? dao.save(cal); ?? TTargetCal re =dao.findById(dao.findLastId()); ?? JSONObject json = JSONObject.fromObject(re); ?? String datas = json.toString(); ?? response.getWriter().write("result=add;datas=" + datas); ? } UpdateTargetCalServlet public void doPost(HttpServletRequest request,IOException { ?? request.setCharacterEncoding("UTF-8"); ?? response.setCharacterEncoding("UTF-8"); ?? TTargetCalDAO dao = new TTargetCalDAO(); ?? String targetTypeName = request.getParameter("targetTypeName"); ?? String targetCal = request.getParameter("targetCal"); ?? String id = request.getParameter("id"); ?? if (DataOptUtils.isNotNull(id)) { ??? TTargetCal rr = dao.findById(Integer.valueOf(id)); ??? if(DataOptUtils.isNotNull(targetCal)){ ???? rr.setTargetCal(targetCal); ??? } ??? if(DataOptUtils.isNotNull(targetTypeName)){ ???? rr.setTargetTypeName(targetTypeName); ??? } ??? dao.merge(rr); ??? TTargetCal tc = dao.findById(rr.getTargetCalId()); ??? JSONObject json = JSONObject.fromObject(tc); ??? String datas = json.toString(); ??? response.getWriter().write("result=update;datas=" + datas); ?? } ? ? } 这里的DataOptUtils是我写的一个数据处理类，判断是否为空什么的 还有就是TTargetCal @Entity @Table(name = "t_target_cal",catalog = "sxtele") public class TTargetCal implements java.io.Serializable { // Fields private Integer targetCalId; private String targetCal; private String targetTypeName; // Constructors /** default constructor */ public TTargetCal() { } /** minimal constructor */ public TTargetCal(String targetCal) { ? this.targetCal = targetCal; } /** full constructor */ public TTargetCal(String targetCal,String targetTypeName) { ? this.targetCal = targetCal; ? this.targetTypeName = targetTypeName; } // Property accessors @Id @GeneratedValue @Column(name = "Target_cal_id",unique = true,nullable = false) public Integer getTargetCalId() { ? return this.targetCalId; } public void setTargetCalId(Integer targetCalId) { ? this.targetCalId = targetCalId; } @Column(name = "Target_cal",nullable = false,length = 50) public String getTargetCal() { ? return this.targetCal; } public void setTargetCal(String targetCal) { ? this.targetCal = targetCal; } @Column(name = "Target_type_name",length = 50) public String getTargetTypeName() { ? return this.targetTypeName; } public void setTargetTypeName(String targetTypeName) { ? this.targetTypeName = targetTypeName; } }