1TAP Tema 1-GUI.pptx

Departamento de Sistemas y Computación
TECNOLÓGICO NACIONAL DE MÉXICO
Instituto Tecnológico de Ciudad Madero
Tópicos Avanzados de
Programación
1- Interfaz gráfica de usuario
2- Componentes y Librerías
3- Programación concurrente-Multihilos
4- Acceso a Datos
5- Programación de Dispositivos Móviles

Tópicos Avanzados de
Programación
Tema 1:
Interfaz gráfica de usuario

Contenido
Tema 1 Subtemas
Interfaz gráfica de
usuario.
1.1 Creación de interfaz gráfica para
usuarios.
1.2 Tipos de eventos.
1.3 Manejo de eventos.
1.4 Manejo de componentes gráficos
de control.

Competencia específica
Desarrolla programas para interactuar con el usuario de
una manera amigable, utilizando GUI (Interfaz Gráfica de
Usuario) manipuladas a través de eventos.

Interfaz gráfica de usuario
Es un mecanismo amigable a través del cual un usuario
puede interactuar con una aplicación.
Se construye incorporando componentes GUI, conocidos
también como controles o widgets (window gadgets). Estos
componentes son los objetos a través de los cuales el
usuario puede interactuar con el uso de un ratón o del
teclado.

Componentes GUI
Para poder trabajar con estos componentes se hará uso de
los paquetes java.awt (acrónimo de Abstract Windowing
Toolkit) y javax.swing donde están definidos estos.

Componentes GUI
Java How to Program
Deitel y Deitel
Prentice Hall

Dialog boxes
Son cajas de diálogo o simplemente llamadas dialogs, es
un ejemplo sencillo con el cual se puede empezar a
interactuar con una aplicación.
Son ventanas muy sencillas de entrada/salida a través de
las cuales se puede obtener información del usuario o
enviar mensajes hacia el mismo.

Clase JOptionPane
Del paquete javax.swing – tiene dos métodos estáticos
para poder utilizar las cajas de diálogo:
 showInputDialog ( ) – despliega una caja de diálogo de
entrada.
 showMessageDialog ( ) – despliega una caja de diálogo
de salida con un mensaje.

Ejemplo de uso de un dialog box
Solicitar un valor de temperatura en grados Centígrados, como
se muestra en la primera caja de diálogo con el método
showInputDialog, y convertirlo a grados Farenheit, mostrado
en la segunda caja con el método showMessageDialog.

Código
package conversiontemperatura;
import javax.swing.JOptionPane;
public class ConversionTemperatura {
public static void main ( String [ ] args ) {
String cent = JOptionPane.showInputDialog ( "Introduce los
grados Centígrados" );
double c = Double.parseDouble ( cent );
double f = 1.8 * c + 32;
JOptionPane.showMessageDialog ( null,
"Los grados Farenheit equivalentes son: " + f,
"Conversión a grados Farenheit",
JOptionPane.PLAIN_MESSAGE );
}
}

Clase JOptionPane
Opciones del método showMessageDialog para
mostrar un ícono:
Java How to Program
Deitel y Deitel
Prentice Hall

Paquetes java.awt y javax.swing
Clases de componentes Swing son derivadas de las clases
del paquete java.awt, referidas como las Java Foundation
Classes (JFC) que cubren componentes para definir
botones y menús, dibujo 2D en paquete java.awt.geom,
drag-and-drop en paquete java.awt.dnd, además de
incorporar la característica pluggable look-and-feel para
cambiar la apariencia de un componente diseñando las
clases de una forma particular llamada la arquitectura
Modelo-Vista-Controlador (MVC)

Modelo – Vista – Controlador (MVC)
Es una forma de modelar un componente como tres partes
separadas:
 El modelo que almacena los datos
 La vista que crea la representación visual
 El controlador que trata de la interacción del usuario con el
componente y modifica el modelo y/o la vista
Beginning Java
Ivor Horton
John Wiley & Sons, Inc.

Jerarquía de clases
Beginning Java
Ivor Horton

Creación de una ventana básica
Ejemplo que utiliza la clase JFrame que para la ventana
tendrá un marco (frame) y una barra de título, con
dimensiones definidas, posicionada y dimensionada en la
pantalla, indicando lo que sucederá cuando se termine la
aplicación (se cerrará) y finalmente desplegarla:

Código
package ventanajframe;
import javax.swing.JFrame;
public class VentanaJFrame {
JFrame aWindow = new JFrame ( "Título de la ventana" );
int windowWidth = 400; // ancho de la ventana en pixeles
int windowHeight = 150; // altura de la ventana en pixeles
aWindow.setBounds ( 50, 100, // posiciona en la pantalla
windowWidth, windowHeight ); // y dimensiona
// cuando se termina la aplicación, cierra la ventana:
aWindow.setDefaultCloseOperation(Frame.EXIT_ON_CLOSE);
aWindow.setVisible ( true ); // despliega la ventana
}
}

Creación de una ventana con hilos
Los métodos para los componentes Swing deben ser
ejecutados en hilos separados del hilo del main, para evitar
alguna situación de interbloqueo que se presenta cuando un
conjunto de procesos o hilos de ejecución en un sistema
concurrente compiten por recursos del sistema o bien se
comunican entre ellos y para los cuales no existe una solución
general.
El hilo de ejecución para las GUI es llamado Swing event
dispatching thread.

Ejemplo
Crear la ventana con el método createWindow considerando
las siguientes características:
150
height
400 width
100
50
0,0
Eje x
Eje y

Código
package ventanaframeconhilos;
import javax.swing.SwingUtilities;
public class VentanaFrameConHilos {
public static void createWindow ( ) {
JFrame aWindow = new JFrame ( "Título de la ventana" );
int window Width = 400; // ancho de la ventana en pixeles
int windowHeight = 150; // altura de la ventana en pixeles
aWindow.setBounds ( 50, 100, // posiciona en la pantalla
windowWidth, windowHeight ); // y dimensiona
// cuando se termina la aplicación, cierra la ventana
aWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
aWindow.setVisible ( true ); // despliega la ventana
}

SwingUtilities.invokeLater ( new Runnable ( ) {
public void run ( ) {
createWindow ( );
}
});
}
}
Continuación del código…
invokeLater ( ) usa como argumento la creación de
un objeto de clase anónima Runnable para la
separación de hilos de ejecución y evitar el
interbloqueo mencionado y ejecuta el método run
que a su vez ejecuta el createWindow para la
creación de la ventana.

setDefaultCloseOperation ( )
¿Qué hará la aplicación al terminar?
Valores constantes que puede utilizar el método:
 DISPOSE_ON_CLOSE – el frame y los componentes
contenidos dentro de éste se destruyen, pero la
aplicación no termina.
 DO_NOTHING_ON_CLOSE – deja sin efecto la operación
de cierre para el frame.

setDefaultCloseOperation ( )
 HIDE_ON_CLOSE – oculta la ventana enviando valor false
al método setVisible, que es la acción por default si no se
invoca el método setDefaultCloseOperation con un valor
diferente. Cuando una ventana esta oculta se puede
desplegar nuevamente invocando al método setVisible
con un valor true.
 EXIT_ON_CLOSE – cierra la ventana liberando los
recursos tanto de la ventana como de los componentes
incluidos en la misma y finalmente termina la aplicación.

Componentes y contenedores
Un componente representa una entidad gráfica de alguna
clase que puede ser desplegada en la pantalla.
Es decir, es cualquier objeto de una clase que es subclase de
la clase Component, como la ventana JFrame que es un
componente como algunos otros más.

Jerarquía de clases de Component
Beginning Java
Ivor Horton

Window Panes
Son objetos contenedores que representan una área de una
ventana y son de diferentes tipos. Se usan cuando se quieren
agregar componentes GUI o dibujar en una ventana
desplegada desde un objeto JFrame o en un applet.

Window Panes
Se usa un window pane llamado la mayoría de las veces
como el content pane:
Tiene propiedades especiales
para aplicaciones avanzadas
que permiten manejar grupos
de componentes en capas
separadas que se sobreponen
dentro del pane por lo que se
puede controlar la forma en
cómo puedan ser desplegados
los componentes uno en
relación a otro, ya que las
capas son desplegadas en un
orden particular desde el fondo
hacia el frente.
Beginning Java
Ivor Horton

Window Panes
Hay también un pane adicional
(no mostrado en la figura):
glassPane, el cual corresponde
al total del área de JRootPane.
Los contenidos del objeto
glassPane se despliegan en la
parte superior de todos los
otros panes, por ejemplo un
menú drop-down. También se
pueden desplegar gráficos que
necesiten ser actualizados
frecuentemente como cuando
se crea una animación.
Beginning Java
Ivor Horton

Window Panes
Sin embargo cuando sólo parte
del despliegue va a ser
animado, puede usarse un
background estático
independiente por medio del
contentPane, ya que esto no
requiere ser reprocesado cada
vez que los objetos animados
necesitan ser redibujados, el
proceso completo puede ser
mucho más eficiente.
Beginning Java
Ivor Horton

Métodos de la clase JFrame
 getRootPane ( ) – Regresa el pane raíz de tipo JRootPane.
 getLayeredPane ( ) – Regresa el pane layered de tipo
JLayeredPane.
 getContentPane ( ) – Regresa el pane content de tipo
Container. Es el de uso más frecuente porque normalmente
aquí es donde se agregan los componentes.
 getGlassPane ( ) – Regresa el pane glass de tipo
Component.

Componentes
Todas las clases que representan panes son en sí componentes
Swing del paquete javax.swing.
Un objeto JApplet tiene el mismo arreglo de panes que un
objeto JFrame, por lo que agregar componentes o dibujar en un
applet se hace de la misma forma, además de que también tiene
una barra de menú como una aplicación window.
Todos los panes al igual que la barra de menú son
componentes.

Componentes
Un componente puede estar contenido dentro de otro
componente; el objeto más externo es el padre y se puede
obtener una referencia a éste de cualquier componente
llamando al método getParent ( ) heredado de la clase
Component, y retorna la referencia al padre de tipo Container ya
que las subclases de esta clase son las que pueden manejar
otros componentes y si no hubiera un padre como en el caso
de un componente de JFrame, el método regresa un valor null.

Atributos de la clase Component
• position – almacenada con coordenadas en (x,y) que indican
dónde está el objeto en relación a su contenedor en el
sistema de coordenadas del objeto contenedor.
• name – indica el nombre del componente en un objeto de
tipo String.
• size – tamaño del objeto expresado con valores de ancho y
alto.
• foreground y background – para color de primer plano y
fondo que aplican al objeto y que se usan cuando éste se
despliega.

Atributos de la clase Component
• font – se usa cuando se despliega texto.
• cursor – define apariencia del cursor cuando está sobre el
objeto, si está habilitado es true y tiene apariencia normal y
deshabilitado está en gris, si no se marca como visible no
se dibuja en pantalla.
Se pueden cambiar las características de un objeto Component
llamando a sus métodos o afectándolo indirectamente de
alguna forma, ya que todos los datos miembro que almacenan
sus características son privados, por ejemplo se puede
cambiar el nombre de un objeto myWindow de tipo Component
aplicando:
myWindow.setName ( "The Name" );
o para recuperar el nombre de un componente:
String theName = myWindow.getName ( );

Métodos de la clase Component
 isVisible ( ) – Regresa true si el componente está visible.
 isEnabled ( ) – Regresa true si el componente está
disponible.
 isValid ( ) – Regresa true si el componente es válido.
 setVisible ( ) – Hace que un componente sea visible.
 setEnabled ( ) – Hace que un componente esté disponible.
Si se usa con un parámetro false, lo que hace es establecer
el estado de habilitación interna para el componente a
falso por lo que el componente se atenúa.
 validate ( ) – Hace que un componente sea válido.

Tamaño y posición de un componente
Se definen normalmente por un objeto de tipo
java.awt.Rectangle, con (x,y) especificando la esquina
superior izquierda del rectángulo y el ancho y la altura para
su tamaño.
Los componentes tienen un tamaño definido por un objeto
java.awt.Dimension con valores de ancho y altura
encapsulados, que varían de dependiendo del objeto, por
ejemplo el tamaño de un objeto JButton depende del tamaño
de la etiqueta asignada al botón.

Métodos de clase Component
 Rectangle getBound ( ) – regresa posición y tamaño del
objeto.
 Rectangle getBound (Rectangle rect) – almacena la
posición y tamaño en el objeto del argumento. Si rect es
null se crea un nuevo objeto Rectangle.
 Dimension getSize ( ) – regresa el tamaño del objeto
Componente.
 Dimension getSize (Dimension dim ) – almacena el
tamaño actual en dim y regresa su referencia.

Métodos de clase Component
 Point getLocation ( ) – regresa posición del objeto
componente.
 Point getLocation (Point p) – almacena las coordenadas
de la posición en p y regresa su referencia.

Cambiar tamaño y posición
Métodos:
 void setBounds ( int x, int y, int width, int height )
 void setBounds ( Rectangle rect )
 void setSize ( Dimension d )
 setLocation ( int x, int y )
 setLocation ( Point p )

Determinar el rango de variación en tamaño
Métodos:
 void setMinimumSize ( Dimension d ) – si argumento null,
restaura el tamaño mínimo por default.
 void setMaximumSize ( Dimension d ) – si argumento null,
restaura el tamaño máximo por default.
 void setPreferredSize ( Dimension d ) – fija el tamaño
preferido, si argumento null, restaura el tamaño preferido por
dafault.

Método getToolkit de clase Component
Retorna un objeto de tipo Toolkit que contiene información a
cerca del medio ambiente en el cual está corriendo la
aplicación incluyendo el tamaño de la pantalla en pixeles.
Permite también fijar el tamaño y posición de una ventana en
la pantalla.
Se puede modificar el programa visto anteriormente para crear
una ventana redimensionándola usando Toolkit para mostrarla
en el centro de la pantalla o del monitor si es que hubiera mas
de una ventana desplegada.

Código
package ventanacentradatoolkit;
import java.awt.Dimension;
import java.awt.Toolkit;
public class VentanaCentradaToolkit {
JFrame aWindow = new Jframe ( "This is the Window Title" );
Toolkit theKit = aWindow.getToolkit(); // Get the window toolkit
Dimension wndSize=theKit.getScreenSize(); // Get screen size
// Set the position to screen center & size to half screen size:
aWindow.setBounds ( wndSize.width / 4, wndSize.height / 4,
wndSize.width / 2, wndSize.height / 2);
Window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
aWindow.setVisible ( true ); // Display the window
}

Código
// TODO code application logic here
createWindow ( );
}
});
}
}

Componentes Swing
Todos tienen la clase JComponent como base a la cual se
adicionan las siguientes capacidades:
 Soporte para conexión de componentes look-and-feel,
para cambiar o implementar su propio look-and-feel
para todos los componentes mostrados.
 Soporte para tooltips – que son mensajes que
describen el propósito de un componente cuando el
cursor del ratón se mantiene sobre él. Están definidas
por la clase JToolTip.

Componentes Swing
 Soporte para desplazamiento automático en una lista,
una tabla o un árbol cuando se arrastra un componente
con el ratón. Herencias de la clase Component permiten
crear componentes personalizados.

Componentes básicos GUI
Java How to Program
Deitel y Deitel
Prentice Hall

Botones
En el paquete javax.swing se definen varios tipos de botones
que se operan haciendo clic con el ratón y tienen la clase
AbstractButton como base.
Beginning Java
Ivor Horton

Menús
En la parte
superior de
la ventana
Para desplegar una lista de
elementos del menú al hacer clic
Menú contextual, aparece en
posición actual del cursor al
hacer clic en botón derecho del
ratón.
Para marcar
casilla al
seleccionar
el elemento
Para grupo,
sólo un
elemento
puede ser
seleccionado

Componentes de Texto
Línea no editable
Línea Editable
Múltiples líneas
Texto sin formato,
Texto en HTML,
RTF
Permite incrustar imágenes
u otros componentes
dentro del texto
administrado por el
componente

Swing Containers
Los componentes dentro de un contenedor se muestran
dentro del área ocupada por el contenedor en la pantalla de
visualización. El contenedor controla cómo se distribuyen
sus componentes incrustados por medio de un objeto
denominado gestor de diseño (layout manager).

Métodos de la clase Container
 int getComponentCount ( ): Devuelve el número de
componentes contenidos por el contenedor actual.
 Component getComponent ( int index ): Devuelve el
componente identificado por el valor de index, que es
un índice de matriz entre 0 y uno menos que el número
de componentes contenidos.
 Component [ ] getComponents ( ): Devuelve un arreglo
de todos los componentes en el contenedor actual.

Agregar componentes a un contenedor
La clase Container define las siguientes cuatro versiones
sobrecargadas del método add ( ):
 Component add ( Component c ): Agrega c al final de la lista
de componentes almacenados en el contenedor. El valor de
retorno es c.
 Component add ( Component c, int index ): Agrega c a la
lista de componentes del contenedor en la posición index,
si es -1, se agrega al final de la lista, si no es -1, debe ser >=
0 y menor que el número de componentes en el contenedor.
El valor de retorno es c.

Agregar componentes a un contenedor
 void add ( Component c, Object constraints ): Agrega c al
final de la lista de componentes almacenados en el
contenedor. La posición del componente con respecto al
recipiente está sujeta a las restricciones definidas por el
segundo parámetro.
 void add ( Component c, Object constraints, int index ):
Agrega c a la lista de componentes del contenedor en la
posición index y la posición sujeta a constraints. Si el índice
es -1, se agrega al final de la lista, sino es -1, debe ser >= 0 y
menor que el número de componentes en el contenedor.

Gestor de diseño (layout manager)
Un componente puede estar en un solo contenedor a la
vez. Si se agrega un componente a un contenedor que ya
está en otro contenedor, lo elimina del contenedor original.
Para agregar componentes a un contenedor, primero se
debe seleccionar una de las formas de distribución de
componentes en un contenedor, los cuales tienen uno
predeterminado, aunque es posible elegir otro dentro de
los definidos en los paquetes java.awt y javax.swing.

Gestor de diseño (layout manager)
Las clases que definen los gestores de diseño
implementan la interfaz LayoutManager por lo que se
puede utilizar una variable de este tipo para hacer
referencia a cualquiera de ellas.
Se usa el método setLayout ( ) para que un objeto
Container establezca el gestor de diseño.

Clases de layout manager
Definidas en paquete java.awt:
 FlowLayout
 BorderLayout
 CardLayout
 GridLayout
 GridBagLayout
Definidas en paquete javax.swing:
 BoxLayout
 SpringLayout

FlowLayout
Los componentes se colocan en filas sucesivas en un
contenedor, colocando tantos en cada fila como sea posible y
comenzando en la fila siguiente tan pronto como una fila está
llena, con un posicionamiento predeterminado centrado en el
contenedor y la orientación predeterminada es de izquierda a
derecha con 5 posibles opciones: LEFT, RIGHT, CENTER,
LEADING y TRAILING, donde CENTER es la predeterminada.

Por defecto, los componentes de una fila están
separados por una distancia de cinco pixeles y la
separación entre las filas sucesivas es igual.
Su uso principal es para la organización de botones,
aunque se puede utilizar con otros componentes. Es el
gestor de diseño predeterminado para los objetos de tipo
JPanel.
FlowLayout

Creación de una ventana con 6 botones:
Ejemplo

Si se redimensiona la ventana arrastrando sus bordes,
entonces los componentes se reacomodarían así:
Ejemplo

También puede ajustarse a RIGHT o LEFT utilizando un
constructor diferente:
FlowLayout flow = new FlowLayout (FlowLayout.LEFT);
Ejemplo

Se puede cambiar también la distancia predeterminada entre
los componentes con:
FlowLayout flow = new FlowLayout(FlowLayout.LEFT, 20, 30);
O con el método setHgap ( ) o setVgap ( ) para separación
horizontal o vertical y con los métodos getHgap ( ) y getVgap
( ) se devuelven los valores.
Ejemplo

import java.awt.Toolkit;
import java.awt.Dimension;
import javax.swing.JButton;
import java.awt.Container;
import java.awt.FlowLayout;
public class TryFlowLayout {
// Create the application window
Código de FlowLayout

Toolkit theKit = aWindow.getToolkit ( ); // Get the window toolkit
Dimension wndSize = theKit.getScreenSize ( ); // Get screen size
// Set the position to screen center & size to half screen size
aWindow.setSize ( wndSize.width / 2, wndSize.height / 2 );
aWindow.setLocationRelativeTo ( null ); // Center window
aWindow.setDefaultCloseOperation ( JFrame.EXIT_ON_CLOSE );
FlowLayout ﬂow = new FlowLayout ( ); // Create a layout manager
// Get the content pane
Container content = aWindow.getContentPane ( );
content.setLayout ( ﬂow ); // Set the container layout mgr
for ( int i = 1; i <= 6; ++i ) { // Now add six button components
content.add ( new Jbutton ( "Press " + i ) );
}
}

createWindow ( );
}
});
}
}

BorderLayout
Coloca componentes en cualquiera de los cuatro bordes del
contenedor y en el centro con las constantes estáticas NORTH,
SOUTH, EAST, WEST y CENTER. El componente en el centro
llena el espacio disponible. Este gestor de diseño es el
predeterminado para el panel de contenido de un objeto
JFrame, JDialog o JApplet.

Ejemplo
Crear una ventana con las siguientes características:

Código
package tryborderlayout;
import javax.swing.*;
import java.awt.*;
import javax.swing.border.EtchedBorder;

Código
public class TryBorderLayout {
aWindow.setSize ( wndSize.width/2, wndSize.height/2 );
BorderLayout border=new BorderLayout(); // Create borderLayout
content.setLayout ( border ); // Set the container layout mgr
// Button border
EtchedBorder edge = new EtchedBorder (EtchedBorder.RAISED);

Código
// Now add ﬁve JButton components and set their borders
JButton button;
content.add (button = new JButton ("EAST"), BorderLayout.EAST );
button.setBorder ( edge );
content.add (button = new JButton ("WEST"), BorderLayout.WEST);
content.add (button = new JButton ("NORTH"), BorderLayout.NORTH);
content.add (button = new JButton ("SOUTH"), BorderLayout.SOUTH);
content.add (button = new JButton ("CENTER"), BorderLayout.CENTER);
}

CardLayout
Genera una pila de componentes colocándolos uno encima del
otro. El primer componente que se coloca en el contenedor
queda como el componente superior y es el que está visible en
cualquier momento.
Debido a su funcionamiento, necesita una forma de interactuar
con un applet para cambiar de un componente al siguiente, por
lo que se tienen que procesar eventos de mouse.

GridLayout
Coloca los componentes en una cuadrícula rectangular con el
número de filas y columnas que se especifique. Constructores:
 GridLayout ( ) – organiza los componentes en una sola fila
(es decir, una sola columna por componente) sin espacios
entre los componentes.
 GridLayout ( int rows, int cols ) – organiza componentes en
filas y columnas y sin espacios entre los componentes.
 GridLayout ( int rows, int cols, int hgap, int vgap ) – organiza
componentes en filas y columnas con espacios verticales y
horizontales.

Código
package trygridlayout;
import java.awt.*;
import javax.swing.border.EtchedBorder;

Código
public class TryGridLayout {
JFrame aWindow = new JFrame ( "This is the Window Title" );
// Create a layout manager
GridLayout grid = new GridLayout ( 3, 4, 30, 20 );
content.setLayout ( grid ); // Set the container layout manager
// Button border
EtchedBorder edge = new EtchedBorder ( EtchedBorder.RAISED );

Código
// Now add ten Button components
JButton button = null; // Stores a button
for ( int i = 1 ; i <= 10 ; ++i ) {
content.add ( button = new JButton(" Press " + i) );// Add a Button
button.setBorder ( edge ); // Set the border
}
aWindow.pack ( ); // Size for components
}
createWindow ( );
}
});
}
}

GridBagLayout
Igual que el anterior, pero las filas y columnas pueden variar en
longitud. Este es un gestor de diseño complicado con mucha
flexibilidad en cómo controlar dónde se colocan los
componentes en un contenedor.

BoxLayout
Organiza los componentes en una fila o en una columna. En
cualquier caso, los componentes se recortan para ajustarse si
es necesario, en lugar de organizarlos en la siguiente fila o
columna. Este gestor es el valor predeterminado para la clase
de contenedor Box.

BoxLayout
El constructor de clase Box acepta un solo argumento que
especifica la orientación como BoxLayout.X_AXIS o
BoxLayout.Y_AXIS. La clase también tiene dos métodos
estáticos, createHorizontalBox ( ) y createVerticalBox ( ) y cada
uno devuelve una referencia a un contenedor Box con la
orientación implícita.
Un contenedor puede contener otro contenedor, por lo que se
puede colocar un contenedor Box dentro de otro para obtener
cualquier arreglo de filas y columnas que se desee.

Código
package tryboxlayout;
import java.awt.*;
import javax.swing.border.*;
public class TryBoxLayout {
public static void createWindow ( ){
JFrame aWindow = new JFrame ( "This is the Window Title" );

Código
// Crea una columna left con orientación vertical para
// contener los de radio botones de tipo Box
Box left = Box.createVerticalBox ( );
// Crea un grupo, que no es un componente
ButtonGroup radioGroup = new ButtonGroup ( );
JRadioButton rbutton; // objeto para almacenar un botón
// Crea radio botones con los colores, los va agregando al grupo
radioGroup.add ( rbutton = new JRadioButton ( "Red" ) );
left.add ( rbutton ); // luego agrega cada botón al left Box
radioGroup.add ( rbutton = new JRadioButton ( "Green" ) );
left.add ( rbutton );
radioGroup.add ( rbutton = new JRadioButton ( "Blue" ) );
radioGroup.add ( rbutton = new JRadioButton ( "Yellow" ) );
aWindow.setLocationRelativeTo ( null ); // Ventana centrada

Código
// Crea columna right con orientación vertical para los checkboxes
Box right = Box.createVerticalBox ( );
right.add ( new JCheckBox ( "Dashed" ) );
right.add ( new JCheckBox ( "Thick" ) );
right.add ( new JCheckBox ( "Rounded" ) );
// Los objetos Box left y right se añaden a otro objeto Box top
// en una fila horizontal para posicionarlos uno al lado del otro
Box top = Box.createHorizontalBox ( );
top.add ( left ); top.add ( right );
// Crear fila inferior de botones (FlowLayout por default)
JPanel bottomPanel = new JPanel ( );
// Button border
javax.swing.border.Border edge =
BorderFactory.createRaisedBevelBorder ( );
JButton button;

Código
Dimension size = new Dimension ( 80, 20 );
bottomPanel.add ( button = new JButton ( "Defaults" ) );
button.setPreferredSize ( size );
bottomPanel.add ( button = new JButton ( "OK" ) );
bottomPanel.add ( button = new JButton ( "Cancel" ) );
// Agrega el panel top y el panel bottom al pane contenedor
// obtiene la referencia al pane contenedor
// define el gestor de diseño con un border layout
content.setLayout ( new BorderLayout ( ) );

Código
content.add ( top, BorderLayout.CENTER );
content.add ( bottomPanel, BorderLayout.SOUTH );
// La ventana se clasifica según el tamaño y los diseños preferidos
// de sus subcomponentes.
aWindow.pack ( ); // Size for components
aWindow.setVisible ( true ); // Despliega la ventana
}
public static void main ( String [ ] args) {
createWindow ( );
}
});
}
}

SpringLayout
Permite que los componentes tengan sus posiciones definidas
por “resortes” (springs) o “puntales” (struts) fijos a un borde
del contenedor u otros componentes en el contenedor.
Este gestor de diseño no será definido por el momento.

Agregar menús a un contenedor
Un objeto JMenuBar representa la barra de menús que se
coloca en la parte superior de una ventana.
A estos se pueden agregar objetos JMenu o JMenuItem, que se
muestran en la barra de menús.
Un objeto JMenu es un menú con una etiqueta que puede
mostrar una lista de elementos de menú al hacer clic en él.

Un objeto JMenuItem representa un elemento de menú con una
etiqueta dentro de un menú que da como resultado una acción
del programa cuando se hace clic, como abrir un diálogo.
Un objeto JMenuItem puede tener un icono además de, o en
lugar de una etiqueta String. Cada elemento de un objeto
JMenu puede ser del tipo JMenu, JMenuItem,
JCheckBoxMenuItem o JRadioButtonMenuItem.

Si un elemento de un menú es un objeto JMenu, entonces
representa un segundo nivel de menú que contiene más
elementos de menú.
Un JCheckBoxMenuItem es un elemento de menú simple con
una casilla asociada a él. La casilla de verificación se puede
marcar y desmarcar y normalmente indica que ese elemento de
menú se seleccionó la última vez que se mostró el menú
desplegable.

También puede agregar separadores en un menú desplegable.
Estas son simplemente barras para separar un grupo de
elementos de menú de otro.
Un JRadioButtonMenuItem es un elemento de menú muy
similar a un botón de radio en el que se pretende que sea uno
de un grupo de elementos de menú similares a los añadidos a
un objeto ButtonGroup. Los objetos JCheckBoxMenuItem y
JRadioButtonMenuItem pueden tener iconos.

Creación de JMenu y JMenuItem
Se utiliza un constructor de clase JMenu para crear un menú y
se pasa un objeto de tipo String para especificar la etiqueta.
Por ejemplo, para crear un menú File:
JMenu fileMenu = new JMenu ( "File" );
Y para crear un elemento de tipo JMenuItem:
JMenuItem openMenu = new JMenuItem( "Open" );
Para crear un objeto de tipo JCheckboxMenuItem inicialmente
sin seleccionar:
JCheckboxMenuItem circleItem =
new JCheckboxMenuItem ( "Circle" );

Creación de JMenu y JMenuItem
Y para que se inicialice seleccionado:
JCheckboxMenuItem circleItem =
new JCheckboxMenuItem ( "Line", true );
Para un radio botón es similar:
JRadioButtonMenuItem item =
new JRadioButtonMenuItem ( “Curve", true );

Ejemplo de creación de un Menú
Para mostrar la siguiente ventana con menú: File y Elements:

Creación de un Menú
Se debe definir una clase propia de ventana heredada de la
clase JFrame para poder definirla según las necesidades
particulares tanto en atributos como en sus métodos.

Código de la clase principal
package sketcher;
import java.awt.*;
public class Sketcher {
createWindow ( );
}
});
}

Código de la clase principal
// Create the app window
window = new SketcherFrame ( "Sketcher" );
Toolkit theKit = window.getToolkit ( ); // Get the window toolkit
// Set the position to sreen center & size to half screen size
window.setSize ( wndSize.width / 2, wndSize.height / 2 );
window.setLocationRelativeTo ( null );
window.setDefaultCloseOperation ( JFrame.EXIT_ON_CLOSE );
window.setVisible ( true );
}
private static SketcherFrame window; // The application window
}
La variable window se utiliza para almacenar el objeto de la ventana de
la aplicación y es static ya que no hay instancias de la clase Sketcher.
Se inicializa en método createWindow ( ).

Código que define ventana de aplicación
package sketcher;
public class SketcherFrame extends JFrame {
// Constructor
public SketcherFrame ( String title ) {
setTitle ( title ); // Set the window title
setDefaultCloseOperation ( EXIT_ON_CLOSE );
// Add the menu bar to the window
setJMenuBar ( menuBar ); // método heredado de JFame
JMenu fileMenu = new JMenu ( "File" ); // Create File menu
// Create Elements menu
JMenu elementMenu = new JMenu ( "Elements" );
menuBar.add ( fileMenu ); // Add the file menu
menuBar.add ( elementMenu ); // Add the element menu
}
private JMenuBar menuBar = new JMenuBar ( ); // Window menu bar
}

Agregar elementos de menú a un menú
Los menús File y Element en la barra de menús creados en la
aplicación Sketcher anterior, no pueden hacer nada por sí
mismos porque son del tipo JMenu. Para que estos menús
respondan a acciones del usuario, es necesario empezar por
agregar los menús desplegables, es decir, agregarles los
elementos (ítems):
JMenuItem newMenu = fileMenu.add ( "Nuevo" );
O:
JMenuItem newMenu = new JMenuItem( "Nuevo" );
fileMenu.add(newMenu);

Para utilizar los elementos de menú se usan los siguientes
métodos de clase JMenuItem:
 void setEnabled ( boolean b ) – si b es true, el elemento está
habilitado, que es el valor por default.
 void setText ( String label ) – define la etiqueta para el
elemento de menú por el indicado en la cadena label.
 String getText ( ): Devuelve la etiqueta del elemento de menú
actual.

Ya que la clase JMenu hereda de la clase JMenuItem, los
métodos anteriores también se aplican a objetos JMenu.
Para agregar un separador a un menú, se utiliza el método
addSeparator ( ) para el objeto JMenu. El separador aparece
después del elemento de menú agregado anteriormente al
menú. Ahora vamos a crear los menús desplegables de los
menús File y Element en la barra de menús de la aplicación
Sketcher y probar algunos de los elementos del menú.

Menús desplegables
Agregar ítems al menú File:

Menús desplegables
También agregar ítems al menú Elements:

Menús desplegables
Para lograr lo anterior es necesario realizar algunos cambios en
la clase SketcherFrame vista anteriormente por la siguiente:
package sketcher;
public class SketcherFrameItems extends JFrame {
// Constructor
public SketcherFrameItems ( String title ) {
// Add the menu bar to the window
setJMenuBar ( menuBar );

Menús desplegables
// Crear menú File y Elements
JMenu fileMenu = new JMenu( "File" );
JMenu elementMenu = new JMenu( "Elements" );
// Construct the ﬁle drop-down menu
newItem = fileMenu.add ( "New" ); // Add New item
openItem = fileMenu.add ( "Open" ); // Add Open item
closeItem = fileMenu.add ( "Close" ); // Add Close item
fileMenu.addSeparator ( ); // Add separator
saveItem = fileMenu.add ( "Save" ); // Add Save ítem
// Add Save As item
saveAsItem = fileMenu.add ( "Save As..." );
printItem = fileMenu.add ( "Print" ); // Add Print item

Menús desplegables
// Construct the Element drop-down menu
elementMenu.add ( lineItem = new
JRadioButtonMenuItem ( "Line", true ));
elementMenu.add ( rectangleItem = new
JRadioButtonMenuItem ( "Rectangle", false ));
elementMenu.add ( circleItem = new
JRadioButtonMenuItem ( "Circle", false ));
elementMenu.add ( curveItem = new
JRadioButtonMenuItem ( "Curve", false ));
ButtonGroup types = new ButtonGroup ( );
types.add ( lineItem );
types.add ( rectangleItem );
types.add ( circleItem );
types.add ( curveItem );

Menús desplegables
elementMenu.addSeparator ( );
elementMenu.add ( redItem = new
JCheckBoxMenuItem ( "Red", false ) );
elementMenu.add ( yellowItem = new
JCheckBoxMenuItem ( "Yellow", false ) );
elementMenu.add ( greenItem = new
JCheckBoxMenuItem ( "Green", false ) );
elementMenu.add ( blueItem = new
JCheckBoxMenuItem ( "Blue", true ) );
menuBar.add ( fileMenu ); // Add the file menu
}

Menús desplegables
// Window menu bar
private JMenuBar menuBar = new JMenuBar ( );
// File menu items
private JMenuItem newItem, openItem, closeItem, saveItem,
saveAsItem, printItem;
// Element menu items
private JRadioButtonMenuItem lineItem, // Types
rectangleItem, circleItem, curveItem, textItem;
private JCheckBoxMenuItem redItem, yellowItem, // Colors
greenItem, blueItem ;
}

Menús desplegables
Si se desea poner el elemento de selección de color en un
menú desplegable adicional, es posible hacerlo al cambiar el
código que sigue a la instrucción agregando el separador en el
menú Elementos de la siguiente manera:

Menús desplegables
JMenu colorMenu = new JMenu ( "Color" ); // Color submenú
elementMenu.add ( colorMenu ); // Add the submenú
colorMenu.add ( redItem = new
JCheckBoxMenuItem ( "Red", false ) );
colorMenu.add ( yellowItem = new
JCheckBoxMenuItem ( "Yellow", false ) );
colorMenu.add ( greenItem = new
JCheckBoxMenuItem ( "Green", false ) );
colorMenu.add ( blueItem = new
JCheckBoxMenuItem ( "Blue", true ) );

Menús desplegables
Y se obtiene lo siguiente:

Shortcuts
Es un acceso directo a través de una combinación de teclas
que se utiliza para seleccionar un menú en la barra de menús
directamente desde el teclado para mostrar el menú
desplegable.
Un atajo típico en Microsoft Windows es combinar la tecla Alt
con una letra de la etiqueta del elemento de menú, por lo que el
acceso directo para el elemento de menú File sería Alt + F. lo
que se puede lograr con el método setMnemonic ( ) heredado
de la clase AbstractButton, por lo que todas las subclases de
esta clase lo heredan.

Shortcuts
Para el ejemplo de menú visto File y Elements, se usaría de la
siguiente forma:
fileMenu.setMnemonic ( 'F' ); // Create shortcut
elementMenu.setMnemonic ( 'E' ); // Create shortcut
El efecto del método es implementar el atajo y subrayar la letra
de carácter de acceso directo en la etiqueta del menú, el cual
debe ser una combinación de teclas única.

Aceleradores
Un acelerador es una combinación de teclas que se puede
introducir para seleccionar un elemento de un menú
desplegable sin tener que pasar por el proceso de mostrar el
menú.
En Windows se utiliza una combinación de la tecla Ctrl con una
letra, por lo que Ctrl + L puede ser la combinación para el
elemento Line en el menú Elements y se establece con el
método setAccelerator ( ). En la clase javax.swing.KeyStroke se
definen una combinación de pulsaciones de teclas.

Aceleradores
LineItem.setAccelerator ( KeyStroke.getKeyStroke ( 'L',
InputEvent.CTRL_DOWN_MASK) );
El método estático getKeyStroke ( ) en la clase KeyStroke
devuelve el objeto KeyStroke correspondiente a los
argumentos. El primer argumento es un carácter en la
combinación de teclas (sólo letras mayúsculas) y el segundo
argumento especifica una o más claves modificadoras.
Las letras minúsculas seleccionan las teclas no alfabéticas,
como el teclado numérico y las teclas de función.

Aceleradores
Las teclas modificadoras en el paquete java.awt.event son
combinación de constantes de un solo bit de la clase
InputEvent como las teclas de control en los botones del
teclado y del ratón: SHIFT_DOWN_MASK, ALT_DOWN_MASK,
META_DOWN_MASK y CTRL_DOWN_MASK.
También se pueden combinar las teclas Alt y Ctrl como se
muestra en la siguiente expresión:
InputEvent.ALT_DOWN_MASK |
InputEvent.CTRL_DOWN_MASK

Ejemplo
Para probar la siguiente ventana:

Ejemplo
Y esta otra:

Código
Modificar nuevamente la clase SketcherFrame:
package sketcher;
// For modiﬁer constants:
import static java.awt.event.InputEvent.*;
public class SketcherFrameShortCuts extends JFrame {
public SketcherFrameShortCuts ( String title ) {
setJMenuBar ( menuBar ); // Add menu bar to the window

Código
JMenu fileMenu = new JMenu ( "File" ); // Create menus
JMenu elementMenu = new JMenu ( "Elements" );
fileMenu.setMnemonic ( 'F' ); // Create shortcut
elementMenu.setMnemonic ( 'E' ); // Create shortcut
// Construct the ﬁle drop-down menu
newItem = fileMenu.add ( "New " ); // Add New item
openItem = fileMenu.add ( "Open" ); // Add Open item
closeItem = fileMenu.add ( "Close" ); // Add Close item
saveItem = fileMenu.add ( "Save" ); // Add Save ítem
// Add Save As item
saveAsItem = fileMenu.add ( "Save As..." );
printItem = fileMenu.add ( "Print" ); // Add Print item

Código
// Add File menu accelerators
newItem.setAccelerator ( KeyStroke.getKeyStroke (
'N', CTRL_DOWN_MASK ));
openItem.setAccelerator ( KeyStroke.getKeyStroke ( 'O',
CTRL_DOWN_MASK ));
saveItem.setAccelerator ( KeyStroke.getKeyStroke ( 'S',
CTRL_DOWN_MASK ));
printItem.setAccelerator ( KeyStroke.getKeyStroke ( 'P',
CTRL_DOWN_MASK ));

Código
// Construct the Element drop-down menu
elementMenu.add ( lineItem = new
JRadioButtonMenuItem ( "Line", true ));
elementMenu.add ( rectangleItem = new
JRadioButtonMenuItem ( "Rectangle", false ));
elementMenu.add ( circleItem = new
JRadioButtonMenuItem ( "Circle", false ));
elementMenu.add ( curveItem = new
JRadioButtonMenuItem ( "Curve", false ));
ButtonGroup types = new ButtonGroup ( );
types.add ( lineItem );
types.add ( rectangleItem );
types.add ( circleItem );
types.add ( curveItem );

Código
// Add element type accelerators
lineItem.setAccelerator ( KeyStroke.getKeyStroke ( 'L',
CTRL_DOWN_MASK ));
rectangleItem.setAccelerator ( KeyStroke.getKeyStroke (
'E', CTRL_DOWN_MASK ));
circleItem.setAccelerator ( KeyStroke.getKeyStroke ( 'I',
CTRL_DOWN_MASK ));
curveItem.setAccelerator ( KeyStroke.getKeyStroke ( 'V',
CTRL_DOWN_MASK ));
JMenu colorMenu = new JMenu ( "Color" );

Código
elementMenu.add ( colorMenu ); // Add the submenu
colorMenu.add ( redItem = new JCheckBoxMenuItem (
"Red", false ));
colorMenu.add ( yellowItem = new JCheckBoxMenuItem (
"Yellow", false ));
colorMenu.add ( greenItem = new JCheckBoxMenuItem (
"Green", false ));
colorMenu.add ( blueItem = new JCheckBoxMenuItem (
"Blue", true ));
// Add element color accelerators
redItem.setAccelerator ( KeyStroke.getKeyStroke ( 'R',
CTRL_DOWN_MASK ));
yellowItem.setAccelerator ( KeyStroke.getKeyStroke ( 'Y',
CTRL_DOWN_MASK ));

Código
greenItem.setAccelerator ( KeyStroke.getKeyStroke ( 'G',
CTRL_DOWN_MASK ));
blueItem.setAccelerator ( KeyStroke.getKeyStroke ( 'B',
CTRL_DOWN_MASK ));
menuBar.add ( fileMenu ); // Add the file menu
}
private JMenuBar menuBar = new JMenuBar ( );
private JMenuItem newItem, openItem, closeItem, saveItem,
saveAsItem, printItem;
private JRadioButtonMenuItem lineItem, // Types
rectangleItem, circleItem, curveItem, textItem;
private JCheckBoxMenuItem redItem, yellowItem, // Colors
greenItem, blueItem;
}

Código
La construcción de estos menús todavía no son funcionales,
solamente son visualizables y son el principio del diseño de las
interfaces gráficas.
Se requiere para esto último, agregar el código para
implementar las operaciones de menú a través de los eventos.

1TAP Tema 1-GUI.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a 1TAP Tema 1-GUI.pptx

Similar a 1TAP Tema 1-GUI.pptx (20)

Último

Último (20)

1TAP Tema 1-GUI.pptx