Aplikacja okienkowa: Layouty i Widgety

workshop: #lesson-6.html

Warsztat: 5

Przygotowanie

Dla systemu Linux zainstaluj pakiet python3-tk odpowiadający za renderowanie UI
W katalogu domowym przygotuj katalog AD, a w nim mod5
Stwórz pliki aplikacji z rozszerzeniem py do wskazanych zadań
Wprowadź tymczasowe modyfikacje kodu we wskazanych zadaniach i porównaj efekt

5.1 Stworzenie głównego okna

Aby renderowanie Widgetów TK było możliwe należy zaimportować z pakietu tkinter wszystkie klasy Widgetów do skryptu aplikacji. Klasy w Pythonie instancjonowane są BEZ słówka kluczowego new. Osoby, które kodowały i modyfikowały system Linux powinny być zaznajomione ze słówkiem geometry, które oznacza rozmiar (często również pozycję) wskazanego elementu. W tym przypadku jest to rozmiar okna podany jako ciąg znakowy String dla właściwości szerokości i wysokości odpowiednio.

from tkinter import * win = Tk() win.title("My First PyApp") win.geometry("640x240") lbl1 = Label(win, text="Jestem etykietą") lbl1.pack() lbl2 = Label(win, text="Ten poniżej to Entry") lbl2.pack() ent1 = Entry(win) ent1.pack() Button(win, text="Jestem przyciskiem").pack() mainloop()

W przeciwieństwie do aplikacji pisanych w innych językach, gdzie składowe programu należało umieścić w metodzie main (Java, C) we frameworku TK Pythona jako ciało pętli jest traktowany cały kod do metody pętli mainloop()

5.2 Managery układów wyświetlania

We frameworku TK możemy wyróżnić trzy sposoby (metody) układania elementów:

pack( side=?, expand=?, fill=? ) - upakowuje kontrolki jedna po drugiej w domyślne lub wskazane miejsce (LEFT, TOP, RIGHT, BOTTOM) Okna lub Ramki. W tym miejscy należy zaznaczyć podobieństwo do BorderLayout z Javy jedynie z pominięciem nieistniejącej w Pythonie przestrzeni CENTER.
place( x=?, y=? ) - pozwala rozlokować wskazaną kontrolkę we wskazanej pozycji x,y co jest synonimem pozycjonowania absolutnego.
grid( row=?, column=? ) - tworzy siatkę o rozmiarze najwyższej wartości wiersza i kolumny oraz umieszcza kontrolkę w podanej komórce siatki. Komórki siatki posiadają możliwość łączenia się z sąsiednimi komórkami dzięki atrybutom: columnspan oraz rowspan. Za rozmieszczenie kontrolek komórki lub treści w komórce służą atrybuty: stricky oraz anchor

Powyższe metody: pack(), place() oraz grid() można wywołać a) na zmiennej referencyjnej kontrolki lub b) zaraz za samą kontrolką co przedstawia kod:

lbl1 = Label(box, text="Etykieta") lbl1.pack()
Label(box, text="Etykieta").pack()

5.3 Podstawowy układ wyświetlania

from tkinter import * win = Tk() win.title("MyFirst PyPayout") win.geometry("640x480") top = Frame(win, height=200, background="yellow") top.pack(side=TOP, expand=False, fill=BOTH) left = Frame(win, height=500, width=200, background='red') left.pack(side=LEFT, expand=False, fill=BOTH) right = Frame(win, height=500, width=200, background='green') right.pack(side=RIGHT, expand=False, fill=BOTH) btm = Frame(win, height=200, background='blue') # tutaj wstaw kod z zadania 5.5 btm.pack(side=BOTTOM, expand=False, fill=BOTH) Label(win, text="Jestem wolnym elektronem").place(x=13, y=13, height="64") mainloop()

Układ wyświetlania kontrolek z listingu 5.3 — 5.4 Kolejność wyświetlania Widgetów

5.5 Siatka wyświetlania

grd = Frame(btm, background="white") Button(grd, text="1").grid(row="1", column="1") Button(grd, text="2").grid(row="1", column="2") Button(grd, text="3").grid(row="1", column="3") Button(grd, text="4").grid(row="2", column="1") Button(grd, text="5").grid(row="2", column="2") Button(grd, text="6").grid(row="2", column="3") Button(grd, text="7").grid(row="3", column="1") Button(grd, text="8").grid(row="3", column="2") Button(grd, text="9").grid(row="3", column="3") grd.pack()

Zasoby lekcji

Przygotowanie