[[oktatas:programozás:python:wxpython_gui|< wxPython]]

====== wxGlade ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2020, 2021
  * Licenc: GNU Free Documentation License 1.3
  * Web: https://szit.hu

===== A wxGlade =====

A wxGlade egy **vizuális tervező** eszköz, wxWidgets, wxPython programok írásához. 
A wxGlade használható a szerkesztővel párhuzamosan. A generált kódba 
beleilleszt olyan jelölőket, amiből láthatjuk, hogy mi az amit ő szerkeszt és
mit szerkeszthetünk mi.


Webhely:
  * https://github.com/wxGlade/wxGlade/ (2021)
  * http://wxglade.sourceforge.net/     (2021)
===== Telepítés Windowson =====

Követelmény egy telepített Python3. Függőség telepítése:

  pip install wxpython

A wxGlade csomagot letöltjük a weboldalról, kicsomagoljuk:
  * https://sourceforge.net/projects/wxglade/

===== Telepítés Linuxon =====

wxPython függőségek telepítése:
  apt install libgtk-3-dev

Csomagból:
  apt install wxglade

===== Indítás =====

==== Linuxon ====

  * Start > Programozás > wxGlade

==== Windowson ====

  * Keressük meg a kicsomagolt könyvtárban a wxglade.pyw állományt.
  * wxglade.pyw
===== Képernyőkép =====

==== wxGlade 0.8 ====


{{:oktatas:programozas:python:wxpython_gui:wxglade_linux.png|}}

==== wxGlade 0.9 ====

{{:oktatas:programozas:python:wxpython_gui:wxglade_windows.png|}}

===== Fejlesztői környezet =====

Ajánlás:
  * wxGlade
  * PyCharm

A **PyCharm** és a **wxGlade** nagyon jól kiegészítik egymást. 
A wxGlade felületein fejlesztés közben tudjuk a kódot 
szerkeszteni, amíg a kódot a PyCharm-ban írjuk.

===== Frame =====

Tegyünk fel egy keretet:
  * Add Frame

A Windows ikonsor, első ikonja.

Írjuk ki a forráskódot. 

Legyen kijelölve a fanézetben a "Application", majd
kattintás:
  * "Generate Source
  * Language: Python
  * Mark code blocks [✔]


A generált forráskód:
<code python wxglade_out.py>
#!/usr/bin/env python
# -*- coding: UTF-8 -*-
#
# generated by wxGlade 0.9.6 on Mon Jul 27 15:01:08 2020
#

import wx

# begin wxGlade: dependencies
# end wxGlade

# begin wxGlade: extracode
# end wxGlade


class MyFrame(wx.Frame):
    def __init__(self, *args, **kwds):
        # begin wxGlade: MyFrame.__init__
        kwds["style"] = kwds.get("style", 0) | wx.DEFAULT_FRAME_STYLE
        wx.Frame.__init__(self, *args, **kwds)
        self.SetSize((400, 300))

        self.__set_properties()
        self.__do_layout()
        # end wxGlade

    def __set_properties(self):
        # begin wxGlade: MyFrame.__set_properties
        self.SetTitle("frame")
        # end wxGlade

    def __do_layout(self):
        # begin wxGlade: MyFrame.__do_layout
        sizer_1 = wx.BoxSizer(wx.VERTICAL)
        sizer_1.Add((0, 0), 0, 0, 0)
        self.SetSizer(sizer_1)
        self.Layout()
        # end wxGlade

# end of class MyFrame

class MyApp(wx.App):
    def OnInit(self):
        self.frame = MyFrame(None, wx.ID_ANY, "")
        self.SetTopWindow(self.frame)
        self.frame.Show()
        return True

# end of class MyApp

if __name__ == "__main__":
    app = MyApp(0)
    app.MainLoop()

</code>

Azok a kódrészek, amikhez nem nyúlhatunk meg vannak jelölve így:
<code python>
# begin wxGlade: Valami leírás

# end wxGlade:
</code>

Amit ezen kívül írunk az csak egy esetben marad meg.
  * Legyen kijelölve fastruktúra nézetben az "Application".
  * Keep user code [✔]

{{:oktatas:programozas:python:wxpython_gui:applicationselected.png|}}


A "**Keep user code**" legyen kipipálva. Ha ez ki van pipálva és 
generálunk egy új kódot a **# begin wxGlade** és **# end wxGlade**
részen kívüli részt nem fogja törölni a generátor.


{{:oktatas:programozas:python:wxpython_gui:keep_user_code_selected.png|}}


Ha ezt így beállítjuk a párhuzamosan tudunk dolgozni a wxGlade
tervezővel és egy kódszerkesztővel, vagy fejlesztői környezettel
(például PyCharm, Geany).

<note>A generált app.py forráskódot ne szerkesszük, azt a wxGlade mindig újraírja.</note>
===== Példa program kinézet =====

Az alábbiakban egy egyszerű alakalmazást látunk a következő osztályok felhasználásáva:

  * wxApp
  * wxFrame
  * wxButton
  * wxTextCtrl
  * wxBoxSize

{{:oktatas:programozas:python:wxpython_gui:haromszog_wxglade.png|}}



===== Slot =====

A Slot a wxGlade felület saját tárolója. A wxWidgets programozói könyvtár nem tartalmaz ilyen
tárolót. A Slot jelzi, hogy oda tehetünk widgest komponenseket.

{{:oktatas:programozas:python:wxpython_gui:wxglade_slot.png|}}

A Slotokban helyezhetünk el vezérlőket (gomb, beviteli doboz stb.).
A Slotokat a méretezők (angolul Sizers) felett, jobb egérrel 
kattintva tudunk felvenni. A Slotnak mindig egy méretezőből kell
kiindulnia. Ha felteszünk egy méretezőt, minimum 1 Slot-ja lesz.
Ha több van, akkor a Slot felett jobb egér gombbal kattintva törölhető.

Ezek alapján, elmondhatjuk, hogy a slotokat sosem látjuk viszzont
a forráskódban. 

===== Sizer =====

A méretezők, angolul Sizer, egy-egy wxwidgets komponens, a vezérlők elhelyezését,
méretezését szabályozzák.

A wxGlade-ben a feltehető méretezőkből kettő van:
  * BoxSizer
  * GridSizer

Ezek ugyan megfelelnek két wxWidgets méretezőnek,
de a "Properties" ablakban válthatunk a wxWidgets méretezői között. 
A "Properties" a következő méretezőket tartalmazza:

  * wxBoxSizer
  * wxStaticBoxSizer
  * wxWrapSizer
  * wxGridSizer
  * wxFlexGridSizer
  * wxGridBagSizer

A feltehető komponensek közül, célszerű a grid jellegű méretezők esetén, a GridSizer választása,
a többi esetben maradhat a BoxSizer.

{{:oktatas:programozas:python:wxpython_gui:meretezotipusok.png|}}


===== Vezérlők =====

  * A vezérlőket mindig a **fastruktúra** vagy a tervező ablakra kell húzni. 
    * Figyelem: Csak Slot területre húzhatunk vezérlőt.
  * Másolás: 
    * 1) A fastruktúrában a vezérlők másolhatók egérhúzással.
    * 2) A tervezőablakban egérhúzással.
  * Mozgatás: Ha áthelyezést szeretnénk, akkor Shift nyomva tartása mellett húzzunk egérrel.

A másolás és a mozgatás, mindig Slotok között történhet. Mindig Slotból, slotba.

{{:oktatas:programozas:python:wxpython_gui:vezerlokelhelyezese.png|}}

===== StaticText =====

A StaticText felirata (Label) a SetLabel() függvénnyel írható. 
A wxGlade tervező felületen be kell állítani az attribútumnak:
  * Properties > Common > Store as attribute [✔]

===== TextCtrl =====

Váltás jelszó stílus és normál stílus között:

<code python>
self.settingsPanel.mariadbPasswordText.SetWindowStyle(wx.NORMAL)
self.settingsPanel.mariadbPasswordText.SetWindowStyle(wx.TE_PASSWORD)
</code>


===== ToggleButton =====

Állapot lekérdezése:

<code python>
if event.GetEventObject().GetValue():
    # amit tenni akarunk
</code>


===== Külön osztályba rendezés =====

Nagyobb program esetén célszerű külön osztályba rendezni a programunk
egyes komponenseit. 

Ehhez nem kell mást tennünk, mint a vizuális szerkesztőben, a "Properties"
ablakban, kikeressük a "**Class**" mezőt. Legyen például egy 
panel, ekkor ezen a helyen ezt látjuk: wxPanel. Ezt írjuk át arra a névre,
amit szeretnénk látni. 

A "Tree" ablakban pedig válasszuk ki az "Application" gyökércsomópontot,
majd a "Properties" ablakban, keressük meg a "**Separate file for each class**"
rádiógombot. 

A "Properties" ablakban, az **Output path** mezőbe ilyenkor egy könyvtár
legyen beállítva, fájl helyett. A könyvtárnak léteznie kell.

Az indítandó fájl ilyenkor az app.py. 


A lépések sorra:

  - Tree > Kivánt komopens
  - Properties > Common > Class: Sajtnev
  - Tree > Application
  - Properties > (o) Separate file for each class
  - Properties > Output path: ./src

Ezek után, ha kódot generálunk, akkor külön állományokba fog minden
osztályt tenni, aminek a nevét átírtunk.

Megjegyzés: Ha MVC-vel dolgozunk, akkor ./src/views könyvtárat állítsunk be,
vagy mentsük az src/views könyvtárba a wxGlade fájlt.

A program mindig a wx.App osztályból származtatott objektummal indul. 
Alapesetben, ez egy app.py nevű fájlban található. 

Ha egy kontroller fájlból magunk szeretnénk indítani az alkalmazást, a
következőket tegyük:
  * Jelöljük ki az "Application" a fanézetben. 
  * A "Properties" ablakban, "Application" fül.
  * Vegyük ki a pipát a Name és Class feliratok mellett:
    * Name  [ ]
    * Class [ ]


===== Git =====

Nézzük meg mit érdemes a .gitignore fájlba írni a wxGlade és a PyCharm 
használata mellett.

Legyen egy példa könyvtárszerkezet:
<code>
projekt01/
  |--.git/
  |--.idea/
  |--src/
  |--.gitignore
  `--program.wxg
</code>

Lehetséges .git ignore fájl:

<code valami .gitignore>
.idea/
*~
__pycache__/

</code>







===== Amire ügyelni kell =====

==== Függvény és objektumnév egyezés ====

Ha van egy nyomógombunk aminek a neve calcButton,
nem lehet ugyanezen a néven az eseménykezelő metódus. 
A wxGlade ezt nem ellenőrzi.

Használjuk eseménykezelőnek ilyenkor például: 
  OnClickCalcButton

Vagy Python elnevezési konvencióval:
  on_click_calc_button

Ilyen esetben az előnézet kérése, hibába ütközik.
A részletes nézetben, megmutatja a hibát.

==== Eseménykezelő függvény átnevezése ====

Ha átnevezzük az eseménykezelőt wxGlade felületen, akkor
létrejön egy új függvény az újonnan beállított néven,
de a régi függvény is megmarad.


==== wxStaticText igazítása wxGlade 0.9.x-ben ====

A Widget fülön ha beállítunk bármit, a szöveg
balra igazítva marad, nem követi a beállítást.

A beállítás azonban működik. Ha előnézetet nézünk, akkor ott látszik.

===== Linkek =====

  * Dokumentáció:
    * http://wxglade.sourceforge.net/docs/index.html (2020)