subscripción
MadeInFlex
Flex Hero Mobile (III): ActionBar y Text Components
Diciembre 30th, 2010 - [Enlace local]
En este post hablaremos de la ActionBar, un componente que ayuda a la navegación de las aplicaciones Mobile hechas con Hero. También trataremos los TextComponents que nos proporciona el framework para tratar elementos de texto.
ActionBar
Descripción detallada
ActionBar es un SkinnableComponent que proporciona navegación, además de permitirmos añadir el título y las acciones relacionadas con el ViewNavigator.
ActionBar tiene las siguientes propiedades:
- ActionBarSkin: la skin po defecto
- Opcional: tenemos como opcional el titleDisplay, para mostrar el título, navigationGroup, titleGroup y actionGroup.
A continuación vemos las distintas partes de la ActionBar:
Title Group
Si el titleContent no es nulo, reemplaza a titleGroup. En caso contrario, ActionBar insertará el titleDisplay, si existe, como titleGroup.
Action Group
El actionContent es un proxy para el contenido del actionGroup. A diferencia de titleGroup, no tiene preferencias para el caso de contenido nulo.
Navigation Group
De la misma manera, navigationContent es un proxy para en contenido de navigationGroup.
Interacción entre la ActionBar, las vistas y el ViewNavigator
Tanto las vistas como el ViewNavigator definen proxies para las 6 propiedades de la ActionBar. Cuando el ViewNavigator añade una nueva vista, comprueba los valores para estas propiedades y da el contenido a la ActionBar. Si la vista activa no define estos valores, ActionBar da sus valores para estas propiedades. De esta manera los developers pueden determinar contenido por defecto en la zona del navigationContent, como puede ser el Home Button.
El ViewNavigator controla el contenido de la ActionBar cada vez que un evento de navegación ocurre. ViewNavigator escucha los cambios de las propiedades cuando una vista es activada, con la finalidad de actualizar la ActionBar. Cuando se desactiva la vista, ViewNavigator quita los listeners de la vista y escucha la nueva vista activa.
Debajo vemos diferentes modalidades de la ActionBar.
Podeis encontrar más información y ejemplos en este link.
Text Components
Descripción detallada
Tienen como objetivos los siguientes:
- Disponer de los componentes de texto típicos como: Label, TextInput y TextArea
- Proporcionar el máximo rendimiento en áreas críticas, como skins o items renderers
- Proporcionar una predicción de texto nativa y de edición
Características
Los componentes de texto para mobile, por motivos de rendimiento, extienden de TextField. Esto hará que la performance sea mejor, aunque si queremos optimizar al máximo en ciertos escenarios, como en la creación de item renderers, podemos mirar la especificación de estos elementos.
Además nos proporcionan:
- Una nueva primitiva llamada StyleableTextField: extiende de TextField y nos da soporte para estilos. También implementa IDisplayText y IEditableText. No implementa IUIComponent o ILayoutElement, por lo que no puede usarse como child de un container. Está pensada para usarse en skins y en item renderers.
- Dos nuevas primitivas, IDisplayText y IEditableText: definen el contrato entre un text display y un editable text. Las skin parts de Texto en los componentes Spark han sido actualizadas para usar estas interfaces en lugar de TextBase y RichEditableText.
- Nuevas skins para los componentes TextInput y TextArea: estos componentes usan la nueva primitiva StyleableTextField.
Teclado y Focus
Los TextInput y las TextArea editables han sido pensadas para que pueda introducirse texto, de manera que no se permite que el teclado se superponga encima de ellos. Cuando uno de estos componentes recibe el foco, el típico rectángulo de color los envuelve.
Mas información aquí.