DESARROLLO DE INTERFACES

TÉCNICO EN DESARROLLO DE APLICACIONES

MULTIPLATAFORMA

Confección de
informes I

08
 / 1. Introducción y contextualización práctica 3

/ 2. Informes incrustados y no incrustados en la aplicación 4

/ 3. Herramientas gráficas integradas en el IDE 4

3.1. Descargar e instalar iReport + JasperReports desde Eclipse 5
3.2. Creación de un informe. Origen de datos 6
3.3. Análisis de la herramienta. Estructura de la aplicación 7

/ 4. Estructura general y secciones de un informe 8

/ 5. Formatos de salida de un informe 9

/ 6. Variables y valores calculados en un informe 10

6.1. Uso de variables en un informe 11

/ 7. Caso práctico 1: “Creación del primer informe” 12

/ 8. Caso práctico 2: “Formatos de salida de un informe” 13

/ 9. Resumen y resolución del caso práctico de la unidad 13

/ 10. Bibliografía 14

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
 Establecer la estructura de los informes.

Generar informes básicos a partir de una fuente de datos mediante asistentes.

Incluir valores calculados, recuentos y totales.

Incluir gráficos generados a partir de los datos.

Modificar el código correspondiente a los informes.

/ 1. Introducción y contextualización práctica

Los informes obtenidos de una aplicación permiten extraer y analizar diferentes tipos de información, desde datos
relativos al uso de esta hasta otro tipo de contenido que permiten analizar los datos tomados desde la aplicación en
su conexión a un origen de datos.

En este capítulo, nos vamos a centrar en una de las herramientas para la creación de reportes más utilizadas en la
actualidad, JasperReports + iReports, desde su descarga e instalación hasta su
puesta en funcionamiento. Esta herramienta pertenece a Jaspersoft y está
disponible desde los principales IDE (Eclipse y Netbeans).

La creación de informes permite adaptar la presentación de los datos finales

a múltiples tipos de escenarios, tanto en cuanto a las plantillas utilizadas
como a la forma de mostrar la información. El manejo de estas herramientas
vinculadas a entornos de desarrollo de programación es una herramienta
clave.

Escucha el siguiente audio donde planteamos la contextualización práctica

de este tema, encontrarás su resolución en el apartado Resumen y resolución Fig. 1. Utilización de una herramienta gráfica
del caso práctico. para generar un informe.

Audio intro. “¿Es necesaria la confección

de informes?”
https://bit.ly/3jDb2by
 TEMA 8. CONFECCIÓN DE INFORMES I
Desarrollo de interfaces /4

/ 2. Informes incrustados y no incrustados en la

aplicación
En primer lugar, es necesario definir en qué consiste un informe. Un informe es un documento que recopila y muestra
diferente tipo de información procedente de fuentes de datos a los usuarios en función de las consultas realizadas.

La creación de estos informes no es estática, sino que, a través de las herramientas existentes para la generación
de los mismos, será posible seleccionar entre múltiples elementos y plantillas de diseño que permiten crear los
documentos finales. La creación de informes no es trivial, resulta un elemento clave en muchos procesos, como los
que se muestran en la imagen.

Es posible diferenciar entre dos tipos de informes atendiendo a la forma en la que estos quedan vinculados con la
aplicación. Todo informe requiere de un origen de datos del que tomará la información necesaria para su construcción,
ahora bien, en función de si esto se hace desde la misma aplicación en la que se desarrolla el proyecto o en otra
externa, nos permite distinguir entre dos tipos de informes, incrustados y no incrustados:

• Informes incrustados. Este tipo de informe es el que se genera directamente desde la aplicación en la que el
proyecto que se está desarrollando. Podemos decir que son herramientas integradas en el propio IDE.

Cuando se produce la creación de un informe, de forma automática se genera una clase contenedora con
el mismo nombre que el informe. De esta manera, la interacción entre el proyecto y el informe se hace
directamente a nivel de clases.

• Informes no incrustados. Este tipo de informe es externo al proyecto

desarrollado, se ha creado en aplicaciones específicas para este fin,
pero externas al entorno de desarrollo del proyecto.

No obstante, es posible habilitar la interacción entre ambos, aunque

no se llegará a crear una clase contenedora del informe como sí
ocurre en el caso de los incrustados. Fig. 2. Procesos clave en la creación de informes.

/ 3. Herramientas gráficas integradas en el IDE

Las herramientas gráficas para la creación de informes permiten al usuario
realizar de forma visual el diseño de los informes que van a ser generados.
Algunas de las herramientas más importantes son iReport, JasperReport y
Eclipse Birt.

a. iReport + JasperReport

Se trata de la herramienta más utilizada para los desarrollos utilizando Java

en entornos como Eclipse o Netbeans. Podemos decir que JasperReports se
encarga de la encapsulación de informes en estos entornos, mientras que
iReport aporta la interfaz gráfica que permite un diseño mucho más rápido
y fácil de utilizar. Fig. 3. Logotipo JasperReports.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

b. Eclipse Birt

Eclipse Business Intelligence and Reporting Tools es una herramienta de código abierto que permite la creación de
informes de forma dinámica para entornos de inteligencia empresarial. Se utiliza, sobre todo, para el desarrollo de
aplicaciones en Java, tanto de escritorio como aplicaciones web. Toda la información relativa a esta aplicación se
encuentra disponible desde el sitio web oficial de Eclipse.

Fig. 4. Interfaz Eclipse Birt.

c. Crystal report

Esta herramienta de inteligencia empresarial se utiliza para crear informes de forma dinámica, sobre todo, en el
entorno de desarrollo Microsoft Visual Studio.

Audio 1. “Informes con Crystal reports”

https://bit.ly/352xpmM

3.1. Descargar e instalar iReport + JasperReports desde Eclipse

Desde Eclipse, es posible realizar la instalación y descarga de este plugin de forma rápida. En primer lugar, desde el
IDE de Eclipse vamos al menú Help y seleccionamos Eclipse MarketPlace.

A continuación, desde la ventana de búsqueda donde aparecen todos los plugins disponibles, buscamos Jasper y pulsamos
el botón Go. Nos aparecerá, entre las opciones disponibles, Jaspersort Studio y basta con pulsar el botón Install.

Fig. 5. Eclipse Marketplace y Jaspersort Studio.

Finalmente, aceptamos las condiciones y dará comienzo el proceso de instalación. Para que la instalación se complete,
será necesario reiniciar Eclipse.
 TEMA 8. CONFECCIÓN DE INFORMES I
Desarrollo de interfaces /6

Para comprobar que la instalación ha tenido éxito, se accede al menú Open Perspective, y como se puede ver en la
siguiente imagen, ya tendríamos disponible el plugin para la generación de informes iReport.

Fig. 6. Interfaz con descarga de JasperReport.

Otra opción para la instalación consiste en descargar el paquete instalable desde la página de Jaspersort Community.
Actualmente, está disponible desde el enlace:

https://community.jaspersoft.com/project/ireport-designer/releases

A continuación, seleccionamos la última versión y comienza la descarga de forma automática en nuestro equipo.

3.2. Creación de un informe. Origen de datos

Para la creación de informes, es importante tener en cuenta el origen de datos, es decir, de dónde se extrae la
información que se va a mostrar en un informe. Se dice que para la creación de estos iReports se pueden tener
activos con uno o varios orígenes de datos (CSV, hoja de cálculo, XML…).

Para ilustrar la creación de un informe, en este capítulo, se utilizará el que viene configurado por defecto, Sample Db.
Al pulsar sobre el botón Test, si todo está instalado correctamente, devolverá un mensaje de éxito.

Fig. 7. Ventana Data Adapter.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

Hasta aquí ya se habría configurado todo el entorno para la creación de informes, ahora, para crearlos, basta con
acceder al menú File, a continuación, new File y JasperReport.

Fig. 8. Plantillas JasperReport.

Existen plantillas completamente en blanco para la generación de informes y otros documentos. En cada caso, se
seleccionará el que más se adecúa al resultado que se desea conseguir.

Tras seleccionar el formato deseado, se pulsa el botón Finish. Finalmente, se solicita seleccionar sobre cuál de los
proyectos contenidos en el IDE se va a realizar el informe.

Vídeo 1. “Primeros pasos con iReport”

https://bit.ly/3lNY10P

3.3. Análisis de la herramienta. Estructura de la aplicación

La herramienta se encuentra dividida en varias secciones claramente diferencias: el explorador de informes (1), la
zona de diseño (2), la paleta de elementos (3) y la zona de propiedades (4).

Fig. 9. Zonas interfaz JasperReport.

 TEMA 8. CONFECCIÓN DE INFORMES I
Desarrollo de interfaces /8

• Explorador de informes: Esta zona está dividida por Repository Explorer y Project Explorer. En la segunda, se
muestra el resumen habitual de Eclipse en el que se muestran los proyectos y todos los ficheros que pertenecen
a cada uno, incluyendo los generados que la herramienta iReport (presentan una extensión .jrxml). Desde la
pestaña de Repository Explorer, se accede a las conexiones a orígenes de datos.

• Zona de diseño: Al igual que ocurría con el diseño de interfaces utilizando JSwing, esta zona es el lienzo sobre
el que se va colocar y diseñar todo lo relativo al aspecto visual del informe. En la parte inferior, se observan
tres pestañas: Design (utilizada para realizar el diseño), Source (donde se muestra el código generado) y
Preview (en la que se muestran una visión preliminar del diseño, siempre que no se produzcan errores durante
el proceso de compilación).

• Paleta de elementos: En esta sección, se muestran todos los elementos que se pueden utilizar para el diseño
de un informe. Para colocar un elemento, se pulsa sobre él con el ratón y, a continuación, se coloca en la zona
de diseño.

• Zona de propiedades: Cuando se ha seleccionado y colocado un elemento de la paleta sobre la vista del
informe, pulsando en cada uno de estos elementos aparece un nuevo menú, Properties, donde se recogen
todas las propiedades que admiten personalización en cada uno de los elementos.

• Zona de errores: En la zona inferior de la interfaz, aparecen los posibles errores de compilación que se deberán
resolver. Recordemos que estos informes se encapsulan como una clase, por lo que cualquier llamamiento o
instanciación de un objeto o variable debe realizarse correctamente.

/ 4. Estructura general y secciones de un informe

Una de las partes más importantes es la zona de diseño en la que se muestra la plantilla para el informe y está
formada por diferentes bloques o bandas, sobre las cuales se podrán incluir los elementos de diseño. Podemos
distinguir los siguientes elementos:

• Title: En esta sección, se coloca el nombre asignado al informe. Debe ser claro y conciso para que resuma en
pocas palabras el tipo de datos que se recogen en el informe.

• Page Header: Esta zona se sitúa justo debajo del título del informe y, en ella, aparecen datos generales como
la fecha de generación del mismo.

• Column Header: Es habitual que los informes se generen utilizando columnas bajo las cuales se organiza la
información a mostrar en el informe. En esta sección, se colocan las etiquetas identificadoras de cada una de
las columnas.

• Details: Podemos decir que esta es la sección central del informe en

la que se detallan todos los parámetros y valores que se definen en él.
En esta zona, se ubican los datos completos.

• Column Footer: Los pies de columnas se utilizan para expresar datos

relacionados con el contenido de cada columna.

• Page Footer: Los pies de páginas se colocan en la parte inferior, y al

igual que en el encabezado aparecen datos generales, aquí es habitual
colocar el número de página.

• Summary: En esta última sección, se puede colocar los valores

calculados, recuentos y demás operaciones realizadas sobre los datos.
Si no se colocan aquí, el valor no resultante no se muestra. Fig. 10. Estructura plantilla en blanco.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

/ 5. Formatos de salida de un informe

La herramienta iReport permite seleccionar entre múltiples opciones de
formatos de salida para mostrar y generar el informe diseñado con los datos
y los cálculos escogidos.

La extensa paleta de formatos que se incluyen en la mayoría de las

herramientas para la creación de informes supone una de las principales
ventajas de estas aplicaciones, puesto que será posible adaptar el formato
de salida a la finalidad que se le va a dar al informe. Hay que tener en cuenta
que, en muchas ocasiones, no solo es importante qué se muestra, sino Fig. 11. Formatos de salida más utilizados de
también cómo se muestra. la herramienta JasperReport.

Para visualizar el informe, desde Eclipse, en la pestaña Preview, es posible acceder a una vista preliminar del informe
generado como si de una imagen se tratara.

Si lo que se desea es ejecutar y guardar el informe, es decir, obtener una versión “definitiva” del mismo, en la parte
superior, aparece un icono en forma de disquete que nos permitirá exportar el informe en cualquiera de los formatos
de salida permitidos en la aplicación.

Fig. 12. Salidas posible JasperReport.

Por ejemplo, si se desea enviar por correo electrónico, será aconsejable utilizar un formato como PDF, ya que permite
su descarga y visualización de una forma eficiente.

Otro de los formatos de salida bastante utilizados son los ficheros CSV, puesto que permiten almacenar gran cantidad
de información que habitualmente puede ser procesada por aplicaciones de hojas de cálculo como Excel o Numbers.

Vídeo 2. Formatos de salida. HTML, XLS

o PDF
https://bit.ly/32Tu1Ip
 TEMA 8. CONFECCIÓN DE INFORMES I
Desarrollo de interfaces / 10

/ 6. Variables y valores calculados en un informe

El uso de las variables es clave para el cálculo de valores y su posterior inclusión en el informe. Es posible diferenciar
dos tipos de variables:

• Variables de usuario: Este primer tipo de variables es el que puede crear el usuario. Normalmente, corresponde
con el nombre de los campos del origen de datos vinculado al informe.

• Variables predefinidas: Estas variables aparecen por defecto en la herramienta, es decir, siempre van a estar
presentes y modelan elementos habituales en la generación de cualquier informe.

NOMBRE DESCRIPCIÓN

Objeto de clase Integer, recoge el

PAGE_NUMBER
número de páginas del informe.

Devuelve el número de columnas

COLUMN_NUMBER
del informe (Integer).

Devuelve el número de registros para

REPORT_COUNT
una determinada consulta (Integer).

Devuelve el número de registros

PAGE_COUNT
mostrados en cada página (Integer).

Tabla 1. Variables predefinidas.

También, es habitual el uso de determinados valores calculados que resumen los datos mostrados en un informe.
Podemos decir que se agrupan en función del criterio definido. Algunas de las operaciones más comunes son:

• Numeración de líneas: Se utiliza para numerar las líneas contenidas en un informe, habitualmente, en la zona
de Details. Es necesario crear una nueva variable que irá incrementando su valor.

• Recuentos y totales: Este tipo de operaciones se utilizan sobre los valores contenidos en una columna, en
concreto, se aplica la operación suma sobre todos los valores de una determinada columna.

Fig. 13. Usuarias probando la interfaz.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

6.1. Uso de variables en un informe

Para obtener valores calculados, es necesario utilizar variables. Para ello, en primer lugar, desde la zona del explorador
donde se muestra el resumen de todo el proyecto, seleccionamos y llevamos a la zona de diseño los campos que se
van a mostrar en el informe y sobre los que se va a realizar la operación deseada (Figura 13).

Fig. 14. Menú variables.

Como se puede ver en la siguiente imagen, cuando se sitúan las variables en la zona de diseño (sobre Details), se
crea de forma automática en Column Header una etiqueta que indica lo que se muestra en cada columna.

Fig. 15. Ejemplo de uso de variables en varias zonas de JasperReport.

Para mostrar el valor resultante de las operaciones realizadas, estas se deben colocar en la zona de Summary. En
concreto, de la misma forma que se han colocado las variables en la zona de Details, también se ubicarán en la de
Summary. A continuación, al hacer doble clic sobre el nuevo elemento situado en la zona de diseño, se abre un
cuadro que permite seleccionar el tipo de operación a realizar.
 TEMA 8. CONFECCIÓN DE INFORMES I
Desarrollo de interfaces / 12

/ 7. Caso práctico 1: “Creación del primer informe”

Planteamiento: Se pide generar un nuevo informe utilizando una plantilla de diseño en blanco y, a continuación, se
va a replicar el diseño para que la salida sea como la siguiente imagen. Se emplearán elementos básicos de la paleta.
Se trata de practicar con las diferentes opciones de diseño ofrecidas por la herramienta JasperReport.

Fig. 16. Informe de salida del caso práctico 1.

Nudo:En primer lugar, selecciona una plantilla de diseño y, seguidamente, modifica, elimina y añade los elementos
que consideres oportunos para obtener una vista final como la mostrada en la imagen anterior. Las imágenes y las
barras se han colocado utilizando las opciones de Image y Rectangle.

Para colocar el número de página, se ha utilizado una variable llamada Page_Number que aparece en la paleta de
elementos en Composite Elements. Para concatenar cualquier palabra a una variable, basta con hacer doble clic
sobre esta y añadir la cadena de texto en el editor de expresiones que aparece en la parte superior de la nueva
ventana.

Desenlace: La vista de diseño correspondiente a la Figura 15 sería la que se muestra a continuación:

Fig. 17. Diseño del caso práctico 1.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

/ 8. Caso práctico 2: “Formatos de salida de un informe”

Planteamiento: En este caso, se realiza un diseño como el que sigue en el que se muestran todos los datos de
productos (nombre y precio) de la tabla PRODUCT contenida en la base de datos Sample Db.

Se ha de guardar el fichero del informe en varios formatos que cumplan las

siguientes especificaciones. Escoge y justifica el formato más adecuado para
cada uno de los casos.

• Informe mostrado en línea al pulsar sobre un enlace en una página web.

• Se desea trabajar con los datos descargados utilizando herramientas

de cálculo como Excel o Number.

• El fichero descargado se va a enviar como adjunto en un correo electrónico

a los miembros de una junta directiva y este no se pude modificar. Fig. 18. Vista previa del informe.

Nudo: JasperReport permite guardar los informes en múltiples formatos. Desde la pestaña Preview, pulsamos sobre
la fecha que hay justo al lado del “disquete” y seleccionamos el formato de salida que se ajusta a los requisitos de
diseño; a continuación, se escoge la ruta donde se va a guardar el fichero.

Desenlace: A continuación, se muestran los formatos escogidos para cada uno de los casos expuestos:

• Informe mostrado en línea al pulsar sobre un enlace en una página web. En este caso, el formato escogido
será HTML el cual permite descargar el informe con todas las etiquetas necesarias de creación de un sitio web.

• Se desea trabajar con los datos descargados utilizando herramientas de cálculo como Excel o Number. Para
esta segunda opción, sería posible escoger como formato CSV o XLS, y si es conocido que se va a utilizar con
herramientas tales como Excel, podrían tomarse directamente XLS.

• El fichero descargado se va a enviar como adjunto en un correo electrónico a los miembros de una junta
directiva y este no se pude modificar. Finalmente, en este caso, podríamos escoger Docx o PDF, pero dado
que se especifica que el fichero no se pueda modificar, se seleccionará PDF.

/ 9. Resumen y resolución del caso práctico de la unidad

Como se ha visto en este tema, el diseño y creación de informes para el análisis de los datos recogidos en una
aplicación resulta un proceso sencillo de implementar, pero que requiere de cierta práctica para manejar las
aplicaciones de forma adecuada.

Es importante diferenciar entre aquellos informes que aparecen directamente vinculados en el mismo entorno de
trabajo en el que se ha desarrollado un proyecto, hablamos de los informes incrustados, de aquellos que se generan
en aplicaciones externas. Existen muchas herramientas que permiten realizar este tipo de informes, algunas de las
comunes son: Crystal report, Eclipse Birt o JasperReport.

En este capítulo, hemos abordado el proceso de descarga, instalación e inicio de JasperReport, una herramienta
que permite la creación de informes muy completos para aplicaciones creadas en Eclipse, aunque también está
disponible para otros IDE, como Netbeans.

Algunos de los elementos claves utilizados para la inclusión de datos obtenidos de la conexión a bases de datos en
los informes son las variables, parámetros y campos. La combinación de todos esos permiten definir qué tipo de
información va a estar contenida e incluso realizar diferentes operaciones de cálculo sobre estas.
 TEMA 8. CONFECCIÓN DE INFORMES I
Desarrollo de interfaces / 14

Resolución del caso práctico inicial

Una de las funciones habituales de un sistema de información es recoger datos. Estos datos, una vez procesados, se
deben poder comunicar de una manera amigable al usuario.

Dependiendo del tipo de usuario, esta comunicación puede ser bastante diferente. Un usuario técnico puede
necesitar datos muy concretos, mientras que un ejecutivo agradecerá un resumen, seguramente acompañado de
un gráfico.

Las tablas no presentan una forma resumida de los datos de una colección de registros, por lo que, si no queremos
tener que realizar cálculos para averiguar estos detalles, se deben crear informes para obtener este tipo de
información de la base de datos.

Por tanto, los informes son la herramienta que nos permite dar forma al resultado de nuestras consultas.

/ 10. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces (1.a ed.). Madrid, España: Síntesis.
DESARROLLO DE INTERFACES
TÉCNICO EN DESARROLLO DE APLICACIONES
MULTIPLATAFORMA

Usabilidad II: Pautas

de diseño

07
 / 1. Introducción y contextualización práctica 3

/ 2. Pautas de diseño de la estructura de la interfaz de usuario:

Atajos de teclado 4

/ 3. Pautas de diseño de la estructura de la interfaz de usuario: Menús 5

/ 4. Pautas de diseño de la estructura de la interfaz de usuario:

Ventanas y cuadros de diálogo 6

/ 5. Pautas de diseño del aspecto del interfaz de usuario: Iconos y colores 7

/ 6. Pautas de diseño del aspecto del interfaz de usuario:

Fuentes y distribución de los elementos 8

/ 7. Pautas de diseño de elementos interactivos del interfaz de usuario 9

/ 8. Pautas de diseño de la presentación de datos 9

/ 9. Pautas de diseño de la secuencia de control de la aplicación 10

/ 10. Pautas de diseño para el aseguramiento de la información 11

/ 11. Pautas de diseño para aplicaciones multimedia 12

/ 12. Caso práctico 1: “Interfaz para reservas” 13

/ 13. Caso práctico 2: “Interfaz Microsoft Bob” 14

/ 14. Resumen y resolución del caso práctico de la unidad 15

/ 15. Bibliografía 16

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
 Crear menús que se ajustan a los estándares.

Crear menús contextuales cuya estructura y contenido sigan los estándares

establecidos.

Distribuir las acciones en menús, barras de herramientas, botones de comando,

entre otros, siguiendo un criterio coherente.

Distribuir adecuadamente los controles en la interfaz de usuario.

Utilizar el tipo de control más apropiado en cada caso.

Diseñar el aspecto de la interfaz de usuario (colores y fuentes, entre otros)

atendiendo a su legibilidad.

Verificar que los mensajes generados por la aplicación son adecuados en

extensión y claridad.

/ 1. Introducción y contextualización práctica

El concepto de usabilidad, del inglés “Usability”, hace referencia a la facilidad o dificultad de uso de un sitio web, de
aplicaciones y herramientas, o de cualquier otro entorno software que implique la interacción con un usuario. Como
enunciaba Jakob Nielsen, “Si no lo haces fácil, los usuarios se marcharán de tu web”, o abandonarán la aplicación en
busca de otra que resulte más sencilla de utilizar.

En el desarrollo de interfaces, la consecución de la usabilidad queda definida por un conjunto de pautas relativas a
diferentes aspectos del diseño, atendiendo, sobre todo, a la forma de interacción entre aplicación y usuario.

En este tema, se analizará en detalle en qué consiste la usabilidad y cómo

queda relacionada con la experiencia del usuario, señalando las principales
características que definen la creación de estos sistemas interactivos.

Escucha el siguiente audio donde planteamos la contextualización

práctica de este tema, encontrarás su resolución en el apartado Resumen
y resolución del caso práctico. Fig. 1. Interfaz poco usable e interfaz mejorada.

Audio intro. La usabilidad en la interfaz

de una entidad bancaria
https://bit.ly/3boIsI9
 TEMA 7. USABILIDAD II: PAUTAS DE DISEÑO
Desarrollo de interfaces /4

/ 2. Pautas de diseño de la estructura de la interfaz de

usuario: Atajos de teclado
Una de las principales pautas de diseño que se deben tener en cuenta son las relativas al diseño de la estructura de
la interfaz, esto hace referencia a la disposición de las ventanas, menús y cuadros de diálogos que son mostrados al
usuario del sitio. En concreto, se pondrá el foco de atención en:

• Punto focal. El punto de atención debe situarse de forma estratégica para no impedir al usuario su
interoperabilidad con la interfaz.

• Estructura y consistencia de ventanas. Esta característica manifiesta la necesidad de mantener cierta

consistencia en la estructura de diseño de las ventanas, siendo aconsejable que aquellas que se destinen
al mismo fin o similar sea parecidas. Incluso es deseable que la consistencia de la estructura se mantenga
a lo largo de toda la aplicación. Por ejemplo, si el menú de opciones se encuentra en la parte superior, será
aconsejable que se mantenga ahí durante todo el diseño, y no que este cambie de sitio en cada nueva ventana.

• Relación entre elementos. Esta relación entre elementos debe construirse de forma coherente.

• Legibilidad y flujo entre elementos. El diseño de la interfaz debe construirse de forma legible para el usuario,
los elementos se situarán de tal forma que resulten fáciles de localizar y de realizar su lectura.

• Atajos de teclado

Los atajos de teclado permiten reducir el tiempo de acceso y puesta en ejecución de determinadas acciones.
Habitualmente, los atajos se suelen asociara a aquellas tareas que se utilizan de forma más frecuente.

Los eventos realizados con el ratón suelen ser sustituidos por ciertas combinaciones de teclas que agilizan la acción.
Por ejemplo, es común que para copiar y pegar un texto se acuda a los conocidos atajos de teclado, Ctrl+C, y para
pegarlo, Ctrl+V (estas combinaciones dependerán del sistema operativo). ¿Por qué se utilizan estos atajos? Porque
en acciones muy comunes como estas, resultan más ágil hacerlo así que pulsando sobre el menú correspondiente,
buscar la opción de copiar y luego repetir el proceso para realizar el pegado.

Fig. 2. Atajos de teclado más comunes.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

/ 3. Pautas de diseño de la estructura de la interfaz de

usuario: Menús
El correcto diseño de un menú debe permitir, fundamentalmente, la correcta navegación dentro de una aplicación
mostrando todas las condiciones posibles y permitiendo al usuario seleccionar las diferentes acciones mostradas en
este menú. Para el diseño de estos, los hitos principales son:

• Se debe mostrar el título del menú.

• Se muestran las opciones y la acción asociada.

El uso de menús supone múltiples ventajas como son la posibilidad de una navegación rápida e intuitiva del usuario
por toda la aplicación; además, estos permiten mantener una vista despejada de la aplicación al mostrarse y recogerse
a voluntad del usuario.

De forma habitual, los menús aparecen siempre en la misma zona de la aplicación, usualmente en la parte superior de
las aplicaciones. Cuando se pulsa sobre ellos con el ratón o utilizando la combinación de teclas oportunas, es posible
navegar sobre cada uno de los títulos que definen cada menú y los desplegables que se abren.

En este tipo de menús, es habitual encontrar la apertura de combinaciones en cascada, es decir, submenús recogidos
dentro de los menús centrales y que agrupan más acciones.

También, es posible distinguir entre menús contextuales o emergentes, los cuales aparecen normalmente al
seleccionar algún objeto y pulsar sobre ellos utilizando el botón secundario del ratón. El diseño de este tipo de
menús debe tener en cuenta las siguientes premisas:

• No se aconseja el uso de menús en cascada.

• Tampoco es aconsejable que el número de acciones recogidas en este

tipo de menús sea demasiado grande. Es habitual encontrar entre 7
y 10 elementos.

• Las tareas recogidas en estos menús deberán aparecer también en Fig. 3. Diagrama de menús sencillos e
otro sitio, puesto que puede que el acceso a los mismos no sea del intuitivos vs menús con demasiados elementos
todo intuitivo para todos los usuarios de la aplicación. y desordenados.

Vídeo 1. Ejemplos de interfaces con

buenas pautas de diseño
https://bit.ly/31Ws3ra
 TEMA 7. USABILIDAD II: PAUTAS DE DISEÑO
Desarrollo de interfaces /6

/ 4. Pautas de diseño de la estructura de la interfaz de

usuario: Ventanas y cuadros de diálogo
Como se vio en temas anteriores, la creación de ventanas supone un aspecto clave en el desarrollo de cualquier
aplicación, ahora bien, el diseño de estas debe estar correctamente escogido y desarrollado, así como el número de
ventanas totales o el sistema de apertura y cierre de las mismas.

Los usuarios deben controlar diferentes aspectos de ellas: poder abrirlas, cerrarlas, modificar su tamaño… y si esto
no es posible, debe existir una justificación lógica en su diseño.

Fig. 4. Interfaz con múltiples ventanas e interfaz simplificada.

La selección de un mal diseño donde se despliegan ventanas constantemente y no se cierran puede disminuir la
usabilidad de la aplicación, ya que devolverán una interfaz desordenada que complicará la navegación en la aplicación.

Fig. 5. Cuadro de diálogo claro y diálogos sin posibilidad de solución.

Otro de los más importantes bloques de diseño que constituyen el eje central de cualquier aplicación son los cuadros
de diálogo que permiten la comunicación activa entre una interfaz y el usuario, puesto que a través de cajas de texto
emergentes se pueden mostrar mensajes importantes del sistema sobre los que el usuario puede realizar pequeñas
acciones como respuesta al mensaje.

En cuanto a las pautas de diseño relativas a estos elementos, se ha de poner especial énfasis en la terminología
utilizada en los mensajes, pues estos han de ser activos y positivos, y se deben adaptar a las posibles variantes
culturales en las que se despliega la aplicación. Se aconseja que los mensajes describan claramente el mensaje,
evitando dar por sentada la información.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

/ 5. Pautas de diseño del aspecto del interfaz de

usuario: Iconos y colores
Las pautas de diseño relativas al aspecto de una interfaz de usuario se centran en elementos esenciales del diseño
más visual de una aplicación: los colores, el tipo de fuente, los iconos y la distribución de los elementos.

El diseño de todos estos elementos debe facilitar y mejorar la usabilidad de la aplicación. En muchos casos, una mala
elección de este tipo de componentes convierte una gran aplicación en un fracaso.

a. Iconos

Los iconos permiten asociar acciones a un determinado objeto que suele utilizarse como acceso directo a la acción
que representa, agilizando así la interacción con la propia aplicación.

Ahora bien, su diseño debe ser representativo de la acción que enlaza, pero, además, este diseño debe ser todo lo
sencillo posible, puesto que al mostrarlo sobre una pantalla de forma reducida, puede no verse de manera óptima.

b. Colores

La elección de una buena paleta de colores contribuye de forma decisiva en la experiencia de uso de cualquier
aplicación. Los colores se han de escoger de forma adecuada para la comunicación del mensaje que se desea
transmitir, por ejemplo, si se va a diseñar una aplicación que quiere transmitir un mensaje de calma, no será
demasiado aconsejable escoger una paleta de colores extravagantes que pueden transmitir el mensaje contrario.

Fig. 6. Ejemplos de psicología del color aplicados al diseño de interfaces.

Además, los colores pueden contribuir a destacar diferentes elementos de la aplicación, poniendo el foco en los más
importantes. De esta manera, se aumentará la eficiencia y velocidad de uso de la herramienta.

No se debe abusar del número de colores ni de un uso desmesurado del color, puesto que esto puede molestar al
usuario, creando incluso confusión a la hora de utilizar la aplicación.

Audio 1. Diferencia entre user

experience y user interface
https://bit.ly/34Z8l04
 TEMA 7. USABILIDAD II: PAUTAS DE DISEÑO
Desarrollo de interfaces /8

/ 6. Pautas de diseño del aspecto del interfaz de

usuario: Fuentes y distribución de los elementos
a. Fuentes

La tipografía consiste en el tipo o tipos de letras que se utilizarán en el diseño de una interfaz. El uso de fuentes
familiares mejora en gran medida la calidad de la lectura.

La selección de las fuentes debe basarse en criterios de legibilidad y que se ajusten de forma adecuada a la resolución
de la pantalla. En cuanto a los criterios de diseño, se destacan:

• Tamaño de la fuente. Este debe ser adecuado para la lectura y proporcional a la resolución de la pantalla.

• Color de la fuente. Si el texto es oscuro sobre fondo claro se facilita la lectura.

• Estilo. No es conveniente abusar de la negrita o el subrayado, ni estilos demasiados sobrecargados que puedan
dificultar la lectura del sitio.

Fig. 7. Interfaces con buena y mala tipografía.

b. Distribución de los elementos

Finalmente, la distribución de los elementos en las ventanas de la aplicación o en los cuadros de diálogos, entre
otros, también requiere de especial atención, puesto que con ella podemos provocar confusión en los usuarios o, por
el contrario, hacer más intuitiva su experiencia de uso. Algunas de las pautas recomendadas son:

• Evitar el uso de elementos y ventanas superpuestas.

• Disponer los elementos de manera que se facilite el seguimiento y lectura de los mismos. Por ejemplo, si se
va a seguir una secuencia de pasos, resultará más intuitivo hacerlo de izquierda a derecha y de arriba a abajo.

Fig. 8. Interfaces con buena y mala distribución de elementos.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

/ 7. Pautas de diseño de elementos interactivos del

interfaz de usuario
Los elementos interactivos son aquellos que permiten la comunicación activa entre interfaz y usuario. Estamos
hablando de componentes tales como: los checkBox, los menús desplegables que permiten seleccionar una opción,
los botones o los elementos de tipo radioButton, entre otros.

a. Cuadros de texto y etiquetas

Los cuadros de diálogo o ventanas que se utilizan para mostrar un mensaje

a través de etiquetas, también, pueden incorporar cajas en blanco que
permiten introducir algún dato. Las pautas de diseño relativas a estos
componentes para incrementar la legibilidad de los mismos son:

• Se debe añadir un texto explicativo que indique cómo se ha de

completar cada caja de texto.

• Se recomienda ajustar el tamaño de las cajas al de la ventana donde

son expuestos. Fig. 9. Interfaz con elementos interactivos.

b. Botones, checkBox o radioButton

Este tipo de elementos permiten escoger un valor o conjunto de estos y enviarlo a la aplicación para realizar las
acciones oportunas. Por lo tanto, en cuanto a su diseño, deben cumplir las siguientes pautas:

• Los títulos deben ser intuitivos.

• Las acciones codificadas en cada opción deben quedar suficientemente comprensibles para el usuario.

• Las opciones deben ser fácilmente distinguibles unas de otras y, por tanto, relativamente rápidas de escoger
y seleccionar.

El conjunto de esas pautas implica que el usuario no necesite investigar sobre la función de cada una de las opciones,
lo que ralentizaría el uso de la aplicación y disminuiría la satisfacción del usuario con respecto a la misma.

c. Menús desplegables

Este tipo de elementos también permiten escoger un valor o conjunto de estos y enviarlo a la aplicación para realizar
las acciones oportunas. Por lo tanto, en cuanto a su diseño, deben cumplir también ciertas pautas. Una de las más
importantes es que el número de elementos recogidos en este tipo de menús esté en torno a diez, de lo contrario,
el usuario se perderá entre las opciones.

/ 8. Pautas de diseño de la presentación de datos

El diseño de una interfaz incluye numerosos tipos de recursos que, junto con el resto de elementos funcionales
descritos, constituyen la apariencia global de la aplicación. Por lo tanto, hay que prestar la atención adecuada a la
presentación de todos los datos.
 TEMA 7. USABILIDAD II: PAUTAS DE DISEÑO
Desarrollo de interfaces / 10

a. Tablas

Las tablas suelen mostrar la información de una forma estructurada enfatizando los datos que en ella se recogen,
ahora bien, no se debe abusar del uso de este tipo de elementos, puesto que se correrá el riesgo de trivializarlas. En
cuanto a las pautas de diseño, debemos priorizar:

• Los datos deben quedan recogidos bajo unas etiquetas claras y concisas que no requieran de
explicaciones adicionales.

• Debe aparecer siempre el título de la tabla y su longitud no debe exceder las dos líneas de texto.

• Es aconsejable utilizar encabezados de fila o columna, según proceda, que resuman el contenido de la fila
o columna.

• El diseño debe mostrar la información de la forma más clara posible.

b. Gráficos

El uso de gráficos también debe hacerse de forma balanceada con respeto a la aplicación. Algunas de las pautas de
diseño para la selección de este tipo de elemento son:

• El tamaño debe adecuarse a las dimensiones de la pantalla.

• No se debe abusar del número de gráficos.

• Es aconsejable utilizar pocos, pero que aporten un valor añadido a la aplicación.

Fig. 10. Interfaz con excesivo uso de gráficos vs interfaz sencilla.

/ 9. Pautas de diseño de la secuencia de control de la

aplicación
La secuencia de control de la aplicación hace referencia al conjunto de acciones que se deben seguir para completar
un objetivo concreto, es decir, serán estas secuencias las que determinan el funcionamiento de la aplicación. El
diseño secuencial de acciones debe partir de lo general a lo particular.

Para realizar el diseño de estas secuencias, se necesitará desarrollar varios prototipos sobre el funcionamiento que se
pretende conseguir, tratando de encontrar el equilibro perfecto entre el número de pasos óptimos para completar la
acción, haciendo que estos sean lo suficientemente intuitivos para todo usuario desde su primera toma de contacto
con la aplicación.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

Las pautas de diseño que se aconsejan seguir para realizar el diseño de las secuencias de control son:

• Diseñar y establecer de forma clara el objetivo principal asociado a cada uno de los elementos de la interfaz.

• Establecer la consecución de cada objetivo con una secuencia de control válida.

• Mostrar y documentar, para el usuario, la secuencia establecida para que pueda implementarla sin problemas.

• En la medida de lo posible, utilizar la regla de los tres clic, lo que implica que para llegar a cualquier objetivo,
sean necesarios, como máximo, este número de selección de opciones. Si es muy superior, puede suponer una
pérdida de usabilidad para la aplicación.

Para ver esto de forma más clara, utilizaremos el siguiente ejemplo: si se

desea crear un nuevo documento con unas características determinadas,
en primer lugar, se deberá acudir a la opción del menú que se encarga de
las nuevas creaciones, a continuación, se selecciona el tipo de fichero y la
disposición o plantilla que se va a utilizar y, finalmente, se escoge la ubicación
y el nombre con el que se almacenará.

Todo esto supone una secuencia de acciones que tiene como objetivo final la
creación de un nuevo documento, y que se divide en varias acciones, desde
la más general hasta la más particular. Fig. 11. Diagrama de pautas de diseño.

Vídeo 2. Pautas de usabilidad en móviles

y tabletas
https://bit.ly/2Z4UPEq

/ 10. Pautas de diseño para el aseguramiento de la

información
El aseguramiento de la información aporta consistencia a la información que la aplicación va a manejar. Las
características claves de este aseguramiento implican:

• Integridad de la información.

• Disponibilidad de los datos en el momento en el que son requeridos.

• Confidencialidad de la información bajo el diseño de los procesos de

autenticación oportunos.

Además, el aseguramiento de la información no solo se centra en los datos

como tal, sino que está presente en los siguientes ámbitos:

• Datos

• Procesos

• Comportamiento Fig. 12. Diagrama de los ámbitos de

aseguramiento: datos, procesos, comportamiento
• Sistema de gestión de la empresa y sistema de gestión de la empresa.
 TEMA 7. USABILIDAD II: PAUTAS DE DISEÑO
Desarrollo de interfaces / 12

/ 11. Pautas de diseño para aplicaciones multimedia

Audio 2. La carga de elementos

multimedia
https://bit.ly/3gVSSAe

a. Imágenes

El uso de imágenes también debe hacerse de forma balanceada con respeto a la aplicación.

Es importante que presenten buena calidad, puesto que aportará a la aplicación un mayor grado de detalle, si se
escogen fotografías u otro tipo de diseños de mala calidad, puede disminuir el grado de satisfacción del usuario sobre
la aplicación.

PAUTAS PARA IMÁGENES

El tamaño debe ajustarse a las dimensiones de la pantalla.

No conviene abusar de las imágenes sin ningún fin.

Es aconsejable utilizar pocas, pero que aporten un valor añadido

a la aplicación, por ejemplo, utilizando diagramas de uso o
funcionamiento que ayuden al usuario a utilizar la herramienta.

Tabla 1. Pautas para imágenes.

Fig. 13. Interfaces con mal y buen uso de imágenes.

b. Animaciones

Las animaciones son pequeños vídeos compuestos por una breve secuencia de imágenes con movimiento que
se muestran al usuario. Es muy importante no abusar en su uso con este tipo de elementos, puesto que pueden
sobrecargar la aplicación sin aportar ningún valor, pudiendo incluso llegar a restarlo.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

c. Vídeos

Los vídeos son utilizados, sobre todo, para mostrar de forma visual todo tipo de acciones, procesos o productos,
entre otros.

PAUTAS PARA VÍDEOS

El tamaño debe ajustarse a las dimensiones y resolución de la pantalla.

No conviene abusar de los vídeos. En este caso, es

especialmente importante, puesto que pueden ralentizar
mucho el funcionamiento de la aplicación.

Añadir los elementos de control necesarios para que el usuario pueda

manejar la reproducción de un vídeo en función de sus necesidades.

Tabla 2. Pautas para vídeos.

/ 12. Caso práctico 1: “Interfaz para reservas”

Planteamiento: Para poder lograr una interfaz usable, es importante mantener un punto focal para captar la atención
del cliente. Las características que ha de tener la interfaz para conseguir una buena usabilidad se centrarán en una
buena legibilidad del texto, un buen uso de la gama de colores, imágenes de calidad y con significado, así como
menús breves y fáciles de localizar.

Nudo: En este ejercicio, se diseñará una interfaz usable para reservar mesa en un restaurante italiano. La ventana
constará de:

• Menú desplegable en la esquina superior izquierda.

• Gama cromática de colores que represente al restaurante.

• Texto con la dirección, correo electrónico y teléfono del establecimiento siempre visible.

• Tendrá que ser responsiva para que se adapte a móvil, teléfono y tablet.

Diseña la distribución que debería tener la interfaz para cumplir los requisitos propuestos.

Desenlace: La nueva interfaz propuesta será un modelo basado en la usabilidad como propósito principal, y para ello,
se ha decidido tomar decisiones de diseño relacionadas con:

• Utilizar un icono de tres rayas paralelas para establecer el menú de navegación, en lugar de utilizar palabras,
para que sea más visual.

• Usar una tipografía sencilla de tipo “Lora”, en lugar de otra más recargada como “DayDream”, para facilitar
la lectura.
 TEMA 7. USABILIDAD II: PAUTAS DE DISEÑO
Desarrollo de interfaces / 14

• La gama de colores corresponde a los de la bandera italiana y no se han utilizado colores estridentes o
en exceso.

• La imagen seleccionada tiene buena calidad para que pueda ser una interfaz responsiva en todos los
dispositivos y tiene un significado más allá de lo puramente decorativo.

Fig. 14. Diseño de una interfaz para reservar mesa en un restaurante italiano.

/ 13. Caso práctico 2: “Interfaz Microsoft Bob”

Planteamiento: A lo largo de los últimos años, han sido muchas las interfaces que han triunfado y aún siguen estando
entre nosotros gracias a su facilidad de uso y acogida entre el público (Gmail, Microsoft Word, YouTube…). Por otro
lado, existen grandes fracasos que puede que hayan sido olvidados, pero han marcado las líneas de crecimiento
e innovación de grandes compañías como Google, Microsoft o Apple para rediseñar y adaptar el formato de sus
interfaces a la nueva era.

Nudo: En este caso práctico, se plantea analizar la usabilidad de la interfaz Microsoft Bob que se lanzó para Windows
95 con el propósito de ser un programa de oficina con editor de texto, tutoriales, calendario… y que resultó siendo
un fracaso.

Este análisis nos permitirá entender por qué es necesario que la utilidad de una herramienta prevalezca frente a
la estética.

Desenlace: Esta interfaz consta de varios elementos que hacen de ella una aplicación poco usable:

• Realizar acciones sencillas puede conllevar a realizar más de tres clics.

• El ruido de fondo de los ladridos del perro, así como todos los sonidos que se reproducen al hacer clic sobre
cualquier elemento restan la atención del usuario respecto a la tarea que está realizando.

• Las opciones que se muestran en los menús son muy extensas.

• El apartado de ayuda es escaso y no resuelve gran parte de la problemática que pueda surgir al usuario.

• El consumo de recursos es muy alto para el tipo de ordenadores que estaban en el mercado, por lo que solían
ir muy lentos.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 15 MEDAC · Instituto Oficial de Formación Profesional

• Realiza preguntas constantemente sobre si el usuario está de acuerdo con la decisión tomada.

• Se prioriza la estética frente a la funcionalidad dando lugar a una interfaz poco usable.

Fig. 15. Interfaz de Microsoft Bob.

/ 14. Resumen y resolución del caso práctico de la

unidad
Como se ha visto en este tema, el desarrollo de interfaces gráficas requiere del conocimiento de un amplio conjunto
de pautas que permiten diseñar una interfaz para lograr la consecución de una correcta interacción con los usuarios.

La usabilidad nos permite diseñar cualquier tipo de aplicación en base a unas pautas que permiten establecer ciertos
controles en cuanto a la facilidad o dificultad de uso de un sitio web. En concreto, en el desarrollo de interfaces, la
consecución de la usabilidad queda definida por un conjunto de pautas relativas a diferentes aspectos del diseño, y
es un elemento clave. De nada servirá que la aplicación realice unas acciones muy complejas si los usuarios no son
capaces de utilizarlas.

Resolución del caso práctico inicial

La facilidad de interacción con una interfaz es clave para cualquier empresa o entidad financiera, como es el caso
propuesto. Si el acceso a la información y la realización de operaciones es lo más fácil posible, se evitarán errores y el
usuario estará dispuesto a volver a utilizar esta interfaz.

Para que al usuario le sea lo más familiar posible la interfaz, es importante lograr mantener el punto focal, la
consistencia entre ventanas, una relación entre elementos y una buena legibilidad.

En el caso de que todas las acciones solo se puedan realizar desde la pantalla táctil, estamos limitando la usabilidad
del cajero, porque algunas acciones se llevarán a cabo en un menor tiempo si se dispone de botones con las tareas
más frecuentes.

El menú es recomendable mantenerlo en la parte de arriba de la interfaz, en el lado izquierdo, para mantener una
coherencia respecto a la navegación y no desorientar al usuario. Además, si se muestran las doce opciones, sería un
menú demasiado extenso, por lo que sería recomendable diseñar dos menús con un máximo de seis opciones cada
uno: operaciones de consulta (movimientos, cargos, domiciliaciones…) y tipos de transacciones (transferencias,
cargar móvil, cargar tarjeta, pagar recibos…).

Es conveniente que las ventanas se superpongan unas a otras y se pueda volver fácilmente a la acción anterior con un
botón representado con una fecha hacia la izquierda. Si se implementara el modelo sugerido por la entidad bancaria,
se estaría reduciendo la legibilidad de la operación y reduciendo la usabilidad de la interfaz.
 TEMA 7. USABILIDAD II: PAUTAS DE DISEÑO
Desarrollo de interfaces / 16

Por último, los errores deben transmitirse en un lenguaje positivo, explicando qué ha pasado y por qué. Además, se
debe mostrar una alternativa o posible solución al cliente de manera que no se sienta culpable de haber realizado
mal alguna tarea y evitando la frustración que eso pueda conllevar.

/ 15. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces (1.a ed.). Madrid, España: Síntesis.
DESARROLLO DE INTERFACES
TÉCNICO EN DESARROLLO DE APLICACIONES
MULTIPLATAFORMA

Usabilidad I: concepto
y normativa

06
 / 1. Introducción y contextualización práctica 3

/ 2. Concepto de usabilidad 4
2.1. Experiencia del usuario 4

/ 3. Normativa 5
3.1. ISO 5
3.2. Normas y estándares de usabilidad. ISO 9241 6

/ 4. Medidas de usabilidad en aplicaciones: satisfacción 7

4.1. Satisfacción 8

/ 5. Medidas de usabilidad en aplicaciones: efectividad y eficiencia 8

5.1. Efectividad 8
5.2. Eficiencia 8

/ 6. Diseño y realización de pruebas de usabilidad 9

/ 7. Pruebas con expertos 10

/ 8. Pruebas con usuarios 11

/ 9. Tipos de test de usabilidad y diseño de pruebas con usuarios 12

/ 10. Caso práctico 1: “Interfaz para un call center” 12

/ 11. Caso práctico 2: “Formulario alta de cliente” 13

/ 12. Resumen y resolución del caso práctico de la unidad 14

/ 13. Bibliografía 15

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
 Crear menús que se ajusten a los estándares.

Verificar que los mensajes generados por la aplicación son adecuados en

extensión y claridad.

Realizar pruebas para evaluar la usabilidad de la aplicación.

/ 1. Introducción y contextualización práctica

El desarrollo de interfaces gráficas requiere de la creación y uso de un conjunto de normas y estándares que permitan
cumplir todos los criterios de usabilidad necesarios para garantizar una correcta interacción con los usuarios.

La usabilidad es un concepto estrechamente ligado al diseño de la interfaz gráfica de cualquier aplicación o

herramienta, puesto que, a través de esta, el usuario accede y maneja su experiencia de navegación por el sitio web
o por la herramienta.

En este tema, analizaremos en detalle en qué consiste la usabilidad y

cómo se relaciona con la experiencia del usuario, señalando las principales
características que definen la creación de estos sistemas interactivos.

Existe una extensa normativa que recoge reglas y estándares para la

aplicación de la usabilidad en multitud de entornos, definida por la
Organización Internacional de la Normalización y cuyos fundamentos
principales veremos en este tema.

Escucha el siguiente audio donde planteamos la contextualización práctica

de este tema. Encontrarás su resolución en el apartado «Resumen y Fig. 1. Características de las interfaces con buena
resolución del caso práctico de la unidad». usabilidad.

Audio intro. “¿Cómo se puede lograr una

interfaz usable?”
https://bit.ly/2Fd8p1r
 TEMA 6. USABILIDAD I: CONCEPTO Y NORMATIVA
Desarrollo de interfaces /4

/ 2. Concepto de usabilidad
El concepto de usabilidad, del inglés Usability, hace referencia a la facilidad o dificultad de uso de un sitio web, de
aplicaciones y herramientas o de cualquier otro entorno software que implique la interacción con un usuario.

Como enunciaba Jakob Nielsen: «Si no lo haces fácil, los usuarios se marcharán de tu web» o abandonarán la
aplicación en busca de otra que resulte más sencilla de utilizar.

Características

La usabilidad se define por un conjunto de parámetros que permiten establecer las características deseables sobre
una mejor usabilidad. Se trata de diseñar sistemas eficientes, efectivos, seguros, útiles, fáciles de aprender y fáciles
de recordar:

• Eficiencia de uso: Esta característica hace referencia al tiempo que se requiere para completar una acción
determinada. No resulta muy conveniente que un usuario tarde mucho tiempo en encontrar botones, menús,
accesos… O en comprender un funcionamiento excesivamente complejo de la aplicación.

• Facilidad de aprendizaje: En relación con la anterior característica, el tiempo empleado en conocer el

funcionamiento de una aplicación no puede ser demasiado amplio, ya que provocará que el usuario quiera
buscar otras que satisfagan sus necesidades de forma inmediata.

• Retención del tiempo: En el caso de aplicaciones utilizadas de manera

intermitente, es aconsejable que el usuario precise de un menor tiempo
de aprendizaje que la primera vez que accedió a la herramienta.

• Satisfacción: Una de las características más subjetivas, puesto que

indica el grado de satisfacción del usuario con respecto al sistema.

• Tasa de error: Será deseable que el número de errores cometidos

por los usuarios de una aplicación sea lo menor posible. En concreto,
aquellos errores que puedan estar provocados por una excesiva Fig. 2. Usuario trabajando con una interfaz
complejidad de la herramienta. poco usable.

2.1. Experiencia del usuario

Para el diseño de sistemas interactivos, se pueden establecer un conjunto de
principios de diseño relativos a la interacción persona-computador. Algunos
de estos, se enuncian en el libro User Engineering Principles for Interactive
Systems de Hansen (1971), donde aparece la primera enumeración de
principios para el diseño de sistemas interactivos:

• Conocer al usuario: Es necesario analizar el comportamiento de los

‘usuarios tipo’ que van a acceder a la aplicación que se desarrolla,
puesto que, en función de estos, se implementarán unas característica
u otras.

• Minimizar la memorización: Suele ser aconsejable sustituir las entradas

de datos por la selección de ítems. Por ejemplo, el uso de nombres
aporta una mejor facilidad de uso que el empleo de números. De esta
forma, se conseguirá un comportamiento predecible y proporcionará Fig. 3. Experiencia del usuario con una
acceso rápido a la información práctica, y útil, del sistema. interfaz.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

• Optimizar las operaciones mediante la rápida ejecución de operaciones comunes: La consistencia de la

interfaz y organizando y reorganizando la estructura de la información basándose en la observación del uso
del sistema.

• Facilitar buenos mensajes de error, crear diseños que eviten los errores más comunes: Haciendo posible
deshacer acciones realizadas y garantizar la integridad del sistema en caso de un fallo de software o hardware.

La interacción Persona - Ordenador (IPO) o, en inglés, Human-Computer Interaction (HIC) es «la disciplina que
estudia el intercambio de información entre las personas y los ordenadores», cuyo objetivo es que el intercambio y
acceso a la información sea lo más eficiente posible.

Vídeo 1. “Ejemplos de Interfaces

usables”
https://bit.ly/3gMqOjj

/ 3. Normativa
3.1. ISO
La Organización Internacional de la Normalización (International Organization for Standardization, ISO), se encarga
de la creación de normas y estándares cuyo objetivo principal es conseguir asegurar que servicios y productos
presenten ciertos niveles de calidad, eficiencia y seguridad.

Fig. 4. Principales normas sobre usabilidad.

La ISO define la usabilidad como la capacidad de un producto para ser entendido, aprendido, usado y resultar
atractivo para el usuario cuando se usa bajo determinadas condiciones. Es decir, la usabilidad no antepone la
facilidad de uso al diseño, ni el diseño a la facilidad para comprender su funcionamiento por parte del usuario, será
una combinación de diferentes aspectos clave, que podrán variar en función del tipo de aplicación y del grupo de
usuarios al que va dirigida.

A continuación, vamos a hacer un recorrido sobre las principales normas y estándares enunciados por la ISO en
relación a la consecución de buenos parámetros de usabilidad, con respecto al diseño y desarrollo de interfaces que
favorecen la interacción entre el usuario y la aplicación.
 TEMA 6. USABILIDAD I: CONCEPTO Y NORMATIVA
Desarrollo de interfaces /6

En cuanto al uso del producto, servicio o herramienta desarrollado:

• ISO/IEC 9126-1: Estándar internacional relativo a la ingeniería del software en cuanto a la calidad del producto.
Se distinguen subestándares: modelo de calidad y métricas (de calidad de uso, externas e internas).

• ISO/IEC 9241: Se trata de una guía de usabilidad donde se recogen los beneficios relativos a las medidas de
usabilidad evaluadas. En el siguiente apartado, la analizaremos más en detalle.

Las normas relativas al diseño de la interfaz y la interacción generado entre el usuario y la aplicación son:

• ISO/IEC 14915: Estándar internacional relativo a la ergonomía del software elaborado con respecto a la
interfaz multimedia.

• IEC TR 61997: Se recogen un conjunto de guías de interfaz multimedia para usuarios en equipos de uso
general.

3.2. Normas y estándares de usabilidad. ISO 9241

El estándar ISO/IEC 9241 es uno de los más amplios y recoge múltiples subapartados que organizan de forma clara
todas las normas relativas a la usabilidad en el desarrollo de sistemas interactivos.

ISO Descripción

Esta norma recoge los principios de diseño de los diálogos

ISO 9241-10
que se han de generar entre el usuario y el sistema.

La norma recoge aspectos relativos a la ergonomía de

ISO 9241-11
la interacción entre el usuario y el sistema.

Norma que recoge distintas pautas en cuanto a la

ISO 9241-12
organización y disposición de la información.

Normas relativas al modelado y diseño de las ayudas

ISO 9241-13
implementadas en la aplicación para el usuario.

Se centran en el diseño de los diálogos producidos por los

ISO 9241-14 diferentes elementos que modelan un menú: cómo se han
de modelar y qué texto poner en botones, casillas, etc.

ISO 9241-15 Normas relativas a los diálogos de lenguaje de órdenes.

Se recogen los requisitos ergonómicos para el correcto

ISO 9241-16 diseño de aplicaciones para trabajos de oficina
con pantallas de visualización de datos.

ISO 9241-17 Normas para el correcto diseño de formularios.

Tabla 1. Estándares ISO.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

Finalmente, otros estándares propios de este tipo de desarrollo son:

• ISO 13407: Esta norma recoge los principios relativos al diseño de aplicaciones e interfaces en sistemas
interactivos, poniendo el foco en el usuario.

• ISO/TR 16982: Recoge la lista de métodos ergonómicos presentes en las distintas fases del ciclo de diseño
y desarrollo.

Audio 1. “Diferencia entre usabilidad y

accesibilidad”
https://bit.ly/2F7veDv

/ 4. Medidas de usabilidad en aplicaciones: satisfacción

Las medidas de usabilidad son una herramienta clave para la evaluación de este concepto en el desarrollo de
interfaces adecuadas para la aplicación y los usuarios a los que va dirigida.

Una de las herramientas más convenientes son los test de usabilidad, los cuales deben evaluar tanto la facilidad
de uso por parte de un usuario (no experto) como si la funcionalidad desarrollada cumple con la finalidad de la
aplicación. Si el desarrollo resulta intuitivo para una persona, pero no cumple sus expectativas en cuanto al objeto
de desarrollo, tampoco estará cumpliendo los criterios de usabilidad.

Fig. 5. Medidas de usabilidad.

Los test de usabilidad no son herramientas de opinión subjetiva, ya que se deben desarrollar de forma exhaustiva
para que, de manera objetiva, se evalúen todos los parámetros deseados.

Por lo tanto, en el diseño de este tipo de test, se deben contemplar ciertas métricas comunes que devuelven de
manera fiable la usabilidad presenten en el sistema evaluado.
 TEMA 6. USABILIDAD I: CONCEPTO Y NORMATIVA
Desarrollo de interfaces /8

4.1. Satisfacción
El nivel de satisfacción de un usuario es clave para la evaluación de la aplicación. La obtención de un nivel bajo de
satisfacción, unido a un buen diseño de cuestionario, permitirá añadir las modificaciones oportunas al sistema.

Métricas
Calificación de satisfacción del
usuario sobre la aplicación
Frecuencia de reutilización de la aplicación

Calificación relativa a la facilidad de aprendizaje

Medida de uso voluntario de la aplicación

Tabla 2. Métricas de satisfacción.

/ 5. Medidas de usabilidad en aplicaciones: efectividad y

eficiencia
5.1. Efectividad
La efectividad determina el grado de éxito de una aplicación, es decir, si cumple con la funcionalidad para la cual
ha sido desarrollada. Este atributo está estrechamente ligado a la facilidad de aprendizaje de la herramienta. Será
necesario contemplar distintos escenarios.

Métricas
Cantidad de tareas relevantes completadas
en cada uno de los intentos
Número de acceso a la documentación,
al soporte y a la ayuda
Cantidad de funciones aprendidas
Número de usuarios capaces de aprender
las características del producto
Cantidad y tipos de errores tolerados por los usuarios

Cantidad o porcentaje de palabras

leídas correctamente
Tabla 3. Métricas de efectividad.

5.2. Eficiencia
El grado de eficiencia se define en relación al tiempo que es necesario para completar una tarea con el software
desarrollado.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

Las métricas definidas para este atributo están basadas, sobre todo, en el primero de los intentos, puesto que, en ese
momento, aún no se tiene demasiado conocimiento sobre la aplicación. Si en este intento los valores son buenos, en
los restantes ofrecerán grandes resultados, que se valoran en las métricas de efectividad.

Métricas

Tiempo productivo

Tiempo para aprender el funcionamiento

Tiempo requerido en el primer intento para
completar la funcionalidad evaluada
Eficiencia relativa al primer intento

Errores persistentes
Tiempo necesario para aprender de nuevo
la funcionalidad del producto pasado
un tiempo desde su anterior uso
Tabla 4. Métricas de eficiencia.

/ 6. Diseño y realización de pruebas de usabilidad

El desarrollo de las pruebas de usabilidad adecuadas no es un hecho banal, puesto que requiere de un algoritmo.
Como se puede observar en el siguiente diagrama, el diseño de los test de usabilidad no se encuentra aislado, sino
que cumple un papel activo en el proceso de implementación de la aplicación.

El flujo no solo se ejecuta una vez, es decir, cuando se completa el primer diseño y se realizan las pruebas y test
necesarios. En este sentido, no será suficiente con una sola revisión para obtener la versión completa, sino que
el proceso de retroalimentación puede extenderse todo lo necesario. Estos pasos necesarios para un desarrollo
completo son:

Fig. 6. Diagrama de test de usabilidad.

 TEMA 6. USABILIDAD I: CONCEPTO Y NORMATIVA
Desarrollo de interfaces / 10

• En primer lugar, se realiza un análisis completo del perfil de usuario de la aplicación.

• A continuación, se desglosan los diferentes flujos de trabajo del usuario de la herramienta.

• Una vez se han definido cada una de las tareas propias de la funcionalidad esperada de la herramienta, así
como el tipo de usuario alo que va dirigida, se diseñan los parámetros de usabilidad necesarios.

• Se comienza a implementar el diseño de la aplicación, tanto a nivel de funcionalidad como de interfaz.

• Tras este primer desarrollo, se obtienen los llamados prototipos, sobre los cuales se comienza a aplicar los test
de usabilidad, creados en base a los parámetros definidos en el punto 3.

• En base a estos resultados, se irá rediseñando y readaptando las diferentes versiones del software, hasta
obtener un resultado final que puede llevarse a producción, donde será distribuida de la forma pertinente.

/ 7. Pruebas con expertos

Las pruebas y test de usabilidad realizados por expertos o usuarios son diferentes: mientras que los primeros realizan
una inspección del software basada en su conocimiento de la aplicación, así como en un listado de todos los posibles
escenarios que se pueden contemplar, los segundos no llevan a cabo una evaluación tan profesional, ya que se basa
en otra serie de criterios.

Los expertos realizan la conocida evaluación heurística o método de inspección, mediante el cual analizan toda la
aplicación e identifican los problemas existentes o algunos que pudieran ocurrir antes de llevar a producción una
aplicación. El coste de corrección después de implantar cualquier software o herramienta es mucho más elevado que
si se realiza antes. La evaluación heurística se divide en dos partes:

• Evaluación detalle. Se analiza de forma exhaustiva cada pantalla, acción, menú, diálogo, comentario …

• Evaluación de alto nivel. Se analiza el funcionamiento de forma general.

El número de expertos que suelen participar en este tipo de pruebas

está en torno a cuatro, que actuarán de forma independiente, evaluando
cada funcionalidad y analizando todos los posibles problemas surgidos.
Finalmente, se realiza un informe de manera conjunta. Es deseable que estos
tengan bastante experiencia, tanto en la detección de errores de usabilidad
como en el manejo de la propia herramienta; de esta forma, detectarán más
problemas que personal ajeno al producto y al análisis de estos.

Estas pruebas se realizan en cualquier momento del proceso de desarrollo.

Es aconsejable que se realicen antes de las pruebas con usuarios, puesto que,
cuando se hacen estas, el prototipo tiene que estar lo más avanzado posible Fig. 7. Expertos realizando evaluación
para que la versión probada por usuarios sea lo más cercana a la realidad. heurística.

Vídeo 2. “Tipos de mensajes de error”

https://bit.ly/31ynVw8
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

/ 8. Pruebas con usuarios

Las pruebas de usuarios, en contraposición a las pruebas de expertos, se basan en el análisis y evaluación de una
herramienta o aplicación software mediante un grupo de usuario reales que pueden detectar errores que los expertos
no han sido capaces de encontrar.

Fig. 8. Usuarias probando la interfaz.

Por ejemplo, a un experto una determinada funcionalidad le puede resultar intuitiva y fácil de aprender, pero no
dejan de ser expertos en desarrollo, y, desde el punto de vista de un usuario, esta forma de acometer la acción puede
no ser percibida como intuitiva.

Los métodos de test con usuarios se basan en el uso de cuestionarios tipo. Según el Diseño Centrado en el Usuario
(DCU), los test de usuario se basan en pruebas que observan la forma de interacción de los usuarios con el producto
objeto del test.

Es aconsejable que el número de usuarios que participan en este test sea de, al menos, 15, para poder garantizar
una tasa de detección cercana al 100%. La elección de estos debe basarse en los perfiles a los que está dirigida la
aplicación. No tendrá sentido probar una aplicación para la gestión logística de un almacén con un grupo de usuarios
que no tienen ninguna vinculación a este tipo de áreas.

Las pruebas se realizan de forma individual y se deben tener en cuenta todas las observaciones que se tomen, desde
la primera toma de contacto, hasta la realización de la prueba completa. Algunos criterios de diseño son:

• Pruebas razonables, es decir, que un usuario real realizará.

• Pruebas específicas, es aconsejable realizar pruebas concretas y no muy genéricas.

• Pruebas factibles, que pueden realizarse, no se trata de un examen que los usuarios no deben superar.

• Tiempo de realización razonable.

 TEMA 6. USABILIDAD I: CONCEPTO Y NORMATIVA
Desarrollo de interfaces / 12

/ 9. Tipos de test de usabilidad y diseño de pruebas con

usuarios
Es posible distinguir entre hasta cuatro tipos de test de usabilidad. La elección
del más adecuado se hará en base al tipo de estudio:

• Test de uso pautado: En este caso, un responsable se encarga de

monitorizar todas las pruebas que se hacen en base a un listado
previamente diseñado sobre un prototipo muy cercano a la versión
real.

• Test de uso descontextualizado: Implementa un proceso similar al

anterior, sobre un prototipo no real.

• Uso natural: Estas pruebas se realizan sobre la versión final y con una
interacción también similar a la real, sin ningún moderador que paute
la acciones.
Fig. 9. Pautas para el diseño de pruebas de
• Híbridos: Combinación entre cualquiera de las descritas. usabilidad.

Con respecto al diseño de pruebas con usuarios, ya vimos en el apartado 6 el flujo completo para el desarrollo de un
producto, interrelacionando los test de usabilidad como elemento clave en la implementación de cualquier producto
software. El diseño de las pruebas de usabilidad también requiere de un conjunto de pautas:

• Se definen los objetivos de las pruebas.

• Se diseña el formato y tipo de datos que se tomarán y analizarán en el estudio (cuantitativos, cualitativos,
mixtos, presencial o en remoto…).

• Se realiza el diseño de las pruebas que se van realizar.

• Se determina el número de personas que participan en el estudio. Estos se escogen adecuando sus perfiles al
tipo de producto que se va a evaluar. En el caso de los expertos, será deseable que tengan cierta experiencia
en evaluaciones de usabilidad.

• Se escogen las métricas que se van a recoger en los test de usabilidad.

• Se implementa el plan de test: La guía de las pruebas que se van a realizar, el tiempo que se va a destinar a cada
una de ellas, etc. Todos los aspectos relativos a estas pruebas tienen que estar cuidadosamente escogidos
para abarcar el mayor número posible de casuísticas y prever cualquier tipo de contratiempo que pudiera
entorpecer la satisfacción del usuario con respecto a la aplicación.

/ 10. Caso práctico 1: “Interfaz para un call center”

Planteamiento: Uno de los elementos clave a la hora de desarrollar una interfaz usable consiste en mantener la
consistencia tanto en el diseño gráfico como en la parte funcional. Para ello, se debe lograr que la aplicación sea
constante y predecible. Si se mantiene una representación constante en la forma de mostrar la información, el
usuario percibirá que la información llega de forma idéntica, y le resultará más sencillo utilizar la interfaz.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

Nudo: En este ejercicio, se diseñará una interfaz consistente para un call center de una empresa de reparto. La
ventana principal tendrá acceso directo al resto de secciones de la interfaz. Constará de un logo y cuatro apartados:

• Clientes de la empresa

• Proveedores de la empresa

• Pedidos pendientes de tramitar

• Devoluciones pendientes de tramitar

• Diseña la distribución que debería tener la interfaz para cumplir los requisitos principales de una interfaz
consistente.

Desenlace: La interfaz propuesta es un claro ejemplo de consistencia porque:

• Es intuitiva en cuanto a la situación de las secciones por codificación de colores cromática, lo que permite que
el usuario siempre sepa en qué parte de la interfaz se encuentra.

• La distribución de los elementos es constante, por lo que, para tareas similares, el usuario ejecutará la misma
secuencia de acciones.

• Los conceptos utilizados en el menú son términos sencillos e intuitivos, que se mantienen a lo largo del uso
de toda la interfaz.

• Se respeta una situación constante del menú y elementos, como la barra de navegación.

/ 11. Caso práctico 2: “Formulario alta de cliente”

Planteamiento: Para mejorar la usabilidad de las interfaces, es muy importante anticiparse a los posibles errores,
es decir, prevenir los posibles fallos que pueda cometer el usuario cuando las utilice. En algunas ocasiones, los
componentes que generan mayores dudas a los usuarios son los campos numéricos y de texto.

Nudo: En este caso práctico, se plantea mejorar la usabilidad de un formulario para dar de alta a un cliente:

Fig. 10. Diseño de un formulario a mejorar.

 TEMA 6. USABILIDAD I: CONCEPTO Y NORMATIVA
Desarrollo de interfaces / 14

Desenlace: Para mejorar la interfaz, se proponen los siguientes cambios:

• En el campo E-mail, añadir un ejemplo.

• En el campo de Contraseña, indicar el mínimo de caracteres y que contenga mayúsculas, minúsculas y

números.

• En el campo Región, mostrar un desplegable con la selección previa de opciones posibles.

• En el campo Dirección, añadir un ejemplo.

• En el campo Provincia, mostrar un desplegable con las opciones posibles según la Región seleccionada.

• En el campo Localidad, también se añadiría un desplegable en función de la Provincia seleccionada.

• En el campo Prefijo, autocompletarlo según la información previa de la Región.

Fig. 11. Diseño de un formulario mejorando usabilidad.

/ 12. Resumen y resolución del caso práctico de la

unidad
Como hemos visto en este tema, el desarrollo de interfaces gráficas requiere del conocimiento de toda la normativa,
así como de los estándares que permiten cumplir todos los criterios de usabilidad para conseguir una correcta
interacción con los usuarios.

El concepto de usabilidad se resume en la facilidad o dificultad de usar una herramienta, aplicación o cualquier otro
entorno software que implique la interacción con un usuario. Algunas de las características que debe cumplir todo
sistema para garantizar esta usabilidad son: eficiencia de uso, facilidad de aprendizaje, retención del usuario en el
tiempo, satisfacción o tasa de error.

La Organización Internacional de la Normalización se encarga crear normas y estándares cuyo objetivo principal
es asegurar que servicios y productos presenten ciertos niveles de calidad, eficiencia y seguridad. Algunos de los
estándares más importantes son los relativos al uso del producto, servicio o herramienta desarrollados, como ISO/
IEC 9126-1 o ISO/IEC 9241.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 15 MEDAC · Instituto Oficial de Formación Profesional

Finalmente, otro de los elementos clave vistos en este tema son las medidas de usabilidad, ya que se trata de una
herramienta esencial para la evaluación de la usabilidad en un sistema, sobre todo en lo que respecta al desarrollo de
una interfaz adecuada para la aplicación y los usuarios a los que va dirigida.

Resolución del caso práctico de la unidad.

La Organización Internacional de la Normalización, ISO, se encarga de crear normas y estándares cuyo objetivo
principal es conseguir que el software presente ciertos niveles de calidad, eficiencia y seguridad.

A la hora de diseñar una interfaz usable, debe evitarse el uso excesivo de mensajes de error, dado que al usuario
puede parecerle que se le está regañando o, incluso, que está cometiendo un error insalvable mucho más grave de
lo que es. Es más beneficioso diseñar una interfaz usable que sea intuitiva y permita al usuario realizar sus tareas de
manera autónoma.

Además de medir la satisfacción de los usuarios, es importante tener en cuenta la efectividad y la eficiencia. Es decir,
el grado de éxito de la aplicación (si cumple o no la funcionalidad para la que ha sido desarrollada) y el tiempo que
es necesario para completar una tarea.

Por último, además de las evaluaciones heurísticas realizadas por expertos, existen las pruebas de usuario que
analizan y evalúan la interfaz, detectando errores que los expertos no han sido capaces de detectar.

/ 13. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces. (1.a ed.). Madrid: Síntesis.
DESARROLLO DE INTERFACES
TÉCNICO EN DESARROLLO DE APLICACIONES
MULTIPLATAFORMA

Explotación de
componentes
visuales

05
 / 1. Introducción y contextualización práctica 4

/ 2. Características fundamentales 5
2.1. Introspección y reflexión 5
2.2. Persistencia del componente 5

/ 3. Pruebas unitarias 6
3.1. JUnit en Eclipse 7
3.2. Clase prueba 7
3.3. Métodos de prueba 7
3.4. Comprobación de errores 8

/ 4. Eventos: clases 8

/ 5. Eventos: componentes 9

/ 6. Listeners: KeyListener y ActionListener 10

6.1. KeyListener 10
6.2. ActionListener 10

/ 7. Listeners: MouseListener, FocusListener y MouseMotionListener 11

/ 8. Eventos: métodos 12

/ 9. Asociación de acciones a eventos 12

9.1. Flujo completo de diseño 13

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
/ 10. Caso práctico 1: “Configuración del ratón” 15

/ 11. Caso práctico 2: “Teclado de piano” 16

/ 12. Resumen y resolución del caso práctico de la unidad 18

/ 13. Bibliografía 18
 Crear componentes visuales.

Determinar los eventos a los que se debe responder desde una determinada
interfaz.

Asociar las acciones correspondientes a la ocurrencia de un determinado evento.

Realizar pruebas sobre los componentes.

Documentar los componentes.

Programar aplicaciones que utilizan los componentes empaquetados.

/ 1. Introducción y contextualización práctica

Una característica esencial del desarrollo de interfaces es la posibilidad de interacción entre el usuario y la aplicación.
Sin esta interacción, esta asignatura no tendría ningún sentido. ¿Para qué iba a ser necesario cuidar el diseño y la
atención que se le pone al desarrollo de interfaces si no existiera dicha interacción?

Por esta razón, todos los componentes descritos hasta ahora son necesarios. Sobre todo, la capacidad de
interactividad que estos pueden presentar, gracias a la aparición de los eventos.

Los eventos permiten que el usuario pueda establecer una «comunicación» con cualquier aplicación para que esta
se ajuste a las decisiones del usuario en lo que respecta a su recorrido
por un sitio web, aplicación o herramienta.

En este tema, abordaremos diferentes elementos relativos a la creación

y utilización de eventos, así como ala generación de pruebas unitarias
utilizando JUnit.

Escucha el siguiente audio en el que planteamos la contextualización

práctica del tema. Encontrarás su resolución en el apartado final. Fig. 1. Diagrama conexión tipos de ventanas.

Audio intro. “Creación y utilización de

eventos y escuchadores en una interfaz”
https://bit.ly/33OhQhR
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

/ 2. Características fundamentales
Los componentes visuales son elementos clave para el desarrollo de interfaces. Su forma de utilización y estructura
característica son esenciales para la implementación de aplicaciones a través de su uso. De una forma ágil y sencilla,
liberan al desarrollador de los costes que supondría la creación de todos y cada uno de elementos visuales implicados
en una sola interfaz de aplicación.

2.1. Introspección y reflexión

El lenguaje de programación Java es estático, lo que no permite alterar ciertos aspectos de los objetos durante
el tiempo de ejecución. Sin embargo, existen dos conceptos que permiten introducir ciertas funcionalidades de
lenguajes dinámicos: la reflexión y la introspección.

Mediante la reflexión, es posible recuperar y modificar de forma dinámica diferentes datos relativos a la estructura
de un objeto: los métodos y propiedades de la clase, los constructores, las interfaces o el nombre original de la clase,
entre otros.

La introspección es una de las características más importantes en el desarrollo de interfaces, sobre todo cuando se
utilizan entornos visuales de diseño, puesto que permite a estas herramientas tomar de forma dinámica todos los
métodos, propiedades o eventos asociados a un componente, que se colocan sobre el lienzo de diseño simplemente
arrastrando y soltando el elemento.

Por lo tanto, la introspección de los componentes visuales requiere de la reflexión para funcionar correctamente.
Ambas propiedades son dos características clave en el diseño de JavaBean que vimos en el tema anterior.

2.2. Persistencia del componente

El desarrollo de componentes requiere de la persistencia. Esta característica permite que el estado de una determinada
clase no varíe, lo cual es posible a través de la serialización. Por esta razón, cuando se crea un nuevo componente,
será necesario implementar alguna de las interfaces siguientes en función del tipo de serialización escogida:

• Serialización automática. Utiliza la interfaz: java.io.Serializable

• Serialización programada. Utiliza la interfaz: java.io.Externalizable

Fig. 2. Proceso serialización.

 TEMA 5. EXPLOTACIÓN DE COMPONENTES VISUALES
Desarrollo de interfaces /6

/ 3. Pruebas unitarias
El desarrollo de pruebas de software es importante en la implementación
de nuevos componentes, puesto que, de esta forma, se reducen
considerablemente los tiempos de desarrollo. Si se ha probado y verificado
el comportamiento de un componente, esta acción ya no será necesaria,
aunque sí habría que verificar cómo sería su uso en el marco de otro proyecto Fig. 3. Logo JUnit.
que lo utilice.

Las pruebas se diseñan en base al comportamiento esperado de un componente, extendiéndose a todas las
casuísticas posibles.

Las pruebas unitarias son pruebas que se realizan sobre una funcionalidad concreta, es decir, sobre una parte del
programa, con el objetivo de comprobar si funciona de forma correcta. Para el desarrollo de pruebas unitarias,
encontramos el framework de Java, JUnit. Para intalarlo, basta con incorporar algunas librerías JAR al entorno
de desarrollo.

Como resultado de las pruebas, se distinguen dos tipos de escenarios:

la respuesta deseada y la respuesta real. Cuando estas no coinciden,
será necesario hacer una revisión completa del código que se está
probando.

Además, las pruebas unitarias deben cumplir las características del

conocido como principio FIRST.

• Rápida ejecución

• Independencia respecto a otros test

• Se pueda repetir en el tiempo

• Cada test debe poder comprobar si es válido por sí mismo

• Es conveniente diseñar el test antes de empezar a implementar

el código Fig. 4. Principio FIRST de pruebas unitarias.

Vídeo 1. “JUnit en Eclipse”

https://bit.ly/2XMWApd
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

3.1. JUnit en Eclipse

Para trabajar con JUnit desde Eclipse, lo primero que necesitamos es tener nuestro proyecto creado y añadir la
librería JUnit desde Build Path. La manera más sencilla es haciendo clic con el botón derecho sobre el proyecto y
seleccionando Build Path, Add Libraries, JUnit. Después, nos aparecerá una pantalla con las versiones de la librería
disponibles, y seleccionamos JUnit 5.

Fig. 5. Importación librería JUnit en Eclipse.

3.2. Clase prueba

Ahora crearemos nuestra clase de prueba, que se llamará como la clase que queremos probar, pero con la
palabra ‘test’ delante. Por ejemplo, si la clase que queremos probar se llama calculadora.java, la clase de prueba
se llamara TestCalculadora.java. Además, esta nueva clase debe extender de la clase TestCase e importar junit.
framework.TestCase.

import junit.framework.TestCase;
public class TestCalculadora extends TestCase{…}

Código 1. Clase prueba.

3.3. Métodos de prueba

Los métodos de esta clase serán similares a los de la clase que se quiere probar, pero con la palabra ‘test’ delante, es
decir, si el método original es sumar, el método de prueba será testSumar(). Importante: este método no devolverá
nada, por lo que se declarará como public void TestSumar(). Dentro de cada método, llamaremos al constructor
de nuestra clase de prueba y, para comprobar si el resultado obtenido coincide con el esperado, utilizaremos los
métodos assert. Existen varios tipos de métodos assert, pero los más utilizados según el tipo de dato que queramos
comprobar son: assertTrue, assertFalse, assertEquals y assertNull.
 TEMA 5. EXPLOTACIÓN DE COMPONENTES VISUALES
Desarrollo de interfaces /8

3.4. Comprobación de errores

Por último, comprobaremos los resultados compilando la clase prueba como: Run As, JUnit Test. En ese momento,
aparecerá un panel llamado JUnit, en forma de árbol, que mostrará los resultados correctos en color verde y los
errores en rojo.

Fig. 6. Comprobación errores con JUnit.

/ 4. Eventos: clases
La programación basada en eventos es la clave de la iteración entre el usuario y una interfaz. Sin la existencia de
esta, solo tendríamos textos, imágenes o cualquier otro elemento. Este tipo de programación podría dividirse en
dos grandes bloques: la detección de los eventos y las acciones asociadas a su tratamiento. Podemos decir que la
programación basadas en componentes y la basada en eventos se encuentran estrechamente ligadas, puesto que la
finalidad de gran parte de los componentes descritos en el capítulo anterior es la recogida de información directa a
través de la comunicación e interacción con el usuario. En función del origen del evento, es decir, de dónde se haya
producido, diferenciamos entre eventos internos y externos:

• Eventos internos. Este tipo de eventos está producido por el propio sistema.

• Eventos externos. Los eventos externos son aquellos producidos por el usuario, habitualmente, a través del
teclado o del puntero del ratón.

Los objetos que definen todos los eventos que se verán en este tema se basan en las siguientes clases, o en varias de
estas, puesto que existen relación de herencia entre ellas.

Clase Descripción

EventObject Clase principal de la que derivan TODOS los eventos

MouseEvent Eventos relativos a la acción del ratón sobre el componente

ComponentEvent Eventos relacionados con el cambio de un componente, de tamaño, posición…

ContainerEvent Evento producido al añadir o eliminar componente sobre un objeto de tipo Container

Este tipo de eventos se produce cuando una ventana ha sufrido algún tipo
WindowsEvent
de variación, desde su apertura o cierre, hasta el cambio de tamaño

Evento que se produce al detectarse la acción sobre un componente.

ActionEvent Es uno de los más comunes, puesto que modela acciones tales como la
pulsación sobre un botón o el check en un menú de selección.
Tabla 1. Clases de eventos.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

/ 5. Eventos: componentes
Los componentes utilizados para el desarrollo de interfaces presentan, habitualmente, un tipo de evento asociado.
No es lo mismo el tipo de detección asociado a un botón o a la pulsación de una tecla, que la forma de detección de
la apertura o cierre de una ventana.

Fig. 7. Asociación de un evento a un componente.

En la siguiente tabla, se muestran los componentes más habituales y el tipo de evento asociado a estos.

Nombre
Nombre evento Descripción del evento
componente
Detecta la pulsación de la tecla Enter
JTextField ActionEvent
tras completar un campo de texto

JButton ActionEvent Detecta la pulsación sobre un componente de tipo botón

JComboBox ActionEvent ItemEvent Se detecta la selección de uno de los valores del menú

JCheckBox ActionEvent ItemEvent Se detecta el marcado de una de las celdas de selección

JTextComponent TextEvent Se produce un cambio en el texto

Detecta el movimiento de la barra

JScrollBar AdjustmentEvent
de desplazamiento (scroll)

Tabla 2. Nombre de componente y nombre de evento asociado.

 TEMA 5. EXPLOTACIÓN DE COMPONENTES VISUALES
Desarrollo de interfaces / 10

/ 6. Listeners: KeyListener y ActionListener

Los listeners o escuchadores permiten detectar la ocurrencia de los eventos. Se podría decir que cuando estos se
definen y activan, quedan a la espera («escuchando») de si ese produce un evento. Si este se produce, se ejecutan
las acciones asociadas a tal ocurrencia. Todo evento requiere de un listener que controle su activación.

A continuación, se verán todos los tipos de listeners asociados al tipo de evento al que corresponden. Como se puede
observar, un mismo tipo de escuchador puede estar presente en varios eventos y componentes diferentes, aunque,
normalmente, presentan un comportamiento muy similar.

6.1. KeyListener
Este evento se detecta al pulsar cualquier tecla. Bajo este escuchador, se contemplan varios tipos de pulsaciones,
cada uno de los cuales presentará un método de control propio. Se implementan los eventos ActionEvent.

Modo de pulsación Definición

keyPressed Se produce al pulsar la tecla

Se produce al pulsar
keyTyped
y soltar la tecla

keyReleased Se produce al soltar una tecla

Tabla 3. Eventos asociados a KeyListener.

6.2. ActionListener
Este evento detecta la pulsación sobre un componente. Está presente en varios tipos de elementos y es uno de los
escuchadores más comunes.

La detección tiene lugar ante dos tipos de acciones: la pulsación sobre el componente con la tecla Enter, siempre
que el foco esté sobre el elemento; o la pulsación con el puntero del ratón sobre el componente. Estos componentes
implementan los eventos de tipo ActionEvent.

Componente Descripción

Al hacer clic sobre el botón o pulsar la tecla Enter

JButton
con el foco situado sobre el componente

JTextField Al pulsar la tecla Enter con el foco situado sobre la caja de texto

JMenuItem Al seleccionar alguna opción del componente menú

JList Al hacer doble clic sobre uno de los elementos del componente lista

Tabla 4. Nombre de componente asociados a ActionListener.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

/ 7. Listeners: MouseListener, FocusListener y

MouseMotionListener
• MouseListener

Este evento se produce al hacer clic sobre algún componente. Es posible diferenciar entre distintos tipos de
pulsaciones y asociar a cada una de ellas una acción diferente.

Estos componentes implementan los eventos de tipo MouseEvent.

Modo de
Definición
pulsación
Se produce al pulsar y soltar con el puntero
mouseClicked
del ratón sobre el componente

mouseExited Se produce al salir de un componente utilizando el puntero del ratón

mousePressed Se produce al presionar sobre el componente con el puntero

mouseReleased Se produce al soltar el puntero del ratón

Se produce al acceder a un componente

mouseEntered
utilizando el puntero del ratón

Tabla 5. Nombre de componentes asociados a MouseListener.

• FocusListener

Este evento se produce cuando un elemento está seleccionado o deja de estarlo, es decir, al tener el foco sobre el
componente o dejar de tenerlo.

Para cualquiera de los casos, se implementan objetos de la clase de eventos FocusEvent.

• MouseMotionListener

Mientras que el caso anterior detecta la acciones con el puntero en cuanto a pulsar o soltar las teclas del ratón, este
nuevo evento se produce ante la detección del movimiento del ratón.

Modo de acción Definición

mouseMoved Se produce al mover sobre un componente el puntero del ratón

Se produce al arrastrar un elemento

mouseDragged
haciendo clic previamente sobre él

Tabla 6. Nombre de componentes asociados a MouseMotionLIstener.

Audio 1. “Diferencia entre eventos y

escuchadores”
https://bit.ly/31IhMOf
 TEMA 5. EXPLOTACIÓN DE COMPONENTES VISUALES
Desarrollo de interfaces / 12

/ 8. Eventos: métodos
Cada uno de los eventos detallados en los apartados anteriores utilizará un método para el tratamiento del mismo,
es decir, tras enlazar al escuchador con la ocurrencia de un evento, será necesario ejecutar un método u otro en
función del tipo de evento asociado.

En la siguiente tabla, se muestra la relación entre el Listener y el método propio de cada evento:

Listener Métodos

ActionListener public void actionPerformed(ActionEvent e)

keyPressed public void keyPressed(KeyEvent e)

KeyListener keyTyped public void keyTyped(KeyEvent e)
keyRelease public void keyReleased(KeyEvent e)
public void
Obtención del foco
focusGained(FocusEvent e)
FocusListener
public void
Pérdida del foco
lostGained(FocusEvent e)
public void
mouseClicked
mouseClicked(MouseEvent e)
public void
mouseExited
mouseExited(MouseEvent e)
public void
MouseListener mousePressed
mousePressed(MouseEvent e)
public void
mouseReleased
mouseReleased(MouseEvent e)
public void
mouseEntered
mouseEntered(MouseEvent e)
public void
mouseMoved
mouseMoved(MouseEvent e)
MouseMotionListener
public void
mouseDragged
mouseDragged(MouseEvent e)

Tabla 7. Relación entre Listener y los métodos de eventos.

/ 9. Asociación de acciones a eventos

Para asociar una acción o conjunto de acciones a un evento, aunque dependerá del evento y acción exacta, podemos
definir, a continuación, una consecución común de pasos.

• Creación del listener

En primer lugar, se crea una nueva instancia del evento y este se vincula con el componente sobre el que va a actuar.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

Para que se produzca esta detección, será necesario enlazar el evento con los escuchadores, elementos que se
encuentren a la espera de que se produzca algún evento (Listeners). Estos elementos son interfaces que implementan
un conjunto de métodos.

La implementación puede realizarse o bien añadiendo el evento directamente al componente y, posteriormente,

codificando las acciones que se van a llevar a cabo (Sintaxis 1), o bien modelando primero todo el tratamiento del
evento y, a continuación, asociándolo con el componente sobre el que actúa (Sintaxis 2).

Sintaxis 1:

nombreComponente.addtipoEventoListener(new tipoEventoListener()
{…}

Código 2. Sintaxis 1 creación de Listener.

Sintaxis 2:

tipoEventoListener nombreEvento = new tipoEventoListener (){…}

nombreComponente.addtipoEventoListener(nombreEvento);

Código 3. Sintaxis 2 creación de Listener.

El valor de tipoEventoListener se obtiene de las tablas del apartado 4, escogiéndolo en función del evento que se
vaya a tratar.

• Asociación de la acción al evento

Cuando se activa y vincula un escuchador o listener a un componente y, por tanto, a la ocurrencia de un evento, los
componentes no realizan un filtrado previo de los eventos para determinar si los manejan o no, sino que los reciben
todos. A través de la asociación de la acción al evento se determinará si se maneja el evento o no.

A continuación, se implementa el método bajo el cual se desarrolla la acción, que se ejecutará tras la ocurrencia del
evento, ya sea la pulsación sobre un botón, selección con el ratón, marcado en una lista de componentes o escritura
a través del teclado, entre otros.

En el lenguaje de programación Java, cada evento está asociado a un objeto de la clase EventObject y, por lo tanto, a
un método concreto. La estructura general para la definición de este método sigue el siguiente patrón:

public void métodoDeEvento(TipoEvento e){…}

Código 4. Sintaxis métodos de acciones.

Los métodos relativos a cada evento, prestando especial atención a las diferentes casuísticas que presentan algunos
eventos, son los estudiados en el apartado 4.

9.1. Flujo completo de diseño

Por ejemplo, en el siguiente fragmento de código, se quiere implementar la detección de la pulsación sobre un
botón. Cuando esto ocurra, se debe mostrar el mensaje «Hola Mundo» en la misma ventana en la que se encuentra
el botón.

En primer lugar, se crea una nueva clase JFrame y se inserta un panel JPanel para ubicar encima el resto de elementos.
 TEMA 5. EXPLOTACIÓN DE COMPONENTES VISUALES
Desarrollo de interfaces / 14

Se coloca una etiqueta y un botón, en la distribución que se desee, desde la vista de diseño. En la parte del código,
de forma automática, se habrá generado:

//Se crea un nuevo botón

JButton btnNewButton = newJButton(“Pulsa aquí”);
//Se añade al JPanel
panel.add(btnNewButton);
//Se coloca una etiqueta también en Panel
JLabel label = new JLabel(“...”);
panel.add(label);

Código 5. Creación del botón y la etiqueta.

Y ahora, ¿cómo se crea el código relativo a la producción y detección de eventos para cada componente?

Desde la vista de diseño, hacemos doble clic sobre el botón, lo que nos lleva al código, donde ahora aparecen algunas
líneas nuevas.

btnNewButton.addActionListener(new ActionListener({

Código 6. Escuchador del evento.

De forma automática, se implementa tanto el escuchador vinculado al botón (ActionListener) como el método
dentro del cual se desarrollan las acciones desencadenadas por el evento (actionPerformed), que recibe por
parámetro un ObjectEvent de tipo ActionEvent.

Finalmente, solo quedará colocar el código que envía a la etiqueta de texto creada en el inicio el mensaje «Hola
Mundo» y la muestra por pantalla.

public void actionPerformed(ActionEvent e) {

lblNewLabel.setText(“Hola Mundo”);
}
});

Código 7. Acción asociada al evento.

Fig. 8. Resultado de la detección de la pulsación de un botón.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 15 MEDAC · Instituto Oficial de Formación Profesional

Vídeo 2. “Añadir eventos desde Design

en Eclipse”
https://bit.ly/2F65pnm

/ 10. Caso práctico 1: “Configuración del ratón”

Planteamiento: En este ejercicio, se implementará una interfaz para configurar la velocidad de desplazamiento
del ratón; también se configurará cuál de los dos botones será el principal. Para ello, se utilizarán los
componentes gráficos:

• Un JSpinner, para poder seleccionar los valores 0, 25 y 50.

• Un JComboBox, con la opción izquierdo y derecho.

• Una barra de progreso que muestre la velocidad.

• Un ratón que indique el botón seleccionado.

Fig. 9. Diseño a implementar Caso Práctico 1.

Nudo: Para implementar los eventos escuchadores asociados al JSpinner y al JComboBox. será necesario utilizar:

• En el caso del JSpinner. para capturar la velocidad establecida por el usuario. se utilizará el evento de cambio
de estado:

spinner1.addChangeListener(new ChangeListener() {
public void stateChanged(ChangeEvent e) {

• Para el JComboBox. se utilizará el evento de ítem seleccionado:

combo1.addItemListener(new ItemListener() {
public void itemStateChanged(ItemEvent e) {
 TEMA 5. EXPLOTACIÓN DE COMPONENTES VISUALES
Desarrollo de interfaces / 16

• Cuando se detecte el cambio de estado del componente JSpinner, se llamará al método de ‘pintar’ para
dibujar la barra de progreso con el color y longitud apropiados. Si la velocidad seleccionada es 0, la longitud
de la barra será de 20px y el color será el rojo. Si es 25, será de color naranja y longitud 40px. Por último, en
el caso de ser velocidad 50, la barra será de longitud 60px y de color verde.

if(spinner1.getValue().equals(0)) {
g.setColor(Color.red);
g.fillRect(50,120, 20, 20);

• Con la detección del evento del botón seleccionado en el JComboBox, se llamará también al método ‘pintar’,
que dibujará el botón del ratón seleccionado. En el caso de que sea el botón izquierdo, dibujará desde el píxel
215 del eje ‘x’, que es donde empieza el rectángulo del botón. Si es el botón derecho, se dibujará ese mismo
círculo desde la coordenada ‘x’ de 275 px.

if(combo1.getSelectedItem().toString().equals(“Izquierdo”)) {
g.fillRect(215,120, 60, 60);
g.setColor(Color.gray);
g.fillOval(215,120,60,60);
}
else {
g.fillRect(275,120, 60, 60);
g.setColor(Color.gray);
g.fillOval(275,120,60,60);
}

Desenlace:

El código completo de la clase raton.java se encuentra en el Anexo del tema.

/ 11. Caso práctico 2: “Teclado de piano”

Planteamiento: Se desea desarrollar la interfaz gráfica del teclado de un piano que permita tocar la escala
musical. Para ello, se utilizarán siete botones, a modo de teclas, para tocar las notas musicales y los eventos
escuchadores adecuados.

Nudo: Para realizar esta propuesta, los pasos a seguir son:

• Importar la librería JFugue.jar, que nos permitirá usar las notas.

• Instanciar un objeto de tipo Player.

• Crear los siete botones de tipo JButton.

• Escuchar el evento actionPerformed.

• Cuando suceda ese evento, llamar al método play.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 17 MEDAC · Instituto Oficial de Formación Profesional

Por último, repetimos el proceso con los seis botones restantes, asignándole a cada uno de ellos la nota inglesa
correspondiente (do=C, re=D, mi=E, fa=F, sol=G, la=A, si=B).

Fig. 10. Diseño a implementar Caso Práctico 2.

Desenlace:
import org.jfugue.player.Player;
public class interfazTeclado extends JFrame {
private JPanel contentPane;
public Player player=new Player();
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
interfazTeclado frame = new interfazTeclado();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
public interfazTeclado() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 549, 300);
contentPane = new JPanel();
contentPane.setBackground(Color.DARK_GRAY);
contentPane.setBorder(new EmptyBorder(5,5,5,5));
setContentPane(contentPane);
contentPane.setLayout(null);
JButton A = new JButton(“DO”);
A.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
player.play(“C”);
}
});

Código 8. Código desenlace Caso Práctico 2.

 TEMA 5. EXPLOTACIÓN DE COMPONENTES VISUALES
Desarrollo de interfaces / 18

/ 12. Resumen y resolución del caso práctico de la

unidad
A lo largo de este tema, hemos trabajado la creación de eventos, elementos clave en la implementación y desarrollo
de interfaces visuales, sobre todo para la creación de componentes integrados en estas interfaces, que proporcionan
a los usuarios una experiencia de interacción.

El proceso de creación y asociación de eventos se basa en los llamados listeners (escuchadores), que se enlazan a los
componentes «escuchando» si se producen cambios asociados a la integración entre el usuario y la interfaz, y si es
así, se ejecutan las acciones implementadas.

Como hemos visto en las tablas de este tema, debemos diferenciar entre los escuchadores, los métodos que tratan
las acciones y los eventos. Escogiendo la combinación adecuada, podremos desarrollar prácticamente cualquier tipo
de interfaz.

Por último, en este tema también hemos visto la generación y aplicación de pruebas unitarias, imprescindibles para
garantizar la implantación correcta de cualquier tipo de desarrollo.

Resolución del caso práctico de la unidad.

Ahora que tenemos un diseño bastante avanzado de la base de datos para la tienda de nuestro amigo, nos plantea
una nueva cuestión en con la que podemos ayudarle.

Le gustaría saber cómo gestionar la información de la base de datos, modificando, añadiendo y eliminando elementos
sobre las tablas que la componen (Clientes, Almacén, Empleados…).

• ¿Cómo podríamos ayudarle a realizarlo?

En el ámbito de la programación, los eventos están asociados a las acciones que realizan los usuarios para interactuar
con la interfaz o bien a los sucesos que se quieren controlar para dar respuesta a ellos.

Existen múltiples tipos de eventos. Además de hacer clic con el ratón, otros eventos muy utilizados son el movimiento
del ratón y escribir con el teclado.

La implementación de interfaces con Java tiene asociada una funcionalidad que permite detectar diferentes tipos
de eventos. Estos programas pueden detectar desde el tipo de evento (clic, desplazamiento del ratón, pulsación del
teclado…) hasta el componente con el que se ha interactuado (botón, menú desplegable, completar el campo de
un formulario…).

/ 13. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces. (1.a ed.). Madrid: Síntesis.
DESARROLLO DE INTERFACES
TÉCNICO EN DESARROLLO DE APLICACIONES
MULTIPLATAFORMA

Creación de
componentes

04
 / 1. Introducción y contextualización práctica 3

/ 2. Desarrollo de software en componentes. Reutilización

de software 4

/ 3. Concepto de componentes y características 4

/ 4. Propiedades y atributos 5

/ 5. JavaBean. Características 6

/ 6. Creación de un nuevo componente JavaBean 7

/ 7. Extender la apariencia y comportamiento de los controles

en modo diseño 8

/ 8. Integración de un nuevo componente. Empaquetado 9

/ 9. Herramientas para el desarrollo de componentes visuales 11

/ 10. Graphics y figuras 12

/ 11. Imágenes 13

/ 12. Casopráctico 1: “Interfaz metro” 14

/ 13. Caso práctico 2: “Formas básicas de la clase Graphics” 14

/ 14. Resumen y resolución del caso práctico de la unidad 16

/ 15. Bibliografía 16

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
 Identificar las herramientas para el diseño y prueba de componentes.

Crear componentes visuales.

Definir sus propiedades y asignar valores por defecto.

Documentar los componentes creados.

/ 1. Introducción y contextualización práctica

El desarrollo de interfaces gráficas no solo permite la inclusión de componentes ya existentes, sino que nos permite
la creación de nuevos elementos que se ajusten a las características de nuestro proyecto. Habitualmente, se utilizan
los componentes recogidos en las distintas librerías gráficas, y gracias a la herencia se pueden tomar como base para
el desarrollo de futuros componentes.

Todo componente supone un elemento JavaBean, el cual presenta ciertas características que definen su
funcionamiento, como son la introspección y la reflexión, así como la posibilidad de customización y la generación
de una comunicación activa entre el usuario y la interfaz a través de los eventos.

La integración de cualquier componente se basa en la generación de un archivo Jar que puede ser importado en
cualquier entorno de desarrollo, permitiendo así el uso de sus componentes.

En cuanto al diseño gráfico, existe una librería denominada Graphics, a

través de la cual se podrán realizar múltiples diseños gráficos sobre ventanas
y paneles.

La combinación entre componentes, ya sean los incorporados en las librerías

de desarrollo gráfico, en la creación de nuevos elementos, o en el uso de
librerías gráficas, permiten diseñar multitud de escenarios que se adaptan a
cada casuística concreta.

Los componentes presentan unas características y propiedades ya definidas,

pero es posible crear nuevos utilizando los ya existentes, modificando y
adaptando aquellos elementos necesarios.

A continuación, vamos a plantear un caso a través del cual podremos Fig. 1. Componentes visuales más utilizados de
aproximarnos de forma práctica a la teoría de este tema. la librería Swing.

Audio intro. “Creación y utilización de

componentes visuales en interfaces”
https://bit.ly/2DhGgVK
 TEMA 4. CREACIÓN DE COMPONENTES
Desarrollo de interfaces /4

/ 2. Desarrollo de software en componentes.

Reutilización de software
Crear un componente consiste en crear un bloque de software reutilizable, es decir, se va a implementar un elemento
a través de un determinado lenguaje de programación que va a poder ser utilizado en cualquier otro proyecto. Los
componentes que se vieron en el tema 2 son bloques de código reutilizable, es decir, los componentes de la librería
Swing son módulos ya desarrollados que pueden ser utilizados en cualquier proyecto que requiera de diseño gráfico.

Cuando hablamos de reutilización del código, nos referimos a la reutilización de librerías, frameworks o kit
de herramientas.

Para el desarrollo de interfaces gráficas visto hasta ahora con Swing, se han tomado algunos de los componentes
ya implementados y se han personalizado modificando algunas de sus propiedades. Ahora bien, utilizando como
base estos elementos ya desarrollados se podrán crear otros nuevos que presenten otras características que el
componente tomado como referencia no incorpora. El desarrollo de cero de un componente requeriría de líneas y
líneas de código. En la actualidad, se toman como base los ya implementados y se les incorporan ciertas mejoras.

Son múltiples los beneficios que supone la reutilización de módulos software:

• Debido a la disminución del tiempo necesario para el desarrollo se reducen los costes del proyecto.
Normalmente, el coste total de un desarrollo está estrechamente ligado al tiempo necesario para su creación.

• Las pruebas de software se simplifican, puesto que los módulos

reutilizados ya se habrán probado previamente. De esta forma, solo
será necesario someter a pruebas a los nuevos desarrollos.

• Mejora la calidad del software. Este beneficio es uno de los más

importantes, puesto que en cada nueva implementación, un módulo
ya creado podrá ser adaptado a nuevas casuísticas que se incorporarán
a las anteriores.

Podemos hablar de la reutilización de software a tres niveles: en primer lugar, a

nivel de clase cuando hablamos de clases y algoritmos, en segundo lugar, a nivel Fig. 2. Ilustración de reutilización de código y
de diseño a través de los patrones de diseño, y finalmente, a nivel de arquitectura. componentes.

/ 3. Concepto de componentes y características

Un componente es un módulo de código ya implementado y reutilizable que puede interactuar con otros
componentes software a través de las interfaces de comunicación.

Los componentes permiten la implementación de sistemas utilizando componentes ya desarrollados, y por tanto,
probados, lo que conlleva a una notable reducción del tiempo de implementación y los costes asociados.

Para conseguir una reutilización eficiente del software es necesario que esta esté definida de la manera más
generalizada posible, puesto que a partir de los componentes más generales se podrían implementar múltiples
versiones modificadas.

Atendiendo al diseño gráfico con JSwing, cuando hablamos de un componente, nos referimos a alguno de los
elementos que se sitúan en la ventana, directamente sobre el JFrame y JDialog, o sobre un JPanel, y que le aporta
funcionalidad a la interfaz, o, de lo contrario, solo tendríamos una ventana abierta sin más.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

Para diseñar un buen componente, es deseable que presente ciertas características:

• La implementación puede estar realizada con cualquier lenguaje de programación, pero ha de estar completa.

• Constituye un módulo reutilizable, ya compilado.

• Su distribución se realiza en un solo paquete ejecutable.

La metodología de programación basada en el uso de elementos reutilizables recibe el nombre de Programación

Basada en Componentes (POC).

Todos los tipos de componentes visuales que presenta la librería JSwing se muestran a continuación, a modo de
resumen. Se podrá tomar cualquiera de ellos para desarrollar uno nuevo desde cero.

OBJECT

COMPONENT

CONTAINER

PANEL WINDOW JCOMPONENT

APPLET DIALOG FRAME JWINDOW

JAPPLET JDIALOG JFRAME

ABSTRACTBUTTON JTOOLBAR JLABEL TEXTCOMPONENT JPANEL JOPTIONPANE

JBUTTON JMENUITEM JTEXTFIELD JTEXTAREA JCOMBOBOX

JTOGGLEBUTTON

JCHECKBOX JRADIOBUTTON JMENU

Fig. 3. Esquema tipos de componentes de la librería Swing.

/ 4. Propiedades y atributos
Las propiedades de un componente definen los datos públicos que forman la apariencia y comportamiento
del objeto. Las propiedades pueden modificar su valor a través de los métodos que definen el comportamiento
de un componente.

Por ejemplo, si hablamos de un componente tipo JButton, una de sus propiedades será font, la fuente del texto que
aparece dentro del elemento. Este valor será consultado o modificado a través de métodos tales como setFont (…).

Los métodos clave que permiten analizar el contenido de una propiedad o atributo son los de tipo get, mientras que
para modificar su valor se utilizan los métodos set.
 TEMA 4. CREACIÓN DE COMPONENTES
Desarrollo de interfaces /6

Ámbito público Ámbito privado Ámbito estático

Una propiedad de ámbito Una propiedad de tipo privada Pueden ser utilizadas sin la
público puede ser utilizada desde solo es accesible desde la necesidad de crear una instancia
cualquier parte de la aplicación. clase donde se ha creado. del objeto al que está referida.

Tabla 1. Tipos de ámbitos de propiedades.

Se distinguen principalmente dos tipos de propiedades: simples e indexadas.

• Las propiedades simples son aquellas que representan solo un valor. Es el caso de los atributos sencillos como
los de tipo string, int o boolean, entre otros.

JCheckBox checkBox = new JCheckBox(“OK”);

checkBox.setSelected(true);

Código 1. Ejemplo de propiedad simple.

• Las propiedades indexadas son aquellas que representan un conjunto de valores en forma de array. Por
ejemplo, cuando hablamos de un elemento tipo ComboBox, el listado de valores que se muestran en el menú
se recoge dentro de un array, por lo tanto, esta propiedad sería de tipo indexada.

JComboBox comboBox = new JComboBox();

comboBox.setModel(new
DefaultComboBoxModel(new String[]
{“1”, “2”, “3”}));

Código 2. Ejemplo de propiedad indexada.

Los atributos, aunque son similares a las propiedades, se utilizan para almacenar los datos internos y de uso privado
de una clase u objeto.

/ 5. JavaBean. Características
Para el desarrollo de interfaces a través del lenguaje de programación Java, los componentes software que permiten
su reutilización reciben el nombre de JavaBeans. Estos pueden ser representados gráficamente o, por el contrario,
no presentar ninguna interfaz visual. Prácticamente, todos los componentes y elementos de la paleta gráfica vista
en el entorno de diseño son módulos de tipo JavaBean.

JavaBean es el primer modelo para el desarrollo de componentes de Java e implementa el modelo Propiedad-Evento-
Método, es decir, podemos decir que sus características distintivas son: los métodos, las propiedades y los eventos.

Los componentes desarrollados como JavaBean presentan un conjunto de características comunes:

• Introspection. La herramienta de desarrollo podrá analizar en profundidad el funcionamiento

concreto del JavaBean. La clase BeanInfo ofrece un soporte en el que se recoge información sobre
características adicionales.

• Persistence. Cualquier nuevo componente JavaBean podrá ser almacenado para ser utilizado
posteriormente en cualquier proyecto. La persistencia se logra gracias a la serialización del componente
(implements Serializable).
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

• Customization. Será posible modificar casi cualquier propiedad

y comportamiento del componente durante su implementación.
Para llevar a cabo el nuevo diseño, será posible utilizar código o las
propiedades de la vista de diseño.

• Events. El componente podrá tener asociadas unas acciones como

respuesta a un estímulo. Se trata de una de las características más
relevantes de los JavaBean, los eventos o sucesos, a través de los
cuales es posible la comunicación entre componentes desarrollados
de forma completamente independiente. Fig. 4. Estructura de un componente JavaBean.

Audio 1. “Diferencia entre un JavaBean y

las clases de Java”
https://bit.ly/304lOkg

/ 6. Creación de un nuevo componente JavaBean

Dado que la creación de un nuevo componente desde cero requiere de muchas líneas de código, lo habitual es utilizar
otros componentes ya desarrollados e introducirles mejoras y otros cambios que se adapten a nuevas casuísticas. En
este apartado se detalla el proceso completo para la creación de un componente de esta forma.

En primer lugar, es necesario crear un nuevo proyecto para la creación de un nuevo componente. A continuación,
para tomar como referencia un componente ya creado, utilizaremos la herencia, es decir, el nuevo extenderá del
base. Para implementar la herencia, como seguro que ya conoces de la asignatura de Programación, utilizaremos la
palabra reservada extends, seguida del nombre de la clase de la que se hereda.

public class NuevoComponente extends ComponenteBase{};

Código 3. Extensión con herencia.

Para la creación de un nuevo componente, la clase que lo implementa ha de ser de tipo JavaBean, por lo que se tienen
que cumplir dos características básicas:

1. iene que implementar Serializable:

public class NuevoComponente extends ComponenteBase implements

Serializable {}

Código 4. Implementación Serializable.

2. Ha de tener un constructor sin parámetros:

public class NuevoComponente extends ComponenteBase implements

Serializable {
public NuevoComponente(){}
}

Código 5. Constructor sin parámetros.

 TEMA 4. CREACIÓN DE COMPONENTES
Desarrollo de interfaces /8

Para definir el nuevo comportamiento, será necesario implementar la nueva funcionalidad, es decir, los métodos.

Es habitual utilizar alguno de los ya existentes y sobrescribir su contenido añadiendo nuevo código. Para
redefinir el comportamiento, se utiliza la palabra reservada @Override, seguido del mismo nombre del método
en la clase de referencia.

@Override
protected void nuevoMetodo ( … )
{
super.nuevoMetodo( … );
}

Código 6. Sobrescribir un método.

Recuerda que si quieres mantener la misma funcionalidad que el método del componente base, se utiliza el
constructor de la clase padre de la que se hereda (super) y, a continuación, se añade la nueva implementación.

/ 7. Extender la apariencia y comportamiento de los

controles en modo diseño
Al igual que ocurría con los componentes ya creados, el nuevo componente deberá incorporar aquellas propiedades
que el que se ha tomado como base no tiene. Es decir, si se va a implementar un nuevo botón, habrá que crear solo
las propiedades, pero no habrá que implementar las que ya posee el botón base, como pueden ser el tipo de texto
o el color de la fuente.

La creación de estas propiedades se realiza de la forma habitual en la que se implementan los atributos de cualquier
objeto en Java, se añade en la parte superior de la clase.

public class NuevoComponente extends ComponenteBase implements

Serializable {
private tipo(int, String,…) nombrePropiedad;
public NuevoComponente(){}
}

Código 7. Creación de propiedades.

A continuación, se incorporan los métodos set y get a la clase. Estos métodos son muy importantes, puesto que son
los que permiten modificar y recuperar el valor de los atributos.

public class NuevoComponente extends ComponenteBase implements

Serializable {
private tipo (int, String,...) nombrePropiedad;
public NuevoComponente (){}
public void setNombrePropiedad (tipo nombrePropiedad){
this.nombrePropiedad=nombrePropiedad;
}
public tipo getNombrePropiedad(){
return nombrePropiedad;
}
}
Código 8. Métodos get y set.

Desde el menú de propiedades de vista de diseño ya aparecerán, si todo se ha hecho de forma correcta, todos los
atributos del nuevo componente.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

Por ejemplo, en el siguiente caso, se ha creado un nuevo componente basado en JTextField que incorpora una nueva
propiedad booleana bajo el nombre booleanColor.

Fig. 5. Nuevo componente basado en un JTextField.

/ 8. Integración de un nuevo componente. Empaquetado

Para agregar un nuevo componente a la paleta de diseño, bien desarrollado por nosotros, o implementado por otros,
en primer lugar, es necesario disponer del Jar del componente.

En el caso de utilizar el nuevo componente creado en los apartados anteriores, los pasos para generar un Jar desde
Eclipse son:

1. Crea un paquete (package) y coloca la clase o clases implementadas del nuevo componente dentro del
paquete.

2. Desde el menú de herramientas, limpiamos y construimos el proyecto. (Project>Clean y Project>Build project).

3. A continuación, accedemos a la opción Export del proyecto donde se ubica el nuevo componente (pulsando
con el botón derecho sobre el nombre del proyecto) y escogemos la opción Jar File, situada dentro de la
carpeta Java. Finalmente, indicamos un nuevo nombre para el archivo Jar y se guarda.

Ahora, para incluir el componente en un nuevo proyecto, en primer lugar, se añade a las librerías el archivo Jar creado o
descargado. Esto se realiza a través de la opción Build Path (botón derecho sobre el nuevo proyecto) y, a continuación,
Configure Build Path. Finalmente, sobre Classpath, añadimos el Jar utilizando la función Add external jars.

Por último, se incluye el componente en la paleta de la zona de diseño, Palette (aunque el proceso de incorporación
se realiza desde un proyecto específico), y el nuevo elemento quedará incluido de forma permanente.
 TEMA 4. CREACIÓN DE COMPONENTES
Desarrollo de interfaces / 10

Con el botón derecho, pulsamos sobre la categoría donde se va a incluir el nuevo componente y, a continuación,
Add component.

Fig. 6. Añadir un nuevo componente.

Si la inclusión de la librería se ha realizado correctamente al buscar el nombre de la clase, este debe aparecer. Se
selecciona y se pulsa OK en las dos ventanas.

Fig. 7. Búsqueda de la clase del nuevo componente.

Vídeo 1. “Cómo añadir un componente

gráfico al modo Design de Eclipse”
https://bit.ly/30VnJGZ
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

/ 9. Herramientas para el desarrollo de componentes

visuales
El desarrollo y creación de elementos visuales para su inclusión en el diseño de una interfaz requiere del uso de
herramientas para el diseño gráfico.

Existen multitud de herramientas en la actualidad que pueden utilizarse para la edición de imágenes, desde algunas
más profesionales como Adobe Photoshop hasta otras que permiten realizar un amplio conjunto de acciones,
suficientes para el desarrollo de gráfico de ciertos componentes. Veamos algunas de ellas:

A) GIMP

En primer lugar, podemos utilizar GIMP. Se trata de un programa de edición de imágenes gratuito. Permite la edición
de representaciones digitales en forma de mapa de bits, dispone de tijeras inteligentes, filtros, la posibilidad del uso
de capas, entre otras muchas características.

B) Paint o Pinta

Microsoft Paint o Pinta son herramientas similares entre sí, que incluyen opciones sencillas que permiten una edición
de calidad para aquellos casos en los que no se necesita algo demasiado profesional. Microsoft Paint incluye, en su
nueva versión, funcionalidades para el diseño 3D.

C) Photoshop

Adobe Photoshop es una de las herramientas para la edición de imágenes más reconocidas y utilizadas en la
actualidad. Una de las funcionalidades más importantes que incorpora esta aplicación es el uso de capas, mediante
las cuales es posible aplicar a la imagen multitud de efectos y tratamientos. Algunas de sus características son:

• Elevada potencia de procesamiento de imágenes, lo que la hace muy adecuada para el entorno profesional.

• Permite elaborar diseños desde cero.

• Incluye un sistema de capas que permite crear imágenes muy atractivas.

• Soporta muchos tipos de formatos.

• Sistema de filtros, efectos, eliminación del ruido, retoque de la imagen…

Fig. 8. Logo GIMP. Fig. 9. Logo Photoshop.

 TEMA 4. CREACIÓN DE COMPONENTES
Desarrollo de interfaces / 12

/ 10. Graphics y figuras

Además de la inclusión de componentes ya predefinidos, a través de la clase Graphics de Java es posible dibujar
sobre la interfaz manejando los píxeles como si de un lienzo en blanco se tratara. Graphics se encuentra bajo la
librería AWT. Dos de los métodos esenciales para dibujar son:

paint (Graphics nombre) update (Graphics nombre)

Se utiliza para dibujar sobre la interfaz la

primera vez que se muestra, cuando se
maximiza, o cuando vuelve a estar visible.

Todos los componentes utilizan este Se utiliza para actualizar los gráficos
método para dibujar su “forma”. dibujados sobre la interfaz.

Si se crea un nuevo componente a partir de

otro y se quiere modificar su diseño gráfico,
se debe sobrescribir este método.

Tabla 2. Métodos de la clase Graphics

Uno de los elementos más importantes de esta clase es el atributo Color, el cual, a través del método setColor (Color
c), permite definir el trazo de la figura que se va a diseñar.

Por otra parte, es posible añadir figuras geométricas sobre la interfaz de diseño. Los métodos utilizados son
draw y fill. El primero dibuja el perímetro de la figura indicada, mientras que el segundo, además, lo rellena del
color señalado.

drawRec (int x, int y, drawOval (int x, int y, drawPolygon (int [] x1,

drawLine (int x1, int int width, int height) int width, int height) int [] y1, int nPoints)
y1, int x2, int y2) fillRec (int x, int y, int fillOval (int x, int y, int fillPolygon (int [] x1,
width, int height) width, int height) int [] y1, int nPoints)

Dibuja un rectángulo
Dibuja una elipse desde la Dibuja un polígono
desde la posición
posición inicial marcada utilizando el array de
inicial marcada por las
por las coordenadas coordenadas x e y pasado
Dibuja una línea desde la coordenadas x e y, y con la
x e y, y con la altura por parámetro. De la
posición inicial marcada altura y ancho indicados.
y ancho indicados. misma forma que en casos
por las coordenadas x1 e En el caso del segundo
fillOval crea y rellena la anteriores, fillPolygon
y1 hasta la final x2 e y2. método, se rellena
elipse del mismo color realiza el diseño relleno
del mismo color que del mismo color que la
que el definido para
el definido para la línea de perímetro.
la línea del borde.
línea del borde.

Tabla 3. Métodos para crear figuras.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

/ 11. Imágenes
Los componentes destinados a la creación de ventanas, paneles u otros contenedores no incluyen la opción de
cargar a través de una URL una imagen de fondo. Ahora bien, utilizando los métodos propios de la clase Graphics y
añadiendo ciertas modificaciones sería posible incorporar esta funcionalidad, hablamos del método paint.

En el siguiente fragmento de código, en primer lugar, se realiza un llamamiento al método paint utilizando la palabra
reservada super, por lo tanto, se está haciendo un llamamiento al constructor de la superclase.

super.paint(g);

A continuación, se crea una instancia de la clase Toolkit, esto permite asociarle una imagen a través de su URL
completa a un objeto de tipo Image.

Toolkit t = Toolkit.getDefaultToolkit ();

Image imagen = t.getImage (“rutaCompleta”);

Para mostrar la imagen cargada se utiliza el método drawImagen de la clase Graphics, el cual recibe, también por
parámetro, la posición exacta en la que la imagen se va a dibujar.

g.drawImage(imagen, coordenadaX, coordenada Y, ancho, altura, this);

Si no se indica el valor correspondiente a las dimensiones de la imagen, se cargará la imagen con el tamaño con la
que ha sido guardada. Es aconsejable ajustarlo a la ventana, puesto que de lo contrario la imagen se vería incompleta.

En el siguiente fragmento de código se ha utilizado una imagen cuyas dimensiones exceden el tamaño de la ventana,
por lo que se han ajustado al tamaño del frame maximizado.

public void paint(Graphics g){

super.paint(g);
Toolkit t=Toolkit.getDefaultToolkit();
Image i = t.getImage(“…/imagen.jpg”);
int ancho=(int)(t.getScreenSize().getWidth());
int alt=(int)(t.getScreenSize().getHeight());

g.drawImage(i, 0, 0, ancho, alt, this);

}

Código 9. Ejemplo de inclusión de imagen ajustando su tamaño.

Vídeo 2. “Interfaz de edición de

márgenes de fotografías con la clase
Graphics”
https://bit.ly/2X3cICu
 TEMA 4. CREACIÓN DE COMPONENTES
Desarrollo de interfaces / 14

/ 12. Casopráctico 1: “Interfaz metro”

Planteamiento: Se ha recibido un encargo de la Red de Transporte Regional de Metro para desarrollar una
interfaz que permita recargar el abono mensual de transporte. Para que la recarga sea rápida e intuitiva, la
interfaz debe tener un menú desplegable con los meses del año para poder seleccionar el mes que se quiere
recargar en el abono.

Nudo: La mejor manera de controlar la fecha introducida en una interfaz es con un calendario en el que el usuario
solo tenga que hacer clic para seleccionar el año, mes o día. De esta forma, además, es sencillo poder recuperar
los valores seleccionados para trabajar con ellos. En este caso, como la librería Java Swing no trae por defecto este
componente, se ha importado la librería JCalendar para poder utilizar el componente JMonthChooser.

Para agregar un nuevo componente a la paleta de diseño, en primer lugar, es necesario disponer del Jar del
componente. Los pasos necesarios a seguir son:

1. Incluir el componente en el proyecto, añadiendo las librerías del archivo Jar descargado. Desde la opción Build
Path, Configure Build Path. Sobre Classpath añadimos el Jar utilizando la función Add external jars.

2. Incluir el componente en la paleta de la zona de diseño. Para ello, con el botón derecho, pulsamos sobre la
categoría donde se va a incluir el nuevo componente y, a continuación, Add component.

3. Declarar el componente.

private JMonthChooser monthChooser;

4. Instanciar el componente.

private JMonthChooser monthChooser;

5. Ubicarlo y agregarlo al panel.

monthChooser.setBounds...
panel.add(monthChooser);

Desenlace:

Fig. 10. Componente JMonthChooser del caso

práctico 1.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 15 MEDAC · Instituto Oficial de Formación Profesional

/ 13. Caso práctico 2: “Formas básicas de la clase

Graphics”
Planteamiento: En este ejercicio se va a practicar con un óvalo verde, un rectángulo amarillo y un triángulo
naranja realizados con la clase Graphics de Java. Partimos de un código base de un JFrame con un constructor del
siguiente tipo:

public class Grafico1 extends JFrame {

private JPanel contentPane;
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Grafico1 frame = new Grafico1();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
…
public Grafico1({
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(null);
setBounds(0,0,800,600);
}
Código 10. Código base caso práctico 2.

Nudo: Los pasos a seguir para realizar este ejercicio serán:

1. Sobrescribir el método paint.

2. Llamar al método paint de la clase superior.

3. Activar el método del color que queramos, en este caso es verde.

4. Dibujar un óvalo desde la coordenada ‘x’ en 150 píxeles e ‘y’ en 70 píxeles. Con un radio en el eje ‘x’ de 50
píxeles y de 70 píxeles en el eje ‘y’.

5. Cambiar el color a amarillo.

6. Dibujar un rectángulo que comience en el eje ‘x’ en el píxel 350 y en el eje ‘y’ en el 70. De ancho que tenga
50 píxeles y de alto 70.

7. Cambiar el color a naranja.

8. Dibujar un triángulo utilizando el método fillPolygon indicando las posiciones en el eje ‘x’ de los tres vértices,
las posiciones de los tres vértices en el eje ‘y’.
 TEMA 4. CREACIÓN DE COMPONENTES
Desarrollo de interfaces / 16

Desenlace:

public void paint (Graphics g){

super.paint(g)
g.setColor (Color.green);
g.fillOval (150, 70, 50, 70);
g.setColor (Color.yellow);
g.fillRect (350, 70, 50, 70);
g.setColor (Color.orange);
int [] vx1 = {600, 650, 550};
int [] vy1 = {70, 120, 120};
g.fillPolygon (vx1, vy1, 3);
}
Código 11. Código desenlace caso práctico 2.

Fig. 11. Interfaz con las principales formas de Graphics del caso práctico 2

/ 14. Resumen y resolución del caso práctico de la

unidad
A lo largo de este tema, se han expuesto cuáles son las características principales que debe presentar todo
componente, esto es clave para comprender qué aspectos son esenciales en la creación de nuevos elementos.
A través de la implementación de componentes de ejemplo de manera práctica, se ha expuesto el flujo común
principal de desarrollo.

De la misma forma, la distribución y posterior integración de aquellos componentes que no se recogen en la paleta
básica de entorno de desarrollo, resultan esenciales para la creación de entornos de desarrollo personalizados que
se ajusten a las especificaciones de cada nuevo proyecto.

El diseño de interfaces no solo requiere de elementos con una funcionalidad específica, como los botones, los menús
o las cajas de texto, sino que serán útiles para mejorar la experiencia de uso de otros elementos más visuales, como
los que se pueden obtener a través de la librería Graphics, la cual nos permite “dibujar” sobre la ventana multitud de
formas y otros elementos gráficos.

Resolución del caso práctico inicial

Durante el desarrollo de una interfaz, podemos hacer uso de los componentes visuales de los que disponga nuestro
entorno de desarrollo o crear nuestros propios componentes. Para resolver el caso inicial planteado, existen
varias opciones:

En primer lugar, sería posible utilizar componentes ya existentes en la paleta de Eclipse para la realización de un
calendario a través de la combinación de JTextField y JLabel. Los de tipo JTextField serán cajas de dos caracteres para
los días y los meses, y de cuatro caracteres para los años. Los JLabel se pueden utilizar para separar los campos de las
fechas con un símbolo como “/” o “_”.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 17 MEDAC · Instituto Oficial de Formación Profesional

Por otro lado, es posible utilizar un componente con la funcionalidad de la fecha ya incorporada, estamos hablando
de componentes externos que se pueden importar a nuestro entorno. Este es el caso de JDateChooser, que permite
hacer clic en el icono de un calendario y seleccionar la fecha deseada.

Fig. 12. Opciones para el componente calendario.

/ 15. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces (1.a ed.). Madrid, España: Síntesis.
DESARROLLO DE INTERFACES
TÉCNICO EN DESARROLLO DE APLICACIONES
MULTIPLATAFORMA

Generación de
interfaces a partir de
documentos XML

03
 / 1. Introducción y contextualización práctica 4

/ 2. Lenguajes de descripción de interfaces basados en XML 5

2.1. XHTML 5
2.2. GML 6
2.3. MathML 6
2.4. RSS 7
2.5. XSLT 7
2.6. SVG 7

/ 3. El documento XML. Análisis y edición 9

3.1. Etiquetas 10
3.2. Atributos 10
3.3. Valores 10

/ 4. Eventos 11

/ 5. Herramientas para la creación de interfaces de usuario

multiplataforma 12
5.1. Notepad ++ 12
5.2. Atom 13
5.3. Adobe Dreamweaver CC 14
5.4. Visual Studio Code 14

/ 6. Generación de código para diferentes plataformas 15

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
/ 7. Caso práctico 1: “Generación de un logo con
gráficos vectoriales escalables” 15

/ 8. Caso práctico 2: “Estructura documento XML” 16

/ 9. Resumen y resolución del caso práctico de la unidad 17

/ 10. Bibliografía 18
 Reconocer las ventajas de generar interfaces de usuario a partir de su descripción
XML.

Generar la descripción del interfaz en XML usando un editor gráfico.

Analizar el documento XML generado.

Modificar el documento XML.

Generar el código correspondiente al interfaz a partir del documento XML.

Programar una aplicación que incluya la interfaz generada.

/ 1. Introducción y contextualización práctica

En la actualidad, la generación de sistemas que permitan compartir todo tipo de información de una forma fiable y
sin un coste elevado resulta clave. Esto es posible a través de la tecnología XML, la cual permite esta compatibilidad
entre sistemas, puesto que puede utilizarse en bases de datos, editores de textos, hojas de cálculo y diferentes
plataformas.

Este lenguaje hoy en día es muy importante por diversos usos, entre los que destacan:

• Intercambio de información entre aplicaciones: al almacenar información mediante documentos de texto

plano, no se requiere software especial.

• Computación distribuida: se trata de la posibilidad de utilizar XML para intercambiar información entre
diferentes ordenadores a través de redes.

• Información empresarial: este lenguaje tiene cada vez más

importancia para generar interfaces empresariales gracias a la
facilidad de estructurar los datos de la forma más apropiada para
cada empresa.

El propósito de este tema es servir de guía para generar interfaces a partir

de documentos XML, para lo cual se estudiarán los lenguajes basados en
XML y los principales editores de documentos XML.

Escucha el siguiente audio donde contextualizaremos el caso práctico del

tema y que encontrarás resuelto en el último apartado de la unidad: Fig. 1. Usos del lenguaje XML.

Audio intro. “Creación de interfaces a

partir de documentos XML”
https://bit.ly/2DQNcd7
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

/ 2. Lenguajes de descripción de interfaces basados en

XML
XML (eXtensible Markup Language) es un lenguaje utilizado para estructurar, almacenar e intercambiar datos
entre distintas plataformas. Al ser un metalenguaje, puede emplearse para definir otros lenguajes. Entre los más
importantes, actualmente se encuentran XHTML, GML, MathML, RSS y SVG.

2.1. XHTML
XHTML (eXtensible HyperText Markup Language) es un lenguaje derivado de XML similar a HTML, pero con
algunas diferencias que lo hacen más robusto y aconsejable para la modelación de páginas web.

Los documentos XHTML tienen que cumplir como elementos obligatorios:

• <! DOCTYPE>

• El atributo xmlns en <html>

• <html>, <head>, <title> y <body>

Además, la implementación de los elementos ha de cumplir un conjunto de características de diseño:

• Tienen que aparecer correctamente anidados.

• Deben estar cerrados.

• Siempre deben estar en minúsculas los elementos y los nombres de los atributos.

• Los valores de los atributos siempre se deben citar.

• La minimización de atributos está prohibida.

En el siguiente ejemplo se muestra el prototipo de un documento redactado con formato XHTML en el que podemos
comprobar que se cumplen todas las características descritas.

Fig. 2. Código ejemplo XHTML.

 TEMA 3. GENERACIÓN DE INTERFACES A PARTIR DE DOCUMENTOS XML
Desarrollo de interfaces /6

2.2. GML
GML (Geography Markup Language). Cualquier documento GML puede recibir un formato que define el tipo de
texto que es (títulos, párrafos, listas…). Estos tipos de documentos están compuestos de marcas precedidas de
doble punto(:). En el siguiente ejemplo se muestra un listado de lenguajes definidos a partir del lenguaje XML.

:h1.Capítulo 1.- Lenguaje XML

:p.Lenguajes de descripción de interfaces basados en XML
:ol
:li.GML
:li.MathML
:li.RSS
:li.SVG
:li.XHTML
:eol.

Código 1. Implementación ejemplo GML.

2.3. MathML
El lenguaje MathML (Mathematical Markup Language) se usa junto con el lenguaje XHTML y se basa en el
intercambio de información de tipo matemático entre programas. En el siguiente ejemplo se muestra la fórmula
matemática a2+b2=c2 escrita en lenguaje MathML.

<math>
<mrow>
<mi>a</mi>
<mn>2</mn>
<mo>+</mo>
<mi>b</mi>
<mn>2</mn>
<mo>=</mo>
<mi>c</mi>
<mn>2</mn>
</mrow>
</math>

Código 2. Implementación ejemplo MathML.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

2.4. RSS
El lenguaje RSS (Really Simple Syndication) tiene como objetivo principal la difusión de información entre los
usuarios suscritos a una fuente de contenidos actualizada frecuentemente. Los programas de este tipo suelen estar
compuestos por novedades del sitio web, el título, fecha de publicación o descripción. En el siguiente ejemplo se
muestra una noticia publicada en lenguaje RSS.

<?xml version=“1.0” encoding=“UTF-8” ?>

<rss version=“2.0”>
<channel>
<title>Última hora</title>
<description>Noticia importante
</desciption>
<link>https://elpais.com/ultimas-noticias/
</link>
<lastBuildDate>Mon, 06 Jan 2020 00:10:00
</lastBuildData>
<pubDate>Mon, 06, Jan 2020 16:20:00
+0000
</pubDate>
</channel>
</rss>

Código 3. Implementación ejemplo RSS.

2.5. XSLT
XSLT (eXtensible Stylesheet Languaje for Transformation) podríamos decir que se trata de las hojas de estilo CSS,
pero dirigidas a XML. Presenta un funcionamiento más completo que CSS, puesto que permite agregar o eliminar
elementos y atributos desde un archivo.

Además, permite realizar pruebas e, incluso, tomar decisiones sobre los elementos que se han de mostrar u ocultar.

2.6. SVG
SVG corresponde a Scalable Vector Graphics (o Gráficos Vectoriales Escalables). Este lenguaje permite representar
elementos geométricos vectoriales, imágenes de mapa de bits y texto. En los siguientes ejemplos se muestra la
creación de diferentes elementos gráficos utilizando el lenguaje vectorial.

Ejemplo 1:

<!DOCTYPE html>
<html>
<body>

<svg height=”100” width=”100”>

<circle cx=”50” cy=”50” r=”40” stroke=”black”
stroke-width=”3” fill=”cyan” />

Lo siento, tu navegador no es compatible con SVG.

</svg>
</body>
</html>

Código 4. Implementación
 TEMA 3. GENERACIÓN DE INTERFACES A PARTIR DE DOCUMENTOS XML
Desarrollo de interfaces /8

Otras de las formas geométricas más utilizadas en SVG son el cuadrado, la elipse, la línea, la polilínea y el polígono.

Ejemplo 2:

<svg width=”60” height=”60”>

<rect x=”0” y=”0” width=”60” height=”60” fill=”red”/>
</svg>

Código 5. Implementación ejemplo SVG cuadrado

Ejemplo 3:

<svg width=”60” height=”60”>

<ellipse cx=”30” cy=”30” rx=”20” ry=”16” fill=”orange”/>
</svg>

Código 6. Implementación ejemplo SVG elipse.

Ejemplo 4:

<svg width=”60” height=”60”>

<polygon fill=”green” stroke=”black” stroke-width=”2”
points=”05,30 15,10 25,30”/></

Código 7. Implementación ejemplo SVG polígono.

Vídeo 1. “Gráficos vectoriales

escalables”
https://bit.ly/30gHsAH
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

/ 3. El documento XML. Análisis y edición

Seguro que ya has aprendido en otras asignaturas que un fichero XML es un archivo en formato texto que contiene
etiquetas para identificar los elementos, así como datos que componen el documento donde se representa la
información. Lo primero que hay que tener en cuenta a la hora de definir un fichero XML es que la primera línea del
fichero debe ser la siguiente:

<?xml version=”1.0” encoding=”UTF-8”?>

• Version: indica la versión de XML que se está empleando.

• Encoding: especifica el juego de caracteres con el que se ha codificado el documento.

El resto del documento XML se escribirá con etiquetas, y siempre hay que abrirlas y cerrarlas:

< etiq1> ....... </ etiq1>

< etiq2> ....... </ etiq2>

El conjunto formado por las etiquetas (apertura y finalización) y el contenido se conoce como elemento o nodo (en
el caso de hacer una representación jerárquica de los datos).

Por ejemplo, el conjunto < nombre> Lucas </ nombre> es un elemento o nodo, con la etiqueta ‘nombre’ y el contenido
‘Lucas’. Puede darse el caso de que el contenido de un elemento contenga otros elementos en lugar de los datos en
formato de texto, pero no podrá contener las dos cosas: los otros elementos y datos en formato de texto.

Este tipo de estructura de documento con las etiquetas y los atributos implica que debemos tener mucho cuidado en
la forma de almacenar la información, ya que debemos estructurar muy bien el documento y ordenar adecuadamente
las informaciones.

Fig. 3. Estructura de un XML

Un documento XML tiene una estructura anidada de manera jerárquica. Hay que prestar especial atención a la
apertura y cierre de todas las etiquetas para que queden todas cerradas. Es habitual que los elementos tengan otros
vinculados, es decir, elementos que descienden de él. En estos casos, las etiquetas de los descendientes/hijos deben
cerrarse antes que la del padre.

Para lograr esto, será necesario que la estructura jerárquica se cumpla de manera estricta con respecto a las
etiquetas que se utilizan en el documento. Es decir, todas las etiquetas abiertas deben haber sido cerradas en el
orden adecuado. Los valores de los datos o contenidos de los nodos se encuentran entre el texto que indica la
apertura de la etiqueta y lo que indica el cierre.
 TEMA 3. GENERACIÓN DE INTERFACES A PARTIR DE DOCUMENTOS XML
Desarrollo de interfaces / 10

3.1. Etiquetas
Las etiquetas XML son marcas que sirven para diferenciar un contenido específico del resto del contenido del
documento. Una etiqueta empieza con el carácter ‘<”, continúa un nombre identificativo, y termina con el carácter
“>”. El nombre de una etiqueta siempre debe empezar por una letra, pero, a continuación, pueden utilizarse: letras,
dígitos, guiones, rayas, punto o dos puntos. Existen tres tipos de etiquetas:

• Start-Tag: Etiquetas de apertura. (<etiqueta>)

• End-Tag: Etiquetas de cierre, similar a las de apertura, pero comienzan por “/”. (</etiqueta>)

• Empty-Tag: Etiquetas vacías, que terminan por “/”. (<etiqueta_vacía />)

3.2. Atributos
Un atributo es un componente de las etiquetas que consiste en un par ‘nombre=valor’. Se puede encontrar en las
etiquetas de apertura o en las etiquetas vacías, pero no en las de cierre. Hay que tener en cuenta que en una misma
etiqueta no pueden existir dos atributos con el mismo nombre, y todos los atributos de un elemento siempre son
únicos. Por ejemplo:

<programadora nombre=”Augusta” apellido1=”Ada” apellido2=”King” />

En este caso tenemos tres atributos únicos, nombre, apellido1 y apellido2. En cambio, en el siguiente caso, no sería
correcto, dado que tenemos el atributo apellido repetido:

<programadora nombre=”Augusta” apellido=”Ada” apellido=”King”>

3.3. Valores
Tal y como se ha visto en el apartado anterior, el atributo de un elemento XML proporciona información acerca del
elemento, es decir, sirve para definir las propiedades de los elementos. La estructura de un atributo XML es siempre
un par de ‘nombre=valor’.

<biblioteca>
<texto tipo_texto=“libro” titulo=“Diseño de interfaces web”
editorial=“Síntesis”>
<tipo>
<libro isbn=“9788491713241” edicion=“1”
paginas=“210”/>
</tipo>
<autor nombre=“Diana García-Miguel López”/>
</texto>
</biblioteca>

Código 9. Ejemplo de una estructura de biblioteca XML.

En el ejemplo observamos que los elementos aparecen coloreados en rojo (biblioteca, texto, tipo), los nombres de
los atributos en negro (tipo_texto, título, editorial, isbn, edición, páginas) y sus valores en azul.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

/ 4. Eventos
Una interfaz, por sí sola, no puede saber en qué momento querrá el usuario llevar a cabo una determinada
funcionalidad. Para ello, existen lo que denominamos eventos, que dan lugar a interfaces dinámicas.

Los eventos proporcionan un mecanismo adecuado para tratar las diferentes formas interacción entre el usuario y la
aplicación, por ejemplo, cuando el usuario presiona una tecla o pulsa con el puntero del ratón. Ante la llegada de un
evento, en algunas ocasiones nos interesará tratarlo. Por ejemplo, la pulsación de un número en una aplicación que
presenta la funcionalidad de una calculadora. Otras veces no será necesario el tratamiento del evento con ninguna
acción, por ejemplo, cuando el usuario presiona con el ratón sobre un texto al que no hemos asignado ninguna
información complementaria.

Algunos de los eventos más comunes que se pueden producir en una aplicación, como interacción con las interfaces
gráficas son:

• MouseMove: evento producido al mover el ratón por encima de un control.

• MouseDown: este evento se produce al pulsar cualquier botón del ratón.

• Change: se produce al cambiar el contenido del control.

• Click: uno de los eventos más comunes, se produce al hacer clic sobre el control con el botón izquierdo del
ratón.

• GetFocus: evento producido cuando el elemento recibe el foco de atención, normalmente se utiliza para
introducir datos o realizar alguna operación en tiempo de ejecución.

• LostFocus: este evento se produce cuando el elemento de control pierde el punto de enfoque.

De igual modo, si queremos que un texto se ponga de color rojo al situarnos encima, y de color gris al salir, existen
otros eventos que podemos utilizar como MouseEntered y MouseExited; el primer evento se encargará de poner el
texto de color rojo y, el segundo, de ponerlo de color gris.

Fig. 4. Interfaz que permite interacciones utilizando eventos.

 TEMA 3. GENERACIÓN DE INTERFACES A PARTIR DE DOCUMENTOS XML
Desarrollo de interfaces / 12

/ 5. Herramientas para la creación de interfaces de

usuario multiplataforma
Los editores de XML que existen actualmente nos permiten escribir código de una forma rápida y eficiente.
Podemos utilizar desde un simple editor de texto hasta las últimas versiones de editores que contienen funciones
que analizaremos en este apartado.

Una de las características fundamentales que presentan los editores de XML son las facilidades de implementación
que ofrecen para escribir código resaltando la sintaxis, insertando elementos y estructuras de XML de uso común a
través de la función de autocompletado.

Atom Notepad++ Dreamweaver Visual Studio

Multinivel
Paneles
Control versiones
Libre
WYSIWYG
Tabla 1. Tabla comparativa de los editores.

5.1. Notepad ++
Editor de textos de propósito general que reconoce la sintaxis de múltiples lenguajes de programación. Es gratuito,
está disponible para Linux y Windows y su código fuente se puede descargar.

Fig. 5. Interfaz Notepad++.

Ha triunfado bastante entre la comunidad de desarrolladores web por las características que ofrece y por lo ligero
que es (ocupa poco espacio y es muy rápido). Se puede extender a través de plugins. Posee uno llamado XML Tools
que añade un nuevo menú con numerosas opciones como, por ejemplo, validar un documento XML con su DTD. Su
interfaz es minimalista, pero los desarrolladores pueden personalizarla.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

5.2. Atom
El editor Atom es una herramienta multinivel que sirve tanto para los usuarios que comienzan a programar, como
para uso profesional. Actualmente es uno de los editores preferidos para programadores. Se pueden añadir lenguajes
que no se incluyen de serie o añadir distintos tipos de interfaces gráficas.

Cada ventana de Atom es, en esencia, una página web renderizada localmente, y el espacio de trabajo se compone
de paneles que pueden recolocarse de manera flexible para que la programación resulte más cómoda.

Fig. 6. Interfaz de Atom.

5.2.1. Teletype

Atom tiene una manera de colaborar en tiempo real mediante la herramienta ‘Teletype’, la cual permite que
muchos desarrolladores puedan editar un archivo a la vez, en tiempo real. Son herramientas muy útiles cuando un
desarrollador tiene que trabajar de forma colaborativa con otras personas.

Su funcionamiento se basa en que el usuario con rol de anfitrión comparte su código con el resto de usuarios. Para
lograrlo, se utiliza un código generado por el anfitrión y que este comparte con los invitados. Cada uno de ellos podrá
editar el código compartido en tiempo real y visualizar las modificaciones del resto del equipo.

Fig. 7. Interfaz herramienta Teletype de Atom.

5.2.2. Git y GitHub

Todavía en Atom, queremos destacar una de las mayores ventajas de este editor de código, como son las herramientas
Git y GitHub, que permiten controlar distintas versiones de un proyecto mientras se está desarrollando. El proyecto
en el que estamos trabajando podrá sincronizarse automáticamente con el repositorio Git y podremos visualizar en
todo momento si estamos trabajando en la misma versión que se encuentra en el repositorio o qué diferencias
existen.
 TEMA 3. GENERACIÓN DE INTERFACES A PARTIR DE DOCUMENTOS XML
Desarrollo de interfaces / 14

5.3. Adobe Dreamweaver CC

Es uno de los editores que admite tanto el método textual como el WYSIWYG, del inglés What You See Is What
You Get (lo que ves es lo que obtienes). Esta es una frase aplicada a los editores de código que permiten escribir
un documento mostrando directamente el resultado final. Por lo tanto, tú eliges si quieres programar con una
presentación visual en vivo o seguir el camino clásico.

Fig. 8. Interfaz Dreamweaver.

Dreamweaver permite escribir código en todos los lenguajes de programación importantes. Totalmente integrado
en el ecosistema de software de Adobe, está disponible para Windows y OS X. Dispone de vista previa para que los
desarrolladores puedan programar mientras previsualizan el producto final. Además, permite confirmar el código y
accesibilidad de la página, característica que puede facilitarles seguir las pautas de accesibilidad de contenido web.

5.4. Visual Studio Code

Es uno de los editores de código fuente más utilizados. Es compatible con varios lenguajes de programación y está
disponible para Windows, Linux y macOS.

Fig. 9. Interfaz Visual Studio Code.

Una de sus principales características es el resaltado de sintaxis, además de la finalización inteligente de código,
la interfaz personalizable y que es gratuito (aunque dispone de una versión de pago más completa). Pertenece al
software de Visual Studio y una de las novedades más potentes que ofrece es el servicio Live Share, extensión que
permite compartir código base con un compañero de equipo, de forma que se puede colaborar en tiempo real.

Vídeo 2. “Crear una interfaz gráfica

desde un archivo XML en Eclipse”
https://bit.ly/3hh49vJ
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 15 MEDAC · Instituto Oficial de Formación Profesional

/ 6. Generación de código para diferentes plataformas

En la actualidad, ahora que existen cada vez más tipos de sistemas, uno de los problemas más relevantes a los que se
debe dar respuesta es al intercambio de datos entre sistemas incompatibles. El intercambio de datos con XML reduce
en gran medida la dificultad de este problema, dado que los datos pueden ser leídos por diferentes plataformas.

Al ser XML un lenguaje independiente de la plataforma, significa que cualquier programa diseñado para lenguaje
XML puede leer y procesar los datos XML independientemente del hardware o del sistema operativo que se esté
utilizando.

Gracias a su portabilidad, XML se ha convertido en una de las tecnologías más utilizadas como base para el almacenaje
de contenidos, como modelo de representación de metadatos, y como medio de intercambio de contenidos:

• XML para el almacenamiento de contenidos: en los últimos años está creciendo la demanda de bases de
datos XML nativas, es decir, bases de datos que almacenan y gestionan documentos XML directamente, sin
ningún tipo de transformación previa.

• XML como medio de intercambio de contenidos: la integración que permite el lenguaje XML en diferentes
plataformas se basa en la facilidad de intercambio de contenidos dado que, al utilizar documentos basados en
este lenguaje, se puede procesar para múltiples fines: como integración en una base de datos, visualización
como parte de un sitio web o mensajes entre aplicaciones.

• XML para la representación de metadatos: lo más importante para representar metadatos es el sistema de
indexación y recuperación, para poder discriminar dentro de un contenido los elementos o atributos que se
desea recuperar.

Audio 1. “Generación de código para

diferentes plataformas”
https://bit.ly/32nuALR

/ 7. Caso práctico 1: “Generación de un logo con

gráficos vectoriales escalables”
Planteamiento: La empresa radiofónica FourWaves nos ha solicitado el diseño de un logo que represente su marca.
Esta cadena se caracteriza por sus programas de naturaleza, mindfulness, corazón y economía. Para ello, nos indican
que tiene que ser claramente representativo, sencillo y con alta calidad para poder ser reescalable a cualquier tamaño
que necesiten en un futuro. El logo para su interfaz va tener cuatro componentes visuales claramente diferenciados:

• Una onda verde (que representará el contenido de naturaleza).

• Una segunda onda azul (que simbolizará la relajación del ámbito del mindfulness).

• Una tercera onda rosa (que servirá para representar los programas de corazón).

• Una última onda amarilla (correspondiente al color de las monedas de los programas de economía).

Nudo: En primer lugar, como se ha visto en los apartados anteriores, el lenguaje SVG permite representar elementos
geométricos vectoriales e imágenes de mapa de bits. En este caso, se puede realizar el diseño de 4 elipses que
representarán las cuatro ondas del nombre de la cadena y las cuatro secciones que trabajan. Se propone realizar un
sencillo código SVG con cuatro componentes de tipo elipse y modificar sus radios y estilo de color para conseguir el
logo que desea la empresa.
 TEMA 3. GENERACIÓN DE INTERFACES A PARTIR DE DOCUMENTOS XML
Desarrollo de interfaces / 16

Desenlace: En base a las especificaciones de la empresa, una propuesta de diseño del logo sería el siguiente: la base
sería una elipse verde, superpuesta a ella una elipse azul con menores radios en el eje x e y, y después, de manera
sucesiva, se representan las elipses rosa y amarilla. Por último, se les envía un diseño con los componentes anteriores
y queda diseño de interfaz como el que se muestra.

<!DOCTYPE html>
<html>
<body>
<svg height=”150” width=”500”>
<ellipse cx=”240” cy=”100” rx=”220” ry=”30” style=”fill:lime” />
<ellipse cx=”220” cy=”70” rx=”190” ry=”20” style=”fill:cyan” />
<ellipse cx=”210” cy=”45” rx=”170” ry=”15” style=”fill:pink” />
<ellipse cx=”205” cy=”25” rx=”140” ry=”12” style=”fill:yellow” />
</svg>
</body>
</html>

Código 8. Código solución «Caso práctico 1».

Fig. 10. Logo resultado código implementación 8.

/ 8. Caso práctico 2: “Estructura documento XML”

Planteamiento: Para nuestra nueva interfaz de reserva de viajes TravelWithMe necesitamos tener almacenada
información sobre las siete maravillas del mundo. Desarrolla un documento XML que almacene la información
(nombre, país) sobre cada una de las 7 maravillas del mundo.

Nudo: El código implementado para esta propuesta tendría la siguiente estructura:

MARAVILLAS DEL MUNDO MODERNO

Nombre País
La Gran Muralla China China
El Coliseo Romano Italia
Chichén Itzá México
Machu Picchu Perú
Palacio de Taj Mahal India
Cristo Redentor Brasil
Petra Jordania
Tabla 2. Tabla de datos de las maravillas del mundo moderno.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 17 MEDAC · Instituto Oficial de Formación Profesional

<?xml version=”1.0” encoding=”UTF-8”?>

<maravillas>
<maravilla>
<nombre>Muralla China</nombre>
<pais>China</pais>
</maravilla>
<maravilla>
<nombre>El Coliseo Romano</nombre>
<pais>Italia</pais>
</maravilla>
<maravilla>
<nombre>Chinchén Itzá</nombre>
<pais>México</pais>
</maravilla>
<maravilla>
<nombre>Machu Picchu</nombre>
<pais>Perú</pais>
</maravilla>
<maravilla>
<nombre>Palacio Taj Mahal</nombre>
<pais>India</pais>
</maravilla>
<maravilla>
<nombre>Cristo Redentor</nombre>
<pais>Brasil</pais>
</maravilla>
<maravilla>
<nombre>Petra</nombre>
<pais>Jordania</pais>
</maravilla>
</maravillas>

Código 10. Datos implementados en XML.

Desenlace: La información quedará estructurada en elementos de tipo ‘maravilla’ con subelementos que contendrán
el nombre y el país.

/ 9. Resumen y resolución del caso práctico de la unidad

A lo largo de este tema hemos visto que XML es un lenguaje utilizado para estructurar, almacenar e intercambiar
datos entre distintas plataformas.

Es importante recordar que, para estructurar correctamente un documento XML, existen reglas en cuanto a las
etiquetas, atributos y valores que debemos seguir. También hemos resaltado el uso de diferentes tipos de eventos
como mecanismos necesarios para interactuar con la interfaz.
 TEMA 3. GENERACIÓN DE INTERFACES A PARTIR DE DOCUMENTOS XML
Desarrollo de interfaces / 18

Una vez hemos tenido claros esos conceptos, hemos profundizado mediante ejemplos prácticos en los principales
lenguajes basados en XML: XHTML, GML, MathML, RSS, XSLT y SVG. Por último, se ha realizado una comparativa
de los mejores editores que existen en la actualidad para crear interfaces basadas en XML: Atom, Notepad++,
Dreamweaver y Visual Studio Code.

Resolución del caso práctico de la unidad.

Basándonos en lo visto en este tema, el diseño que necesita la empresa radiofónica puede basarse en las áreas de sus
contenidos (economía, corazón, mindfulness y naturaleza) y utilizar el código de amarillo, rosa, azul y verde para
identificar cada una de ellas, respectivamente.

Como lenguaje de desarrollo basado en XML, para este proyecto se puede utilizar XHTML para la parte de la
modelación de la interfaz que se basa en contenido generado en su página web. Para la parte de suscripciones al
podcast, podemos utilizar el lenguaje RSS, dado que nos permite difundir información a usuarios que se han suscrito
a una fuente de contenidos actualizada frecuentemente. Por último, se propone emplear SVG para realizar el diseño
vectorial de los elementos de la interfaz, tal y como se muestra en el primer caso práctico, para que puedan ser
reescalables y adaptables a cualquier plataforma.

Utilizando cualquiera de los editores descritos en este tema se puede realizar el desarrollo de una interfaz a partir
de un documento XML. En concreto, si queremos realizar el desarrollo de manera que podamos ver el diseño gráfico
mientras programamos, es decir, de manera WYSIWYG, sería recomendable utilizar los editores VisualStudio o
Dreamweaver.

/ 10. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces. (1.a ed.). Madrid: Síntesis.
DESARROLLO DE INTERFACES
TÉCNICO EN DESARROLLO DE APLICACIONES
MULTIPLATAFORMA

Clases y
componentes

02
 / 1. Introducción y contextualización práctica 4

/ 2. Explotación del área de diseño 5

2.1. Insertar elementos 5
2.2. Eliminar elementos 5

/ 3. Clases, propiedades y métodos en Poo 6

3.1. Clases 6
3.2. Métodos 6
3.3. Propiedades o atributos 6

/ 4. JFrame y JPanel 7

/ 5. JDialog 8

/ 6. Conexión entre ventanas. Eventos 9

/ 7. Componentes 10
7.1. JButton 10
7.2. JLabel 11
7.3. JTextField 11
7.4. JCheckBox 12
7.5. JRadioButton 12
7.6. JComboBox 13

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
/ 8. Layout manager 13
8.1. Flow Layout 13
8.2. Grid Layout 13
8.3. Border Layout 14
8.4. GridBag Layout 15

/ 9. Caso práctico 1: “Acceso a una nueva ventana con

usuario y contraseña” 15

/ 10. Caso práctico 2: “Interfaz de reproductor de música” 16

/ 11. Resumen y resolución del caso práctico de la unidad 18

/ 12. Bibliografía 18
 Crear una interfaz gráfica utilizando los asistentes de un editor visual.

Utilizar las funciones del editor para ubicar los componentes del interfaz.

Modificar las propiedades de los componentes para adecuarlas a las necesidades

de la aplicación.

Asociar las acciones correspondientes a los eventos.

Analizar el código generado por el editor visual.

Modificar el código generado por el editor visual.

Desarrollar una aplicación que incluye la interfaz gráfica obtenido.

/ 1. Introducción y contextualización práctica

El desarrollo de interfaces gráficas permite la creación del canal de comunicación entre el usuario y la aplicación y,
por esta razón, su diseño requiere de especial atención. En la actualidad, las herramientas de desarrollo permiten
implementar el código relativo a una interfaz a través de vistas de diseño que facilitan y hacen más intuitivo el
proceso de creación.

Existen numerosos componentes, que son tipos de elementos que pueden ser incluidos en una interfaz simulando una
comunicación bidireccional, en la que la aplicación recibe diferentes entradas de datos, en función del componente
escogido. Por ejemplo, sería posible que el usuario introduzca texto en una caja, seleccione un valor en un menú
desplegable o se conecte a otras ventanas a través de la acción sobre un botón, entre otras.

En este tema se verán en detalle los principales tipos de componentes,

así como sus características más importantes. La distribución de este tipo
elementos depende de los llamados Layout, los cuales permiten definir la
ubicación exacta de los elementos.

Una misma aplicación puede presentar más de una ventana. En función

de la finalidad de la misma encontramos JFrame y JDialog. La segunda
establece los llamados diálogos modales o no modales, elementos clave
en el desarrollo de interfaces. La combinación de tipos de ventanas y de
elementos de diseño es infinita.

Escucha el siguiente audio donde contextualizaremos el caso práctico del

tema y que encontrarás resuelto en el último apartado de la unidad: Fig. 1. Diagrama conexión tipos de ventanas.

Audio intro. “Los componentes de una

interfaz gráfica”
https://bit.ly/3fxF3rW
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

/ 2. Explotación del área de diseño

Conocer en profundidad todas las funcionalidades del área de la vista de diseño es fundamental para un correcto
desarrollo.

En primer lugar, se crea la ventana utilizando la clase contenedora JFrame desde el menú File. Tras crearla, lo primero
que aparece es el contenido de la pestaña ‘Source’, es decir, el código en Java del JFrame creado. Para acceder a la
vista de diseño solo hay que pulsar en la pestaña Design. Recordemos que las partes principales de la vista de diseño
son:

• Zona de diseño: sobre la que se sitúan los componentes de la interfaz.

• Palette: aquí se encuentran todos los elementos utilizados para la implementación de la interfaz, que son
colocados sobre la ventana de la zona de diseño. Cada vez que tomamos uno de estos elementos y lo
colocamos en la pestaña ‘Source’, aparece su código de programación.

• Components: mapa de navegación que muestra un resumen de todos los elementos insertados en la zona de
diseño.

• Propiedades: si se selecciona cualquier componente en esta ventana, se muestran todas las propiedades del
elemento que permiten definir su apariencia, entre otras. En cambio, si no se pulsa sobre ningún elemento
aparece en blanco.

2.1. Insertar elementos

Para colocar cualquier elemento basta con pulsar sobre él en la paleta de componentes y llevarlo hasta la posición
exacta de la zona de diseño. Como se puede ver en la siguiente imagen, la ventana queda dividida en varias zonas de
color verde. Si movemos el puntero del ratón sobre ellas, cambiarán a amarillo; para colocar el elemento basta con
pulsar sobre la caja amarilla.

Fig. 2. Área de diseño para inserción de componentes.

2.2. Eliminar elementos

Para eliminar un elemento, ya sea componente, contenedor o de cualquier otro tipo, basta con seleccionarlo desde
la zona de diseño o desde el mapa de navegación de Components, pulsar con el botón derecho sobre él y seleccionar
Borrar (o Delete). También se puede realizar el borrado desde la pestaña de código (Source), localizando los
métodos relativos al componente y eliminarlos. La primera opción es mucho más rápida.
 TEMA 2. CLASES Y COMPONENTES
Desarrollo de interfaces /6

/ 3. Clases, propiedades y métodos en Poo

3.1. Clases
Una clase representa un conjunto de objetos que comparten una misma estructura (ATRIBUTOS) y comportamiento
(MÉTODOS). A partir de una clase se podrán instanciar tantos objetos correspondientes a una misma clase como se
quieran. Para ello se utilizan los constructores.

Para llevar a cabo la instanciación de una clase y así crear un nuevo objeto, se utiliza el nombre de la clase seguido de
un par de paréntesis. Un constructor es sintácticamente muy semejante a un método. El constructor puede recibir
argumentos; de esta forma, podrá crearse más de un constructor en función de los argumentos que se indiquen en
su definición. Aunque el constructor no haya sido definido explícitamente, en Java siempre existe un constructor por
defecto que presenta el nombre de la clase y no recibe ningún argumento.

3.2. Métodos
Los métodos definen el comportamiento de un objeto, esto quiere decir que toda aquella acción que se quiera
realizar sobre la clase tiene que estar previamente definido en un método.

Los métodos pueden recibir argumentos o no; además, en función de su definición, devolverán un valor o realizarán
alguna modificación sobre los atributos de la clase.

3.3. Propiedades o atributos

Un objeto es una cápsula que contiene todos los datos y métodos ligados a él. La información contenida en el objeto
será accesible solo a través de la ejecución de los métodos adecuados, creándose una interfaz para la comunicación
con el mundo exterior.

Los atributos definen las características del objeto. Por ejemplo, si se tiene una clase círculo, sus atributos podrían
ser el radio y el color. Estos constituyen la estructura del objeto, que posteriormente podrá ser modelada a través
de los métodos oportunos.

La estructura de una clase en Java quedaría formada por los siguientes bloques, de manera general: atributos,
constructor y métodos.

Fig. 3. Estructura básica clase Java.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

/ 4. JFrame y JPanel
Como se vio en el tema anterior, una de las clases principales es la clase JFrame, destinada a la creación de la
ventana para la interfaz. Es aconsejable utilizar el proceso de creación descrito para poder acceder a la vista de
diseño (Design). Esta clase se utiliza, sobre todo, para definir la pantalla principal de una aplicación. Para generar las
pantallas secundarias es común utilizar JDialog, con unas prestaciones prácticamente idénticas.

Al igual que ocurre con todas las clases en Java, es necesario utilizar un constructor para crear una instancia del
objeto, en el caso de Jframe encontramos varios, como Jframe() o Jframe (String nombreVentana), entre otros.

Otros métodos importantes en Jframe son aquellos que permiten establecer las dimensiones exactas de la ventana,
la acción de cierre y habilitar su visibilidad.

Complementando a JFrame, tenemos un panel o lienzo denominado JPanel. Este es un bloque «invisible» que se sitúa
sobre una ventana. Consiste en un contenedor de componentes sobre el que vamos a ubicar todos los elementos
necesarios, sin tener que colocarlos directamente sobre la ventana JFrame.

Para crear un panel, desde el menú File, New, pulsamos Other y se busca en la carpeta WindowBuilder el tipo JPanel.

Fig. 4. JPanel y JFrame.

Gracias a los paneles podemos tener más organizada la interfaz gráfica. La distribución de estos paneles constituye
un sistema de capas o Layout que se verá más adelante.

El resto de los componentes se colocan dentro del lienzo creado de la forma descrita en el apartado 2.1. Por ejemplo,
si se crea un nuevo JPanel dentro del cual se coloca una etiqueta de texto, el código implementado sería de la forma:

//Crea un JPanel
JPanel panelSecundario = new JPanel();
//Se coloca dentro de otro JPanel principal
panel.add(panelPpal);
//Crea una etiqueta
JLabel jlabel1 = new JLabel(“hola”);
//La coloca dentro del JPanel secundario
panelSecundario.add(jlabel1);

Código 1. Creación e inserción de un elemento JPanel.

 TEMA 2. CLASES Y COMPONENTES
Desarrollo de interfaces /8

/ 5. JDialog
Las aplicaciones que solo utilicen una pantalla implementarán su interfaz solo con un elemento JFrame; pero cuando
la aplicación que se está desarrollando presenta más de una ventana, las de tipo secundario se crearán utilizando
JDialog, puesto que esta sí permite tener un elemento padre, es decir, un elemento principal a partir del cual se
accede a la venta secundaria.

Las ventanas tipo JDialog siempre quedarán situadas por encima de sus padres, ya sean de tipo JDialog o JFrame.

La creación de este tipo de ventanas se realiza de forma similar a la de tipo JFrame: desde el menú File y New,
seleccionamos Other y, a continuación, dentro de la carpeta WindowBuilder, pulsamos sobre JDialog.

Código 2. Método creación de la ventana JDialog de la Figura 5.

En la figura anterior se muestra el código por defecto que se genera al crear un JDialog de la forma descrita. En este
primer diseño aparecen dos botones, Ok y Cancel.

Fig. 5. Ventana creada código 2. JDialog.

Los diálogos modales son aquellos que no permiten que otras ventanas de diálogo se abran hasta que la que se
encuentra abierta se haya cerrado, por ejemplo, un programa que queda a la espera de la selección de una opción
para poder continuar, como la selección del número de asiento en una aplicación para la compra de billetes de tren.

Por lo tanto, los diálogos de tipo no modal sí permitirán que haya tantos JDialog abiertos como se desee. Para indicar
a cuál de estos tipos pertenecen, utilizamos el flag de modal del constructor de JDialog, indicando a true para modal,
y false para no modal.

JDialog ventanaSec = new JDialog(f, “Dialog”, true);

Código 3. Creación de un elemento JDialog de tipo modal.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

/ 6. Conexión entre ventanas. Eventos

Para poder crear una conexión entre dos o más ventanas, en primer lugar, es necesario crearlas todas, ya sean de
tipo Jframe o JDialog. El paso de una ventana a otra se produce tras la ocurrencia de un evento. Habitualmente, la
pulsación sobre un botón.

Tras la creación de las ventanas se sitúan los botones de conexión y se modifican sus propiedades de apariencia. Este
elemento puede situarse dentro de un layout o de un JPanel. Para crear el evento escuchador asociado a este botón,
basta con hacer doble clic sobre él y, de forma automática, se generará el siguiente código en la clase de la ventana
de la interfaz donde estamos implementando el botón conector.

JButton btnNewButton = new JButton(“Púlsame”);

btnNewButton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
}
});
panel.add(btnNewButton);

Código 4. Evento implementado para conexión de JButton.

Es importante tener en cuenta que, siempre que se utilicen nuevas ventanas, hay que ponerlas visibles utilizando
el método setVisible(boolean visibilidad), donde el valor que recibe por parámetro será true en el caso de hacerla
visible y false en el caso contrario.

En el siguiente ejemplo, al pulsar el botón Jugar desde la ventana principal implementada con una clase JFrame, nos
lleva a una segunda ventana también de tipo JFrame, la cual muestra un mensaje en una etiqueta de texto.

Fig. 6. Conexión de ventanas con ActionListener.

Cuando se detecta la pulsación del botón como evento, desde la clase principal se crea una nueva instancia del
objeto Juego, también de tipo JFrame y se específica como visible. Finalmente, en este ejemplo, se utiliza el método
dispose(), el cual cierra la ventana principal y solo mantiene abierta la segunda.
 TEMA 2. CLASES Y COMPONENTES
Desarrollo de interfaces / 10

/ 7. Componentes
Existe un amplio abanico de componentes. En este apartado se verán los que constituyen la gran parte de la interfaz.
Los componentes son los elementos que se sitúan en la ventana, directamente sobre el JFrame y JDialog o sobre
un JPanel. Hay que prestar especial atención a aquellas propiedades que tienen un mismo nombre, puesto que no
realizan la misma acción en todos los elementos.

7.1. JButton
Permite crear un objeto de tipo botón dentro de una interfaz gráfica en Java. Las propiedades de este elemento son:

background El color de fondo del botón. Se muestra solo si es opaco

enabled True/false determina si el botón está activo o no

font Fuente del tipo de letra y tamaño

foreground Color del texto

horizontalAlignment Alineación vertical y horizontal del

verticalAlignment texto con respecto al botón

text Texto que aparece dentro del botón

icon Carga imagen como fondo del botón

Tabla 1. Propiedades JButton.

Para utilizar este componente es necesario importar los paquetes: import

javax.swing e import java.awt.event. El segundo se utiliza para que, al
pulsar el botón, se detecte la ocurrencia de un evento y se derive una
acción.

En el siguiente ejemplo, se crea un botón y, desde el menú de propiedades,

se modifican de la siguiente forma:

El código que implementa las propiedades anteriormente modificadas es el

siguiente. Si se cambia algún valor desde la pestaña Source, estos también
se reflejarán en las propiedades de la vista de diseño del componente que
describen. Fig. 7. Propierties JButton en Vista diseño Eclipse.

JButton btnNewButton = new JButton(“Pulsa aquí”);

panel.add(btnNewButton);
btnNewButton.setFont(new Font(“Kohinoor Telugu”, Font.
BOLD, 13));
btnNewButton.setForeground(Color.RED);

Código 5. Código equivalente propiedades modificadas Figura 7.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

Vídeo 1. “Modificación de propiedades

desde Design y Source”
https://bit.ly/395mCIK

7.2. JLabel
Este elemento es uno de los más sencillos de aplicar y que, al mismo tiempo, más utilidad reporta. No solo se trata
de un elemento de texto, sino que este contenedor puede llegar a albergar también imágenes, iconos o texto. Sus
propiedades características son:

background El color de la etiqueta si está deshabilitada

enabled Habilita la etiqueta

font Fuente del tipo de letra y tamaño

foreground Color del texto si etiqueta habilitada

horizontalAlignment Alineación vertical y horizontal del texto

verticalAlignment con respecto a la caja de la etiqueta

text Texto que aparece dentro de la etiqueta

icon Permite cargar una imagen

Tabla 2. Propiedades JLabel.

Hay que prestar especial atención a los valores background y foreground, ambos definen el color del texto: el
primero cuando está habilitado y el segundo cuando no lo está.

7.3. JTextField
El elemento JTextField, se utiliza como contenedor de una línea de texto, el tamaño queda definido por el valor del
atributo ‘columns’. No se trata de un valor exacto en cuanto a número de caracteres, sino que está definiendo su
ancho, por lo tanto, en función del carácter que se escriba, la capacidad variará.

background Color de fondo de la caja de texto

columns Tamaño de la caja de texto

Enabled Habilita el campo de texto

editable Permite al usuario modificar el contenido

Font Fuente del tipo de letra y tamaño

Foreground Color del texto

thorizontalAlignment Alineación horizontal del texto

Text Texto que aparece al inicio en la caja

Tabla 3. Propiedades JTextField.

 TEMA 2. CLASES Y COMPONENTES
Desarrollo de interfaces / 12

7.4. JCheckBox
Los elementos de tipo casilla o CheckBox son elementos que se presentan junto a una pequeña caja cuadrada y que
pueden ser marcados por el usuario. Presenta unas propiedades similares a los casos anteriores, añadiendo algunos
nuevos atributos como ‘selected’, el cuál puede ser de valor true o false. El primero indicará que la casilla se muestre
marcada por defecto y, si es false, aparecerá sin marcar.

Fig. 8. Interfaz ejemplo con JCheckBox y JButton.

7.5. JRadioButton
Los elementos de tipo JRadioButton se utilizan habitualmente en el
desarrollo de interfaces para indicar varias opciones, de las que solo se
podrá escoger una, es decir, que resultarán excluyentes. Las propiedades
que presenta son iguales a la del elemento ‘JCheckBox’.

Ahora bien, cuando insertamos un elemento JRadioButton en una interfaz

su funcionamiento va a ser muy parecido al de un elemento de tipo check.
Para conseguir un comportamiento excluyente, es necesario utilizar un
objeto tipo ButtonGroup.

La creación de un elemento ButtonGroup nos permite asociar a este grupo

tantos elementos como se deseen; de esta forma, todos aquellos que
queden agrupados resultarán excluyentes entre sí, puesto que pertenecen Fig. 9. JRadioButton excluyentes con
al mismo grupo. ButtonGroup.

En el siguiente ejemplo se han creado tres elementos y se han asociado en un un ButtonGroup llamado bg.

public holaMundo() {
//Se define el comportamiento de la ventana
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
//Creación de JRadioButton y se ubican
JRadioButton r1 = new JRadioButton(“Opción 1”);
getContentPane().add(r1, BorderLayout.NORTH);
JRadioButton r2 = new JRadioButton(“Opción 2”);
getContentPane().add(r2, BorderLayout.WEST);
JRadioButton r3 = new JRadioButton(“Opción 3”);
getContentPane().add(r3, BorderLayout.SOUTH);
//Se agrupan los JRadioButton creados
ButtonGroup bg=new ButtonGroup();
bg.add(r1);
bg.add(r2);
bg.add(r3);
}

Código 6. Ejemplo JRadioButton excluyentes.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

7.6. JComboBox
Finalmente, otro elemento común en la creación de interfaces son los menús desplegables, que se crean a través del
componente JComboBox. Presenta unas propiedades muy parecidas al resto de componentes descritos.

Para insertar los valores que se mostrarán en el combo utilizando la vista de diseño, desde propiedades,
seleccionamos ‘model’ y se abrirá una nueva ventana en la que se escriben en líneas separadas los valores del combo.
El valor máximo de elementos mostrados en el combo queda establecido en la propiedad maximumRowCount. La
propiedad selectedIndex permite al desarrollador indicar cuál es el valor que mostraría por defecto de entre todos
los recogidos, siendo 0 la primera posición.

/ 8. Layout manager
Un layout manager (manejador de composición) permite adaptar la distribución de los componentes sobre un
contenedor, es decir, son los encargados de colocar los componentes de una interfaz de usuario en el punto deseado
y con el tamaño preciso. Sin los layout, los elementos se colocan por defecto y ocupan todo el contenedor. El uso de
los layout nos permite modificar el tamaño de los componentes y su posición de forma automática.

8.1. Flow Layout

Flow Layout sitúa los elementos uno al lado del otro, en una misma fila. Permite dar valor al tipo de alineación
(setAlignment), así como la distancia de separación que queda entre los elementos: en vertical (setVgap) y en
horizontal (setHgap).

Fig. 10. Propiedades Flow Layout.

8.2. Grid Layout

Este nuevo layout permite colocar los componentes de una interfaz siguiendo un patrón de columnas y filas, simulando
una rejilla. Al igual que en el caso anterior, es posible modificar el valor de la separación entre componentes. Las
propiedades de este elemento incorporan la column y row, que definen el número exacto de columnas y filas.

Para la creación de este sistema de rejilla, se utiliza un constructor que necesita recibir el valor exacto de filas y
columnas que tendría la interfaz, GridLayout(int numFilas, int numCol).

Cualquiera de los elementos ‘Layout’ presentan como propiedad común el valor de vgap y hgap, que definen la
distancia entre elementos que se crea tanto en vertical como en horizontal.

Audio 1. “Tipos de Layouts”

https://bit.ly/2CgAsfg
 TEMA 2. CLASES Y COMPONENTES
Desarrollo de interfaces / 14

8.3. Border Layout

BorderLayout permite colocar los elementos en los extremos del panel contenedor y en el centro. Para situar a cada
uno de los elementos desde la vista de diseño basta con colocarlos en la posición deseada.

Fig. 11. Propiedades Border Layout y ejemplo botones en Border Layout.

Ahora bien, desde el código se sitúan atendiendo a su situación (NORTH, SOUTH, EAST, WEST, CENTER).

public interfazBorderLayout() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
getContentPane().setLayout(new BorderLayout(10, 5));

JButton btnNewButton = new JButton(“WEST”);

getContentPane().add(btnNewButton, BorderLayout.WEST);

JButton btnNewButton_1 = new JButton(“NORTH”);
getContentPane().add(btnNewButton_1, BorderLayout.NORTH);

JButton btnNewButton_2 = new JButton(“EAST”);
getContentPane().add(btnNewButton_2, BorderLayout.EAST);

JButton btnNewButton_3 = new JButton(“SOUTH”);
getContentPane().add(btnNewButton_3, BorderLayout.SOUTH);

JButton btnNewButton_4 = new JButton(“CENTER”);
getContentPane().add(btnNewButton_4, BorderLayout.CENTER);
}

Código 7. Código de creación Figura 12 con JButton y JBorderLayout.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 15 MEDAC · Instituto Oficial de Formación Profesional

8.4. GridBag Layout

A diferencia del tipo Grid Layout visto, este permite un diseño más flexible, donde cada uno de los componentes que
se coloquen tendrán asociado un objeto tipo GridBagConstraints.

Tras la inserción de este layout, será posible ubicar el elemento de una forma mucho más precisa, seleccionado la
posición exacta de la rejilla. Por ejemplo, en este caso, se situará en la columna 2 y fila 2.

Fig. 12. Ejemplo botones en GridBag Layout

Vídeo 2. “Uso de Layouts”

https://bit.ly/3fyTcVR

/ 9. Caso práctico 1: “Acceso a una nueva ventana con

usuario y contraseña”
Planteamiento: En este ejercicio se implementará una interfaz formada por dos ventanas conectadas. Si en la primera
ventana el usuario y contraseña solicitados son correctos, se dará acceso a una segunda ventana de bienvenida.

El JFrame principal estará formado por:

• Dos JLabel ‘Usuario’ y ‘Contraseña’.

• Un JTexField para introducir el nombre.

• Un JPassWordField para introducir la contraseña.

• Dos JButton ‘Inicio’ y ‘Salir’.

El botón ‘Inicio’ tendrá implementada la función del evento escuchador, para que, al hacer clic, se compruebe si los
datos son correctos y así abrir la ventana de ‘Bienvenida’.

Fig. 13. Diseño a implementar Caso Práctico 1.

 TEMA 2. CLASES Y COMPONENTES
Desarrollo de interfaces / 16

Nudo: Para implementar un evento escuchador asociado al botón Inicio, será necesario:

• Crear el botón ‘Inicio’ de tipo JButton.

• Asociar el evento escuchador.

• Recuperar el contenido de los campos del nombre de usuario y contraseña.

• Comprobar si son correctos y si, en este caso, corresponden con ‘admin’ y ‘1234’.

• Si es correcto, se crea una segunda ventana llamada ‘acceso’ de la clase Inicio.java y se hace visible.

• Si no es correcto, se muestra un mensaje de tipo ‘Dialog’ indicando que el usuario o contraseña no es correcto.

Desenlace:

JButton boton_inicio = new JButton(“Inicio”);

boton_inicio.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
String user,pwd;
user=textUsuario.getText();
pwd=String.copyValueOf(textContraseña.getPassword());
if(user.contentEquals(“admin”)&&pwd.equals(“1234”)) {
Inicio acceso = new Inicio();
acceso.setVisible(true);
}else {
JOptionPane.showInternalMessageDialog(null, “El usuario o contraseña
es incorrecto”);
}
}
});

Código 8. Código desenlace Caso Práctico 1.

El código completo de las clases Principal.java e Inicio.java se encuentran en el Anexo 1 del tema.

/ 10. Caso práctico 2: “Interfaz de reproductor de

música”
Planteamiento: Para poder adaptar la distribución de los componentes de una interfaz, se dispone de los manejadores
de composición, mejor conocidos como Layout. En este caso, vamos a practicar con el tipo GridLayout que permite
colocar componentes de una interfaz siguiendo un patrón de columnas y filas, similar a una rejilla.

Nudo: Utilizando la composición de tipo GridLayout, se va a diseñar la interfaz de un reproductor de música. Para
ello, será necesario:

• Crear el JFrame llamado ‘reproductor’.

• Implementar el JPanel con la disposición ‘GridLayout’, estableciendo el número apropiado de columnas y filas
mediante GridLayout(int numFilas, int numCol).
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 17 MEDAC · Instituto Oficial de Formación Profesional

• Añadir los nueve botones al JPanel.

• Añadir el JPanel de tipo ‘GridLayout’ al reproductor de tipo JFrame.

• Realizar el empaquetado de los componentes de la ventana.

• Activar la visibilidad de la ventana.

import java.awt.BorderLayout;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class reproductor {
public static void main(String[] args) {
JFrame frame=new JFrame(“reproductor”);
JPanel p1=new JPanel(new GridLayout(3,3));
JButton button = new JButton(“ON/OFF”);
p1.add(button);
button = new JButton(“PLAY”);
p1.add(button);
button = new JButton(“RECORD”);
p1.add(button);
button = new JButton(“PISTA ANTERIOR”);
p1.add(button);
button = new JButton(“PAUSE”);
p1.add(button);
button = new JButton(“PISTA POSTERIOR”);
p1.add(button);
button = new JButton(“REBOBINAR ATRÁS”);
p1.add(button);
button = new JButton(“STOP”);
p1.add(button);
button = new JButton(“REBOBINAR DELANTE”);
p1.add(button);
frame.add(p1, BorderLayout.CENTER);
frame.pack();
frame.setVisible(true);
}
}

Código 9. Código desenlace “Caso Práctico 2”.

Desenlace: El resultado final de implementar el código anterior es una interfaz como la que se muestra en la imagen,
compuesta por una matriz de seis botones dispuestos en tres filas y tres columnas.
 TEMA 2. CLASES Y COMPONENTES
Desarrollo de interfaces / 18

/ 11. Resumen y resolución del caso práctico de la

unidad
En este tema hemos estudiado el paquete Swing, el cual contiene todas las clases necesarias para programar todo
tipo de componentes visuales. Swing es una extensión para AWT, un kit de herramientas de widgets utilizados para
el desarrollo de interfaces gráficas en Java.

Aunque el número de elementos que se incorporan en la paleta (Palette) es muy amplio, en este tema se han
descrito algunos de los más usuales, analizando sus principales propiedades. El abanico de elementos permite crear
infinitas combinaciones que se adecuarán en cada caso a las especificaciones finales de la aplicación. Algunos de los
elementos más importantes son JButton, JRadioButton, JCheckBox, JLabel o JComboBox.

Por lo otro lado, hemos visto que tener presentes las diferencias existentes entre JFrame y JDialog es fundamental,
no en cuanto a su implementación, sino al uso que se les va a dar.

En próximos temas se verá más en detalle el análisis de eventos, pero ya hemos adelantado el código necesario sobre
el que se establecerá la acción asociada ante la pulsación de un botón, por ejemplo, crear la conexión necesaria entre
dos ventanas, ya sean de tipo JFrame o JDialog a vista de diseño o desde el código utilizando los métodos adecuados.

Finalmente, hemos comprobado que la elección de una buena combinación de elementos y el diseño de su
distribución en el lienzo de la interfaz utilizando los elementos de tipo Layout determinará la usabilidad del diseño
de una aplicación.

Resolución del caso práctico de la unidad.

Con los conocimientos adquiridos a lo largo del tema, podemos responder a las preguntas de diseño sobre la interfaz
de compra de entradas de teatro que se proponía al principio del tema.

En cuanto a la mejor opción para distribuir los distintos tipos de entradas, a través del uso de BorderLayout será
posible colocar los elementos en los extremos y en el centro del panel contenedor, de forma que la platea esté en
la disposición NORTH, el anfiteatro en SOUTH, el palco 1 en EAST, el palco 2 en WEST y el entresuelo en CENTER.

Por otro lado, para simular la colocación de las butacas, los componentes que representan estos elementos se
dispondrán utilizando GridBagLayout, que nos permite ubicar los elementos de una forma precisa, seleccionando la
posición exacta, como si se tratase de una rejilla completa por filas y columnas.

Finalmente, en el último paso de confirmación de compra, es recomendable utilizar una ventana con diálogo modal,
es decir, que no permita que otras ventanas se abran hasta que la que se encuentra abierta no se haya cerrado.

/ 12. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces. (1.a ed.). Madrid: Síntesis.
DESARROLLO DE INTERFACES
TÉCNICO EN DESARROLLO DE APLICACIONES
MULTIPLATAFORMA

Introducción a
la confección de
interfaces

01
 / 1. Introducción y contextualización práctica 3

/ 2. Paradigmas de programación 4

/ 3. Programación orientada a objetos, eventos y componentes 4

/ 4. Herramientas propietarias y libres de edición de interfaces 5

4.1. Visual Studio 6
4.2. MonoDevelop 6
4.3. Glade 7
4.4. NetBeans 7
4.5. Eclipse 7

/ 5. Librerías. AWT y Swing 8

/ 6. Instalación de Swing en Eclipse 9

/ 7. Primera clase con Java Swing. JFrame 10

/ 8. Análisis del entorno de diseño en Eclipse 11

8.1. Toolbar 11
8.2. Vista de diseño. General 12
8.3. Vista de diseño. Palette 12
8.4. Vista de diseño. Structure 12

/ 9. Caso práctico 1: “Creación de un JFrame” 13

/ 10. Caso práctico 2: “Creación de un botón” 14

/ 11. Resumen y resolución del caso práctico de la unidad 15

/ 12. Bibliografía 16

© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
 Crear una interfaz gráfica utilizando los asistentes de un editor visual.

Utilizar las funciones del editor para ubicar los componentes de la interfaz.

/ 1. Introducción y contextualización práctica

Un lenguaje de programación consiste en un conjunto de reglas y normas que permiten a una persona (en este caso
un programador) escribir un conjunto de instrucciones interpretables por un ordenador, cuyo objetivo es controlar
diferentes comportamientos lógicos o físicos de una máquina.

De manera tradicional, se ha establecido una clasificación entre lenguajes de bajo y alto nivel. Los primeros se
encuentran más cerca de lo que es capaz de entender un ordenador, ejercen un control directo sobre el hardware y
están más alejados de la lógica humana (lenguaje máquina con 0 y 1 o lenguaje ensamblador).

Los anteriores resultan muy difíciles de entender por una persona. Por esa razón, aparecen los lenguajes de alto
nivel, los cuales pueden ser descritos utilizando reglas comprensibles por el programador, con un lenguaje más
cercano al natural. Será durante el proceso de compilación del código fuente de los programas, cuando estos se
traduzcan a un lenguaje de bajo nivel, capaz de ser entendido por una máquina.

Ahora bien, las herramientas desarrolladas a través de un lenguaje de

programación, sea del tipo que sea, requieren del desarrollo de una
interfaz que permita una interacción con el usuario de la misma, de lo
contrario, se requeriría que todos fuéramos programadores expertos para
poder utilizar cualquier aplicación atendiendo a su lenguaje fuente.

Escucha el siguiente audio donde contextualizaremos el caso práctico del

tema y que encontrarás resuelto en el último apartado de la unidad: Fig. 1. Diagrama de lenguajes de alto y bajo nivel.

Audio intro. “La importancia de la

confección de interfaces”
https://bit.ly/2CguGu6
 TEMA 1. INTRODUCCIÓN A LA CONFECCIÓN DE INTERFACES
Desarrollo de interfaces /4

/ 2. Paradigmas de programación
Un paradigma de programación define un estilo de programación. Los paradigmas describen la estructura del
programa que va a dar solución a los problemas computacionales.

En primer lugar, encontramos el modelo imperativo, que consiste en un conjunto de instrucciones ordenadas de
forma secuencial y claramente definidas para su ejecución en una máquina, es decir, definen un paso a paso. Este
modelo se divide en otros tipos:

• Programación estructurada: Incluye estructuras de control que permiten evaluar los casos para decidir entre
un camino de instrucciones u otro. También se incorporan estructuras iterativas.

• Programación procedimental o basada en funciones: Subdivide en subrutinas y funciones de menor tamaño

que simplifican la programación, aligerando su implementación y posterior mantenimiento.

• Programación modular: Finalmente, este tipo de programación permite desarrollar cada programa de forma
completamente independiente al resto del código, lo que agiliza las tareas de implementación y prueba. Será
en la parte final del proceso cuando se combinen todos los módulos, creando el software definitivo.

Algunos lenguajes conocidos que utilizan la programación imperativa son: Java, C, C#, Python o Ruby

Fig. 2. Diagrama de paradigmas de programación.

En el modelo imperativo se indica la secuencia de pasos exacta que se ha de seguir para resolver un problema.

Por el contrario, en el caso del modelo declarativo, no se describen los pasos, sino el problema que se plantea.
Algunos ejemplos de lenguajes descriptivos son HTML, CSS y SQL.

/ 3. Programación orientada a objetos, eventos y

componentes
Encontramos otros modelos de programación que incluyen características propias de los definidos en el apartado
anterior. Es el caso de la programación orientada a objetos, eventos o componentes.

La combinación de estos tres tipos resulta clave para el desarrollo de interfaces que veremos en este módulo.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional

• Modelo orientado a objetos: El funcionamiento de este tipo de programas se basa en la creación de

entidades, que reciben el nombre de objetos, las cuales tienen asociados atributos, propiedades y métodos. La
interacción entre los objetos permite resolver los problemas de computación planteados. Algunos lenguajes
de programación orientados a objetos son: Java, Ruby, Visual Basic, Perl, PHP o Python, entre otros.

• Modelo basado en eventos: Este modelo es uno de los más

recientes. Su funcionamiento viene determinado por acciones
externas, por ejemplo, la pulsación sobre un botón. Uno de los
lenguajes típicos de este tipo de programación es JavaScript, que
utiliza manejadores de eventos, tanto en el lado del cliente como
del servidor (Node.js).

• Modelo basado en componentes: La clave de este último modelo es

la reutilización de módulos de software desarrollados previamente.

Para llevar a cabo esta tarea la mayoría de los entornos de desarrollo

integrado (IDE) permiten desarrollar componentes visuales, permitiendo
empaquetar el código para reutilizarlo posteriormente. Fig. 3. POO, eventos y componentes.

/ 4. Herramientas propietarias y libres de edición de

interfaces
La motivación principal para utilizar herramientas de desarrollo software basado en componentes visuales radica
en que, una vez empaquetados, se podrán compartir con otros desarrolladores y, por tanto, serán reutilizables. Esto
supone un mayor ciclo de vida que el desarrollo tradicional por comandos. Si no se desarrolla utilizando componentes
y se realiza de manera directa, se producirá un incremento de tiempo y costes asociados al proyecto.

Destacamos a continuación las principales herramientas de desarrollo software:

LENGUAJES
NOMBRE LICENCIA ENLACE
SOPORTADOS
Visual
Propietaria C#, HTML, https://visualstudio.
Studio
*Libre Javascript, XML microsoft.com/es/
*Community
Mono https://www.
Libre C#, Java, .NET, Python
Develop monodevelop.com

https://glade.
Glade Libre C++, C#, Java, Pytho
gnome.org
Java, HTML,
NetBeans Libre https://netbeans.org
PHP, Python
https://www.
Eclipse Libre Java, C++, PHP
eclipse.org

Tabla 1. Tabla comparativa de las herramientas de edición de interfaces.

 TEMA 1. INTRODUCCIÓN A LA CONFECCIÓN DE INTERFACES
Desarrollo de interfaces /6

4.1. Visual Studio

Entre las fortalezas más importantes de este IDE se encuentra el uso de lenguajes multiplataforma. Se puede escribir
en los lenguajes C#, F#, Razor, HTML5, CSS, JavaScript, Typescript, XAML y XML.

Además, este entorno de desarrollo incorpora la funcionalidad de autocompletado de código mientras estamos
programando, por lo que es fácil detectar los problemas en tiempo real, ya que nos recuerdan que es posible que
se esté cometiendo algún fallo a través de líneas rojas y onduladas que se muestran en el editor bajo una línea o
fragmento de código. A la hora de depurar el código, permite ir paso a paso, estableciendo puntos de interrupción,
por procedimientos y por instrucciones.

Por último, cabe destacar que permite administrar el código en los repositorios más utilizados en la actualidad
como son GIT, GitHub y Azure DevOps. De esta forma, es posible controlar las modificaciones entre las diferentes
versiones de nuestros proyectos y poder realizar copias de seguridad de los archivos durante el desarrollo del mismo.

Audio 1. “¿Qué es GitHub?”

https://bit.ly/30bd8rc

4.2. MonoDevelop
Este IDE libre y gratuito proporciona las funcionalidades propias de un editor de texto, además de las propias de un
entorno para depurar y gestionar proyectos.

Entre sus principales ventajas encontramos que permite trabajar con algunos de los lenguajes más demandados
en la actualidad, como son C#, Java, .NET y Python. Pertenece a Unity, motor de videojuegos multiplataforma por
excelencia. Esta plataforma es muy interesante porque permite desarrollar tanto para Windows, Mac Os X y Linux.

Fig. 4. Interfaz de apliación MonoDevelop.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/7 MEDAC · Instituto Oficial de Formación Profesional

4.3. Glade
Este programa ayuda a la creación de interfaces gráficas de usuario y es muy utilizada en entornos XML. También
permite el desarrollo de interfaces gráficas basadas en lenguaje C, C++, C#, Java, Python…

Dado que la interfaz es bastante intuitiva, se puede aprender rápido y obtener un dominio de la herramienta
invirtiendo poco tiempo. La principal diferencia respecto a las demás propuestas es que está diseñada pensando
especialmente en GNU/Linux.

Fig. 5. Interfaz de apliación Glade.

4.4. NetBeans
NetBeans es una herramienta gratuita y de código abierto. Al igual que Eclipse, que veremos en el siguiente
apartado, es uno de los entornos de desarrollo más utilizados para el desarrollo de interfaces a través lenguaje Java,
aunque también permite utilizar otros lenguajes como PHP o Python.

Este IDE permite extender el entorno con un gran número de módulos que agrupan clases de Java y que permiten
interactuar con las APIs de NetBeans.

4.5. Eclipse
Este IDE es de código abierto y multiplataforma. Dispone de la funcionalidad Graphical Layout, que nos permite
visualizar el contenido en vista de diseño y desarrollar componentes visuales de una forma rápida e intuitiva. Cabe
destacar su componente ‘Palette’, un panel que permite crear botones, cuadros de texto, cuadrículas, insertar
imágenes, etc.

Para completar esta asignatura vamos a utilizar el entorno de desarrollo Eclipse, puesto que, en la actualidad, su uso
es cada vez más frecuente en lo que respecta al desarrollo de interfaces de forma profesional.

Para poder obtenerlo, desde el sitio web de Eclipse (https://www.eclipse.org) primero se selecciona la versión que
corresponda con el equipo con el que estemos trabajando, se descarga y, a continuación, se instala a través de unos
sencillos pasos. Este proceso ocupa pocos minutos. Ahora bien, también se debe tener instalado Java Development
Kit (JDK) correspondiente al sistema operativo del equipo, cuya descarga puede realizarse desde la página web de
Oracle.

Una vez completado este proceso, ya tendríamos instalado todo el entorno básico para el desarrollo de interfaces
posterior. Para ejecutar Eclipse basta con pulsar sobre el icono de la aplicación, normalmente con el nombre de Eclipse
Installer. Finalmente, selecciona ‘Eclipse IDE for Enterprise Java Developers’, luego pulsa ‘Install’ y posteriormente
‘Launch’.
 TEMA 1. INTRODUCCIÓN A LA CONFECCIÓN DE INTERFACES
Desarrollo de interfaces /8

/ 5. Librerías. AWT y Swing

Algunos lenguajes de programación (entre ellos Java) utilizan librerías, un conjunto de clases con sus propios
atributos y métodos ya implementados. De esta forma, pueden utilizarse posteriormente para cualquier desarrollo
reutilizando su código, lo cual reduce considerablemente el tiempo de programación. En cuanto al desarrollo de
interfaces gráficas, para poder implementarlas debemos usar librerías que permiten el desarrollo de las mismas. En
Java se distingue entre la librería AWT y Swing.

Para poder utilizar los métodos y atributos de estas clases, es necesario importar las librerías en Java. Para ello, se
utiliza la palabra clave import, seguida del nombre de la librería requerida, en concreto, de la ruta del paquete que se
va a agregar. Esta importación se realiza justo después de la declaración del paquete, si esta existe.

import javax.swing.*;
import java.awt.*;

Código 1. Código para importar librerías Swing y AWT.

AWT (Abstract Window Toolkit) se desarrolló en primer lugar. Esta librería permite la creación de interfaces
gráficas a través de la importación del paquete java.awt. Dos de sus funcionalidades más importantes son el uso
de la clase ‘Component’ y el de la clase ‘Container’. La primera define los controles principales que se sitúan dentro
del elemento container o contenedor (este último hace referencia a la pantalla en la que se muestra la interfaz de
aplicación a desarrollar).

Fig. 6. Comparativa de la librería AWT y Swing.

En la actualidad, la librería Swing supone la evolución de la anterior, eliminando algunas limitaciones que presentaba
AWT (como el uso de barras de desplazamiento). Swing incorpora múltiples herramientas, métodos y componentes
que permiten diseñar cualquier tipo de interfaz. A través de un entorno gráfico, permite crear un diseño desde cero
arrastrando los componentes hasta la paleta de diseño, mientras que al mismo tiempo se va generando el código
asociado. Conocer el funcionamiento de ambas vistas, diseño y código, permite adaptar el funcionamiento a las
especificaciones de aplicación buscadas.
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/9 MEDAC · Instituto Oficial de Formación Profesional

/ 6. Instalación de Swing en Eclipse

Para la implementación de interfaces gráficas en Java, se va a utilizar la librería Swing, un kit de herramientas que
permite desarrollar interfaces gráficas de usuario para programar Java. Esta librería, a diferencia de su antecesora,
garantiza que el diseño y comportamiento de las aplicaciones será exactamente el mismo, independientemente del
sistema operativo. Esto se debe a que AWT utiliza los controles nativos del sistema operativo en el que se encuentra.

A diferencia de la librería AWT, Swing proporciona una apariencia que puede emular varias plataformas y utilizar
componentes visuales más avanzados. El proceso de instalación y configuración de esta librería en el entorno de
desarrollo de Eclipse se describe a continuación:

• Desde el menú Help seleccionamos Install New Software.

Fig. 7. Instalación Nuevo Software.

• En el menú desplegable de la parte superior de la nueva pantalla se selecciona la versión del entorno que
estemos utilizando.

Fig. 8. Búsqueda de paquetes para la versión de Eclipse.

En ese momento aparecerán todos los paquetes disponibles para esa versión y seleccionaremos todos los paquetes
que comienzan por SWT y WindowBuilder. Recuerda que se encuentran dentro de la carpeta General Purpose
Tools. Después, pulsamos continuar.

Fig. 9. Instalación de paquetes SWT y WindowsBuilder.

 TEMA 1. INTRODUCCIÓN A LA CONFECCIÓN DE INTERFACES
Desarrollo de interfaces / 10

/ 7. Primera clase con Java Swing. JFrame

La importación de la librería Swing de Java se realiza usando la sentencia, import javax.swing. De esta forma, todas
las clases contenidas en el paquete serán importadas. En el caso de querer importar solo una de ellas, basta con
indicarlo tras la palabra swing. Por ejemplo, si se va a utilizar la clase que crea los botones, se usaría import javax.
swing.JButton.

Una de las clases más importantes del paquete Swing es JFrame, puesto que se encarga de crear las ventanas sobre
las que se añaden el resto de elementos. La llamada a esta clase conllevará la aparición de la vista de diseño (Design).

En algunas ocasiones, se puede confundir la clase JFrame con la clase JPanel, pero mientras que la primera define una
ventana completa, la segunda es solo un contenedor de componentes, por lo que dentro de un Jframe podríamos
encontrar múltiples JPanel.

Se puede crear una clase Jframe de la manera habitual, creando una clase en Java y, a continuación, importando
manualmente el paquete Swing y codificando los métodos relativos a JFrame y el resto de componentes. El resultado
sería exactamente el mismo, pero se recomienda realizarlo usando la creación de clase con JFrame que se describe a
continuación, puesto que, de lo contrario, no se tendría acceso a la vista de diseño que se verá en el apartado 9. La
creación de nuestra primera clase JFrame se realiza en dos sencillos pasos:

• Desde File o pulsando con el botón derecho sobre el nombre

del proyecto que se está desarrollando, seleccionamos New.
Se despliega un menú con diferentes opciones, habitualmente
las que se han usado más frecuentemente. Si no aparece
JFrame, seleccionaremos Other.

Fig. 10. Localización tipo JFrame

• La clase JFrame se encuentra dentro de las carpetas WindowBuilder y Swing Designer. Seleccionamos JFrame
y pulsamos Next. Finalmente, se solicita el nombre y se pulsa Finish.

Fig. 11. Creación de un JFrame

Vídeo 1. “Descarga, instalación y prueba

de la librería Swing”
https://bit.ly/3gWWP8e
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional

/ 8. Análisis del entorno de diseño en Eclipse

El área de diseño para desarrolladores de Java en Eclipse permite desarrollar interfaces añadiendo componentes
gráficos directamente, sin necesidad de programar líneas de código. Para ello, es importante conocer la distribución
de la interfaz de trabajo de este IDE.

Fig. 12. Vista general Eclipse + Design.

La vista de diseño nos permite insertar cualquier tipo de elemento en la interfaz sin necesidad de escribir el código,
ya que este se genera automáticamente y se puede consultar desde la pestaña ‘Source’. Es decir, desde ‘Design’ es
posible añadir todos los elementos que se quieran incluir en la aplicación. Así definiremos la parte visual y, desde el
apartado dedicado al código, se cargarán los métodos relativos a cada uno de los objetos insertados, sobre los cuales
podremos incluir el resto del código necesario para definir su comportamiento exacto.

A continuación, se describen los diferentes grupos de herramientas que podemos encontrar en Eclipse, tanto los
de tipo general, necesarios para la programación de cualquier aplicación con Java, como los específicos del área de
diseño.

8.1. Toolbar
En la barra de herramientas o ‘Toolbar’ de Eclipse se encuentran los iconos relativos a las acciones genéricas de
programación, como la creación de paquetes, clases… Uno de los botones más importantes es el encargado de la
ejecución del programa. Al hacer clic sobre la flecha que se encuentra a su derecha, se podrá seleccionar cuál de
entre las clases Java del proyecto actual se quiere ejecutar. En el desplegable que aparece como Run As se podrá
seleccionar el tipo de ejecución como Aplicación de Java.

Fig. 13. Ejemplo botones ToolBar.

 TEMA 1. INTRODUCCIÓN A LA CONFECCIÓN DE INTERFACES
Desarrollo de interfaces / 12

8.2. Vista de diseño. General

La zona de diseño es la ventana principal del entorno de desarrollo con WindowBuilder, puesto que es la zona en la
que se colocan los elementos de la interfaz y, además, donde se encuentran todos los componentes y características
de diseño necesarios para el desarrollo de una interfaz gráfica. En la zona de la derecha de la pantalla se muestra una
previsualización de la aplicación que se está implementando, podríamos decir que es el lienzo sobre el qué dibujar
la interfaz.

Fig. 14. Vista diseño.

8.3. Vista de diseño. Palette

En la parte de la izquierda del área de diseño aparece el menú Palette, que
recoge todos los componentes, propiedades y contenedores que se utilizan
en la creación de una interfaz gráfica. Desde el menú Palette se realiza
todo el diseño de la interfaz, ya que incorpora múltiples herramientas
como los containers, que definen el tipo de contenedor donde se ubican
los componentes; layouts, que determinan la distribución exacta de los
elementos, o los componentes (components) que queramos utilizar en la
interfaz (etiquetas, campos de texto o botones, entre otros).

Los componentes gráficos son los elementos que permiten al usuario

interaccionar con la aplicación. Cada uno de los componentes corresponde
con una clase en Java, es decir, cada componente tendrá sus propios
métodos y atributos, por lo que, cuando se quieran utilizar, bastará con
crear una instancia del objeto deseado. Fig. 15. Componentes.

Para insertarlos en la zona de diseño basta con hacer clic sobre el componente y arrastrarlo hasta la zona del
contenedor exacta en la que se va a ubicar.

8.4. Vista de diseño. Structure

La última sección de la vista de diseño en Eclipse recibe el nombre de
Structure y está formada por dos partes claramente diferenciadas:
components y propierties.

• Components: Esta zona muestra un resumen de todos los

componentes que se han colocado en el diseño de la interfaz, como
si de un explorador de carpetas y archivos se tratase, pero en este
caso nos muestra los elementos de diseño. Como se puede observar,
aparece el nombre de la instancia del objeto que se ha creado en el
caso de los botones btnNewButton y btnNewButton_1, pero este
es solo el nombre de la variable en Java; el texto que se muestra
al usuario puede ser diferente y, en la mayor parte de los casos, lo
será. Este se muestra entre comillas. Fig. 16. Componentes
 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional

• Propierties: Cada uno de los componentes dispone de diferentes

propiedades que podrán ser modificadas desde la ventana que se
encuentra a la izquierda de la paleta de elementos (Palette).

Una de las propiedades más importantes es la llamada Variable, que

recoge el nombre de la instancia del componente creado en código
Java. Por ejemplo, si se inserta un componente de tipo botón
(JButton), el nombre que recibe la nueva instancia del objeto
sería btnNewButton. Si se incluye otro botón, este nombre será
diferente: no pueden existir dos elementos con el mismo nombre. Fig. 17. Propiedades.

En el caso de los botones, otras de las propiedades de aspecto que aparecen y que permiten definir la apariencia
son: ‘background’, para seleccionar el color de fondo del botón; ‘enabled,’ que permite habilitar o deshabilitar su
funcionalidad; ‘font’ y ‘foreground’, que definen el tipo de letra, el tamaño y el color, entre otras.

Vídeo 2. “Funcionamiento modo Design

en Eclipse”
https://bit.ly/2CEeMJW

/ 9. Caso práctico 1: “Creación de un JFrame”

Planteamiento: La clase JFrame permite realizar operaciones para crear y manipular ventanas. Los pasos
imprescindibles para la creación de una ventana son:

Indicar su tamaño.

Indicar que permanezca visible.

Establecer la acción de cierre.

Implementa una ventana desde cero utilizando solo el código de programación, es decir, sin utilizar la creación de
JFrame desde el menú File. Tras realizar este desarrollo, ¿cuál es una de las grandes diferencias que puedes observar
entre las dos creaciones descritas?

Nudo: En el siguiente código se muestran cada uno de los pasos descritos en el planteamiento mediante el uso de
los métodos setSize, setVisible y setDefaultCloseOperation, y se definen todos los parámetros de diseño necesarios
para generar una ventana desde cero.

import javax.swing.*;
public class MiPrimeraVentana {
public static void main(String[] args) {
JFrame f = new JFrame(“Mi primera ventana”);
f.setSize(400, 400);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}

Código 2. Código creación Frame.

 TEMA 1. INTRODUCCIÓN A LA CONFECCIÓN DE INTERFACES
Desarrollo de interfaces / 14

Desenlace: El resultado del código anterior es una ventana como la que se muestra en la siguiente imagen, en la que
se puede apreciar las dimensiones establecidas de 400 x 400 píxeles de ancho por y alto y el nombre de la ventana.

Fig. 18. Mi primera ventana.

Es importante destacar que unas de las principales diferencias a la hora de crear un JFrame directamente con el
código es que no estará habilitado el modo Design.

Fig. 19. . Ilustración Eclipse sin modo Design.

/ 10. Caso práctico 2: “Creación de un botón”

Planteamiento: A lo largo del tema hemos analizado que la vista en modo Design permite colocar elementos en la
interfaz mientras se muestra una previsualización del resultado final. Utilizando esta vista, crea dos botones sobre
una ventana que muestren la opción de Aceptar y Cancelar.

Nudo: Para crear un JFrame seleccionamos en el menú File -> New -> Other -> JFrame. Como podemos ver, esta clase
crea el siguiente código implementado en la vista ‘Source’. Además, por defecto, se importa la librería AWT:

Fig. 20. Código JFrame en la vista Source.

 TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 15 MEDAC · Instituto Oficial de Formación Profesional

• Añadir dos objetos de tipo JButton. Desde la vista Design añadimos un componente JButton y modificamos su
propiedad ‘text’ con el contenido «Aceptar». Repetimos el proceso para el botón «Cancelar» y lo colocamos
en otro de los ‘containers’.

Fig. 21. Ilustración sobre botones en la vista Design.

Desenlace: La interfaz final que obtendremos corresponderá con un resultado similar al que se muestra en la imagen.

Fig. 22. Ilustración del resultado final.

/ 11. Resumen y resolución del caso práctico de la

unidad
En este tema hemos visto que el paquete Swing contiene todas las clases necesarias para programar todo tipo de
componentes visuales como botones, etiquetas, menús desplegables o casillas de verificación, entre muchos otros.

Para lograr una interfaz básica, será necesario hacer uso de al menos un componente de clase JFrame para crear la
ventana y poder añadirle objetos que sirvan para interactuar entre el usuario y la aplicación.

Hemos comprobado también que, durante el desarrollo de una interfaz, podemos servirnos de dos modos de diseño.

Finalmente, hemos profundizado sobre el modo Design, que permite trabajar con una zona de diseño que contiene
una previsualización del resultado final de la interfaz y que además está compuesto por todos los elementos que se
le pueden añadir a esta, así como los contenedores dónde se colocaran dichos elementos.
 TEMA 1. INTRODUCCIÓN A LA CONFECCIÓN DE INTERFACES
Desarrollo de interfaces / 16

Resolución del caso práctico de la unidad.

Como se ha visto a lo largo del tema, el proceso de implementación no solo es importante para el desarrollo de
interfaces, sino también para tomar una serie de decisiones previas. Para el caso inicial del desarrollo de una interfaz
de una calculadora:

• ¿Qué tipo de componentes gráficos será necesarios implementar en la interfaz?: dadas las características
de la interfaz, sería necesario utilizar botones para los números y operaciones. Para mostrar el resultado
simulando un visor, se puede utilizar una etiqueta.

• ¿Cuál crees que sería el lenguaje más apropiado para desarrollar esta interfaz?: tal y como se ha visto a lo
largo del tema, para el desarrollo de una interfaz debemos utilizar lenguajes de alto nivel. En este caso se opta
por el lenguaje Java.

• ¿Qué entorno de desarrollo elegirías?: Dependiendo del lenguaje de programación que se vaya a utilizar y
del tipo de interfaz, habrá que elegir un IDE u otro. En este caso, si se usa el lenguaje Java, uno de los IDE
recomendados es Eclipse.

• ¿Conoces alguna librería específica para el desarrollo gráfico de interfaces?: para la implementación de
interfaces gráficas se requiere del uso de librerías que permiten el desarrollo de interfaces. En Java podemos
utilizar de la librería AWT y de Swing.

El prototipo de diseño de interfaz que se propone para el caso práctico inicial podría ser como el que se muestra en
la imagen.

/ 12. Bibliografía
Fernández, A., García-Miguel, B. y García-Miguel, D. (2020). Desarrollo de Interfaces. (1.a ed.). Madrid: Síntesis.