viernes, 13 de junio de 2014

Creando interfaces en GtkDialog

Poco o nada de información se encuentra sobre Gtkdialog en español googleando, y muchos seguramente se han preguntado como hacer esas "ventanitas" o interfaces de las aplicaciones o como es que un script cobra vida dando click sobre él.
Les aclaro que no se mucho sobre GtkDialog, asi que explicaré este tutorial de una manera mecanizada de manera que puedan dar sus primeros pasos escribiendo código y despertando las neuronas ( que en mi caso vaya si estaban dormidas ), quien quita y esto despierta el interés a otros lenguajes y se vuelven expertos en la materia.
Bueno empecemos.

Preparando el terreno 
Lo primero es crear un archivo en texto plano donde van a escribir el código o simplemente dando click derecho desde rox>>nuevo>>script no importa la forma como lo hagan.

luego abren en algún editor de texto el script (geany, nano, sublime text lo que sea ) y verán una única linea.

#!bin/sh

Esta linea significa que el interprete de comandos que vamos a utilizar es lo que se conoce como bash eso explicado en mis palabras wikipedia puede servir si tienes mas dudas.

La base para usar gtkdialog 
ahora esto es mandatorio para construir una interfaz que pueda ser interpretada por bash en gtkdialog escribimos lo siguiente.

#!/bin/sh 
export MAIN_DIALOG=' 

gtkdialog --program=MAIN_DIALOG

En el cual el cuerpo de la interfaz deberá quedar entre los 2 apóstrofos o comillas, según el país donde nacieron así son conocidos, pero veamos el código completo y luego detallamos.

#!/bin/sh 
export MAIN_DIALOG=' 
<window title="Titulo de la ventana principal"> 
  <vbox> 
   <frame Este es el titulo del cuadro 1> 
     <vbox> 
        <button> 
          <input file>/usr/share/icons/display.png</input><height>40</height><width>70</width> 
           <label>Nombre del icono </label> 
        </button> 
              <text><label>En sentido vertical</label></text> 
     </vbox> 
   </frame> 
 <frame Este es el titulo del cuadro 2> 
   <hbox> 
          <button> 
          <input file>/usr/share/icons/display.png</input><height>40</height><width>70</width> 
           <label>Nombre del icono </label> 
        </button> 
      <text><label>En sentido horizontal</label></text> 
   </hbox> 
 </frame> 
   </vbox>          
  </window>  

gtkdialog --program=MAIN_DIALOG

Es en este punto que uno se pregunta que son todas esas llaves y palabras bueno cualquiera con un poco de ingles o un buen diccionario puede saber que significa cada una
window=ventana
label=viñeta
title=titulo
button=boton
y otra abreviadas como
vbox y hbox =caja horizontal, caja vertical

Si observas el script veras que el cuerpo de la interfaz se va dividiendo en muchas formas como cajas, ventanas, cuadros etc y que si inicias una de estas deberás terminarlas ejemplo:

<button></button>


Estas dos ordenes cerrarían la llave y el interprete entendería que estamos creando un botón simple en la interfaz, pero veamos que hace todo el código. 




Se puede apreciar como disponiendo de las ordenes correctas la interaz hace lo que queremos pero el ejercicio que realmente importa es como te imaginas el código cuando ves la interfaz y viceversa, eso te ayudará a crear e imaginar en tu mente antes de empezar a escribir el código.

Revisemos esto.


Como puedes ver la diferencia entre vbox y hbox es que las disposiciones de lo que vayas agregando sucesivamente irá colocándose en la forma deseada ya sea horizontal en linea o vertical de arriba hacia abajo, y que dentro de estas puedes seguir agregando tantos elementos como deseen, aquí la comparación de esa imagen.


Esto demuestra que crear una interfaz es mas simple de lo que muchos pensamos, claro que existen una buena cantidad de ordenes, acciones, atributos, variables, funciones extras que se pueden usar además de las que explique, pero que como una introducción a gtkdialog esto les será de utilidad.

Si me equivoco en algún concepto por favor me corrigen o aportan más información al respecto

Mi intención no es enseñarte, solo documentar lo que voy aprendiendo, ya que tengo poca memoria y luego me olvido de todo.

Cheers!! 

4 comentarios:

  1. Me agrado, posts como este me motivan mucho a aprender.
    Gracias.

    ResponderEliminar
  2. Muy interesante tu trabajo.
    Me has abierto el interes y ya me pongo a ver esto.
    Gracias por todo

    ResponderEliminar