Tutorial Boa Constructor

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 ApplicationThis section presents a short tutorial. The purpose of the tutorial is to familiarise you with the Boa Constructor development environment. This tutorial takes you step−by−step 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, menus and status bars. Create controls such as buttons, text entry fields and labels. Configure the controls to your requirements. Work with common dialogs. Design your own dialogs.

2.1 Creating a new ApplicationDecide 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 name when 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) will show you the result of "your programming", i.e. just an empty frame.


Next: Using the Designer to set the Title Up:Getting Started Guide for Boa Constructor Previous: 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 Window will display the ’Constr’ or Constructor pane. This pane allows you to edit the size, position, style, variable name and title of a component. Edit

you to edit the size, position, style, variable name and title of a component. Edit the field called ’Title’. Give the frame the name ’Notebook’, 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 Window will 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.


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


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

2.3 Add a Status BarThe 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. We will use the status bar to indicate to the user what is happening when slow actions occur, to give simple help messages or other information you might want to show.


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 mouse over 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.

Now move the mouse cursor over the drawing frame. Press the mouse left 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 name of 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 sub−components to components where required. We will 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 within the status bar. This becomes the current field in the Inspector. Edit the field Text. Set the name from ’Fields0’ to ’status’.

The Collection Editor toolbar contains a ’Refresh’ button . Press this button to see the Inspector change in the Collection Editor window.

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 menu will show our new status bar. Select the status bar, this is necessary so that the frame can manage the status bar, i.e. it’s possition at the bottom of the screen and it’s 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.


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


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

2.4 Add a Menu BarThe next component we are going to add to the application is a menubar. A menubar is a common component on windows programs. Our menu bar 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.


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 mouse over the buttons. Help tips show that one of these buttons represents the wx.Menu control. 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.

Now click the left mouse button either in the Editor’s 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 menu will 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.Menus in the Data View, called menu1 and menu2. Select menu1 using the mouse. The Inspector will now display the Name and Title for menu1. Edit the name of the first wx.Menu to call it menuFile. Call the second wx.Menu menuHelp. Set the titles to File and Help respectively.

Double click the menuHelp entry 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 menu item within the dropdown menu. This becomes the current item in the Inspector. Edit the field ’Label’. Set the name from ’Items0’ to ’About’ and I would also recommend to set the ItemId from ’ITEMS0’ to ’ABOUT’. 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. We need to configure the action which occurs when the ’About’ menu item is selected. When the ’About’ menu item is selected, and event called ’EVT_MENU’ is generated and sent to our program. We must 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 menu item, there is only one event EVT_MENU in the ’MenuEvent’ group. 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’ menu item). You should now have a new handler called OnMenuHelpAboutMenu. This is the name of 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 names in this manner. The event is the last part (Menu). The component is the middle part and here it is the ’About’ sub−component of the ’menuHelp’ component. Finally, Boa Constructor follows the convention of prefixing all event handlers with the word ’On’. Close the collection Editor.

Now we 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 menu item in turn, and label them ’Open’, ’Save’, ’Save As’, ’Close’ and ’Exit’, and again I would recommend to also change the ItemId. Enter some help text for each menu item. Press the Collection Editor refresh button to display the new labels. Select each menu item in turn. For each item select the Events pane in the Inspector, and add an event handler for EVT_MENU to each item. Close the collection Editor.

Now we 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 mouse button on this pane to add a menubar called ’menuBar1’ to the application. Double click on the menuBar1 item to open it’s 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 pop−up 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 menu ’menuFile’ the first dropdown menu on the menubar. In the Collection Editor select the second item. Repeat the process to link Menus1 to 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 pop−up menu. Select your new menubar self.menuBar1. This property defines which menuBar to 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 menus and the status bar. When you select a menu option, the help text should appear in the status bar.


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


Next:Adding the File Menu Functionality Up:Getting Started Guide for Boa Constructor Previous:Add a Menu Bar

2.5 Adding the Text ControlThe 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 mouse pointer over each control to find out its name. Move your mouse pointer to the Designer window, ensure that a Baloon help shows ’Frame1’, then click the left mouse button. A new text control will be drawn. We do not have to size the control. By default it will fill all the available area, i.e. between the status bar and the menu bar. The default wx.TextControl is a single line entry. We must indicate to the control, that we want this to be a multi−line 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 Ctrl−H 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 Ctrl−H does NOT work in the Designer window, but just about anywhere else within Boa.

Rename the text field. The default name is ’textCtrl1’. Set the name to ’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.


Next:Adding the File Menu Functionality Up:Getting Started Guide for Boa Constructor Previous:Add a Menu Bar


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

2.6 Adding File Menu FunctionalityThe next task is to interact with the user to implement the menu functionality. 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. We are going to place the ’File Open’ dialogue into this method. Place the keyboard cursor directly before ’event.Skip()’. We are going to insert our new code here. Press "alt−t" and select ’wx.FileDialog’ from the drop down menu and 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", ".", "", "*.*", wx.OPEN) try: if dlg.ShowModal() == wx.ID_OK: filename = dlg.GetPath() # Your code finally: dlg.Destroy() event.Skip()

This skeleton code creates a dialog. It interacts with the user. When the 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. We will 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()’ name is a bit confusing, you should call ’event.Skip()’ in events were other event handlers should ALSO be 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 name so that the ’Save’ menu option 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", ".", "", "*.*", wx.OPEN) 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()

dlg.Destroy()

We must repeat the exercise to provide the ’Save As’ functionality. Insert a file dialog into the body of ’OnFileSaveasMenu’. This is a File Save dialog. Change the prompt, parameter 2 to the wx.FileDialog to "Save File As". Change the 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’ menu option. The listing below shows the code.

def OnMenuFileSaveasMenu(self, event): dlg = wx.FileDialog(self, " Save file as", ".", "", "*.*", wx.SAVE) 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()

Next we will implement the ’Close’ menu option. In this method, we simply clear the textEditor control, the FileName member variable and reset the title..

def OnMenuFileCloseMenu(self, event): self.FileName = None self.textEditor.Clear() self.SetTitle(’Notebook’)

Next we will implement the ’Exit’ menu option. 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’ menu item. This menu item will save the file using the current name, which is stored in the variable self.FileName. When there is no current file, the self.FileName variable is set to None. In this case the ’Save’ menu option must act as the ’Save As’ menu option. The variable FileName must be created when Frame1 is constructed. We must 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. We check 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)

We have now implemented the functionality of the editor. We can open files, edit, and save them. Your editor should look similar to what is shown on the image below.

The file App1.py was opened

The file App1.py was opened Then the menu option ’File/Save as’ was selected


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


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

2.7 Creating a Dialog WindowDialogs are used to interact with the user and get specific inputs. In the previous sections we used the pre−built dialog wx.FileDialog. We are now going to develop our own Dialog for the About menu option.

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. We want to write the code for the ’About’ menu option, 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 wximport Dialog1

Save the three source files. You can run the application now. When you select the ’About’ option from the ’Help’ menu your 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. Now we 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. We use the style property to configure the alignment of the text within the label. Set the style property to ’wx.ALIGN_CENTRE’ or select this style after clicking on 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 mouse left button (and hold it down) on one of these markers then move the mouse to resize the box. You can also click in the centre of the label, and hold down the mouse button, to move the label. Position the label centrally at the top of the box. Now add another label below the first. Set the text to ’This is my first Boa

Now add 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’ menu item. 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, event): self.Close()

Run the application. Your new Dialog should look something like this.

Congratulations: You have built your first application using Boa Constructor. Your editor is complete. In this tutorial you have used the core components of Boa.

Take time to review what you have done so far. You have learnt how to: Create an application. Create frames, menus and status bars. Create controls such as buttons, text entry fields and labels.

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





2.8 Creating an application window using sizersSizers 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,

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

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 .



Tutorial Boa Constructor

Documents

Transcript of Tutorial Boa Constructor