Glade es una herramienta de desarrollo visual de aplicaciones mediante GTK/GNOME de licencia GPL
Glade puede crear la interfaz de usuario de las aplicaciones de dos formas diferentes:
- Generando código fuente.
- Cargando dinámicamente un fichero XML de descripción de la interfaz en tiempo de ejecución.
Esta ultima alternativa es la que vamos usar para el desarrollo en
php-gtk2, primero vamos a la página para descargar
glade, dependiendo la plataforma que estamos utilizando es la pagina que vamos a visitar.
Para los que estén utilizando
Windows:
glade.gnome.org/ En mi caso voy a descargar la versión de Windows, que se encuentra en esta dirección:
gladewin32.sourceforge.net/modules/wfdownloads/visit.php?lid=96Gtk+/Win32 Development Environment (runtime, devel, docs, glade, etc.) Installer 2.8.10-rc1 (.exe, 9.94M)
La descargamos, luego la instalamos y la abrimos para empezar….
Dentro de la carpeta
GTK+ en los menús de programas hacemos clic al
glade para que habrá la siguiente pantalla.
Al abrir
glade se abre un proyecto vació, solo basta con guardar para que genere el archivo en xml del proyecto, hay que guardarlo con un nombre en mi caso será
datos.
Basta con elegir el nombre del proyecto en Proyect Directory para que se completen los demás campos, posteriormente aceptamos los cambios…
Ahora vamos al menú de View activamos las tres primeras opciones que son ventanas necesaria para el desarrollo visual de nuestra aplicación.
Estas son las ventanas:
PaletteEsta ventana es donde se encuentra los widgets en otras palabras los controles que vamos a utilizar para nuestra aplicación.
Properties.Esta es la ventana de propiedades de los widgets, en la cual podemos establecer todas las propiedades de estos controles así como el nombre de estos para utilizarlo desde el código fuente.
Widget TreeEn esta última se van a desplegar los controles por jerarquías según la profundidad de estos.
Pero bueno vamos ha continuar con el proyecto de nombre datos..
Primero vamos a crear la ventana la cual va a contener todos los demás widgets, en la venta Palette hacemos clic en el icono de la figura de ventana y al instante aparecerá una venta lista para trabajar.
Seleccionamos la venta y vamos a las propiedades para cambiar algunas de estas:
Name: win
Title: Leer archivos
Position: Center
Activamos el Default Width: 400
Activamos el Default Height: 300
Auto-Destroy: Yes
Agregamos un widget de caja vertical “Vertical Box” de 3 posiciones verticales y en la primera posición agregamos un widget de tipo Handle box que es una caja flotante también agregamos otro Handle box a la posición 2 y en la posición 3 de la caja agregamos un Text View, y modificamos la propiedades de los widgets como a continuación se señala:
En la primera posición (position:0) seleccionamos el Handle box para mas facilidad desde la venta
Widget Tree podemos seleccionarlo.
Name: handlebox1
Dejamos la pestaña Widget como esta y nos cambiamos a la pestaña la que dice Parking y modificamos la siguiente propiedad:
Expand : No
De igual manera para el siguiente Handle box de nombre handlebox2 que esta en la segunda posición (position: 1)
Expand : No
En el Text View que se encuentra en la tercera posición(position:2) de la caja en la pestaña Widget solo cambiamos el nombre:
Name: texto
Habrás notado que al momento de agregar el Text View se añadió un widget Scrolled Window de nombre scrolledwindow1 para contener el Text View.
La venta tiene que tener la siguiente apariencia:
Sigamos…
Agreguemos dentro del handlebox1 una Barra de Menús de nombre menubar1 dentro de las propiedades podemos editar el menú en la pestaña widget hay un botón de nombre
Edit Menus… el cual abre una venta para editar el menú…
Modificamos las propiedades de la siguiente manera:
Menú Archivo:Stock Item: None
Label: _Archivo
Name: m_file
Item Type: Normal
Opción Abrir:Stock Item: None
Label: Abrir
Name: m_open
Icon: gtk-open
Item Type: Normal
Avelerator: Modifiers:ctrl y Key:A
Dejamos un separador tal y como esta..
Opción Salir:Stock Item: None
Label: _Salir
Name: m_quit
Icon: gtk-quit
Item Type: Normal
Avelerator: Modifiers:ctrl y Key:S
Menú Ayuda:
Stock Item: None
Label: Ay_uda
Name: m_help
Item Type: Normal
Opción Acerca:Stock Item: None
Label: _Acerca...
Name: m_about
Icon: gtk- about
Item Type: Normal
Luego en la siguiente posición de la caja dentro de handlebox2 agregamos una barra de herramientas ToolBar con 3 elementos y en la primera y la última posición o agregamos widgets ToolBar Button y la posición de en medio agregamos un separador ToolBar Separator Item.
Modificamos las propiedades de los ToolBar Button.
El primero:
Name: b_open
Label: Salir
Icon: gtk-open
El segundo:
Name: b_quit
Label: Salir
Icon: gtk-quit
Listo aquí en este punto ya tenemos lista nuestra interfaz grafica solo hay que guardar todos los cambios y estara listo el archivo datos.glade para poderlo utilizar en la programacion de las señales, esta interfaz debe quedar de la siguiente manera:
Y el árbol de los widget queda de la siguiente manera:
Para cargar nuestra aplicación con php solo basta con hacer uso de la clase GladeXML , por ejemplo:
Esto lanzara nuestra aplicación al correr el script dando como salida la siguiente:
Esta es una gran ventaja, por que a si puedes hacer el diseño en glade generar el xml con todas las características de la interfaz grafica y solo nos dedicamos a la programación de la aplicación.
Primero vamos a cargar la interfaz grafica con la siguiente línea:
$glade= new GladeXML('datos.glade');
A hora vamos a recuperar algunos widgets a con los cuales vamos interactuar:
$text = $glade->get_widget('texto');
$mopen = $glade->get_widget('m_open');
$mquit = $glade->get_widget('m_quit');
$mabout = $glade->get_widget('m_about');
$bopen = $glade->get_widget('b_open');
$bquit = $glade->get_widget('b_quit');
Asignamos las señales a los widgets:
$mabout->connect_simple('activate','on_about');
$mopen->connect_simple('activate','on_open',$text);
$mquit->connect_simple('activate',array('gtk','main_quit'));
$bquit->connect_simple('clicked',array('gtk','main_quit'));
$bopen->connect_simple('clicked','on_open',$text);
Creamos la funciones que van hacer lanzadas por las senales:
function on_open($text)
{ $chFile = new GtkFileChooserDialog("Abrir archivo", NULL,
Gtk::FILE_CHOOSER_ACTION_OPEN,
array( Gtk::STOCK_CANCEL,
Gtk::RESPONSE_CANCEL,
Gtk::STOCK_OK,
Gtk::RESPONSE_OK
));
$chFile->set_icon(GdkPixbuf::new_from_file('ico.png'));
$filter=new GtkFileFilter();
$filter->set_name("Archivos");
$filter->add_pattern("*.txt");
$filter->add_pattern("*.html");
$filter->add_pattern("*.xml");
$filter->add_pattern("*.glade");
$chFile->add_filter($filter);
if($chFile->run()=="-5")
{ $file=$chFile->get_filename();
$chFile->destroy();
$textBuffer = new GtkTextBuffer();
$textBuffer->set_text(file_get_contents($file));
$text->set_buffer($textBuffer);
}
}
La function acerca de:
function on_about()
{$dlg = new GtkAboutDialog();
$dlg->set_name('Datos ');
$dlg->set_version('1.0');
$dlg->set_comments('Un saludo a todos los colaboradores de la comunidad de mygnet');
$dlg->set_copyright('Copyright (C) 2006 myGnet');
$dlg->set_license(file_get_contents('creditos.txt'));
$dlg->set_logo(GdkPixbuf::new_from_file('logo.png'));
$dlg->set_icon(GdkPixbuf::new_from_file('ico.png'));
$dlg->set_website('http://www.mygnet.com');
$dlg->set_translator_credits("Martin Roberto Mondragon Sotelonmartin@mygnet.com");
$dlg->run();
$dlg->destroy();
}
Listo ya esta terminada la aplicacion.
Abrimos un archivo en este caso el xml datos.glade el cual tiene todas las caracteristicas de nuestra aplicación:
Aquí se muestra el contenido del xml:
Bueno espero que esta posibilidad de programación y diseño les sea de utilidad…
Si quieres el código fuente completo lo puedes descargar en la siguiente dirección:
www.mygnet.com/articulos/php%2Dgtk/398/Un saludo….
7.- edwinspire