diff --git a/gui.md b/gui.md index 0ec9ff92a8527d84bf8fcabb7f6ec566789a6e16..92be33c9aab2362e10a78e46b4603f826e6e4ada 100644 --- a/gui.md +++ b/gui.md @@ -72,7 +72,11 @@ result_listbox.bind('<Double-Button-1>', edit_person) # Widgets -Knapper, tekstfelter etc +* Knapper (Button) +* Tekstfelter (Entry) +* Ledetekst (Label) En Label inneholder vanligvis en ledetekst og brukes gjerne foran et tekstfelt (Entry). En *Label* kan imidlertid ogsp inneholde et bilde (dette gjøres i eksempelapplikasjonen) +* Menyer. En meny (Menu) kan inneholde flere meny-elementer med en kommando for hvert element. +* Lister (Listbox) # StringVar @@ -80,6 +84,14 @@ bla bla # Grid +Widget'ene vi lager må *plasseres* i et vindu. Dette kan gjøres på flere måter, men vi skal bruke et rutenett. Hvis dere kan bruke `table`i html vil dere kjenne igjen prinsippet. + +Et element får en plassering med *column* og *row*, og så spesifiserer vi eventuelt hvor mange kolonner (*columnspan*) og hvor mange rader (*rowspan*) elementet skal spenne over. + +I tillegg kan vi legge til *luft* mellom elementene med *padx* og *pady*. + +I følgende eksempel plasserer vi en ledetekst og et tekstfelt i hver sin rute, og en knapp i raden under som spenner over **to** kolonner + ```python from tkinter import * @@ -103,7 +115,7 @@ knapp = Button(root, text="Søk", command=vis_tekst) # Plasserer widget'ene i vinduet i et rutenett (grid) på 2x2 ruter ledetekst.grid(column=0, row=0) tekstfelt.grid(column=1, row=0) -knapp.grid(column=0, row=1, columnspan=2) +knapp.grid(column=0, row=1, columnspan=2) # Knappen skal gå over to kolonner # Starter GUI'et root.mainloop() @@ -113,11 +125,21 @@ root.mainloop()  +I tillegg kan vi si at det skal være 10 piksler foran og etter ledeteksten og 3 piksler over og under både ledeteksten og tekstfeltet: + +```python +ledetekst.grid(column=0, row=0, padx=10, pady=3) +tekstfelt.grid(column=1, row=0, pady=3) +knapp.grid(column=0, row=1, columnspan=2) # Knappen skal gå over to kolonner +``` + + + # Eksempelapplikasjon Applikasjonen ligger på GitHub: [https://github.com/nilstes/simple-python-gui-app](https://github.com/nilstes/simple-python-gui-app). Dette er et vanlig sted å lagre kildekode på, og er et nyttig verktøy å bruke for å dele kildekode i et prosjekt. -Dere kan laste ned koden ved å velge den grønne knappen til høyre med teksten "Clone or download", og deretter "Download ZIP". Pakk så ut zip-filen på maskinen din og åpne kodefilene fra Thonny. +Dere kan laste ned koden ved å velge den grønne knappen til høyre med teksten "Clone or download", og deretter "Download ZIP". Pakk så ut zip-filen på maskinen din og åpne kodefilene fra Thonny. Det kan være lurt å legge disse 4 kodefilene i en egen prosjekt-mappe på datamaskinen din for at det skal bli enklere å finne dem. Det vil det være lurt å gjøre for deres eget prosjekt også. Dere kan kjøre applikasjonen ved å ha *person_main.py* fremme i Thonny og så trykke på start-knappen. Men før dere kjører må dere gjøre følgende: * Opprette databasen fra [https://mysql.stud.iie.ntnu.no](https://mysql.stud.iie.ntnu.no). SQL-skriptet for dette ligger på GitHub-siden. Databasetabellen er en utvidelse av den vi brukte i forrige leksjon så dere må sannsynligvis slette den gamle tabellen først. Dette gjør dere med SQL-skriptet: @@ -135,8 +157,6 @@ Applikasjonen har 4 kodefiler. Kort oppsummert gjør de føløgende: * *person_db.py*: Denne filen inneholder all databasefunksjonalitet i applikasjonen. Her finner vi funksjoner for å søke på personer, for å oppdatere, opprette og slette personer, og for å finne statistikk om personer. * *person_statistics.py*: Denne filen har to funksjoner for å lage stolpediagrammer. Her brukes bibliotekene *matplotlib* og *numpy*. - - # Oppgaver Oppgave denne uke blir å eksperimentere med eksempelapplikasjonen.