SizerHack

(12-Jun-2007)

SizerHack is a small application I wrote while investigating random generated interfaces. In my opinion, it could be useful to teach wxPython newbies how to deal with sizers and interfaces layouts in a more "visual" way.

Basic Concepts

Hereafter I present some features of SizerHack, explaining the terminology I use later on in this part of the documentation.

Layout Generation

SizerHack generates randomly a layout in a separate frame. Using the nesting level you provide (see next point), it creates a layout where widgets types are chosen randomly from a stock of 10 different standard wxPython controls, added to their sizers using a randomly selected proportion (either 0 or 1) and a randomly selected flag (either 0 or wx.EXPAND).
Selecting a nesting level greater than 1 (which is the default), SizerHack will generate a random layout in which sizers are nested.
In order to avoid a too big separate frame (in term of wx.Size), the proportion keyword has a probability distribution of 80% for 0 and 20% for 1 (which means 80% of the times a widget or a sizer will be added to their containing sizers with a proportion of 0).
In order to generate a new layout, just select the menu "Edit" => "Create New Layout" or hit "Ctrl+L".

Nesting Levels

SizerHack allows the user to select the nesting level for sizers: this means the randomly generated layout in the separate frame will have sizers nested in sizers nested in sizers... and so on, depending on the nesting level you have chosen.
In order to change the nesting level, just select the menu "Edit" => "Set Nesting Level" or hit "Ctrl+N".

Sizer Exposure

There are some cases where being able to see the sizer is helpful, such as at design time. SizerHack allows you to see the sizers/widgets hierarchy on screen, by painting the sizers/widgets boundaries. Just select the menu "Hints" => "Draw Sizers" or hit "Ctrl+D" to see them. Sizers with the wx.HORIZONTAL orientation are painted in solid BLUE, while their children widgets are surrounded by a dotted blue line. Sizers with the wx.VERTICAL orientation are in RED.

Description Of Sample Usage

Once launched, SizerHack will show you a randomly generated layout in a new separate frame (with wx.STAY_ON_TOP flag). By default, SizerHack creates the initial layout using a nesting level of 1. You can change this value by choosing the menu "Edit" => "Set Nesting Level" or hit "Ctrl+N".

In the SizerHack TreeList control, you will see 2 items, namely the start of the layout hierarchy in the separate frame. These 2 items represent a wx.Frame and a wx.Panel, which are fixed for every layout SizerHack generates.
Now, the panel has always a sizer associated with it: what you should do, is right-click on the wxPanel item and choose "Add Sizer As Child" from the popup menu.

A new line in the TreeList control appears: it contains 3 wx.Choices, asking you to choose from them: these wx.Choices represent the sizer orientation, proportion and flag that SizerHack has used to assign this sizer to wxPanel.
If you choose the correct answer from the wx.Choices, the icon next to them will be a green "Ok" bitmap, otherwise it will be a red "Wrong" cross.

Now that you have added the main sizer, by looking at the separate frame and playing with it (resize it to see), you should decide which widgets (or sub-sizers) have been added to the main sizer. If you think a widget is a direct child of the main sizer, simply Drag and Drop the widget from the separate frame to the item that represents the main sizer in the TreeList control. If your answer is correct, a new line appears in the TreeList control, asking you to fill 2 wx.Choices representing the proportion and flag used to add this window to the main sizer.

In case of nested sizers, once you decide a sub-sizer is a child of the main sizer (or a sub-sub-sizer is a child of a sub-sizer), just right click on the main sizer (or on the sub-sizer) and choose "Add Sizer as Child" from the popup menu.

If you are lost, or you don't recognize at a glance which kind of layout you are presented, you have 2 alternatives:

1. Select the menu "Hints" => "Draw Sizers" to see on screen how the sizers and widgets are arranged;
2. Right click on any item in the TreeList control (except the wxFrame) and, from the popup menu, choose "Give Help!". SizerHack will either uncover one child of the selected item or will fill one of the wx.Choices for you.

Once all the hierarchy is complete and the wx.Choices are filled correctly, SizerHack will congratulate with you for your wx.SizerSkills!

	Download SizerHack Python Files