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

  <info>

  <title type="text">Toolbar created using Glade (Vala)</title>

    <link type="guide" xref="beginner.vala#menu-combo-toolbar"/>

    <link type="seealso" xref="toolbar.vala"/>

    <link type="seealso" xref="grid.vala"/>

    <revision version="0.1" date="2012-05-08" status="draft"/>

    <credit type="author copyright">

      <name>Tiffany Antopolski</name>

      <email its:translate="no">tiffany.antopolski@gmail.com</email>

      <years>2012</years>

    </credit>

    <desc>A bar of buttons</desc>

  </info>

  <title>Toolbar created using Glade</title>

  <media type="image" mime="image/png" src="media/toolbar.png"/>

  
This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.

  To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>:

  <steps>

    <item>
Open Glade, and save the file as <file>toolbar_builder.ui</file>

          
<media type="image" src="media/glade_ui.png" width="900">

              Screenshot of Glade ui

           </media>

    </item>

    <item>
Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.

          
<media type="image" src="media/glade_select_toolbar.png">

           Screenshot of toolbar icon in Glade ui

          </media>

    </item>

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

          
<media type="image" src="media/glade_toolbar_general.png">

             Screenshot of General tab

          </media>

    </item>

    <item>
Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.

         
<media type="image" src="media/glade_toolbar_common.png">

              Screenshot of Common tab

          </media>

     </item>

     <item>
Right click on the toolbar in the top right and select <gui>Edit</gui>.  The <gui>Tool Bar Editor</gui> window will appear.

         
<media type="image" src="media/glade_toolbar_edit.png">

             Screenshot of where to right click to edit toolbar.

          </media>

   </item>

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

     <steps>

       <item>
Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.
</item>

       <item>
Change the name of the ToolItem to <input>new_button</input>.
</item>

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

       <item>
Enter the <gui>action name</gui>: <input>app.new</input>.
</item>

       <item>
Change the <gui>Label</gui> to <input>New</input>.
</item>

       <item>
Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>.
</item>

     </steps>

    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

          <media type="image" src="media/glade_toolbar_editor.png">

          </media>

    </item>

    <item>
Close the <gui>Tool Bar Editor</gui>.

   </item>

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

          
<media type="image" src="media/glade_visible_no.png">

                 Setting the visible property to No

          </media>

   </item>

    <item>
Save your work, and close Glade.

   </item>

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

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

   </item>

</steps>

  <xi:include href="samples/toolbar_builder.ui" parse="text"><xi:fallback/></xi:include>

  
We now create the code below, which adds the toolbar from the file we just created.

<xi:include href="samples/toolbar_builder.vala" parse="text"><xi:fallback/></xi:include>

  In this sample we used the following:

<list>

  <item>
<link href="http://www.valadoc.org/gtk+-3.0/Gtk.Toolbar.html">Gtk.Toolbar</link>
</item>

  <item>
<link href="http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html">Gtk.Toolbutton</link>
</item>

  <item>
<link href="http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html">Gtk.Stock</link>
</item>

</list>

</page>