Clase 6

Javier La Banca
javierlabanca@gmail.com
Skinning y visualización de datos.

Objetivos:
 Aprender a realizar themes para Flex con
Illustrator y las Adobe Flex skinning
extensions.
 Visualizar información en charts: Torta,
Líneas, Area, etc.
Contenido
 ¿Qué es el skinning?
 ¿Qué son las Flex Skinning Extensions?
 Crear una piel para un botón de Flex.
 Exportar la piel a un swf como símbolo.
 Aplicar la piel al botón a través de CSS
 9 slice-scaling
 Charts
 Tipos de charts
 Ejemplo de visualización de datos
¿Qué es el skinning?
 Skinning es el proceso mediante el cual se
le cambia la apariencia a un componente
al modificar o reemplazar sus elementos
visuales, como fondos o bordes. Estos
elementos pueden ser imágenes, símbolos
en archivos swf, o clases programáticas en
AS3.
 Las Skins o pieles definen el aspecto
visual de los estados de los componentes.
Por ejemplo, un botón tiene una piel para
cada estado: up, down, over y disabled.
¿Qué son las Flex Skinning
Extensions?
 Adobe nos proporciona un juego de
plantillas o templates con los
componentes de Flex ya dibujados en
cada estado para facilitarnos el trabajo a
la hora de crear skins. Illustrator CS4 las
trae incorporadas por defecto. Existen
también extensiones para Photoshop y
Flash que pueden ser bajadas de
http://adobe.com
Crear una piel para un botón de
Flex - I
 En Illustrator vamos a File -> Scripts -> Flex Skins -> Create Flex
Skin, en el pop-up que nos aparece seleccionamos specific
components -> Button
Crear una piel para un botón de
Flex - II
 Cada estado del botón que nos
aparece dibujado es un símbolo que
puede ser modificado en apariencia
para luego ser exportado como
archivo .swf y utilizado en Flex
mediante una hoja de estilos CSS
Crear una piel para un botón de
Flex - III
 Diferentes estados de un botón:
Crear una piel para un botón de
Flex - IV
 Podemos afectar ahora el estado de cada símbolo,
cambiándole el fondo y/o los bordes:
Crear una piel para un botón de
Flex - V
 Cada estado del botón es una instancia
de un símbolo con un nombre.
Usaremos este nombre para luego
referenciarlo en la hoja de estilo de Flex.
Exportar la piel a un swf como
símbolo
 Una vez que tenemos los estados para
nuestro botón, vamos a File -> Scripts ->
Flex Skins -> Export Flex Skin y elegimos
un nombre y una ubicación para nuestro
archivo .swf.
 Luego añadimos el archivo swf al proyecto
de Flex.
Aplicar la piel al botón a través de CSS
-I
 Ya estamos listos para usar la nueva
piel en nuestro proyecto.
 Instanciamos nuestro botón en el
Application y creamos una hoja de
estilos externa con las siguientes
declaraciones:
Aplicar la piel al botón a través de CSS
- II
 Y aplicamos el estilo sobre el botón con
la propiedad styleName:
9 slice-scaling
 El 9 slice-scaling o escalado de 9 porciones permite escalar
vectores o símbolos hacia arriba o hacia abajo sin
distorsionar su geometría.
 La siguiente figura muestra la manera en que las imágenes
son escaladas por medio de este método:
Charts - I
 Visualizar datos en gráficos nos ayuda a
interpretar la información con más facilidad.
Flex nos permite utilizar varios tipos de
gráficos, como barras, líneas, torta, etc,
usando colores y leyendas.
 Los gráficos son componentes de Flex que
podemos instanciar como cualquier otro y a
los que podemos configurar a través de sus
propiedades y métodos.
 Para tener acceso a los componentes de
charts de Flex, necesitamos tener instalada la
versión de Adobe Flex Builder Professional.
Charts – II
 Todos los componentes de charts en
Flex tienen una API similar (API:
Application Programming Interface o
Interfaz de programación de
aplicaciones). Se usan ciertos tags
particulares para definir un chart, pero
generalmente siguen la misma
estructura.
Charts – III
Charts – IV – partes de un Chart
 Como se puede ver en el pseudo-
código, un chart contiene un nodo padre
con el tipo de Chart, puede contener
una o más series, ejes, renderers y
otros elementos.
 El <TipoDeChart> es el tag padre y
define el tipo de gráfico a representar.
Es obligatorio. Ej: LineChart,
ColumnChart, PieChart, etc.
Charts – V – partes de un Chart
Charts – VI – partes de un
Chart
 Si ejecutamos el proyecto de la
diapositiva anterior, solo se mostrarán
los ejes del chart sin ningún tipo de
información, ya que necesitamos hacer
uso de la clase Axis para especificarle
cual es la información que el gráfico
debe renderizar en sus ejes horizontales
y verticales.
Charts – VII – partes de un
Chart
Charts
 Como se ve en la figura anterior, ahora
aparecen los nombres de los meses a lo
largo del eje horizontal del gráfico.
 Pero con esto no es suficiente, para que
Flex pueda mostrar la información
debemos definir las series.
Charts – Series - I
 Las series definen arrays de objetos de
clase Series, que se usan para especificar
el dato a renderizar en el gráfico. Para
cada serie de datos se pueden especificar
diferentes estilos como: fill (relleno), stroke
(trazo), etc. Podemos usar más de una
serie por gráfico, y esto nos mostrará dos
sets de datos rendereizados al mismo
tiempo. Cada tipo de chart tiene su propio
tipo de serie, así, por ejemplo, para un
<mx:ColumnChart> debemos usar la
<mx:ColumnSeries>
Charts – Series - II
 Como se ve en el código, ahora
tenemos definido un eje horizontal y la
información a renderizar en el eje y:
Charts
 Finalmente, Flex nos muestra el gráfico:
Charts – Agregar una leyenda - I
 Agregar una leyenda a un gráfico es
muy fácil. Simplemente instanciamos el
tag <mx:Legend> y como dataProvider
le pasamos el id del chart. También
debemos setear la propiedad
displayName en el tag
<mx:ColumnSeries>
Charts – Agregar una leyenda - II
Charts
 Si ahora quisiéramos mostrar también la
información de las ganancias
correspondientes a cada mes,
deberíamos hacer uso de otra
<mx:ColumnSeries/> dentro del par de
tags <mx:series></mx:series>
Charts
Charts – Más configuraciones - I
 Los gráficos en Flex permiten múltiples
configuraciones. Por ejemplo, podemos
determinar que solo se muestren
algunas palabras en los ejes, o
podemos darle formato al texto y
obtener un toolTip cuando hacemos
mouseOver sobre determinado gráfico.
Podemos darle formato a este toolTip
usando formateadores, etc.
Charts – Más configuraciones - II
Charts – Más configuraciones -
III
 Como se ve en la figura anterior, también
existe la propiedad dataTipFunction que
nos permite darle formato al texto que se
va a mostrar en el toolTip del gráfico. Esta
propiedad se asocia a una función que por
defecto recibe un objeto del tipo HitData.
Este objeto contiene la información de
cada ítem del gráfico. Hemos usado un
<mx:CurrencyFormatter> para agregar el
signo $ antes del número.
Charts – Más configuraciones - III
Charts – Gradientes
 Podemos también utilizar gradientes
sobre la información renderizada:
Charts – Gradientes
Tipos de charts en Flex
 Area
 Bar
 Pie
 Bubble
 Candlestick
 Column
 HighLowOpenClose
 Line
 Plot