Hlavní navigace

Jak na GUI s wxPythonem

Pavel Šibal 15. 6. 2006

V tomto novém seriálu se zaměříme na vývoj GUI aplikací s pomocí knihovny wxPython tak, aby jej byl schopný zvládnout i běžný začátečník. Podíváme se na používání vývojového prostředí Boa Constructor a na další programátorské nástroje. Většina zde popsaných postupů bude vycházet z mých vlastních zkušeností.

Č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:

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.

Boa 1 - 01

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“.

Boa 1 - 02

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.

Boa 1 - 03

Z tohoto okna budeme pomocí tlačítka designer - icon 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 (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 designer - icon, čí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 „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:

Boa 1 - 07

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“ 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“ 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 …“ 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“ 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 End Designer panel, čí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:

Boa 1 - 14

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.

Našli jste v článku chybu?

17. 9. 2014 12:46

site (neregistrovaný)

Nainstaloval jsem všechny programy a nikde nemohu najít spustitelný Boa constructor.

11. 12. 2010 22:07

Zdravím autora a všechny čtenáře!

Tento článek a celý seriál mě nesmírně potěšil, jednak proto, že jsem dlouhodobým vývojářem–uživatelem wxPythonu, a jednak proto, že jsem dlouhodobým vývojářem–uživatelem Boa Constructoru☺

Vitalia.cz: Chtějí si léčit kvasinky. Lék je jen v Německu

Chtějí si léčit kvasinky. Lék je jen v Německu

Podnikatel.cz: Nejenom EET, začaly platit další zákony

Nejenom EET, začaly platit další zákony

Podnikatel.cz: Babiše přesvědčila 89letá podnikatelka?!

Babiše přesvědčila 89letá podnikatelka?!

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Vitalia.cz: Manželka je bio, ale na sex moc není

Manželka je bio, ale na sex moc není

DigiZone.cz: Flix TV má set-top box s HEVC

Flix TV má set-top box s HEVC

Vitalia.cz: Co pomáhá dítěti při zácpě?

Co pomáhá dítěti při zácpě?

Podnikatel.cz: EET: Totálně nezvládli metodologii projektu

EET: Totálně nezvládli metodologii projektu

Lupa.cz: Co se dá měřit přes Internet věcí

Co se dá měřit přes Internet věcí

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

DigiZone.cz: ČRa DVB-T2 ověřeno: Hisense a Sencor

ČRa DVB-T2 ověřeno: Hisense a Sencor

Root.cz: Vypadl Google a rozbilo se toho hodně

Vypadl Google a rozbilo se toho hodně

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

Podnikatel.cz: Na poslední chvíli šokuje výjimkami v EET

Na poslední chvíli šokuje výjimkami v EET

Vitalia.cz: Dáte si jahody s plísní?

Dáte si jahody s plísní?

Lupa.cz: Google měl výpadek, nejel Gmail ani YouTube

Google měl výpadek, nejel Gmail ani YouTube

DigiZone.cz: Rádio Šlágr má licenci pro digi vysílání

Rádio Šlágr má licenci pro digi vysílání

Vitalia.cz: Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“