Skip to content
Snippets Groups Projects
Commit 88255d9a authored by Nils Tesdal's avatar Nils Tesdal
Browse files

Update gui.md

parent 45aebf34
No related branches found
No related tags found
No related merge requests found
...@@ -72,7 +72,11 @@ result_listbox.bind('<Double-Button-1>', edit_person) ...@@ -72,7 +72,11 @@ result_listbox.bind('<Double-Button-1>', edit_person)
# Widgets # 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 # StringVar
...@@ -80,6 +84,14 @@ bla bla ...@@ -80,6 +84,14 @@ bla bla
# Grid # 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 ```python
from tkinter import * from tkinter import *
...@@ -103,7 +115,7 @@ knapp = Button(root, text="Søk", command=vis_tekst) ...@@ -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 # Plasserer widget'ene i vinduet i et rutenett (grid) på 2x2 ruter
ledetekst.grid(column=0, row=0) ledetekst.grid(column=0, row=0)
tekstfelt.grid(column=1, 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 # Starter GUI'et
root.mainloop() root.mainloop()
...@@ -113,11 +125,21 @@ root.mainloop() ...@@ -113,11 +125,21 @@ root.mainloop()
![](images/Tkinter2.png) ![](images/Tkinter2.png)
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
```
![](images/Tkinter3.png)
# Eksempelapplikasjon # 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. 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: 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: * 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: ...@@ -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_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*. * *person_statistics.py*: Denne filen har to funksjoner for å lage stolpediagrammer. Her brukes bibliotekene *matplotlib* og *numpy*.
# Oppgaver # Oppgaver
Oppgave denne uke blir å eksperimentere med eksempelapplikasjonen. Oppgave denne uke blir å eksperimentere med eksempelapplikasjonen.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment