🧰 1.
Componentes de la Interfaz (Los Objetos
Visuales)
Estos son los bloques de construcción que declaras arriba con private y luego
agregas a la ventana con add().
¿Qué es en
Componente ¿Cuándo usarlo? Ejemplo de código
cristiano?
Para mostrar mensajes,
Una etiqueta de títulos, instrucciones
JLabel new JLabel("Texto:");
texto fijo. ("Usuario:") o resultados
de un contador.
Para hacer que pase algo
Un botón cuando el usuario le da new
JButton
interactivo. clic (guardar, borrar, JButton("Guardar");
sumar).
Para que el usuario escriba
Una caja de
datos comunes (su new JTextField(15);
JTextField texto de una
nombre, cédula, correo, (el 15 es el ancho)
sola línea.
etc.).
Idéntico al JTextField, pero
JPasswordFie Una caja de muestra puntitos ••••. Se new
ld texto oculta. usa solo para JPasswordField(10);
contraseñas.
Cuando el usuario debe
Una casilla de
activar o desactivar una new JCheckBox("¿Es
JCheckBox verificación
opción (ej: "[ ] Acepto los activo?");
(gancho).
términos").
Cuando quieres que el new
Un menú
usuario elija una sola JComboBox<>(new
JComboBox desplegable
opción de una lista cerrada String[]{"Admin",
con opciones.
(ej: Tipos de usuario). "Cliente"});
⚙️2. Configuraciones de la Ventana (Métodos del
JFrame)
Estas son las órdenes de apariencia y comportamiento que van adentro del
constructor, por lo general al principio.
¿Qué le hace
Método ¿Por qué es importante usarlo?
a la ventana?
Le pone el
Es obligatorio para que la ventana no
setTitle("Texto"); nombre a la
se vea genérica o vacía arriba.
barra superior.
Define el Si no lo pones, la ventana se abrirá
setSize(ancho, alto); tamaño en diminuta (como un puntito) y no se
píxeles. verá nada.
La centra Evita que la ventana aparezca
setLocationRelativeTo(n
mágicamente arrinconada en la esquina superior
ull);
en la pantalla. izquierda de tu monitor.
Usa siempre
Define qué JFrame.EXIT_ON_CLOSE. Si no lo
setDefaultCloseOperati
pasa al cerrar pones, al cerrar la ventana el
on(...)
la ventana. programa sigue corriendo en segundo
plano y te consume RAM.
Clave para el martes: Usa new
FlowLayout() para que los botones se
Activa el
setLayout(new ... acomoden solos en fila. Si no pones
organizador de
Layout()); ningún Layout, Java por defecto
componentes.
expandirá el último componente que
agregues hasta tapar todo lo demás.
💡 El resumen de los métodos "Acción y Reacción"
Cuando estés programando la lógica dentro de los botones, solo vas a usar dos
métodos el 90% del tiempo para interactuar con los componentes:
1. getText() (Para LEER): Le saca el texto a una caja.
• Ejemplo: String nombre = [Link](); (Guarda lo que el usuario
escribió).
2. setText("Nuevo Texto") (Para ESCRIBIR): Cambia el texto de una
etiqueta o caja desde el código.
• Ejemplo: [Link]("Hola " + nombre); (Muestra el saludo en la
pantalla).
Con esta tabla en mente, mañana cuando el profesor te plantee el problema, tú
solo dices: "Ok, necesito dos JLabel para los textos, dos JTextField para que
escriban, y un JButton con un addActionListener para procesar".
🎨 1. Configuraciones de Color
En Java, los colores se manejan con la clase Color. Puedes usar colores
predefinidos (como [Link], [Link], [Link]) o crear los tuyos.
Método ¿Qué hace? ¿Cómo se usa?
setBackground( Cambia el color de fondo de [Link]([Link]
Color) un componente o panel. RK_GRAY);
setForeground(C Cambia el color de la fuente [Link](Color.
olor) (el texto). WHITE);
⚠️Truco de oro para la ventana principal (JFrame): Si intentas
hacer [Link]([Link]); directamente a la ventana, no va
a pintar nada. En Swing, la ventana tiene una "capa flotante" adentro
llamada contenedor principal. Para pintar el fondo de la ventana tienes
que hacerlo así:
[Link]().setBackground([Link]);
📐 2. Configuraciones de Forma, Tamaño manual y
Bordes
Si no quieres usar un Layout automático (como FlowLayout) y prefieres darle tú
misma la posición y forma exacta a cada botón en la pantalla, se usa el "Diseño
Libre".
Método ¿Qué hace? ¿Cuándo y cómo usarlo?
Desactiva los Obligatorio si quieres decidir tú misma los
setLayout(n
organizadores tamaños y posiciones exactas de los
ull);
automáticos. componentes.
Se usa en los componentes tras poner el
Layout en null.
setBounds(x Define la posición
, y, ancho, y el tamaño exacto Ejemplo: [Link](50, 30, 120, 40);
alto); de un objeto.
(Lo ubica a 50px de la izquierda, 30px de
arriba, con 120px de ancho y 40px de alto).
Para resaltar cajas de texto o botones.
Añade un borde
setBorder(... Ejemplo:
decorativo (líneas,
) [Link]([Link]
relieves).
neBorder([Link], 2)); (Crea un borde rojo
de 2 píxeles de grosor).
💡 Ejemplo rápido de cómo se vería esto en código:
Si mañana quisieras hacer un botón personalizado, gris oscuro con letras
amarillas, posicionado a mano en una coordenada exacta, escribirías esto en tu
constructor:
Java
// 1. Apagamos el layout automático para mandar nosotros
setLayout(null);
// 2. Le damos forma y posición manual (X, Y, Ancho, Alto)
[Link](80, 50, 150, 40);
// 3. Le damos los colores estilo "Modo Oscuro"
[Link](Color.DARK_GRAY); // Fondo gris
[Link]([Link]); // Letras amarillas
// 4. Lo agregamos
add(boton);
1. Cómo poner Color de Fondo (A la Ventana y a las Etiquetas)
A la Ventana Principal (JFrame)
Como te comentaba antes, si intentas pintarla directamente no te hará caso. Tienes que pedirle su
"capa de contenido" (Content Pane) y pintarla a ella.
[Link]().setBackground([Link]); // Pone la ventana en negro
A las Etiquetas (JLabel)
Las etiquetas por defecto en Java son transparentes. Si solo les cambias el color de fondo, no
verás nada porque el color de la ventana se trasluce. Para solucionarlo, debes obligarla a ser
opaca (sólida) con setOpaque(true).
[Link](true); // ⚠️¡Obligatorio! Hace que el fondo sea visible
[Link]([Link]); // Fondo amarillo
[Link]([Link]); // Letras azules (Foreground)
2. ¿Cuáles son las Dimensiones de Tamaño de las Interfaces?
En Java, los tamaños y posiciones se miden en píxeles (px), empezando a contar desde la
esquina superior izquierda de la pantalla (coordenada 0,0).
Cuando usas setSize(ancho, alto), estas son las medidas estándar en la programación actual
para que te guíes según lo que necesites:
• 300, 150 (Tamaño Mini): Perfecto para avisos pequeños, alertas o un contador simple
como tu ejercicio de Sonic.
• 400, 250 (Tamaño Caja de Login): El tamaño ideal para un formulario de inicio de sesión
(Usuario, Contraseña y botón Aceptar).
• 600, 400 (Tamaño Mediano): Excelente para las sub-ventanas del sistema (como tus
vistas de registro o de pago). Cabe todo bien distribuido.
• 800, 600 o 1024, 768 (Tamaño Sistema): Es el estándar para la ventana principal del
software, para que se adapte bien en pantallas de laptops normales sin desconfigurarse.
public class Proyecto extends JFrame {
private JLabel etiqueta;
private JButton botonRegistro;
private JButton botonPago;
public Proyecto() { // ⬅️AQUÍ EMPIEZA EL CONSTRUCTOR
// 1. Configuraciones iniciales de la ventana
setTitle("Menú Principal - Gestión");
setSize(350, 150);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setLayout(new FlowLayout());
// 🌟 ¡AQUÍ VA EL COLOR DE FONDO DE LA VENTANA!
[Link]().setBackground([Link]);
// 2. Inicializas tus componentes
etiqueta = new JLabel("Sistema de Gestión de Compra y Venta");
// ⚠️TRUCO EXTRA: Como la ventana ahora es negra,
// las letras negras de la etiqueta no se van a ver. ¡Píntalas de blanco!
[Link]([Link]);
botonRegistro = new JButton("Registrar Usuario");
botonPago = new JButton("Método de Pago");
// 3. Agregas todo a la ventana
add(etiqueta);
add(botonRegistro);
add(botonPago);
// (Abajo seguirían los ActionListeners de tus botones...)
} // ⬅️AQUÍ TERMINA EL CONSTRUCTOR
}
El Mapa de Navegación de tus 5 Vistas
Imagina que tu sistema de gestión de compra y venta ahora crece. Tus 5 archivos independientes
en tu paquete de NetBeans se verían así:
1. [Link] (Vista 1 - El Menú Principal): Sigue siendo la ventana mamá que
arranca todo. Ahora en lugar de dos botones, tendrá 4 botones para abrir las demás
pantallas.
2. [Link] (Vista 2 - Registrar Usuario): Tu formulario para ingresar datos.
3. [Link] (Vista 3 - Métodos de Pago): Tu pantalla para elegir efectivo, tarjeta,
etc.
4. [Link] (Vista 4 - Control de Productos): (Nueva) Una ventana para ver
qué mercancía hay disponible.
5. [Link] (Vista 5 - Reporte de Venta): (Nueva) La pantalla final que muestra
el total de la compra.