Omet navegació

MD11 La meva primera interfície gràfica

 

❓Avorrit/da d'interactuar sempre amb la terminal?

Arribem ja al final i ho fem descobrint les bondats de tkinter, una llibreria molt especial que farà possible crear interfícies gràfiques per a les nostres aplicacions. Vegem, mitjançant un senzill exemple, com funciona i quines són les seves possibilitats en un nivell inicial.

👉️Exemple 1: provem Tkinter per a dissenyar una interfície buida amb títol i una mida determinada.

# Importació de mòduls i creació d'àlies
import tkinter as tk

# Disseny de la nostra interfície gràfica

# Invocam a la funció de creació d'una interfície
aplicacio = tk.Tk()

# Títol per a la finestra de l'aplicació
aplicacio.title("El meu primer programa") 

# Establim una grandària de pantalla de 400 x 300 px
aplicacio.geometry("400x300") 

# Aquest comandament inicia el bucle principal
# de la interfície gràfica.
aplicacio.mainloop() 

Resultat:

Resultat exemple 1

❓Afegim ara text i caselles?

Una part important és la que es descriurà a continuació. Per poder fer visibles els elements, després de crear-los, haurem d'emprar l'opció .pack, empaquetar-los per veure'ls en pantalla.

👉️Exemple 2: introduïm elements o widgets al nostre programa.

# Importació de mòduls i creació d'àlies
import tkinter as tk

# Disseny de la nostra interfície gràfica
aplicacio = tk.Tk() 
aplicacio.title("El meu primer programa") 
aplicacio.geometry("400x300")

etiqueta1 = tk.Label(text="Etiqueta de text") # Etiqueta de text
entrada1 = tk.Entry() #Quadre d'entrada de valors

etiqueta1.pack() # Empaquetat del primer element
entrada1.pack() # Empaquetat del segon element

aplicacio.mainloop()

Resultat:

Resultat exemple 2

❓️ Provem de fer la nostra primera aplicació?

👉️Exemple 5: després d'analitzar els exemples anteriors, veurem què necessitam per dissenyar la nostra calculadora per realitzar sumes de manera més atractiva.

# Importació de mòduls i creació d'àlies
import tkinter as tk

# Funció principal
def sumar():
    num1 = int(entrada_num1.get())
    num2 = int(entrada_num2.get())
    resultat = num1 + num2
    etiqueta_resultat.config(text="Resultat: " + str(resultat))

# Creació de la interfície gràfica
aplicacio = tk.Tk()
aplicacio.title("Calculadora")
aplicacio.geometry("400x200")

## Creació dels elements o widgets que conformaran l'aplicació
etiqueta_num1 = tk.Label(text="Primer número:")
entrada_num1 = tk.Entry()

etiqueta_num2 = tk.Label(text="Segon número:")
entrada_num2 = tk.Entry()

etiqueta_resultat = tk.Label(text="--")

boto_sumar = tk.Button(text="Suma", command=sumar)

## Empaquetat de tots els elements per a que siguin visibles en pantalla
etiqueta_num1.pack()
entrada_num1.pack()
etiqueta_num2.pack()
entrada_num2.pack()
etiqueta_resultat.pack()
boto_sumar.pack()

aplicacio.mainloop()

Resultat:
Resultat exemple 5

Solució

CEP IBSTEAM. Solució amb CodeHS (CC BY-SA)



Creat amb eXeLearning (Finestra nova)