This example is similar to Toolbar, 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
Under Containers on the left hand side, right click on the toolbar icon and select Add widget as toplevel.
Under the General tab on the bottom right, change the Name to toolbar and Show Arrow to No.
Under the Common tab, set Horizontal Expand to Yes.
Right click on the toolbar in the top right and select Edit. The Tool Bar Editor window will appear.
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<!-- interface-requires gtk+ 3.0 -->
<object class="GtkToolbar" id="toolbar">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="hexpand">True</property>
<property name="show_arrow">False</property>
<child>
<object class="GtkToolButton" id="new_button">
<property name="use_action_appearance">False</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="use_action_appearance">False</property>
<property name="is_important">True</property>
<property name="action_name">app.new</property>
<property name="label" translatable="yes">New</property>
<property name="use_underline">True</property>
<property name="stock_id">gtk-new</property>
</object>
<packing>
<property name="expand">False</property>
<property name="homogeneous">True</property>
</packing>
</child>
<child>
<object class="GtkToolButton" id="open_button">
<property name="use_action_appearance">False</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="use_action_appearance">False</property>
<property name="is_important">True</property>
<property name="action_name">app.open</property>
<property name="label" translatable="yes">Open</property>
<property name="use_underline">True</property>
<property name="stock_id">gtk-open</property>
</object>
<packing>
<property name="expand">False</property>
<property name="homogeneous">True</property>
</packing>
</child>
<child>
<object class="GtkToolButton" id="undo_button">
<property name="use_action_appearance">False</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="use_action_appearance">False</property>
<property name="is_important">True</property>
<property name="action_name">win.undo</property>
<property name="label" translatable="yes">Undo</property>
<property name="use_underline">True</property>
<property name="stock_id">gtk-undo</property>
</object>
<packing>
<property name="expand">False</property>
<property name="homogeneous">True</property>
</packing>
</child>
<child>
<object class="GtkToolButton" id="fullscreen_button">
<property name="use_action_appearance">False</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="use_action_appearance">False</property>
<property name="is_important">True</property>
<property name="action_name">win.fullscreen</property>
<property name="label" translatable="yes">Fullscreen</property>
<property name="use_underline">True</property>
<property name="stock_id">gtk-fullscreen</property>
</object>
<packing>
<property name="expand">False</property>
<property name="homogeneous">True</property>
</packing>
</child>
<child>
<object class="GtkToolButton" id="leave_fullscreen_button">
<property name="use_action_appearance">False</property>
<property name="can_focus">False</property>
<property name="use_action_appearance">False</property>
<property name="is_important">True</property>
<property name="action_name">win.fullscreen</property>
<property name="label" translatable="yes">Leave Fullscreen</property>
<property name="use_underline">True</property>
<property name="stock_id">gtk-leave-fullscreen</property>
</object>
<packing>
<property name="expand">False</property>
<property name="homogeneous">True</property>
</packing>
</child>
</object>
</interface>
We now create the code below, which adds the toolbar from the file we just created.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
/* This is the Window */
class MyWindow : Gtk.ApplicationWindow {
/* Declare these two ToolButtons, as we will get them
* from the ui file (see lines 32 and 33), so we can
* hide() and show() them as needed.*/
Gtk.ToolButton fullscreen_button;
Gtk.ToolButton leave_fullscreen_button;
/* Constructor */
internal MyWindow (MyApplication app) {
Object (application: app, title: "Toolbar Example");
this.set_default_size (400, 200);
var grid = new Gtk.Grid ();
this.add (grid);
grid.show ();
/* add the toolbar from the ui file */
var builder = new Gtk.Builder ();
try {
builder.add_from_file ("toolbar_builder.ui");
}
/* Handle the exception */
catch (Error e) {
error ("Unable to load file: %s", e.message);
}
grid.attach (builder.get_object ("toolbar") as Gtk.Toolbar, 0, 0, 1, 1);
/* get these objects from the ui file so we can toggle between them */
fullscreen_button = builder.get_object ("fullscreen_button") as Gtk.ToolButton;
leave_fullscreen_button = builder.get_object ("leave_fullscreen_button") as Gtk.ToolButton;
/* create the "undo" window action action */
var undo_action = new SimpleAction ("undo", null);
undo_action.activate.connect (undo_callback);
this.add_action (undo_action);
/* create the "fullscreen" window action */
var fullscreen_action = new SimpleAction ("fullscreen", null);
fullscreen_action.activate.connect (fullscreen_callback);
this.add_action (fullscreen_action);
}
void undo_callback (SimpleAction simple, Variant? parameter) {
print ("You clicked \"Undo\".\n");
}
void fullscreen_callback (SimpleAction simple, Variant? parameter) {
if ((this.get_window ().get_state () & Gdk.WindowState.FULLSCREEN) != 0) {
this.unfullscreen ();
leave_fullscreen_button.hide ();
fullscreen_button.show ();
}
else {
this.fullscreen ();
fullscreen_button.hide ();
leave_fullscreen_button.show ();
}
}
}
/* This is the application */
class MyApplication : Gtk.Application {
protected override void activate () {
new MyWindow (this).show ();
}
protected override void startup () {
base.startup ();
/* Create the "new" action and add it to the app*/
var new_action = new SimpleAction ("new", null);
new_action.activate.connect (new_callback);
this.add_action (new_action);
/* Create the "open" action, and add it to the app */
var open_action = new SimpleAction ("open", null);
open_action.activate.connect (open_callback);
this.add_action (open_action);
/* You could also add the action to the app menu
* if you wanted to.
*/
//var menu = new Menu ();
//menu.append ("New", "app.new");
//this.app_menu = menu;
}
void new_callback (SimpleAction action, Variant? parameter) {
print ("You clicked \"New\".\n");
}
void open_callback (SimpleAction action, Variant? parameter) {
print ("You clicked \"Open\".\n");
}
}
/* The main function creates the application and runs it. */
int main (string[] args) {
return new MyApplication ().run (args);
}
In this sample we used the following:
Got a comment? Spotted an error? Found the instructions unclear? Send feedback about this page.