# 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.`geometr`y(\\"`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 = `StringVa`r() # 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`

```python
# 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`()

```python
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

```python
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()
```