Hlavní navigace

Vytváříme aplikaci s wxPythonem

Pavel Šibal 13. 7. 2006

V dnešním článku si zkusíme vytvořit jednoduchou funkční aplikaci typu "adresář kontaktů" s podporou databáze sqlite. Měla by rovněž obsahovat zálohování / přenos dat, tiskovou sestavu apod. Před samotným čtením a zkoušením bych doporučil přečtení 1. a 2. dílu, na které v dnešním dílu budu navazovat.

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:

boa04-01

Po spuštění Boa Constructoru vytvořte novou „wx.App“ (v horní liště v paletě „New“ ikona New). 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“ (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“ (Designer panel). Z horního „Toolbaru“ ze záložky „Utilities (Data)“ klikněme na tlačítko „wx.MenuBar“ (wx.MenuBar). Přejmenujeme jej na „mbTop“. Dále pak přidáme 3× „wx.Menu“ (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:

Jednotlivé položky a události v mnuProgram
Text: wx.EVT_MENU
Backup database BackupDatabase
Restore database RestoreDatabase
Print records PrintRecords
Exit program ExitProgram
Jednotlivé položky a události v mnuEdit
Text: wx.EVT_MENU
&First record FirstRecord
&Previous record PreviousRecord
&Next record NextRecord
&Last record LastRecord
&Insert record InsertRecord
&Edit record EditRecord
&Delete record DeleteRecord
Jednotlivé položky a události v mnuHelp
Text: wx.EVT_MENU
Context… ShowHelp
About us AboutUs

¨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 (Save).

Nyní přidáme horní lištu a tabulku. Spusťte „Designer panel“ (Designer panel) a z horního „Toolbaru“ ze záložky „Containers/Layout“ klikněme na tlačítko „wx.Panel“ (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:

boa04-06

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 (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“ (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 (Save).

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“ (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“ (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:

Jména a události tlačítek
Name: wx.EVT_BUTTON
btFirst FirstRecord
btPrevious PreviousRecord
btNext NextRecord
btLast LastRecord
btInsert InsertRecord
btEdit EditRecord
btDelete DeleteRecord
btPrint PrintRecords
btExit ExitProgram

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:

boa04-09

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

boa04-10

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

Našli jste v článku chybu?

15. 9. 2013 18:43

tono (neregistrovaný)

skúšam to urobiť avšak pri nahodení položky wx.Text.ctrl mi to pri dodržaní Vášho postupu a uloženi vyhodí chybu keyctrl.V roote ste uverejnili 5 častí bez ďalšieho pokračovania.Je niekde na nete uverejnená komplet príručka?

16. 7. 2006 19:17

Nechci opisovat nebo prekladat dokumentaci ci knizky (v prvnim dile jsem se tomu bohuzel nevyhnul kvuli terminologii). Chtel bych ukazat, jak jednoduse vytvorit funkcni GUI aplikaci - zvolil jsem databazovou (sqlite) typu adresar (da se to predelat na cokoliv jinneho). Chtel jsem demonstrovat, jak to udelat pomoci vizualnich nastroju a hlavni duraz jsem kladl na multiplatformovost (desne slovo). Na internetu jsem nenasel nic podoobneho a ukacal me k tomu muj kamarad.
DigiZone.cz: Recenze Prostřeno: cirkus postižených

Recenze Prostřeno: cirkus postižených

Lupa.cz: Seznam mění vedení. Pavel Zima v čele končí

Seznam mění vedení. Pavel Zima v čele končí

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: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

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

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

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

120na80.cz: 5 přírodních tipů na bolest v krku

5 přírodních tipů na bolest v krku

Podnikatel.cz: Babiš: E-shopy z EET možná vyjmeme

Babiš: E-shopy z EET možná vyjmeme

Podnikatel.cz: Víme první výsledky doby odezvy #EET

Víme první výsledky doby odezvy #EET

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Podnikatel.cz: Podnikatelům dorazí varování od BSA

Podnikatelům dorazí varování od BSA

Podnikatel.cz: Na poslední chvíli šokuje vyjímkami v EET

Na poslední chvíli šokuje vyjímkami v EET

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

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

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

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

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

Vitalia.cz: Co nabídne největší výživová konference FOOD21?

Co nabídne největší výživová konference FOOD21?

120na80.cz: Na ucho teplý, nebo studený obklad?

Na ucho teplý, nebo studený obklad?

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

Vitalia.cz: Baletky propagují zdravotní superpostel

Baletky propagují zdravotní superpostel

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

Dáte si jahody s plísní?