Vytváříme aplikaci s wxPythonem

Jako úplně první si vytvoříme adresářovou strukturu projektu, která by měla vypadat následovně:

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

V této aplikaci už opravdu budeme využívat všechny adresáře. Do podadresářů „lib/“ a „ui/“ umístíme prázdný soubor s názvem „__init__.py“. Rovněž doporučuji nakopírovat soubor „code-img.py“ z příkladu uvedeném ve 2. dílu.

Pro tento program jsem ikony nevytvářel, ale vybral je ze standardních ikon obsažených v mém adresáři „/usr/share/icons“. Samozřejmě si je můžete vytvořit sami, nebo si je stáhnout a rozbalit do podadresáře „icons/“. Pak spusťte script „code-img.py“.

Návrh hlavního okna „MyFrame“

V dnešním dílu bude naším cílem vytvoření prvního formuláře, který by měl vypadat zhruba takto:

Po spuštění Boa Constructoru vytvořte novou „wx.App“ (v horní liště v paletě „New“ ikona ). Soubor „App1“ uložte do adresáře „~/AddressBook“ jako „App1.py“ a soubor „Frame1“ do podadresáře „ui/“ jako „MyFrame.py“.

Spustíme „Designer panel“ () a jako první v „Inspectoru“ změníme položku „Name: MyFrame“ a „Title: Address book“. V záložce „Props“ zvolíme „Icon:“, otevřeme soubor „myImgRes.py“ (vzniknul nám pomocí „code-img.py“) a vybereme „ico01“. Ještě pomocí tažení, popř. numericky v Inspectoru upravíme formulář na nějakou rozumnou velikost (doporučuji wx.Size(772, 533) a uložíme.

Přidáváme menu a události

Opětovně spustíme „Designer panel“ (). Z horního „Toolbaru“ ze záložky „Utilities (Data)“ klikněme na tlačítko „wx.MenuBar“ (). Přejmenujeme jej na „mbTop“. Dále pak přidáme 3× „wx.Menu“ (). První pojmenujeme jako „mnuProgram“, druhý jako „mnuEdit“ a třetí jako „mnuHelp“. V „Editoru“ otevřeme záložku „Data“ a dvakrát clickneme na „mbTop“. Otevře se okno „mbTop.Menus – Collection Editor“.

Přidáme pomocí tlačítka „New“ () novou položku a v „Inspectoru“ vyplníme „Menu: self.mnuProgram“ a „Title: &Program“. Přidáme další položku a vyplníme „Menu: self.mnuEdit“ a „Title: &Edit“. Přidáme poslední položku a u ní vyplníme „Menu: self.mnuHelp“ a „Title: &Help“.

Nyní v „Editoru“ v záložce „Data“ a dvakrát clickneme na „mnuProgram“. Otevře se okno „mnuProgram.Items – Collection Editor“. Přidáme novou položku, změníme v „Inspectoru“ „Text: Backup database“, přepneme se na záložku „Evts“, zvolíme „MenuEvent → wx.EVT_MENU“ a přejmenujeme událost na BackupDatabase. Seznam jednotlivých dalších položek a menu je uveden v tabulce:

¨Klikněme na formulář a v Inspectoru v záložce Props v položce MenuBar zvolíme volbu self.mbTop. To způsobí, že se námi vytvořené menu zobrazí na formuláři. Nezapomeňte svoji práci uložit ().

Nyní přidáme horní lištu a tabulku. Spusťte „Designer panel“ () a z horního „Toolbaru“ ze záložky „Containers/Layout“ klikněme na tlačítko „wx.Panel“ (). V Inspectoru jej přejmenujeme na pnTop, Size: wx.Size(772, 40) a Style: wx.RAISED_BORDER | wx.TAB_TRAVERSAL. Pak ze stejné záložky přidáme wx.FlexGridSizer, v okně „Inspectoru“ vyplníme v záložce „Constr“ položky „Cols: 1“, Name: szBasic" a „Rows: 2“. Pak se přepneme na záložku „Props“, klikneme na položku „Growables (na tlačítko "…“, zapneme kolonky podle obrázku:

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

Nyní z horního Toolbaru ze záložky List Control přidáme tabulku wx.grid.Grid () a v Inspectoru jej přejmenujeme na grData.

Přesuneme se do okna „Editor“ a v záložce „Sizer“ dvakrát klikneme na „szBasic“. Otevře se nám okno „szBasic.Items“ a zde clickneme 2× na „New“ (). V Inspectoru u první položky změníme „Flag: wx.EXPAND | wx.ALL“ a „Window: self.pnTop, u druhé "Flag: wx.EXPAND | wx.ALL“ a "Window: self.grData. Opět svoji práci uložíme ().

Nyní se budeme věnovat jednotlivým položkám v „pnTop“. Spustíme „Designer panel“ (Designer panel) a z horního „Toolbaru“ ze záložky „Basic controls“ klikněme na tlačítko „wx.TextCtrl“ (). Dále klikneme na pnTop, čímž jej přidáme do tohoto panelu. V „Inspectoru“ změníme „Name: txSearch“, v záložce „Props“ položku „BackroundColor“ na RGB hodnoty „251, 251, 129“ a v záložce „Evts“ přidáme „Key Event → wx.EVT_KEY_UP a přejmenujeme ji na "MySearch“.

Nyní přidáme na „pnTop 9 tlačítek "wx.BitmapButton“ (). V „Inspectoru“ je přejmenujeme (položka „Name:“, zvolíme vhodnou ikonu (položka „Bitmap: myImgRes.py“) a nastavíme příslušné události („Evts → Button Event → wx.EVT_BUTTON“) podle níže uvedené tabulky:

Jako poslední přidáme na panel wx.FlexGridSizer, v okně „Inspectoru“ vyplníme v záložce „Constr“ položky „Cols: 10“, Name: szTop" a „Rows: 2“. Pak se přepneme na záložku „Props“, klikneme na položku „Growables (na tlačítko "…“ a zapneme kolonky podle obrázku:

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 „New“ () přidáme 10 položek

a pohrajeme si v „Inspectoru“ s položkou „Flag“ (wx.ALIGN_CEN­TER_VERTICAL, wx.EXPAND, wx.ALL, wx.LEFT). Pak klikneme někam na panel „pnTop“ a v „Inspectoru“ v záložce „Props zvolíme "Sizer: self.szTop“.

Jako poslední přidáme „wx.StatusBar“ („Toolbar“ záložka „Containers/La­yout“, tlačítko „wx.StatusBar“ ), přejmenujeme jej na „stbBootom“, a v „MyFrame v "Inspectoru, v záložce "Props“ nastavíme „StatusBar: self.stbBootom“.

Tímto dneska skončíme, za domácí úkol vyřešte lokalizaci tohoto formuláře (viz díl Resource soubory a i18n ve wxPythonu). Samozřejmě jsem pro vás připravil zdrojové kódy.