• Szerző: Sallai András
• Copyright © Sallai András, 2020, 2021
• Licenc: GNU Free Documentation License 1.3
• Web: https://szit.hu

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)

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/

wxPython függőségek telepítése:

apt install libgtk-3-dev

Csomagból:

apt install wxglade

• Start > Programozás > wxGlade

• Keressük meg a kicsomagolt könyvtárban a wxglade.pyw állományt.
• wxglade.pyw

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.

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:

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()

Azok a kódrészek, amikhez nem nyúlhatunk meg vannak jelölve így:

# begin wxGlade: Valami leírás
 
# end wxGlade:

Amit ezen kívül írunk az csak egy esetben marad meg.

• Legyen kijelölve fastruktúra nézetben az „Application”.
• Keep user code [✔]

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.

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

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

• wxApp
• wxFrame
• wxButton
• wxTextCtrl
• wxBoxSize

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.

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.

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.

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

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 [✔]

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

self.settingsPanel.mariadbPasswordText.SetWindowStyle(wx.NORMAL)
self.settingsPanel.mariadbPasswordText.SetWindowStyle(wx.TE_PASSWORD)

Állapot lekérdezése:

if event.GetEventObject().GetValue():
    # amit tenni akarunk

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:

1. Tree > Kivánt komopens
2. Properties > Common > Class: Sajtnev
3. Tree > Application
4. Properties > (o) Separate file for each class
5. 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 [ ]

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:

projekt01/
  |--.git/
  |--.idea/
  |--src/
  |--.gitignore
  `--program.wxg

Lehetséges .git ignore fájl:

.gitignore

.idea/
*~
__pycache__/

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.

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.

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.

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