wxPython - základní komponenty

Seznámíme se se všemi základními komponentami. U každé komponenty bude ukázkový zdrojový kód, na kterém si ukážeme její základní metody.

U každé komponenty naleznete ukázkový kód + vybrané styly, metody a ovladače. Neuvádím zde všechno, pouze to nejzákladnější. Zbytek si můžete dohledat v oficiální dokumentaci.

• wx.Button
• wx.ToggleButton
• wx.BitmapButton
• wx.StaticLine
• wx.StaticText
• wx.StaticBox
• wx.ComboBox
• wx.StatusBar
• wx.RadioButton
• wx.Gauge
• wx.Slider
• wx.ListBox
• wx.SpinCtrl
• wx.SplitterWindow
• wx.ScrolledWindow
• wx.Notebook
• wx.Panel

wx.Button

Oficiální dokumentace k wx.Button.

wx.Button je jedna z nejjednodušších a zároveň jedna z nejdůležitějších komponent wxPythonu. Jedná se o tlačítko, do něhož lze vložit nějaký popisek a přiřadit mu funkci/metodu, která se zavolá, pokud uživatel tlačítko stiskne.

Styly

• wx.BU_LEFT - zarovná text do levé části tlačítka.
• wx.BU_TOP - zarovná text do horní části tlačítka.
• wx.BU_RIGHT - zarovná text do pravé části tlačítka.
• wx.BU_BOTTOM - zarovná text do dolní části tlačítka.
• wx.BU_EXACTFIT - zarovná text do levé části tlačítka.

Metody

Ovladače

import wx
import random

APP_SIZE_X = 300
APP_SIZE_Y = 200

class MyButtons(wx.Dialog):
    def __init__(self, parent, id, title):
        wx.Dialog.__init__(self, parent, id, title, size=(APP_SIZE_X, APP_SIZE_Y))

        wx.Button(self, 1, 'Close', (50, 130))
        wx.Button(self, 2, 'Random Move', (150, 130), (110, -1))

        self.Bind(wx.EVT_BUTTON, self.OnClose, id=1)
        self.Bind(wx.EVT_BUTTON, self.OnRandomMove, id=2)

        self.Centre()
        self.ShowModal()
        self.Destroy()

    def OnClose(self, event):
        self.Close(True)

    def OnRandomMove(self, event):
        screensize = wx.GetDisplaySize()
        randx = random.randrange(0, screensize.x - APP_SIZE_X)
        randy = random.randrange(0, screensize.y - APP_SIZE_Y)
        self.Move((randx, randy))

app = wx.App(0)
MyButtons(None, -1, 'buttons.py')
app.MainLoop()

wx.ToogleButton

Oficiální dokumentace k wx.ToogleButton.

Tato komponenta je vzhledově na první pohled velmi podobná komponentě wx.Button, ale je mezi nimi jeden podstatný rozdíl. Funguje totiž jako přepínací tlačítko, tj. takové, které po kliknutí zůstane zamáčknuté.

Metody

Ovladače

import wx

class ToggleButtons(wx.Dialog):
    def __init__(self, parent, id, title):
        wx.Dialog.__init__(self, parent, id, title, size=(300, 200))

        self.colour = wx.Colour(0, 0, 0)

        wx.ToggleButton(self, 1, 'red', (20, 25))
        wx.ToggleButton(self, 2, 'green', (20, 60))
        wx.ToggleButton(self, 3, 'blue', (20, 100))

        self.panel  = wx.Panel(self, -1, (150, 20), (110, 110), style=wx.SUNKEN_BORDER)
        self.panel.SetBackgroundColour(self.colour)

        self.Bind(wx.EVT_TOGGLEBUTTON, self.ToggleRed, id=1)
        self.Bind(wx.EVT_TOGGLEBUTTON, self.ToggleGreen, id=2)
        self.Bind(wx.EVT_TOGGLEBUTTON, self.ToggleBlue, id=3)

        self.Centre()
        self.ShowModal()
        self.Destroy()

    def ToggleRed(self, event):
        green = self.colour.Green()
        blue = self.colour.Blue()
        if  self.colour.Red():
            self.colour.Set(0, green, blue)
        else:
            self.colour.Set(255, green, blue)
        self.panel.SetBackgroundColour(self.colour)

    def ToggleGreen(self, event):
        red = self.colour.Red()
        blue = self.colour.Blue()
        if  self.colour.Green():
            self.colour.Set(red, 0, blue)
        else:
            self.colour.Set(red, 255, blue)
        self.panel.SetBackgroundColour(self.colour)

    def ToggleBlue(self, event):
        red = self.colour.Red()
        green = self.colour.Green()
        if  self.colour.Blue():
            self.colour.Set(red, green, 0)
        else:
            self.colour.Set(red, green, 255)
        self.panel.SetBackgroundColour(self.colour)


app = wx.App()
ToggleButtons(None, -1, 'togglebuttons.py')
app.MainLoop()

wx.BitmapButton

Oficiální dokumentace k wx.BitmapButton.

Komponenta wx.BitmapButton je tlačítko, které v sobě obsahuje obrázek. wx.BitmapButton může mít pět různých stavů: normální (normal), zablokovaný (disabled), vybraný (focus), zmáčknutý (selected) a aktivní (hover). Pro všechny tyto stavy můžeme definovat jiný obrázek. To, jak se wx.BitmapButton vytváří, si ukážeme na následujícím příkladu. Naprogramujeme kostru videopřehrávače.

Styly

• wx.BU_LEFT - zarovná obrázek v tlačítku doleva.
• wx.BU_TOP - zarovná obrázek v tlačítku nahoru.
• wx.BU_RIGHT - zarovná obrázek v tlačítku doprava.
• wx.BU_BOTTOM - zarovná obrázek v tlačítku dolů.

Metody

Ovladače

import wx

class Player(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(350, 300))
        panel = wx.Panel(self, -1)

        pnl1 = wx.Panel(self, -1)
        pnl1.SetBackgroundColour(wx.BLACK)
        pnl2 = wx.Panel(self, -1 )

        menubar = wx.MenuBar()
        file = wx.Menu()
        play = wx.Menu()
        view = wx.Menu()
        tools = wx.Menu()
        favorites = wx.Menu()
        help = wx.Menu()
        
        file.Append(101, '&quit', 'Quit application')

        menubar.Append(file, '&File')
        menubar.Append(play, '&Play')
        menubar.Append(view, '&View')
        menubar.Append(tools, '&Tools')
        menubar.Append(favorites, 'F&avorites')
        menubar.Append(help, '&Help')

        self.SetMenuBar(menubar)

        slider1 = wx.Slider(pnl2, -1, 0, 0, 1000)
        pause = wx.BitmapButton(pnl2, -1, wx.Bitmap('icons/stock_media-pause.png'))
        play  = wx.BitmapButton(pnl2, -1, wx.Bitmap('icons/stock_media-play.png'))
        next  = wx.BitmapButton(pnl2, -1, wx.Bitmap('icons/stock_media-next.png'))
        prev  = wx.BitmapButton(pnl2, -1, wx.Bitmap('icons/stock_media-prev.png'))
        volume = wx.BitmapButton(pnl2, -1, wx.Bitmap('icons/volume.png'))
        slider2 = wx.Slider(pnl2, -1, 0, 0, 100, size=(120, -1))

        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)

        hbox1.Add(slider1, 1)
        hbox2.Add(pause)
        hbox2.Add(play, flag=wx.RIGHT, border=5)
        hbox2.Add(next, flag=wx.LEFT, border=5)
        hbox2.Add(prev)
        hbox2.Add((-1, -1), 1)
        hbox2.Add(volume)
        hbox2.Add(slider2, flag=wx.TOP | wx.LEFT, border=5)

        vbox.Add(hbox1, flag=wx.EXPAND | wx.BOTTOM, border=10)
        vbox.Add(hbox2, 1, wx.EXPAND)
        pnl2.SetSizer(vbox)

        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(pnl1, 1, flag=wx.EXPAND)
        sizer.Add(pnl2, flag=wx.EXPAND | wx.BOTTOM | wx.TOP, border=10)

        self.SetMinSize((350, 300))
        self.CreateStatusBar()
        self.SetSizer(sizer)

        self.Centre()
        self.Show()


app = wx.App()
Player(None, -1, 'Player')
app.MainLoop()

Analýza kódu:

pause = wx.BitmapButton(pnl2, -1, wx.Bitmap('icons/stock_media-pause.png'))

Vytváření wx.BitmapButton je tak jednoduché, že není potřeba cokoliv dodat.

hbox2.Add(prev)
hbox2.Add((-1, -1), 1)
hbox2.Add(volume)

Vložili jsme mezeru mezi tlačítko Předchozí a tlačítko Volume. Parametr proportion jsme nastavili na 1, což znamená, že se velikost mezery bude přizpůsobovat velikosti okna.

self.SetMinSize((350, 300))

Nastavili jsme minimální velikost okna. Pod tuto velikost se okno nebude moci zmenšit.

wx.StaticLine

Oficiální dokumentace k wx.StaticLine.

Vytvoří v okně svislou nebo vodorovnou čáru. Tato komponenta se obvykle používá jako oddělovač ostatních komponent.

Styly

• wx.LI_HORIZONTAL - horizontální orientace komponenty
• wx.LI_VERTICAL - vertikální orientace komponenty

Metody

import wx

class CentralEurope(wx.Dialog):
    def __init__ (self, parent, ID, title):
        wx.Dialog.__init__(self, parent, ID, title, size=(360, 370))

        font = wx.Font(10, wx.DEFAULT, wx.NORMAL, wx.BOLD)
        heading = wx.StaticText(self, -1, 'The Central Europe', (130, 15))
        heading.SetFont(font)

        wx.StaticLine(self, -1, (25, 50), (300,1))

        wx.StaticText(self, -1, 'Slovakia', (25, 80))
        wx.StaticText(self, -1, 'Hungary', (25, 100))
        wx.StaticText(self, -1, 'Poland', (25, 120))
        wx.StaticText(self, -1, 'Czech Republic', (25, 140))
        wx.StaticText(self, -1, 'Germany', (25, 160))
        wx.StaticText(self, -1, 'Slovenia', (25, 180))
        wx.StaticText(self, -1, 'Austria', (25, 200))
        wx.StaticText(self, -1, 'Switzerland', (25, 220))

        wx.StaticText(self, -1, '5 379 000', (250, 80))
        wx.StaticText(self, -1, '10 084 000', (250, 100))
        wx.StaticText(self, -1, '38 635 000', (250, 120))
        wx.StaticText(self, -1, '10 240 000', (250, 140))
        wx.StaticText(self, -1, '82 443 000', (250, 160))
        wx.StaticText(self, -1, '2 001 000', (250, 180))
        wx.StaticText(self, -1, '8 032 000', (250, 200))
        wx.StaticText(self, -1, '7 288 000', (250, 220))

        wx.StaticLine(self, -1, (25, 260), (300,1))

        sum = wx.StaticText(self, -1, '164 102 000', (240, 280))
        sum_font = sum.GetFont()
        sum_font.SetWeight(wx.BOLD)
        sum.SetFont(sum_font)

        wx.Button(self, 1, 'Ok', (140, 310), (60, 30))

        self.Bind(wx.EVT_BUTTON, self.OnOk, id=1)

        self.Centre()
        self.ShowModal()
        self.Destroy()

    def OnOk(self, event):
        self.Close()

app = wx.App()
CentralEurope(None, -1, 'centraleurope.py')
app.MainLoop()

wx.StaticText

Oficiální dokumentace k wx.StaticText.

Tato komponta slouží pouze k zobrazení jedné nebo více řádek textu.

Styly

• wx.ALIGN_RIGHT - zarovná text doprava.
• wx.ALIGN_LEFT - zarovná text doleva.
• wx.ALIGN_CENTER - zarovná text na střed (horizontálně).
• wx.ST_NO_AUTORESIZE - velikost komponenty se po zavolání metody SetLabel nezmění. Toto se hodí, používáte-li současně styl wx.ALIGN_RIGHT nebo wx.ALIGN_CENTER, protože by smysl těchto stylů byl zbytečný po zavolání SetLabel.

Metody

import wx

class StaticText(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)

        lyrics1 = '''I'm giving up the ghost of love
in the shadows cast on devotion
She is the one that I adore
creed of my silent suffocation
Break this bittersweet spell on me
lost in the arms of destiny'''

        lyrics2 = '''There is something in the way
You're always somewhere else
Feelings have deserted me
To a point of no return
I don't believe in God
But I pray for you'''

        vbox = wx.BoxSizer(wx.VERTICAL)
        panel = wx.Panel(self, -1)
        st1 = wx.StaticText(panel, -1, lyrics1, style=wx.ALIGN_CENTRE)
        st2 = wx.StaticText(panel, -1, lyrics2, style=wx.ALIGN_CENTRE)
        vbox.Add(st1, 1, wx.EXPAND |  wx.TOP | wx.BOTTOM, 15)
        vbox.Add(st2, 1, wx.EXPAND |  wx.TOP | wx.BOTTOM, 15)
        panel.SetSizer(vbox)
        self.Centre()
        self.Show(True)


app = wx.App()
StaticText(None, -1, 'statixtext.py')
app.MainLoop()

wx.StaticBox

Oficiální dokumentace k wx.StaticBox.

Tato komponenta se hodí zejména k seskupování ostatních komponent. Vytváří totiž kolem nich rámeček s popiskem.

import wx

class StaticBox(wx.Dialog):
    def __init__(self, parent, id, title):
        wx.Dialog.__init__(self, parent, id, title, size=(250, 230))

        wx.StaticBox(self, -1, 'Personal Info', (5, 5), size=(240, 170))
        wx.CheckBox(self, -1 ,'Male', (15, 30))
        wx.CheckBox(self, -1 ,'Married', (15, 55))
        wx.StaticText(self, -1, 'Age', (15, 95))
        wx.SpinCtrl(self, -1, '1', (55, 90), (60, -1), min=1, max=120)
        wx.Button(self, 1, 'Ok', (90, 185), (60, -1))

        self.Bind(wx.EVT_BUTTON, self.OnClose, id=1)

        self.Centre()
        self.ShowModal()
        self.Destroy()

    def OnClose(self, event):
        self.Close()

app = wx.App()
StaticBox(None, -1, 'staticbox.py')
app.MainLoop()

wx.ComboBox

Oficiální dokumentace k wx.ComboBox.

Komponenta wx.ComboBox je kombinací textového pole, tlačítka a listboxu. Když zmáčknete tlačítko, objeví se listbox. Uživatel může vybrat pouze jednu možnost z nabízeného seznamu. wx.ComboBox má následující konstuktor:

wx.ComboBox(int id, string value='', wx.Point pos=wx.DefaultPosition, wx.Size size=wx.DefaultSize,
    wx.List choices=wx.EmptyList, int style=0, wx.Validator validator=wx.DefaultValidator,
    string name=wx.ComboBoxNameStr)

Styly

• wx.CB_READONLY - uživatel nemá právo editovat položky uvnitř wx.ComboBoxu.
• wx.CB_SORT - položky se abecedně seřadí.
• wx.TE_PROCESS_ENTER - komponenta vyvolá událost wx.EVT_COMMAND_TEXT_ENTER, pokud uživatel zmáčkne Enter.

Metody

Ovladače

import wx

class ComboBox(wx.Dialog):
    def __init__(self, parent, id, title):
        wx.Dialog.__init__(self, parent, id, title, size=(250, 280))

        panel = wx.Panel(self, -1, (75, 20), (100, 127), style=wx.SUNKEN_BORDER)
        self.picture = wx.StaticBitmap(panel)
        panel.SetBackgroundColour(wx.WHITE)

        self.images = ['quit.bmp', 'vpred.png', 'zpet.png', 'new.bmp']
        authors = ['Konec', u'Vpřed', u'Zpět', u'Nový']

        wx.ComboBox(self, -1, pos=(50, 170), size=(150, -1), choices=authors, 
					style=wx.CB_READONLY)
        wx.Button(self, 1, 'Close', (80, 220))

        self.Bind(wx.EVT_BUTTON, self.OnClose, id=1)
        self.Bind(wx.EVT_COMBOBOX, self.OnSelect)

        self.Centre()
        self.ShowModal()
        self.Destroy()

    def OnClose(self, event):
        self.Close()

    def OnSelect(self, event):
        item = event.GetSelection()
        self.picture.SetFocus()
        self.picture.SetBitmap(wx.Bitmap(self.images[item]))


app = wx.App()
ComboBox(None, -1, 'combobox.py')
app.MainLoop()

wx.CheckBox

Oficiální dokumentace k wx.CheckBox.

Komponeta wx.ComboBox má dva stavy: zapnutý a vypnutý. Je to vlastně statický popisek a box, který se dá zaškrtnout nebo odškrtnout.

Styly

• wx.ALIGN_RIGHT - popisek se objeví na pravé straně boxu.
• wx.CHK_2STATE - vytvoří wx.ComboBox se dvěma stavy - toto je standardní nastavení.
• wx.CHK_3STATE - vytvoří wx.ComboBox se třemi stavy.
• wx.CHK_ALLOW_3RD_STATE_FOR_USER - standardně nemůže uživatel nastavit třetí stav sám a lze to provést pouze zavoláním patřičné funkce. Tímto stylem mu to umožníte.

Metody

Ovladače

import wx

class CheckBox(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 170))

        panel = wx.Panel(self, -1)
        self.cb = wx.CheckBox(panel, -1, 'Show Title', (10, 10))
        self.cb.SetValue(True)

        wx.EVT_CHECKBOX(self, self.cb.GetId(), self.ShowTitle)

        self.Show()
        self.Centre()

    def ShowTitle(self, event):
        if self.cb.GetValue():
            self.SetTitle('checkbox.py')
        else: self.SetTitle('')


app = wx.App()
CheckBox(None, -1, 'checkbox.py')
app.MainLoop()

wx.StatusBar

Oficiální dokumentace k wx.StatusBar.

Jak už sám název napovídá, jedná se o komponentu, která zobrazuje nějaké informace. Dá se rozdělit na několik oddílů, do nichž můžeme vložit různé zprávy (například o stavu aplikace apod.).

Ve wxPythonu se dá wx.StatusBar vytvořit dvěma cestami. Buď můžeme sami vytvořit objekt wx.StatusBar a oknu ho přiřadit zavoláním metody SetStatusBar(), nebo můžeme použít metodu CreateStatusBar(). V následujícím příkladě máme okno a v něm 5 různých komponent. Pokud na některou z nich najedeme myší, zobrazí se ve statusbaru její popis.

Metody

import wx

class Statusbar(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(275, 200), 
	style=wx.CAPTION | wx.SYSTEM_MENU | wx.CLOSE_BOX)

        panel = wx.Panel(self, 1)

        button = wx.Button(panel, 2, 'Button', (20, 20))
        text = wx.CheckBox(panel, 3, 'CheckBox', (20, 90))
        combo = wx.ComboBox(panel, 4, '', (120, 22))
        slider = wx.Slider(panel, 5, 6, 1, 10, (120, 90), (110, -1))

        panel.Bind(wx.EVT_ENTER_WINDOW, self.EnterPanel, id=1)
        button.Bind(wx.EVT_ENTER_WINDOW, self.EnterButton, id=2)
        text.Bind(wx.EVT_ENTER_WINDOW, self.EnterText, id=3)
        combo.Bind(wx.EVT_ENTER_WINDOW, self.EnterCombo, id=4)
        slider.Bind(wx.EVT_ENTER_WINDOW, self.EnterSlider, id=5)

        self.sb = self.CreateStatusBar()
        self.SetMaxSize((275, 200))
        self.SetMinSize((275, 200))
        self.Show(True)
        self.Centre()

    def EnterButton(self, event):
        self.sb.SetStatusText('Button widget')
        event.Skip()

    def EnterPanel(self, event):
        self.sb.SetStatusText('Panel widget')
        event.Skip()

    def EnterText(self, event):
        self.sb.SetStatusText('CheckBox widget')
        event.Skip()

    def EnterCombo(self, event):
        self.sb.SetStatusText('ComboBox widget')
        event.Skip()

    def EnterSlider(self, event):
        self.sb.SetStatusText('Slider widget')
        event.Skip()

app = wx.App()
Statusbar(None, -1, 'statusbar.py')
app.MainLoop()

wx.RadioButton

Oficiální dokumentace k wx.RadioButton.

Komponenta wx.RadioButton umožňuje uživateli vybrat jednu možnost z nějaké větší skupiny voleb.

Styly

• wx.RB_GROUP - pokud použijete tento styl, označíte tím začátek nové skupiny tlačítek.

Metody

Ovladače

import wx

class RadioButtons(wx.Frame):
    def __init__(self, parent, id, title, size=(210, 150)):
        wx.Frame.__init__(self, parent, id, title)
        panel = wx.Panel(self, -1)
        self.rb1 = wx.RadioButton(panel, -1, 'Value A', (10, 10), style=wx.RB_GROUP)
        self.rb2 = wx.RadioButton(panel, -1, 'Value B', (10, 30))
        self.rb3 = wx.RadioButton(panel, -1, 'Value C', (10, 50))

        self.Bind(wx.EVT_RADIOBUTTON, self.SetVal, id=self.rb1.GetId())
        self.Bind(wx.EVT_RADIOBUTTON, self.SetVal, id=self.rb2.GetId())
        self.Bind(wx.EVT_RADIOBUTTON, self.SetVal, id=self.rb3.GetId())

        self.statusbar = self.CreateStatusBar(3)
        self.SetVal(True)
        self.Centre()
        self.Show(True)

    def SetVal(self, event):
        state1 = str(self.rb1.GetValue())
        state2 = str(self.rb2.GetValue())
        state3 = str(self.rb3.GetValue())

        self.statusbar.SetStatusText(state1, 0)
        self.statusbar.SetStatusText(state2, 1)
        self.statusbar.SetStatusText(state3, 2)


app = wx.App()
RadioButtons(None, -1, 'radiobuttons.py')
app.MainLoop()

wx.Gauge

Oficiální dokumentace k wx.Gauge.

wx.Gauge je horizontální nebo vertikální komponenta, která ukazuje nějaké množství (například zbývající čas). Podporovány jsou dva módy: konečný a nekonečný.

První mód se obvykle používá, pokud víme, kolik dat je třeba ještě přenést nebo kolik zbývá času. V tomto případě se pruh naplní v době, kdy vyprší čas. Druhý mód se pochopitelně používá, pokud nevíte, kolik času zbývá nebo jak velký je soubor. Náplň se v tomto případě neustále pohybuje. Komponenta podporuje dynamické střídání mezi oběma módy.

Styly

• wx.GA_HORIZONTAL - vytvoří horizontální wx.Gauge.
• wx.GA_VERTICAL - vytvoří vertikální wx.Gauge.

Metody

import wx

class Gauge(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(300, 200))

        self.timer = wx.Timer(self, 1)
        self.count = 0

        self.Bind(wx.EVT_TIMER, self.OnTimer, self.timer)

        panel = wx.Panel(self, -1)
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        hbox3 = wx.BoxSizer(wx.HORIZONTAL)
        hbox4 = wx.BoxSizer(wx.HORIZONTAL)
        self.gauge1 = wx.Gauge(panel, -1, 50, size=(250, 25))
        self.gauge2 = wx.Gauge(panel, -1, 50, size=(250, 25))
        self.btn1 = wx.Button(panel, wx.ID_OK)
        self.btn2 = wx.Button(panel, wx.ID_STOP)
        self.text = wx.StaticText(panel, -1, 'Task to be done')

        self.Bind(wx.EVT_BUTTON, self.OnOk, self.btn1)
        self.Bind(wx.EVT_BUTTON, self.OnStop, self.btn2)

        hbox1.Add(self.gauge1, 1, wx.ALIGN_CENTRE)
        hbox2.Add(self.gauge2, 1, wx.ALIGN_CENTRE)
        hbox3.Add(self.btn1, 1, wx.RIGHT, 10)
        hbox3.Add(self.btn2, 1)
        hbox4.Add(self.text, 1)
        vbox.Add((0, 30), 0)
        vbox.Add(hbox1, 0, wx.ALIGN_CENTRE)
        vbox.Add(hbox2, 1, wx.ALIGN_CENTRE)
        vbox.Add((0, 20), 0)
        
        vbox.Add(hbox3, 1, wx.ALIGN_CENTRE)
        vbox.Add(hbox4, 1, wx.ALIGN_CENTRE)
        panel.SetSizer(vbox)
        self.Centre()
        self.Show(True)

    def OnOk(self, event):
        if self.count >= 50:
            return
        self.timer.Start(100)
        self.text.SetLabel('Task in Progress')

    def OnStop(self, event):
        if self.count == 0 or self.count >= 50 or not self.timer.IsRunning():
            return
        self.text.SetLabel('Task in Progress')
        self.timer.Stop()
        wx.Bell()

    def OnTimer(self, event):
        self.count = self.count +1
        self.gauge1.SetValue(self.count)
        self.gauge2.Pulse()
        if self.count == 50:
            self.timer.Stop()
            self.text.SetLabel('Task Completed')

app = wx.App()
Gauge(None, -1, 'gauge.py')
app.MainLoop()

wx.Slider

Oficiální dokumentace k wx.Slider.

Komponenta wx.Slider poskytuje jednoduché rozhraní pro číselný výběr. Pohybem posuvníku po číselné ose můžete vybrat nějakou číselnou hodnotu.

Styly

• wx.SL_HORIZONTAL - zobrazí komponentu horizontálně (toto je standardní nastavení).
• wx.SL_VERTICAL - zobrazí komponentu vertikálně.
• wx.SL_LABELS - zobrazí popisky s minimální a maximální hodnotou.

Metody

Ovladače

import wx

class Slider(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(300, 150))

        panel = wx.Panel(self, -1)
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox = wx.BoxSizer(wx.HORIZONTAL)

        self.sld = wx.Slider(panel, -1, 200, 150, 500, (-1, -1), (250, -1), 
		wx.SL_AUTOTICKS | wx.SL_HORIZONTAL | wx.SL_LABELS)
        btn1 = wx.Button(panel, 1, 'Adjust')
        btn2 = wx.Button(panel, 2,  'Close')

        wx.EVT_BUTTON(self, 1, self.OnOk)
        wx.EVT_BUTTON(self, 2, self.OnClose)

        vbox.Add(self.sld, 1, wx.ALIGN_CENTRE)
        hbox.Add(btn1, 1, wx.RIGHT, 10)
        hbox.Add(btn2, 1)
        vbox.Add(hbox, 0, wx.ALIGN_CENTRE | wx.ALL, 20)
        panel.SetSizer(vbox)
        self.Centre()
        self.Show(True)

    def OnOk(self, event):
        val = self.sld.GetValue()
        self.SetSize((val*2, val))

    def OnClose(self, event):
        self.Close()

app = wx.App()
Slider(None, -1, 'slider.py')
app.MainLoop()

wx.ListBox

Oficiální dokumentace k wx.ListBox.

Komponenta wx.ListBox je vlastně seznam různých položek. Pokud je položek více, než se jich vejde do boxu, objeví se vertikální posuvník. Uživatel může vybrat jednu nebo více položek - to záleží na tom, jaký je nastaven styl. Vybrané řádky jsou viditelně označeny.

Styly

• wx.LB_SINGLE - vytvoří listbox, kde lze vybrat pouze jedna hodnota.
• wx.LB_MULTIPLE - vytvoří listbox, kde lze vybrat více hodnot.
• wx.LB_ALWAYS_SB - vždy bude vidět vertikální scrollbar.

Metody

Ovladače

import wx
from time import *

class Listbox(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(550, 350))

        zone_list = ['CET', 'GMT', 'MSK', 'EST', 'PST', 'EDT']

        self.full_list = {
            'CET': 'Central European Time',
            'GMT': 'Greenwich Mean Time',
            'MSK': 'Moscow Time',
            'EST': 'Eastern Standard Time',
            'PST': 'Pacific Standard Time',
            'EDT': 'Eastern Daylight Time'
        }

        self.time_diff = {
            'CET' : 1,
            'GMT' : 0,
            'MSK': 3,
            'EST': -5,
            'PST': -8,
            'EDT': -4
        }

        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        hbox3 = wx.BoxSizer(wx.HORIZONTAL)

        self.timer = wx.Timer(self, 1)
        self.diff = 0

        panel = wx.Panel(self, -1)

        self.time_zones = wx.ListBox(panel, 26, (-1, -1), (170, 130), 
		zone_list, wx.LB_SINGLE)
        self.time_zones.SetSelection(0)
        self.text = wx.TextCtrl(panel, -1, 'Central European Time', 
		size=(200, 130), style=wx.TE_MULTILINE)
        self.time = wx.StaticText(panel, -1, '')
        btn = wx.Button(panel, wx.ID_CLOSE, 'Close')
        hbox1.Add(self.time_zones, 0, wx.TOP, 40)
        hbox1.Add(self.text, 1, wx.LEFT | wx.TOP, 40)
        hbox2.Add(self.time, 1, wx.ALIGN_CENTRE)
        hbox3.Add(btn, 0, wx.ALIGN_CENTRE)
        vbox.Add(hbox1, 0, wx.ALIGN_CENTRE)
        vbox.Add(hbox2, 1, wx.ALIGN_CENTRE)
        vbox.Add(hbox3, 1, wx.ALIGN_CENTRE)
		
        panel.SetSizer(vbox)

        self.timer.Start(100)

        wx.EVT_BUTTON(self, wx.ID_CLOSE, self.OnClose)
        wx.EVT_LISTBOX(self, 26, self.OnSelect)
        wx.EVT_TIMER(self, 1, self.OnTimer)

        self.Show(True)
        self.Centre()

    def OnClose(self, event):
        self.Close()

    def OnSelect(self, event):
        index = event.GetSelection()
        time_zone = self.time_zones.GetString(index)
        self.diff = self.time_diff[time_zone]
        self.text.SetValue(self.full_list[time_zone])

    def OnTimer(self, event):
        ct = gmtime()
        print_time = (ct[0], ct[1], ct[2], ct[3]+self.diff, 
			ct[4], ct[5], ct[6], ct[7], -1)
        self.time.SetLabel(strftime("%H:%M:%S", print_time))


app = wx.App()
Listbox(None, -1, 'listbox.py')
app.MainLoop()

wx.SpinCtrl

Oficiální dokumentace k wx.SpinCtrl.

Pomocí této komponenty můžete zvyšovat nebo zmenšovat velikost nějaké hodnoty. Proto má na levé straně dvě tlačítka - nahoru a dolů. Uživatel může hodnotu vložit do textového pole, nebo použít k jejímu určení těchto tlačítek.

• wx.SP_ARROW_KEYS - uživatel může ke změně čísla v textovém poli použít směrové šipky.
• wx.SP_WRAP - pokud číslo v poli dosáhne maximální hodnoty, nastaví číslo na minimální a opačně.

Metody

Ovladače

import wx

class Converter(wx.Dialog):
    def __init__(self, parent, id, title):
        wx.Dialog.__init__(self, parent, id, title, size=(350, 310))

        wx.StaticText(self, -1, 'Convert Fahrenheit temperature to Celsius', (20,20))
        wx.StaticText(self, -1, 'Fahrenheit: ', (20, 80))
        wx.StaticText(self, -1, 'Celsius: ', (20, 150))
        self.celsius =  wx.StaticText(self, -1, '', (150, 150))
        self.sc = wx.SpinCtrl(self, -1, '',  (150, 75), (60, -1))
        self.sc.SetRange(-459, 1000)
        self.sc.SetValue(0)
        compute_btn = wx.Button(self, 1, 'Compute', (70, 250))
        compute_btn.SetFocus()
        clear_btn = wx.Button(self, 2, 'Close', (185, 250))

        wx.EVT_BUTTON(self, 1, self.OnCompute)
        wx.EVT_BUTTON(self, 2, self.OnClose)
        wx.EVT_CLOSE(self, self.OnClose)

        self.Centre()
        self.ShowModal()
        self.Destroy()

    def OnCompute(self, event):
        fahr = self.sc.GetValue()
        cels = round((fahr-32)*5/9.0, 2)
        self.celsius.SetLabel(str(cels))

    def OnClose(self, event):
        self.Destroy()

app = wx.App()
Converter(None, -1, 'Converter')
app.MainLoop()

wx.SplitterWindow

Oficiální dokumentace k wx.SplitterWindow.

Tato komponenta umožňuje uživateli rozdělit okno na dvě (popřípadě více) části. Pomocí myši lze dynamicky měnit velikost těchto částí. Rozdělení může být buď horizontální nebo vertikální.

Metody

import wx

class Splitterwindow(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(350, 300))

        quote = '''Whether you think that you can, or that you can't, you are
usually right'''

        splitter = wx.SplitterWindow(self, -1)
        panel1 = wx.Panel(splitter, -1)
        wx.StaticText(panel1, -1, quote, (100, 100), style=wx.ALIGN_CENTRE)

        panel1.SetBackgroundColour(wx.LIGHT_GREY)
        panel2 = wx.Panel(splitter, -1)
        panel2.SetBackgroundColour(wx.WHITE)
        splitter.SplitVertically(panel1, panel2)
        self.Centre()
        self.Show(True)

app = wx.App()
Splitterwindow(None, -1, 'splitterwindow.py')
app.MainLoop()

wx.ScrolledWindow

Oficiální dokumentace k wx.ScrolledWindow.

Tato komponenta je užitečná zejména tehdy, když chceme zobrazit něco většího, než je velikost obrazovky. V našem případě vykreslujeme velký obrázek. Když velikost obrázku bude větší než velikost okna, objeví se posuvníky.

import wx

class ScrolledWindow(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(500, 400))

        sw = wx.ScrolledWindow(self)
        bmp = wx.Image('programujte.png',wx.BITMAP_TYPE_PNG).ConvertToBitmap()
        wx.StaticBitmap(sw, -1, bmp)
        sw.SetScrollbars(20, 20, 55, 40)
        sw.Scroll(50,10)
        self.Centre()
        self.Show()

app = wx.App()
ScrolledWindow(None, -1, 'Programujte.com')
app.MainLoop()

Metoda SetScrollbars() vytváří vertikální a horizontální posuvník. Zavoláním metody Scroll() posuneme polohu posuvníků.

wx.Notebook

Oficiální dokumentace k wx.Notebook.

Pomocí komponenty wx.Notebook můžeme vytvářet záložky. Po kliknutí na záložku se zobrazí dané okno.

Styly

• wx.NB_LEFT - záložky budou nalevo.
• wx.NB_RIGHT - záložky budou napravo.
• wx.NB_TOP - záložky budou nahoře (toto je standardní nastavení).
• wx.NB_BOTTOM - záložky budou dole.

Metody

Ovladače

import wx
import wx.lib.sheet as sheet


class MySheet(sheet.CSheet):
    def __init__(self, parent):
        sheet.CSheet.__init__(self, parent)
        self.SetNumberRows(50)
        self.SetNumberCols(50)

class Notebook(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(600, 500))
        menubar = wx.MenuBar()
        file = wx.Menu()
        file.Append(101, 'Quit', '' )
        menubar.Append(file, '&File')
        self.SetMenuBar(menubar)

        wx.EVT_MENU(self, 101, self.OnQuit)

        nb = wx.Notebook(self, -1, style=wx.NB_BOTTOM)
        self.sheet1 = MySheet(nb)
        self.sheet2 = MySheet(nb)
        self.sheet3 = MySheet(nb)

        nb.AddPage(self.sheet1, 'Sheet1')
        nb.AddPage(self.sheet2, 'Sheet2')
        nb.AddPage(self.sheet3, 'Sheet3')

        self.sheet1.SetFocus()
        self.StatusBar()
        self.Centre()
        self.Show()

    def StatusBar(self):
        self.statusbar = self.CreateStatusBar()

    def OnQuit(self, event):
        self.Close()

app = wx.App()
Notebook(None, -1, 'notebook.py')
app.MainLoop()

wx.Panel

Oficiální dokumentace k wx.Panel.

wx.Panel je základní rodičovská komponenta pro ostatní komponenty. Normálně nejprve vytvoříme okno (např. wx.Frame), do něj vložíme wx.Panel a do toho již vkládáme ostatní komponenty. Nicméně můžeme různou kombinací více objektů wx.Panel vytvářet celkem zajímavý design. V následujícím příkladu použijeme celkem šest wx.Panelů.

import wx


class Panels(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)

        hbox = wx.BoxSizer(wx.HORIZONTAL)
        splitter = wx.SplitterWindow(self, -1)

        vbox1 = wx.BoxSizer(wx.VERTICAL)
        panel1 = wx.Panel(splitter, -1)
        panel11 = wx.Panel(panel1, -1, size=(-1, 40))
        panel11.SetBackgroundColour('#53728c')
        st1 = wx.StaticText(panel11, -1, 'Feeds', (5, 5))
        st1.SetForegroundColour('WHITE')

        panel12 = wx.Panel(panel1, -1, style=wx.BORDER_SUNKEN)
        panel12.SetBackgroundColour('WHITE')

        vbox1.Add(panel11, 0, wx.EXPAND)
        vbox1.Add(panel12, 1, wx.EXPAND)

        panel1.SetSizer(vbox1)

        vbox2 = wx.BoxSizer(wx.VERTICAL)
        panel2 = wx.Panel(splitter, -1)
        panel21 = wx.Panel(panel2, -1, size=(-1, 40), style=wx.NO_BORDER)
        st2 = wx.StaticText(panel21, -1, 'Articles', (5, 5))
        st2.SetForegroundColour('WHITE')

        panel21.SetBackgroundColour('#53728c')
        panel22 = wx.Panel(panel2, -1, style=wx.BORDER_RAISED)

        panel22.SetBackgroundColour('WHITE')
        vbox2.Add(panel21, 0, wx.EXPAND)
        vbox2.Add(panel22, 1, wx.EXPAND)

        panel2.SetSizer(vbox2)

        toolbar = self.CreateToolBar()
        toolbar.AddLabelTool(1, 'Exit', wx.Bitmap('icons/stock_exit.png'))
        toolbar.Realize()
        self.Bind(wx.EVT_TOOL, self.ExitApp, id=1)

        hbox.Add(splitter, 1, wx.EXPAND | wx.TOP | wx.BOTTOM, 5)
        self.SetSizer(hbox)
        self.CreateStatusBar()
        splitter.SplitVertically(panel1, panel2)
        self.Centre()
        self.Show(True)


    def ExitApp(self, event):
        self.Close()


app = wx.App()
Panels(None, -1, 'Panels')
app.MainLoop()

Analýza kódu:

hbox = wx.BoxSizer(wx.HORIZONTAL)
splitter = wx.SplitterWindow(self, -1)

Pomocí wx.SplitterWindow rozdělíme naše okno na dvě části.

Jeden panel bude nalevo a druhý na pravé straně okna. Každý panel v sobě bude mít další dva panely. Jeden bude tvořit hlavičku a ten druhý zabírat zbytek prostoru. To je dohromady šest panelů.

panel11 = wx.Panel(panel1, -1, size=(-1, 40))
panel11.SetBackgroundColour('#53728c')
st1 = wx.StaticText(panel11, -1, 'Feeds', (5, 5))
st1.SetForegroundColour('WHITE')
... 
vbox1.Add(panel11, 0, wx.EXPAND)

Zde vytváříme hlavičku, což je vlastně panel. Tento panel je vysoký 40 px a jeho barva je tmavě modrá (#53728c). Do hlavičky vložíme jeden objekt komponenty wx.StaticText.