Departamento de Ciencias de la Computación

Programación II

Exposición:
Interfaz gráfica de Usuario

Integrantes:
Edgar Meneses
Steven Palacios
Paulette Parra

NRC:
4187

Profesora:
Ing. Margarita Zambrano

Fecha de entrega:
13/02/2017

Sangolquí-Ecuador
 INTERFAZ GRÁFICA DE USUARIO

1.1 Introducción
En la programación una de las dificultades no solo se compone del desarrollo de un código
funcional, sino, es la interacción entre las personas y la computadora, es decir cuando una
persona desea realizar un proceso en un computador requiere de una pantalla que le
explique qué debe realizar y que le facilite entender este proceso, para ello en la actualidad
se dispone de una interfaz gráfica que se compone de elementos gráficos, elementos
compuestos por objetos gráficos inscritos sin una superficie de contacto en la que se
pueden a su vez agregar elementos con sonido entre otras cosas, la cual facilitará que el
ser humano interactúa con la máquina y pueda usar la aplicación de una manera mejor
encaminada y más dinámica para él con la pantalla mostrada.

Fig 1. Código de un programa en Java. Fuente: Internet.

1.2 Objetivos

a) Dar a conocer una visión general y las características de las Interfaces Graficas en
Java.
b) Comprender el funcionamiento de las API de Java para la creación de Interfaces
Graficas de Usuario (GUI).
c) Implementar todos los elementos del AWT y del SWING para la creación de
interfaces de fácil manejo para juntarlas con los códigos de programas previamente
estudiados.
d) Realizar un ejemplo concreto de la utilización de las interfaces gráficas para la
retroalimentación de los conocimientos a impartir en la clase.
1.3 Conceptualización

1.3.1 Definición de interfaz gráfica de usuario

Conocida también como GUI (Graphical User Interface), es un programa informático que
actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para
representar la información y acciones disponibles en la interfaz. (Lapuente, s.f.)

Las características básicas de una buena interfaz podrían sintetizarse en:

 Facilidad de comprensión, aprendizaje y uso

 Representación fija y permanente de un determinado contexto de acción (fondo)
 Diseño ergonómico mediante el establecimiento de menús, barras de acciones e
iconos de fácil acceso
 Las interacciones se basarán en acciones físicas sobre elementos de código visual
o auditivo (iconos, botones, imágenes, mensajes de texto o sonoros, barras de
desplazamiento y navegación...) y en selecciones de tipo menú con sintaxis y
órdenes
Pasos
 El área donde crearemos el UI será el proporcionado por un contenedor, y que
inicialmente será una ventana.
 Definir el gestor de geometría que usaremos para el contenedor. Decidirá cómo
se visualizan los componentes dentro del contenedor.
 Crear los componentes que irán dentro del contenedor.
 Añadir (visualizar) los componentes dentro del contenedor.
 Enlazar con los escuchadores de eventos.
 Si los componentes que creamos son contenedores se repite el ciclo otra vez.

1.4 Componentes de una interfaz gráfica en JAVA

Existe una interfaz gráfica de usuario denominada con las siglas GUI, cuando nosotros
desarrollamos una aplicación o programa usando Java es necesario que escojamos los
componentes que son necesarios y apropiados para dicho GUI, por ello en la interfaz
gráfica en JAVA existen dos tipos en los que se ha clasificado los componentes para su
creación, estos son:
La interfaz de usuario es la parte del programa que permite al usuario interaccionar con
él. La API de Java proporciona una biblioteca de clases para el desarrollo de Interfaces
gráficas de usuario (en realidad son dos).
La biblioteca proporciona un conjunto de herramientas para la construcción de interfaces
gráficas que tienen una apariencia y se comportan de forma semejante en todas las
plataformas en las que se ejecuten. La estructura básica de la biblioteca gira en torno a
componentes y contenedores. Los contenedores contienen componentes y son
componentes a su vez, de forma que los eventos pueden tratarse tanto en contenedores
como en componentes.
La API está constituida por clases, interfaces y derivaciones.
Los principales componente de la interfaz gráfica de Java se compone de: AWT y Swing.
- La Abstract Window Toolkit (AWT, en español Kit de Herramientas de Ventana
Abstracta) es un kit de herramientas de gráficos, interfaz de usuario, y sistema de
ventanas independiente de la plataforma original de Java. AWT es ahora parte de
las Java Foundation Classes (JFC) - la API estándar para suministrar una interfaz
gráfica de usuario (GUI) para un programa Java.
Swing es una biblioteca gráfica para Java. Incluye widgets para interfaz gráfica de
usuario tales como cajas de texto, botones, desplegables y tablas.
Podemos decir que Swing es la evolución del AWT (Abstract Window Toolkit), la cual
al igual que Swing es un conjunto de librerias enfocadas a la construcción de interfaces,
solo que con esta se presentaron algunos problemas en cuanto a portabilidad
principalmente cuando se desarrollaban aplicaciones para diferentes sistemas operativos,
pues el comportamiento de los componentes graficos en ocasiones podían variar, el punto
es que a partir de AWT nace Swing y con el mejoras no solo en aspectos visuales sino
también en portabilidad y comportamiento

a. Las Internet Foundation Classes (IFC) eran una biblioteca gráfica para el lenguaje
de programación Java desarrollada originalmente por Netscape y que se publicó
en 1996.
b. Las Java Foundation Classes (JFC, en castellano Clases Base Java) son un
framework gráfico para construir interfaces gráficas de usuario portables basadas
en Java. JFC se compone de Abstract Window Toolkit (AWT), Swing y Java 2D.
Juntas, suministran una interfaz de usuario consistente para programas Java, tanto
si el sistema de interfaz de usuario subyacente es Windows, Mac OS X o Linux.

1.4.1 Visión general de AWT

El interfaz de usuario es el aspecto más importante de cualquier aplicación. Una

aplicación sin un interfaz fácil, impide que los usuarios saquen el máximo rendimiento
del programa. Java proporciona los elementos básicos para construir interfaces de usuario
a través del AWT, y opciones para mejorarlas mediante Swing, que sí permite la creación
de interfaces de usuario de gran impacto.
La Abstract Window Toolkit (AWT, en español Kit de Herramientas de Ventana
Abstracta) es un kit de herramientas de gráficos, interfaz de usuario, y sistema de ventanas
independiente de la plataforma original de Java.
Al nivel más bajo, el sistema operativo transmite información desde el ratón y el teclado
como dispositivos de entrada al programa. El AWT fue diseñado pensando en que el
programador no tuviese que preocuparse de detalles como controlar el movimiento del
ratón o leer el teclado, ni tampoco atender a detalles como la escritura en pantalla. El
AWT constituye una librería de clases orientada a objeto para cubrir estos recursos y
servicios de bajo nivel.
AWT es enorme, se compone de 12 paquetes. Afortunadamente, sólo 2 paquetes -
java.awty java.awt.event se utilizan comúnmente.
 El java.awtpaquete contiene los núcleos clases gráficas AWT.
 El java.awt.eventpaquete es compatible con la gestión de eventos.
AWT proporciona una plataforma independiente del dispositivo de interfaz para
desarrollar programas de diseño gráfico que se ejecuta en todas las plataformas, como
Windows, Mac y Linux.

1.4.2 Las Funciones AWT incluyen:

java.awt.Graphics

 Proporciona métodos para dibujar figuras, fonts, imágenes, etc.

 Representa el contexto gráfico de un componente o imagen.

java.awt.Component

Proporciona componentes de alto nivel para construir los interfaces de usuario.

Estructura del AWT (Abstract Window Toolkit)

 La estructura de la versión actual del AWT se puede resumir en los puntos que se
exponen a continuación:
 Los Contenedores contienen Componentes, que son los controles básicos
 No se usan posiciones fijas de los Componentes, sino que están situados a través
de una disposición controlada (layouts)
 El común denominador de más bajo nivel se acerca al teclado, ratón y manejo de
eventos
 Alto nivel de abstracción respecto al entorno de ventanas en que se ejecute la
aplicación (no hay áreas cliente, ni llamadas a X, ni hWnds, etc.)
  La arquitectura de la aplicación es dependiente del entorno de ventanas, en vez de
tener un tamaño fijo
 Es bastante dependiente de la máquina en que se ejecuta la aplicación (no puede
asumir que un diálogo tendrá el mismo tamaño en cada máquina)
 Carece de un formato de recursos. No se puede separar el código de lo que es
propiamente interface. No hay ningún diseñador de interfaces (todavía)

Clases:

 Button
 Label
 Checkbox
 Choice
 List
 TextField
 TextArea
 Scrollbar
 Canvas
 Menu
 MenuBar
 PopupMenu

Contenedores:

 Panel
 Frame
 Dialog
 ScrollPane

1.4.3 Visión general del Swing

Con Swing le daremos vida a nuestro sistema, ya que se crearán las vistas de la
aplicación, por medio de las cuales el Usuario interactuará con el sistema, veremos que
se tiene una gran cantidad de posibilidades para estructurar nuestros desarrollos, se
pueden manejar los eventos de cada componente dependiendo de nuestras necesidades.
Swing implementa un conjunto de componentes de Interfaz Gráfica de Usuario que se
basan en la tecnología AWT y proporcionan un aspecto y sensación de adaptabilidad.
Swing está implementado en su totalidad en el lenguaje de programación Java y se basa
en el JDK Framework Lightweight UI.
Explicaciones:
- Java Development Kit o (JDK), es un software que provee herramientas de
desarrollo para la creación de programas en Java. Puede instalarse en una
computadora local o en una unidad de red. Se trata de un conjunto de herramientas
(programas y librerías) que permiten desarrollar (compilar, ejecutar, generar
documentación, etc.) programas en lenguaje Java.
- Uno de los problemas con el 1.0 AWT es que la creación de nuevos componentes
requiere la creación de subclases de java.awt.Canvas o java.awt.Panel, lo que
significa que cada nuevo componente posee su propia ventana nativa opaca. Este
acoplamiento uno-a-uno entre los componentes y las ventanas nativas da lugar a
tres problemas:
Ventanas nativas pueden ser pesadas, por lo que es indeseable tener demasiados de ellos.
Las ventanas nativas son opacas, por lo que no se pueden utilizar para implementar
regiones transparentes.
Las ventanas nativas se manejan de forma diferente en todas las plataformas, por lo que
el AWT tiene que luchar para mantener una vista consistente a través de estas variadas
plataformas.
En la versión beta3 de JDK1.1, hemos implementado los ganchos que permiten la
creación de componentes de interfaz de usuario "ligeros"; Estos ganchos se llaman el
marco ligero de la interfaz de usuario.

1.4.4 Las características de SWING son:

Swing es parte de los llamados "Java Foundation Classes (JFC)" Que se introdujo en 1997
después de la liberación de JDK 1.1. JFC se incluyó posteriormente como una parte
integral de JDK desde JDK 1.2. JFC consiste en:
 Swing del API: para la programación gráfica avanzada.
 Accesibilidad API: proporciona la tecnología de asistencia para personas con
discapacidad.
 API Java 2D: para gráficos e imágenes 2D de alta calidad.
 Soporta Pluggable look and feel.
 soporte de arrastrar y soltar entre Java y aplicaciones nativas.
1.4.5 AWT Vs. Swing, Ventajas y Desventajas

AWT Java Swing

AWT permite hacer interfaces gráficas

El paquete Swing es parte de la JFC (Java
mediante artefactos de interacción con el
Foundation Classes) en la plataforma Java. La
usuario, como botones, menús, texto,
JFC provee facilidades para ayudar a la gente a
botones para selección, barras de
construir GUIs. Swing abarca componentes
deslizamiento, ventanas de diálogo,
como botones, tablas, marcos, etc...
selectores de archivos, etc.

Las componentes de Swing utilizan la

Cada una de las componentes de una
ventana en AWT se representa mediante
uno o más objetos de la aplicación. La clase
de los contenedores sirve para crear áreas
en la ventana cuyo único fin es colocar otras
componentes en su interior.
infraestructura de AWT, incluyendo el modelo
de eventos AWT, el cual rige cómo una
componente reacciona a eventos tales como,
eventos de teclado, mouse, etc... Es por esto,
que la mayoría de los programas Swing
necesitan importar dos paquetes AWT:
java.awt.* y java.awt.event.*.

El argumento que recibe el constructor es la

Cada vez que el usuario interactúa con la
etiqueta que se colocará sobre el botón. El
aplicación se gatilla un evento, para que una
aspecto y comportamiento de este botón es
componente determinada reaccione frente a un
dependiente de la plataforma. La aplicación
evento, debe poseer un "escuchador" con, al
se basa sólo en que será informada cuando
menos, un método determinado que se
el botón sea presionado por el usuario para
ejecutará al escuchar un evento en particular.
ejecutar alguna acción.
Tabla 1. Comparación del Swing vs AWT. Fuente: Grupo 2.

Entre AWT y Java Swing hay gran diferencia, pero al mismo tiempo hay grandes aspectos
en común, ambos nos sirven para realizar artefactos gráficos y utilizan prácticamente las
mismas funciones y componentes, pero su diferencia radica en que principalmente Java
Swing es más avanzado y sus componentes se desarrollan de mejor manera, además
desde AWT necesitamos tener una plataforma específica, mientras que desde Java Swing
podemos utilizarlo y visualizarlo desde diferentes lugares. Para la programación es muy
importante conocer éste tipo de herramientas, pues son de gran ayuda.

1.5 Creación de interfaces gráficas de usuario con SWING

Por su actualidad y ser adecuado en su manejo, se utiliza el Swing en la modernidad

para el diseño y creación de una Interfaz Gráfica en JAVA, como todo componente de
Java el Swing tiene los elementos de las clases.
 Figura 2. Elementos clase del Swing. Fuente: Internet.

Las clases cuyo nombre inician con J forman parte del Swing. Todas las demás están
incluidas en AWT (Abstract Window Toolkit).

 Component: es una clase abstracta que representa cualquier componente con

representación gráfica.

 Container: es un componente que puede contener a otros componentes gráficos.

(Ejm: JPanel).

 JFrame: permite representar ventanas, si bien también se pueden utilizar clases

como JApplet o JDialog, los frames como JFrame son contenedores, por lo que
incluyen un “panel de contenido” (content pane) al cual se le pueden añadir
componentes gráficos (etiquetas, botones, cajas de texto, etc.) y otros
contenedores (como paneles JPanel).

Las interfaces gráficas de usuario se construyen con componentes, cada uno de los cuales
está preparado para responder a distintos tipos de eventos. Algunos de lso componente
incluidos en Swing son:
JLabel
JButton
JCheckBox
 JComboBox
JList
JToolBar
JTable
Menús: JMenuBar, JMenu, JMenuItem
Ventanas de diálogo: JOptionPane
Ventanas estándar: JFileChooser, JColorChooser

1.5.1 Jerarquía de clases de java SWING

La Clase JComponent, desciende directamente de contenedores en la clase rais de la

mayoría de componentes Swing de interfaz de usuario. En la figura se muestra la jerarquía
a partir de la clase OBJECT hasta llegar a los componentes de Java Swing.

Figura 3. Jerarquía de las clases Swing. Fuente: Grupo 2.

1.6 Componentes de SWING

Las componentes de Swing utilizan la infraestructura de AWT, incluyendo el modelo de

eventos AWT, el cual rige cómo una componente reacciona a eventos tales como, eventos
de teclado, mouse, etc... Es por esto, que la mayoría de los programas Swing necesitan
importar dos paquetes AWT: java.awt.* y java.awt.event.*.
 AWT Swing
Applet JApplet
Frame JFrame
Window JWindow
Dialog JDialog
Component JComponent
Panel JPanel
Button JButton
Canvas Panel
Checkbox JCheckBox o
JRadioButton
Choice JComboBox
Label JLabel
List JList
TextArea JTextArea
TextField JTextField
Menu JMenu
MenuItem JMenuItem

Tabla 2. Paquetes de Swing y AWT relacionados. Fuente: Grupo 2 e Internet.

Como conclusión, podríamos decir que si queremos que nuestra aplicación corra en
cualquier entorno, independientemente de la antigüedad del mismo, deberíamos usar
AWT; ahora bien, si lo que queremos es una herramienta potente, flexible, usar tablas
y otros componentes complejos; y completamente adaptable a nuestras necesidades,
desde luego nuestra decisión está clara, usaremos la tecnología Swing. (swing-
facil.blogspot, s.f.)

1.6.1 JPanel

Los JPanel en Java son objetos contenedores, la finalidad de estos objetos es la

agrupación de otros objetos tales como botones, campos de texto, etiquetas, selectores,
etc; una gran ventaja de Usar JPanel en Java es que podemos manejar la agrupación de
una mejor forma, supongamos que tenemos una serie de botones en un panel, y deseamos
desactivarlos todos a las vez, en lugar de hacerlo individualmente con los botones,
podemos desactivar el panel y con esto los botones.
Es la versión Swing de la clase Panel de AWT y utiliza el mismo diseño por defecto,
FlowLayout.
El concepto de Layout puede traducirse como “disposición” o “plan” y tiene un uso
extendido en el ámbito de la tecnología.

El FlowLayout, es aquel layout que ubica a todos los componentes en forma horizontal,
en el orden q le digamos.

Primero tenemos que crear el contenedor (JFrame, JPanel, etc), y luego atravez del
metodo “setLayout()” asignarle el layout correspondiente.

JFrame frame = new JFrame();

frame.setLayout(new FlowLayout());

Una vez, asiganado el layout al contenedor, tendremos que agregar los componentes,
plenamente ya declarados y creados.

JButton boton = new JButton("Aceptar");

frame.add(boton);

Hecho esto, el contenedor mismo, los ubicara en el centro(por defecto). Si queremos que
empieze de derecha a izquierda o izquierda a derecha o en el centro, se lo decimos.

frame.setLayout(new floLayout(FlowLayout.CENTER));

frame.setLayout(new floLayout(FlowLayout.RIGHT));

frame.setLayout(new floLayout(FlowLayout.LEFT));

public class JPanel

extiende JComponent
implementa accesible

Creación de un nuevo JPanel

El JPanel clase reside en el paquete javax.swing y es una subclase de
la javax.swing.JComponent clase.

Normalmente creamos nuevas JPanel objeto tan simple como sigue:

JPanel newPanel = new JPanel();

Eso crea un nuevo JPanel con doble activado por defecto.

A menudo, creamos una clase que se extiende desde JPanel de la siguiente manera:
 public class UserDetail extends JPanel {
// code to add components to the panel
}

Si queremos especificar la estrategia de doble búfer de forma explícita, utilice el

constructor JPanel (isDoubleBuffered booleano) :

JPanel newPanel = new JPanel(true); // enable double buffering

JPanel newPanel = new JPanel(false); // disable double buffering

También podemos especificar un controlador de distribución al crear el panel:

JPanel newPanel = new JPanel(new GridBagLayout());

JPanel newPanel = new JPanel(new BorderLayout());

De manera predeterminada, el panel tiene un controlador de distribución de flujo.

Otro constructor nos permite especificar tanto la estrategia de almacenamiento en búfer

doble y un controlador de distribución:

// use grid bag layout and no double buffering:

JPanel newPanel = new JPanel(new GridBagLayout(), false);

1.6.2 Frame

Un Frame es una ventana de nivel superior con un título y un borde. El tamaño de la trama
incluye cualquier zona designada para la frontera. Las dimensiones de la zona fronteriza
se pueden obtener usando el método getInsets.

Un Frame, implementado como una instancia de la JFrameclass, es una ventana que tiene
decoraciones tales como un borde, un título, y es compatible con componentes de botón
que se cierran o iconificar la ventana. Las aplicaciones con una interfaz gráfica de usuario
incluyen generalmente al menos una trama. Applets veces utilizan tramas, también.
1.6.3 JInternalFrame

Figura 3. JInternalFrame. Fuente: Internet.

Un JInternalFrame es una ventana que va dentro de un panel y no puede salirse de él, y

para el uso de JInternalFrame se tiene que crear un JDesktopPane, que es la manera mas
adecuada de generar JInternalFrame’s.

Es importante darle tamaño al JInternalFrame, ya que si no, no lo veremos porque tiene

por defecto de tamaño 0,0 y no es redimensionable, ni se puede cerrar ni tiene botones
de maximizar y minimizar.

1.6.4 JWindow

JWindow no tiene la barra de título, botones de gestión de ventanas, u otros adornos

asociados con un JFrame. Piense en ello como una ventana sin borde.
Es la versión de Swing de la ventana y es desciendente directa de esa clase, al igual que
Windows, usa BorderLayout por defecto.

Figura 4. Diferencia entre Frame y JWindow. Fuente: Internet.

1.6.5 JDialog

Es la clase principal para la creación de una ventana de diálogo. Puede utilizar esta clase
para crear un diálogo personalizado, o invocar los muchos métodos de la clase en
JOptionPane y crear una variedad de diálogos estándar.
El JDialog contiene una JRootPane como su único hijo. El contentPane debe ser el padre
de los hijos del JDialog. Para su conveniencia add y sus variantes, remove y setLayout
han sido invalidada remitir a la contentPane que sea necesario.

Figura 5. Creación del JDialog. Fuente: Internet.

1.6.6 JLabel

Figura 6. JLabel en aplicación. Fuente: Internet.

Objeto de control JLabel

Un objeto de control Jlabel permite dibujar en el formulario una etiqueta, entendiéndose

como etiqueta una expresión estática que se quiere colocar. También es usado para
mostrar los resultados de un proceso.

Propiedades más usadas:

 Text: Contiene el valor que se visualizará en el formulario.

 Font: Permite establecer el tipo de letra de la expresión a mostrar en el formulario.
 Border: Para establecer el tipo de borde de la etiqueta.
 Enabled: Para habilitar o inhabilitar el uso del objeto de control.

1.6.7 JTextField

Permite la edición de una sola línea de texto. Las nuevas características incluyen la
capacidad de justificar el texto a la izquierda, derecha o centro y para establecer la
fuente del texto.

Figura 7. Creación del TextField. Fuente: Grupo 2.

1.6.8 JPsswordField

JPasswordFieldes un componente ligero que permite la edición de una sola línea de texto
donde la vista indica algo que se ha escrito, pero no muestra los caracteres originales.
JPasswordFieldse pretende que sea compatible con la fuente java.awt.TextField utilizada
con echoCharset. Se proporciona por separado para que sea más fácil cambiar de forma
segura la interfaz de usuario para el JTextField sin afectar a las entradas de contraseñas.

Figura 8. Uso del PasswordField. Fuente: Internet.

1.6.9 JTextArea

JTextArea es un componente básico del Swing de Java y su función principal es la de

capturar texto ingresado desde teclado por el usuario. Sin embargo, entre sus métodos
está el de asignarle texto para mostrarlo además.

Figura 9. JTextArea en la interfaz gráfica. Fuente: Internet.

1.6.10 JButton

• Componente donde el usuario hace clic para realizar una acción especificada en
el código.

Conclusiones
1. La interfaz gráfica de usuario va a permitir que exista una interacción entre el ser
humano y la máquina para efectuar las diversas funciones que se necesitan
realizar.
2. Existen líneas de código con llamados para implementar estas partes del Frame
pero el trabajo se acorta si creamos un New JFrame Form… y en la sección
Design procedemos a agregar los botones, textos, etc.
3. Como en cualquier componente, existe una jerarquía de clases en el Swing la
cual debemos respetar para la correcta funcionalidad de los programas que
construyamos.

Fuentes de consulta:
Recuperado el 11 de febrero de 2017 de:
https://es.wikipedia.org/wiki/Java_Foundation_Classes
http://docstore.mik.ua/orelly/java-ent/jfc/ch01_01.htm
https://www.dit.upm.es/~santiago/docencia/grado/tprg/apuntes3/pdf/Introduccion%20a
%20AWT.pdf
https://www.cis.upenn.edu/~bcpierce/courses/629/jdkdocs/guide/awt/designspec/lightw
eights.html
http://www.math.uni-hamburg.de/doc/java/tutorial/post1.0/preview/jfc.html
http://elvex.ugr.es/decsai/java/pdf/D1-swing.pdf
http://www3.ntu.edu.sg/home/ehchua/programming/java/j4a_gui.html
https://www.fdi.ucm.es/profesor/jpavon/poo/Tema6resumido.pdf
http://dis.um.es/~bmoros/Tutorial/parte13/cap13-1.html#Cap13_1_1