Creando interfaces en GtkDialog

[mister_electronico]

Otra cosa a tener en cuenta en este programa es la sustitucion del texto de las labels por una variable como es en este el caso la variable M100="Por defecto".

Esto es muy util y este texto puede ser para todo como Botones, Textos, Labels, frame y un largo etc..

Es muy util por que poniendolo como variables en cualquier momento podemos sustituir el texto de un monton de botones, cambiado el texto de asignacion a esa variable.

Para que puede ser esto util por ejemplo cuando queremos portar nuestro programa a otro idioma.

[mister_electronico]

Gtkdialog es un lenguaje para crear programas relativamente sencillo, y en el que se basan muchos programas de Puppy, es interesante de aprender.

En cualquier momento nos podemos crear un pequeño programa para que realize nuestras tareas mas cotidianas de forma sencilla.

Me gustaria que este tema fuera mas participativo, y no se convirtiera en un monologo.

En cualquier caso esta abierto a sugerencias, dudas, criticas todo ... menos silencio..

[mister_electronico]

Podemos hacer que nuestro programa envie señales al sistema.

Para verlas ejecutar este progama desde el terminal:

./programa

Veremos que segun pasemos el raton por los botones estos envian una señal al terminal.

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
 <vbox>
  <frame Button signals>
    <hbox>
      <button>
        <label>Por_defecto</label>
      </button>
      <button>
        <label>Enter/Leave/Clicked</label>
        <action signal="clicked">echo Signal: Cliquea /default/</action>
        <action signal="enter">echo Signal: enter</action>
        <action signal="leave">echo Signal: leave</action>
      </button>
      <button>
        <label>Pressed/Released/Clicked</label>
        <action signal="clicked">echo Signal: clicked /default/</action>
        <action signal="pressed">echo Signal: pressed</action>
        <action signal="released">echo Signal: released</action>
      </button>
    </hbox>
  </frame>
  <hbox>
   <button cancel>
     <action signal="enter">echo Deseas realmente salir?</action>
     <action type="exit">Cancel</action>
   </button>
   <button ok>
     <action signal="enter">echo Deseas salir realmente?</action>
     <action type="exit">OK</action>
   </button>
  </hbox>
 </vbox>
'
gtkdialog --program=MAIN_DIALOG

[mister_electronico]

Los checkbox son aquellas ventanitas pequeñas que picamos y cuya finalidad es seleccionar acciones o cosas de un programa.

Con un ejemplo se ve mejor que mil palabras.

#! /bin/bash

export MAIN_DIALOG='
<vbox>
<frame Ejemplo de Checkbox >
<checkbox>
<label>Esto es un checkbox...</label>
<variable>CHECKBOX</variable>
<action>echo Checkbox esta ahora $CHECKBOX .</action>
<action>if true enable:ENTRY</action>
<action>if false disable:ENTRY</action>
</checkbox>
<entry>
<default>Texto de entrada</default>
<variable>ENTRY</variable>
<visible>disabled</visible>
</entry>
<checkbox>
<label>Yo deseo activar boton OK ahora</label>
<default>true</default>
<variable>ANOTHER_CHECKBOX</variable>
<action>if true enable:OKBUTTON</action>
<action>if false disable:OKBUTTON</action>
</checkbox>
</frame>
<hbox>
<button ok>
<variable>OKBUTTON</variable>
</button>
<button cancel></button>
</hbox>
</vbox>
'

gtkdialog --program=MAIN_DIALOG

Vemos que con checkbox actuamos sobre las variables de habilitacion o desahabilitacion del la ventana de ENTRY y la del boton Ok.

[mister_electronico]

El editor es una ventana donde podemos recibir los datos de multiples sitios.

Correr el siguiente programa:

Code: Select all

#! /bin/bash

echo "  " > /mnt/home/temp.txt

export MAIN_DIALOG='
<vbox>
    <edit>
      <variable>EDITOR</variable>
      <width>350</width><height>150</height>
      <input file>/mnt/home/temp.txt</input>
    </edit>
    <hbox>
      <button>
        <label>Recibir_dato</label>
        <action type="clear">EDITOR</action> 
        <action>echo "hola" >> /mnt/home/temp.txt</action>        
        <action>refresh:EDITOR</action> 
      </button>
      <button cancel></button>
      <button ok></button>
    </hbox>
</vbox>
'

gtkdialog --program=MAIN_DIALOG

Lo datos los recibimos de un archivo en este caso temp.txt.

Y segun lo refresquemos con el boton "Recibir datos" veremos las actualizaciones.

Este refresco lo podemos hacer como vimos en programas anteriores con un timer.

[mister_electronico]

Podemos varia atributos de Editor al igual que lo demas.

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
<vbox>
    <edit editable="false">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>No es editable</default>
    </edit>
    <edit accepts-tab="false">
      <variable>EDITOR1</variable>
      <width>350</width><height>50</height>
      <default>No acepta tabulacion</default>
    </edit>
    <edit indent="25">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>El sangrado 25</default>
    </edit>
    <edit left-margin="25" right-margin="25">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>Margen izquierdo y derecho a 25</default>
    </edit>
    <edit cursor-visible="false">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>cursor no visible</default>
    </edit>
    <hbox>
      <button cancel></button>
      <button ok></button>
    </hbox>
</vbox>
'

gtkdialog --program=MAIN_DIALOG

[mister_electronico]

Otro excelente post de don570 de como crear botones con svg:

http://murga-linux.com/puppy/viewtopic. ... 632#732632

[mister_electronico]

Para incrustar una imagen en un formulario lo podemos hacer con pixmap.

La imagen segun este ejemplo debe estar en el mismo lugar que el script:

#! /bin/bash

Code: Select all

export MAIN_DIALOG='
<vbox>
  <frame Incrustar imagen>
    <pixmap>
      <input file>2.jpg</input>
    </pixmap>
  </frame>
  <hbox>
    <button cancel></button>
    <button ok></button>
  </hbox>
</vbox>
'
gtkdialog --program=MAIN_DIALOG

Y aqui va el script y la imagen.

[mister_electronico]

Me puse a pensar como introducir un gif dentro de un pixmap y he encontrado esta forma.

Seguramente cualquiera encuentra la forma de mejorarlo asi que si lo consigue, seria bueno que lo pusiera aqui.

Para ejecutar el programa descomprimir la carpeta pixmap_gif, introducirse dentro de ella y ejecutar ./pixmap_gif

De cualquier forma esto abre el camino a una serie de cosas que quiero hacer.

saludos.

[mister_electronico]

No olvidar que si no se ejecuta dar permisos de ejecucion a pixmap_gif y a script_01 .

Saludos.

[mister_electronico]

He echo este para hacer un contador esta vez.

[mister_electronico]

El formulario Editor es un buen formulario para presentar datos...

Basicamente es:

Code: Select all

 
#! /bin/bash
export MAIN_DIALOG='
<vbox>
    <edit>
     <variable>EDITOR</variable>
      <width>350</width><height>150</height>
      <default>
       "Este es el valor por defectos de editor."
      </default>
    </edit>
    <hbox>
      <button cancel></button>
      <button ok></button>
    </hbox>
</vbox>
'

gtkdialog --program=MAIN_DIALOG

[mister_electronico]

Podemos presentar los datos en el editor, de datos provenientes de un fichero.
Este es muy util para poder ver los datos que van generando datos nuestro propio programa o otro programa externo.

Code: Select all

#! /bin/bash

ls /mnt/home > /tmp/temporal234.txt

export MAIN_DIALOG='
<vbox>
    <edit>
      <variable>EDITOR</variable>
      <width>450</width><height>650</height>
      <input file>/tmp/temporal234.txt</input>
    </edit>
    <hbox>
      <button>
        <label>Leer_Archivo</label>
        <action type="clear">EDITOR</action> 
        <action>refresh:EDITOR</action> 
      </button>
      <button cancel></button>
      <button ok></button>
    </hbox>
</vbox>
'
gtkdialog --program=MAIN_DIALOG

[mister_electronico]

Algunos atributos del editor

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
<vbox>
    <edit editable="false">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>El editor en false no se puede escribir</default>
    </edit>
    <edit accepts-tab="false">
      <variable>EDITOR1</variable>
      <width>350</width><height>50</height>
      <default>No acepta tabulaciones.</default>
    </edit>
    <edit indent="25">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>Sangrado a 25</default>
    </edit>
    <edit left-margin="25" right-margin="25">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>El margen a izquierda y derecha de 25</default>
    </edit>
    <edit cursor-visible="false">
      <variable>EDITOR2</variable>
      <width>350</width><height>50</height>
      <default>El cursor no se puede ver</default>
    </edit>
    <hbox>
      <button cancel></button>
      <button ok></button>
    </hbox>
</vbox>
'

gtkdialog --program=MAIN_DIALOG

[mister_electronico]

El combobox es una ventanita despleglable en la que nosotros podemos seleccionar una de las opciones que nos viene en esta ventanita que se nos despliega ... valga la redundancia.

Un ejemplo vale mas que mil palabras..

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
<vbox>
  <hbox>
    <text>
      <label>Programas:</label>
    </text>
    <combobox>
      <variable>COMBOBOX</variable>
      <item>abiword</item>
      <item>mtpaint</item>
      <item>defaultbrowser</item>
    </combobox>
  </hbox>
  <hbox>
   <button ok>
     <action>$COMBOBOX &</action>   
   </button> 
   <button cancel></button>
  </hbox>
 </vbox>
'

gtkdialog --program=MAIN_DIALOG

En la ventanita desplegable seleccionamos el programa que queremos ejecutar y con OK lo ejecutamos..

Para salir con Cancel.

[mister_electronico]

Una forma de hacer formularios avanzados seria como la del siguiente ejemplo:

Code: Select all

#!/bin/sh

GTKDIALOG=gtkdialog

Funcion_crear_boton() {
	echo '<button>
			<label>"'"$2"'"</label>
			<action>echo "'"$3"' Entrada'$1'"</action>
			<action function="'"$4"'">echo Entrada'$1'</action>
		</button>'
}

export MAIN_DIALOG='
<window title="Ventanas avanzadas" width-request="700" resizable="false">
	<vbox>
		<frame Construccion avanzada de botones>
			<vbox>
				<hseparator></hseparator>
				<hbox homogeneous="true">
					'"$(Funcion_crear_boton 19 Desahabilita Desahabilita disable)"'
					'"$(Funcion_crear_boton 19 Habilita Habilitando Habilitado)"'
					'"$(Funcion_crear_boton 19 Limpia Limpiando Limpia)"'
					'"$(Funcion_crear_boton 19 Borrar Borrando Borrado)"'
					'"$(Funcion_crear_boton 19 Refreca Refrecando Referecado)"'
					'"$(Funcion_crear_boton 19 Salvar Salvando Salvar)"'
					'"$(Funcion_crear_boton 19 Arch_Selet """Insertar dentro""" Arch_selec)"'
				</hbox>
				<hseparator></hseparator>
				<hbox homogeneous="true">
					'"$(Funcion_crear_boton 20 Desahabilita Desahabilita disable)"'
					'"$(Funcion_crear_boton 20 Habilita Habilitando Habilitado)"'
					'"$(Funcion_crear_boton 20 Limpia Limpiando Limpia)"'
					'"$(Funcion_crear_boton 20 Borrar Borrando Borrado)"'
					'"$(Funcion_crear_boton 20 Refreca Refrecando Referecado)"'
					'"$(Funcion_crear_boton 20 Salvar Salvando Salvar)"'
					'"$(Funcion_crear_boton 20 Arch_Selet """Insertar dentro""" Arch_selec)"'
				</hbox>
				<hseparator></hseparator>
				<hbox homogeneous="true">
					'"$(Funcion_crear_boton 21 Desahabilita Desahabilita disable)"'
					'"$(Funcion_crear_boton 21 Habilita Habilitando Habilitado)"'
					'"$(Funcion_crear_boton 21 Limpia Limpiando Limpia)"'
					'"$(Funcion_crear_boton 21 Borrar Borrando Borrado)"'
					'"$(Funcion_crear_boton 21 Refreca Refrecando Referecado)"'
					'"$(Funcion_crear_boton 21 Salvar Salvando Salvar)"'
					'"$(Funcion_crear_boton 21 Arch_Selet """Insertar dentro""" Arch_selec)"'
				</hbox>				
			</vbox>
		</frame>
		<hbox homogeneous="true">
			<button ok></button>
		</hbox>
	</vbox>
	<action signal="hide">exit:Exit</action>
</window>
'

$GTKDIALOG --program=MAIN_DIALOG

[mister_electronico]

Si corremos este programa veremos que tiene un monton de botones.

Estos botones se crean solo con una linea de comando:

'"$(Funcion_crear_boton 19 Desahabilita Desahabilita disable)"'

Y esto es debido a que previamente lo hemos definido con la funcion Funcion_crear_boton.


Esta funcion lo que hace es mediante la funcion echo del inicion sustituir el texto "Funcion_crear_boton por todo el contenido de la funcion.


Pero ademas permite la introduccion de numeros y cadenas exteriores, para por ejemplo recbir el nombre que tendra el boton, y las acciones que va a ejectutar dicho boton y tambien valores numericos que sean necesarios.


Todo esto es muy util cuando por ejemplo se va utilizar el mismo boton en distintas partes del formulario, o en otros formularios, ya que dichas fuciones se pueden exportar.

Esto hara nuestro formulario mas compresible y mas facil de modificar.

Si ejecutamos este script desde el terminal veremos las acciones que toma que son las de escribir los textos mediante echo... aunque podria ser las que queramos.

[mister_electronico]

Comentar lo siguiente, y es que aunque en el programa anterior se ha echo con una funcion de botones, se puede realizar con cualquier otra cosa como entry, combobox, chexbox, label, etc...

Saludos.

[mister_electronico]

Listado es una ventana donde se nos presenta una serie de lineas a seleccionar.

Ejemplo:

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
  <vbox>
    <list>
      <variable>LISTADO</variable>
      <item>Primer item</item>
      <item>Segundo item</item>
      <item>Tercer item</item>
    </list>
    <hbox>
     <button ok></button>
     <button cancel></button>
    </hbox>
  </vbox>
'

gtkdialog --program=MAIN_DIALOG

Si lo ejecutamos del el terminal al apretar el boton Ok o Cancel veremos en la variable LISTADO el valor del la linea seleccionada.

[mister_electronico]

Para crear una accion al seleccionar una linea del listado, vemos el siguiente ejemplo:

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
  <vbox>
    <list>
      <variable>LIST</variable>
      <item>abiword</item>
      <item>mtpaint</item>
      <item>defaultbrowser</item>
      <action>exec $LIST &</action>
    </list>
    <hbox>
     <button ok></button>
     <button cancel></button>
    </hbox>
  </vbox>
'

gtkdialog --program=MAIN_DIALOG

Cada vez que piquemos en la linea correspondiente se nos abrira abiword, mtpaint o el navegador que tengamos por defecto.