TP - Parte 4 - Windows Builder
TP - Parte 4 - Windows Builder
A medida que uno arrastra componentes visuales sobre un formulario se genera en forma
automtica el cdigo Java, esto nos permite ser ms productivos en el desarrollo de la interfaz de
nuestra aplicacin y nos ayuda a concentrarnos en la lgica de nuestro problema.
1 - Creacin de un proyecto.
1
Instituto Superior Jujuy Tcnicas de Programacin
3 - Ahora seleccionamos la opcin del men File -> New -> Other ...
2
Instituto Superior Jujuy Tcnicas de Programacin
Tenemos en este momento nuestra aplicacin mnima generada por el WindowBuilder. Podemos
observar que en la parte inferior de la ventana central aparecen dos pestaas (Source y Design)
estas dos pestaas nos permiten ver el cdigo fuente de nuestro JFrame en vista de diseo o en
vista de cdigo Java:
3
Instituto Superior Jujuy Tcnicas de Programacin
4
Instituto Superior Jujuy Tcnicas de Programacin
En todo momento podemos cambiar la pestaa de "Source" y "Design" para ver el cdigo
generado. Por ejemplo cuando agregamos el botn podemos ver que se agreg un objeto de la
clase JButton al constructor:
import java.awt.BorderLayout;
import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JButton;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Ventana1 frame = new Ventana1();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public Ventana1() {
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);
5
Instituto Superior Jujuy Tcnicas de Programacin
Si hacemos doble clic con el mouse en la pestaa Ventana1.java podemos maximizar el espacio
de nuestro editor visual (haciendo nuevamente doble clic vuelve al tamao anterior)
Seleccionemos el primer JLabel de nuestro formulario y observemos las distintas partes que
componen el plug-in WindowBuilder. En la parte superior izquierda se encuentra la seccin
"Structure" donde se muestran las componentes visuales agregadas al formulario. Aparece
resaltada la que se encuentra actualmente seleccionada.
6
Instituto Superior Jujuy Tcnicas de Programacin
Veamos algunas propiedades que podemos modificar desde esta ventana y los cambios que se
producen en el cdigo fuente en java.
La propiedad text cambia el texto que muestra el objeto JLabel. Probemos de disponer el texto
"Ingrese nombre de usuario:". De forma similar hagamos los cambios en la propiedad text de los
otros controles visuales de nuestro JFrame:
Si ahora seleccionamos la pestaa inferior para ver la vista de cdigo java: "Source" podemos ver
que el WindowBuilder nos gener automticamente el cdigo para inicializar los textos de los
controles JLabel y JButton:
7
Instituto Superior Jujuy Tcnicas de Programacin
import java.awt.BorderLayout;
import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.JButton;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Ventana1 frame = new Ventana1();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public Ventana1() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 203);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(null);
8
Instituto Superior Jujuy Tcnicas de Programacin
Como podemos observar ahora cuando se crean los objetos de la clase JLabel en el constructor se
inicializan con los valores cargados en la propiedad text:
9
Instituto Superior Jujuy Tcnicas de Programacin
Eventos
Para asociar eventos el plug-in WindowBuilder nos proporciona una mecnica para automatizar la
generacin de las interfaces que capturan los eventos de los objetos JButton, JMenuItem, JList
etc.
Crearemos una interfaz visual similar a esta (tres controles de tipo JLabel, dos JTextField y un
JButton):
Hacemos doble clic sobre la palabra performed y vemos que se abre el editor de texto y aparece
el siguiente cdigo generado automticamente:
10
Instituto Superior Jujuy Tcnicas de Programacin
btnSumar.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
}
});
En el parmetro del mtodo addActionListener del botn que suma se le pasa la referencia a una
interface que se crea de tipo ActionListener e implementa el mtodo actionPerformed donde
agregaremos el cdigo necesario para responder el evento.
Para este problema debemos rescatar los valores almacenados en los controles de tipo
JTextField, convertirlos a entero, sumarlos y enviar dicho resultado a una JLabel.
btnSumar.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
int v1=Integer.parseInt(textField.getText());
int v2=Integer.parseInt(textField_1.getText());
int suma=v1+v2;
lblResultado.setText(String.valueOf(suma));
}
});
Cuando compilamos vemos que no tenemos acceso al objeto lblResultado ya que est definido
como una variable local al constructor. Si queremos que se definan como atributos de la clase
debemos seleccionar la JLabel y presionar "convert Local to Field" (convertir de variable local a
atributo de la clase):
Problema
Crear un men de opciones que permita cambiar el color de fondo. Disponer un JMenuBar, un
JMenu y 3 objetos de la clase JMenuItem. Asociar los eventos respectivos para cada control de
11
Instituto Superior Jujuy Tcnicas de Programacin
tipo JMenuItem.
La interfaz visual debe quedar similar a la siguiente:
Para crear esta interface debemos primero seleccionar la pestaa "Menu" donde se encuentran
las componentes relacionadas a la creacin de menes.
Debemos agregar (en este orden las siguientes componentes):
1 - Un JMenuBar en la parte superior.
2 - Un objeto de la clase JMenu en la barra del JMenuBar (podemos disponer el texto que
queremos que se muestre)
3 - Agregamos un objeto de la clase JMenuItem en el sector donde aparece el texto: "Add items
here". Los mismos pasos hacemos para agregar los otros dos JMenuItem.
Ahora debemos asociar el evento clic para cado JMenuItem. Seleccionamos primero el control de
tipo JMenuItem y en la ventana de "Properties" presionamos el botn "Show events" y generamos
el actionPerformed para el JMenuItem seleccionado.
Luego codificamos:
mntmRojo.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
contentPane.setBackground(Color.red);
}
});
Para cambiar el color del JFrame en realidad debemos modificar el color del JPanel que cubre el
JFrame. El objeto de la clase JPanel llamado contentPane tiene un mtodo llamado
setBackground que nos permite fijar el color de fondo.
De forma similar asociamos los eventos para los otros dos objetos de la clase JMenuItem:
JMenuItem mntmVerde = new JMenuItem("Verde");
mntmVerde.addActionListener(new ActionListener() {
12
Instituto Superior Jujuy Tcnicas de Programacin
Problema 1
El funcionamiento es el siguiente:
Inicialmente el ascensor est en el piso 1.
Por ejemplo: si se presiona el botn 3 se muestra en un JLabel el piso nmero 3 y en otra JLabel
la direccin. La cadena "Sube", en caso de presionar un piso superior al actual. Mostramos la
cadena "Baja" en el JLabel si se presiona un piso inferior. y si el piso donde se encuentra
actualmente coincide con el presionado luego mostrar el mensaje "Piso actual".
1 - Lo primero que debemos hacer cada vez que creamos un JFrame es definir el Layout a utilizar
(normalmente utilizaremos "Absolute Layout", esto lo hacemos presionando el botn derecho del
mouse dentro del JFrame y seleccionando la opcin "Set Layout".
El tipo de layout a utilizar tambin se lo puede fijar seleccionando el objeto "contentPane"(este
objeto es de la clase JPanel y todo JFrame lo contiene como fondo principal) y luego en la
ventana de propiedades cambiamos la propiedad "Layot"
2 - Cuando creamos el primer JButton definimos el nombre del objeto cambiando la propiedad
"Variable" y mediante la propiedad Text definimos el texto a mostrar (con el mouse
dimensionamos el JButton):
13
Instituto Superior Jujuy Tcnicas de Programacin
3 - Los otros botones los podemos crear de la misma manera seleccionando un objeto de la clase
JButton de la "Palette" o cuando tenemos que crear otros objetos semejantes podemos presionar
el botn derecho del mouse sobre el objeto a duplicar y seguidamente en el men contextual
seleccionar la opcin "Copy" y seguidamente la opcin "Paste" con lo que tendremos otro objeto
semejante.
Luego si deberemos definir un nombre para el objeto (propiedad "Variable") y la propiedad "text"
para la etiqueta a mostrar:
4 - Los objetos que necesitemos consultar o modificar en tiempo de ejecucin debemos definirlos
como atributos de clase (tambin llamados campos de clase)
En este problema cuando se presione alguno de los cuatro botones debemos consultar el
contendido de la label que indica el piso actual y la label que muestra la direccin ser modificada
por otro String.
Para definir un control visual como atributo de clase debemos seleccionarlo y presionar en la
14
Instituto Superior Jujuy Tcnicas de Programacin
ventana de propiedades el botn "Convert local to field" (en nuetro problema definamos a estos
dos objetos de la clase JLabel con el nombre l1 y l2):
5 - Para capturar el evento clic de un objeto de la clase JButton debemos seleccionarlo y presionar
el botn "Show Events":
15
Instituto Superior Jujuy Tcnicas de Programacin
import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JButton;
import javax.swing.JLabel;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Ascensor frame = new Ascensor();
frame.setVisible(true);
16
Instituto Superior Jujuy Tcnicas de Programacin
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public Ascensor() {
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);
17
Instituto Superior Jujuy Tcnicas de Programacin
l1 = new JLabel("1");
l1.setBounds(272, 41, 46, 14);
contentPane.add(l1);
l2 = new JLabel("baja");
l2.setBounds(272, 93, 92, 14);
contentPane.add(l2);
}
}
18
Instituto Superior Jujuy Tcnicas de Programacin
l1.setText("4");
}
});
Si se presiona el botn del segundo piso debemos verificar si 2 es menor, mayor o igual al piso
actual (igual para el botn del tercer piso):
b2.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
int pisoactual=Integer.parseInt(l1.getText());
if (2<pisoactual)
l2.setText("Baja");
else
if (2>pisoactual)
l2.setText("Sube");
else
l2.setText("Piso actual");
l1.setText("2");
}
});
Problema 2
Por un lado disponer tres objetos de la clase JRadioButton (llamarlos radio1, radio2 y radio 3),
configurar el primero para que aparezca seleccionado (propiedad "selected")
Disponer dos objetos de la clase JComboBox (llamarlos comboPesos y comboCentavos)
En el JComboBox pesos inicializar la propiedad model con los valores del 0 al 5 (hay que cargar
un valor por cada lnea en el dilogo que aparece)
En forma similar el segundo JComboBox cargamos los valores: 0,10,20,30 etc. hasta 90.
Se sabe que :
Bebida A tiene un costo de 0 pesos 80 centavos.
Bebida B tiene un costo de 1 peso 20 centavos.
Bebida C tiene un costo de 3 pesos 10 centavos.
Solucin:
19
Instituto Superior Jujuy Tcnicas de Programacin
Para que todos los JRadioButton estn asociados (es decir que cuando se seleccione uno se
deseleccione el actual lo debemos hacer en forma visual), primero seleccionamos con el mouse
todos los JRadioButton (para seleccionar varios controles presionamos la tecla "Ctrl" del teclado y
con el boton izquierdo del mouse seleccionamos los tres JRadioButton ) y seguidamente
presionamos el botn derecho del mouse y seleccionamos "New standard":
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JRadioButton;
import javax.swing.JLabel;
import javax.swing.JComboBox;
import javax.swing.DefaultComboBoxModel;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.ButtonGroup;
20
Instituto Superior Jujuy Tcnicas de Programacin
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
PanelBebidas frame = new PanelBebidas();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public PanelBebidas() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 600, 319);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(null);
21
Instituto Superior Jujuy Tcnicas de Programacin
l1.setText("Correcto");
else
if (radio3.isSelected() && pesos==3 && centavos==10)
l1.setText("Correcto");
else
l1.setText("Incorrecto");
}
});
b1.setBounds(30, 196, 89, 23);
contentPane.add(b1);
l1 = new JLabel("resultado");
l1.setBounds(148, 205, 73, 14);
contentPane.add(l1);
b1.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
int
pesos=Integer.parseInt((String)comboPesos.getSelectedItem());
int centavos=Integer.parseInt((String)
comboCentavos.getSelectedItem());
if (radio1.isSelected() && pesos==0 && centavos==80)
l1.setText("Correcto");
else
if (radio2.isSelected() && pesos==1 && centavos==20)
l1.setText("Correcto");
else
if (radio3.isSelected() && pesos==3 && centavos==10)
l1.setText("Correcto");
else
l1.setText("Incorrecto");
}
});
Extraemos los contenidos de los dos controles de tipo JComboBox y los convertimos a entero.
Luego mediante tres if verificamos si el primer JRadioButton est seleccionado y el dinero
seleccionado corresponde a exactamente 0 pesos y 80 centavos, en tal caso mostramos en la
label el mensaje "Correcto". La lgica es similar para las otras dos bebidas.
22
Instituto Superior Jujuy Tcnicas de Programacin
Problema 3
Un embalse debe manejar la cantidad de mts3 de agua que pasa por cada compuerta. Por cada
compuerta puede pasar un caudal de 100 mts3 x seg.
Cuando presionamos el botn "Actualizar caudal" mostramos el nivel de caudal actual y un
mensaje que indica si el caudal es Bajo (0 a 100 mts3 x seg.) , Medio (> 100 -200 mts3. x seg.) o
Alto (>200 mts3 x seg.)
Para la seleccin del caudal de cada compuerta utilizar componentes de tipo JSpinner.
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JSpinner;
import javax.swing.JLabel;
import javax.swing.JButton;
import javax.swing.SpinnerNumberModel;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Embalse frame = new Embalse();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
23
Instituto Superior Jujuy Tcnicas de Programacin
/**
* Create the frame.
*/
public Embalse() {
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);
l1 = new JLabel("resultado");
l1.setBounds(218, 203, 149, 14);
contentPane.add(l1);
}
}
24
Instituto Superior Jujuy Tcnicas de Programacin
En el evento clic del JButton extraemos los tres valores almacenados en los JSPinner:
int v1=Integer.parseInt(spinner1.getValue().toString());
int v2=Integer.parseInt(spinner2.getValue().toString());
int v3=Integer.parseInt(spinner3.getValue().toString());
y mediante tres if valuamos si la suma es menor o igual a 100 o menor o igual a 200 o en su
defecto es mayor a 200:
int suma=v1+v2+v3;
if (suma<=100)
l1.setText("Bajo");
else
if (suma<=200)
l1.setText("Medio");
else
l1.setText("Alto");
Problema propuesto
25
Instituto Superior Jujuy Tcnicas de Programacin
Para poder pintar, un programa necesita un contexto grfico vlido, representado por una
instancia de la clase Graphics. Pero esta clase no se puede instanciar directamente; as que
debemos crear un componente y pasarlo al programa como un argumento al mtodo paint().
El nico argumento del mtodo paint() es un objeto de esta clase. La clase Graphics dispone de
mtodos para soportar tres categoras de operaciones grficas:
1) Dibujo de primitivas grficas,
2) Dibujo de texto,
3) Presentacin de imgenes en formatos *.gif y *.jpeg.
Adems, la clase Graphics mantiene un contexto grfico: un rea de dibujo actual, un color de
dibujo del Background y otro del Foreground, un Font con todas sus propiedades, etc.Los ejes
estn situados en la esquina superior izquierda. Las coordenadas se miden siempre en pixels.
Problema 1
Crear una aplicacin que utilice las primitivas grficas principales que provee la clase Graphics:
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
/**
* Launch the application.
*/
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();
26
Instituto Superior Jujuy Tcnicas de Programacin
}
}
});
}
/**
* Create the frame.
*/
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);
}
g.setColor (Color.blue);
g.drawLine (0, 70, 100, 70);
g.drawRect (150, 70, 50, 70);
g.drawRoundRect (250, 70, 50, 70, 6, 6);
g.drawOval (350, 70, 50, 70);
int [] vx1 = {500, 550, 450};
int [] vy1 = {70, 120, 120};
g.drawPolygon (vx1, vy1, 3);
g.setColor (Color.red);
g.fillRect (150, 270, 50, 70);
g.fillRoundRect (250, 270, 50, 70, 6, 6);
g.fillOval (350, 270, 50, 70);
int [] vx2 = {500, 550, 450};
int [] vy2 = {270, 320, 320};
g.fillPolygon (vx2, vy2, 3);
}
}
Sobreescribimos el mtodo paint heredado de la clase JFrame:
public void paint (Graphics g)
{
El mtodo paint se ejecuta cada vez que el JFrame debe ser redibujado y llega como parmetro
un objeto de la clase Graphics. Este objeto nos permite acceder al fondo del JFrame y utilizando
las primitivas grficas dibujar lneas, rectngulos, elipses etc.
Lo primero que hacemos dentro de este mtodo es llamar al mtodo paint de la clase superior
para que se pinte el fondo del JFrame y otras componentes contenidas dentro (para llamar al
mtodo paint de la clase JFrame debemos anteceder la palabra clave super y pasar el parmetro
respectivo):
super.paint(g);
Mediante el mtodo setColor activamos un color:
g.setColor (Color.blue);
Dibuja una lnea desde la coordenada (0,70) es decir columna 0 y fila 70 en pxeles, hasta la
coordenada (100,70). La lnea es de color azul:
g.drawLine (0, 70, 100, 70);
Dibujamos un rectngulo desde la coordenada (150,70) con un ancho de 50 pxeles y un alto de
70, solo se pinta el permetro del rectngulo de color azul):
27
Instituto Superior Jujuy Tcnicas de Programacin
Dibujar texto
La clase Graphics permite ?dibujar? texto, como alternativa al texto mostrado en los componentes
JLabel, JTextField y JTextArea. El mtodo que permite graficar texto sobre el JFrame es:
Problema
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Grafico1 frame = new Grafico1();
frame.setVisible(true);
} catch (Exception e) {
28
Instituto Superior Jujuy Tcnicas de Programacin
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public Grafico1() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
contentPane.setLayout(new BorderLayout(0, 0));
setContentPane(contentPane);
setBounds(0,0,800,600);
}
Clase Color
La clase java.awt.Color encapsula colores utilizando el formato RGB (Red, Green, Blue). Las
componentes de cada color primario en el color resultante se expresan con nmeros enteros entre
0 y 255, siendo 0 la intensidad mnima de ese color y 255 la mxima. En la clase Color existen
constantes para colores predeterminados de uso frecuente: black, white, green, blue, red, yellow,
magenta, cyan, orange, pink, gray, darkGray, lightGray.
Problema
Crear una aplicacin que dibuje 255 lneas creando un color distinto para cada una de ellas:
import java.awt.BorderLayout;
import java.awt.Color;
29
Instituto Superior Jujuy Tcnicas de Programacin
import java.awt.EventQueue;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
/**
* Launch the application.
*/
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();
}
}
});
}
/**
* Create the frame.
*/
public Grafico1() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
contentPane.setLayout(new BorderLayout(0, 0));
setContentPane(contentPane);
setBounds(0,0,800,255);
}
Dentro de un for creamos objetos de la clase Color y fijamos el color de la lnea seguidamente
(con esto logramos un degrad del negro al rojo):
int fila = 0;
for (int rojo = 0 ; rojo <= 255 ; rojo++)
{
30
Instituto Superior Jujuy Tcnicas de Programacin
Java permite incorporar imgenes de tipo GIF y JPEG definidas en ficheros. Se dispone para ello
de la clase java.awt.Image. Para cargar una imagen hay que indicar la localizacin del archivo y
cargarlo mediante el mtodo getImage(). Este mtodo existe en las clases java.awt.Toolkit.
Entonces, para cargar una imagen hay que comenzar creando un objeto (o una referencia) Image
y llamar al mtodo getImage() (de Toolkit); Una vez cargada la imagen, hay que representarla,
para lo cual se redefine el mtodo paint() para llamar al mtodo drawImage() de la clase Graphics.
Los objetos Graphics pueden mostrar imgenes a travs del mtodo: drawImage(). Dicho mtodo
admite varias formas, aunque casi siempre hay que incluir el nombre del objeto imagen creado.
Clase Image
Una imagen es un objeto grfico rectangular compuesto por pixels coloreados. Cada pixel en una
imagen describe un color de una particular localizacin de la imagen.
A continuacin, algunos mtodos de la clase Image:
La clase Graphics provee el mtodo drawImage() para dibujar imagenes; este mtodo admite
varias formas:
- drawImage (Image i, int x, int y, ImageObserver o)
- drawImage (Image i,int x,int y,int width,int height,ImageObserver o)
Problema
31
Instituto Superior Jujuy Tcnicas de Programacin
Luego de crear el proyecto debemos disponer un archivo en la carpeta raiz del proyecto (el
archivo debe llamarse imagen1.jpg)
import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
/**
* Launch the application.
*/
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();
}
}
});
}
/**
* Create the frame.
*/
public Grafico1() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
contentPane.setLayout(new BorderLayout(0, 0));
setContentPane(contentPane);
setBounds(0,0,800,600);
}
}
Creamos un objeto de la clase Toolkit llamando al mtodo esttico de la misma clase:
Toolkit t = Toolkit.getDefaultToolkit ();
32
Instituto Superior Jujuy Tcnicas de Programacin
Creamos un objeto de la clase Image llamando al mtodo getImage de la clase Toolkit pasando
como parmetro el archivo con la imagen:
Image imagen = t.getImage ("imagen1.jpg");
Por ltimo llamamos al mtodo drawImage con la referencia al objeto de tipo Image, la columna, la
fila y la referencia al JFrame donde debe dibujarse:
g.drawImage (imagen, 0, 0, this);
Mtodo repaint()
Este es el mtodo que con ms frecuencia es llamado por el programador. El mtodo repaint()
llama ?lo antes posible? al mtodo paint() del componente.
El mtodo repaint() puede ser:
repaint()
repaint(int x, int y, int w, int h)
Las segunda forma permiten definir una zona rectangular de la ventana a la que aplicar el mtodo.
Problema
Crear una aplicacin que muestre un crculo en medio de la pantalla y mediante dos botones
permitir que se desplace a izquierda o derecha.
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
/**
* Launch the application.
*/
33
Instituto Superior Jujuy Tcnicas de Programacin
/**
* Create the frame.
*/
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);
Cuando se presiona el botn (bi) restamos 10 al atributo columna y pedimos que se ejecute el
mtodo paint (esto ltimo llamando al mtodo repaint()), el mtodo repaint borra todo lo dibujado
dentro del JFrame y llama al paint:
bi.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
columna=columna-10;
repaint();
}
});
El mtodo paint dibuja un crculo utilizando como posicin el valor del atributo columna:
public void paint (Graphics g)
34
Instituto Superior Jujuy Tcnicas de Programacin
{
super.paint(g);
g.setColor (Color.red);
g.fillOval (columna, 300, 100, 100);
}
Problema
Se debe desarrollar una pantalla para configurar ciertas caractersticas de un procesador de texto.
Debe aparecer y poder seleccionarse los mrgenes superior e inferior de la pgina.
Los mrgenes pueden ir en el rango de 0 a 10. Desplazar las lneas a medida que modificamos
los mrgenes.
Para implementar esta aplicacin con el WindowBuilder creamos la interfaz visual, disponemos 4
objetos de la clase JLabel, dos JSpinner, un JButton y un objeto de la clase JComboBox. El dibulo
de la hoja con las lneas de mrgenes superior e inferior como el grfico de orientacin de la hoja
se hacen en el mtodo paint.
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
35
Instituto Superior Jujuy Tcnicas de Programacin
import javax.swing.JSpinner;
import javax.swing.JLabel;
import javax.swing.JComboBox;
import javax.swing.DefaultComboBoxModel;
import javax.swing.JButton;
import javax.swing.SpinnerNumberModel;
import javax.swing.event.ChangeListener;
import javax.swing.event.ChangeEvent;
import java.awt.event.ItemListener;
import java.awt.event.ItemEvent;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
ProcesadorTexto frame = new ProcesadorTexto();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public ProcesadorTexto() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 573, 481);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(null);
36
Instituto Superior Jujuy Tcnicas de Programacin
});
sp2.setModel(new SpinnerNumberModel(0, 0, 10, 1));
sp2.setBounds(162, 150, 55, 28);
contentPane.add(sp2);
btnInicializar.addActionListener(new ActionListener() {
37
Instituto Superior Jujuy Tcnicas de Programacin
}
}
Para el evento stateChanged de los controles JSpinner se debe llamar al mtodo repaint() para
que se grafique nuevamente las lneas de mrgenes:
sp1.addChangeListener(new ChangeListener() {
public void stateChanged(ChangeEvent arg0) {
repaint();
}
});
sp2.addChangeListener(new ChangeListener() {
public void stateChanged(ChangeEvent e) {
repaint();
}
});
En el mtodo paint dibujamos primero un rectngulo de color azul que representa la hoja:
g.setColor(Color.blue);
g.drawRect(30,80,100,140);
Extraemos los valores seleccionados de cada control JSpinner y los convertimos a tipo entero:
int ms=Integer.parseInt(sp1.getValue().toString());
int mi=Integer.parseInt(sp2.getValue().toString());
Activamos el color rojo y dibujamos las dos lneas, la superior coincide con el comienzo del
rectngulo (sumamos tantos pixeles en la fila como lo indica el primer JSpinner):
g.setColor(Color.red);
g.drawLine(30,80+ms,130,80+ms);
Para saber la orientacin de la hoja debemos extraer el valor seleccionado del JComboBox y
mediante un if verificar si el String seleccionado es "Horizontal":
String direccion=(String)comboBox.getSelectedItem();
if (direccion.equals("Horizontal"))
g.drawRect(320,120,200,100 );
else
g.drawRect(320,120,100,200 );
Por ltimo cuando se presiona el botn inicializar procedemos a fijar nuevos valores a los
JSpinner y al JComboBox (luego redibujamos):
btnInicializar.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
sp1.setValue(0);
38
Instituto Superior Jujuy Tcnicas de Programacin
sp2.setValue(0);
comboBox.setSelectedIndex(0);
repaint();
}
});
Problemas propuestos
1. Confeccionar un programa que permita configurar las caractersticas del mouse. Por un lado debemos
seleccionar la velocidad de desplazamiento de la flecha del mouse. Disponer un JSpinner para poder
seleccionarse los valores 0,25,50,75 y 100. Por otro lado debemos poder seleccionar cual de los dos
botones del mouse ser el principal, tenemos para esta funcin un JComboBox con dos opciones:
izquierdo o derecho.
Cuando se selecciona el botn (cambio en el JComboBox) actualizar el grfico mostrando el botn del
mouse seleccionado (graficar en el mtodo paint el mouse en pantalla)
2. En una aduana hay una mquina que sortea las personas cuyo equipaje sern revisados.La persona
selecciona si viene del Interior del pas o del Exterior (a travs de un JComboBox), y por otro lado
selecciona la cantidad de bultos (JSpinner). Luego presiona el botn sortear y aparece al lado de este
botn un crculo rojo o verde. (En caso de ser rojo se revisa su equipaje, en caso de ser verde, no se
revisa). Para el sorteo generar un valor aleatorio entre 1 y 3. Si se genera un 1 se revisa, si se genera
un 2 o 3 no se revisa. Validar que tambin este seleccionado un valor distinto a cero en bultos (los
valores pueden ir de 0 a 10).Si la cantidad de bultos supera a 5 se revisa siempre sus bultos (es decir
que aparece un crculo rojo). Luego de sortear fijar en cero cantidad de bultos. Mostrar en el ttulo del
JFrame la cantidad de bultos revisados y no revisados hasta el momento.
39
Instituto Superior Jujuy Tcnicas de Programacin
Grficos estadsticos
El objetivo de este concepto es la implementacin de algoritmos para mostrar grficos
estadsticos.
Problema
Crear una aplicacin que solicite el ingreso de tres valores por teclado que representan las
cantidades de votos obtenidas por tres partidos polticos. Luego mostrar un grfico de tartas:
El algortmo es:
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
/**
* Launch the application.
40
Instituto Superior Jujuy Tcnicas de Programacin
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
GraficoTarta frame = new GraficoTarta();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public GraficoTarta() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 800, 600);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(null);
41
Instituto Superior Jujuy Tcnicas de Programacin
g.setColor(new Color(255,0,0));
g.fillArc(50,250,200,200,0,grados1);
g.fillRect(370,250,20,20);
g.drawString("Partido 1", 400, 270);
g.setColor(new Color(0,128,0));
g.fillArc(50,250,200,200,grados1,grados2);
g.fillRect(370,280,20,20);
g.drawString("Partido 2", 400, 300);
g.setColor(new Color(0,0,255));
g.fillArc(50,250,200,200,grados1+grados2,grados3);
g.fillRect(370,310,20,20);
g.drawString("Partido 1", 400, 330);
}
}
Disponemos un if en el mtodo paint para controlar que se haya presionado el botn graficar:
public void paint(Graphics g)
{
super.paint(g);
if (bandera==true)
{
El atributo bandera se inicializa cuando se define con el valor false, esto hace que cuando se
ejecute por primera vez el mtodo paint no ingrese al if:
private boolean bandera=false;
Se definen tres objetos de la clase JTextField para ingresar los tres valores por teclado:
private JTextField tf1;
private JTextField tf2;
private JTextField tf3;
Cuando se presiona el botn se cambia el estado del atributo bandera por el valor true y se llama
al mtodo repaint (recordemos que este mtodo borra el JFrame y llama al mtodo paint para que
ahora dibuje el grfico de tarta):
btnGraficar.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
42
Instituto Superior Jujuy Tcnicas de Programacin
bandera=true;
repaint();
}
});
Lo primero que hacemos para graficar la tarta es rescatar los tres valores ingresados en los
controles JTextField:
if (bandera==true)
{
String s1=tf1.getText();
String s2=tf2.getText();
String s3=tf3.getText();
Seguidamente calculamos los grados que le corresponde a cada trozo de tarta (teniendo en
cuenta que tenemos 360 grados para repartir):
Cada trozo de tarta lo obtenemos mediante la ecuacin:
tamao trozo= cantidad de votos del partido/ total de votos * 360
si observamos la ecuacin podemos imaginar que la divisin:
cantidad de votos del partido / total de votos
generar un valor menor a uno (salvo que el partido haya obtenido todos los votos de la eleccin
en cuyo caso la divisin genera el valor uno)
Esta divisin nos genera el porcentaje de votos que le corresponde al partido y luego dicho
porcentaje lo multiplicamos por la cantidad de grados a repartir (que son 360 grados)
Luego como la divisin generar un valor menor a uno y al tratarse de dos variables enteras el
resultado ser cero. Para evitar este problema procedemos primero a multiplicar por 360 y luego
dividir por la variable suma:
int grados1=v1*360/suma;
int grados2=v2*360/suma;
int grados3=v3*360/suma;
Si quisiramos primero dividir y luego multiplicar por 360 debemos proceder a anteceder a cada
operacin el tipo de resultado a obtener:
int grados1=(int)((float)v1/suma*360);
int grados2=(int)((float)v2/suma*360);
int grados3=(int)((float)v3/suma*360);
Como podemos ver es ms complicado si queremos primero efectuar la divisin y luego el
producto.
Procedemos ahora a graficar los trozos de tarta y leyenda con el valor ingresado (activamos el
color rojo y mediante el mtodo fillArc creamos un trozo de tarta que se inicia en el grado 0 y
avanza tantos trados como indica la variable grados1. Luego mediante el mtodo drawString
mostramos la leyenda del partido respectivo con un cuadradito tambin de color rojo ):
g.setColor(new Color(255,0,0));
g.fillArc(50,250,200,200,0,grados1);
g.fillRect(370,250,20,20);
g.drawString("Partido 1", 400, 270);
43
Instituto Superior Jujuy Tcnicas de Programacin
El segundo trozo comienza en grados1 y avanza tantos grados como lo indica la variable grados2.
Activamos el color verde para diferenciar del trozo anterior:
g.setColor(new Color(0,128,0));
g.fillArc(50,250,200,200,grados1,grados2);
g.fillRect(370,280,20,20);
g.drawString("Partido 2", 400, 300);
El ltimo trozo lo graficamos a partir de la suma de grados1+grados2 y avanzamos tantos grados
como lo indica la variable grados3:
g.setColor(new Color(0,0,255));
g.fillArc(50,250,200,200,grados1+grados2,grados3);
g.fillRect(370,310,20,20);
g.drawString("Partido 1", 400, 330);
Problema 2
Crear una aplicacin que solicite el ingreso de tres valores por teclado que representan las
cantidades de votos obtenidas por tres partidos polticos. Luego mostrar un grfico de barras
horizontales:
El algortmo es:
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
44
Instituto Superior Jujuy Tcnicas de Programacin
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
GraficoBarraHorizontal frame = new GraficoBarraHorizontal();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public GraficoBarraHorizontal() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 800, 600);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(null);
45
Instituto Superior Jujuy Tcnicas de Programacin
});
btnGraficar.setBounds(45, 138, 107, 37);
contentPane.add(btnGraficar);
}
int largo1=v1*400/mayor;
int largo2=v2*400/mayor;
int largo3=v3*400/mayor;
g.setColor(new Color(255,0,0));
g.fillRect(100,250,largo1,40);
g.drawString("Partido 1", 10, 270);
g.setColor(new Color(0,128,0));
g.fillRect(100,300,largo2,40);
g.drawString("Partido 2", 10, 320);
g.setColor(new Color(0,0,255));
g.fillRect(100,350,largo3,40);
g.drawString("Partido 3", 10, 370);
}
}
}
La metodologa es similar al problema anterior. Ahora no tenemos grados para repartir, por lo que
implementaremos el siguiente algoritmo:
Consideraremos que el partido que obtuvo ms votos le corresponde una barra de 400 pxeles de
largo y los otros dos partidos se les entregar en forma proporcional.
Lo primero que hacemos es obtener el mayor de los tres valores ingresados por teclado, para esto
implementamos un mtodo privado que retorne el mayor de tres valores enteros:
private int retornarMayor(int v1,int v2,int v3)
{
if (v1>v2 && v1>v3)
return v1;
else
if (v2>v3)
46
Instituto Superior Jujuy Tcnicas de Programacin
return v2;
else
return v3;
}
El el mtodo paint llamamos al mtodo retornarMayor:
int mayor=retornarMayor(v1,v2,v3);
Como podemos ver primero multiplicamos por 400 y lo dividimos por el mayor de los tres valores
ingresados.
Nuevamente primero multiplicamos y luego dividimos con el objetivo que el resultado de la divisin
no nos redondee a cero.
El primer trozo lo graficamos a partir de la columna 100, fila 250 y con un ancho indicado en la
variable largo1 (el alto de la barra es de 40 pxeles):
g.setColor(new Color(255,0,0));
g.fillRect(100,250,largo1,40);
g.drawString("Partido 1", 10, 270);
g.setColor(new Color(0,128,0));
g.fillRect(100,300,largo2,40);
g.drawString("Partido 2", 10, 320);
g.setColor(new Color(0,0,255));
g.fillRect(100,350,largo3,40);
g.drawString("Partido 3", 10, 370);
47
Instituto Superior Jujuy Tcnicas de Programacin
Problema propuesto
import java.awt.Color;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
BarraPorcentual frame = new BarraPorcentual();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the frame.
*/
public BarraPorcentual()
{
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 800, 600);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(null);
48
Instituto Superior Jujuy Tcnicas de Programacin
g.setColor(new Color(255,0,0));
g.fillRect(50,250,largo1,50);
g.setColor(new Color(255,255,255));
g.drawString(porc1+"%",55,270);
g.setColor(new Color(0,128,0));
49
Instituto Superior Jujuy Tcnicas de Programacin
g.fillRect(50+largo1,250,largo2,50);
g.setColor(new Color(255,255,255));
g.drawString(porc2+"%",55+largo1,270);
g.setColor(new Color(0,0,255));
g.fillRect(50+largo1+largo2,250,largo3,50);
g.setColor(new Color(255,255,255));
g.drawString(porc3+"%",55+largo1+largo2,270);
}
}
50