|| [[http://wiki.wxpython.org/index.cgi/WxGladeWxMenu|Prev]] || [[http://wiki.wxpython.org/index.cgi/WxGladeTutorial|Up]] || Next || = wxGlade tutorial - Toolbar = (Contributed by Chris Lale, chrislale AT users DOT berlios DOT de) '''Table of 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 - -> 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 - -> Widget -> Has !ToolBar: (tick) This adds these lines to `MyFrame`'s `__init()__` method: {{{ #!python # Tool Bar self.frame_1_toolbar = wx.ToolBar(self, -1) self.SetToolBar(self.frame_1_toolbar) # Tool Bar end }}} 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 - -> 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 - -> 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: {{{ #!python # Tool Bar self.frame_1_toolbar = wx.ToolBar(self, -1) self.SetToolBar(self.frame_1_toolbar) self.frame_1_toolbar.AddLabelTool(wx.NewId(), "New", wx.Bitmap("/path/to/your/icons/stock_new.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "", "") self.frame_1_toolbar.AddLabelTool(wx.NewId(), "Open", wx.Bitmap("/path/to/your/icons/stock_open.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "", "") self.frame_1_toolbar.AddLabelTool(wx.NewId(), "Save", wx.Bitmap("/path/to/your/icons/stock_save.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "", "") self.frame_1_toolbar.AddSeparator() self.frame_1_toolbar.AddLabelTool(wx.NewId(), "Exit", wx.Bitmap("/path/to/your/icons/stock_exit.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "", "") # 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 - -> 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: {{{ #!python def OnExit(self, event): # wxGlade: MyFrame. print "Event handler `OnExit` not implemented" event.Skip() }}} Also, a new method is added to `MyFrame`'s `__init__()` method to bind the "exit" menu item to the `OnExit()` method: {{{ #!python self.Bind(wx.EVT_TOOL, self.OnExit, id=-1) }}} Change the !OnExit method to {{{ #!python def OnExit(self, event): # wxGlade: MyFrame. self.Close() event.Skip() }}} 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 -> Widget -> Has !StatusBar (ticked) Add event handlers for the tools: * Properties -> 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: {{{ #!python def OnNew(self, event): # wxGlade: MyFrame. self.frame_1_statusbar.SetStatusText("Event handler `OnNew'") event.Skip() def OnOpen(self, event): # wxGlade: MyFrame. self.frame_1_statusbar.SetStatusText("Event handler `OnOpen'") event.Skip() def OnSave(self, event): # wxGlade: MyFrame. self.frame_1_statusbar.SetStatusText("Event handler `OnSave'") 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 -> 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 = {{{ #!python #!/usr/bin/env python # -*- coding: ISO-8859-1 -*- # generated by wxGlade 0.4.1 on Wed Mar 29 10:25:10 2006 import wx class MyFrame(wx.Frame): def __init__(self, *args, **kwds): # begin wxGlade: MyFrame.__init__ kwds["style"] = wx.DEFAULT_FRAME_STYLE wx.Frame.__init__(self, *args, **kwds) # Tool Bar self.frame_1_toolbar = wx.ToolBar(self, -1) self.SetToolBar(self.frame_1_toolbar) self.frame_1_toolbar.AddLabelTool(1, "New", wx.Bitmap("/home/chris/python/tutorial/stock_new.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "New", "Create a new file") self.frame_1_toolbar.AddLabelTool(2, "Open", wx.Bitmap("/home/chris/python/tutorial/stock_open.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "Open", "Open an existing file") self.frame_1_toolbar.AddLabelTool(3, "Save", wx.Bitmap("/home/chris/python/tutorial/stock_save.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "Save", "Save the current file") self.frame_1_toolbar.AddSeparator() self.frame_1_toolbar.AddLabelTool(4, "Exit", wx.Bitmap("/home/chris/python/tutorial/stock_exit.png", wx.BITMAP_TYPE_ANY), wx.NullBitmap, wx.ITEM_NORMAL, "Exit", "Exit the application") # Tool Bar end self.frame_1_statusbar = self.CreateStatusBar(1, 0) self.__set_properties() self.__do_layout() self.Bind(wx.EVT_TOOL, self.OnNew, id=1) self.Bind(wx.EVT_TOOL, self.OnOpen, id=2) self.Bind(wx.EVT_TOOL, self.OnSave, id=3) self.Bind(wx.EVT_TOOL, self.OnExit, id=4) # end wxGlade def __set_properties(self): # begin wxGlade: MyFrame.__set_properties self.SetTitle("toolbar-glade") self.SetSize((350, 250)) self.frame_1_toolbar.Realize() self.frame_1_statusbar.SetStatusWidths([-1]) # statusbar fields frame_1_statusbar_fields = ["frame_1_statusbar"] for i in range(len(frame_1_statusbar_fields)): self.frame_1_statusbar.SetStatusText(frame_1_statusbar_fields[i], i) # end wxGlade def __do_layout(self): # begin wxGlade: MyFrame.__do_layout sizer_1 = wx.BoxSizer(wx.VERTICAL) self.SetAutoLayout(True) self.SetSizer(sizer_1) self.Layout() # end wxGlade def OnExit(self, event): # wxGlade: MyFrame. self.Close() event.Skip() def OnNew(self, event): # wxGlade: MyFrame. self.frame_1_statusbar.SetStatusText("Event handler `OnNew'") event.Skip() def OnOpen(self, event): # wxGlade: MyFrame. self.frame_1_statusbar.SetStatusText("Event handler `OnOpen'") event.Skip() def OnSave(self, event): # wxGlade: MyFrame. self.frame_1_statusbar.SetStatusText("Event handler `OnSave'") event.Skip() # end of class MyFrame class MyApp(wx.App): def OnInit(self): wx.InitAllImageHandlers() frame_1 = MyFrame(None, -1, "") self.SetTopWindow(frame_1) frame_1.Show() return 1 # end of class MyApp if __name__ == "__main__": app = MyApp(0) app.MainLoop() }}}