<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="toolbar_builder.vala" xml:lang="es">
  <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>tiffany.antopolski@gmail.com</email>
      <years>2012</years>
    </credit>

    <desc>Una barra de botones</desc>
  </info>

  <title>Barra de herramientas creada con Glade</title>

  <media type="image" mime="image/png" src="media/toolbar.png"/>
  <p>Este ejemplo es similar a <link xref="toolbar.vala"/>, excepto que se usa Glade para crear la barra de herramientas en un archivo ui de XML.</p>

  <p>Para crear la barra de herramientas usando el <link href="http://glade.gnome.org/">diseñador de interfaces Glade</link>:</p>
  <steps>
    <item><p>Abra Glade y guarde el archivo como <file>toolbar_builder.ui</file></p>
          <p><media type="image" src="media/glade_ui.png" width="900">
              Screenshot of Glade ui
           </media></p>
    </item>

    <item><p>Bajo <gui>Contenedores</gui> en el lado izquierdo, pulse con el botón derecho en el icono de la barra de herramientas y seleccione <gui>Añadir widget como nivel superior</gui>.</p>
          <p><media type="image" src="media/glade_select_toolbar.png">
           Screenshot of toolbar icon in Glade ui
          </media></p>
    </item>

    <item><p>Bajo la pestaña <gui>General</gui> en la parte inferior derecha, cambie el <gui>Nombre</gui> a <input>toolbar</input> y <gui>Mostrar flecha</gui> a <gui>No</gui>.</p>
          <p><media type="image" src="media/glade_toolbar_general.png">
             Screenshot of General tab
          </media></p>
    </item>

    <item><p>Bajo la pestaña <gui>Comunes</gui>, establezca <gui>Expansión horizontal</gui> a <gui>Sí</gui>.</p>
         <p><media type="image" src="media/glade_toolbar_common.png">
              Screenshot of Common tab
          </media></p>
     </item>

     <item><p>Pulse el botón derecho sobre la barra de herramientas en la parte superior derecha y seleccione <gui>Editar</gui>. La ventana <gui>Editor de barras de herramientas</gui> aparecerá.</p>
         <p><media type="image" src="media/glade_toolbar_edit.png">
             Screenshot of where to right click to edit toolbar.
          </media></p>
   </item>

   <item><p>Se quieren añadir 5 «ToolButton»: «New», «Open», «Undo», «Fullscreen», y «Leave Fullscreen». Primero, se añadirá el «ToolButton» «New».</p>
     <steps>
       <item><p>Bajo la pestaña <gui>Jerarquía</gui>, pulse <gui>Añadir</gui>.</p></item>
       <item><p>Cambie el nombre del «ToolItem» a <input>new_button</input>.</p></item>
       <item><p>Deslícese hacia abajo y establezca <gui>Es Importante</gui> a <gui>Sí</gui>. Esto hará que la etiqueta del «ToolButton» se muestre cuando vea la barra de herramientas.</p></item>
       <item><p>Introduzca el <gui>Nombre de la acción</gui>: <input>app.new</input>.</p></item>
       <item><p>Cambie la <gui>Etiqueta</gui> a <input>New</input>.</p></item>
       <item><p>Seleccione el ID del inventario <gui>Nuevo</gui> desde el menú desplegable, o escriba <input>gtk-new</input>.</p></item>
     </steps>
     <p>Repita los pasos anteriores para los «ToolButton» restantes, con las siguientes propiedades:</p>
  <table frame="all" rules="rows">
    <thead>
      <tr>
        <td><p>Nombre</p></td>
        <td><p>Es importante</p></td>
        <td><p>Nombre de la acción</p></td>
        <td><p>Etiqueta</p></td>
        <td><p>ID del inventario</p></td>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td><p>open_button</p></td>
      <td><p>Sí</p></td>
      <td><p>app.open</p></td>
      <td><p>Open</p></td>
      <td><p>gtk-open</p></td>
    </tr>
    <tr>
      <td><p>undo_button</p></td>
      <td><p>Sí</p></td>
      <td><p>win.undo</p></td>
      <td><p>Undo</p></td>
      <td><p>gtk-undo</p></td>
    </tr>
    <tr>
      <td><p>fullscreen_button</p></td>
      <td><p>Sí</p></td>
      <td><p>win.fullscreen</p></td>
      <td><p>Fullscreen</p></td>
      <td><p>gtk-fullscreen</p></td>
    </tr>
    <tr>
      <td><p>leave_fullscreen_button</p></td>
      <td><p>Sí</p></td>
      <td><p>win.fullscreen</p></td>
      <td><p>Leave Fullscreen</p></td>
      <td><p>gtk-leave-fullscreen</p></td>
    </tr>
    </tbody>
</table>
          <media type="image" src="media/glade_toolbar_editor.png">

          </media>
    </item>

    <item><p>Cierre el <gui>Editor de la barra de herramientas</gui>.</p>
   </item>

   <item><p>No se quiere que se vea el «ToolButton» <gui>Leave Fullscreen</gui> cuando el programa se inicie por primera vez, dado que la aplicación no estará en modo a pantalla completa. Puede establecer esto en la pestaña <gui>Comunes</gui>, pulsando <gui>No</gui> en la propiedad <gui>Visible</gui>. El «ToolButton» aparecerá de todos modos en el diseñador de interfaces, pero se comportará correctamente cuando se cargue el archivo en el código de su programa.</p>
          <p><media type="image" src="media/glade_visible_no.png">
                 Setting the visible property to No
          </media></p>
   </item>

    <item><p>Guarde su trabajo y cierre Glade.</p>
   </item>

   <item><p>El archivo XML generado por Glade se muestra debajo. Este es la descripción de la barra de herramientas. En el momento en el que se escribe esto, la opción para añadir la clase «Gtk.STYLE_CLASS_PRIMARY_TOOLBAR» en el diseñador de interfaces Glade no existe. Se puede añadir manualmente al archivo XML. Para hacer esto, añada el siguiente código XML en la línea 9 de <file>toolbar_builder.ui</file>:</p>
   <code><![CDATA[
  <style>
     <class name="primary-toolbar"/>
  </style>
  ]]></code>
  <p>Si no añade esto, el programa seguirá funcionando bien. La barra de herramientas resultante se verá, sin embargo, ligeramente distinta a la de la captura de pantalla en la parte superior de esta página.</p>
   </item>
</steps>
  <code mime="application/xml" style="numbered"><xi:include href="samples/toolbar_builder.ui" parse="text"><xi:fallback/></xi:include></code>

  <p>Ahora se crea el código siguiente, que añade la barra de herramientas desde el archivo que se acaba de crear.</p>
<code mime="text/x-csharp" style="numbered"><xi:include href="samples/toolbar_builder.vala" parse="text"><xi:fallback/></xi:include></code>

<p>En este ejemplo se usa lo siguiente:</p>
<list>
  <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Toolbar.html">Gtk.Toolbar</link></p></item>
  <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html">Gtk.Toolbutton</link></p></item>
  <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html">Gtk.Stock</link></p></item>
</list>

</page>
