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