myflexscript

Los States en Flex nos permiten crear pantallas (screens) a diferencia de paginas web HTML,
cuando creamos una aplicacion en flex debemos pensar que solamente puede existir en la api una sola instancia de mx:application basado en el patron de diseño Singleton.
a diferencia de los programadores web que estan acostumbrados a pensar en un cojunto de paginas web que forman una api. en este caso cuando trabajamos con flex debemos pensar en pantallas y no en paginas y esto hace una gran diferencia entre una aplicacion web y una aplicacion de escritorio
en flex se podria decir que estamos haciendo una aplicacion web pero con la lógica de aplicación de escritorio.

Ejemplo: en este ejemplo se muestra como usar los estados para navegar entre las pantallas, tambien entre cada transición hay un efecto de fadeIn y fadeOut

Codigo fuente

<?xml version="1.0" encoding="utf-8"?>
<!-- http://lucasmatos.com.ar/flexcoderBlog/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:states>
		<mx:State name="pantalla2">
			<mx:RemoveChild target="{datagrid1}"/>
			<mx:SetProperty target="{label1}" name="text" value="Pantalla 2"/>
			<mx:AddChild relativeTo="{button1}" position="before">
			<mx:RichTextEditor title="Title">
			</mx:RichTextEditor>
			</mx:AddChild>
			<mx:SetProperty target="{button1}" name="label" value="Cambiar para pantalla 3"/>
			<mx:SetEventHandler target="{button1}" name="click" handler="currentState='pantalla3'"/>
		</mx:State>

		<mx:State name="pantalla3">
			<mx:RemoveChild target="{datagrid1}"/>
			<mx:SetProperty target="{label1}" name="text" value="Pantalla 3"/>
			<mx:SetProperty target="{button1}" name="label" value="Cambiar para pantalla base"/>
			<mx:AddChild relativeTo="{button1}" position="before">
			<mx:DateChooser/>
			</mx:AddChild>
			<mx:SetEventHandler target="{button1}" name="click" handler="currentState=''"/>
		</mx:State>
	</mx:states>
<mx:Script>
	<![CDATA[
	//author Lucas Matos d-_-b
		import mx.controls.Alert;
		import mx.controls.Image;
		import mx.collections.ArrayCollection;
		import mx.core.ClassFactory; 

		[Bindable] private var dataCombo:ArrayCollection =
		new ArrayCollection( [{ label: 'ie', path: 'litho/ie.png' ,fecha: '2008/08/09' } ,
		                     { label:  'ff', path: 'litho/ff.png' ,fecha: '2008/08/09' } ,
		                     { label:  'ns', path: 'litho/ns.png' ,fecha: '2008/08/09' } ]);  

	]]>
</mx:Script>
<mx:Fade id="ContainerFadeOut" alphaFrom="1" alphaTo="0" duration="1500"
		target="{panel}"/>
<mx:transitions>
	<mx:Transition fromState="*" toState="*">
		<mx:Fade alphaFrom="0" alphaTo="1" target="{panel}" duration="1500" />
	</mx:Transition>
</mx:transitions>
<mx:VBox horizontalAlign="center" width="100%" id="panel">
<mx:Label text="Pantalla 1"  id="label1"/>
<mx:DataGrid dataProvider="{dataCombo}"  id="datagrid1"/>
<mx:Button label="Cambiar para pantalla 2"  id="button1" click="currentState='pantalla2'"/>
</mx:VBox>
</mx:Application>