4. diel - PRIPOMIENKOVÉ narodenín v PyQt - Dokončenie návrhu formulárov

V minulej lekcii, PRIPOMIENKOVÉ narodenín v PyQt - Návrh formulárov , sme rozpracovali návrh prvého z formulárov aplikácie v PyQt pre upomínania narodenín osôb. Dnes obaja formuláre dokončíme, aby sme mali vzhľad aplikácie pripravený a mohli sa ďalej venovať už len programovanie.

Tlačidlá a ikonky

Do formulára PrehledForm pridáme 2 tlačidlá. Jedno bude pridávať osoby a to druhé je odstraňovať. Obe tlačidlá budú mať ikonky, ktoré si môžete opäť buď stiahnuť na https://www.iconfinder.com/ alebo v archíve so zdrojovým kódom na konci článku.

Asi vás neprekvapí, že tlačidlá vložíme do QHBoxLayout, aby sa poskladala vedľa seba. Štruktúra aktuálne pridávané časti formulára vyzerá nasledovne:

• QHBoxLayout
  • QPushButton
  • QPushButton

Je to tá časť znázornená na obrázku nižšie červeno:

Do metódy __init__() triedy PrehledForm pridáme nasledujúci kód nad volanie self.show():

# Původní kód metody
# ...

# Přidávání tlačítek
self.tlacitkaLayout = QtWidgets.QHBoxLayout()
self.pridatButton = QtWidgets.QPushButton("Přidat")
self.pridatButton.setMinimumHeight(50)
self.pridatButton.setIcon(QtGui.QIcon("pridej.png"))
self.pridatButton.setIconSize(QtCore.QSize(32,32))
self.odebratButton = QtWidgets.QPushButton("Odebrat")
self.odebratButton.setMinimumHeight(50)
self.odebratButton.setIcon(QtGui.QIcon("odeber.png"))
self.odebratButton.setIconSize(QtCore.QSize(32,32))
self.tlacitkaLayout.addWidget(self.pridatButton)
self.tlacitkaLayout.addWidget(self.odebratButton)
layoutFormulare.addLayout(self.tlacitkaLayout)

self.show()

Na kódu tlačidiel nie je nič zložité, všimnite si len nastavenie výšky tlačidiel a veľkosti ikoniek. Teraz je náš formulár PrehledForm hotový. Vrhnite sa na formulár OsobaForm, ktorý má len niekoľko riadkov.

Pripájací formulár

Druhý formulár bude slúžiť na pridávanie nových osôb a má túto podobu:

Do formulára postupne vložíme tieto ovládacie prvky:

• 2x QLabel - Popisky
• 1x QLabel (Obrázok) - Tentoraz Label využijeme aj na obrázok
• 1x QLineEdit - Zadanie mena osoby
• 3x QComboBox (Dátum) - Zadanie dátumu narodenia osoby realizujeme cez ComboBox na deň, mesiac a rok
• 1x QPushButton - Tlačidlo pre potvrdenie

Štruktúra layoutov

Štruktúra formulára vrátane layoutov bude nasledujúci:

• QVBoxLayout
  • QHBoxLayout
    • Label (Obrázok)
  • QFormLayout
    • Row - QLabel
      • QLineEdit
    • Row - QLabel
      • QComboBox
      • QComboBox
      • QComboBox
    • Row - QPushButton

Že do labelu môžeme vložiť obrázok vás možno prekvapilo, ale nie je to nič zložité. Čo by ale určite stálo za zmienku je nový typ layoutu - QFormLayout. Ten nám uľahčí písanie v prípade, keď chceme niekam vložiť formulár, ktorý sa skladá z 2 stĺpcov. Prvý stĺpec obsahuje popisky (QLabel y) a druhý stĺpec príslušné editačné prvky. Iste si dokážete predstaviť, že vkladať popisok a editačné prvok vždy spolu s novým QHBoxLayout em by bolo zbytočne pracné

Vytvorenie widgetov

Keďže už tušíme ako layouty a widgety fungujú, ukážme si rovno kompletnú kód pre vytvorenie formulára:

# Formulář pro vytvoření nové osoby
class OsobaForm(QtWidgets.QWidget):

    def __init__(self, **kwargs):
        super(OsobaForm, self).__init__(**kwargs)

        # Titulek a ikonka
        self.setWindowTitle("Přidat osobu")
        self.setWindowIcon(QtGui.QIcon("person_bg.png"))
        layoutFormulare = QtWidgets.QVBoxLayout()
        self.setLayout(layoutFormulare)

        # Layout s obrázkem
        self.obrazekLabel = QtWidgets.QLabel()
        self.obrazekLabel.setPixmap(QtGui.QPixmap("person_bg.png").scaledToWidth(150))
        obrazekLayout = QtWidgets.QHBoxLayout()
        obrazekLayout.addStretch()
        obrazekLayout.addWidget(self.obrazekLabel)
        obrazekLayout.addStretch()
        layoutFormulare.addLayout(obrazekLayout)

        # Layout se jménem
        self.udajeLayout = QtWidgets.QFormLayout()
        self.jmenoTextBox = QtWidgets.QLineEdit()
        # Přidáme řádek
        self.udajeLayout.addRow(QtWidgets.QLabel("Jméno"), self.jmenoTextBox)

        # Layout pro výběr data
        datumLayout = QtWidgets.QHBoxLayout()
        self.den = QtWidgets.QComboBox()
        self.den.addItem("Den")
        datumLayout.addWidget(self.den)
        self.mesic = QtWidgets.QComboBox()
        self.mesic.addItem("Měsíc")
        datumLayout.addWidget(self.mesic)
        self.rok = QtWidgets.QComboBox()
        self.rok.addItem("Rok")
        datumLayout.addWidget(self.rok)

        # Přidáme řádek
        self.udajeLayout.addRow(QtWidgets.QLabel("Datum narození"), datumLayout)
        self.okButton = QtWidgets.QPushButton("Ok")
        self.udajeLayout.addRow(None,self.okButton)

        layoutFormulare.addLayout(self.udajeLayout)

    def setup(self):
        pass

Trieda OsobaForm už nededia z QtWidgets.QMainWindow, ale iba z QtWidgets.QWidget. To preto, že sa jedná o pomocný formulár, ktorý nie je hlavným oknom aplikácie. Na začiatku konstruktoru nastavujeme opäť titulok, ikonku a layout. Ten je rovnako ako u prvého formulára zvislý, aby sa ďalšie layouty vkladali pod seba.

Nasleduje pridanie obrázku, ktorý nemá žiadny praktický význam, ale aplikácia s ním vyzerá pre užívateľov prívetivejšie. Labelu obrázok nastavíme pomocou metódy setPixmap(), a následne mu nastavíme šírku pomocou scaledToWidth(). Aby sa ikonka vycentroval, vložíme ju do QHBoxLayout a okolo nej pridáme voľné miesto pomocou addStretch().

Ďalej tvoríme QFormLayout, ktorý metódou addRow() umožňuje jednoducho vložiť popisek a editačné prvok vedľa seba, bez toho aby sme ich museli vkladať do ďalších layoutov. Výber dátumu narodenia vykonáme pomocou 3 QComboBox ov, prvého na dni, druhého na mesiace a tretieho na roky. Asi vás neprekvapí, že je vkladáme vedľa seba do QHBoxLayout a celý layout následne vložíme ako ďalší riadok nášho QFormLayout pomocou metódy addRow().

Nakoniec vytvoríme tlačidlo a takisto ho vložíme do QFormLayout, tentoraz bez popisku. Layout s údajmi o osobe pridáme do layoutu formulára a formulármi ešte nastavíme rozmery podľa jeho obsahu. K rozmerom jednotlivých widgetov sa dostaneme pomocou metódy sizeHint(), na ktorej návratové hodnote môžeme následne volať metódy width() a height().

Vygenerovanie dní, mesiacov a rokov

Do pripravených QComboBox ov si vygenerujte 31 dní, 12 mesiacov a posledných 190 rokov. Vďaka funkcii range(), ktorú iste v Pythone poznáte, to bude hračka. Na vygenerovanie hodnôt si vytvoríme v triede OsobaForm novú metódu napln_datum_boxy():

def napln_datum_boxy(self):
    rok = int(datetime.datetime.now().year)
    for i in range(1, 32):
        self.den.addItem(str(i))
    for i in range(1, 13):
        self.mesic.addItem(str(i))
    for i in range(rok, rok - 190, -1):
        self.rok.addItem(str(i))

Metódu zavoláme v __init__() po vytvorení combobox:

# Kód výše
# ...
datumLayout.addWidget(self.rok)
self.napln_datum_boxy()

# další kód metody
# ...

Udalosť tlačidla

Určite by ste si teraz radi nový formulár vyskúšali. Presunieme sa teda do triedy PrehledForm, kde tlačidlu pre pridávanie osôb nastavíme udalosť clicked. Napojíme ju na metódu, v ktorej zobrazíme formulár OsobaForm. Pripomeniem, že k inštanciu osoba_form môžeme pristupovať vďaka tomu, že sme si formulár predtým uložili v metóde setup():

class PrehledForm(QtWidgets.QMainWindow):

    def __init__(self, **kwargs):
        super(PrehledForm, self).__init__(**kwargs)
        # Předchozí kód
        # ...

        self.pridatButton.clicked.connect(self.show_osoba_form)

        self.show()

    def show_osoba_form(self):
        self.osoba_form.show()

výsledok:

Formuláre máme teda kompletne pripravené. V budúcej lekcii, PRIPOMIENKOVÉ narodenín v PyQt - Logická vrstva , pridáme logiku aplikácie. Kompletné modul a ikonky nájdete na stiahnutie nižšie.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.