wxGlade tutorial - Toolbar
(Contributed by Chris Lale, chrislale AT users DOT berlios DOT de)
Table of Contents:
Contents
Create the application in wxglade
Run wxglade. Open the simple project simple-glade.wxg that you created in "first steps" (WxGladeFirstSteps). The project consists of one empty frame. Set the title to "toolbar-glade" and save it as toolbar-glade.wxg. In the main (toolbox) window
Properties - <frame_1> -> Widget -> Title: toolbar-glade
File -> Save -> /path/to/your/project/toolbar-glade.wxg
The Tree shows that the application contains one frame and a sizer to added automatically by wxGlade.
Application
frame_1 (MyFrame)
sizer_1
About the wx.Toolbar class
Toolbar is a widget that groups the most common used commands or actions of your application. Typically save, open, cut, copy, paste, undo, redo etc. It's purpose is to save time. You need one click to do an action from the toolbar and two clicks from the menu.
After a toolbar is created, you use AddTool() and perhaps AddSeparator(), and then you must call Realize() to construct and display the toolbar tools.
Construct a toolbar object
In the wxGlade Tree window, double-click on frame_1(MyFrame). This opens the Design window and the Properties window for frame_1. The wx.ToolBar __init__() method is set by the Has ToolBar option in the Widget tab of the Properties window:
Properties - <frame_1> -> Widget -> Has ToolBar: (tick)
This adds these lines to MyFrame's __init()__ method:
The code constructs a new wx.ToolBar toolbar object (frame_1_toolbar), and tells the frame to show the menubar with the wx.Frame method SetToolBar().
Add items to the toolbar
The toolbar is just a container widget - there is nothing to see until you have added some toolbar items. Make sure that stock*.png files exist in the working directory. In Linux systems with Gtk, you can find it somewhere like /usr/share/icons/hicolor/16x16/stock/generic/stock_exit.png. First, add "New", "Open", "Save", separator and "Exit" items:
Properties - <frame_1_toolbar> -> Common -> Edit tools...
This brings up the Toolbar editor. Add the items, give them labels and link them to icon files:
Toolbar editor -> Add
- Label: New
- Normal bitmap: stock_new.png
Toolbar editor -> Add
- Label: Open
- Normal bitmap: stock_open.png
Toolbar editor -> Add
- Label: Save
- Normal bitmap: stock_save.png
Toolbar editor -> Add separator
Toolbar editor -> Add
- Label: Exit
- Normal bitmap: stock_exit.png
Menu editor -> OK
Check the result:
Properties - <frame_1> -> Common -> Preview
Generate the Python code. In the Tree window, select Application.
In the Properties window, enter a new filename for the python file.
Output path: /path/to/your/project/toolbar-glade.py
Click on
Generate code
Look at the code in a text editor or Idle. The toolbar is set up in MyFrame's __init__() method:
1 # Tool Bar
2 self.frame_1_toolbar = wx.ToolBar(self, -1)
3 self.SetToolBar(self.frame_1_toolbar)
4 self.frame_1_toolbar.AddLabelTool(wx.NewId(), "New",
5 wx.Bitmap("/path/to/your/icons/stock_new.png", wx.BITMAP_TYPE_ANY),
6 wx.NullBitmap, wx.ITEM_NORMAL, "", "")
7 self.frame_1_toolbar.AddLabelTool(wx.NewId(), "Open",
8 wx.Bitmap("/path/to/your/icons/stock_open.png", wx.BITMAP_TYPE_ANY),
9 wx.NullBitmap, wx.ITEM_NORMAL, "", "")
10 self.frame_1_toolbar.AddLabelTool(wx.NewId(), "Save",
11 wx.Bitmap("/path/to/your/icons/stock_save.png", wx.BITMAP_TYPE_ANY),
12 wx.NullBitmap, wx.ITEM_NORMAL, "", "")
13 self.frame_1_toolbar.AddSeparator()
14 self.frame_1_toolbar.AddLabelTool(wx.NewId(), "Exit",
15 wx.Bitmap("/path/to/your/icons/stock_exit.png", wx.BITMAP_TYPE_ANY),
16 wx.NullBitmap, wx.ITEM_NORMAL, "", "")
17 # Tool Bar end
and created in MyFrame's set_properties() method:
Make the Exit toolbar item close the application
Use wxGlade to create an event handler that responds to "Exit" being selected. In wxGlade, edit the entry for "Exit" and add an event handler called OnExit:
Properties - <frame_1_toolbar> -> Common -> Edit tools...
Toolbar editor -> Exit -> Event Handler: OnExit
Generate the Python code. Look at the code in a text editor or Idle. wxGlade has added a new OnExit method to the MyFrame class:
Also, a new method is added to MyFrame's __init__() method to bind the "exit" menu item to the OnExit() method:
1 self.Bind(wx.EVT_TOOL, self.OnExit, id=-1)
Change the OnExit method to
Save the file and run it. Now, clicking on the Exit tool icon invokes the Close() method which is inherited by MyFrame from wx.Window.
Add events for the other tools
Add a status bar:
Properties <frame_1> -> Widget -> Has StatusBar (ticked)
Add event handlers for the tools:
Properties <frame_1_toolbar> -> Common -> Edit Tools...
Toolbar editor -> New
- Id: 1
Event Handler: OnNew
Toolbar editor -> Open
- Id: 2
Event Handler: OnOpen
Toolbar editor -> Save
- Id: 3
Event Handler: OnSave
Toolbar editor -> Exit
- Id: 4
Toolbar editor -> OK
Generate the code:
Properties -> Generate code
Edit the event handling code in toolbar-glade.py:
1 def OnNew(self, event): # wxGlade: MyFrame.<event_handler>
2 self.frame_1_statusbar.SetStatusText("Event handler `OnNew'")
3 event.Skip()
4
5 def OnOpen(self, event): # wxGlade: MyFrame.<event_handler>
6 self.frame_1_statusbar.SetStatusText("Event handler `OnOpen'")
7 event.Skip()
8
9 def OnSave(self, event): # wxGlade: MyFrame.<event_handler>
10 self.frame_1_statusbar.SetStatusText("Event handler `OnSave'")
11 event.Skip()
Save the file and run it. Now, clicking on the New, Open or Save tool icons writes a message to the status bar.
Add tooltips for the tools
Edit the tools and add text for Short Help and Long Help
Properties <frame_1_toolbar> -> Common -> Edit Tools...
Toolbar editor -> New
- Short Help: New
- Long Help: Create a new file
Toolbar editor -> Open
- Short Help: Open
- Long Help: Open an existing file
Toolbar editor -> Save
- Short Help: Save
- Long Help: Save the current file
Toolbar editor -> Exit
- Short Help: Exit
- Long Help: Exit the application
Toolbar editor -> OK
Save the file and run it. Now, hovering the mouse pointer over the New, Open or Save tool icons displays a tooltip and writes a longer help message to the status bar.
Appendix: The complete code
1 #!/usr/bin/env python
2 # -*- coding: ISO-8859-1 -*-
3 # generated by wxGlade 0.4.1 on Wed Mar 29 10:25:10 2006
4
5 import wx
6
7 class MyFrame(wx.Frame):
8 def __init__(self, *args, **kwds):
9 # begin wxGlade: MyFrame.__init__
10 kwds["style"] = wx.DEFAULT_FRAME_STYLE
11 wx.Frame.__init__(self, *args, **kwds)
12
13 # Tool Bar
14 self.frame_1_toolbar = wx.ToolBar(self, -1)
15 self.SetToolBar(self.frame_1_toolbar)
16 self.frame_1_toolbar.AddLabelTool(1, "New",
17 wx.Bitmap("/home/chris/python/tutorial/stock_new.png", wx.BITMAP_TYPE_ANY),
18 wx.NullBitmap, wx.ITEM_NORMAL, "New", "Create a new file")
19 self.frame_1_toolbar.AddLabelTool(2, "Open",
20 wx.Bitmap("/home/chris/python/tutorial/stock_open.png", wx.BITMAP_TYPE_ANY),
21 wx.NullBitmap, wx.ITEM_NORMAL, "Open", "Open an existing file")
22 self.frame_1_toolbar.AddLabelTool(3, "Save",
23 wx.Bitmap("/home/chris/python/tutorial/stock_save.png", wx.BITMAP_TYPE_ANY),
24 wx.NullBitmap, wx.ITEM_NORMAL, "Save", "Save the current file")
25 self.frame_1_toolbar.AddSeparator()
26 self.frame_1_toolbar.AddLabelTool(4, "Exit",
27 wx.Bitmap("/home/chris/python/tutorial/stock_exit.png", wx.BITMAP_TYPE_ANY),
28 wx.NullBitmap, wx.ITEM_NORMAL, "Exit", "Exit the application")
29 # Tool Bar end
30 self.frame_1_statusbar = self.CreateStatusBar(1, 0)
31
32 self.__set_properties()
33 self.__do_layout()
34
35 self.Bind(wx.EVT_TOOL, self.OnNew, id=1)
36 self.Bind(wx.EVT_TOOL, self.OnOpen, id=2)
37 self.Bind(wx.EVT_TOOL, self.OnSave, id=3)
38 self.Bind(wx.EVT_TOOL, self.OnExit, id=4)
39 # end wxGlade
40
41 def __set_properties(self):
42 # begin wxGlade: MyFrame.__set_properties
43 self.SetTitle("toolbar-glade")
44 self.SetSize((350, 250))
45 self.frame_1_toolbar.Realize()
46 self.frame_1_statusbar.SetStatusWidths([-1])
47 # statusbar fields
48 frame_1_statusbar_fields = ["frame_1_statusbar"]
49 for i in range(len(frame_1_statusbar_fields)):
50 self.frame_1_statusbar.SetStatusText(frame_1_statusbar_fields[i], i)
51 # end wxGlade
52
53 def __do_layout(self):
54 # begin wxGlade: MyFrame.__do_layout
55 sizer_1 = wx.BoxSizer(wx.VERTICAL)
56 self.SetAutoLayout(True)
57 self.SetSizer(sizer_1)
58 self.Layout()
59 # end wxGlade
60
61 def OnExit(self, event): # wxGlade: MyFrame.<event_handler>
62 self.Close()
63 event.Skip()
64
65 def OnNew(self, event): # wxGlade: MyFrame.<event_handler>
66 self.frame_1_statusbar.SetStatusText("Event handler `OnNew'")
67 event.Skip()
68
69 def OnOpen(self, event): # wxGlade: MyFrame.<event_handler>
70 self.frame_1_statusbar.SetStatusText("Event handler `OnOpen'")
71 event.Skip()
72
73 def OnSave(self, event): # wxGlade: MyFrame.<event_handler>
74 self.frame_1_statusbar.SetStatusText("Event handler `OnSave'")
75 event.Skip()
76
77 # end of class MyFrame
78
79
80 class MyApp(wx.App):
81 def OnInit(self):
82 wx.InitAllImageHandlers()
83 frame_1 = MyFrame(None, -1, "")
84 self.SetTopWindow(frame_1)
85 frame_1.Show()
86 return 1
87
88 # end of class MyApp
89
90 if __name__ == "__main__":
91 app = MyApp(0)
92 app.MainLoop()