UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
Introducción a Interfaces Gráficas con
Tkinter en Python
Nombre: Anthony Esneiler Acosta Jiménez Grupo: S1
🎯 1. Objetivo de aprendizaje
Al finalizar este taller, el estudiante será capaz de:
Crear una ventana gráfica en Python
Utilizar widgets básicos (Label, Entry, Button)
Implementar eventos mediante funciones
Capturar y mostrar datos ingresados por el usuario
Organizar elementos usando el gestor de geometría grid()
📚 2. Conceptos previos
Antes de empezar, el estudiante debe conocer:
Variables
Funciones
Entrada/salida básica (input, print)
Uso básico de Python
🧩 3. Material requerido
Python 3 instalado
Editor (VS Code, PyCharm o similar)
🔧 4. Desarrollo paso a paso
🔹 Paso 1: Importar librerías
from tkinter import *
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
from [Link] import *
✅ Tkinter permite crear interfaces gráficas.
🔹 Paso 2: Crear la ventana principal
window = Tk()
[Link]("Mi primera interfaz gráfica")
``
🔹 Paso 3: Definir tamaño y posición
[Link]("475x170+50+50")
🔹 Paso 4: Crear una etiqueta (Label)
titulo = Label(window, text="Hola, Soy Tkinter", foreground="red",
background="yellow")
[Link](column=1, row=0, padx=5, pady=5)
🔹 Paso 5: Crear campo de entrada (Entry)
entrada = Entry(window)
[Link](column=0, row=2, padx=5, pady=5)
[Link]()
🔹 Paso 6: Crear etiqueta de resultado
resultado = Label(window, text="")
[Link](column=0, row=4, padx=5, pady=5)
🔹 Paso 7: Definir evento del botón
def boton_presionado():
texto = [Link]()
resultado['text'] = "Digitaste: " + texto
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
[Link]()
🔹 Paso 8: Crear botón
boton_texto = Button(window, text="Mostrar texto", command=boton_presionado)
boton_texto.grid(column=1, row=2, padx=5, pady=5)
🔹 Paso 9: Botón para cerrar
boton_salida = Button(window, text="Terminar", command=[Link])
boton_salida.grid(column=1, row=4, padx=5, pady=5)
🔹 Paso 10: Ejecutar la aplicación
[Link]()
🎯 1. Objetivo de aprendizaje
Al finalizar este taller, el estudiante será capaz de:
Crear ventanas gráficas en Java
Utilizar componentes básicos (JLabel, JTextField, JButton)
Manejar eventos (ActionListener)
Capturar y mostrar información ingresada por el usuario
Comprender la programación orientada a eventos
📚 2. Conceptos previos
El estudiante debe conocer:
Estructura básica de Java
Métodos y clases
Uso de Scanner (entrada en consola)
Concepto de objetos
🧩 3. Herramientas necesarias
JDK instalado
IDE recomendado: NetBeans / IntelliJ / Eclipse
🔧 4. Desarrollo paso a paso
🔹 Paso 1: Importar librerías
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
import [Link].;
import [Link].;
🔹 Paso 2: Crear la clase principal
public class InterfazBasica {
public static void main(String[] args) {
}
}
🔹 Paso 3: Crear ventana (JFrame)
JFrame ventana = new JFrame("Interfaz Gráfica Java");
[Link](450, 200);
🔹 Paso 4: Crear etiqueta (JLabel)
JLabel titulo = new JLabel("Hola, Soy Swing");
[Link](150, 10, 200, 30);
[Link](titulo);
🔹 Paso 5: Crear campo de texto (JTextField)
JTextField entrada = new JTextField();
[Link](50, 60, 150, 30);
[Link](entrada);
🔹 Paso 6: Crear etiqueta de resultado
JLabel resultado = new JLabel("");
[Link](50, 120, 300, 30);
[Link](resultado);
🔹 Paso 7: Crear botón y evento
JButton boton = new JButton("Mostrar texto");
[Link](220, 60, 150, 30);
[Link](new ActionListener() {
public void actionPerformed(ActionEvent e) {
String texto = [Link]();
[Link]("Digitaste: " + texto);
}
});
[Link](boton);
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
🔹 Paso 8: Botón salir
JButton salir = new JButton("Terminar");
[Link](220, 100, 150, 30);
[Link](e -> [Link](0));
[Link](salir);
🔹 Paso 9: Mostrar ventana
[Link](true);
🧠 6. Actividades prácticas
🟢 Nivel básico
1. Cambiar el mensaje inicial
2. Cambiar tamaño y posición de componentes
3. Mostrar el texto en mayúsculas:
[Link]([Link]());
🟡 Nivel intermedio
4. Validar campo vacío
5. Contar caracteres
[Link]("Cantidad caracteres: " + [Link]());
6. Agregar botón “Limpiar”
[Link]("");
[Link]("");
🔴 Nivel avanzado (reto)
7. Detectar si el texto es un número
8. Cambiar color de la etiqueta dinámicamente
[Link]([Link]);
9. Contador de clics del botón
🧠 6. Actividades prácticas (Trabajo del
estudiante)
Python
🟢 Nivel básico
1. Cambiar el texto de la etiqueta inicial
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
2. Cambiar colores de la interfaz
3. Mostrar el texto en mayúsculas
from tkinter import *
ventana = Tk()
[Link]("Ejemplo Básico")
etiqueta = Label(ventana, text="Texto inicial cambiado")
[Link]()
[Link](bg="lightblue")
[Link](bg="yellow", fg="red")
entrada = Entry(ventana)
[Link]()
def mostrar_mayusculas():
texto = [Link]().upper()
etiqueta['text'] = texto
boton = Button(ventana, text="Mostrar en MAYÚSCULAS",
command=mostrar_mayusculas)
[Link]()
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
[Link]()
🟡 Nivel intermedio
4. Validar que el campo no esté vacío
5. Contar número de caracteres ingresados
6. Agregar botón “Limpiar”
Ejemplo:
def limpiar():
[Link](0, END)
resultado['text'] = ""
from tkinter import *
ventana = Tk()
[Link]("Ejemplo Intermedio")
entrada = Entry(ventana)
[Link]()
resultado = Label(ventana, text="")
[Link]()
def validar():
if [Link]() == "":
resultado['text'] = "El campo está vacío "
else:
resultado['text'] = "Texto válido "
def contar():
resultado['text'] = f"Número de caracteres: {len([Link]())}"
def limpiar():
[Link](0, END)
resultado['text'] = ""
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
Button(ventana, text="Validar", command=validar).pack()
Button(ventana, text="Contar caracteres", command=contar).pack()
Button(ventana, text="Limpiar", command=limpiar).pack()
[Link]()
🔴 Nivel avanzado (reto)
7. Mostrar si el texto es numérico
8. Agregar contador de clics del botón
9. Cambiar el color del texto dinámicamente
from tkinter import *
ventana = Tk()
[Link]("Ejemplo Avanzado")
entrada = Entry(ventana)
[Link]()
resultado = Label(ventana, text="")
[Link]()
contador_clicks = 0
def es_numerico():
texto = [Link]()
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
if [Link]():
resultado['text'] = "El texto es numérico "
else:
resultado['text'] = "El texto NO es numérico "
def contar_clicks():
global contador_clicks
contador_clicks += 1
resultado['text'] = f"Botón presionado {contador_clicks} veces"
def cambiar_color():
colores = ["red", "green", "blue", "purple", "orange"]
[Link](fg=colores[contador_clicks % len(colores)])
Button(ventana, text="Validar numérico", command=es_numerico).pack()
Button(ventana, text="Contador de clics", command=lambda:
[contar_clicks(), cambiar_color()]).pack()
[Link]()
java
🧠 6. Actividades prácticas
🟢 Nivel básico
4. Cambiar el mensaje inicial
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
5. Cambiar tamaño y posición de componentes
6. Mostrar el texto en mayúsculas:
[Link]([Link]());
1. JLabel mensaje = new JLabel("Bienvenido al programa");
2. JButton boton = new JButton("Aceptar");
[Link](50, 100, 120, 30); // posición (x=50, y=100),
tamaño (120x30)
3. String texto = "Hola mundo";
JLabel resultado = new JLabel();
[Link]([Link]()); // Muestra "HOLA MUNDO"
🟡 Nivel intermedio
6. Validar campo vacío
7. Contar caracteres
[Link]("Cantidad caracteres: " + [Link]());
7. Agregar botón “Limpiar”
[Link]("");
[Link]("");
1. String texto = [Link]();
if ([Link]()) {
[Link]("El campo está vacío");
} else {
[Link]("Texto ingresado: " + texto);
}
2. String texto = [Link]();
[Link]("Cantidad caracteres: " + [Link]());
3. JButton limpiar = new JButton("Limpiar");
[Link](e -> {
[Link](""); // limpia el campo de texto
[Link](""); // limpia el resultado
});
🔴 Nivel avanzado (reto)
9. Detectar si el texto es un número
10. Cambiar color de la etiqueta dinámicamente
[Link]([Link]);
UNIVERSIDAD AUTÓNOMA DEL CARIBE
LABORATORIO DE PROGRAMACION GENERAL
10. Contador de clics del botón
1. String texto = [Link]();
try {
int numero = [Link](texto);
[Link]("Es un número: " + numero);
} catch (NumberFormatException e) {
[Link]("No es un número");
}
2. if ([Link]()) {
[Link]([Link]); // texto vacío → rojo
[Link]("Campo vacío");
} else {
[Link]([Link]); // texto válido → azul
[Link]("Texto ingresado: " + texto);
}
3. JButton boton = new JButton("Contar clics");
JLabel contadorLabel = new JLabel("Clics: 0");
final int[] contador = {0}; // usamos un array para que sea
modificable dentro del lambda
[Link](e -> {
contador[0]++;
[Link]("Clics: " + contador[0]);
});