Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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
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.
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
▶ Compartir con otros desarrolladores del mismo proyecto que necesiten herramientas
similares.
▶ 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.
▶ 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 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.
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.
57
Las propiedades simples representan un único valor. Por ejemplo, un número, un valor boo-
leano o un texto.
Ejemplo
Imaginemos que un componente de software tiene una propiedad llamada precio de tipo real
y que puede ser leída o escrita.
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.
Ejemplo
A continuación vemos ejemplos de cómo podemos acceder y establecer valores a estas propie-
dades indexadas:
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.
todo vetoableChange().
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
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.
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.
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.
▶ 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
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.
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.
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.
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.
Debemos tener en cuenta los siguientes requisitos para poder usar la interfaz serializable:
▶ Todos los campos serán serializados menos static y transient. Para aquellos campos que
no queramos serializar usaremos el modificador transient.
import java.io.Serializable;
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.
▶ Las clases Externalizable, al igual que Serializable, deben tener también un constructor
sin argumentos.
Módulo | Desarrollo de Interfaces
Ejemplo
import java.io;
}
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:
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.
Desde el inspector de proyectos lo podremos añadir con la opción “Herramientas > Aña-
dir a la paleta”.
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
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-
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.
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: