Tu comunidad de Seguridad Informatica

Interfaz Grafica en Java [Segunda parte] Info1810 Para ver Todo el contenido del foro es necesario estar Registrado! Interfaz Grafica en Java [Segunda parte] Info1810
Interfaz Grafica en Java [Segunda parte] Info1810 Antes de comentar o Aportar es Obligado Leer Las: Reglas | Rules Interfaz Grafica en Java [Segunda parte] Info1810
Interfaz Grafica en Java [Segunda parte] Info1810Ya Esta Disponible al publico "LeProject" el Videojuego del Foro Click Aquí Para Ver el Post. Interfaz Grafica en Java [Segunda parte] Info1810
Interfaz Grafica en Java [Segunda parte] Info1810Pitbull Security Labs "Extras" Esta Disponible! [ENTRA]Interfaz Grafica en Java [Segunda parte] Info1810

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo  Mensaje [Página 1 de 1.]

1Expermicid 

Expermicid
Usuario
Usuario

Lun Mar 18, 2013 12:42 pm
Hola a todos. Hoy vamos a seguir con esta segunda parte, en donde vemos primeramente como se pueden organizar los objetos dentro de la ventana. Y si no se hace muy largo veremos tambien los eventos.

Que es un layout?

Es un objeto que determina la posicion de los componentes en una ventana o panel. Es decir, es el encargado de distribuir los espacios. Hay varios tipos de layout y hasta podemos crear nuevos.

Vamos a ver un conjunto de layout con sus caracteristicas.

Para empezar cree una ventana con las configuraciones comunes que vimos en la primera parte.

Código:
import javax.swing.JFrame;

public class Windows  extends JFrame  {
   
   Windows() {
      setTitle("Ventana con Componentes");
      setSize(300, 100);
      setVisible(true);
      setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);      
   }
}

Ahora en ese mismo contructor le vamos a agregar algunas lineas mas.

Creamos un Contenedor. En donde vamos a ir poniendo los diferentes componentes.

Código:
Container contenedor = getContentPane();

Pero para esto vamos a necesitar importar:

Código:
import java.awt.Container;

Border Layout

Este es el que esta por defecto. Para agregar un componente hay que especificarle una de las siguiente posiciones: Norte, Este, Oeste, Sur o Centro.

Creamos algunos componentes:

Código:
JLabel label1 = new JLabel("Primer Label");
JButton button1 = new JButton("Primer Button");
JLabel label2 = new JLabel("Segundo Label");
JCheckBox check = new JCheckBox("Primer CheckBox");
JButton button2 = new JButton("Segundo Button");

Y ahora vamos a agregarlos al Contenedor, es aqui donde le vamos a especificar la posicion:

Código:
contenedor.add(label1, BorderLayout.NORTH);
contenedor.add(label2, BorderLayout.EAST);
contenedor.add(button2, BorderLayout.WEST);
contenedor.add(button1, BorderLayout.SOUTH);
contenedor.add(check, BorderLayout.CENTER);

Interfaz Grafica en Java [Segunda parte] YXEXI

Codigo completo del constructor:

Código:
Windows() {
   setTitle("Ventana con Componentes");
   setSize(300, 100);
   setVisible(true);
   setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      
   Container contenedor = getContentPane();
      
   JLabel label1 = new JLabel("Primer Label");
   JButton button1 = new JButton("Primer Button");
   JLabel label2 = new JLabel("Segundo Label");
   JCheckBox check = new JCheckBox("Primer CheckBox");
   JButton button2 = new JButton("Segundo Button");
      
   contenedor.add(label1, BorderLayout.NORTH);
   contenedor.add(label2, BorderLayout.EAST);
   contenedor.add(button2, BorderLayout.WEST);
   contenedor.add(button1, BorderLayout.SOUTH);
   contenedor.add(check, BorderLayout.CENTER);
}

Box Layout

En este modo, los componentes intentan ocupar el menor espacion que puedan.

Para utilizarlo hay que crear un BoxLayout primero:

Código:
BoxLayout box = new BoxLayout(contenedor, BoxLayout.Y_AXIS);

Estamos creando una instancia de un BoxLayout llamado box. Entre los parentesis van dos parametros, el primero es el contenedor al que le vamos a aplicar el layout y el segundo es la distribucion que van a tomar los componentes. En este caso es BoxLayout.Y_AXIS, donde se ordenan verticalmente, pero tambien podria haber sido BoxLayout.X_AXIS en donde se organizarian horizontalmente.

Ahora le decimos al contenedor que utilice ese layout:

Código:
contenedor.setLayout(box);

Utilizando los mismo componente que en el caso anterior.

Código:
JLabel label1 = new JLabel("Primer Label");
JButton button1 = new JButton("Primer Button");
JLabel label2 = new JLabel("Segundo Label");
JCheckBox check = new JCheckBox("Primer CheckBox");
JButton button2 = new JButton("Segundo Button");

Para terminar se los agregamos al contenedor:

Código:
contenedor.add(label1);
contenedor.add(button1);
contenedor.add(label2);
contenedor.add(check);
contenedor.add(button2);

Y el resultado es:

Interfaz Grafica en Java [Segunda parte] V0j2r

Codigo completo del constructor:

Código:
Windows() {
   setTitle("Ventana con Componentes");
   setSize(300, 100);
   setVisible(true);
   setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      
   Container contenedor = getContentPane();
      
   BoxLayout box = new BoxLayout(contenedor, BoxLayout.Y_AXIS);
   contenedor.setLayout(box);
      
   JLabel label1 = new JLabel("Primer Label");
   JButton button1 = new JButton("Primer Button");
   JLabel label2 = new JLabel("Segundo Label");
   JCheckBox check = new JCheckBox("Primer CheckBox");
   JButton button2 = new JButton("Segundo Button");
      
   contenedor.add(label1);
   contenedor.add(button1);
   contenedor.add(label2);
   contenedor.add(check);
   contenedor.add(button2);
}

Flow Layout

Este Layout va agregando los componentes en el espacio que tiene disponible.

Creamos la instancia del FlowLayout y se la asignamos al contenedor:
Pero primero vamos a necesitar importar:

Código:
import java.awt.FlowLayout;

Código:
FlowLayout flow = new FlowLayout();
contenedor.setLayout(flow);

Creamos los componentes y los agregamos al Conteiner:

Código:
JLabel label1 = new JLabel("Primer Label");
JButton button1 = new JButton("Primer Button");
JLabel label2 = new JLabel("Segundo Label");
JCheckBox check = new JCheckBox("Primer CheckBox");
JButton button2 = new JButton("Segundo Button");
      
contenedor.add(label1);
contenedor.add(button1);
contenedor.add(label2);
contenedor.add(check);
contenedor.add(button2);

Obteniendo:

Interfaz Grafica en Java [Segunda parte] ISItN

Codigo completo del constructor:

Código:
Windows() {
   setTitle("Ventana con Componentes");
   setSize(300, 100);
   setVisible(true);
   setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      
   Container contenedor = getContentPane();

   FlowLayout flow = new FlowLayout();
   contenedor.setLayout(flow);
      
   JLabel label1 = new JLabel("Primer Label");
   JButton button1 = new JButton("Primer Button");
   JLabel label2 = new JLabel("Segundo Label");
   JCheckBox check = new JCheckBox("Primer CheckBox");
   JButton button2 = new JButton("Segundo Button");

   contenedor.add(label1);
   contenedor.add(button1);
   contenedor.add(label2);
   contenedor.add(check);
   contenedor.add(button2);
}

Grid Layout

En este caso los componentes se ordenan haciendo uso de tablas.

Instanciamos el GridLayout, en donde le pasamos como parametros las filas y columnas.
Y se lo asignamos al contenedor.

Código:
GridLayout grid = new GridLayout(3,2);
contenedor.setLayout(grid);

En nuestro caso usaremos 3 filas y 2 columnas.
Ademas necesitamos importar:

Código:
import java.awt.GridLayout;

Agregamos los componentes al contenedor.
Y nos quedara:

Interfaz Grafica en Java [Segunda parte] 9ijsc

Codigo completo del constructor:

Código:
Windows() {
   setTitle("Ventana con Componentes");
   setSize(300, 100);
   setVisible(true);
   setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      
   Container contenedor = getContentPane();
      
   GridLayout grid = new GridLayout(3,2);
   contenedor.setLayout(grid);
      
   JLabel label1 = new JLabel("Primer Label");
   JButton button1 = new JButton("Primer Button");
   JLabel label2 = new JLabel("Segundo Label");
   JCheckBox check = new JCheckBox("Primer CheckBox");
   JButton button2 = new JButton("Segundo Button");
      
   contenedor.add(label1);
   contenedor.add(button1);
   contenedor.add(label2);
   contenedor.add(check);
   contenedor.add(button2);
}

Paneles

Para finalizar vamos a ver como implementar paneles y que nos va a servir mucho tambien para la organizacion de los componentes dentro de la ventana.

Para comenzar vamos a crear una ventana comun como hemos hecho anteriormente. Al cual le agregaremos ya un Container.

Código:
import java.awt.Container;
import javax.swing.*;

public class Windows extends JFrame {
   
   Windows() {
      setTitle("Ventana con Componentes");
      setSize(300, 300);
      setVisible(true);
      setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      
      Container contenedor = getContentPane();
   }
}

Ahora voy a crear una nueva clase llamada Panel que herede de JPanel. Y le agregare un Constructor en donde le cambio el color de fondo para que se note luego en la imagen.

Código:
import java.awt.Color;

public class Panel extends JPanel{    // Clase Panel heredada de JPanel
   
   Panel(){    // Constructor
      setBackground(Color.BLUE);    // Color de fondo
   }

}

Volvemos al constructor de la ventana, creamos una instancia de la clase Panel y se la agregamos al contenedor.

Código:
Panel panel = new Panel();  // instanciamos un objeto Panel
contenedor.add(panel);  // lo agregamos al contenedor

Interfaz Grafica en Java [Segunda parte] MVprY

Si notamos en la imagen vemos al panel por el color de fondo Azul que ocupa todo la ventana.

Y podemos agregarle componentes al Panel desde su contructor.

Código:
JLabel label = new JLabel("Primer Label");
JButton button = new JButton("Primer Button");
      
add(label);
add(button);

Interfaz Grafica en Java [Segunda parte] Op6g3

Ahora ustedes se preguntaran, para que hacer todo esto de crear un Panel si podemos agregar los componentes en el mismo contenedor.

La ventanja es que por ejemplo en el contenedor de la ventana podemos ponerle un Layout Grid y en lo que seria cada celda ponerle un panel distinto.

Vamos a crear una ventana en donde le agregaremos un contenedor con un GridLayout de 3 filas y 1 columna.

Contructor:

Código:
Windows() {
   setTitle("Ventana con Componentes");
   setSize(300, 300);
   setVisible(true);
   setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   
   Container contenedor = getContentPane();   // contenedor de la ventana
   GridLayout grid = new GridLayout(3,1);    // instanciamos un objeto GridLayout
   contenedor.setLayout(grid);     // se lo agregamos al contenedor
}

Y vamos a crea dos clases:

Una para un panel llamada PanelUno que herede de JPanel y cuyo color de fondo va a ser Cyan.

Código:
import java.awt.Color;
import javax.swing.JPanel;

public class PanelUno extends JPanel{
   
   PanelUno() {
      setBackground(Color.CYAN);
   }
}

La segunda clase para otro panel llamada PanelDos que herede de JPanel y cuyo color de fondo sea Green.

Código:
import java.awt.Color;
import javax.swing.JPanel;

public class PanelDos extends JPanel{
   
   PanelDos() {
      setBackground(Color.GREEN);
   }
   
}

Volvemos al constructor de la ventana y le agregamos los dos paneles al Layout.

Código:
PanelUno panel1 = new PanelUno();   // instanciamos un objeto de PanelUno
PanelDos panel2 = new PanelDos();   // instanciamos un objeto de PanelDos
      
// agregamos los paneles al contenedor
contenedor.add(panel1);   
contenedor.add(panel2);

Interfaz Grafica en Java [Segunda parte] FAbSA

Mirando los colores podemos apreciar la ubicacion de cada panel. Y hay una tercer celda en donde no esta en uso.

Y como un Panel es un como un contendor, le podemos asignar un Layout.

Al PanelUno le vamos a poner un GridLayout.

[code]GridLayout grid = new GridLayout(2,2);
setLayout(grid);[//CODE]

Al PanelDos le vamos a poner un FlowLayout.

[code]FlowLayout flow = new FlowLayout();
setLayout(flow);[/code]

Para terminar la demostracion le agregamos unos componentes para ver la diferenciacion.

[code]JLabel label1 = new JLabel("Label1");
JLabel label2 = new JLabel("Label2");
JButton button1 = new JButton("Button1");
JButton button2 = new JButton("Button2");

add(label1);
add(label2);
add(button1);
add(button2);[/code]

Quedandonos:

Interfaz Grafica en Java [Segunda parte] ISQt0

Como podran ver la organizacion de los componentes es distintas gracias a poder ponerle un layout distinto a cada panel.

:) Bueno espero que les sirva.

Saludos

2robtojosu 

robtojosu
Usuario
Usuario

Lun Ago 17, 2015 12:10 am
Buen tutorial. Ojalá pudiera continuarlo

Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.