Jak na GUI s wxPythonem

Čas od času je potřeba napsat nějakou „okýnkovou“ aplikaci, aby byla pokud možno multiplatformní. Je zde možnost volby z několika programovacích jazyků (Perl, Java, Python,…) a GUI knihoven (GTK, QT, wxWindow,…).

Já osobně jsem zvolil kombinaci jazyka Python a knihovny wxWindow, resp. její nadstavbu wxPython, a to z několika důvodů:

• Programovací jazyk a GUI knihovna Je multiplatformní a je pod licencí GPL.
• Pro grafický návrh aplikace existuje kvalitní GUI vývojové prostředí (nechuť k ručnímu vytváření formulářů apod).
• Obsahuje třídy pro snadné vytváření tiskových sestav.
• Podporuje alespoň základní zobrazení HTML.
• Aplikace lze bez problémů lokalizovat (podpora locales).
• Aplikace se dá přeložit do spustitelného kódu (aplikace poběží i na stanicích, kde není Python ani wxWindow nainstalován

Abychom mohli začít s následujícím příkladem, budeme potřebovat následující programy:

• programovací jazyk – Python
• GUI knihovna – wxPython
• Vývojové prostředí – Boa Constructor

Prakticky vše se dá nalézt už připravené ve formě instalačních balíčků ve většině distribucí linuxu.

Vzhledem k tomu, že tyto články jsou určeny pro začátečníky, pro jejich úspěšné zvládnutí předpokládám nainstalované výše uvedené programy (je jedno, zda v linuxu nebo v MS Windows), alespoň základní znalost programování v jazyce Python a základní obsluhu počítače a myši.

Prvotní seznámení s Boa Constructorem

Než se dostaneme k vytvoření první jednoduché „pythonýrské” GUI aplikace, měli bychom se v první řadě seznámit s nástrojem, který budeme při jejím vytváření nejčastěji využívat. Takže si spusťte „Boa Constructor“.

Po jeho spuštění se vám vaše pracovní plocha rozdělí do několika oken. V horní části obrazovky se nachází tzv. „Paleta“ obsahující dvě sekce – „toolbar“ a záložky s jednotlivými wx komponentami. Pokud tuto paletu uzavřete, ukončíte Boa Constructor.

Po levé straně se nachází okno Inspektoru („Inspector“), která ukazuje konfiguraci aktuálně vybrané komponenty. Toto okno je aktivní, pouze když je spuštěn tzv. „Designer panel“.

Je rozděleno pomocí záložek na čtyři části:

• Konstruktor („Constr“)
  slouží k editaci vlastností, které jsou vyžadovány pro vytvoření objektu (jméno, velikost, pozice a styl)
• Vlastnosti („Props“)
  obsahuje ostatní vlastnosti objektu (barva, font, sizer, …).
• Události („Evts“)
  umožňuje výběr událostí které jsou rozděleny do logických skupin (myš, klávesnice, …)
• Objekty („Objs“)
  alternativně zobrazuje jednotlivé objekty, které jsou zobrazené v „Designer panelu“.

Další okno se nachází po pravé straně a nazýváme jej okno Editoru („Editor“). V tomto okně budeme např. provádět otevření, editaci a uložení zdrojového kódu.

Z tohoto okna budeme pomocí tlačítka spouštět tzv. „Designer panel“, který nám umožní vizuální vytvoření a editaci jednotlivých formulářů.

To by pro prvotní seznámení s vývojovým prostředím Boa Constructor stačilo, další popisy a postupy již budou součástí jednotlivých příkladů.

První aplikace („Hello World“)

Přestože se tomu spousta autorů a programátorů brání, tak než se dostaneme k nějaké „smysluplné“ aplikaci, napíšeme si klasickou „Hello World“ včetně lokalizace a překladu do spustitelného kódu. Budu se snažit vše popsat tak, aby to byli schopni napsat i naprostí začátečníci.

V první řadě vám doporučuji, abyste si vytvořili adresářovou strukturu projektu tak, aby vypadala takto:

~/HelloWorld
     |-- i18n
     |     |-- cs_CZ
     |-- icons
     |-- lib
     |-- ui

Do podadresářů „lib a ui“ umístíme prázdný soubor s názvem „__init__.py“. Ačkoliv nebudeme v tomto případě využívat všechny výše uvedené adresáře, doporučuji je přesto vytvořit, např. pomocí příkazů:

mkdir -p ~/HelloWorld/i18n/cs_CZ ~/HelloWorld/icons ~/HelloWorld/lib ~/HelloWorld/ui
touch ~/HelloWorld/lib/__init__.py ~/HelloWorld/ui/__init__.py

Spustíme Boa Constructor a v okně „Editor“ v záložce „Explorer“ klikněte myší nad „root“ – rozbalí se vám cesty s adresáři. Najeďte na svůj domovský adresář. V pravé části okna pak stiskněte pravé tlačítko myši nad adresářem „HelloWorld“ a vyberte z rozbalovací nabídky volbu „Bookmark“. Tím jste si vytvořili „bookmark“ na váš adresář s projektem – umožní to později snadnější orientaci v souborovém systému.

Nyní začneme se samotným vytvářením naší první aplikace. V „Paletě“ (horní okno) v záložce „New“ clickněte na ikonu wx.App (), což má za následek vygenerování dvou souborů – objeví se jako záložky v „Editoru“. Všiměte si hvězdičky před a za názvem v záložce – znamená, že soubor není uložen. Zvolíme první (App1) a uložíme jej jako „App1.py“ do adresáře „~/HelloWorld“. Při uložení si pomůžeme bookmarkem – stačí v dialogu „Save as“ clicknout na „Top → Bookmarks → HelloWorld“. Poté zvolíme v „Editoru“ záložku „Frame1“ a uložíme jej do adresáře „~/HelloWorld/u­i“jako „frmHelloWorld.py“ (opakujeme předchozí postup).

Tím jsme si uložili vygenerované soubory a můžeme začít upravovat design samotného formuláře. Zkontrolujeme, zda máme v „Editoru“ zvolen „frmHelloWorld“ a klikněme na tlačítko , čímž se nám spustí „Designer panel“.

V okně „Inspector (pravé okno) vyplníme v záložce "Constr“ položky „Name: frmHelloWorld“, „Size: wx.Size(164, 102)“ a „Title: Hello World!“ (viz. předchozí obrázek Inspectoru).

Nyní přidáme z „Palety“ (horní okno) ze záložky „Containers/Layout“ pomocí tlačítka „wx.FlexGridSizer“. V okně „Inspectoru“ vyplníme v záložce „Constr“ položky „Cols: 1“, Name: szTop" a „Rows: 3“. Pak se přepneme na záložku „Props“, klikneme na položku „Growables (na tlačítko "…“ a zapneme kolonky podle obrázku:

a potvrdíme tlačítkem „OK“. Vrátíme se zpět k formuláři „frmHelloWorld“ (klikněme kdekoliv na tento formulář) a v okně „Inspector“ v záložce „Props“ v položce „Sizer“ vybereme „self.szTop“.

Poté přidáme z okna „Paleta“ (horní okno) ze záložky „Basic Controls“ položku „wx.StaticText“ a v okně „Inspector“ v záložce „Constr“ změníme „Label: Hello World!“, „Name: stHello“ a „Style: wx.ALIGN_CENTRE“.

V okně „Paleta“ (horní okno) v záložce „Buttons“ zvolíme „wx.Button“ (první tlačítko). Opět v okně „Inspector“ v záložce „Constr“ změníme „Label: &Close“, „Name: btClose“ a „wx.Size(75, 23)“. Dále pak v záložce „Evts“ zvolíme „ButtonEvent“ a klikneme na „wx.EVT_BUTTON“, čímž se nám vytvoří událost po kliknutí na tlačítko „OnBtCloseButton“.

Přesuneme se do okna „Editor“ a v záložce „Sizer“ dvakrát klikneme na „szTop“. Otevře se nám okno „szTop.Items“ a zde přidáme pomocí tlačítka „More new …“ volbu „Add spacer“. V oknu „Inspector“ v záložce „Constr“ změníme „Size: wx.Size(8, 18)“.

Opětovně se přesuneme do okna „szTop.Items“ a přidáme pomocí tlačítka „New“ dvě položky. U první nastavíme v oknu „Inspector“ v záložce „Constr“ „Flag: wx.EXPAND | wx.ALL“ a „Window: self.stHello“ a u druhé „Flag: wx.ALIGN_CENTER_HO­RIZONTAL | wx.ALL“ a „Window: self.btClose“.

Tímto by měl být vytvořen design našeho formuláře. V oknu „Inspector“ clickneme na tlačítko , čímž ukončíme „Designer panel“. V okně „Editor“ v záložce „Source“ se přesuneme na funkci „OnBtCloseBut­ton(self, event)“ a upravíme ji následovně:

    def OnBtCloseButton(self, event):
        event.Skip()
        self.Close()

Nezapomeňte formulář „frmHelloWorld“ uložit. Přepneme se na záložku „App1“ a podzáložku „Source“. Zde upravíme řádek

import frmHelloWorld

na

import ui.frmHelloWorld

Dále pak upravíme řádek

        self.main = frmHelloWorld.create(None)

na

        self.main = ui.frmHelloWorld.create(None)

Opět nezapomeňte uložit „App1“. Nyní je již možné aplikaci spustit, buď pomocí tlačítka „Run application“ nebo z příkazové řádky. Výsledek našeho dnešního snažení by měl vypadat zhruba takto:

To je pro dnešek vše, příště budeme v této jednoduché aplikaci pokračovat a ukážeme si, jak na lokalizaci a překlad do spustitelného kódu. Zdrojové kódy k dnešní aplikaci si můžete stáhnout.