xmlns:its="http://www.w3.org/2005/11/its"

      xmlns:xi="http://www.w3.org/2001/XInclude"

      type="guide" style="task"

      id="toolbar_builder.py">

  <info>

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

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

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

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

    <link type="next" xref="menubar.py"/>

    <revision version="0.1" date="2012-07-17" status="draft"/>

    <credit type="author copyright">

      <name>Tiffany Antopolski</name>

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

      <years>2012</years>

    </credit>

    <credit type="author copyright edit">

      <name>Marta Maria Casetti</name>

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

      <years>2012</years>

    </credit>

    <credit type="author copyright">

      <name>Sebastian Pölsterl</name>

      <email its:translate="no">sebp@k-d-w.org</email>

      <years>2011</years>

    </credit>

    <desc>A bar of buttons and other widgets</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.py"/>, except we use Glade to create the toolbar in an XML .ui file.

<links type="sections" />

<section id="glade">

<title>Creating the toolbar with Glade</title>

  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 do not 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. Note that the method show_all() would override this setting - so in the code we have to use show() separately on all the elements.

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

</section>

<section id="code">

<title>Code used to generate this example</title>

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

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

</section>

<section id="methods">

<title>Useful methods for Gtk.Builder</title>

For the useful methods for a Toolbar widget, see <link xref="toolbar.py" />

Gtk.Builder builds an interface from an XML UI definition.

<list>

<item>
add_from_file(filename) loads and parses the given file and merges it with the current contents of the Gtk.Builder.
</item>

<item>
add_from_string(string) parses the given string and merges it with the current contents of the Gtk.Builder.
</item>

<item>
add_objects_from_file(filename, object_ids) is the same as add_from_file(), but it loads only the objects with the ids given in the object_ids list.
</item>

<item>
add_objects_from_string(string, object_ids)  is the same as add_from_string(), but it loads only the objects with the ids given in the object_ids list.
</item>

<item>
get_object(object_id) retrieves the widget with the id object_id from the loaded objects in the builder.
</item>

<item>
get_objects() returns all loaded objects.
</item>

<item>
connect_signals(handler_object) connects the signals to the methods given in the handler_object. This can be any object which contains keys or attributes that are called like the signal handler names given in the interface description, e.g. a class or a dict. In line 39 the signal "activate" from the action undo_action is connected to the callback function undo_callback() using action.connect(signal, callback function). See <link xref="signals-callbacks.py"/> for a more detailed explanation.

</item>

</list>

</section>

<section id="references">

<title>API References</title>

  In this sample we used the following:

<list>

  <item>
<link href="http://developer.gnome.org/gtk3/unstable/GtkGrid.html">GtkGrid</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/unstable/GtkBuilder.html">GtkBuilder</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/unstable/GtkWidget.html">GtkWidget</link>
</item>

  <item>
<link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">Event Structures</link>
</item>

</list>

</section>

</page>