GUIA 1.

Interfaz gráfica para la clase Cuadrado

Interfaz a construir

Panel superior

Panel medio

Panel inferior

Estos son los elementos a agregar al frame

Labels

textField

comboBox

Botón
1. El primer paso es Crear proyecto en Eclipse, para la clase Cuadrado. Para ello de clic en File 
New  Java Project  Cuadrado  Finish
2. A continuación cree 3 paquetes:

co.uniquindio.programacion1.cuadrado.view

co.uniquindio.programacion1.cuadrado.model

co.uniquindio.programacion1.cuadrado.aplicación
Repita este mismo proceso para crear el paquete co.uniquindio.programacion1.cuadrado.model
3. Luego debe construir dentro del paquete model la clase Cuadrado
Observe que la única diferencia con el código que se ha digitado previamente en clase es que las
funciones no tienen la palabra static.
 package co.uniquindio.programacion1.cuadrado.model;
public class Cuadrado {

public double calcularArea(double lado) {

double area = Math.pow(lado, 2);
return area;
}

public double calcularPerimetro(double lado) {

double area = (4 * lado);
return area;
}

public double hallaHipotenusa(double lado) {

double h = Math.sqrt(Math.pow(lado, 2) + Math.pow(lado, 2));
return h;
}
}

4. A continuación se creará la interfaz gráfica  Clic derecho  New Other. Luego elija JFrame.
Asigne el nombre de VentanaPrincipal
Observe que Window builder ofrece 2 tipos de vistas : Source y Design

De clic en Diseño. Amplie un poco la Paleta, para que pueda observarla mejor.
5. Observe que existen diferentes layouts. Un layout define la ubicación de los componentes en la
pantalla. De clic sobre el frame y elija Border Layout.
6. Observe que si quiere agregar al frame un componente como un panel, verá lo siguiente. Esta es
la distribución del border Layout. Agregue un panel al frame
7. Luego agregue una etiqueta (Label para el título). Cambie el texto de la etiqueta a Aplicación
para manejar la información de un Cuadrado, puede hacerlo desde el panel Properties que está a
la derecha.
8. La acción realizada generará el siguiente código (Activar vista Source)

La idea es ser ordenados y tener una función por espacio a trabajar. Una para la parte superior,
otra para el centro y otra para la parte inferior. Por ende, debemos modificar el código.
9. Se debe modificar el código para que quede de la siguiente forma:

Antes
/**
* Create the frame.
*/
public VentanaPrincipal() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 653, 395);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(new BorderLayout(0, 0));
//se renombra panelSuperior clic derecho  Refactor Rename
JPanel panel = new JPanel();
contentPane.add(panel, BorderLayout.NORTH);
//se renombra a lblTitulo
JLabel lblNewLabel = new JLabel("Aplicacion para un Cuadrado");
panel.add(lblNewLabel);
}

Como debe quedar

package co.uniquindio.programacion1.cuadrado.view;

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;

public class VentanaPrincipal extends JFrame {

private JPanel contentPane;

private JPanel panelSuperior;
private JLabel lblTitulo;

/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
VentanaPrincipal frame = new
VentanaPrincipal();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
 /**
* Create the frame.
*/
public VentanaPrincipal() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 653, 395);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(new BorderLayout(0, 0));
crearPanelSuperior();

public void crearPanelSuperior()

{
panelSuperior = new JPanel();
contentPane.add(panelSuperior, BorderLayout.NORTH);
lblTitulo = new JLabel("Aplicacion para un Cuadrado");
panelSuperior.add(lblTitulo);

En este momento podrá visualizar lo siguiente (vista de Diseño)

10. Ahora continuamos con el centro de la ventana. Nuevamente agregamos un panel.

11. Esta acción generará el siguiente código:

public void crearPanelSuperior()
{
panelSuperior = new JPanel();
contentPane.add(panelSuperior, BorderLayout.NORTH);
 lblTitulo = new JLabel("Aplicacion para un Cuadrado");
panelSuperior.add(lblTitulo);

panel_2 = new JPanel();

contentPane.add(panel_2, BorderLayout.CENTER);
}

12. Debemos entonces modificar para que esto nos quede en una función aparte,
que se va a llamar crearPanelMedio, quedando de la siguiente forma:

public void crearPanelSuperior()

{
panelSuperior = new JPanel();
contentPane.add(panelSuperior, BorderLayout.NORTH);
lblTitulo = new JLabel("Aplicacion para un Cuadrado");
panelSuperior.add(lblTitulo);
}

public void crearPanelMedio()

{
panelMedio = new JPanel();
contentPane.add(panelMedio, BorderLayout.CENTER);

13. Agregue las siguientes instrucciones

public void crearPanelMedio()
{
panelMedio = new JPanel();
contentPane.add(panelMedio, BorderLayout.CENTER);
//agregue estas linea
panelMedio.setLayout(new GridLayout(2, 2));

14. Ahora desde la vista de diseño agregue lo siguiente:

Un label, una textfield, un label y un combobox

15. Este el código que debe haberse generado

public void crearPanelMedio()

{
panelMedio = new JPanel();
//agregue estas linea
panelMedio.setLayout(new GridLayout(2, 2));
contentPane.add(panelMedio, BorderLayout.CENTER);
{
lblLado_1 = new JLabel("Lado");
panelMedio.add(lblLado_1);
}
{
textField_1 = new JTextField();
 panelMedio.add(textField_1);
textField_1.setColumns(10);
}
{
lblOperacinARealizar = new JLabel("Operacion a realizar");
panelMedio.add(lblOperacinARealizar);
}
{
comboBox_1 = new JComboBox();
panelMedio.add(comboBox_1);
}

16. El siguiente paso es renombrar estos componentes. Puede hacerlo desde la ventana o
desde la vista de código. Desde esta última, el paso es seleccionar la variable  clic derecho
 refactor Rename  deje los nombres que aparecen en verde.

public void crearPanelMedio()

{
panelMedio = new JPanel();
//agregue estas linea
panelMedio.setLayout(new GridLayout(2, 2));
contentPane.add(panelMedio, BorderLayout.CENTER);
{
lblLado_1 = new JLabel("Lado");
panelMedio.add(lblLado_1);
}
{
textFieldLado = new JTextField();
panelMedio.add(textFieldLado);
textFieldLado.setColumns(10);
}
{
lblOperacinARealizar = new JLabel("Operacion a realizar");
panelMedio.add(lblOperacinARealizar);
}
{
comboBox_Operacion = new JComboBox();
panelMedio.add(comboBox_Operacion);
}

}
17. Para configurar las opciones del combobox agregue las siguientes líneas.

public void crearPanelMedio()

{
panelMedio = new JPanel();
//agregue estas linea
panelMedio.setLayout(new GridLayout(2, 2));
contentPane.add(panelMedio, BorderLayout.CENTER);
{
lblLado_1 = new JLabel("Lado");
panelMedio.add(lblLado_1);
}
{
textFieldLado = new JTextField();
panelMedio.add(textFieldLado);
textFieldLado.setColumns(10);
}
{
lblOperacinARealizar = new JLabel("Operacion a realizar");
panelMedio.add(lblOperacinARealizar);
}
{
comboBox_Operacion = new JComboBox();
panelMedio.add(comboBox_Operacion);
}

comboBox_Operacion.addItem("Area");
comboBox_Operacion.addItem("Perimetro");
comboBox_Operacion.addItem("Hipotenusa");

public VentanaPrincipal() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 653, 395);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
crearPanelSuperior();
crearPanelMedio();
}
18. Si todo va bien, y ejecuta la aplicación (botón Run de la barra principal), debe salir lo
siguiente:

19. A continuación se crear el panel inferior.

public void construyePanelInferior(){

panelInferior=new JPanel();
botonAceptar=new JButton("Aceptar");
panelInferior.setLayout(new BoxLayout(panelInferior, BoxLayout.X_AXIS));
panelInferior.add(botonAceptar);
contentPane.add(panelInferior, BorderLayout.SOUTH);
}

public VentanaPrincipal() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 653, 395);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
crearPanelSuperior();
crearPanelMedio();
construyePanelInferior();
}

20. El siguiente paso es agregar una instancia de la clase principal de la

lógica (ósea Cuadrado) y agregar el oyente (ActionListener)
public class VentanaPrincipal extends JFrame implements ActionListener{

private JPanel contentPane;

private JPanel panelSuperior;
private JLabel lblTitulo;
private JPanel panel;
private JLabel lblLado;

private JLabel lblLado_1;

private JTextField textFieldLado;
private JLabel lblOperacinARealizar;
private JPanel panelMedio;
private JComboBox comboBox_Operacion;
private JPanel panelInferior;
private JButton botonAceptar;
private Cuadrado miCuadrado;

/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
VentanaPrincipal frame = new
VentanaPrincipal();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}

/**
* Create the frame.
*/
public VentanaPrincipal() {
miCuadrado = new Cuadrado();
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 653, 395);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
crearPanelSuperior();
crearPanelMedio();
construyePanelInferior();

public void crearPanelSuperior()

{
contentPane.setLayout(new GridLayout(0, 1, 0, 0));
panelSuperior = new JPanel();
contentPane.add(panelSuperior);
 lblTitulo = new JLabel("Aplicacion para un Cuadrado");
panelSuperior.add(lblTitulo);
}

public void crearPanelMedio()

{
panelMedio = new JPanel();
//agregue estas linea
panelMedio.setLayout(new GridLayout(2, 2));
contentPane.add(panelMedio, BorderLayout.CENTER);
{
lblLado_1 = new JLabel("Lado");
panelMedio.add(lblLado_1);
}
{
textFieldLado = new JTextField();
panelMedio.add(textFieldLado);
textFieldLado.setColumns(10);
}
{
lblOperacinARealizar = new JLabel("Operacion a realizar");
panelMedio.add(lblOperacinARealizar);
}
{
comboBox_Operacion = new JComboBox();
panelMedio.add(comboBox_Operacion);
}

comboBox_Operacion.addItem("Area");
comboBox_Operacion.addItem("Perimetro");
comboBox_Operacion.addItem("Hipotenusa");

public void construyePanelInferior(){

panelInferior=new JPanel();
botonAceptar=new JButton("Aceptar");
panelInferior.setLayout(new BoxLayout(panelInferior,
BoxLayout.X_AXIS));
panelInferior.add(botonAceptar);
contentPane.add(panelInferior, BorderLayout.SOUTH);
}

21. Debe corregir los errores, seleccionar adicionar métodos sin implementar
Esta acción agrega el método actionPerformed

@Override
public void actionPerformed(ActionEvent e) {
// TODO Auto-generated method stub

23. El único componente con el que se va a realizar eventos es con el botón, por ende,
debemos agregarle oyente al botón

public void construyePanelInferior(){

panelInferior=new JPanel();
botonAceptar=new JButton("Aceptar");
panelInferior.setLayout(new BoxLayout(panelInferior, BoxLayout.X_AXIS));
panelInferior.add(botonAceptar);
contentPane.add(panelInferior, BorderLayout.SOUTH);
botonAceptar.addActionListener(this);
}

23. Debe agregar el siguiente código

@Override
public void actionPerformed(ActionEvent e) {
// TODO Auto-generated method stub
if(e.getSource() == botonAceptar)
{
//aqui se lee el lado del campo de texto
double lado= leerDouble(textFieldLado.getText());
//si es cero, area 1--> perimetro 2-->hipotenusa
int seleccionCombo =
comboBox_Operacion.getSelectedIndex();
double resultado=hallarResultado(seleccionCombo, lado);

public double leerDouble (String cadena)

{
double dato= Double.parseDouble(cadena);
return dato;

/**
* Se agrega una funcion en la ventana, por cada uno de los metodos de
la logica a llamar
* @param lado
*/
public double hallarArea (double lado)
{
double resultado= miCuadrado.calcularArea(lado);
return resultado;
}

public double hallarPerimetro (double lado)

{
double resultado= miCuadrado.calcularPerimetro(lado);
return resultado;

public double hallarHipotenusa (double lado)

{
double resultado= miCuadrado.calcularHipotenusa(lado);
return resultado;

}
public double hallarResultado (int opcion, double lado)
{
double resultado;
if(opcion == 0)
 {
resultado= hallarArea(lado);
mostrarMensaje("El area es: "+resultado);

}
else
if(opcion==1)
{
resultado=hallarPerimetro(lado);
mostrarMensaje("El perimetro es: "+resultado);
}
else
{
resultado= hallarHipotenusa(lado);
mostrarMensaje("La hipotenusa es: "+resultado);
}

return resultado;
}

public void mostrarMensaje (String mensaje)

{

JOptionPane.showMessageDialog(null, mensaje);
}

24. Su ventana ya debe funcionar perfectamente.

Si desea mostrar el resultado en una etiqueta (label), use la instrucción

etiqueta.setText (“mensaje”)
26. Código completo por si tiene errores

package co.uniquindio.programacion1.cuadrado.view;
import java.awt.BorderLayout;
import java.awt.Component;
import java.awt.EventQueue;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import co.uniquindio.programacion1.cuadrado.model.Cuadrado;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JTextField;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JLabel;

public class VentanaPrincipal extends JFrame implements ActionListener{

private JPanel contentPane;

private JPanel panelSuperior;
private JLabel lblTitulo;
private JPanel panel;
private JLabel lblLado;

private JLabel lblLado_1;

private JTextField textFieldLado;
private JLabel lblOperacinARealizar;
private JPanel panelMedio;
private JComboBox comboBox_Operacion;
private JPanel panelInferior;
private JButton botonAceptar;
private Cuadrado miCuadrado;

/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
VentanaPrincipal frame = new VentanaPrincipal();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
 /**
* Create the frame.
*/
public VentanaPrincipal() {
miCuadrado = new Cuadrado();
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 653, 395);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
crearPanelSuperior();
crearPanelMedio();
construyePanelInferior();

public void crearPanelSuperior()

{
contentPane.setLayout(new GridLayout(0, 1, 0, 0));
panelSuperior = new JPanel();
contentPane.add(panelSuperior);
lblTitulo = new JLabel("Aplicacion para un Cuadrado");
panelSuperior.add(lblTitulo);
}

public void crearPanelMedio()

{
panelMedio = new JPanel();
//agregue estas linea
panelMedio.setLayout(new GridLayout(2, 2));
contentPane.add(panelMedio, BorderLayout.CENTER);
{
lblLado_1 = new JLabel("Lado");
panelMedio.add(lblLado_1);
}
{
textFieldLado = new JTextField();
panelMedio.add(textFieldLado);
textFieldLado.setColumns(10);
}
{
lblOperacinARealizar = new JLabel("Operacion a realizar");
panelMedio.add(lblOperacinARealizar);
}
{
comboBox_Operacion = new JComboBox();
panelMedio.add(comboBox_Operacion);
}

comboBox_Operacion.addItem("Area");
comboBox_Operacion.addItem("Perimetro");
comboBox_Operacion.addItem("Hipotenusa");

public void construyePanelInferior(){

panelInferior=new JPanel();
botonAceptar=new JButton("Aceptar");
panelInferior.setLayout(new BoxLayout(panelInferior, BoxLayout.X_AXIS));
panelInferior.add(botonAceptar);
 contentPane.add(panelInferior, BorderLayout.SOUTH);
botonAceptar.addActionListener(this);
}

@Override
public void actionPerformed(ActionEvent e) {
// TODO Auto-generated method stub
if(e.getSource() == botonAceptar)
{
//aqui se lee el lado del campo de texto
double lado= leerDouble(textFieldLado.getText());
//si es cero, area 1--> perimetro 2-->hipotenusa
int seleccionCombo = comboBox_Operacion.getSelectedIndex();
double resultado=hallarResultado(seleccionCombo, lado);

public double leerDouble (String cadena)

{
double dato= Double.parseDouble(cadena);
return dato;

/**
* Se agrega una funcion en la ventana, por cada uno de los metodos de la
logica a llamar
* @param lado
*/
public double hallarArea (double lado)
{
double resultado= miCuadrado.calcularArea(lado);
return resultado;
}

public double hallarPerimetro (double lado)

{
double resultado= miCuadrado.calcularPerimetro(lado);
return resultado;

public double hallarHipotenusa (double lado)

{
double resultado= miCuadrado.calcularHipotenusa(lado);
return resultado;

}
public double hallarResultado (int opcion, double lado)
{
double resultado;
if(opcion == 0)
{
resultado= hallarArea(lado);
mostrarMensaje("El area es: "+resultado);

}
 else
if(opcion==1)
{
resultado=hallarPerimetro(lado);
mostrarMensaje("El perimetro es: "+resultado);
}
else
{
resultado= hallarHipotenusa(lado);
mostrarMensaje("La hipotenusa es: "+resultado);
}

return resultado;
}

public void mostrarMensaje (String mensaje)

{

JOptionPane.showMessageDialog(null, mensaje);
}

package co.uniquindio.programacion1.cuadrado.model;

public class Cuadrado {

public double calcularArea(double lado) {

double area = Math.pow(lado, 2);
return area;
}

public double calcularPerimetro(double lado) {

double area = (4 * lado);
return area;
}

public double calcularHipotenusa(double lado) {

double h = Math.sqrt(Math.pow(lado, 2) + Math.pow(lado, 2));
return h;
}
}