|  |  | Getting Started Guide for Boa Constructor |  |  |

Next:Getting Started Guide for Boa Constructor Up:Getting Started Guide for Boa Constructor Previous:Adding File Menu Functionality

# 2.8 Creating an application window using sizers

Sizers are a great way to ensure that your GUI layout is nice and clean. They come in especially handy when you do not know exactly how much space a control needs and/or should be allowed to use, this can be the case when you internationalize your application (I18N) or for such controls as lists or grids where you like to give as much space as possible to them (or maybe as little as practical).

Please note that the following will just explain how to use sizers in Boa (note that this assumes version 0.6.x of Boa). For more detailed information about sizers you should check the wxPython documentation, the wxPython demo and you might also find the following links helpful (if not a must!) to understand sizers.

http://wiki.wxpython.org/index.cgi/UsingSizers
http://wiki.wxpython.org/index.cgi/LearnSizers1
http://wiki.wxpython.org/index.cgi/wxDesigner_20Sizer_20Tutorial

We will use a wx.Frame and create a screen for address information entry.

- Close all the source files in your editor, so not to add this to the application you created previously.
- On the palette, select the 'New' pane. Select the 'wx.Frame' button. This will create a new source file *(Frame1)*.
- Click on the Save button (or menu File/Save) and save it as AddressEntry.py.
- Select from the menu Edit the option Add module runner. This will add some code to your file so you can run it without having to have a separate wx.App file.
- Save the file and you can run this application, you will see just Frame1 in the title bar and a grey background.
- Select the AddressEntry pane. Start the Designer by clicking on the button .
- On the palette, select the 'Containers/Layout' pane. Click on the wx.Panel button to select it and click anywhere within the AddressEntry frame. This will drop the panel onto your frame.
- On the same palette pane click on the wx.BoxSizer button to select it and click anywhere on the wx.Panel you just added to your frame. You should see a yellow line around your panel.
- Post these changes and save the file and re-open the Designer.
- On the sizer pane, click on the boxSizer1 and rename it to e.g. bsMain.
- Bring the designer to the foreground (e.g. just click on the Designer tool bar button).
- Select the wx.ListCtrl control on the "List Controls" pane and drop it onto the Designer, this will automagically add it to the bsMain sizer.
- On the "Containers/Layout" pane select the wx.FlexGridSizer and drop it also onto the wx.Panel, which again will automagically add it to the bsMain sizer.
- Click on the "Sizers" pane and select the flexGridSizer1 and rename it to e.g. fgsFields.
- In the Inspector change the 'Cols' setting from '0' to '2' and the 'Rows' setting from '1' to '0', as we will have to columns of controls/widgets in this sizer.
- Post the changes, save the file and open the Designer again. I do this quit regurarely to ensure that I don't loose too much of my work if something should go wrong. It is also a good idea to just run the application to see how it looks.
- In the Inspector change the Name from 'Frame1' to 'AddressEntry' and the Title from 'Frame1' to 'Address entry form'.
- Select the wx.ListCtrl in the Designer and change the style from wx.LC_ICON to wx.LC_REPORT and on the "Props" pane click on (Columns) and then on the "..." to open the Collection Editor for the listctrl. Create the columns "First name, Last name, City and Country".
- Click on the "Sizers" pane and double click on bsMain to open it's Collection Editor. Then click on the self.listCtrl1 and change the Border from 0 to 2 (or what you find appropriate for a border around this control) and change Flag from 0 to wx.ALL | wx.EXPAND and change Proportion from 0 to 1. These changes will ensure that you have 2 pixels space around the listctrl and that it will use up as much space as is available. If you run this little application now you will see that the listctrl takes up all the available space.
- On the "Sizers" pane open the Collection Editor for the fgsFields sizer and add 12 new items, when you now look at the Designer it will show these items in red.
- From the "Basic Controls" Palette pane select the wx.StaticText control and drop it onto the top left red area and to the right of it drop a wx.TextCtrl and then repeat this until your Designer screen and the fgsFields collection editor look something along these lines.

- Make sure to rename the controls to names which make sense (i.e. firstName, lastName, address, postalCode, city and country).
- Now we need to set the Border, Flag and Proportion for each of these controls.
- For wx.StaticText I suggest: 2, wx.ALL | wx.ALIGN_CENTER_VERTICAL and 0
- For wx.TextCtrl I suggest: 2, wx.ALL | wx.EXPAND and 0
- On the "Sizers" pane you need to select the fgsFields sizer and make the second column growable which you can do from the Inspector "Props" pane by clicking on the "..." next to "(Growables)".
- And for this to take any effect you need to change the Flag for the fgsFields sizer in the bsMain sizer from 0 to wx.EXPAND.
- So, now you should see something like this in the Designer.

- If you run it at this point and resize the window you can see the sizers at work.
- You might also notice that you see scrollbars on the Address field and it is larger then other fields. For this you need to change it's style from 0 to wx.TE_MULTILINE and in the Designer you enlarge it to the hight you want to allocate for it.
- When you run the application you should see something along these lines.

- We will also need some buttons for this, so we can add, delete, save and close this form.
- For this open the Designer again and drop another flexGridSizer (I will name it fgsButtons) onto the "Sizers" tab and then add it to the bsMain sizer.
- Then add four items to the fgsButtons sizer and then drop wx.Button controls onto the red squares on the designer.
- In the sizer Collection Editor change the Border to 2, the Flag to wx.ALL for all these buttons.
- Then select the first button by double clicking its entry in the Collection Editor and in the Inspector "Constr" pane change the label from button1 to "" (blank) and the name from button1 to "add" and the Id to wx.ID_ADD.
- Repeat this for the others but name them delete, save and close and use the appropriate wx.ID_ entries (having access to the stock button ID's is new in Boa 0.6.0, it will only work if you blank the label.)

- You should now see something like the above when you run it.
- Obviously you only have the GUI code at this point and one would have to flesh all this with code for each of the buttons, but for the moment this goes beyond this tutorial.

Please note that the file generated during this example is also available in the directory "Examples\guide" under your Boa installation directory.

For coding guide lines you might also want to consult the wxPython style guide http://wiki.wxpython.org/index.cgi/wxPython_Style_Guide .

|  |  | Getting Started Guide for Boa Constructor |  |  |

Next:Getting Started Guide for Boa Constructor Up:Getting Started Guide for Boa Constructor Previous:Adding File Menu Functionality