Está en la página 1de 22

Desarrollo de

Interfaces

Técnico Superior en
Desarrollo de Aplicaciones
Multiplataforma
© Centro para la Cultura y el Conocimiento, S.A.

ISBN-13: 978-84-7157-397-1

ISBN-10: 84-7157-397-0

E-m06-22

Printed in Spain

Queda rigurosamente prohibida, sin autori-


zación escrita de los titulares del "copyright"
bajo las sanciones establecidas en las leyes, la
reproducción parcial o total de esta obra por
cualquier medio o procedimiento, comprendi-
dos la reprografía y el tratamiento informático
y la distribución de ejemplares de ella median-
te alquiler o préstamos públicos.
3
visuales.
Creación de
componentes

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA 51


Módulo | Desarrollo de Interfaces
Módulo | Desarrollo de Interfaces

Sumario
1. Introducción a la creación de componentes visuales............................................. 53
2. Desarrollo de software basado en componentes.
Reutilización del software. Beneficios...................................................................... 54
3. Concepto de componente; características............................................................... 56
4. Propiedades y atributos............................................................................................ 57
5. Eventos...................................................................................................................... 59
6. Persistencia del componente................................................................................... 62
7. Extender la apariencia y el comportamiento de los controles
en modo de diseño.................................................................................................... 65
8. Integrar controles existentes en nuestros componentes........................................ 66
9. Herramientas para desarrollo de componentes visuales........................................ 67
10. Empaquetado de componentes............................................................................. 69
52
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

Objetivos
▶ Estudiar el concepto de componente, sus propiedades y atributos.

▶ Conocer el concepto de eventos en componentes.

▶ Estudiar las principales herramientas para el desarrollo de componentes visuales.

▶ Conocer el desarrollo de software basado en componentes y sus beneficios.


Módulo | Desarrollo de Interfaces
1. Introducción a la creación
de componentes visuales
En esta unidad nos centraremos en el concepto de componentes visuales, sus propiedades y
sus atributos y cómo se pueden comunicar mediante el concepto de eventos.

Estudiaremos las principales herramientas enfocadas en el desarrollo de componentes visua-


les y los beneficios de este tipo de desarrollo.

53
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces

2. Desarrollo de software
basado en componentes.
Reutilización del software.
Beneficios
Hoy en día muchas de las aplicaciones informáticas o sitios web necesitan realizar una interac-
ción continua con los usuarios. Gracias a ella, éstos pueden seleccionar y ejecutar funcionali-
dades para la consulta o modificación de datos.

Los elementos que se pueden utilizar para esta interacción pueden ser una combinación de
dispositivos de hardware y/o tecnologías de software. Estos elementos ayudan a la creación
de una plataforma con interfaces que permiten al usuario interactuar con las aplicaciones.

Los elementos forman una especie de lenguaje visual que se ha ido desarrollando para conse-
guir la correcta comunicación con las interfaces por parte de los usuarios con poca experiencia
con las nuevas tecnologías.
54

En el caso en que se puede desarrollar una interfaz gráfica de usuario sin escribir ninguna línea
de código, se justifica de forma muy clara la utilización de componentes visuales.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

2.1. Desarrollo y reutilización


de componentes visuales
personalizados
Un componente visual una vez empaquetado se podría:

▶ Utilizar en proyectos futuros.

▶ Compartir con otros desarrolladores del mismo proyecto que necesiten herramientas
similares.

▶ Compartir sin ánimo de lucro con el resto de la comunidad de desarrolladores de


todo el mundo.

Si no se desarrolla con la opción de reutilizar componentes o se generan las aplicaciones de


forma directa, muy probablemente se estará repartiendo el mismo trabajo con el consecuente
incremento del tiempo de programación y los costes de los proyectos.

Si en el futuro se quiere modificar la aplicación desarrollada, y los cambios afectan a la parte


de código empaquetada en un componente, sólo será necesario distribuir esta biblioteca y no
toda la aplicación.
Módulo | Desarrollo de Interfaces
En el caso de las aplicaciones cliente - servidor, si queremos modificar un componente o se
genera una actualización, es muy probable que sólo sea necesario actualizar el componente
en el servidor, sin necesidad de revisar el resto de programas instalados en los clientes, que se
actualizarán automáticamente.

2.2. Beneficios del desarrollo de


componentes
Podemos enumerar muchos beneficios de este tipo de programación como los siguientes:

▶ Posibilidad de la venta de componentes por empresas especializadas con el consi-


guiente nuevo campo de negocio.

▶ Desarrollos mucho más sencillos en cuanto a tiempo dedicado y, por lo tanto, en


cuanto a costes derivados.

▶ Una tasa menos elevada de errores si los componentes que se utilizan pasan por un
control de calidad exhaustivo antes de ser comercializados.

55
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces

3. Concepto de componente;
características
El concepto de componente en el mundo del software es una clase creada para ser reutiliza-
da y que puede ser utilizada por una herramienta de desarrollo de aplicaciones visuales.

▶ Se define por su estado, que se almacena en un conjunto de propiedades. Estas propie-


dades pueden ser modificadas para adaptar el componente al programa en el que se
quiera utilizar.

▶ El comportamiento de los componentes se define por los eventos ante los que respon-
de y los métodos que ejecuta para dichos eventos.

La interfaz del componente se puede entender como un subconjunto de los atributos y los
métodos de dicho componente.

▶ Para su distribución, se podrá empaquetar con todo lo necesario para su correcto fun-
cionamiento, de manera totalmente independiente de otras bibliotecas o componentes.
56
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

▶ Para que una clase pueda ser considerada un componente debe cumplir las siguientes
normas:

• Debe poder adaptarse a la aplicación en la que se integra.


• Debe ser capaz de almacenar el estado de sus propiedades cuando se vean modifi-
cadas. A este concepto se le conoce como persistencia.

• Debe permitir que cualquier IDE pueda reconocer ciertos elementos de diseño como
los nombres de las funciones miembros o métodos y definiciones de las clases, y
comunicar esa información. A este concepto se le conoce como introspección.

• Debe tener la capacidad de gestionar eventos.


Módulo | Desarrollo de Interfaces
4. Propiedades y atributos
En las clases de los lenguajes de programación orientada a objetos, un componente puede
tener definido un estado a partir de un grupo de atributos.

Estos atributos los podemos entender como variables definidas por su nombre y su tipo de
datos que adquieren valores concretos.

Por norma general los atributos son privados y no se puede acceder a ellos ni ser visibles desde
fuera de la clase que implementa el componente.

Las propiedades se pueden entender como un tipo concreto de atributo. Ofrecen ciertas ca-
racterísticas propias de un componente y pueden afectar tanto a su comportamiento como a
su apariencia.

Son accesibles y visibles desde fuera de la clase y forman parte de su interfaz.

4.1. Propiedades simples e indexadas

57
Las propiedades simples representan un único valor. Por ejemplo, un número, un valor boo-
leano o un texto.

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA


Tienen asociados los métodos de acceso y establecimiento de valor getter y setter.

Ejemplo

Imaginemos que un componente de software tiene una propiedad llamada precio de tipo real
y que puede ser leída o escrita.

En este caso deberá tener los siguientes métodos de acceso:

▶ public real getPrecio()

▶ public void setPrecio(real nuevoPrecio)

Recuerda:

Debemos tener en cuenta que, si a una propiedad simple le falta alguno de los métodos co-
mentados, sería de sólo lectura o escritura.

Las propiedades indexadas, a diferencia de las simples, sirven para representar un conjunto
de elementos.

Normalmente se usan vectores para representar estas propiedades.


Módulo | Desarrollo de Interfaces

Ejemplo

A continuación vemos ejemplos de cómo podemos acceder y establecer valores a estas propie-
dades indexadas:

▶ public <TipoPropiedad>[] get<NombrePropiedad>()

▶ public void set<NombrePropiedad> (<TipoPropiedad>[] p)

▶ public <TipoPropiedad> get<NombrePropiedad>(int posicion)

▶ public void set<NombrePropiedad> (int posicion, <TipoPropiedad> p)

4.2. Ámbito de las Propiedades


Según el ámbito donde se quieran usar estas propiedades, podemos encontrar propiedades
compartidas y restringidas:

▶ Una propiedad compartida permite notificar a otros objetos de la misma clase si su


valor ha sido modificado.

Cuando se produce dicho cambio, se genera un objeto de tipo ObjectEvent para comu-
nicarse con el resto de objetos.
58

▶ Una propiedad restringida es similar a la compartida salvo que, en este caso, los obje-
tos oyentes pueden denegar que el cambio de valor de la propiedad se produzca.

Para ello, estos objetos deben implementar la interfaz VetoableChangeListener y su mé-


TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

todo vetoableChange().

4.3. Atributos para los miembros


de un componente o control
Los atributos o propiedades de un componente pueden ser modificadores tanto en tiempo
de ejecución, mediante la modificación de su código, como en tiempo de diseño a través de
la ventana de propiedades.

Este segundo caso es el más habitual en el desarrollo de aplicaciones en entornos IDE.

Además de sus propiedades, debemos tener en cuenta que los componentes también tendrán
una serie de métodos asociados para manipular y establecer sus valores.
Entendemos estos métodos como pedazos de código asociados a un componente que se pue-
den ejecutar después de una acción, evento o mensaje por parte de otro componente.
Gracias a los atributos de los componentes o controles se pueden establecer ciertas caracterís-
ticas que pueden afectar de una manera u otra al comportamiento de los elementos.
Los atributos pueden variar de un componente a otro, aunque existen atributos que son co-
munes entre todos ellos. Algunos de los atributos más habituales permiten modificar el nom-
bre, la descripción, el color, el tamaño, entre otros.
Módulo | Desarrollo de Interfaces
5. Eventos

5.1. Definición de evento


Un evento se puede entender como un mensaje o notificación que un objeto de una clase
puede lanzar cuando algo ha ocurrido.

Un ejemplo habitual es cuando el usuario hace clic mediante un dispositivo externo (como un
teclado o un ratón) en un botón de un formulario.

Esta acción produce el evento Click del botón pulsado, entre otros. De esta forma, el botón no-
tifica que esta acción ha pasado y permite al programador bajo su propio criterio activar una
funcionalidad vinculada a este evento.

5.2. Asociación de acciones a eventos


En líneas generales, la funcionalidad de un componente viene definida por las acciones que

59
puede realizar y que están definidas en sus métodos.

Cuando estas acciones tienen lugar, decimos que se genera un evento que el componente
puede capturar y procesar ejecutando alguna función.

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA


Un componente también puede lanzar un evento cuando sea necesario y que su tratamiento
se realice en otro objeto.

Mediante las herramientas de desarrollo se pueden reconocer los eventos que puede lanzar un
componente y de esta manera programar la realización de acciones.

Para que un componente reconozca los eventos, deben darse los siguientes pasos a la hora
de crear la interfaz:

▶ Crear una clase concreta para los eventos que se puedan lanzar.

▶ Definir una interfaz que represente el listener u oyente asociado a dicho evento. Tam-
bién incluye una operación para el procesamiento del evento.

▶ Definir dos operaciones:

• Añadir oyentes: public void add<NomOyente>Listener(<NomOyente >Listener l)


• Eliminar oyentes: public void remove< NomOyente >Listener(<NomOyente >Listener l)
Si queremos tener varios oyentes deberemos almacenarlos internamente en una estruc-
tura de datos como ArrayList o LinkedList:
Módulo | Desarrollo de Interfaces

▶ Por último, debemos recorrer los oyentes registrados en nuestra estructura interna de
datos llamando, para cada uno de ellos, a la operación correspondiente del evento.

▶ Eventos en
desarrollo de
software.
60

5.3. Generalizar el componente


TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

mediante la creación de eventos


Los eventos permiten mediante su creación comunicar información entre los componentes de
nuestra interfaz.

De esta manera, componentes diferentes podrán desarrollar su funcionalidad cuando se pro-


duzca algún tipo de evento.

Estos eventos permiten intercambiar posibles cambios de estado, o dar respuesta a necesida-
des concretas de los componentes cuando se relacionan con el usuario o necesitan lanzar una
acción concreta.

Por lo tanto, aunque los componentes no tengan relación entre sí, pueden relacionarse a tra-
vés de la creación y gestión de eventos.

Un ejemplo clásico es cuando el usuario de la aplicación pulsa un botón de enviar información


de un formulario y aparece un mensaje de que dicha información se ha procesado correcta-
mente.
Módulo | Desarrollo de Interfaces
5.4. Comunicación del componente
con la aplicación que lo usa,
parámetros por valor y por
referencia
La comunicación entre los componentes es de vital importancia para el correcto desarrollo de
las interfaces de usuario.

Los componentes necesitan comunicarse los unos con los otros para ampliar funcionalidades
o intercambiar información y, al mismo tiempo, poder interactuar con el usuario y dar respues-
ta a sus necesidades.

Esta comunicación entre componentes es clave para que las interfaces puedan funcionar de
manera correcta y sean útiles y sencillas para el usuario.

En esta fase de comunicación entre componentes, entran en juego diferentes variables propias
de cada elemento. Estas variables de esta comunicación se pueden gestionar por valor o por
referencia:

▶ Por valor: la variable se copia y se trabaja sobre dicha copia sin modificar el valor origi-

61
nal de la variable.

▶ Por referencia: se pasa una referencia o puntero a memoria de la variable, con lo que
cualquier cambio que se realice será accesible posteriormente.

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA


Módulo | Desarrollo de Interfaces

6. Persistencia del
componente
En ocasiones es necesario almacenar el estado de una clase para que se pueda consultar con
posterioridad. Es lo que se denomina persistencia.

El mecanismo que nos permite implementar la persistencia se denomina serialización.

En general, debemos tener en cuenta que los componentes deben poder persistir en todos los
casos. En Java, los componentes deben implementar las interfaces java.io.Serializable o java.
io.Externalizable.

Estas interfaces podrán ofrecer dos tipos de serialización: automática o programada.

A continuación, se muestran las características de cada uno de estos tipos.

6.1. Serialización automática


62

La serialización automática de un componente se implementa mediante la interfaz Seria-


lizable.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

Debemos tener en cuenta los siguientes requisitos para poder usar la interfaz serializable:

▶ Las clases deberán tener un constructor sin argumentos.

▶ Todos los campos serán serializados menos static y transient. Para aquellos campos que
no queramos serializar usaremos el modificador transient.

▶ Si es necesario podremos crear una serialización a medida implementando los métodos


mostrados a continuación:

• private void writeObject(java.io.ObjectOutputStream out) throws IOException


• private void readObject(java.io.ObjectInputStream in) throws IOExcept
Módulo | Desarrollo de Interfaces
Ejemplo

Un ejemplo sencillo de implementación de la serialización automática en Java sería el si-


guiente:

import java.io.Serializable;

public class Fecha implements Serializable{

private int dia;


private int mes;
private int anyo;
...
}

6.2. Serialización programada

63
La serialización programada del componente se implementa con la interfaz Externalizable y
sus dos métodos para guardar el componente con un formato concreto.

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA


Características:

▶ Se necesita la implementación de los métodos readExternal() y writeExternal().

▶ Las clases Externalizable, al igual que Serializable, deben tener también un constructor
sin argumentos.
Módulo | Desarrollo de Interfaces

Ejemplo

Un ejemplo sencillo de implementación de la serialización programada en Java sería el si-


guiente:

import java.io;

public class Coche implements Externalizable {


static int edad;
String nombre;
int anyo;
...
@Override
public void writeExternal(ObjectOutput out) throws IOException
{
out.writeObject(nombre);
out.writeInt(edad);
out.writeInt(anyo);
64

}
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

@Override
public void readExternal(ObjectInput in) throws IOException, ClassNotFoundException
{
nombre = (String)in.readObject();
edad = in.readInt();
anyo = in.readInt();
}

}
Módulo | Desarrollo de Interfaces
7. Extender la apariencia y
el comportamiento de
los controles en modo de
diseño
En el desarrollo de interfaces siempre podremos ampliar el entorno en modo diseño generan-
do uno personalizado y propio. De esta manera podremos cambiar el aspecto y funcionalidad
de cualquier control que estemos diseñando.

Uno de los conceptos básicos para el desarrollo de software en general es el proceso de reutili-
zación. En este caso concreto, se pueden manejar tanto la apariencia como el comportamien-
to basándonos en componentes ya existentes y extendiéndolos o adaptándolos a nuestras ne-
cesidades concretas.

Para cualquier interfaz podremos realizar los siguientes cuatro pasos para extender los con-
troles:

1. Crear nuevas instancias de manera personalizada.

2. Representar visualmente las propiedades Margin y Padding del control que queramos

65
diseñar.

3. Uso del ratón y el teclado para asignar el valor deseado a la propiedad Anchor.

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA


4. Asociar una etiqueta inteligente con el valor deseado de la propiedad Anchor.

Estos pasos se pueden realizar direc-


tamente sobre la paleta de herra-
mientas y propiedades de los ele-
mentos en cualquier IDE.

En el caso concreto de NetBeans,


se muestra a continuación cómo se
puede gestionar la propiedad Anchor
de un elemento de tipo Button:

▶ Gestión de la propiedad Anchor de un


elemento de tipo Button.
Módulo | Desarrollo de Interfaces

8. Integrar controles existentes


en nuestros componentes
En todo momento podremos añadir componentes ya creados previamente para desarrollar
nuestras interfaces.

En NetBeans podríamos hacerlo de dos formas principalmente.

▶ Si el componente está desarrollado por nosotros, se puede usar la función “Limpiar y


construir” para así generar el fichero .jar con el componente.

Desde el inspector de proyectos lo podremos añadir con la opción “Herramientas > Aña-
dir a la paleta”.

▶ Si el componente pertenece a otro programador, podremos añadir el .jar correspon-


diente a nuestra paleta desde su Administrador.

Integrar nuevos controles a nuestros componentes mejorará enormemente el desarrollo y fun-


cionalidad de nuestras interfaces, así como mejorar el tiempo necesario para desarrollarlas.

Gracias al concepto de introspección, cuando integramos un nuevo control NetBeans podrá


66

detectar las propiedades y métodos de los componentes y podremos conocerlos para mejorar
nuestros desarrollos.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
9. Herramientas para
desarrollo de componentes
visuales
Actualmente existen muchas herramientas que nos permitirán desarrollar componentes visua-
les como botones o iconos. A continuación destacamos las siguientes.

GIMP

Herramienta de código libre, gratuita, muy versátil y sencilla de usar.

Se utiliza principalmente para editar imágenes en diferentes formatos como mapa de bits, di-
bujos y fotografías.

Ampliamente utilizado gracias a su compatibilidad con prácticamente todos los sistemas ope-
rativos existentes en el mercado.

Adobe Photoshop

67
Conocida herramienta de edición de gráficos desarrollada por Adobe.

Aunque se suele usar principalmente para el retoque fotográfico, también permite realizar di-

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA


versos efectos sobre imágenes, gráficos, etc.

Glade

Glade se puede usar para desarrollar de manera fácil y rápida interfaces de usuario.

Hay que tener en cuenta que las interfaces en Glade se guardan en XML y pueden ser consumi-
das por diversos lenguajes de programación como C, Java, Perl, Python y otros.

Microsoft Blend

Microsoft Blend para Visual Studio (anteriormente conocida como Microsoft Expression Blend),
desarrollada y comercializada por Microsoft, es una herramienta para el diseño de interfaces de
usuario que combinan las características de aplicaciones web y de escritorio.

Es una interfaz WYSIWYG interactiva específicamente creada para el diseño de interfaces basa-
das en XAML. Está enfocada en aplicaciones de Windows Presentation Foundation, Silverlight y
UWP.

Las interfaces WYSIWYG (del inglés What You See Is What You Get) son procesadores de texto
que permiten gestionar el contenido de un texto, por ejemplo, en formato HTML, y ver el resul-
tado final en tiempo real.
Módulo | Desarrollo de Interfaces

Nota:

Puedes consultar más información sobre GIMP, Adobe Photoshop, Glade y Microsoft Blend en
los siguientes enlaces:

https://www.gimp.org/

https://www.adobe.com/es/products/photoshop.html

https://glade.gnome.org/

https://docs.microsoft.com/en-us/visualstudio/xaml-tools/creating-a-ui-by-using-blend-for-
visual-studio?view=vs-2022
68
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
10. Empaquetado
de componentes
Al crear componentes en NetBeans, una vez terminados podremos empaquetarlos para su
posterior distribución y uso por parte de otros desarrolladores e interfaces.

Para ello, se necesitará generar un archivo .jar con todas las clases que forman parte del com-
ponente, como pueden ser:

▶ El propio componente.

▶ Objetos de tipo BeanInfo.

▶ Objetos de tipo Customizer.

▶ Clases necesarias o útiles para el correcto funcionamiento del componente.

Todo paquete jar deberá contener un fichero de manifiesto con extensión .mf que permite
conocer la descripción de su contenido.

Ejemplo

69
Un ejemplo de manifiesto podría ser el siguiente:

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA


Manifest-Version: 1.0
Name: prueba/Componente.class
Java-Bean: True
Name: prueba/ComponenteBeanInfo.class
Java-Bean: False
Name: prueba/ClaseExtra.class
Java-Bean: False
Name: prueba/Imagen.jpg
Java-Bean: False

Para generar el fichero .jar se pueden usar dos métodos:

▶ Con la opción “Limpiar y construir” del proyecto de NetBeans.

▶ Mediante el siguiente comando:

jar cfm Componente.jar manifest.mf Componente.class ComponenteBeanInfo.class


ClaseExtra.class Imagen.png prueba.jar
www.cursosccc.com

También podría gustarte