Location>code7788 >text

Cross-platform desktop application development based on wxpython

Popularity：790 ℃/2024-10-29 12:06:30

I have written about this in the accompanying article, "TheResearch on building many different system terminal interfaces based on Python backendThe "introduced a variety of systems to deal with terminal interface development, which involves wxpython, is a very good native interface effect components, we can use its various interface controls, combined with the characteristics of the cross-platform operation of Python, for Windows, MacOS, Ubuntu and other Linux systems, to develop a set of interface effect of the same application system.

We can be based on VSCode + wxpython + wxFormBuilder combination to achieve the desktop side of the development , you can use wxFormBuilder to quickly generate some of the interface effects for reuse , wxFormBuilder is similar to WinForms inside the form designer , the completion of the design to generate Python classes can be generated after the code can be used directly in the project.

Here are the addresses of the relevant resources:

wxpython： /

wxFormBuilder： /wxFormBuilder/wxFormBuilder

and some case projects on Github:

/janbodnar/wxPython-examples

wxPython help documentation and examples:/wxPython4/extras

wxPython Basic Tutorial:https:///wxpython/

Before we start to introduce the WxPython interface components, let's first understand the interface effect of the case, and then gradually in-depth understanding. Since it can be run on different systems, we will take screenshots of the interface effect of MacOS and Windows system respectively to introduce it.

Here are some body interface elements created as a reference in different systems.

Interface effects in macOS:

Windows system interface effects:

The two interfaces are very similar, here contains commonly used menus, toolbars, status bar, multi-panel and multi-document interface interface and other interface elements, as the main framework interface, the rest according to different business, build a list of display interfaces, editing/viewing the record interface, and other conventional processing can be.

1, wxPython in the main class inheritance relationship

In order to study the various interface elements of wxpython, we need to understand a little bit about how they relate to each other.

The following is a detailed list of the inheritance relationships of the major classes in wxPython and some important classes:

1.

  • Base class, the foundation of all wxPython classes.

2.

  • Base class for handling events.
  • Primary Derivative Class:
    • (also used as a base class)

3.

  • Base class for all window classes.
  • Primary Derivative Class:
    • :: The main frame window.
    • : Dialog box window.
    • : panel that holds other controls.
    • :: MDI (Multi-Document Interface) parent window.
    • : MDI sub-window.
    • : Support for scrolling windows.

4.

  • The base class of the control.
  • Primary Derivative Class:
    • : button control.
    • : Text input box.
    • : checkbox.
    • : checkbox.
    • : list box.
    • : drop-down box.
    • : Slider control.
    • : Static text display control.
    • : Static bitmap display control.
    • : Selection box control.
    • : Tree control.
    • : List Controls

5.

  • Base class for layout management classes.
  • Primary Derivative Class:
    • : Align controls horizontally or vertically.
    • :: Grid layout.
    • :: Flexible grid layout.
    • : Layout containing static boxes.
    • : Layout manager for automatic line breaks.

6.

  • Menu Category.
  • Primary Derivative Class:
    • : Menu bar class.
    • : Popup menu class.

7.

  • Toolbar Classes.

8.

  • Status bar class.

9.

  • Tab control that allows users to switch between multiple pages.

10.

  • Customize the toolbar class to support multiple styles and features.

A RibbonBar toolbar effect is also provided, as follows

If we use SplitterWindow, then we can split the interface into several parts.

These classes provide the basic functionality of wxPython, enabling developers to build complex GUI applications. Each class has its own set of methods and properties. You can refer to the official wxPython documentation for specific usage and examples.

2. Interface code analysis of the case

After understanding the case interface, we can see how their interface code handles it.

class AUIDemoApp():
    """Multi-document main window with AUI management"""

    id_open = ()
    id_save = ()
    id_quit = ()

    id_help = ()
    id_about = ()

    def __init__(self, parent):
        # super(AUIDemoApp, self). __init__(None, title="AUI Multi-Document Interface", size=(1000, 700))

        .__init__(self, parent, style=wx.DEFAULT_FRAME_STYLE)
        ("AUI multi-document interface with menus, toolbars, status bar")
        ()
        ((224, 224, 224))  # Setting the window background color
        ((1000, 700))
        (0)  # Solve image loading problems

        self._init_ui()
        ()

This part is the initialization function of the main interface window, which sets the title, icon, background color, and size, etc. The _init_ui() function is used to initialize all the interface elements, such as the toolbar, menu bar, status bar, and the layout of the multi-document interface.

The main elements of the code to initialize the interface are shown below.

This is used here to control the display processing of multiple dockable panels. The code to initialize the menu bar is shown below.

    def _create_menubar(self):
        """Creating a menu bar"""

         = ()

        # File menu
        m = ()
        (self.id_open, "Open file")
        (self.id_save, "Save file")
        ()
        (self.id_quit, "Log out of the system")
        (m, "file")

        # (wx.EVT_MENU, self.on_open, id=self.id_open)
        # (wx.EVT_MENU, self.on_save, id=self.id_save)
        # (wx.EVT_MENU, self.on_quit, id=self.id_quit)

        # help menu
        m = ()
        (self.id_help, "Help Topics")
        (self.id_about, "over")
        (m, "hand")

        # (wx.EVT_MENU, self.on_help, id=self.id_help)
        # (wx.EVT_MENU, self.on_about, id=self.id_about)

        ()

The code handling for the status bar is shown below.

    def createStatusBar(self):
        # Creating a customized status bar
        self.status_bar = (self)
        (self.status_bar)
        self.status_bar.SetFieldsCount(3)  # Setting the number of fields
        self.status_bar.SetStatusText("Ready", 0)  # First field
        self.status_bar.SetStatusText("No document opened", 1)  # Second field

        # Get today's calendar
        calendar_today = getCalendar_today()
        self.status_bar.SetStatusText(calendar_today, 2)  # Third field

The toolbar interface code is initialized as shown below.

    def _create_toolbar(self, d="H"):
        """Creating Toolbars"""
        # Toolbar icons, using embedded images
        # bmp_open = ("wxpython/images/32/", wx.BITMAP_TYPE_PNG)
        bmp_open = 
        bmp_save = 
        bmp_help = 
        bmp_about = 

        if () in ["V", "VERTICAL"]:
            tb = (
                self,
                -1,
                ,
                ,
                agwStyle=aui.AUI_TB_TEXT | aui.AUI_TB_VERTICAL,
            )
        else:
            tb = (
                self, -1, , , agwStyle=aui.AUI_TB_TEXT
            )
        ((16, 16))

        (self.id_open, "show (a ticket)", bmp_open, "Open file")
        (self.id_save, "save (a file etc) (computing)", bmp_save, "Save file")
        ()
        (self.id_help, "hand", bmp_help, "hand")
        (self.id_about, "with respect to", bmp_about, "with respect to")

        ()
        return tb

where the commented code: bmp_open = ("wxpython/images/32/", wx.BITMAP_TYPE_PNG)

is the resource used to load the image path, sometimes we want to reduce the dependency of some common image files, we can put them in a unified place, using the code of the way to deal with the

As shown in the code below, PyEmbeddedImage is used to embed the Base64 code of the image directly.

book = PyEmbeddedImage(
    b"""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"""
)

A multi-document document object is placed in the main interface, just use the interface object as shown in the following code.

        # Creating AuiNotebook for Multi-Document Management
         = (
            self, style=aui.AUI_NB_CLOSE_ON_ALL_TABS | aui.AUI_NB_TAB_SPLIT
        )
        (, ().CenterPane())

If we want to initialize a form interface in AuiNoteBook component then as follows.

        # Creating the Initial Document Panel
        self.document_panel = DocumentPanel(self)
        icon = (wx.ART_FOLDER, wx.ART_OTHER, (16, 16))
        (self.document_panel, "Document", select=True, bitmap=icon)

Of course, we can further optimize the above example code, so that the contents of the toolbar and menu bar are dynamically generated according to the configuration of the interface, so that we can avoid the trouble of adding manually.

Subsequently will continue according to my Winform development framework of some interface design effect, further improve the processing of Wxpython component-based interface, build a Python back-end Web API or local multiple database operations based on the management of general-purpose application systems, including users, roles, organizations, permissions, logs, menus, dictionaries, attachments, and other basic framework content processing Effect.

<Previous Next>