Ejemplo, GUI Interfaces Gráficas. Cálculo del área de un Triángulo

Paso 1. Importar el tkinter

Para trabajar con una interfaz gráfica lo primero que hay que hacer es importar el módulo tkinter.

Sintaxis

from tkinter import *

Paso 2: Crear ventana principal

Es el lugar donde se van a colocar todos los componentes (widget). La ventana tiene varias ¿ como son: nombre de la ventana =Tk(), titulo (title ), tamaño (resizable) y dimensiones(geometry).

Sintaxis:

ventana = Tk()

ventana.title(\"Primer Ejercicio GIU\")

ventana.resizable(False, False)

ventana.geometry(\"450x450\")

Paso 3: Crear widget

Etiqueta, Label

Para crear la etiqueta Label se debe dar un nombre Nombre de la etiqueta = Label(nombre de la ventana principal, text=\"texto que se quiera visualizar\"), tipo de letra Font, tamaño, y a continuación se debe indicar su posición grid.

Sintaxis

Nombre_etiqueta = Label(ventana, text=\"Información que se quiere visualizar\", font= \"Arial \", 50))

Su posición grid, su posición fila y letra columna.

etiqueta.grid(column=0, row=0)

Boton, Button

Los botones pueden contener texto o imágenes y se les puede asociar funciones o métodos. Permite realizar , Button, puede contener texto, Text y la acción que queremos que realice command= lo que queremos realizar en caso, de que ción que necesitamos ejecutar cuando se haga click en el botón, e indicar en que lugar va a aprecer grid.

Sintaxis

boton = Button(nombre_ventana , text=\"texto a visualizar\")

boton.grid(column=1, row=0)

Introducucir o visualizar datos: Entry

Permite introducir o visualizar información visualizar información, Entry(nombre_ventanaventana,width=10) y su tamaño Width Lugar donde debe aparcer:

Sintaxis:

Nombre= Entry(ventana,width=10)

Nombre.Grid(txt.grid(column=1, row=0)

Variables de control: StringVar

Son objetos especiales que se asocian a los widgets para almacenar sus valores y su utilización en otras partes del programa. Pueden ser de tipo numérico, de cadena y booleano. En el momento de declararse puede darsele un valor inicial (Variable_valor = StringVar(value=\"Valor inicial\").

Tipo

• entero = IntVar() # Declara variable de tipo entera

• flotante = DoubleVar() # Declara variable de tipo flotante

• cadena = StringVar() # Declara variable de tipo cadena

• booleano = BooleanVar() # Declara variable de tipo booleana

Método

Asignar valor

Set(), asigna un valor a una variable de control. id_art.set(1)

Obtener valor

Get() obtiene el valor que tenga, en un momento dado.

Sintaxis

Variable = StringVar(value=\"Dame tu nombre:")

Codigo_articulo.set(1)

area = StringVar()

Paso 4. Inicializar la ventana

Usamos la función mainloop().

Sintaxis:

ventana.mainloop()

Enunciado

Cálculo del área de un triángulo.

Análisis:

• Crear la ventana, pedir los valores de la base y de la altura (Entry).

• Cuando el usuario teclee el botón calcular, visualizar el área, si los valores introducidos son correctos.

Diagrama

Código crear una ventana

Se crea la ventana

# creamos la ventana  
ventana = Tk() 
# damos título a la ventana
ventana.title("Mi primer Ejercicio")
# la hacemos de dimensiones fijas
ventana.resizable(False, False)
# ancho y alto de la ventana
ventana.geometry("450x250") 
# etiqueta del título del formulario (no de la ventana)
etiqueta_titulo = Label(ventana, text="Calcula el área de un triángulo")
etiqueta_titulo.grid(row=0, column=0, columnspan=2, padx=5, pady=3)
# etiqueta de la entrada de velocidad
etiqueta_altura = Label(ventana, text="Altura")
etiqueta_altura.grid(row=1, column=0, padx=5, pady=3)
# Entry de lectura de la altura
valor_altura = Entry(ventana, width=20)
valor_altura.grid(row=1,column=1)
# inserta valor inicial
valor_altura.insert(0, "0") 
# etiqueta de la entrada de la base
etiqueta_base = Label(ventana, text="Base")
etiqueta_base.grid(row=2, column=0, padx=5, pady=3)
#Pedir la base
valor_base = Entry(ventana, width=20)
valor_base.grid(row=2, column=1)
# inserta valor inicial
valor_base.insert(0,"0") 
notob_calcular = Button(ventana, text="Calcular área", width=20, command=calculoarea)
notob_calcular.grid(row=3, column=0, padx=5, pady=5)

Código realizar cálculos

Se inicializa la variable, para realizar la cálculo area = StringVar() . Cuando el usuario presione clic en el botón boton_calcular = Button(ventana, text="Calcular área", width=20, command=calculoarea). Dibuja la ventana.mainloop()

def calculoarea():  
    try:
        # lee el valor de la altura escrita por el usuario
        altura= valor_altura.get()
        # lee el valor del ángulo escrito por el usuario
        base = valor_base.get() 
        if float(altura)>0 and afloat(base>0):
            # cálcula el área
            calculo_area=float(base)*float(altura)/2
            # escribe el resultado en la eiqueta
            area.set("area: " + str(round(calculo_area,4)))  
        else:
            area.set("Los datos deben ser mayores que cero")
    except:
        area.set("Error al teclear datos")
 # asigna valor a la etiqueta
area = StringVar()
area.set("área: 0")    
calculo_area = Label(ventana, textvariable=area) # asocia etiqueta y variable de control
calculo_area.grid(row=4, column=0, padx=5, pady=5)
ventana.mainloop()

Código Completo

from tkinter import *
def calculoarea():  
    try:
        # lee el valor de la altura escrita por el usuario
        altura= valor_altura.get()
        # lee el valor del ángulo escrito por el usuario
        base = valor_base.get() 
        if float(altura)>0 and float(base)>0:
            # cálcula el área
            calculo_area=float(base)*float(altura)/2
            # escribe el resultado en la eiqueta
            area.set("area: " + str(round(calculo_area,4)))  
        else:
            area.set("Los datos deben ser mayores que cero")
    except:
        area.set("Error al teclear datos")


# creamos la ventana  
ventana = Tk() 
# damos título a la ventana
ventana.title("Mi primer Ejercicio")
# la hacemos de dimensiones fijas
ventana.resizable(False, False)
# ancho y alto de la ventana
ventana.geometry("450x250") 
# etiqueta del título del formulario (no de la ventana)
etiqueta_titulo = Label(ventana, text="Calcula el área de un triángulo")
etiqueta_titulo.grid(row=0, column=0, columnspan=2, padx=5, pady=3)
# etiqueta de la entrada de velocidad
etiqueta_altura = Label(ventana, text="Altura")
etiqueta_altura.grid(row=1, column=0, padx=5, pady=3)
# Entry de lectura de la altura
valor_altura = Entry(ventana, width=20)
valor_altura.grid(row=1,column=1)
# inserta valor inicial
valor_altura.insert(0, "0") 
# etiqueta de la entrada de la base
etiqueta_base = Label(ventana, text="Base")
etiqueta_base.grid(row=2, column=0, padx=5, pady=3)
#Pedir la base
valor_base = Entry(ventana, width=20)
valor_base.grid(row=2, column=1)
# inserta valor inicial
valor_base.insert(0,"0") 
boton_calcular = Button(ventana, text="Calcular área", width=20, command=calculoarea)
boton_calcular.grid(row=3, column=0, padx=5, pady=5)
# variable de control de la etiqueta
area = StringVar()
# asigna valor a la etiqueta
area.set("área: 0")    
calculo_area = Label(ventana, textvariable=area) # asocia etiqueta y variable de control
calculo_area.grid(row=4, column=0, padx=5, pady=5)
ventana.mainloop()