|
Packit |
1470ea |
|
|
Packit |
1470ea |
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="toolbar_builder.vala" xml:lang="pt-BR">
|
|
Packit |
1470ea |
<info>
|
|
Packit |
1470ea |
<title type="text">Toolbar created using Glade (Vala)</title>
|
|
Packit |
1470ea |
<link type="guide" xref="beginner.vala#menu-combo-toolbar"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="toolbar.vala"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="grid.vala"/>
|
|
Packit |
1470ea |
<revision version="0.1" date="2012-05-08" status="draft"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<credit type="author copyright">
|
|
Packit |
1470ea |
<name>Tiffany Antopolski</name>
|
|
Packit |
1470ea |
<email its:translate="no">tiffany.antopolski@gmail.com</email>
|
|
Packit |
1470ea |
<years>2012</years>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<desc>A bar of buttons</desc>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Rafael Ferreira</mal:name>
|
|
Packit |
1470ea |
<mal:email>rafael.f.f1@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2013</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
</info>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<title>Toolbar created using Glade</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/toolbar.png"/>
|
|
Packit |
1470ea |
This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<steps>
|
|
Packit |
1470ea |
<item>Open Glade, and save the file as <file>toolbar_builder.ui</file>
|
|
Packit |
1470ea |
<media type="image" src="media/glade_ui.png" width="900">
|
|
Packit |
1470ea |
Screenshot of Glade ui
|
|
Packit |
1470ea |
</media>
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.
|
|
Packit |
1470ea |
<media type="image" src="media/glade_select_toolbar.png">
|
|
Packit |
1470ea |
Screenshot of toolbar icon in Glade ui
|
|
Packit |
1470ea |
</media>
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to <input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.
|
|
Packit |
1470ea |
<media type="image" src="media/glade_toolbar_general.png">
|
|
Packit |
1470ea |
Screenshot of General tab
|
|
Packit |
1470ea |
</media>
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.
|
|
Packit |
1470ea |
<media type="image" src="media/glade_toolbar_common.png">
|
|
Packit |
1470ea |
Screenshot of Common tab
|
|
Packit |
1470ea |
</media>
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar Editor</gui> window will appear.
|
|
Packit |
1470ea |
<media type="image" src="media/glade_toolbar_edit.png">
|
|
Packit |
1470ea |
Screenshot of where to right click to edit toolbar.
|
|
Packit |
1470ea |
</media>
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<steps>
|
|
Packit |
1470ea |
<item>Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>. </item>
|
|
Packit |
1470ea |
<item>Change the name of the ToolItem to <input>new_button</input>. </item>
|
|
Packit |
1470ea |
<item>Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of the ToolButton to be shown, when you view the toolbar. </item>
|
|
Packit |
1470ea |
<item>Enter the <gui>action name</gui>: <input>app.new</input>. </item>
|
|
Packit |
1470ea |
<item>Change the <gui>Label</gui> to <input>New</input>. </item>
|
|
Packit |
1470ea |
<item>Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>. </item>
|
|
Packit |
1470ea |
</steps>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Repeat the above steps for the remaining ToolButtons, with the following properties:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Name
|
|
Packit |
1470ea |
Is important
|
|
Packit |
1470ea |
Action name
|
|
Packit |
1470ea |
Label
|
|
Packit |
1470ea |
Stock Id
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
open_button
|
|
Packit |
1470ea |
Yes
|
|
Packit |
1470ea |
app.open
|
|
Packit |
1470ea |
Open
|
|
Packit |
1470ea |
gtk-open
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
undo_button
|
|
Packit |
1470ea |
Yes
|
|
Packit |
1470ea |
win.undo
|
|
Packit |
1470ea |
Undo
|
|
Packit |
1470ea |
gtk-undo
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
fullscreen_button
|
|
Packit |
1470ea |
Yes
|
|
Packit |
1470ea |
win.fullscreen
|
|
Packit |
1470ea |
Fullscreen
|
|
Packit |
1470ea |
gtk-fullscreen
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
leave_fullscreen_button
|
|
Packit |
1470ea |
Yes
|
|
Packit |
1470ea |
win.fullscreen
|
|
Packit |
1470ea |
Leave Fullscreen
|
|
Packit |
1470ea |
gtk-leave-fullscreen
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<media type="image" src="media/glade_toolbar_editor.png">
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</media>
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>Close the <gui>Tool Bar Editor</gui>.
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>When our program will first start, we don't want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code.
|
|
Packit |
1470ea |
<media type="image" src="media/glade_visible_no.png">
|
|
Packit |
1470ea |
Setting the visible property to No
|
|
Packit |
1470ea |
</media>
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>Save your work, and close Glade.
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<item>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 <file>toolbar_builder.ui</file>:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<style>
|
|
Packit |
1470ea |
<class name="primary-toolbar"/>
|
|
Packit |
1470ea |
</style>
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
</item>
|
|
Packit |
1470ea |
</steps>
|
|
Packit |
1470ea |
<?xml version="1.0" encoding="UTF-8"?>
|
|
Packit |
1470ea |
<interface>
|
|
Packit |
1470ea |
<!-- interface-requires gtk+ 3.0 -->
|
|
Packit |
1470ea |
<object class="GtkToolbar" id="toolbar">
|
|
Packit |
1470ea |
<property name="visible">True</property>
|
|
Packit |
1470ea |
<property name="can_focus">False</property>
|
|
Packit |
1470ea |
<property name="hexpand">True</property>
|
|
Packit |
1470ea |
<property name="show_arrow">False</property>
|
|
Packit |
1470ea |
<child>
|
|
Packit |
1470ea |
<object class="GtkToolButton" id="new_button">
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="visible">True</property>
|
|
Packit |
1470ea |
<property name="can_focus">False</property>
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="is_important">True</property>
|
|
Packit |
1470ea |
<property name="action_name">app.new</property>
|
|
Packit |
1470ea |
<property name="label" translatable="yes">New</property>
|
|
Packit |
1470ea |
<property name="use_underline">True</property>
|
|
Packit |
1470ea |
<property name="stock_id">gtk-new</property>
|
|
Packit |
1470ea |
</object>
|
|
Packit |
1470ea |
<packing>
|
|
Packit |
1470ea |
<property name="expand">False</property>
|
|
Packit |
1470ea |
<property name="homogeneous">True</property>
|
|
Packit |
1470ea |
</packing>
|
|
Packit |
1470ea |
</child>
|
|
Packit |
1470ea |
<child>
|
|
Packit |
1470ea |
<object class="GtkToolButton" id="open_button">
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="visible">True</property>
|
|
Packit |
1470ea |
<property name="can_focus">False</property>
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="is_important">True</property>
|
|
Packit |
1470ea |
<property name="action_name">app.open</property>
|
|
Packit |
1470ea |
<property name="label" translatable="yes">Open</property>
|
|
Packit |
1470ea |
<property name="use_underline">True</property>
|
|
Packit |
1470ea |
<property name="stock_id">gtk-open</property>
|
|
Packit |
1470ea |
</object>
|
|
Packit |
1470ea |
<packing>
|
|
Packit |
1470ea |
<property name="expand">False</property>
|
|
Packit |
1470ea |
<property name="homogeneous">True</property>
|
|
Packit |
1470ea |
</packing>
|
|
Packit |
1470ea |
</child>
|
|
Packit |
1470ea |
<child>
|
|
Packit |
1470ea |
<object class="GtkToolButton" id="undo_button">
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="visible">True</property>
|
|
Packit |
1470ea |
<property name="can_focus">False</property>
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="is_important">True</property>
|
|
Packit |
1470ea |
<property name="action_name">win.undo</property>
|
|
Packit |
1470ea |
<property name="label" translatable="yes">Undo</property>
|
|
Packit |
1470ea |
<property name="use_underline">True</property>
|
|
Packit |
1470ea |
<property name="stock_id">gtk-undo</property>
|
|
Packit |
1470ea |
</object>
|
|
Packit |
1470ea |
<packing>
|
|
Packit |
1470ea |
<property name="expand">False</property>
|
|
Packit |
1470ea |
<property name="homogeneous">True</property>
|
|
Packit |
1470ea |
</packing>
|
|
Packit |
1470ea |
</child>
|
|
Packit |
1470ea |
<child>
|
|
Packit |
1470ea |
<object class="GtkToolButton" id="fullscreen_button">
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="visible">True</property>
|
|
Packit |
1470ea |
<property name="can_focus">False</property>
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="is_important">True</property>
|
|
Packit |
1470ea |
<property name="action_name">win.fullscreen</property>
|
|
Packit |
1470ea |
<property name="label" translatable="yes">Fullscreen</property>
|
|
Packit |
1470ea |
<property name="use_underline">True</property>
|
|
Packit |
1470ea |
<property name="stock_id">gtk-fullscreen</property>
|
|
Packit |
1470ea |
</object>
|
|
Packit |
1470ea |
<packing>
|
|
Packit |
1470ea |
<property name="expand">False</property>
|
|
Packit |
1470ea |
<property name="homogeneous">True</property>
|
|
Packit |
1470ea |
</packing>
|
|
Packit |
1470ea |
</child>
|
|
Packit |
1470ea |
<child>
|
|
Packit |
1470ea |
<object class="GtkToolButton" id="leave_fullscreen_button">
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="can_focus">False</property>
|
|
Packit |
1470ea |
<property name="use_action_appearance">False</property>
|
|
Packit |
1470ea |
<property name="is_important">True</property>
|
|
Packit |
1470ea |
<property name="action_name">win.fullscreen</property>
|
|
Packit |
1470ea |
<property name="label" translatable="yes">Leave Fullscreen</property>
|
|
Packit |
1470ea |
<property name="use_underline">True</property>
|
|
Packit |
1470ea |
<property name="stock_id">gtk-leave-fullscreen</property>
|
|
Packit |
1470ea |
</object>
|
|
Packit |
1470ea |
<packing>
|
|
Packit |
1470ea |
<property name="expand">False</property>
|
|
Packit |
1470ea |
<property name="homogeneous">True</property>
|
|
Packit |
1470ea |
</packing>
|
|
Packit |
1470ea |
</child>
|
|
Packit |
1470ea |
</object>
|
|
Packit |
1470ea |
</interface>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
We now create the code below, which adds the toolbar from the file we just created.
|
|
Packit |
1470ea |
/* This is the Window */
|
|
Packit |
1470ea |
class MyWindow : Gtk.ApplicationWindow {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* Declare these two ToolButtons, as we will get them
|
|
Packit |
1470ea |
* from the ui file (see lines 32 and 33), so we can
|
|
Packit |
1470ea |
* hide() and show() them as needed.*/
|
|
Packit |
1470ea |
Gtk.ToolButton fullscreen_button;
|
|
Packit |
1470ea |
Gtk.ToolButton leave_fullscreen_button;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* Constructor */
|
|
Packit |
1470ea |
internal MyWindow (MyApplication app) {
|
|
Packit |
1470ea |
Object (application: app, title: "Toolbar Example");
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
this.set_default_size (400, 200);
|
|
Packit |
1470ea |
var grid = new Gtk.Grid ();
|
|
Packit |
1470ea |
this.add (grid);
|
|
Packit |
1470ea |
grid.show ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* add the toolbar from the ui file */
|
|
Packit |
1470ea |
var builder = new Gtk.Builder ();
|
|
Packit |
1470ea |
try {
|
|
Packit |
1470ea |
builder.add_from_file ("toolbar_builder.ui");
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
/* Handle the exception */
|
|
Packit |
1470ea |
catch (Error e) {
|
|
Packit |
1470ea |
error ("Unable to load file: %s", e.message);
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
grid.attach (builder.get_object ("toolbar") as Gtk.Toolbar, 0, 0, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* get these objects from the ui file so we can toggle between them */
|
|
Packit |
1470ea |
fullscreen_button = builder.get_object ("fullscreen_button") as Gtk.ToolButton;
|
|
Packit |
1470ea |
leave_fullscreen_button = builder.get_object ("leave_fullscreen_button") as Gtk.ToolButton;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* create the "undo" window action action */
|
|
Packit |
1470ea |
var undo_action = new SimpleAction ("undo", null);
|
|
Packit |
1470ea |
undo_action.activate.connect (undo_callback);
|
|
Packit |
1470ea |
this.add_action (undo_action);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* create the "fullscreen" window action */
|
|
Packit |
1470ea |
var fullscreen_action = new SimpleAction ("fullscreen", null);
|
|
Packit |
1470ea |
fullscreen_action.activate.connect (fullscreen_callback);
|
|
Packit |
1470ea |
this.add_action (fullscreen_action);
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
void undo_callback (SimpleAction simple, Variant? parameter) {
|
|
Packit |
1470ea |
print ("You clicked \"Undo\".\n");
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
void fullscreen_callback (SimpleAction simple, Variant? parameter) {
|
|
Packit |
1470ea |
if ((this.get_window ().get_state () & Gdk.WindowState.FULLSCREEN) != 0) {
|
|
Packit |
1470ea |
this.unfullscreen ();
|
|
Packit |
1470ea |
leave_fullscreen_button.hide ();
|
|
Packit |
1470ea |
fullscreen_button.show ();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
else {
|
|
Packit |
1470ea |
this.fullscreen ();
|
|
Packit |
1470ea |
fullscreen_button.hide ();
|
|
Packit |
1470ea |
leave_fullscreen_button.show ();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* This is the application */
|
|
Packit |
1470ea |
class MyApplication : Gtk.Application {
|
|
Packit |
1470ea |
protected override void activate () {
|
|
Packit |
1470ea |
new MyWindow (this).show ();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
protected override void startup () {
|
|
Packit |
1470ea |
base.startup ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* Create the "new" action and add it to the app*/
|
|
Packit |
1470ea |
var new_action = new SimpleAction ("new", null);
|
|
Packit |
1470ea |
new_action.activate.connect (new_callback);
|
|
Packit |
1470ea |
this.add_action (new_action);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* Create the "open" action, and add it to the app */
|
|
Packit |
1470ea |
var open_action = new SimpleAction ("open", null);
|
|
Packit |
1470ea |
open_action.activate.connect (open_callback);
|
|
Packit |
1470ea |
this.add_action (open_action);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* You could also add the action to the app menu
|
|
Packit |
1470ea |
* if you wanted to.
|
|
Packit |
1470ea |
*/
|
|
Packit |
1470ea |
//var menu = new Menu ();
|
|
Packit |
1470ea |
//menu.append ("New", "app.new");
|
|
Packit |
1470ea |
//this.app_menu = menu;
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
void new_callback (SimpleAction action, Variant? parameter) {
|
|
Packit |
1470ea |
print ("You clicked \"New\".\n");
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
void open_callback (SimpleAction action, Variant? parameter) {
|
|
Packit |
1470ea |
print ("You clicked \"Open\".\n");
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
/* The main function creates the application and runs it. */
|
|
Packit |
1470ea |
int main (string[] args) {
|
|
Packit |
1470ea |
return new MyApplication ().run (args);
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
In this sample we used the following:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<list>
|
|
Packit |
1470ea |
<item><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Toolbar.html">Gtk.Toolbar</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html">Gtk.Toolbutton</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html">Gtk.Stock</link> </item>
|
|
Packit |
1470ea |
</list>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</page>
|