Creando interfaces en GtkDialog

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

[josejp2424]

muy bueno lo que estas presentando mister electronico

[mister_electronico]

El siguiente programita es muy interesante, normalmente en cualquier programa como los de configuracion u otro tipo se nos puede dar la ocasion de la necesidad de pedir al usuario el arrastrar el icono de un archivo para que haga algo con ese archivo.


El ejemplo mas claro lo tenemos cuando arrastramos un imagen, a unos de los iconos del escritorio para ponerle la imagen que nosotros queremos.

Nos pide que arrastremos una imagen a una ventanita de entry.


El siguiente programa muestra como hacerlo salvo que en este caso lo que tenemos que es arrastrar un archivo de audio o video para luego mas tarde sea reproducido al apretar el boton Ok.


Bueno aqui lo dejo.

Code: Select all

#! /bin/bash
function LEER_ARCHIVO(){

   A=$(cat /tmp/arch234.txt)
   echo "$A"
   exec mplayer "$A"   
}

export -f LEER_ARCHIVO

export MAIN_DIALOG='
<vbox>
   <text>
     <label>Arrastre un archivo de audio o video a la ventanita.</label>
   </text>
   <entry>
    <variable>ARCHIVO</variable>
   </entry>
 <hbox>
   <button ok>
      <action>"echo $ARCHIVO > /tmp/arch234.txt"</action>
      <action>LEER_ARCHIVO</action>
	  <action>exit:Exit</action>
   </button>
 </hbox>
</vbox>
'
gtkdialog --program=MAIN_DIALOG

[mister_electronico]

Bueno unos comentarios con respecto el programa anterior.

Ver tambien el uso de las funciones exteriores en este caso la de LEER_ARCHIVO

Y como se exporta para que pueda ser leida por el programa.

Las funciones so muy utililes en multiples programas de Gtkdialog.


Otra cosa interesante es como el nombre del archivo arrastrado es capturado en la variable ARCHIVO y como este nombre se almacena dentro del archivo temporal /tmp/arch234.txt para luego poder ser recuperado por la funcion
LEER_ARCHIVO, una forma de pasarse datos atraves de ficheros.

Saludos.

[mister_electronico]

El progressbar es una ventana para indicarnos algo que esta en proceso.

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
<vbox>
  <frame Ejecutando>
    <text>
      <label>Proceso en ejecucion.</label>
    </text>
    <progressbar>
      <label>Ejecutando</label>
      <input>for i in $(seq 0 10 100); do echo $i; sleep 0.3; done</input>
      <action type="exit">Ready</action>
    </progressbar>
  </frame>
  <hbox>
   <button cancel></button>
  </hbox>
 </vbox>
'

gtkdialog --program=MAIN_DIALOG

Tener en consideracion en input podriamos poner una variable que fuera variando externamente y por ejemplo esta podria varias segun va instalandose un programa externo o segun se va ejecutando un proceso.

[mister_electronico]

menubar nos abre una ventana con la tipica barra de menus superior

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
<vbox>
  <menubar>
    <menu>
      <menuitem stock="gtk-open">
        <action>echo Tu seleccionaste menu Open</action>
      </menuitem>
      <menuitem stock="gtk-save">
        <action>echo Tu seleccionaste mun Salvar.</action>
      </menuitem>
      <separator></separator>
      <menuitem stock="gtk-quit">
        <action>echo Tu selecionastes salir item</action>
        <action type="exit">exit by menu</action>
      </menuitem>
      <label>File</label>
    </menu>
    <menu>
      <menuitem stock="gtk-copy">
        <action>echo Tu selecionaste copy.</action>
      </menuitem>
      <menuitem stock="gtk-cut">
        <action>echo Tu seleccionaste cut.</action>
      </menuitem>
      <menuitem stock="gtk-paste">
        <action>echo Tu selecionaste Paste.</action>
      </menuitem>
      <label>Edit</label>
    </menu>
    <menu>
        <menuitem>
          <label>menu_prueba</label>
          <action>echo Tu seleccionaste menu_prueba.</action>
        </menuitem>
        <label>Item</label>
    </menu>
  </menubar>
  <hbox>
    <button cancel></button>
    <button ok></button>
  </hbox>
</vbox>
'

gtkdialog --program=MAIN_DIALOG

[mister_electronico]

En el menubar anterior los nombres de los menus principales vienen por defecto asi como los iconos, en el siguiente podemos elegir los nombres del menu y los iconos por defecto asi como su tamaño de presentracion.

Code: Select all

#!/bin/sh

GTKDIALOG=gtkdialog


export MAIN_DIALOG='
<window title="MenuBar" resizable="false">
   <vbox spacing="0">
    <hbox>
      <menubar>
         <menu label="_Archivo" use-underline="true">
            <menuitem icon-name="dir_o" label="Abrir"></menuitem>
            <menuitem icon-name="mini-diskette" label="Salvar"></menuitem>
            <menuitemseparator></menuitemseparator>
            <menuitem icon-name="mini-cross" label="Salir"><action>exit:Quit</action></menuitem>
         </menu>
         <menu use-underline="true">
            <menuitem icon-name="abiword" label="AbiWord"></menuitem>
            <menuitem icon-name="gnumeric" label="Gnumeric 32px">
               <height>32</height>
            </menuitem>
            <menuitem icon-name="mini-palette" label="_Mtpaint 48px" use-underline="true">
               <height>48</height>
            </menuitem>
            <label>"_Utilidades"</label>
         </menu>
      </menubar>
    </hbox>
    <hbox>
      <button cancel></button>
      <button ok></button>
  </hbox>
   </vbox>   
</window>
'

[mister_electronico]

Bueno como podemos ver en el menu anterior podemos poner nombres en español.

Para realizar las acciones a ejecutar en los menos usamos como siempre la action como en la linea:

<menuitem icon-name="mini-cross" label="Salir"><action>exit:Quit</action></menuitem>

Que nos sirve para salir del programa.

[mister_electronico]

Un ejemplo de funcionamiento de radiobutton:

Code: Select all

#! /bin/bash

function ejecutar()
{
	if [ $radiobutton1 = true ]; then abiword; fi
	if [ $radiobutton2 = true ]; then mtpaint; fi	
}

export radiobutton1  radiobutton2 

export -f ejecutar
export MAIN_DIALOG='
 <vbox>
  <frame Ejemplo de radiobutton>
    <radiobutton>
      <label>Abiword</label>    
      <variable>radiobutton1</variable>
    </radiobutton>
    <radiobutton>
      <label>Mtpaint</label>       
      <variable>radiobutton2</variable>
    </radiobutton>
  </frame>
  <hbox>
	<button>
	  <label>Ejecuta</label>	  
	  <action>ejecutar radiobutton1</action>
	</button>
   <button cancel></button>
  </hbox>
 </vbox>
'

gtkdialog --program=MAIN_DIALOG

[mister_electronico]

Atributos de radiobutton:

Code: Select all

#! /bin/bash

export MAIN_DIALOG='
 <vbox>
  <frame Ejemplos de Radiobutton atributos>
    <radiobutton active="true">
      <label>Radiobutton_1</label>
      <variable>RADIOBUTTON1</variable>
      <action>echo Radiobutton es ahora $RADIOBUTTON1.</action>
    </radiobutton>

    <radiobutton draw_indicator="false">
      <label>Radiobutton con la pestañita de picar desahabilitada</label>
      <variable>RADIOBUTTON2</variable>
      <action>echo Radiobutton es ahora $RADIOBUTTON2.</action>
    </radiobutton>

    <radiobutton inconsistent="true">
      <label>Radiobutton con inconsistente fijado a true</label>
      <variable>RADIOBUTTON3</variable>
      <action>echo Radiobutton es ahora $RADIOBUTTON3.</action>
    </radiobutton>
  </frame>
  <hbox>
   <button ok>
     <variable>OKBUTTON</variable>
   </button>
   <button cancel></button>
  </hbox>
 </vbox>
'

gtkdialog --program=MAIN_DIALOG

[mister_electronico]

Cacharreando con Gtkdialog y SVG monte este programita como letrero movil para dar mejor aspecto a nuestros programas, bueno pues aqui va..

Code: Select all

#!/bin/bash
[ -z $GTKDIALOG ] && GTKDIALOG=gtkdialog

export DAT=/dev/shm/var1
echo "800" > $DAT


# Letro movil
funcion1 () {
VAR=( `cat $DAT` )
echo '<svg width="800" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="'$VAR'" y="46" xml:space="preserve" style="font-family:monospace;font-size:64px;" font-weight="bold" fill="#7F0D0D" opacity="0.8">ESTO ES UNA PRUEBA</text>
</svg>' > /dev/shm/var2.svg

  VAR=`echo "$VAR - 10" | bc -l`
  echo ${VAR} > $DAT
  NUM=${VAR%%} 
  if [ $NUM -lt -720 ]; then  echo "800" > $DAT; else deci=0; fi      
}  
export -f funcion1

export MAIN='
<window title="Mobile sign" resizable="false">
  <vbox>
    <pixmap>
      <variable>IMG</variable>
      <input file>/dev/shm/var2.svg</input>
    </pixmap>
    <button ok></button>
    <timer visible="false" milliseconds="true" interval="100">
      <action>funcion1</action>
      <action type="refresh">IMG</action>
    </timer>
  </vbox>
</window>
'

case $1 in
	-d | --dump) echo "$MAIN" ;;
	*) $GTKDIALOG -cp MAIN ;;
esac
unset letrero_movil
unset funcion1
killall -9 letrero_movil

Saludos