BlocketPc - Open Source

Spanish Mobile Adobe User Group

English version

Actualizaciones

20/06/2009
Nueva release 0.5 con Dandelion Player
04/04/2009
Nueva release 0.4.7 con nuevos componentes!
03/02/2009
Nueva release 0.4.4 con numerosas correcciones
02/01/2009
Añadido componente NavigationMenuLight y corregidos algunos bugs.

Ayuda en línea

Ver ayuda en línea

Otros Proyectos

Desarrollado por

Licencia

Agradecimientos

LayoutManager

El proyecto LayoutManager nace a raiz de nuestra participación en el Adobe MAX Chicago 2007. Dádole vueltas a qué tipo de cosas podrían ser útiles para el desarrollo móvil (y no móvil) no tardamos en darnos cuenta que no habíamos encontrado ningun LayoutManager que mereciera realmente la pena por aquel entonces, y menos pensado para poder ser llevado a cabo en un dispositivo móvil.

Un LayoutManager es un sistema que nos permite posicionar los elementos en el espacio disponible, y que éstos reaccionen recolocándose según los cambios que se produzcan en dicho espacio disponible.

Un sistema de este tipo no es solamente interesante para móviles, sino que también es sumamente útil en determinadas webs que se ajustan al tamaño completo de pantalla. Por lo tanto si la idea salía bien sería una herramienta útil para la comunidad.

Dado que su presentación tuvo una gran respuesta por la gente que atendió en el MAX, decidimos dedicarle un poco más de trabajo y plantearlo como proyecto open source.

Características Generales

El sistema permite la gestión de elementos en pantalla y la reacción de los mismos frente a cambios en el escenario (tanto de cambio de tamaño como de rotación en el caso de los móviles, o lo que sería lo mismo modo PORTRAIT o LANDSCAPE, éste último para diestros y zurdos).

El proyecto permite el posicionamiento de elementos de forma exacta o relativa (píxeles o porcentajes), dispone de 9 puntos de registro diferentes a partir de los cuales se tomará la referencia para dicho posicionamiento, NO es intrusivo con el código de la aplicación principal (sino que se aplica de manera independiente al resto de la misma sobre MovieClips) y ha sido desarrollado en Action Script 2 para ser soportado de igual manera tanto en la web como en Flash Lite 2.0 y superiores.

Screenshots

En las siguientes capturas de pantalla se puede ver tanto las mátemáticas que están detrás del mismo (que sin duda son mejorables), como la lógica que hay que aplicar para darle funcionamiento, para un caso sencillo y para un menú en forma de tabla.

Contenido del paquete

El paquete contiene 6 clases, 3 de las cuales son solamente para gestión interna de valores constantes: LayoutPosition, LayoutOrientation y LayoutType y otras 3 son las que realmente intervienen en la funcionalidad: LayoutManager, LayoutLayer y LayoutItem.

El sistema se basa en la creacón de "capas no visibles" donde se registran MovieClips (a través de un LayoutItem), de esta manera podemos controlar el posicionamiento de la capa ficticia, como del Item dentro de su capa asociada. Este punto actualmente está en desarrollo para mejorar el rendimiento de la CPU.

Preparando una aplicación para el LayoutManager

El LayoutManager necesita de una serie de características en la película Flash que lo vaya a emplear para poder funcionar correctamente. Estas características no son nada especiales, sino que son normales en cualquier proyecto que quiera reescalarse y adaptarse a cambios de pantalla, y son:

Stage.scaleMode = "noScale";
Stage.align = "TL";
_focusrect = false;

Ejemplo de funcionamiento

Una vez que tenemos la película preparada con las líneas de código anteriormente mencionadas, crear un control de Layout para un supuesto "clip_mc" que tenemos en nuestro escenario es algo tan sencillo como impoartar las clases e indicarle el tipo de alineamiento y posición que se le quiere dar:

import com.blocketpc.managers.layoutmanager.LayoutManager;
import com.blocketpc.managers.layoutmanager.LayoutType;
import com.blocketpc.managers.layoutmanager.LayoutPosition;
import com.blocketpc.managers.layoutmanager.LayoutOrientation;
var layout:LayoutManager = new LayoutManager(this,100);
layout.createLayer("demoLayer");
layout.setLayerAlignment("demoLayer", LayoutPosition.MC);
layout.setLayerSize("demoLayer", LayoutType.ABSOLUTE, LayoutType.ABSOLUTE, 100, 100);
layout.setLayerPosition("demoLayer", LayoutType.ABSOLUTE, LayoutType.ABSOLUTE, 0, 0);
layout.addItem("demoLayer", "demoClip", clip_mc, LayoutType.ABSOLUTE, LayoutType.ABSOLUTE, LayoutPosition.MC, 0, 0 ,0 ,0, true);

En las primeras 4 líneas de esta porción de código, importamos todos los elementos necesarios para comenzar a usar el sistema. En la línea 6, creamos una instancia del LayoutManager, y le pasamos como referencia principal la propia linea de tiempo, y una profundidad a partir de la cual creará los "Layers" de 100.

En la línea 7 creamos una nueva capa en el sistema llamda "demoLayer", dicho nombre se tendrá que usar en el resto de acciones que se deseen llevar a cabo sobre esa capa. En la siguiente línea (8) le damos a dicha capa el alineamiento que deseamos que tenga, en este caso Middle Center, o lo que es lo mismo, centrada tanto horizontal como verticalmente.

La línea 9 recoge el tamaño que le amos a dicha capa, que en este caso en es valores absolutos, y por tanto medirá 100px de ancho y 100px de alto. Si en los tipos se indicara relativo, los valores serían porcentajes sobre el espacio disponible.

La línea 10 indica la posición que tendrá la capa con respecto a su punto de referencia, es decir Middle Center. Como le indicamos como valores tanto en X como en Y 0, eso quiere decir que literalmente su posición será MC.

Finalmente, en la línea 11 que es la más compleja de todas, añadimos a dicha capa un Item (que será en el escenario un movieclip). Para ello le indicamos la capa sobre la que queremos añadir el Item (primer parámetro), el nombre del Item en el sistema (segundo parámetro), el clip que estará asociado a dicho Item (tercer parámentro), y los siguientes valores respectivamente:

Tipo de posicionamiento en X del Item con respecto a la capa, en este caso absoluto.
Tipo de posicionamiento en Y del Item con respecto a la capa, en este caso absoluto.
Punto de registro dle Item con respeto a la capa, en este caso Middle Center (MC).
Posición X con respecto a ese punto de referencia.
Posición Y con respecto a ese punto de referencia.
Offset en X del clip (esto se indica cuando el centro del clip no está en su esquina superior izquierda, y es precisamente dicho desfase el valor que se debe poner. En nuestro ejemplo como suponemos que el clip asociado al Item tiene su centro en su esquina superior izquierda, le damos un valor 0.)
Offset en Y del clip (esto se indica cuando el centro del clip no está en su esquina superior izquierda, y es precisamente dicho desfase el valor que se debe poner. En nuestro ejemplo como suponemos que el clip asociado al Item tiene su centro en su esquina superior izquierda, le damos un valor 0.)
Verdadero o falso, para indicar si el cambio de posición u orientación será animado o directo (verdadero es animado, falso es directo).

Documentación

Se ha generado la documentación mediante naturalDocs, contemplando todas las propiedades y métodos de las diferentes clases que componen el paquete. Puedes acceder a la misma desde el siguiente enlace:

Ir a documentación en línea del LayoutManager System

Descargas y Demos

A continuación os dejamos una serie de enlaces para descargar diferentes demostraciones dle uso del sistema, desde lo más básico (como el ejemplo comentado anteriormente) a un ejemplo más complejo (menús de tabla o rejilla).

Soporte y actualizaciones

Para solucionar algún bug, problema o ampliación de funcionalidades podéis contactar con nosotros en nuestro formulario de contacto, indicando en el Subject LayoutManger. Desde Blocketpc trataremos de mantener actualizado este paquete y hacer algunas de las mejoras entre las que se encuentran previstas:

Optimización del rendimiento y clase LayoutManager.LayoutLayer
Soporte para deteción automática de cambio de rotación de pantalla (para los dispositivos que lo soporten)