# Toolbar created using Glade (Vala)

Tiffany Antopolski
tiffany.antopolski@gmail.com 2012
A bar of buttons

# Toolbar created using Glade

This example is similar to , except we use Glade to create the toolbar in an XML ui file.

To create the toolbar using the Glade Interface Designer:

Open Glade, and save the file as toolbar_builder.ui

Screenshot of Glade ui

Under Containers on the left hand side, right click on the toolbar icon and select Add widget as toplevel.

Screenshot of toolbar icon in Glade ui

Under the General tab on the bottom right, change the Name to toolbar and Show Arrow to No.

Screenshot of General tab

Under the Common tab, set Horizontal Expand to Yes.

Screenshot of Common tab

Right click on the toolbar in the top right and select Edit. The Tool Bar Editor window will appear.

Screenshot of where to right click to edit toolbar.

We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton.

Under Hierarchy tab, click Add.

Change the name of the ToolItem to new_button.

Scroll down and set Is important to Yes. This will cause the label of the ToolButton to be shown, when you view the toolbar.

Enter the action name: app.new.

Change the Label to New.

Select the New Stock Id from the drop down menu, or type gtk-new.

Repeat the above steps for the remaining ToolButtons, with the following properties:

Name | Is important | Action name | Label | Stock Id
--- | --- | --- | --- | ---
open_button | Yes | app.open | Open | gtk-open
undo_button | Yes | win.undo | Undo | gtk-undo
fullscreen_button | Yes | win.fullscreen | Fullscreen | gtk-fullscreen
leave_fullscreen_button | Yes | win.fullscreen | Leave Fullscreen | gtk-leave-fullscreen

Close the Tool Bar Editor.

When our program will first start, we don't want the Leave Fullscreen ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the Common tab, by clicking the Visible property to No. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code.

Setting the visible property to No

Save your work, and close Glade.

The XML file created by Glade is shown below. This is the description of the toolbar. At the time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did not exist. We can manually add this to the XML file. To do this, add the following XML code at line 9 of toolbar_builder.ui:

<style> <class name="primary-toolbar"/> </style>

If you do not add this, the program will still work fine. The resulting toolbar will however look slightly different then the screenshot at the top of this page.

We now create the code below, which adds the toolbar from the file we just created.

In this sample we used the following:

Gtk.Toolbar

Gtk.Toolbutton

Gtk.Stock