Flex SDK 4 introduce una serie de clases de componentes nuevos que utilizan la nueva arquitectura, con los cuales el desarrollo y la personalización debería ser mucho más sencillo. Aquí hay una tabla que muestra los componentes de Flex 3 MX y sus homólogos en Flex 4 Spark:
| Flex 3 MX Component | Flex 4 Spark Component |
|---|---|
| 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 (w/o support for external images) |
| 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.TabBar | spark.components.TabBar |
| 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.ApplicationControlBar | spark.components.Application (with the controlBarContent) |
| mx.containers.Canvas | spark.components.Group |
| mx.containers.ControlBar | spark.components.Panel (with the controlBarContent property) |
| 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 te anima a usar los componentes y contenedores MX juntos con los nuevos componentes Spark. Debido a que Adobe continúa creando componentes sobre la misma clase base [UIComponent], por esto debería existir una interoperabilidad completa entre MX y Spark. Aquí tienes una tabla de los componentes y contenedores que actualmente no tienen una clase equivalente en Spark.
| Flex 3 classes with no direct Flex 4 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.Tree |
| mx.containers.Accordion |
| mx.containers.DividedBox |
| mx.containers.Form |
| mx.containers.Grid |
| mx.containers.TabNavigator |
| mx.containers.TitleWindow |
| mx.containers.ViewStack |
Para utilizar un MX Navigator [ViewStack, Accordion, TabNavigator] con componentes Spark, los hijos del navigator deberían ser componentes NavigatorContent. De lo contrario, no serás capaz de utilizar las primitivas de Spark en tu MX Navigator. Aquí un ejemplo:
<s:NavigatorContent label="bar">
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Label text="bar" />
<s:TextInput />
</s:NavigatorContent>
</mx:ViewStack>
Cambios en la sintaxis de los estados
Flex 4 ha promovido la funcionalidad de los estados a una característica del lenguaje MXML. Como resultado, es probable encontrar los estados mucho mas flexibles y directos. La sintaxis de los nuevos estados es más "inline", permitiendo cambios de estado específicos en un contexto. Estas son las principales diferencias en la sintaxis de Flex 4:
- Los estados son definidos solo dentro del array de estados.
- En la nueva sintaxis de estados, no se pude utilizar addChild y removeChild. En su lugar, definir un rol al componente en un estado particular en el propio componente usando los atributos includeIn y excludeFrom.
En el siguiente ejemplo de Flex 3, los estados se utilizan para incluir un Button y remover un TextInput solo cuando el currentState del documento es submitState. Este enfoque puede ser muy detallado con estados más complejos.
<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" />
Este es el código más simple en Flex 4 usando includeIn y excludeFrom.
<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>
SetProperty, SetStyle, and SetEventHandler han sido reemplazados por la nueva sintaxis, la cual permite calificar los valores de los atributos MXML con un identificador de estado específico.
En el siguiente ejemplo de Flex 3, el código define una propiedad style y un evento para un Button en submitState.
<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" />
<code><mx:SetEventHandler target="{submitButton}" name="click" </code>handler="emptyDocument()" />
</mx:State>
</mx:states>
<mx:Button id="submitButton" />
En Flex 4, el código sería el siguiente:
<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"/>
Un componente ya no puede estar en un estado "no definido" o nulo. Por defecto, el primer estado declarado será el estado inicial del componente.
La nueva sintaxis está disponible cuando un documento utiliza como namespace el lenguaje MXML 2009. No se puede mezclar la sintaxis nueva y la antigua de los estados. La sintaxis antigua sólo está disponible en el namespace MXML 2006.
Además, ahora cada componente es compatible con un conjunto de estados definidos en el skin de la clase, lo que hace fácil de aplicar cambios en la vista según el estado de un componente. Por ejemplo, si nos fijamos en el skin del Button Spark, podremos encontrar los siguientes estados definidos:
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
La clase ButtonSkin define lo que le sucede visualmente a un Spark Button en cada uno de sus estados.
Esta es sólo una breve introducción de la nueva sintaxis de los estados de Flex 4. Visite la documentación sobre la mejora de los estados para más detalles.
