1<?xml version='1.0' encoding='UTF-8'?> 2<page xmlns="http://projectmallard.org/1.0/" 3 xmlns:its="http://www.w3.org/2005/11/its" 4 xmlns:xi="http://www.w3.org/2001/XInclude" 5 type="guide" style="task" 6 id="toolbar_builder.vala"> 7 <info> 8 <title type="text">Toolbar created using Glade (Vala)</title> 9 <link type="guide" xref="beginner.vala#menu-combo-toolbar"/> 10 <link type="seealso" xref="toolbar.vala"/> 11 <link type="seealso" xref="grid.vala"/> 12 <revision version="0.1" date="2012-05-08" status="draft"/> 13 14 <credit type="author copyright"> 15 <name>Tiffany Antopolski</name> 16 <email its:translate="no">tiffany.antopolski@gmail.com</email> 17 <years>2012</years> 18 </credit> 19 20 <desc>A bar of buttons</desc> 21 </info> 22 23 <title>Toolbar created using Glade</title> 24 25 <media type="image" mime="image/png" src="media/toolbar.png"/> 26 <p>This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.</p> 27 28 <p> 29 To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>: 30 </p> 31 <steps> 32 <item><p>Open Glade, and save the file as <file>toolbar_builder.ui</file></p> 33 <p><media type="image" src="media/glade_ui.png" width="900"> 34 Screenshot of Glade ui 35 </media></p> 36 </item> 37 38 <item><p>Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.</p> 39 <p><media type="image" src="media/glade_select_toolbar.png"> 40 Screenshot of toolbar icon in Glade ui 41 </media></p> 42 </item> 43 44 <item><p>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>.</p> 45 <p><media type="image" src="media/glade_toolbar_general.png"> 46 Screenshot of General tab 47 </media></p> 48 </item> 49 50 <item><p>Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.</p> 51 <p><media type="image" src="media/glade_toolbar_common.png"> 52 Screenshot of Common tab 53 </media></p> 54 </item> 55 56 <item><p>Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar Editor</gui> window will appear.</p> 57 <p><media type="image" src="media/glade_toolbar_edit.png"> 58 Screenshot of where to right click to edit toolbar. 59 </media></p> 60 </item> 61 62 <item><p>We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton. 63 </p> 64 <steps> 65 <item><p>Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.</p></item> 66 <item><p>Change the name of the ToolItem to <input>new_button</input>.</p></item> 67 <item><p>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.</p></item> 68 <item><p>Enter the <gui>action name</gui>: <input>app.new</input>.</p></item> 69 <item><p>Change the <gui>Label</gui> to <input>New</input>.</p></item> 70 <item><p>Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>.</p></item> 71 </steps> 72 <p> 73 Repeat the above steps for the remaining ToolButtons, with the following properties: 74 </p> 75 <table frame="all" rules="rows"> 76 <thead> 77 <tr> 78 <td><p>Name</p></td> 79 <td><p>Is important</p></td> 80 <td><p>Action name</p></td> 81 <td><p>Label</p></td> 82 <td><p>Stock Id</p></td> 83 </tr> 84 </thead> 85 <tbody> 86 <tr> 87 <td><p>open_button</p></td> 88 <td><p>Yes</p></td> 89 <td><p>app.open</p></td> 90 <td><p>Open</p></td> 91 <td><p>gtk-open</p></td> 92 </tr> 93 <tr> 94 <td><p>undo_button</p></td> 95 <td><p>Yes</p></td> 96 <td><p>win.undo</p></td> 97 <td><p>Undo</p></td> 98 <td><p>gtk-undo</p></td> 99 </tr> 100 <tr> 101 <td><p>fullscreen_button</p></td> 102 <td><p>Yes</p></td> 103 <td><p>win.fullscreen</p></td> 104 <td><p>Fullscreen</p></td> 105 <td><p>gtk-fullscreen</p></td> 106 </tr> 107 <tr> 108 <td><p>leave_fullscreen_button</p></td> 109 <td><p>Yes</p></td> 110 <td><p>win.fullscreen</p></td> 111 <td><p>Leave Fullscreen</p></td> 112 <td><p>gtk-leave-fullscreen</p></td> 113 </tr> 114 </tbody> 115</table> 116 <media type="image" src="media/glade_toolbar_editor.png"> 117 118 </media> 119 </item> 120 121 <item><p>Close the <gui>Tool Bar Editor</gui>.</p> 122 </item> 123 124 <item><p>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.</p> 125 <p><media type="image" src="media/glade_visible_no.png"> 126 Setting the visible property to No 127 </media></p> 128 </item> 129 130 <item><p>Save your work, and close Glade.</p> 131 </item> 132 133 <item><p>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>:</p> 134 <code><![CDATA[ 135 <style> 136 <class name="primary-toolbar"/> 137 </style> 138 ]]></code> 139 <p>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.</p> 140 </item> 141</steps> 142 <code mime="application/xml" style="numbered"><xi:include href="samples/toolbar_builder.ui" parse="text"><xi:fallback/></xi:include></code> 143 144 <p>We now create the code below, which adds the toolbar from the file we just created.</p> 145<code mime="text/x-csharp" style="numbered"><xi:include href="samples/toolbar_builder.vala" parse="text"><xi:fallback/></xi:include></code> 146 147<p> 148 In this sample we used the following: 149</p> 150<list> 151 <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Toolbar.html">Gtk.Toolbar</link></p></item> 152 <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html">Gtk.Toolbutton</link></p></item> 153 <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html">Gtk.Stock</link></p></item> 154</list> 155 156</page> 157