Getting Started Guide for Boa Constructor Next:Using the Designer to set the Title Up:Getting Started Guide

for Boa Constructor Previous:Getting Started Guide for Boa Constructor

2 Tutorial Building your First Application

This section presents a short tutorial. The purpose of the tutorial is to familiarise you with the Boa Constructor development environment. This tutorial takes you stepbystep through the process of building a simple Text Editor, called Notebook. After working your way through this tutorial, you will understand enough to get productive with Boa Constructor. You will learn how to: Create an application. Create frames, menusand status bars. Create controls such as buttons, text entry fields Configure the controls to your requirements. Work with common dialogs. Design your own dialogs.

and labels.

2.1 Creating a new Application

Decide on a directory to hold the application. If necessary create the directory. Create a new application using the new application button shown below from the Palette. Application button tool tip is wx.APP

Save both the App1.py file and the Frame1.py file to the directory you created earlier. You can use the Save button on the Editor toolbar. Notice that the asterixes (*) disappear from the namewhen it is saved. These indicate that there are unsaved changes in the file. You now have an application, which just shows a blank frame. Use the Run Application button on the Editor toolbar to execute the application.

The above shows you in the Editor section the two new files

you created and saved.

Clicking on run button (yellow) an empty frame.

will

show you the result

of "your programming", i.e.

just

Getting Started Guide for Boa Constructor Next:Using the Designer to set the Title Up:Getting Started Guide for Boa Constructor Previous:Getting Started Guide for Boa Constructor

Getting Started Guide for Boa Constructor Next:Add a Status Bar Up:Getting Started Guide for Boa Constructor Previous:Creating a new Application

2.2 Using the Designer to set the Title

Select the Frame1 tab in the Editor to ensure that we are editing the Frame. Start the Designer, by clicking the designer button from the Editor toolbar.

The Frame will be displayed as a drawing area (initially the title will show Frame1 Two new panes will be displayed in the Editor labeled the Data pane and the Sizer pane. The Inspector Windowwill display the Constr or Constructor pane. This pane allows you to edit the size, position, style, variable nameand title of a component. Edit

you to edit the size, position, style, variable nameand title of a component. Edit the field called Title. Give the frame the nameNotebook, when pressing return you will see that the title of the Designer window has changed. You have to save the changes using the Post button. You press the Post button either on the Inspector toolbar or the Editor toolbar. The Designer Windowwill close. You will notice that the source code has been updated to reflect the title. The Editor shows that the Source Code is changed by asterix on the notebook tabs, so you need to press the save button.

Getting Started Guide for Boa Constructor Next:Add a Status Bar Up:Getting Started Guide for Boa Constructor Previous:Creating a new Application

Getting Started Guide for Boa Constructor Next:Add a MenuBar Up:Getting Started Guide for Boa Constructor Previous:Using the Designer to Set the Title

2.3 Add a Status Bar

The first component we will add to the application will be a status bar. A status bar is used to give information about a program when it runs. Wewill use the status bar to indicate to the user what is happening when slow actions occur, to give simple help messagesor other information you might want to show. Select the Frame1 tab in the Editor to ensure that we are editing the Frame. Start the Designer, by clicking the designer button from the Editor toolbar. The Frame will be displayed as a drawing area. On the Palette select the tab called Containers/Layout. This tab contains entries for components which are used with frames, the status bar is one of these. Move the mouseover the buttons. Balloon help should show, one of these buttons represents the wx.StatusBar control. This is the control we want. Select this button using the mouse. The button should change shading to indicate that it is pressed. The Palette contains a checkbox to show the currently selected component type. This should reflect wx.StatusBar.

Nowmove the mousecursor over the drawing frame. Press the mouseleft button in the drawing area. This will create a status bar in the frame. The status line within the Inspector will display on the left the nameof the current widget statusBar1, and on the right it shows which wxWidget class it is derived from, in this case wx.StatusBar . In the Inspector select the Properties pane. This pane is used to configure the properties of our status bar. Click to edit the value of Fields. The field will show a button with +++. Click the button. This opens the Collection Editor.

The Collection Editor is a tool, which is used to add multiple subcomponentsto components where required. Wewill add one field to the status bar, however you could add multiple fields. Press the New button on the Collection Editor. This creates a new field the status bar. This becomesthe current field in the Inspector. Edit the field Text. Set the namefrom Fields0 to status. The Collection Editor toolbar contains a Refresh button see the Inspector change in the Collection Editor window. within

. Press this button to

Close the Collection Editor window. Select the Designer window. Click the mouse anywhere in the drawing area to make the frame (Frame1) the current component. Select the properties pane in the Inspector. Edit the property StatusBar. The drop down menuwill show our new status bar. Select the status bar, this is necessary so that the frame can managethe status bar, i.e. its possition at the bottom of the screen and its size.

Update the source code with the changes using either Post button . Save the source code changes using the Save button on the Editor toolbar.

Getting Started Guide for Boa Constructor Next:Add a MenuBar Up:Getting Started Guide for Boa Constructor Previous:Using the Designer to Set the Title

Getting Started Guide for Boa Constructor Next:Adding the Text Control Up:Getting Started Guide for Boa Constructor Previous:Add a Status Bar

2.4 Add a MenuBar

The next component we are going to add to the application is a menubar. A menubar is a common component on windows programs. Our menubar will contain two entries, File and Help. Selecting one of these will display a dropdown menu. The user can select an option from the drop down menu. Select the Frame1 tab in the Editor to ensure that we are editing the Frame. Start the Designer, by clicking the designer button from the Editor toolbar. The Designer will add in the Editor window two additional panes, they are the Data and Sizer view. On the Palette select the tab called Utilities (Data). The dropdown menu(wx.Menu) is one of the components listed on that tab. Move the mouseover the buttons. Help tips show that one of these buttons represents the wx.Menucontrol. This is the control we want. Click on this button. The button should change shading to indicate that it is pressed. The Palette contains a checkbox to show the currently selected component type. This should say wx.Menu.

Nowclick the left mousebutton either in the Editors Data View or in the Designer, in which case you have to be carefull to ensure that you click on Frame1 area and not on the statusbar. The menuwill not be visible on the frame. However, there will now be an entry on the Data View. Repeat the procedure. You should now have two wx.Menusin the Data View, called menu1 and menu2. Select menu1using the mouse. The Inspector will now display the Nameand Title for menu1. Edit the nameof the first wx.Menuto call it menuFile. Call the second wx.Menu menuHelp. Set the titles to File and Help respectively. Double click the menuHelpentry in the Data View. This opens the Collection Editor. The Collection Editor is used to add items to our menus. Press the New button on the Collection Editor. This creates a new menuitem within the dropdown menu. This becomesthe current item in the Inspector. Edit the field Label. Set the namefrom Items0 to About and I would also recommend set the ItemId from ITEMS0 to ABOUT. to Edit the field Help String to Display general information about Notebook. The Collection Editor toolbar contains a Refresh button. Press this button to see the Inspector change in the Collection Editor window.

In the Inspector, select the Events Pane. This is the pane used to configure events. Weneed to configure the action which occurs when the About menuitem is selected. Whenthe About menuitem is selected, and event called EVT_MENU generated and is sent to our program. Wemust add a method to our class to handle this event.

The left hand side of the events pane shows the groups of events which are available. For the menuitem, there is only MenuEvent group. Select this group using the mouse. The right hand side of the events pane now shows the events in the selected group. For the menuitem, there is only one event EVT_MENU the MenuEvent group. in Doubleclick on this Event using the mouse. The bottom of the Events pane shows the event handlers in your application for the current component (the About menuitem). You should now have a new handler called OnMenuHelpAboutMenu. This is the nameof the method which will be invoked when the About option is selected from the Help menu. Notice the naming of the event handler. Boa Constructor generates the namesin this manner. The event is the last part (Menu). The component is the middle part and here it is the About subcomponentof the menuHelp component. Finally, Boa Constructor follows the convention of prefixing all event handlers with the word On. Close the collection Editor.

Nowwe must repeat the process to add options to the file

menu.

From the Data View in the Editor, double click on the menuFile item to open the Collection Editor. Add five new items. Select each menuitem in turn, and label them Open, Save, Save As, Close and Exit, and again I would recommend also change the ItemId. Enter some help text to for each menuitem. Press the Collection Editor refresh button to display the new labels. Select each menuitem in turn. For each item select the Events pane in the Inspector, and add an event handler for EVT_MENU each item. to Close the collection Editor.

Nowwe are going to create the menubar.

On the Palette window, select the Utilites (Data) pane. On this pane select the menubar component. Move the cursor over the Editor Data View. Click the left mousebutton on this pane to add a menubar called menuBar1 to the application. Double click on the menuBar1item to open its Collection Editor (as you can see on the image below you can keep multiple of these open). Add two items to the menubar using the collection Editor. Select Menus0, in the Inspector Constructor Pane, edit the Menu field. This is a popup menu, with three items, the wx.Menu() constructor, and our two dropdown menus, select the self.menuFile item and set the title to File. This makes the menumenuFile the first dropdown menuon the menubar. In the Collection Editor select the second item. Repeat the process to link Menus1to the Help dropdown menu, with the label Help. Select the main Frame, Frame1 on the Designer. The frame should now be the current

Select the main Frame, Frame1 on the Designer. The frame should now be the current control in the Inspector. Select the Properties pane (Props) in the Inspector. Edit the field MenuBar. This is a popup menu. Select your new menubar self.menuBar1. This property defines which menuBarto associate with the frame.

Save the changes using either Post button to close the Designer and let Boa generate the source code. Save the source code for your generated source file Frame1.py Run the program. You should now see the menusand the status bar. Whenyou select a menuoption, the help text should appear in the status bar.

Getting Started Guide for Boa Constructor Next:Adding the Text Control Up:Getting Started Guide for Boa Constructor Previous:Add a Status Bar

Getting Started Guide for Boa Constructor Next:Adding the File MenuFunctionality Previous:Add a MenuBar Up:Getting Started Guide for Boa Constructor

2.5 Adding the Text Control

The next task is to add the main text editing control to our frame. This control is called wx.TextCtrl. Open the Designer again to edit the frame, Frame1.py. On the palette, select the Basic Controls pane. Select the wx.TextControl. Hint: You can hold the mousepointer over each control to find out its name. Move your mousepointer to the Designer window, ensure that a Baloon help shows Frame1, then click the left mousebutton. A new text control will be drawn. Wedo not have to size the control. By default it will fill all the available area, i.e. between the status bar and the menubar. The default wx.TextControl is a single line entry. Wemust indicate to the control, that we want this to be a multiline data entry control. To do this we edit the style property in the Inspector. This is on the Constructor pane. Edit the style and set the style to wx.TE_MULTILINE. You can type this into the value field for style or you can click on the check box to the left of style and Boa will show you all the available styles. Set the styles you want to use to True by clicking on them. The style field contains valid python code. To set two logical styles you would separate them with a |. You can see all the available styles for the wx.TextControl in the wxPython online help for the class wx.TextControl. Hint: Use CtrlH and enter textctrl to get to the documentation and find descriptions for the different styles, note that some of them might not be shown for wx.TextCtrl as they are inherited from e.g. wx.Window. Currently CtrlH does NOTwork in the Designer window, but just about anywhere else within Boa.

Rename the text field. The default nameis textCtrl1. Set the nameto textEditor. In the Constructor pane there is a field called Value. This field contains the default value of the control. Blank out this field. Update the source code with your new control using either Post button Save your source code changes. Run your application.

The textEditor field is automatically sized to the available space. If you resize the frame, the control resizes. Notice that wxWidgets provides you with a scrollbar. The field will automatically, scroll if you go beyond the bottom. If you type line longer than the width of the edit window, they will wrap. You also have cut and paste functionality, and block marking by default.

Getting Started Guide for Boa Constructor Next:Adding the File MenuFunctionality Previous:Add a MenuBar Up:Getting Started Guide for Boa Constructor

Getting Started Guide for Boa Constructor Next:Creating a Dialog WindowUp:Getting Started Guide for Boa Constructor Previous:Adding the Text Control

2.6 Adding File MenuFunctionality

The next task is to interact with the user to implement the menufunctionality. Dialogs are used to get immediate input from the user. Dialogs are application modal, i.e. you can not use any other windows in the current application until the dialogue is closed. Dialogs are placed directly into the source code. They are not placed into the Designer. They are placed with the editor. In the Frame1.py source code, go to the event handler for the open event. This method is called OnMenuFileOpenMenu. are We going to place the File Open dialogue into this method. Place the keyboard cursor directly before event.Skip(). Weare going to insert our new code here. Press "altt" and select wx.FileDialog from the drop down menuand Boa Constructor will paste skeleton code directly into your Event Handler method. Note the code dlg.Destroy(), it is very important that dialogs get destroyed! The source code section should now look as follows: def OnMenuFileOpenMenu(self,event): dlg = wx.FileDialog(self, "Choose a file", try: if dlg.ShowModal() == wx.ID_OK: filename = dlg.GetPath() # Your code finally: dlg.Destroy() event.Skip()

".",

"",

"*.*",

wx.OPEN)

This skeleton code creates a dialog. It interacts with the user. Whenthe dialog is finished it is destroyed. The words # Your code mark the position where we are to insert our own code. This code is triggered when the dialog returns wx.ID_OK, i.e. when the user clicked on the Open button. Wewill insert our code here. The wx.TextCtrl has a method which we will use to load a file into the edit window, for this we use the method LoadFile. You can delete the trailing event.Skip() as no other event will need to be called in this case. The event.Skip() nameis a bit confusing, you should call event.Skip() in events were other event handlers should ALSObe executed. It was needed when the code was generated because Python reports an error if there is a method with no body. As part of the functionality of our application we must be able to access the file nameso that the Save menuoption can save to this file, therefore we added the line self.FileName=filename. The self.SetTitle((Notebook %s) % filename) line changes the title to show what file is being worked on. The listing below shows our new code.

def OnMenuFileOpenMenu(self,event): dlg = wx.FileDialog(self, "Choose a file", ".", "", "*.*", try: if dlg.ShowModal() == wx.ID_OK: filename = dlg.GetPath() # Your code self.textEditor.LoadFile(filename) self.FileName=filename self.SetTitle((Notebook %s) % filename) finally: dlg.Destroy()

wx.OPEN)

dlg.Destroy() Wemust repeat the exercise to provide the Save As functionality. Insert a file dialog into the body of OnFileSaveasMenu. This is a File Save dialog. Changethe prompt, parameter 2 to the wx.FileDialog to "Save File As". Changethe style, parameter 6 to wx.SAVE. The method to save the file is called SaveFile. Again, we save the filename value for use by the Save menuoption. The listing below shows the code. def OnMenuFileSaveasMenu(self, event): dlg = wx.FileDialog(self, " Save file as", ".", "", "*.*", try: if dlg.ShowModal() == wx.ID_OK: filename = dlg.GetPath() # Your code self.textEditor. SaveFile (filename) self.FileName=filename self.SetTitle((Notebook %s) % filename) finally: dlg.Destroy()

wx.SAVE )

Next we will implement the Close menuoption. In this method, we simply clear the textEditor control, the FileName membervariable and reset the title.. def OnMenuFileCloseMenu(self, event): self.FileName = None self.textEditor.Clear() self.SetTitle(Notebook) Next we will implement the Exit menuoption. In this method we need to terminate the application. All wxPython applications are terminated by closing the toplevel window. In our case we only have the Frame1 window. To terminate the application we invoke the Close() method for Frame1. def OnMenuFileExitMenu(self, event): self.Close() Next we will implement the Save menuitem. This menuitem will save the file using the current name, which is stored in the variable self.FileName. Whenthere is no current file, the self.FileName variable is set to None. In this case the Save menuoption must act as the Save As menuoption. The variable FileName must be created when Frame1 is constructed. Wemust add it to the constructor. You can add your application code to the end of the default constructor (__init__). def __init__(self, parent): self._init_ctrls(parent) self.FileName=None Now, we are safe to implement the Save functionality. Wecheck if there is a current filename. If there is we can save the contents to that filename. Otherwise, we just call the Save As method. def OnMenuFileSaveMenu(self, event): if self.FileName == None: return self.OnFileSaveasMenu(event) else: self.textEditor.SaveFile(self.FileName) Wehave now implemented the functionality of the editor. Wecan open files, save them. Your editor should look similar to what is shown on the image below. The file App1.py was opened edit, and

The file App1.py was opened Then the menuoption File/Save

as was selected

Getting Started Guide for Boa Constructor Next:Creating a Dialog WindowUp:Getting Started Guide for Boa Constructor Previous:Adding the Text Control

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

2.7 Creating a Dialog Window

Dialogs are used to interact with the user and get specific inputs. In the previous sections we used the prebuilt dialog wx.FileDialog. Weare now going to develop our own Dialog for the About menuoption. The dialog we are going to create will require a new window. It is not a component of the Frame1 window. It will exist in our application as a separate Python file. Select the application module App1 in the editor. Chose the Application pane. On the palette, select the New pane. Select the wx.Dialog button. This will create a new source file Dialog1.py, and will automatically add this new source file to your application module. Select the Frame1 pane. Wewant to write the code for the About menuoption, which is used to display the dialog. This option is implemented by the method OnHelpAboutMenu. The code is as follows: def OnMenuHelpAboutMenu(self,event): dlg = Dialog1.Dialog1(self) try: dlg.ShowModal() finally: dlg.Destroy() This code references the Dialog1 module. Before this code works, we must import the Dialog1 module. By convention, we keep imports at the start of the source. Add the line import Dialog1 to the Frame1.py after the line import wx. import wx import Dialog1

Save the three source files. You can run the application now. Whenyou select the About option from the Help menuyour new Dialog will appear. Notice that the dialog is modal, i.e. you must close it before you can access the Frame1 window. Exit the application and return to Boa Constructor. Nowwe will add some fields to the dialog. For this exercise we will need a bitmap file. For the demonstration I used one called Boa.jpg. You can create your own bitmap using a paint utility. Copy the bitmap to your application directory. Select the Dialog1.py pane. Start the Designer by clicking on the button . First we shall add a label to the Dialog. On the palette select Basic Controls. From this pane select the wx.StaticText control. On the Designer click the mouse button to create the control. On the Inspector edit the field Label. Set the value to Note book Simple Text Editor. Notice that the label in the Designer will grow to accomodate your text. Weuse the style property to configure the alignment of the text within the label. Set the style property to wx.ALIGN_CENTRE select this style after clicking on or the check box to the left of style. Select the Properties pane in the inspector. Edit the field called font. Set the font to a reasonably large font, e.g. 12 or 14 point. Notice that you can change both the font and point size with this property. In the Designer window your label will appear with eight markers on the edges. You click the mouseleft button (and hold it down) on one of these markers then move the mouseto resize the box. You can also click in the centre of the label, and hold down the mousebutton, to move the label. Position the label centrally at the top of the box. Nowadd another label below the first. Set the text to This is my first Boa

Nowadd another label below the first. Set the text to This is my first Boa Contstructor application. In the Inspector, select the Properties pane. Edit the value BackgroundColour. Pick a colour from the set available and press OK. Now reposition and resize your label until it looks balanced. Next we will add the bitmap. From the Basic Controls select the wx.StaticBitmap control. Place this below the second label on your dialog. In the Inspector select the Constructor pane. Edit the Bitmap field. This will give you an Open File dialog. Choose the bitmap you painted earlier. The wx.StaticBitmap field in the Designer will change to accomodate your bitmap. Move the bitmap until it is balanced below the two labels. Finally, we will add a button to the Dialog. In the Palette select the Buttons pane. Select the basic button type, wx.Button. Place this on the form below the bitmap. On the Inspector Constructor pane edit the Label. Set this to Close. Select the Events pane in the Inspector. Add a handler for event type EVT_BUTTON. Hint: select the event group first, then the event. This are all the controls we are going to add to the Dialog. Size the Dialog to accomodate the controls. Reposition and resize the controls until you feel they are nicely balanced. Select the Dialog1 in the Designer. In the Constructor pane in the Inspector, edit the Title field. Set this to About Notebook. Press either post button to update the source code with your changes. Finally, we need to implement the event handler for the Close button. In the Editor select the source for Dialog1. Go to the source for your method OnButton1Button. We will use the same Close method as we used in the Exit menuitem. Note that this closes the window. Closing the root window exits the application. However, closing a child window will simply return to the parent window . def OnButton1Button(self, self.Close() Run the application. event): this.

Your new Dialog should look something like

Congratulations: You have built your first application using Boa Constructor. Your editor is complete. In this tutorial you have used the core components Boa. of
Take time to review what you have done so far. You have learnt how to: Create an application. Create frames, menusand status bars. Create controls such as buttons, text entry fields and labels.

Create controls such as buttons, text entry fields Configure the controls to your requirements. Work with common dialogs. Design your own dialogs.

and labels.

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

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

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 maybeas little as practical). Please note that the following will just explain how to use sizers in Boa (note that this assumesversion 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 Wewill 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 menuFile/Save) and save it as AddressEntry.py. Select from the menuEdit 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 reopen 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 dont 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 Namefrom 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 on the "Props" pane click on (Columns) and then on the "..." to open and the Collection Editor for the listctrl. Create the columns "First name, Last name,

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 its 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 change Proportion from 0 to 1. These changes will ensure that you have and 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 nameswhich make sense (i.e. firstName, lastName, address, postalCode, city and country). Nowwe need to set the Border, Flag and Proportion for each of these controls. For wx.StaticText I suggest: 2, wx.ALL | wx.ALIGN_CENTER_VERTICAL0 and For wx.TextCtrl I suggest: 2, wx.ALL | wx.EXPAND 0 and 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 its style from 0 to wx.TE_MULTILINE and in the Designer you enlarge it to the hight you want to allocate for it. Whenyou run the application you should see something along these lines.

Wewill 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 nameit 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 namefrom button1 to "add" and the Id to wx.ID_ADD. Repeat this for the others but namethem delete, save and close and use the

Repeat this for the others but namethem delete, save and close and use the appropriate wx.ID_ entries (having access to the stock button IDs 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 momentthis goes beyond this tutorial. Please note that the file generated during this example is also available directory "Examples\guide" under your Boa installation directory. in the

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 MenuFunctionality