Una de las preguntas a las que nos enfrentamos comúnmente es como lograr cambiar entre la vista horizontal(landscape) y la vista vertical(portrait). Realmente es algo bastante simple de las cuales mostraremos 2 formas de hacerlo, una basada en los estados que maneja Flex y otra detectando el cambio en la orientación con AS3.

Para este tutorial usaremos una Blackberry Playbook aunque esto mismo aplica para cualquier otro tipo de dispositivo (Android o IOS).

Lo primero que haremos será crear un nuevo proyecto Mobile en Flash Builder; para crearlo podemos seguir las instrucciones de esta guía. Si deseas saber un poco más sobre los fundamentos o las herramientas necesarias para el desarrollo en esta tableta puedes revisar este artículo.

Es importante que al crear el proyecto mobile seleccionemos la opción "Automatically reorient" pues será la que nos dará permitirá reorientar nuestra aplicación con solo nombrar los estados. Si no lo haces siempre podras habilitarlo manualmente en el archivo descriptor de la aplicación con un true o false en la etiqueta "autoOrients"

<autoOrients>true</autoOrients>

Una vez configurado y creado el proyecto Mobile de Flex lo primero será crear 2 estados con los nombres/id's de "portrait" y "landscape". Con esto definido automáticamente la aplicación ya reconocerá el cambio en los estados y aplicará la orientación según la posición de nuestro dispositivo.

El código quedaría de la siguiente manera:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    title.landscape="Vista Horizontal"
    title.portrait="Vista Vertical">
    <s:states>
        <s:State name="landscape"/>
        <s:State name="portrait"/>
    </s:states>
</s:View>

A partir de esto ya es posible agregar, mostrar o reubicar contenido o componentes según el estado u orientación en la que se encuentre el dispositivo. Puedes encontrar algo mas sobre los estados, su uso e implementación en este video.

La otra forma reorientar nuestra aplicación es a través de de as3 con eventos. Recordemos que los eventos es una característica importante en as3 y podemos tener 2 tipos de eventos: Eventos generados por la interacción del usuario y eventos generados por actividad de la aplicación. Para entender más sobre el funcionamiento y aplicación de los eventos recomiendo revisen esta guía.

No olviden activar la opción de "Automatically reorient" esta es vital para poder detectar los cambios en la orientación de la pantalla en cualquiera de las formas de implementar.

Lo primero que debemos hacer es agregar un listener al stage para escuchar cuando cambia de orientación el dispositivo y declarar el método que estará actuando en consecuencia.

stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, cambiaOrientacion)

El método "cambiaOrientacion" será el que identifique la orientación y por tanto aplique los cambios necesarios. Este método recibe como parámetro un evento del tipo "StageOrientationEvent" que en su propiedad "afterOrientation" las 4 orientaciones disponibles "Default, izquierda, derecha y al revés" por lo que podemos definir que si la orientación es izquierda o derecha la orientación es entonces portrait/vertical y por tanto la posición default y al revés la orientación es landscape/horizontal. El código quedaría de la siguiente manera:

private function cambiaOrientacion(e:StageOrientationEvent):void
{
    if (e.afterOrientation == StageOrientation.ROTATED_RIGHT || e.afterOrientation == StageOrientation.ROTATED_LEFT)
    {
        currentState = 'vertical';
    }
    else
    {
        currentState = 'horizontal';
    }
}

Ahora mostramos como quedan estos dos ejemplos corriendo directamente en la tableta:

El código de estos ejemplos está disponible para su descarga

Esperamos les sirva este tutorial! si tienen dudas sobre este u otros tópicos de la plataforma Flash no duden en preguntar por aquí, en la lista de distribución de Riactive o vía twitter en @RIActive.

Saludos y.... . Happy Coding!!!

Sergio Brito AKA @yacaFx