Diseño en Flex, Interfaces

Bienvenidos a una serie de artículos orientados a diseño en Flex, habrán temas variados, desde las interfaces, las herramientas, perfiles de individuos, entre otros. Comenzamos con el concepto de interfaz debido a la importancia que tiene el hecho de cambiar algunos paradigmas de usuario con esta tecnología y como de un concepto de estudio tendremos pauta para el resto del análisis.

Vamos a pensar primero en el término “interfaz” que viene de una interacción, puede ser desde el control más básico hasta el sistema de navegación más complejo, pero el hecho de poder comunicar algo al usuario y permitirle a su vez responder mediante un control da origen a muchas situaciones.

Si pudieramos resumir el actual modelo de mensajes(eventos) en Flex, estos serían los actores principales:

  • Emisor
  • Receptor
  • Mensaje

Y es el modelo de mensajes(eventos) totalmente reconstruído para esta versión de ActionScript uno de los principios para dotar a Flex de tanto poder. Para entender de una manera una interfaz en Flex hay que tomar en cuenta esos puntos dentro de la conocida relación:

emisor.addEventListener(mensaje, receptor)

Quizá en este momento después de verlo de la forma más simple, algunos estén pensando, “bueno si es tan simple, para que todo el estudio?”. Si resulta tan fácil darle a cada uno de los implicados lo que está buscando, permitir que el “emisor” comunique de una forma transparente un mensaje lo suficientemente claro como para que el “receptor” no se confunda y tenga una respuesta eficiente para tal interacción. Y es cierto tienen razón al pensarlo de esa manera, porque no hay otra más simple.

Emisor

El papel de un emisor hablando en cuestión de interfaces es simple: iniciar la interacción. Veamos el ejemplo de botón, para un usuario “común” el botón simplemente tiene dos estados: presionado o no presionado, y es lo que ocurre en la mayoría de las aplicaciones web basadas en HTML hasta nuestros días, sin embargo hay una tecnología (Flash) que cambió esto y permitió a los diseñadores de interfaces ir un estado más allá, y con esa interacción extra (over) es que muchos diseñadores de UI planean sus interfaces actualmente.

El papel que juega una tecnología como Flex al respecto de estas interacciones con el emisor es por demás importante, ya que en principio los diseñadores de UI tenemos libertad de expresar la interfaz como queramos pero hay control al respecto, situación que en Flash no sucede y es por mucho lo que en más de una ocasión le ha valido fuertes críticas de parte de los gurus de Usabilidad.

Por último y no menos importante el dejar claro, que los tres estados en Flex se cumplen, pero podemos ir mucho más allá, por ejemplo tenemos un estado conmutado (toogle), otra buen ejemplo es que existe la posibilidad de identificar si el usuario al momento de presionar un botón sigue pulsando su ratón, y de un tinte algo más avanzado el hecho de propagar estos mensajes entre múltiples partes de la interfaz partiendo del hecho de un simple botón.

Receptor

Cambiando un poco de lugar, hablaremos del Receptor. Aquella idea de un receptor que responde por pausas (clic-espera-recibe) es uno de los paradigmas a romper por tecnologías tipo Web 2.0, cierto es que AJAX es muy popular por hacer esto, peticiones asíncronas pero en realidad sigue basándose en un cliente ligero y más allá del mismo navegador, la posibilidad de crecimiento es limitada.

Un punto importante en el juego mismo de la interfaz del usuario es el papel del receptor, la mayoría de las veces oculto al usuario final podríamos pensar en él, como un tipo de caja negra que va a hacer lo que nosotros queramos a través de los controles de usuario.

El primer tip en Flex al momento de plasmar receptores es olvidarse del cliente ligero, pensar que tenemos un cliente robusto (Flash Player) que nos va a permitir al momento de desarrollar (compile-time) y al momento de ejecutar (runtime-time) probar nuestras aplicaciones y tener la certeza de que van a funcionar como nosotros queremos.

Un segundo tip va de la mano con el anterior, y es que si realmente el paradigma de desarrollo ágil del marco de trabajo en Flex nos permite hacer más cosas en menos tiempo, por qué no pensar en los pequeños detalles? Ya saben detalles del tipo: avisos de usuario (Alert), validaciones (Validators), efectos (Effects) que seguramente en más de una ocasión cuando desarrollamos aplicaciones web tuvimos curiosidad de implementar pero por el mismo tiempo de entrega de las aplicaciones era difícil pensar que estos podían ser una realidad con 1 o 2 líneas de código.

Mensaje

Al revisar lo anterior, podríamos pensar que el mensaje es algo que va implícito. El emisor manda un mensaje al receptor y nada más; pensar de esta manera es un error muy común; solo decir que mientras más explícito (data typed events) sea este mensaje, mejores resultados podemos esperar al momento de estar desarrollando y al momento de ejecutar nuestras aplicaciones Flex.

Al aprender Flex uno comienza con eventos genéricos, conforme avanzamos a lo largo de la curva de aprendizaje comenzaremos a notar las ventajas de usar tipos de eventos y en un punto ulterior de nuestro aprendizaje quizá ya en los límites de nuestra interfaz queramos que Flex haga cosas realmente imposibles con otros tecnologías, pero saber de antemano que no vamos a tener restricciones al respecto porque podemos plantear nuestros tipos de eventos personalizados es una alivio para todo programador que se encuentra en diálogo con un diseñador de UI aunque sean la misma persona ya que son dos actividades diferentes que se complementan en un desarrollo.

Consideraciones

El diseño de interfaces de usuario en Flex puede tener muchas matices y es la gran cantidad de grises entre un paradigma y otro lo que intentaremos plasmar en esta serie de artículos. Se agradece de antemano cualquier comentario al artículo que pueda presentar otros puntos de vista de los que día a día hacemos interfaces Flex, nos sentimos libres al respecto y tenemos control al mismo tiempo. Así mismo las sugerencias de temas y subtemas que puedan surgir al respecto.

15 Comentarios

  1. Montse

    Gracias Edgar. :mrgreen:

    Precisamente estoy interesada en este momento en experimentar con un nuevo paradigma de GUI sobre Flex que ni tan sólo sé cómo se llama, pero que me gustaría que tratases en esta serie de artículos. Es un concepto de GUI que utiliza Microsoft Surface para sus apps de demo. Se basa en el comportamiento físico de objetos y olvida por completo los componentes “windows”.
    ¿Sabes cómo se llama este concepto o dónde informarme?

    1000 Gracias 🙂

    Montse

  2. Edgar Parada

    Gracias Javier por el comentario. Montse, también desconozco el nombre exacto del paradigma, me atravería a decir que se les conoce como NI Natural Interfaces. En mi blog tengo una entrada al respecto de una librería de AS3 muy similar al surface de Microsoft pero Open Source 🙂 Voy a ver que se puede experimentar con Flex.

  3. Cristian diaz

    Excelente trabajo,,, un afelicitacion y el inmenso agradecimiento por permitirnos entender algo tan importante como los eventos

  4. Critico

    Hola Edgar,

    me ha parecido interesante tu artículo, aunque un poco superficial. Espero que en un futuro entres un poco más en detalle en temas tecnológicos.

    También comentarte que no tomes el nombre de Web 2.0 en vano, ya que usar ese término podría llevar a que no te tomen en serio en algunos sitios (soy de la plataforma contra Web 2.0).

    En general me ha gustado bastante y explicas bastante bien algunas de las ventajas de interfaz que la gente no sabe apreciar en muchas ocasiones.

    En un futuro podrías introducirte en profundidad en el abandono del concepto de navegación entre páginas y algunos consejillos para todos los que están (o estamos) viciados por él.

  5. Edgar Parada

    Critico, tomare en cuenta lo que comentas acerca de “entrar más en detalle” sin embargo el enfoque del artículo desde que empece a escribirlo no tenía un matiz técnico, ni tutorial ni nada por el estilo.

    Estoy de acuerdo contigo el término Web 2.0 hoy en día puede verse hasta como un cliché pero entiendase que mi cita iba referenciando tecnologías web de “nueva generación”, y aunque Web 2.0 va más ligado a un cambio cultural y de enfoque, creo que algunos términos como AJAX, Flex, microformatos, pueden subirse al barco.

    Y por último, podríamos revisar el concepto de navegación entre páginas, pero recordemos que no estamos hablando de páginas web o aplicaciones web, los temas que tocamos en MIF van encaminados la gran mayoría a aplicaciones tipo RIA, donde las páginas ahora son estados de la aplicacion y el como interactuamos con ellos es el vicio actual 😉

  6. Diego

    Hola Edgar, quería plantearte algo sobre el tema de la navegación en flex. Estoy desarrollando una aplicación web con apariencia similar a la de un escritorio (iconos, ventanas,…) utilizando de momento flexmdi, y además todo está conectado con webservices.
    El problema me surge porque a la hora de añadir nuevas ventanas al MDI:Canvas, de momento lo tengo que hacer por AScript, asi que pierdo toda la funcionaidad de maquetar y diseñar desde FlexBuilder, y además el otro problema serio es que si le paso en la request de algunas operaciones del webservice ids de elementos que aún no he creado (pues los creo con eventos en AS), no podría compilar.
    1.¿Sabes de algún tutorial sobre “navegación” en flex?
    2.¿Conoces si hay alguna manera de usar templates a la hora de crear un MDIWindow por AS3?
    3.¿Se te ocurre algo que pudiera mejorar mi visión de conceptos respecto al tema de navegación, estados,… en flex?

    Muchas gracias.

  7. Edgar Parada

    Diego,

    No conocía mucho de FlexMDI, vi el sitio y tiene buena pinta el framework.

    Respecto al problema de añadir ventanas dinámicamente, te recomiendo aunque sea trazar en papel las medidas y ubicaciones posibles ya que esto te dará al menos una idea de la maquetación.

    En cuanto al problema de los eventos, busca algo sobre referencias dinámicas y también repasa el tema del diplay list, te dará una idea por donde va 😉

    De tus respuestas numeradas:
    1. Puedes leer: http://www.adobe.com/devnet/flex/articles/fig_pt3_06.html aunque de tutorial mejor lo ejemplos que vienen con Flex Builder.
    2. No conozco
    3. Pues de entrada te recomendaría no basar la nevagación de una app en estados, aunque las transiciones sean muy atractivas usalos para lo que fueron creados: cambios de estados de la aplicación. Y para navegación comienza por el clásico viewstack y sus controles básicos hasta llegar a controles más caprichosos inclusive generados en Flash. En breve hablaremos en MIF de los siguientes temas 🙂

  8. Pingback: MadeInFlex » Blog Archive » Eventos

  9. NH

    Aunque el diseño en Flex es bastante mas coplicado, que en otros editores con interfaz mas fácil, pero creo, pues es que uso actualmente, se consiguen resultados mas profesionales. Pero para iniciarse en este mundo, mejor empezar con dreamweaver. Me costó iniciarme en Flex, pero muy buena la aclaración de estos conceptos…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase