Desarrollo de interfaces: cómo crear componentes visuales

El desarrollo de la interfaz de usuario en cualquier aplicación es un parte importante ya que va a ser la forma en la que interrelacionemos con el usuario final. A veces precisa de una importante dedicación hasta conseguir el diseño adecuado. Vale la pena pues que los esfuerzos que realicemos no queden en balde o sean de un único uso.

Es aquí donde aparece el concepto de la programación por componentes y que en este post abordaremos para explicar en qué consiste y en especial en la parte visual de los mismos.

¿Qué es la programación orientada a componentes?

Antes de continuar adelante en el post, creo que conviene entender y dejar claro la diferencia entre la programación orientada a objetos y la programación orientada a componentes ya que puede llevar a alguna confusión.

La programación orientada a objetos se fundamenta en el aprovechamiento de varios objetos con un conjunto de clases definidas dentro de un ejecutable para conformar la aplicación. Es decir, partiendo de diferentes objetos que tienen clases y funciones definidas para poder ser reaprovechadas, se llaman a los mismo para realizar la programación.

Esto obliga a conocer cómo están creados dichos objetos para poder ser reutilizados, ya que encapsulan las clases que utilizaremos en la programación.

Por otro lado, la programación orientada a componentes da un paso más allá. Este tipo de programación se centra en el uso de módulos intercambiables que trabajan de forma independiente y de los cuales no es necesario saber nada acerca de su implementación interna.

En este sentido, en la programación orientada a componentes, disponemos de bloques para la construcción de nuestra aplicación, que incluyen toda la funcionalidad requerida, lo cual reduce considerablemente los costes de mantenimiento y de desarrollo de las aplicaciones.

Otra de las características que los componentes deben cumplir es que pueden ser programados en cualquier lenguaje para ser utilizado por cualquier lenguaje, es decir, su creación y uso debe ser independiente del lenguaje de programación.

Creación de componentes visuales

No es intención de este post el ser un curso avanzado de programación, pero si veremos los pasos a seguir para crear un componente visual, ya que existen diversos entornos de programación de componentes.

Recordemos que un componente visual es aquel que muestra algún elemento en la pantalla y permite al usuario interactuar con él. Todo componente debe tener propiedades, eventos, métodos y atributos. Veamos qué es cada cosa.

• Las propiedades son datos públicos del componente y se puede acceder a ellas mediante un método parta leer y otro para modificar. Por ejemplo, en un botón su altura y anchura serían dos de sus propiedades.
• Los atributos son siempre de uso interno y privado al componente y deben usarse las propiedades para asignar dichos atributos. Por ejemplo, para la propiedad color, los atributos pueden ser el rojo, el verde, etc…
• Los eventos dan funcionalidad a los componentes. Estos eventos son llamados desde los programas a través de los diferentes métodos que se definan a través del usuario.

A la hora de crear componentes visuales, es importante tener claros los eventos que vamos a definir para que el usuario, al generar dicho evento, de lugar a una acción mediante el uso de alguno de los métodos o funciones definidos.

Para aclarar este concepto, veamos un ejemplo básico.

Podemos tener un botón rojo y definir sobre el mismo el evento pasar por encima el ratón. Podemos definir que cuando se de dicho evento, el botón cambie a color verde. Con este ejemplo vemos todo lo que debe conformar un componente visual. El botón tiene como propiedades su tamaño, como evento hemos definido el pasar por encima el ratón, los atributos son los colores que puede tomar y el método es el cambio de color cuando se produce el evento definido. Los eventos son una parte muy importante de los componentes visuales ya que van a permitir al usuario interactuar con la aplicación en cualquier momento, convirtiéndose así en la base del interfaz de usuario.

Ya tenemos claros los elementos que deben conformar un componente y los mismo no tienen porqué estar restringidos a los componentes visuales, si no que aplican a cualquier tipo de componente.

Sin embargo, en el caso de componentes visuales, necesitaremos alguna herramienta de diseño gráfico para crear nuestro componente visual. Hay diversas en el mercado y podremos usar aquella a la que estemos más habituados. El resto ya va a depender de nuestro entorno de desarrollo pues cada uno tendrá su forma de crear componentes visuales, empezando desde luego por el lenguaje de programación a utilizar.

En Internet encontraremos diversos manuales o tutoriales de uso de estos entornos o plataformas de desarrollo para profundizar en el tema. Lo importante del post de hoy es entender la importancia y ventaja que nos puede aportar la programación de componentes.

• Para el programador que los usa, le permitirá un proceso de desarrollo más rápido.
• Para el programador que los programa, le permitirá desarrollar sus capacidades al máximo ofreciendo productos cerrados de funcionalidad completa a la comunidad de desarrolladores.

Si ya eres un programador que usa o crea componentes, nos interesa conocer tu punto de vista sobre los mismos.