Using SizersΒΆ

Sizers is the technique used in wxPython to control the layout of components. However, using sizers directly requires writing code that is difficult to understand. Here is a simple example:

class SizersWxExampleDialog(wx.Dialog):

    def __init__(self, parent):
        wx.Dialog.__init__(self, parent)
        button1 = wx.Button(self, label="button 1")
        button2 = wx.Button(self, label="button 2")
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(button1, flag=wx.EXPAND|wx.ALL, border=5)
        sizer.Add(button2, flag=wx.EXPAND)
        self.SetSizerAndFit(sizer)

We have two buttons that are laid out vertically. It looks like this:

_images/sizers_wx.png

The problem is that this is not obvious to figure out by taking a quick look at the code. That is because the structure of the components is not reflected in the structure of the code. This problem grows larger the more components we have in our dialogs.

humblewx allow us to define everything about a component in one place. The hierarchical structure of XML also makes it easier to see how the components are laid out. Let’s see what the above example looks like rewritten using humblewx:

class SizersHumbleWxExampleDialog(humblewx.Dialog):

    """
    <BoxSizerVertical>
        <Button label="button 1" border="ALL" />
        <Button label="button 2" />
    </BoxSizerVertical>
    """

    def __init__(self, parent):
        humblewx.Dialog.__init__(self, humblewx.Controller, parent)

Quickly we can see that this dialog has two buttons and that they are laid out vertically.

Here is a larger example demonstrating what we can do with sizers.

class SizersFullExampleDialog(humblewx.Dialog):

    """
    <BoxSizerVertical>

        <StaticText border="TOP" label="Demonstrating proportion:" />
        <BoxSizerHorizontal>
            <Button label="button 1" proportion="1" />
            <Button label="button 2" proportion="1" />
            <Button label="button 3" proportion="2" />
        </BoxSizerHorizontal>

        <StaticText border="TOP" label="Demonstrating stretch spacer:" />
        <BoxSizerHorizontal>
            <Button label="button 1" />
            <StretchSpacer />
            <Button label="button 2" />
        </BoxSizerHorizontal>

        <StaticText border="TOP" label="Demonstrating spacer:" />
        <BoxSizerHorizontal>
            <Button label="button 1" />
            <Spacer />
            <Button label="button 2" proportion="1" />
        </BoxSizerHorizontal>

        <StaticText border="TOP" label="Demonstrating grid:" />
        <FlexGridSizer columns="2" align="ALIGN_CENTER">
            <Button label="button 1" />
            <Button label="button 2" />
            <Button label="button 3" />
            <Button label="button 4" />
        </FlexGridSizer>

    </BoxSizerVertical>
    """

    def __init__(self, parent):
        humblewx.Dialog.__init__(self, humblewx.Controller, parent)

The dialog looks like this:

_images/sizers.png