# Toolbar skapad med Glade (Vala)

Tiffany Antopolski
tiffany.antopolski@gmail.com 2012
En rad med knappar
Sebastian Rasmussen
sebras@gmail.com 2019
Anders Jonsson
anders.jonsson@norsjovallen.se 2021

# Toolbar skapad med Glade

Detta exempel liknar , förutom att vi använder Glade för att skapa verktygsfältet i en XML .ui-fil.

För att skapa verktygsfältet med gränssnittsbyggaren Glade:

Öppna Glade, och spara filen som toolbar_builder.ui

Skärmbild av Glades användargränssnitt

Under Behållare på vänster sida, högerklicka på verktygsfältsikonen och välj Lägg till komponent som toppnivå.

Skärmbild av verktygsfältsikon i Glades användargränssnitt

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

Skärmbild av fliken Allmänt

Under fliken Gemensamma, ställ in Vågrät expansion till Ja.

Skärmbild av fliken Gemensam

Högerklicka på verktygsfältet i det övre högra hörnet och välj Redigera. Fönstret Verktygsfältsredigerare kommer visas.

Skärmbild av var högerklick ska ske för att redigera verktygsfält.

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

Under fliken Hierarki, klicka på Lägg till.

Ändra namnet på detta ToolItem till new_button.

Rulla ner och ställ in Är viktig till Ja. Detta kommer få etiketten för vår ToolButton att visas när verktygsfältet visas.

Ange Åtgärdsnamnet: app.new.

Ändra Etikett till Ny.

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 | Är viktig | Åtgärdsnamn | Label | Standard-ID
--- | --- | --- | --- | ---
open_button | Ja | app.open | Öppna | gtk-open
undo_button | Ja | win.undo | Ångra | gtk-undo
fullscreen_button | Ja | win.fullscreen | Helskärmsläge | gtk-fullscreen
leave_fullscreen_button | Ja | win.fullscreen | Lämna helskärmsläge | gtk-leave-fullscreen

Stäng Verktygsfältsredigeraren.

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

Spara ditt arbete och stäng 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.

<?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>

Vi skapar nu koden nedan, vilken lägger till verktygsfältet från filen vi just skapade.

/* 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); }

I detta exempel använde vi följande:

Gtk.Toolbar

Gtk.Toolbutton

Gtk.Stock