58 - tkinter : controles Button y Label

En las interfaces visuales las ventanas son controles visuales contenedores de otros controles como los botones y etiquetas de texto.

Veremos los pasos que debemos dar si queremos que se muestren objetos de la clase Button y Label en nuestras ventanas.

Problema:

Mostrar una ventana y en su interior dos botones y una label. La label muestra inicialmente el valor 1. Cada uno de los botones permiten incrementar o decrementar en uno el contenido de la label

Programa: ejercicio216.py

Ver video

import tkinter as tk

class Aplicacion:
    def __init__(self):
        self.valor=1
        self.ventana1=tk.Tk()
        self.ventana1.title("Controles Button y Label")
        self.label1=tk.Label(self.ventana1, text=self.valor)
        self.label1.grid(column=0, row=0)
        self.label1.configure(foreground="red")

        self.boton1=tk.Button(self.ventana1, text="Incrementar", command=self.incrementar)
        self.boton1.grid(column=0, row=1)

        self.boton2=tk.Button(self.ventana1, text="Decrementar", command=self.decrementar)
        self.boton2.grid(column=0, row=2)

        self.ventana1.mainloop()


    def incrementar(self):
        self.valor=self.valor+1
        self.label1.config(text=self.valor)

    def decrementar(self):
        self.valor=self.valor-1
        self.label1.config(text=self.valor)        


aplicacion1=Aplicacion()

Definimos un atributo en la clase Aplicacion y almacenamos el valor 1:

        self.valor=1

Creamos la ventana y le fijamos un título como hemos visto en el concepto anterior:

        self.ventana1=tk.Tk()
        self.ventana1.title("Controles Button y Label")

Ahora creamos un objeto de la clase Label y le pasamos como primer parámetro la referencia a la ventana donde debe aparecer la label y el parámetro text con el valor inicial de la Label:

        self.label1=tk.Label(self.ventana1, text=self.valor)

Para ubicar los controles visuales en la ventana veremos más adelante que hay diferentes Layout, por ahora en forma muy sencilla mediante la llamada al método grid indicaremos en los parámetros column y row la ubicación del mismo:

        self.label1.grid(column=0, row=0)

Para que el texto de la Label se muestre de color rojo llamamos al método configure y le pasamos en el parámetro foreground el string "red":

        self.label1.configure(foreground="red")

La creación de los dos botones es similar a la creación de la label, en el primer parámetro indicamos la referencia de la ventana donde se debe mostrar el botón, en el parámetro text indicamos el texto a mostrar dentro del botón y finalmente en el parámetro command pasamos la referencia del método que se ejecutará cuando el operador lo presione:

        self.boton1=tk.Button(self.ventana1, text="Incrementar", command=self.incrementar)
        self.boton1.grid(column=0, row=1)

        self.boton2=tk.Button(self.ventana1, text="Decrementar", command=self.decrementar)
        self.boton2.grid(column=0, row=2)

Para que los botones se encuentren abajo de la Label al llamar al método grid pasamos en el parámetro row los valores 1 y 2. Como todos los controles se encuentran en la misma columna pasamos en column el valor 0.

No olvidar a llamar al final del método __init__ al método mainloop():

self.ventana1.mainloop()

El método incrementar se ejecuta cuando el operador presiona el boton1 (dentro del mismo incrementamos en uno el atributo valor y actualizamos el contenido de la label1 llamando al método config y en el parámetro text el nuevo valor a mostrar):

    def incrementar(self):
        self.valor=self.valor+1
        self.label1.config(text=self.valor)

El algoritmo del método decrementar solo difiere en que decrementa en uno el atributo valor:

    def decrementar(self):
        self.valor=self.valor-1
        self.label1.config(text=self.valor)        

No olvidemos crear un objeto de la clase 'Aplicacion' en el bloque principal del programa:

aplicacion1=Aplicacion()

Cuando ejecutamos la aplicación tenemos una interfaz visual similar a esta:

Acotaciones

La sintaxis para modificar la propiedad 'text' de la label1 se puede hacer llamando al método config como lo hemos hecho:

        self.label1.config(text=self.valor)

O mediante la sintaxis:

        self.label1["text"]=self.valor

Problema:

Mostrar dos Label, en una se muestra el nombre del programa y en la segunda el año de creación. Disponer un botón para finalizar el programa.
No permitir al usuario redimensionar la ventana.

Programa: ejercicio217.py

Ver video

import tkinter as tk
import sys

class Aplicacion:
    def __init__(self):
        self.ventana1=tk.Tk()
        self.ventana1.title("Prueba")
        self.label1=tk.Label(self.ventana1, text="Sistema de facturación")
        self.label1.grid(column=0, row=0)
        self.label2=tk.Label(self.ventana1, text="2018")
        self.label2.grid(column=0, row=1)
        self.boton1=tk.Button(self.ventana1, text="Finalizar", command=self.finalizar)
        self.boton1.grid(column=0, row=2)
        self.ventana1.resizable(False, False)
        self.ventana1.mainloop()


    def finalizar(self):
        sys.exit(0)

aplicacion1=Aplicacion()

En esta aplicación para no permitir redimensionar ni el ancho ni el alto del la ventana debemos llamar al método resizable y pasar el valor False a cada parámetro.

Cuando queremos finalizar un programa en Python debemos llamar a la función exit que se encuentra en el módulo sys, por ello hemos importado dicho módulo al principio:

import sys

Cuando ejecutamos la aplicación tenemos una interfaz visual similar a esta:

Problemas propuestos

• Disponer dos objetos de la clase Button con las etiquetas: "varón" y "mujer", al presionarse mostrar en la barra de títulos de la ventana la etiqueta del botón presionado.

  Ver video

• Mostrar los botones del 1 al 5. Cuando se presiona mostrar en una Label todos los botones presionados hasta ese momento.
  

  Ver video

Solución

ejercicio218.py

import tkinter as tk

class Aplicacion:
    def __init__(self):
        self.ventana1=tk.Tk()
        self.ventana1.title("Prueba")
        self.boton1=tk.Button(self.ventana1, text="Varón", command=self.presionvaron)
        self.boton1.grid(column=0, row=0)
        self.boton2=tk.Button(self.ventana1, text="Mujer", command=self.presionmujer)
        self.boton2.grid(column=1, row=0)
        self.ventana1.mainloop()

    def presionvaron(self):
        self.ventana1.title('Varón')

    def presionmujer(self):
        self.ventana1.title('Mujer')


aplicacion1=Aplicacion()




ejercicio219.py

import tkinter as tk

class Aplicacion:
    def __init__(self):
        self.datos=""
        self.ventana1=tk.Tk()
        self.ventana1.title("Prueba")
        self.boton1=tk.Button(self.ventana1, text="1", command=self.presion1)
        self.boton1.grid(column=0, row=0)
        self.boton2=tk.Button(self.ventana1, text="2", command=self.presion2)
        self.boton2.grid(column=1, row=0)
        self.boton3=tk.Button(self.ventana1, text="3", command=self.presion3)
        self.boton3.grid(column=2, row=0)
        self.boton4=tk.Button(self.ventana1, text="4", command=self.presion4)
        self.boton4.grid(column=3, row=0)
        self.boton5=tk.Button(self.ventana1, text="5", command=self.presion5)
        self.boton5.grid(column=4, row=0)
        self.label1=tk.Label(self.ventana1, text=self.datos)
        self.label1.grid(column=5, row=0)
        self.ventana1.mainloop()

    def presion1(self):
        self.datos=self.datos+"1"
        self.label1.configure(text=self.datos)

    def presion2(self):
        self.datos=self.datos+"2"
        self.label1.configure(text=self.datos)

    def presion3(self):
        self.datos=self.datos+"3"
        self.label1.configure(text=self.datos)

    def presion4(self):
        self.datos=self.datos+"4"
        self.label1.configure(text=self.datos)

    def presion5(self):
        self.datos=self.datos+"5"
        self.label1.configure(text=self.datos)

aplicacion1=Aplicacion()