The absolute beginners guide - Part V - for gnu-smalltalk/gtk (toolbars)

Tagged:  •    •    •    •  

The thing I want to show today, is enhancing the little application with a toolbar, so let's dig into this...

(Most of the applications which have menus, also have a toolbar. And it is realy easy to set up.)

The nice thing, all toolbar entries should be connected to an existing callback-method in our application, which is reachable already by an menu-entry. A toolbar is only a shortcut to an entry in the menu. So, we only have to design the user-interface, no additional business-logic is needed.

The start would be to define an additional instance-variable, I would suggest to name it toolbar.

| window container menubar toolbar |

Our initialize method grows also, because we have to call the create-method for the toolbar and pack the toolbar into the window.

initialize [
        self createWindow;

        container packStart: menubar 
                     expand: false 
                       fill: true 
                    padding: 0.
        container packStart: toolbar 
                     expand: false 
                       fill: true 
                    padding: 0.

        window add: container.

A toolbar consists of buttons and maybe some separators between them. The easiest thing is a Separator.

|Elements in a toolbar, should be subclassed from GtkToolItem. This is a precondition for elements, which should be placed into a Toolbar. Therefore exists a GtkSeparatorToolItem and for the use of a Button a GtkToolButton.
GTK makes some differences between elements in a toolbar and elements outside of a toolbar:
Important No. 2:
|Like a predefined Text, or a predefined Icon which is displayed e.g. on a button. These predefinitions could be set in calling the method newFromStock with a parameter, which kind of predefinition you want to have. You can also use the normal new method, but in this case you have to provide an icon and a button-text to the instance.
Several GTK-Elements offer some predefines:

In the todays example, we only use the newFromStock method, I have to clarify, how an icon could be packed with the application.

Inserting elements into the toolbar could be achieved with the insert:pos: method of the GtkToolbar.

Back to the separator, the code to insert a separator into the toolbar looks like this:

addToolbarSeparator [
        toolbar insert: (GTK.GtkSeparatorToolItem new)
                   pos: -1

For a ToolButton with an additional callback-method connected, the code is as nearly as doubled... ;-)

button := GTK.GtkToolButton newFromStock: (GTK.Gtk gtkStockHome).
button connectSignal: 'clicked' to: self selector: #showMessage.
toolbar insert: button pos: -1

And you know, because I don't want to type for each button in the toolbar the same, I encapsulate it in a method:

addToolbarItem: aType selector: sel [
        toolbar insert: ((GTK.GtkToolButton newFromStock: aType) 
                                           connectSignal: 'clicked'
                                                      to: self
                                                selector: sel
                   pos: -1

The toolbar itself is instantiated with:

toolbar := GTK.GtkToolbar new

But without any further modification, it tries to display it's buttons with an icon and a describing text. In my case, I only want to have the icon displayed in the toolbar, so I have to set the style attribute in a further method-call to GTK.Gtk gtkToolbarIcons. There exists of course the both other methods like GTK.Gtk gtkToolbarText and GTK.Gtk gtkToolbarBoth.
After creating the toolbar, we should place some buttons in it. So here's the code for the complete createToolbar method:

createToolbar [
        (toolbar := GTK.GtkToolbar new) setStyle: GTK.Gtk gtkToolbarIcons.

        self addToolbarItem: (GTK.Gtk gtkStockGoBack) selector: #showInfo;
             addToolbarItem: (GTK.Gtk gtkStockGoForward) selector: #showWarning;
             addToolbarItem: (GTK.Gtk gtkStockRefresh) selector: #showQuestion;
             addToolbarItem: (GTK.Gtk gtkStockStop) selector: #showError;
             addToolbarItem: (GTK.Gtk gtkStockHome) selector: #showMessage

Now we have a toolbar integrated into our application and the buttons connected to our existing menu-callback-methods.

With this, we are now again at the end for today.

Happy coding.

User login