MilkZoft - Manejo de Estados en Adobe Flex

Escrito por Carlos Santana el Martes, 29 de Septiembre de 2009 Publicado en: Adobe Flex

4 Comentarios

Hola a todos, espero nos sigan visitando con frencuencia, en esta ocasión les traigo un breve tutorial sobre como manejar estados en adobe flex, espero les sea de utilidad.

Pues bien, los estados en Flex son muy parecidos a los frames que utiliza Flash, básicamente son lo mismo.

Primero creamos un nuevo documento MXML dentro de un proyecto, posteriormente agregamos un Label y 2 botones en el estado base, el label dirá ¿A Cuál Estado Deseas Ir? y en los botones uno dira Hola y el otro Adiós, todo eso irá en el Estado Base, de ahí crean otros 2 estados uno llamado Hola y otro Adiós. Ahora presionan la etiqueta source de su Adobe Flex Builder, y verán que les agrego estás etiquetas:

<mx:states>

<mx:State name=“Hola”>
 ...
</mx:State>

<mx:State name=“Adiós”>
...
</mx:State>

</mx:states>

La primera etiqueta <mx:states> es dónde irán todos los estados que utilicemos. Para los estados individuales utilizamos la etiqueta: <mx:State> y con el parámetro name escribimos el nombre de nuestro estado.

Ahora regresan al área de diseño y seleccionan algún estado por ejemplo el de Hola, y cuando este seleccionado al label que decía: ¿A Cuál Estado Desea Ir?, lo cambian por: Este es el Estado Hola… y eliminan los 2 botones (Hola y Adiós) que eran parte del Estado Base, y crean uno nuevo en medio del texto que diga: Regresar, y hacen lo mismo pero en el siguiente estado, para los que lo quieran hacer directamente desde el código deberán escribir lo siguiente:

<mx:State name=“Hola”>

<mx:SetProperty target=”{label1}” name=“text” value=“Este es el Estado Hola…”/>
<mx:RemoveChild target=”{button1}“/>
<mx:RemoveChild target=”{button2}“/>
<mx:AddChild position=“lastChild”>
<mx:Button x=“330″ y=“117″ label=“Regresar”/>
</mx:AddChild>

</mx:State>

<mx:State name=“Adiós”>

<mx:SetProperty target=”{label1}” name=“text” value=“Este es el Estado Adiós”/>
<mx:RemoveChild target=”{button1}“/>
<mx:RemoveChild target=”{button2}“/>
<mx:AddChild position=“lastChild”>
<mx:Button x=“325″ y=“120″ label=“Regresar”/>
</mx:AddChild>

</mx:State>

Pues bien si son observadores habrán notado que los botones que borraron en el área diseño les genera una etiqueta: <mx:RemoveChild> y tiene el parámetro target el cual hace referencia al objeto o elemento que desean remover de dicho estado.

Para modificar un objeto (Child) se utiliza:

<mx:SetProperty target=”{ELEMENTO}” name=“PROPIEDAD” value=“VALOR NUEVO…”/>

Como ven es muy fácil eliminar y modificar un elemento, solo resta ver como agregar un nuevo elemento dentro de un estado, pues es básicamente igual solo que se utiliza la siguiente etiqueta:

<mx:AddChild position=“lastChild”>
<mx:Button x=“325″ y=“120″ label=“Regresar”/>
</mx:AddChild>

Con <mx:AddChild…> pueden agregar un nuevo elemento, la propiedad position=”lastChild” quiere decir colocar al final del último elemento o child y después agregan un botón con <mx:Button>.

Pues bien, hasta el momento ya vimos como crear los estados y como agregar, eliminar y modificar sus elementos (childs), ahora veremos cómo se mandan a llamar para poder ser utilizados.

En el estado Base, a los botones Hola y Adiós les vamos a agregar un nuevo parámetro dentro de su propiedad clic al igual que en los botones Regresar que se encuentran dentro de los otros dos estados.

<mx:Button x=“273″ y=“113″ label=“Hola” id=“button1″ click=”{this.currentState=‘Hola’}”/>
<mx:Button x=“452″ y=“113″ label=“Adiós” id=“button2″ click=”{this.currentState=‘Adiós’}”/>

Como pueden ver solo hacemos referencia al mismo elemento con this y con la propiedad currentState le asignamos el nombre del estado al que queremos que se dirija. Para crear un botón que regrese al estado base simplemente lo igualamos a nada this.currentState=” y así de sencillo.

<mx:Button x=“330″ y=“117″ label=“Regresar” click=”{this.currentState=”}”/>

Hasta aquí llega esta serie de tutoriales sobre Adobe Flex, la próxima semana estaremos publicando tutoriales sobre diseño gráfico con Adobe Photoshop.

Atentamente

NOTA: Este tutorial fue creado por Carlos Santana Roldán para MilkZoft, si deseas tomar total o parcialmente el contenido publicado te pedimos nos envíes un mensaje utilizando el formulario de contacto y agregando un enlace a MilkZoft como fuente de los datos (puedes insertar el siguiente código en tu blog o página web).

Fuente: MilkZoft

Gracias por el mini-tutorial!

Muchas gracias por el tutorial... Ahora, una preguntita... Esto es para los botones que ya vienen creados, no? Si quiero usar imágenes que funcionen como botones, el código varía mucho o símplemente con un source=@Embed funcionará?