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
Under
Under the
Under the
Right click on the toolbar in the top right and select
We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton.
Under
Change the name of the ToolItem to new_button.
Scroll down and set
Enter the
Change the
Select the
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
When our program will first start, we don't want the
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
]]>
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.
<?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.
/* 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:
Gtk.Toolbar
Gtk.Toolbutton
Gtk.Stock