Ejemplo básico de interface gráfica de usuario con Python

De ChuWiki


Vamos a hacer un ejemplo sencillo de una ventana en python que tenga una caja de texto Entry y dos botones Button. Uno de los botones, al pulsarlo, escribirá "Hola" en la caja de texto. El otro botón, al pulsarlo, mostrará por la consola lo que hay escrito en la caja de texto.

Código de ejemplo[editar]

El siguiente código es el del ejemplo

import tkinter as tk

def set_text():
    v.set("Hola")

def get_text():
    print(v.get())

if __name__ == '__main__':
    rootWindow = tk.Tk()
    rootWindow.title("Main Window")

    v = tk.StringVar()
    campoTexto = tk.Entry(rootWindow, textvariable=v)
    campoTexto.pack(side=tk.LEFT)

    buttonSet = tk.Button(rootWindow, text="hola", command=set_text)
    buttonSet.pack(side=tk.LEFT)

    buttonGet = tk.Button(rootWindow, text="Get", command=get_text)
    buttonGet.pack(side=tk.LEFT)

    rootWindow.mainloop()

Pasemos a explicarlo paso a paso.

Importar la librería Tkinter[editar]

La librería Tkinter viene por defecto con python, así que simplemente debemos importarla en nuestro código.

import tkinter as tk

A partir de aquí, podemos usar los componentes de esta librería precediéndolos con tk.

Ventana principal de Tkinter[editar]

La ventana principal de una aplicación Tkinter es tk.Tk. Solo puede haber una instancia de esta ventana en nuestra aplicación. La creamos y le ponemos un título de la siguiente forma

rootWindow = tk.Tk()
rootWindow.title("Main Window")

Caja de texto tk.Entry[editar]

Las cajas de texto para que el usuario introduzca datos son tk.Entry. Podemos poner desde código directamente sobre tk.Entry el texto que queramos que muestre o pedirle el texto que ha escrito el usuario. Pero también podemos crear una variable de tipo tk.StringVar para asociarla al campo tk.Entry. Podemos leer esta variable para saber qué hay escrito en la caja de texto o podemos modificar esta variable para modificar el contenido de la caja de texto.

Así que creamos la variable tk.StringVar y la caja de texto tk.Entry

v = tk.StringVar()
campoTexto = tk.Entry(rootWindow, textvariable=v)
campoTexto.pack(side=tk.LEFT)

Al crear tk.Entry pasamos como parámetros la ventana donde queremos que esté esta caja de texto y la variable asociada. En la tercera línea con pack() indicamos que la caja de texto debe estar en el lado izquierdo de la ventana.

Leer y modificar tk.Entry[editar]

def set_text():
    v.set("Hola")

def get_text():
    print(v.get())

Una alternativa, si no hubieramos usado la variable tk.StringVar, sería usar directamente los métodos que tiene tk.Entry para obtener y modificar el texto

campoTexto = tk.Entry(rootWindow)

def set_text():
    campoTexto.delete(0, tk.END)
    campoTexto.insert(0, "Hola")
    # v.set("Hola")

def get_text():
    print(campoTexto.get())
    #print(v.get())

Para insertar, debemos usar delete(0, tk.END) para borrar previamente el posible contenido que tenga y luego insert(0, "Hola") para poner el texto que queramos. En delete, los parámetros son los índices de inicio y fin del texto a borrar. Como queremos borrar todo, desde 0 hasta tk.END que sería equivalente a indicar el último caracter del texto. En insert indicamos en qué posición queremos insertar el texto (posición 0) y el texto a insertar.

Crear los botones tk.Button[editar]

Para crear los botones, basta instanciar tk.Button.

buttonSet = tk.Button(rootWindow, text="hola", command=set_text)
buttonSet.pack(side=tk.LEFT)

buttonGet = tk.Button(rootWindow, text="Get", command=get_text)
buttonGet.pack(side=tk.LEFT)

Al instanciarlos, pasamos como parámetro

  • rootWindow o ventana donde queramos que esté el botón.
  • text o texto que quermos que muestre el botón
  • command o función que queremos que se ejecuta al hacer click en el botón.

Con pack() indicamos que los botones deben estar al lado izquierdo de la ventana. Como ya habiamos colocado la caja de texto, a la izquierda, los botones se irán "apilando" a la izquierda. La siguiente imagen muestra como quedaría la ventana

Verás que están verticalmente centrados y a la izquierda de la ventana, en el orden en que los hemos ido añadiendo.

Mostrar la ventana principal tk.Tk[editar]

Una vez montado todo, sólo nos queda visualizar la ventana

rootWindow.mainloop()

Enlaces externos[editar]