Python clasa a 9-a · Manual Python
Laborator Python
LECȚIE · CAPITOLUL 5

5.3. Organizarea interfeței

Frame, Canvas, pack, grid, place și get

GRUPEAZĂ
→
ORGANIZEAZĂ
→
DESENEAZĂ
→
CITEȘTE
01
OBIECTIVE

La finalul lecției vei putea...

01

Grupezi componente

Folosești Frame pentru împărțirea interfeței în zone logice.

02

Desenezi

Folosești Canvas pentru linii și forme simple.

03

Organizezi

Utilizezi pack(), grid() și place() și compari situațiile potrivite.

04

Citești date

Folosești Entry.get() și valoarea citită într-o acțiune.

✓
Checkpoint

Care metodă organizează componentele în rânduri și coloane?

02
EXPLICAȚIE

Organizarea componentelor

Pe măsură ce o interfață devine mai complexă, așezarea succesivă cu pack() nu mai oferă întotdeauna controlul necesar. Tkinter prezintă trei metode principale de organizare: pack, grid și place.

Frame – organizarea pe zone

Frame este un container. El poate conține alte widgeturi și permite împărțirea ferestrei în zone logice.

Canvas – suprafață pentru desen

Canvas este o suprafață pe care putem desena elemente simple. Coordonatele sunt măsurate, în mod obișnuit, în pixeli, cu originea în stânga-sus.

pack(), grid() și place()

pack()

Așezare simplă, potrivită pentru componente dispuse succesiv.

grid()

Așezare în rânduri și coloane.

place()

Poziționează componentele folosind coordonate. Este util când poziția explicită este importantă, dar schimbarea dimensiunii ferestrei poate afecta aspectul.

✓
Checkpoint

De la ce valoare încep indicii row și column?

03
EXEMPLU INTUITIV

Organizăm o interfață ca pe un formular

Un formular are, de obicei, etichete și câmpuri aliniate. grid() este potrivit pentru această situație deoarece lucrează cu rânduri și coloane. Frame ne permite să separăm zona de date de zona de acțiuni.

Alege metoda potrivită

Urmărește perechea Entry–get()

Valoarea nu a fost citită încă.

04
PYTHON

Frame, Canvas, grid() și get()

Formular cu grid()

def afiseaza():
    nume = camp_nume.get()
    print("Nume:", nume)

tk.Label(root, text="Nume:").grid(row=0, column=0)
camp_nume = tk.Entry(root)
camp_nume.grid(row=0, column=1)
tk.Button(root, text="Afișează", command=afiseaza).grid(row=1, column=0, columnspan=2)
root.mainloop()

Frame

zona = tk.Frame(root)
zona.pack()
tk.Label(zona, text="Nume").pack()
tk.Entry(zona).pack()

Canvas

canvas = tk.Canvas(root, width=400, height=200)
canvas.pack()
canvas.create_line(20, 20, 380, 20)
canvas.create_rectangle(80, 60, 220, 150)
canvas.create_oval(250, 60, 360, 150)

Argumentele padx și pady adaugă spațiu în jurul widgeturilor, iar columnspan=2 permite unui buton să ocupe două coloane.

05
ALGORITM / PSEUDOCOD

Modelul unui formular

ALGORITM Formular
    importă Tkinter
    creează fereastra
    creează un Frame pentru date
    în Frame creează Label și Entry
    creează funcția de prelucrare
    citește textul din Entry cu get
    prelucrează sau afișează valoarea
    creează Button și îl asociază funcției
    așază componentele
    pornește bucla principală
SFÂRȘIT ALGORITM

Construiește ordinea

Apasă pașii în ordinea potrivită pentru un formular.

06
ATENȚIE!

Capcane de organizare

row și column

Numerotarea începe de la 0.

Nu combina metodele la întâmplare

Nu combina, în mod obișnuit, pack() și grid() pentru copiii direcți ai aceluiași container.

get() citește Entry

Metoda returnează textul introdus în câmpul curent.

Frame este container

El grupează componentele și permite organizarea separată a unei zone.

07
EXEMPLU REZOLVAT

Date elev

Problemă

Realizează formularul „Date elev” cu câmpurile Nume și Clasă. La apăsarea butonului „Afișează”, programul trebuie să afișeze în consolă valorile introduse.

Ideea de rezolvare

Folosim grid() pentru două rânduri. Păstrăm cele două Entry în variabile, iar funcția asociată butonului citește valorile cu get().

Analiză

Intrare: textele introduse în cele două Entry. Acțiune: apăsarea butonului. Ieșire: valorile afișate în consolă.

Algoritm/pseudocod

creează fereastra
creează două Label și două Entry
așază-le cu grid
definește funcția de afișare
    citește valorile cu get
    afișează valorile
creează Button și asociază funcția
pornește bucla principală

Python

import tkinter as tk

def afiseaza():
    nume = camp_nume.get()
    clasa = camp_clasa.get()
    print("Nume:", nume)
    print("Clasă:", clasa)

root = tk.Tk()
root.title("Date elev")
root.geometry("420x220")

tk.Label(root, text="Nume:").grid(row=0, column=0, padx=5, pady=5)
camp_nume = tk.Entry(root)
camp_nume.grid(row=0, column=1, padx=5, pady=5)

tk.Label(root, text="Clasă:").grid(row=1, column=0, padx=5, pady=5)
camp_clasa = tk.Entry(root)
camp_clasa.grid(row=1, column=1, padx=5, pady=5)

tk.Button(root, text="Afișează", command=afiseaza).grid(row=2, column=0, columnspan=2, pady=10)
root.mainloop()

Urmărirea variabilelor

Acțiunecamp_numecamp_clasaRezultat
La porniregolgolNu s-a apăsat butonul.
Se introduce AnaAnagolget() va returna „Ana”.
Se introduce 9AAna9Aget() va returna „9A”.
Se apasă AfișeazăAna9AÎn consolă apar cele două valori.

Testare

TestDateRezultat așteptat
Caz normalAna / 9ASe afișează Ana și 9A.
Câmpuri goale— / —Se afișează șiruri vide; nu apare eroare din cauza lui get().
Valori cu spațiiAna Maria / 9ATextul introdus este returnat ca atare.
Caz particular9A / AnaValorile sunt afișate în câmpurile corespunzătoare.
Justificarea soluției: get() citește conținutul curent al fiecărui Entry, iar funcția este executată numai la apăsarea butonului.
08
EXERCIȚII DE BAZĂ

Aplică direct

  1. Construiește un formular cu două câmpuri: Prenume și Oraș.
  2. Creează un formular cu trei rânduri folosind grid().
  3. Realizează un Frame care conține două Label și două Entry.
  4. Creează un Canvas și desenează o linie, un dreptunghi și un oval.
  5. Folosește get() pentru a afișa în consolă textul dintr-un Entry.
09
EXERCIȚII DE APROFUNDARE

Combină metodele

  1. Realizează un formular cu patru câmpuri și un buton care afișează toate valorile.
  2. Construiește aceeași interfață în două variante: una cu pack() și una cu grid(). Compară aspectul.
  3. Creează două Frame-uri, fiecare organizat separat, și explică de ce poți folosi metode diferite în containere diferite.
  4. Desenează pe Canvas o figură geometrică formată din cel puțin trei forme.
  5. Realizează un formular în care un câmp gol este identificat după citirea cu get() și este afișat un mesaj de avertizare.
10
VERIFICARE

Quiz final

1. Ce rol are Frame?

2. Pentru ce folosim Canvas?

3. Ce metodă organizează componentele în rânduri și coloane?

4. De la ce valori încep, în mod obișnuit, row și column?

5. Ce returnează camp_nume.get() pentru un Entry în care utilizatorul a scris Ana?

6. Ce combinație nu este recomandată pentru copiii direcți ai aceluiași container?

11
MINI-PROIECT

Formularul „Profil de elev”

MISIUNE

Formularul „Profil de elev”

Construiește o interfață cu un Frame pentru date și un Frame pentru acțiuni. Formularul trebuie să conțină cel puțin trei Entry, etichetele lor, un buton „Afișează” și un buton „Curăță”. Folosește grid() pentru formular și o metodă de organizare adecvată pentru zona de butoane. La apăsarea „Afișează”, citește valorile prin get() și afișează-le în consolă.

Cerințe

Frame pentru date01
Frame pentru acțiuni02
minimum 3 Entry03
grid() + organizare logică04
get() la Afișează05

Ai terminat lecția?

Verifică organizarea pe zone și faptul că valorile sunt citite numai prin acțiunea asociată butonului.