DIRECCIÓN ACADÉMICA

Formato de entrega de evidencias

FO-205P11000-14

División: ​(1) INGENIERIA EN SISTEMAS COMPUTACIONALES Grupo: ​(2) 343-M

Asignatura:​ (3) TOPICOS AVANZADOS DE Docente: ​(4) Ing. OSCAR OLIVARES LÓPEZ
PROGRAMACION
Nombre y número de control: ​(5)​ 163107285 Isaac Moshe Roldan González
Fecha de entrega: ​(6) 10/04/2018
Competencia No.: ​(7) 1 Descripción: ​(8) Desarrolla programas para interactuar con el usuario de una
manera amigable, utilizando GUI (Interfaz Gráfica de Usuario)
manipuladas a través de eventos.
Indicador de alcance: ​(9) A. Comprende y explica los elementos básicos de la interfaces gráfica.
Evidencia de aprendizaje: ​(10) Resumen Elementos básicos de la interfaz gráfica.

Componentes GUI.
Una interfaz gráfica de usuario (GUI) presenta un mecanismo amigable al usuario
para interactuar con una aplicación. Las GUIs se crean a partir de componentes
de la GUI, a estos se les conoce también como controles o widgets (accesorios de
ventana) en otros lenguajes. Un componente de la GUI es un objeto con el cual
interactúa el usuario mediante el ratón, el teclado u otra forma de entrada como el
reconocimiento de voz.
Clase JOptionPane de Java (paquete javax.swing).
Proporciona cuadros de diálogo preempaquetados para entrada y salida. Estos
diálogos se muestran mediante la invocación de los métodos static de
JOptionPane.
Ejm.
// Suma.java
// Programa de suma que utiliza a JOptionPane para entrada y salida.
import javax.swing.JOptionPane; // el programa usa JOptionPane

public class Suma

{
public static void main( String args[] )
{
// obtiene la entrada del usuario de los diálogos de entrada de JOptionPane
String primerNumero =
JOptionPane.showInputDialog( "Introduzca el primer entero" );
String segundoNumero =
 JOptionPane.showInputDialog( "Introduzca el segundo entero" );

// convierte las entradas String en valores int para usarlos en un cálculo

int numero1 = Integer.parseInt( primerNumero );
int numero2 = Integer.parseInt( segundoNumero );

int suma = numero1 + numero2; // suma números

// muestra los resultados en un diálogo de mensajes de JOptionPane

JOptionPane.showMessageDialog( null, "La suma es " + suma,
"Suma de dos enteros", JOptionPane.PLAIN_MESSAGE );
} // fin del método main
} // fin de la clase Suma

Componentes básicos de GUI

JLabel Muestra texto que no puede editarse, o iconos
JTextFieldPermite al usuario introducir datos mediante el teclado. También se
puede utilizar para mostrar texto que puede o no editarse
JButton Activa un evento cuando se oprime mediante el ratón
JCheckBox Especifica una opción que puede seleccionarse o no
JComboBox Proporciona una lista desplegable de elementos, a partir de los cuales el
usuario puede realizar una selección, haciendo clic en un elemento o
posiblemente escribiendo e el cuadro.
JList Proporciona una lista de elementos a partir de los cuales el usuario
puede realizar una selección, haciendo clic en cualquier elemento en la
lista. Pueden seleccionarse varios elementos.
JPanel Proporciona un área en la que pueden colocarse y organizarse los
componentes. También puede utilizarse como un área de dibujo para
gráficos

Superclases de los componentes de GUI.

El siguiente diagrama de clases UML, muestra una jerarquía de herencia que
contiene clases a partir de las cuales los componentes Swing
La clase Component (java.awt) es una subclase de Object que declara muchos de
los atributos y comportamientos comunes para los componentes de GUI en los
paquetes java.awt y java.swing. La mayoría de los componentes GUI extienden la
clase Component de manera directa o indirecta.
La clase Container (paquete java.awt) es una subclase Component. Los objetos
Component se adjuntan a objetos Container (como las ventanas), de manera que
los objetos component se pueden organizar y mostrar en la pantalla. Cualquier
objeto que sea un Container se puede utilizar para organizar o otros objetos
Container para ayudar a organizar una GUI.
La clase JComponent (javax.swing) es una subclase de Container. JComponent
es la superclase de todos los componentes ligeros de Swing, y declara los
atributos y comportamientos comunes. Debido a que jComponent es una subclase
de Container, todos los componentes ligeros de Swing son también objetos
Container.
Demostración de la clase JLabel
// LabelFrame.java
// Demostración de la clase JLabel.
import java.awt.FlowLayout; // especifica cómo se van a ordenar los componentes
import javax.swing.JFrame; // proporciona las características básicas de una
ventana
import javax.swing.JLabel; // muestra texto e imágenes
import javax.swing.SwingConstants; // constantes comunes utilizadas con Swing
import javax.swing.Icon; // interfaz utilizada para manipular imágenes
import javax.swing.ImageIcon; // carga las imágenes

public class LabelFrame extends JFrame

{
private JLabel etiqueta1; // JLabel sólo con texto
private JLabel etiqueta2; // JLabel construida con texto y un icono
private JLabel etiqueta3; // JLabel con texto adicional e icono

// El constructor de LabelFrame agrega objetos JLabel a JFrame

public LabelFrame()
{
super( "Prueba de JLabel" );
setLayout( new FlowLayout() ); // establece el esquema del marco

// Constructor de JLabel con un argumento String

etiqueta1 = new JLabel( "Etiqueta con texto" );
etiqueta1.setToolTipText( "Esta es etiqueta1" );
add( etiqueta1 ); // agrega etiqueta1 a JFrame
 // Constructor de JLabel con argumentos de cadena, Icono y alineación
Icon insecto = new ImageIcon( getClass().getResource( "insecto1.gif" ) );
etiqueta2 = new JLabel( "Etiqueta con texto e icono", insecto,
SwingConstants.LEFT );
etiqueta2.setToolTipText( "Esta es etiqueta2" );
add( etiqueta2 ); // agrega etiqueta2 a JFrame

etiqueta3 = new JLabel(); // Constructor de JLabel sin argumentos

etiqueta3.setText( "Etiqueta con icono y texto en la parte inferior" );
etiqueta3.setIcon( insecto ); // agrega icono a JLabel
etiqueta3.setHorizontalTextPosition( SwingConstants.CENTER );
etiqueta3.setVerticalTextPosition( SwingConstants.BOTTOM );
etiqueta3.setToolTipText( "Esta es etiqueta3" );
add( etiqueta3 ); // agrega etiqueta3 a JFrame
} // fin del constructor de LabelFrame
} // fin de la clase LabelFrame

Prueba de LabelFrame
// PruebaLabel.java
// Prueba de LabelFrame.
import javax.swing.JFrame;

public class PruebaLabel

{
public static void main( String args[] )
{
LabelFrame marcoEtiqueta = new LabelFrame(); // crea objeto LabelFrame
marcoEtiqueta.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
marcoEtiqueta.setSize( 275, 180 ); // establece el tamaño del marco
marcoEtiqueta.setVisible( true ); // muestra el marco
} // fin de main
} // fin de la clase PruebaLabel

Componentes de GUI básicos

Constante Descripción
Constantes de posición horizontal
SwingConstantes.LEFT Coloca el texto a la izquierda
SwingConstantes.CENTER Coloca el texto en el centro
SwingConstantes.RIGHT Coloca el texto a la derecha

Constantes de posición vertical

SwingConstantes.TOP Coloca el texto en la parte superior
SwingConstantes.CENTER Coloca el texto en el centro
SwingConstantes.BOTTOM Coloca el texto en la parte inferior

Campos de texto y manejo de eventos con clases anidadas.

Las GUIs son controladas por eventos. Cuando el usuario interactúa con un
componente de la GUI, la interacción controla el programa para que realice una
tarea. El código que realiza una tarea en respuesta a un evento
La clase JTextField extiende a la clase JTextComponent, que proporciona
características comunes para los componentes de Swing basados en texto.
La clase JPasswordField extiende JTextField y agrega varios métodos específicos
para el procesamiento de contraseñas. Cada uno de estos componentes es un
área de una sola línea, en el cual el usuario puede introducir texto mediante
teclado.

Demostración de la clase JTextField

// CampoTextoMarco.java
// Demostración de la clase JTextField.
import java.awt.FlowLayout;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JPasswordField;
import javax.swing.JOptionPane;

public class CampoTextoMarco extends JFrame

{
private JTextField campoTexto1; // campo de texto con tamaño fijo
private JTextField campoTexto2; // campo de texto construido con texto
private JTextField campoTexto3; // campo de texto con texto y tamaño
private JPasswordField campoContrasenia; // campo de contraseña con texto

// El constructor de CampoTextoMarco agrega objetos JTextField a JFrame

public CampoTextoMarco()
{
super( "Prueba de JTextField y JPasswordField" );
setLayout( new FlowLayout() ); // establece el esquema del marco

// construye campo de texto con 10 columnas

campoTexto1 = new JTextField( 10 );
add( campoTexto1 ); // agrega campoTexto1 a JFrame

// construye campo de texto con texto predeterminado

campoTexto2 = new JTextField( "Escriba el texto aqui" );
 add( campoTexto2 ); // agrega campoTexto2 a JFrame

// construye campo de texto con texto predeterminado y 21 columnas

campoTexto3 = new JTextField( "Campo de texto no editable", 21 );
campoTexto3.setEditable( false ); // deshabilita la edición
add( campoTexto3 ); // agrega campoTexto3 a JFrame

// construye campo de contraseña con texto predeterminado

campoContrasenia = new JPasswordField( "Texto oculto" );
add( campoContrasenia ); // agrega campoContrasenia a JFrame

// registra los manejadores de eventos

ManejadorCampoTexto manejador = new ManejadorCampoTexto();
campoTexto1.addActionListener( manejador );
campoTexto2.addActionListener( manejador );
campoTexto3.addActionListener( manejador );
campoContrasenia.addActionListener( manejador );
} // fin del constructor de CampoTextoMarco

// clase interna privada para el manejo de eventos

private class ManejadorCampoTexto implements ActionListener
{
// procesa los eventos de campo de texto
public void actionPerformed( ActionEvent evento )
{
String cadena = ""; // declara la cadena a mostrar

// el usuario oprimió Intro en el objeto JTextField campoTexto1

if ( evento.getSource() == campoTexto1 )
cadena = String.format( "campoTexto1: %s",
evento.getActionCommand() );

// el usuario oprimió Intro en el objeto JTextField campoTexto2

else if ( evento.getSource() == campoTexto2 )
cadena = String.format( "campoTexto2: %s",
evento.getActionCommand() );

// el usuario oprimió Intro en el objeto JTextField campoTexto3

else if ( evento.getSource() == campoTexto3 )
cadena = String.format( "campoTexto3: %s",
evento.getActionCommand() );

// el usuario oprimió Intro en el objeto JTextField campoContrasenia

else if ( evento.getSource() == campoContrasenia )
cadena = String.format( "campoContrasenia: %s",
 new String( campoContrasenia.getPassword() ) );

// muestra el contenido del objeto JTextField

JOptionPane.showMessageDialog( null, cadena );
} // fin del método actionPerformed
} // fin de la clase interna privada ManejadorCampoTexto
} // fin de la clase CampoTextoMarco

Prueba de CampoTextoMarco

// PruebaCampoTexto.java
// Prueba de CampoTextoMarco.
import javax.swing.JFrame;

public class PruebaCampoTexto

{
public static void main( String args[] )
{
CampoTextoMarco campoTextoMarco = new CampoTextoMarco();
campoTextoMarco.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
campoTextoMarco.setSize( 350, 100 ); // establece el tamaño del marco
campoTextoMarco.setVisible( true ); // muestra el marco
} // fin de main
} // fin de la clase PruebaCampoTexto

Cómo funciona el manejo

Registro de Eventos. Todo JComponent tiene una variable de instancia llamada
listenerList, que hace referencia a un objeto de la clase EventListenerList
(javax.swing.event). Cada objeto de una subclase de JComponent mantiene
referencias a todos sus componentes de escucha registrados en listenerList.

Invocación del manejador de eventos. Cada tipo de evento tiene uno o más
interfaces de escucha de eventos de interfaces de escucha de eventos
correspondientes. Por ejemplo, los eventos tipo ActionEvent son manejados por
objetos MouseListener y MouseMotionListener, y los eventos tipo KeyEvent son
manejados por objetos MouseListener y MouseMotionListener, y los eventos
KeyEvent son manejados por objetos KeyListener