szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[:oktatas:programozás:python:wxPython_gui|< wxPython]]

====== wxPython nyelv ======

  * **Szerző:** Sallai András
  * Copyright (c) 2020, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== A wxPythonról =====

A wxPython egy több platformos **GUI programozói könyvtár** készlet,
amelyet Python nyelven programozhatunk. A wxPython segítségével
valódi natív alkalmazások hozhatok létre, amelyek kis változtatás,
vagy változtatás nélkül használhatók Windows, macOS és Linux
rendszeren.

Ennek a dokumentumnak az írásánál a wxPython stabil kiadása,
4.1.0. 

A wxPython modulok a C++ nyelven írt, wxWidgets keresztplatformos,
nyílt forráskódú programozói könyvtárból származnak. 
A wxPython a wxWidgets-hez hasonlóan nyílt forráskódú, ami azt 
jelenti hogy bárki számára szabadon használható, módosítható.

Mivel a programozási nyelv Python, a wxPython programok 
könnyen írhatók és könnyen érthetőek. 

A **Phoenix**, a wxPython az alapoktól kezdve újraírt változata,
azzal a szándékkal, hogy jobb és gyorsabb legyen mint korábban.
A Phoenix-ből eltávolítása kerültek felesleges részek, karbantarthatóbb,
bővíthetőbb lett. A Phoenix még fejlesztés alatt áll, aki 
használja, úgynevezett pillanatképet használ a megvalósításból. 

Néhány átszervezés, tisztítás és egyszerűsítés miatt a
wxPython és a Phoenix nem teljesen kompatibilis egymással,
szándékosan. A különbségek azonban, általában csekélyek,
egyes alkalmazások, akár módosítás nélkül is futhatnak.
Néhány helyen az osztályból elérés módját változtatták meg
a Phoenix rendszerben.

===== API =====

  * https://docs.wxwidgets.org/ (2020)
===== Helló Világ =====

<code python main.py>
import wx
 
program = wx.App(False)
ablak = wx.Frame(None, title='Helló Világ')
ablak.Show(True)
program.MainLoop()
</code>

  * wx.App(False)
    * Új alkalmazást hozunk létre
    * A False azt jelenti:
A szabványos kimenet és a szabványos hibakimenet (sys.stdout és sys.stderr) nem lesz átirányítva.
Ha wx.App(True, filename='uzenet.txt') formában használjuk, akkor egy print() 
utasítás kimenete az uzenet.txt állomány végéhez fűzödik. 
  * wx.Frame(None, title='Helló Világ')
    * Létrehozunk egy ablakkeretet.
    * False: ez a legfelső szintű ablak, nincs szülője. 
    * title='Helló Világ: ez jelenik meg az ablak címsorában.
  * ablak.Show(True):
    * Megjelenítjük az ablakot.
  * program.MainLoop()
    * A program folyamatosan fut


{{:oktatas:programozas:python:wxpython_gui:01_hellovilag_wxpython.png|}}


===== Gomb =====

<code python gomb.py>
import wx

app = wx.App()
frame = wx.Frame(None, title='Helló Világ')
button = wx.Button(frame, label="Mehet")
frame.Show(True)
app.MainLoop()
</code>

===== Gomb esemény =====

<code python gomb.py>
import wx

app = wx.App()
frame = wx.Frame(None, title='Helló Világ')
button = wx.Button(frame, label="Mehet")
def OnClickButton(event):
    frame.SetTitle('működik')
button.Bind(wx.EVT_BUTTON, OnClickButton)
frame.Show(True)
app.MainLoop()
</code>

Az ablak címsorának megváltoztatása:
<code python>
frame.SetTitle('működik')
</code>

===== Metódusban =====

<code python>
import wx

def main():
    app = wx.App()

    frame = wx.Frame(None)
    frame.SetSize(wx.Size(800,600))
    frame.Center()
    frame.SetTitle("Első program")
    frame.Show()

    app.MainLoop()

main()

</code>

  * frame.SetSize(wx.Size(800, 600))
    * Az ablak mérete: 800x600
  * frame.Center()
    * Az ablak középen jelenjen meg.
  * frame.SetTitle("Első program")
    * Az ablak címsorának beállítása


===== Osztály használata =====

A következő programban osztályt használunk az ablak létrehozására. 

<code python gomb.py>
import wx

class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)

class SimpleApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True

app = SimpleApp()
app.MainLoop()
</code>

A SimplaApp osztályban létrehoztunk egy OnInit() függvényt.
Ez automatikusan végrehajtódik futtatáskor.


===== Nyomógomb =====

A nyomógomb gyakori eszköz a felhasználói események figyelésére. 
A Button osztállyal egy gombot teszünk az ablakba. 
A gombnak csak a felirata lesz beállítva, ezét kitölti az egész ablakot.

<code python gomb.py>
import wx

class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        button = wx.Button(self, label="Mehet")

class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True

app = ButtonApp()
app.MainLoop()
</code>

Nézzük az új sort: button = wx.Button(self, label="Mehet").
  * button: Egy button nevű objektumot hozunk létre.
  * wx.Button: A Button osztályból hozzuk létre.
  * self: A keret a szülő objektum
  * label='Mehet': A gomb felirata

{{:oktatas:programozas:python:wxpython_gui:02_nyomogomb.png|}}

===== Osztály és eseménykezelés =====

A nyomógombok a kattintásra való reagálás nélkül nem sokat érnek. 
Nézzük, hogyan rendelhetünk egy végrehajtandó függvényt a gombhoz.

<code python gomb.py>
import wx

class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.button = wx.Button(self, label="Mehet")
        self.button.Bind(wx.EVT_BUTTON, self.OnClickButton)
    def OnClickButton(self, event):
        self.SetTitle('Működik')

class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True

app = ButtonApp()
app.MainLoop()
</code>

Nézzük az új sort: self.button.Bind(wx.EVT_BUTTON, self.OnClickButton).
  * self: A kereten elhelyezett gombról van szó
  * button: A button objektummal szeretnénk valamit csinálni.
  * Bind(): Függvényt rendelünk a button objektumhoz
    * wx.EVT_BUTTON: A nyomógomb kattintását figyeljük
    * self.OnClickButton: Ezt a függvényt rendeljük a button objektumhoz.


===== Gomb és beviteli mező =====

Ha két eszközt teszünk fel, azok alapértelmezettként egymáson jelennek meg.
Meghatározhatjuk a pozíciójukat a SetPosition() függvénnyel. 
A gomb mellett egy beviteli mezőt jelenítünk meg a TextCtrl osztállyal.


<code python bevitel.py>
import wx

class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text = wx.TextCtrl(self)
        self.text.SetPosition((10, 10))
        self.button = wx.Button(self, label="Mehet")
        self.button.SetPosition((10, 60))
        self.button.Bind(wx.EVT_BUTTON, self.OnClickButton)
    def OnClickButton(self, event):
        self.text.SetValue("42")

class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True

app = ButtonApp()
app.MainLoop()
</code>

A SetPosition() függvénynek egyetlen paramétere van, egy wx.Point típus.
Ez két módon adható meg:
  * (10, 10)
  * wx.Point(10, 10)

A példában mi az első formát használtuk.

{{:oktatas:programozas:python:wxpython_gui:03_gomb_es_bevitel_fixen.png|}}


===== Méretező =====

A widgetsek elhelyezése a SetPositon() függvénnyel fix elrendezést eredményez.
A méretezők lehetővé tesznek rugalmas, automatikus elrendezést, méretezést.
A programok widgets elemeit célszerű ezekkel meghatározni.

Itt a BoxSizer méretezőt fogjuk használni. Segítségével, két lehetőséget állíthatunk
be. Vagy függőlegesen egymás alá rendezzük a widgets elemeket, vagy vízszintesen,
egymás mellé.

{{:oktatas:programozas:python:wxpython_gui:04_elrendezes1.png|}}


<code python bevitel.py>
import wx

class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text = wx.TextCtrl(self)
        self.button = wx.Button(self, label="Mehet")
        self.button.Bind(wx.EVT_BUTTON, self.OnClickButton)
        vbox = wx.BoxSizer(wx.VERTICAL)
        vbox.Add(self.text)
        vbox.Add(self.button)
        self.SetSizer(vbox)
        self.Layout()
    def OnClickButton(self, event):
        self.text.SetValue("42")


class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True

app = ButtonApp()
app.MainLoop()
</code>

{{:oktatas:programozas:python:wxpython_gui:05_gomb_es_bevitel_elrendezovel.png|}}


Most változtassuk meg az elrendezést vízszintesre. 

{{:oktatas:programozas:python:wxpython_gui:06_elrendezes2.png|}}

Keressük meg a vbox = wx.BoxSizer(wx.VERTICAL) sort, majd cseréljük
a következőre:
<code python>
vbox = wx.BoxSizer(wx.HORIZONTAL)
</code>

Futtassuk a programot, nézzük meg.

{{:oktatas:programozas:python:wxpython_gui:07_gomb_es_bevitel_vizszintesen.png|}}

A méretezőbe több widgets elem is elhelyezhető. 



===== Elemek két sorba =====

Az elhelyezett widgets elemek Általában több sorból és oszlopból állnak.
Ebben a példában két sorba helyezünk el elemeket.

{{:oktatas:programozas:python:wxpython_gui:08_elrendezes03.png|}}

Készítünk vbox1 néven egy függőleges méretezőt, és két belső méretezőt,
amelyik vízszintes elrendezést használ. A méretezőket így egymásba ágyazzuk.

<code python ketsor.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)
        self.button1 = wx.Button(self, label="Egyik")
        self.button2 = wx.Button(self, label="Másik")
                
        self.vbox1 = wx.BoxSizer(wx.VERTICAL)
        self.hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        self.hbox2 = wx.BoxSizer(wx.HORIZONTAL)        
        self.vbox1.Add(self.hbox1)
        self.vbox1.Add(self.hbox2)
        self.hbox1.Add(self.text1)
        self.hbox1.Add(self.button1)
        self.hbox2.Add(self.text2)
        self.hbox2.Add(self.button2)
        
        self.SetSizer(self.vbox1)
        self.Layout()
    def OnClickButton(self, event):
        self.text.SetValue("42")


class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()

</code>

{{:oktatas:programozas:python:wxpython_gui:09_ketsoros04.png|}}

===== Plusz egy gomb =====

A harmadik sorba egy újabb gombot szeretnénk elhelyezni. 

{{:oktatas:programozas:python:wxpython_gui:10_elrendezes05.png|}}

Az ábrán azt látjuk, hogy nem hoztunk létre újabb vízszintes 
méretezőt. Ezt megtehetjük és működni fog. Ha később még több
elemre is számíthatunk a harmadik sorba, akkor viszont érdemes
ezt egy újabb méretezőbe tenni.

<code python plusz.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)
        self.button1 = wx.Button(self, label="Egyik")
        self.button2 = wx.Button(self, label="Másik")
        self.button3 = wx.Button(self, label="Harmadik")
                
        vbox1 = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
              
        vbox1.Add(hbox1)
        vbox1.Add(hbox2)
        vbox1.Add(self.button3)
        hbox1.Add(self.text1)
        hbox1.Add(self.button1)
        hbox2.Add(self.text2)
        hbox2.Add(self.button2)
        
        self.SetSizer(vbox1)
        self.Layout()
    def OnClickButton(self, event):
        self.text.SetValue("42")


class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()
</code>

{{:oktatas:programozas:python:wxpython_gui:11_harmadik_sor.png|}}

===== DoLayout függvény =====

Most, hogy ilyen sok utasításunk van, az elrendezést egy külön függvénybe 
rendezzük.

<code python kulon.p>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)
        self.button1 = wx.Button(self, label="Egyik")
        self.button2 = wx.Button(self, label="Másik")
        self.button3 = wx.Button(self, label="Harmadik")
        
        self.DoLayout()
        
    def DoLayout(self):
        vbox1 = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
             
        vbox1.Add(hbox1)
        vbox1.Add(hbox2)
        vbox1.Add(self.button3)
        hbox1.Add(self.text1)
        hbox1.Add(self.button1)
        hbox2.Add(self.text2)
        hbox2.Add(self.button2)
        
        self.SetSizer(vbox1)
        self.Layout()

    def OnClickButton(self, event):
        self.text.SetValue("42")


class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()
</code>

===== Arány =====

Térjünk vissza az egyetlen widget soros programunkhoz. 
Szeretnénk, ha két widget kitöltené az ablakban a rendelkezésre álló helyet.
El kell döntenünk, milyen arányban töltse ki a widget a rendelkezésre álló helyet.
Lehet 1:1, 1:2, vagy ami éppen tetszik.

{{:oktatas:programozas:python:wxpython_gui:12_elrendezes06.png|}}

{{:oktatas:programozas:python:wxpython_gui:13_elrendezes07.png|}}


Lehet 0:1 arány is. Ilyenkor a 0 aránnyal rendelkező widget 
marad alapértelmezett méretű, a másik widget pedig kitölti a
maradék helyet.


Ehhez ki kell egészítenünk a kódot. A példában, az első elem számára 1,
a második elem számára 2-t állítunk be.

<code python>
vbox.Add(self.text1, 1)
vbox.Add(self.button1, 2)
</code>

Ahogy látjuk, az Add() függvénynek egy második paramétert adtunk meg.


A teljes kód:
<code python arany.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text1 = wx.TextCtrl(self)
        self.button1 = wx.Button(self, label="Egyik")

        vbox = wx.BoxSizer(wx.HORIZONTAL)
        vbox.Add(self.text1, 1)
        vbox.Add(self.button1, 2)
        
        self.SetSizer(vbox)
        self.Layout()

    def OnClickButton(self, event):
        self.text.SetValue("42")


class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()
</code>

{{:oktatas:programozas:python:wxpython_gui:14_aranyos.png|}}

===== Arányok két sorral =====

A két sor widgetünk van, az egy sorban lévő beviteli mező és gomb nem töltik ki
a rendelkezésre álló helyet. Az eredmény ilyen:

{{:oktatas:programozas:python:wxpython_gui:14_elrendezes08.png|}}

De ezt szeretnénk:

{{:oktatas:programozas:python:wxpython_gui:16_elrendezes10.png|}}

A kész programablak:

{{:oktatas:programozas:python:wxpython_gui:15_elrendezes09.png|}}

Ez azért van, mert a vbox1 méretezőnek függőleges elrendezése van. 

A megoldás, ha a hbox1 és a hbox2 számára megmondjuk, hogy töltse ki a 
rendelkezésre álló helyet:

<code python>
vbox1.Add(hbox1, 0, wx.EXPAND)
vbox1.Add(hbox2, 0, wx.EXPAND)
</code>

Az arányokat, mindkét esetben 0 értéken hagyjuk.

Teljes kód:

<code python aranyok2.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)
        self.button1 = wx.Button(self, label="Egyik")
        self.button2 = wx.Button(self, label="Másik")

        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        vbox.Add(hbox1, 0, wx.EXPAND)
        vbox.Add(hbox2, 0, wx.EXPAND)
        hbox1.Add(self.text1, 1)
        hbox1.Add(self.button1, 2)
        hbox2.Add(self.text2, 1)
        hbox2.Add(self.button2, 2)
        
        self.SetSizer(vbox)
        self.Layout()

    def OnClickButton(self, event):
        self.text.SetValue("42")


class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()
</code>

A megfelelő eredmény:

{{:oktatas:programozas:python:wxpython_gui:17_elrendezes11.png|}}

===== Widget középre =====

Az előző munkánkhoz felteszünk egy gombot, harmadik sorként,
és szeretnénk középre igazítani. 

{{:oktatas:programozas:python:wxpython_gui:18_elrendezes12.png|}}

Ha az wx.EXPAND-ot használnánk, az egészet kitöltené. 
Helyette a wx.ALIGN_CENTER_HORIZONTAL állandót használjuk.

<code python>
vbox.Add(self.button3, 0, wx.ALIGN_CENTER_HORIZONTAL)
</code>


A teljes kód:

<code python kozep.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)
        self.button1 = wx.Button(self, label="Egyik")
        self.button2 = wx.Button(self, label="Másik")
        self.button3 = wx.Button(self, label="Másik")
 
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        vbox.Add(hbox1, 0, wx.EXPAND)
        vbox.Add(hbox2, 0, wx.EXPAND)
        vbox.Add(self.button3, 0, wx.ALIGN_CENTER_HORIZONTAL)
        hbox1.Add(self.text1, 1)
        hbox1.Add(self.button1, 2)
        hbox2.Add(self.text2, 1)
        hbox2.Add(self.button2, 2)
 
        self.SetSizer(vbox)
        self.Layout()
 
    def OnClickButton(self, event):
        self.text.SetValue("42")
 
 
class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()

</code>

Az eredmény:

{{:oktatas:programozas:python:wxpython_gui:19_elrendezes13.png|}}

===== Szegély =====

Szeretnénk 6 pixeles szegélyt minden widget köré.

<code python>
hbox1.Add(self.text1, 1, wx.ALL, 6)
hbox1.Add(self.button1, 2, wx.ALL, 6)
...
hbox2.Add(self.text2, 1, wx.ALL, 6)
hbox2.Add(self.button2, 2, wx.ALL, 6)
...
vbox.Add(self.button3, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 6)
</code>

A button3 objektum esetén már van egy harmadik paraméter, ezért
egy (|) pipe karakterrel elválasztva vezetjük be a wx.ALL
állandót. 

A wx.ALL a szegélyre vonatkozik. Azt jelenti minden oldalon.

Lehetséges értékek:
  * wx.ALL
  * wx.LEFT
  * wx.RIGHT
  * wx.TOP
  * wx.BOTTOM
Természetesen pipe karakterrel tagolva, ezekből is megadható több. 
Az Add() függvényünknek lett egy negyedik paraméter is, ami
megmondja hány pixel széles legyen a szegély.

<code python szegely.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)
        self.button1 = wx.Button(self, label="Egyik")
        self.button2 = wx.Button(self, label="Másik")
        self.button3 = wx.Button(self, label="Másik")
 
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        vbox.Add(hbox1, 0, wx.EXPAND)
        vbox.Add(hbox2, 0, wx.EXPAND)
        vbox.Add(self.button3, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 6)
        hbox1.Add(self.text1, 1, wx.ALL, 6)
        hbox1.Add(self.button1, 2, wx.ALL, 6)
        hbox2.Add(self.text2, 1, wx.ALL, 6)
        hbox2.Add(self.button2, 2, wx.ALL, 6)
 
        self.SetSizer(vbox)
        self.Layout()
 
    def OnClickButton(self, event):
        self.text.SetValue("42")
 
 
class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()
</code>

{{:oktatas:programozas:python:wxpython_gui:20_szegely.png|}}

===== Felirat középre =====

Cseréljük le a gombokat feliratokra, és tegyük azokat baloldalra.

<code python kozep.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.label1 = wx.StaticText(self, label="Egyik")
        self.label2 = wx.StaticText(self, label="Másik")
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)

        self.button1 = wx.Button(self, label="Mehet")
 
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        
        vbox.Add(hbox1, 0, wx.EXPAND)
        vbox.Add(hbox2, 0, wx.EXPAND)
        vbox.Add(self.button1, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 6)

        hbox1.Add(self.label1, 1, wx.ALL, 6)
        hbox1.Add(self.text1, 2, wx.ALL, 6)

        hbox2.Add(self.label2, 1, wx.ALL, 6)
        hbox2.Add(self.text2, 2, wx.ALL, 6)

        self.SetSizer(vbox)
        self.Layout()
 
    def OnClickButton(self, event):
        self.text.SetValue("42")
 
 
class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()

</code>

{{:oktatas:programozas:python:wxpython_gui:21_felirat01.png|}}

Látható, hogy a feliratok függőlegesen nincsenek középen a 
nyomógombhoz képest. 

Az idevonatkozó sorok:
<code python>
hbox1.Add(self.label1, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
...
hbox2.Add(self.label2, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
</code>


A teljes kód:
<code python kozepUjra.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.label1 = wx.StaticText(self, label="Egyik")
        self.label2 = wx.StaticText(self, label="Másik")
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)

        self.button1 = wx.Button(self, label="Mehet")
 
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        
        vbox.Add(hbox1, 0, wx.EXPAND)
        vbox.Add(hbox2, 0, wx.EXPAND)
        vbox.Add(self.button1, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 6)

        hbox1.Add(self.label1, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
        hbox1.Add(self.text1, 2, wx.ALL, 6)

        hbox2.Add(self.label2, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
        hbox2.Add(self.text2, 2, wx.ALL, 6)

        self.SetSizer(vbox)
        self.Layout()
 
    def OnClickButton(self, event):
        self.text.SetValue("42")
 
 
class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()
</code>

{{:oktatas:programozas:python:wxpython_gui:22_felirat02.png|}}


===== TextCtrl felirat jobbra =====

Szeretnénk a widgeten belül jobbra igazítani a szöveget. 
Ehhez a style=wx.ALIGN_RIGH beállítást használjuk.

<code python>
self.label1 = wx.StaticText(self, label="Egyik", style=wx.ALIGN_RIGHT)
self.label2 = wx.StaticText(self, label="Másik", style=wx.ALIGN_RIGHT)
</code>

A teljes kód:
<code python jobbra.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.label1 = wx.StaticText(self, label="Egyik", style=wx.ALIGN_RIGHT)
        self.label2 = wx.StaticText(self, label="Másik", style=wx.ALIGN_RIGHT)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)

        self.button1 = wx.Button(self, label="Mehet")
 
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        
        vbox.Add(hbox1, 0, wx.EXPAND)
        vbox.Add(hbox2, 0, wx.EXPAND)
        vbox.Add(self.button1, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 6)

        hbox1.Add(self.label1, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
        hbox1.Add(self.text1, 2, wx.ALL, 6)

        hbox2.Add(self.label2, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
        hbox2.Add(self.text2, 2, wx.ALL, 6)

        self.SetSizer(vbox)
        self.Layout()
 
    def OnClickButton(self, event):
        self.text.SetValue("42")
 
 
class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()

</code>

{{:oktatas:programozas:python:wxpython_gui:23_felirat03.png|}}

===== Helykitöltő =====

A beviteli mezőktől jobbra nem ártana több hely. 
Ezt helykitöltővel érjük el:

<code>
hbox1.Add((20, 20), 1)
...
hbox2.Add((20, 20), 1)
</code>

A teljes kód:

<code python hely.py>
import wx
 
class MainFrame(wx.Frame):
    def __init__(self, parent):
        super(MainFrame, self).__init__(parent)
        self.label1 = wx.StaticText(self, label="Egyik", style=wx.ALIGN_RIGHT)
        self.label2 = wx.StaticText(self, label="Másik", style=wx.ALIGN_RIGHT)
        self.text1 = wx.TextCtrl(self)
        self.text2 = wx.TextCtrl(self)

        self.button1 = wx.Button(self, label="Mehet")
 
        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        
        vbox.Add(hbox1, 0, wx.EXPAND)
        vbox.Add(hbox2, 0, wx.EXPAND)
        vbox.Add(self.button1, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 6)

        hbox1.Add(self.label1, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
        hbox1.Add(self.text1, 2, wx.ALL, 6)
        hbox1.Add((20, 20), 1)

        hbox2.Add(self.label2, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALL, 6)
        hbox2.Add(self.text2, 2, wx.ALL, 6)
        hbox2.Add((20, 20), 1)

        self.SetSizer(vbox)
        self.Layout()
 
    def OnClickButton(self, event):
        self.text.SetValue("42")
 
 
class ButtonApp(wx.App):
    def OnInit(self):
        frame = MainFrame(None)
        frame.Show()
        return True
 
app = ButtonApp()
app.MainLoop()
</code>

{{:oktatas:programozas:python:wxpython_gui:24_helykitolto.png|}}



===== Kurzor =====

<code python>
#!/usr/bin/python
#coding: utf-8

import wx

app = wx.App()

frame = wx.Frame(None)
frame.SetSize(wx.Size(800,600))
frame.SetCursor(wx.StockCursor(wx.CURSOR_MAGNIFIER))
frame.SetPosition(wx.Point(0,0))
frame.SetTitle("Első program")
frame.Show()

app.MainLoop()
</code>


===== Külső Linkek =====
  * http://wiki.wxpython.org
    * http://wiki.wxpython.org/Getting%20Started
    * http://wiki.wxpython.org/How%20to%20Learn%20wxPython
    * https://wiki.wxpython.org/wxPython%20by%20Example
Phoenix:
  * https://github.com/wxWidgets/Phoenix (2020)
  * https://pythonhosted.org/wxPython/ (2020)
  * https://wxpython.org/Phoenix/snapshot-builds/ (2020, pillanatképek)