3. diel - Aplikácia Kalkulačka v tkinter - Tvoríme GUI

V predchádzajúcej lekcii, Aplikácia Kalkulačka v tkinter - MVC model , sme si rozplánovali kalkulačku na základe knižnice tkinter pomocou MVC a zostavili sme si triedy pre jednotlivé komponenty.

V nasledujúcom tutoriále GUI aplikácií v Pythone si pomocou knižnice tkinter začneme tvoriť grafické užívateľské rozhranie aplikácie Kalkulačka. Vytvoríme k nej zodpovedajúci View (podľa architektúry MVC), v ktorom sa začne odohrávať modelovanie aplikácie.

Aplikácia Kalkulačka - View

Teraz, keď máme mozog kalkulačky hotový, je na čase sa pustiť do vizualizácie aplikácie a tvorby GUI. Zoznámime sa s widgetmi ako je Button a Entry. Taktiež si povieme, ako ich následne umiestniť a zobraziť v aplikácii. Vysvetlíme si, ako viazať nami nadefinovanú funkciu s Button objektom.

Vytvorenie triedy CalculatorView

Poďme si vytvoriť poslednú triedu, ktorú na náš projekt potrebujeme! Postup už poznáme, v priečinku Kalkulacka/ vytvoríme súbor calculatorview.py. V ňom si založíme triedu CalculatorView. Trieda bude slúžiť na zobrazenie používateľského rozhrania kalkulačky. V konštruktore triedy vytvoríme potrebné widgety (Entry pre zobrazenie výrazu a tlačidla pre zadávanie čísel a operácií) a prepojíme ich so zodpovedajúcimi metódami v Controlleri.

V triede nadefinujeme konštruktor __init__, ktorá prijíma hlavné okno aplikácie (root) a inštanciu CalculatorController (controller) ako parametre:

class CalculatorView:
    def __init__(self, root, controller):
        self.controller = controller

Základy máme položené, poďme sa teda vrhnúť na vytváranie jednotlivých tkinter widgetov.

Vstupný widget Entry

V konštruktore triedy CalculatorView vytvárame vstupný widget Entry pomocou tk.Entry(root). Tento widget slúži na zobrazenie aktuálneho výrazu. Do widgetu Entry vložíme parametre width a font. Pomocou parametra width nakonfigurujeme šírku. Priradíme jej hodnotu 20.

Knižnica tkinter nemá metódu height(), ktorá by zmenila výšku vstupného poľa.

Aby sme nastavili výšku, použijeme parameter font. Ide o tuple vyžadujúce dva povinné argumenty:

• názov fontu,
• veľkosť písma,
• voliteľne je možné pridať štýl písania a navoliť tučný text, či kurzívu.

My si vyberieme font Arial o veľkosti 14. Náš kód vyzerá takto:

self.entry = tk.Entry(root, width=20, font=("Arial", 14))

Pozíciovanie widgetov

Aby sme mohli naše widgety vyobraziť na obrazovke, je nutné im definovať layout. K tomu nám dopomôže už známa metóda grid(). Za použitia tejto metódy rozložíme widgety v mriežke (riadkoch a stĺpcoch). Pomocou parametrov row a column určíme pozíciu widgetu. Sme schopní taktiež nastaviť ďalšie parametre, ako je sticky (určuje, ako sa widget prispôsobuje v bunke) a padx a pady (medzeru medzi widgetmi):

self.entry.grid(row=0, column=0, columnspan=5, padx=10, pady=10)

Columnspan vyjadruje, cez koľko stĺpcov sa widget môže roztiahnuť. Padx a pady zase vzdialenosť od iných widgetov.

Tlačidlá

Vytvoríme zoznam buttons, ktorý bude obsahovať konfigurácie jednotlivých tlačidiel kalkulačky. Každá konfigurácia je dictionary (slovník) obsahujúci text tlačidla a jeho umiestnenie na mriežke (riadok a stĺpec). Vybrané tlačidlá majú tiež definovanú farbu pozadia (bg):

buttons = [
            {"text": "7", "row": 1, "col": 0},
            {"text": "8", "row": 1, "col": 1},
            {"text": "9", "row": 1, "col": 2},
            {"text": "/", "row": 1, "col": 3},
            {"text": "4", "row": 2, "col": 0},
            {"text": "5", "row": 2, "col": 1},
            {"text": "6", "row": 2, "col": 2},
            {"text": "*", "row": 2, "col": 3},
            {"text": "1", "row": 3, "col": 0},
            {"text": "2", "row": 3, "col": 1},
            {"text": "3", "row": 3, "col": 2},
            {"text": "-", "row": 3, "col": 3},
            {"text": "0", "row": 4, "col": 0},
            {"text": ".", "row": 4, "col": 1},
            {"text": "=", "row": 4, "col": 2},
            {"text": "+", "row": 4, "col": 3},
            {"text": "C", "row": 1, "col": 4, "bg": "#FF9500"},
            {"text": "AC", "row": 2, "col": 4, "bg": "#FF3B30"}
        ]

Usadenie tlačidiel na obrazovku

Vkladať na obrazovku tlačidla postupne by bolo zdĺhavé, že? Uľahčíme si prácu cyklom for. V tom prechádzame všetky tlačidlá v zozname buttons. Pre každé tlačidlo vytvárame widget Button pomocou tk.Button(). Tlačidlu nadefinujeme šírku 5, výšku 2 a písmo Arial s veľkosťou 12. Widget je umiestnený na danom riadku a stĺpci. Nastavíme tiež vnútorné odsadenie pomocou padx a pady:

for button in buttons:
    btn = tk.Button(root, text=button["text"], width=5, height=2, font=("Arial", 12))
    btn.grid(row=button["row"], column=button["col"], padx=5, pady=5)

Čo ak budeme chcieť zmeniť farbu nejakých tlačidiel? Zmeňme tlačidlá s menovkami C a AC. Tým nastavme hodnotu #FF9500 pre C a #FF3B30 pre AC pomocou parametra bg.

Hodnoty objektu je možné meniť pomocou metód config() alebo configure(). Nastavme teda zároveň hodnotu fg na "white" (Zmení farbu popredia - textu). Text tak na farbe lepšie vynikne. Na zakomponovanie do kódu využijeme blok if, ktorý vykoná operáciu len, keď zaznamená patričný vstup:

if "bg" in button:
    btn.configure(bg=button["bg"], fg="white")

Binding

Založíme udalosť Button-1 pomocou btn.bind(). Tým zaisťujeme, že pri kliknutí na tlačidlo sa spustí metóda handle_button_click() (nastavuje sa pre každé tlačidlo):

btn.bind("<Button-1>", self.handle_button_click)

Metóda handle_button_click()

Nakoniec si poďme zostaviť metódu, ktorá bude zavolaná pri kliknutí na ľubovoľné tlačidlo:

def handle_button_click(self, event):
    value = event.widget.cget("text")
    if value == "C":
        self.controller.clear_input()
    elif value == "AC":
        self.controller.clear_all()
    else:
        self.controller.process_input(value)

Metóda funguje nasledovne:

• event.widget.cget("text") vkladá do premennej value hodnotu textu tlačidla,
• if blok rozdelí vstup na hodnotu C, hodnotu AC a ostatné. V prvom scenári zavoláme metódu clear_input(). V druhom potom clear_all(). V prípade, že používateľ stlačí akékoľvek iné tlačidlo, zavoláme metódu process_input() v Controlleri s odovzdanou hodnotou tlačidla. Týmto zaisťujeme správnu interakciu medzi Controllerom a View.

Trieda CalculatorView teda slúži na vytvorenie grafického užívateľského rozhrania kalkulačky pomocou Tkinter. Tlačidlám priraďuje metódy, ktoré odovzdávajú užívateľský vstup príslušnému Controlleru pre spracovanie. Tým je zaistená oddelenosť logiky aplikácie od jej grafického rozhrania.

Zostáva nám už len všetko poskladať dohromady. To si ale necháme nabudúce. Pre dnešok sme odviedli krásny kus práce!

V ďalšej lekcii, Aplikácia Kalkulačka v tkinter - Dokončenie , si vytvoríme hlavné okno aplikácie a inštancie modelu, pohľadu a kontroléra, ktoré predstavujú rôzne časti kalkulačky. Prepojíme ich a využijeme metódu mainloop() na udržiavanie otvoreného okna aplikácie.