Ejemplo de desarrollo de una aplicación en GTK# - Willy .Net

Ejemplo de desarrollo de una aplicación en GTK#Publicado Originalmente en http://ultimaorbita.com/raciel/x-ezine/x1/1x004-gtksharp.htmlRoberto PérezMono-Hispano www.monohispano.org/hylian@jazzfree.com1. IntroduccionEste tutorial es una pequeña muestra de lo que podemos hacer con gtk# y todo ello con muypoco esfuerzo. No pretende ser un estudio a fondo de la api ya que aun se encuentra en estadoinicial, aunque totalmente operativo. Para mas detalles ver la pagina de gtk# y ver la api de gtk+en www.gtk.org ya que es bastante similar pero con la facilidad que supone la programacionorientada a objetos.Junto al tutorial se distribuye una pequeña aplicacion. Esta aplicacion es un conversor demedidas entre los sistemas Metrico y Estado Unidense, asi pues podemos convertir libras akilogramos o grados celsius a farenheit. La aplicacion no es un modelo de programacionorienteda a objetos su objetivo es simplemente ver de una forma didactica como construir unainterfaz gráfica de forma sencilla. Asi pues la mejor forma de seguir el tutorial es haciendose unejemplo sencillo y viendo el código de la aplicaciónSin mas vamos a por el tutorial :)2. Requerimientos para el desarrolloPara poder compilar y ejecutar necesitamos el compilador de mono y las librerias de gtk-sharp,que implica tener las librerias gtk2.0 y sus derivadas como glib2.0, etc. Para poder instalarlo, endebian, lo mas facil sin tener que acudir al CVS es instalarse los paquetes que residen en el sitiode alp toker para ello debemos añadir a nuestro sources.listdeb http://www.atoker.com/mono unstable mainY despues# apt-get update# apt-get install mono gtk-sharp

Una vez realizado esto ya tendremos mono y gtk-sharp en nuestro sistema asi que ya podemosempezar a desarrolar :)3. Como compilar y ejecutar las pruebasUna vez que hemos escrito nuestro codigo fuente lo que queremos es compilarlo y probarlo asique para compilar nuestro codigo tendremos que hacer# mcs -r gtk-sharp -r glib-sharp prueba.csSiendo prueba.cs el archivo con el codigo fuente, los flags -r son para indicar al compilador queuse las librerias en la compilacion y linkado del programa.Una vez tenemos el ejecutable nos lanzamos a ejecutarlo sin mas y el proceso es simple,podemos usar el programa mono a lo mas puro estilo java o bien podemos darle permisos deejecucion al fichero .exe creado y ejecutarlo como otro ejecutable mas, ya que para eso unmodulo del kernel que se instala a la vez que instalamos mono se encargara de que esto seafactible, por tanto usando mono pondremosmono prueba.exeY ejecutando directamente el ficherochmod u+x prueba.exe./prueba.exeEsto es, primero le damos permisos de ejecucion y ejecutamos sin mas4. Como empezar con nuestra aplicacionPrimero empezaremos incluyendo las librerias que vamos a usar, en c# usamos using, quebuscando su semejante en otros lenguajes podria ser el #include de C o el import de Java.Por tanto nuestras primeras lineas serianusing Gtk;using Gdk;using GtkSharp;using System;Ahora que ya tenemos las librerias "importadas" vamos a definir la clase principal y el punto deentrada al programa esto lo hacemos con:public class prueba{

public static int Main(string[] args){Con esto definimos la clase principal llamada prueba, que a diferencia de Java no tiene por quellamarse como el archivo y tambien definimos la funcion principal que puede ser void o int eso sidebe ser static para que se puede llamar desde el motor de ejecucion. Ojo que la m de Main esmayuscula y el lenguaje es case-sensitive :)5. Creaccion de una ventana simpleLo primero que debemos hacer es crear una ventana donde vamos a poner nuestros objetos.Crear una ventana es muy sencillo, ya lo era usando gtk bajo C y aqui en C# todo es massencillo. Por tanto para crear la ventana hacemosGtk.Window win = new Gtk.Window(Gtk.WindowType.Toplevel);win.Title = "Conversor de medidas";win.SetDefaultSize(300,300);Con la primera linea cremos el objeto ventana, la ventana sera del tipo Toplevel ( estopermanece invariable de gtk+ ), con la segunda linea establecemos el atributo Title a la cadena"Conversor de medidas", este atributo es el que luego se mostrara en la ventana que creemos yfinalmente en la tercera linea establecemos su tamaño por defecto.Realmente solo la primera linea es necesaria, pero es una pequeña muestra de lo que podemoshacer con la ventana y la facilidad con que lo hacemos5.1. Añadiendo un callback a la ventanaUna vez que tenemos la ventana, tenemos que controlar que una vez que pulsemos el botoncerrar la ventana se cierre limpiamente y no tengamos que finalizar el programa matando alproceso para ello añadimos un callback a la ventana. Lo que en gtk+ haciamos con unsignal_connect aqui lo hacemos con EventHandlers, la linea de codigo seriawin.DeleteEvent += new EventHandler (Window_Delete);Con esta linea lo que decimos es que asocie el evento DeleteEvent al controlador de eventoscreado para la ocasion. Creamos el controlador de Eventos mediante el constructor al que lepasamos el nombre de una funcion de nuestro codigo que se va a encargar de gestionar elevento, en este caso Window_Delete.El uso del operador += da a entender que podemos tener mas de un EventHandler asociado aun evento de un objeto y por tanto podemos "sumarlo" a los ya existentesEl codigo de la funcion Window_Delete seria:static void Window_Delete(object obj, EventArgs args)

{}SignalArgs sa = (SignalArgs) args;Application.Quit();sa.RetVal = true;Con esta funcion que maneja el evento Delete de la ventana, es decir cuando la cerramos lo queestamos diciendo es que cierre la aplicacion y que el valor de retorno de esta sea true, indicandoque todo ha sido correcto. Los parametros de entrada de la funcion deben ser esos ya quecuando se la llama internamente desde la aplicacion se le pasa estos datos a la funcion6. Creando nuestros primeros objetosEn este capitulo vamos a aprender a crear objetos simples que luego añadiremos a nuestraaplicacion para crear la interfaz. Se pueden crear muchos widgets pero aqui vamos a mostrarcomo crear alguno de ellos ya que la orientacion a objetos que tiene gtk# lo hace muy sencillo deentender y viendo como creamos una caja de texto seguro que sabemos como crear otroswidgets simplemente mirando la API.6.1. Creando una caja de textoEl objeto que representa una caja de texto recibe el mismo nombre que en gtk+, esto es, entrypor tanto crear una caja de texto sera tan sencillo comoEntry caja_de_texto = new Entry();Con esta instruccion declaramos el objeto y lo construimos gracias a la llamada a new Entry().Una vez que tenemos el objeto podemos acceder y cambiar sus propiedades como el texto quecontiene, su anchura o si se puede editar o no. Para establecer las propiedades nada mas facilque referenciarlas desde el objeto y darles un valor, por tantocaja_de_texto.Text = "Hola mundo";caja_de_texto.Editable = false;caja_de_texto.MaxLenght = 100;Console.WriteLine("{0}", caja_de_texto.Text);Como se ve en estas lineas cambiamos varias propiedades del objeto caja de texto y obtenemossu valor para sacarlo por pantalla6.2. Creando un botonAl igual que hemos creado la caja de texto, ahora vamos a crear un boton, el proceso esexactamente el mismo, solo que cambiando de objeto; por tanto tendremos

Button boton = new Button();Button boton2 = new Button("hola soy un boton");Hemos puesto dos ejemplos ya que hay dos posibilidades de construir el boton, una de ellas espasandole la etiqueta o bien sin pasarsela. Si no le pasamos la etiqueta que tiene el boton, obien si queremos cambiarla existe la propiedad 'Label' que contiene el texto que se muestrasobre el boton. Asi por tanto dando un vistazo a sus propiedades mas importantes tenemosboton.Click();boton.Label = "hola soy un boton";boton.Release();Como he dicho antes Label es la propiedad que contiene el texto que se muestra sobre el boton,y tanto click como release son metodos del objeto que hacen que genere los eventosrespectivos. En lo referente a los eventos lo trataremos en un capitulo aparte asi que demomento solo vamos a crear los objetos6.3. Creando una etiqueta de textoUna vez mas la creacion es muy sencilla y para crear la etiqueta de texto usamosLabel mi_etiqueta = new Label("Hola esto es una etiqueta");La principal propiedad es Text que nos dice el texto que tiene, al igual que podemos cambiarlo7. Colocando los widgets en la aplicacionMuy bien ahora tenemos todos los objetos que queramos, el siguiente paso es colocarlos ennuestra aplicacion. No voy a entrar muy a fondo en todos los layouts que tenemos en gtk#, yaque son los mismos que en gtk+ y por tanto para comprenderlos en su totalidad es mejor mirar ladocumentacion de gtk+, en este capitulo comentaremos los layouts de tipo table y de tipo vbox yhbox7.1. Creando nuestro layout de tipo tableEste widget nos creara una disposicion semejante a una tabla para colocar nuestros objetosdentro de el, por tanto el primer paso es crear el widget en cuestionTable mi_tabla = new Table(6,3,false);Con esto creamos una tabla de 6 filas y 3 columnas, el ultimo parametro indica si las celdas vana ser homogeneas, en este caso lo establecemos a false. Una vez que hemos creado el objeto

vamos a introducir nuestros botones y cajas de texto dentro de el; para ello vamos a usar elmetodo 'Attach' del objeto, su uso es el siguientemi_tabla.Attach(objeto, izq, der, superior, inferior,opciones_en_x , opciones_en_y,padding_en_x, padding_en_y);Pasamos a explicar brevemente que es cada parametro. El objeto es sin duda el objeto quequeremos insertar dentro de la tabla. Los cuatro parametros izq, der, superior e inferior nos van adecir donde encuadramos el objeto, cabe la posibilidad de plantearse por que usar 4 parametrosy no solo dos, la respuesta es sencilla ya que podemos tener objetos q ocupen dos celdasjuntas, tres o siemplemente una sola, asi que por tanto son necesario los 4 parametros. Por tantosi queremos colocar un objeto en la posicion 1,2 de la tabla los 4 parametros serian 1,2,2,3. Sidiera el caso que nuestro objeto tendria que extenderse dentro de la fila 2 por las columnas 3,4 y5 los cuatro numeros serian 3,6,1,2.Los dos siguientes parametros son las opciones que tomaran los objetos que metamos en la olas celdas. Para establecer ambos parametros vamos a tomar el objeto AttachOptions, lasopciones posibles son Expand y Fill ambas son atributos de AttachOptions, se puede poner masde una opcion sumandolas con la operacion "|". Finalmente los dos ultimos parametros son elespaciamiento que van a tener los objetos en la celda que lo insertemos. Un ejemplo de estopodria sertabla.Attach(caja_de_texto, 2,3,2,3,AttachOptions.Expand | AttachOptions.Fill,AttachOptions.Fill, 0 , 0);Las tablas son un objeto muy practico para colocar nuestros objetos ya que dentro de ellas nospermiten meter otros objetos como pueden ser otros widgets de disposicion ( como boxes ) oincluso otras tablas, para mas informacion mirar la documentacion de gtk en www.gtk.org7.2. Creando layouts de tipo boxesEn estos tipos de layouts vamos a colocar los objetos de forma seguida, ya sea en disposicionvertical como en disposicion horizontal, asi que basicamente lo que tenemos que controlar es siqueremos colocarlo por el final o por el principio. Por tanto tenemos dos tipos de boxes,horizontales y verticales7.2.1. Horizontal Boxes ( HBox )En este widget vamos a insertar los objetos siguiendo una disposicion horizontal, para elloprimero tenemos que crear el objeto HBox de la siguiente formaGtk.HBox disp_horiz = new Gtk.HBox(false, 10)

Donde el primer parametro indica si nuetros widgets van a ser colocados de forma homogenea,es decir que todos ocupen lo mismo. El segundo parametro indica el espaciado que vamos adejar entre los objetos que coloquemos.Una vez que tenemos el objeto creado ya nos disponemos a introducir nuestros widgets dentrode el, para ello fundamentalmente vamos a usar dos metodos, PackStart y PackEnd. Veamos unejemplo de ellosdisp_horiz.PackStart( objeto, expand, fill, padding )disp_horiz.PackEnd( objeto, expand, fill, padding )Como vemos los parametros son similares asi que pasamos a explicarlos, el primero es el objetoque queremos insertar. El segundo parametro es si nuestro objeto va o no a ocupar todo elespacio restante dentro de nuestro widget box. El siguiente parametro ( fill ) controla si el espacioextra del box, va a ser rellenado con nuestro objeto o bien se va a utilizar como padding.Finalmente el ultimo parametro establece el espaciado que se va a dejar entre el objeto qestamos "empaquetando" y el siguiente objeto.Una vez visto como introducimos objetos dentro del widget vamos a analizar la diferencia entrePackStart y PackEnd. El primero, PackStart, introduce los objetos de izquierda a derecha dentrodel widget mientras que el segundo, PackEnd, es lo contrario; de derecha a izquierda.Otros metodos importantes del objeto HBox pueden ser:• disp_horiz.PackEndDefaults(objeto). Introduce el objeto empezando por la derecha peroel resto de valores los toma por defecto• disp_horiz.PackStartDefaults(objeto). Igual que el anterior solo que esta vezempaquetamos de izquierda a derecha• disp_horiz.ReorderChild(objeto, posicion). Reordena un objeto dentro del layout7.2.2. Vertical Box ( VBox )Realmente este widget es un clon del anterior pero como se puede suponer diferente a la horade empaquetar objetos. Su creacion es similar, por tantoGtk.VBox disp_vert = new VBox(true, 10);Como antes el primer parametro indica si la disposicion va a ser homogenea y el segundo elespaciado entre objetos insertados. Los principales metodos como antes van a ser PackStart yPackEnd, los cuales tendran los mismos parametros. La diferencia es que con el metodoPackStart los objetos se insertaran de arriba a abajo y usando PackEnd los objetos se insertarancomenzando por el limite inferior hasta el superior. Un ejemplo de codigo de todo esto puede ser:disp_vert.PackStart(boton, true, false, 10);disp_vert.PackEnd(caja_texto, false, false, 0);Los metodos a destacar son identicos al caso anterior ya que ambos boxes derivan de la claseBox que es la que aporta esos metodos.

8. Conectando los eventosMuy bien ahora ya tenemos nuestros botones y etiquetas y todo creado y ¿ahora que? pulso enun boton pero no sale nada. Aqui es donde entra en juego este capitulo. Cada objeto tiene unoseventos predeterminados, como por ejemplo un boton tiene el evento Clicked que se lanzacuando se pulsa. En el capitulo no nos vamos a centrar en profundidad en los eventos ya que esun tema amplio dentro de gtk# pero si seremos capaces de hacer cosas cuando se produce elevento.La conexion de eventos en gtk# es similar a lo que haciamos en gtk+ con las funcionessignal_connect. Veamos un ejemplo de codigo en gtk#boton.Clicked += new EventHandler (boton_pulsado);Con esta linea de código lo que hacemos es ligar el evento Clicked del objeto boton a unmanejador de eventos. Este manejador lo creamos para la ocasion y el constructor recibe comoparametro la funcion que se va a encargar de gestionar el eventoAl igual que en el capitulo que creabamos la ventana aqui usamos el operador "+=" parasignificar que podemos añadir mas de un controlador para un evento predeterminado9. Introduciendo una sencilla barra de menu9.1. Los principales objetos que entran en juegoPara crear nuestra barra de menu vamos a usar principalmente 3 objetos, estos son: Menu,MenuBar y MenuItem. Como se puede deducir MenuBar es el objeto que define la Barra en si; elobjeto Menu es el que representa los diferentes menus que puede haber dentro de la barra (Archivo, Edicion... ) y finalmente MenuItem son las opciones que hay dentro de los menus9.2. Creando la barra de menuUna vez comprendido el uso de los tres objetos parece facil crear una barra de menus; por tantoel primer paso debe ser crear la propia barra de menuMenuBar menu = new MenuBar();Bien, ya tenemos la barra de menu creada, ahora vamos a crear el menu "File"Menu menu_file = new Menu()MenuItem file_item = new MenuItem("_File");

Con estas dos llamadas hemos creado el menu y el item que va a ser el que nosotros veamosyque va a poner, como queda claro, "File". El siguiente paso es decirle al menu que use el Itemmenu para su representacion; para ellofile_item.Submenu = menu_file;Ya tenemos creado el item, ahora el siguiente paso es crear todo lo que vayamos a meter dentrodel menu "File", para el ejemplo vamos a insertar el Item "exit", por tanto necesitamos crear unobjeto de tipo MenuItem e insertarlo dentro del menu "File"MenuItem exit_item = new MenuItem("exit");menu_file.Append(exit_item);Con estas dos sentencias ya tenemos nuestro menu "File" creado, ahora el siguiente paso esañadirlo a la barra de menu, lo que hacemos conmenu.Append(file_item);Ahora debemos añadir el callback para el Item exit, para que cuando pulsemos sobre el, serealize alguna opcion; en ese caso salir de la aplicacion. Para elloexit_item.Activated += new EventHandler(exit_func);Como se ve, para hacer esto lo unico que tenemos que hacer es indicar que el evento Activatedse controle con el EventHandler que creamos en esta sentencia; lo que realmente hace es llamara la funcion exit_func.9.3. FinalizandoAhora ya tenemos creado el menu incluidos los controladores de eventos, el ultimo paso consisteen incluirlo en la ventana, para ello debemos empaquetarlo como si fuera un boton, una caja detexto o cualquier otro widget; por ejemplo si usaramos un vbox para empaquetar los widgets dela ventana pondriamosVBOX.PackStart(menu, false, false, 0 );10. ConclusionesComo se puede ver gtk# mejora gtk+ en la facilidad de uso. Dada la orientacion a objetos quenos ofrece gtk#, todo es bastante mas sencillo y conceptualmente mas comprensible. Se puededecir que es mucho mas facil programar con gtk# que con gtk+, aunque no conviene olvidarse degtk+ ya que gtk# esta construido a partir de este y por lo tanto la api y la forma de uso es similar

La creacion de interfaces graficas con esta nueva variante es sencilla, pero sigue siendo tediosa,para ello esta libglade que se encarga de importar las interfaces creadas con glade dentro denuestro programaComo se ha visto el tutorial no cubre los aspectos mas complejos de gtk, de hecho tampoco eraese el objetivo. Con el tutorial se pretendia dar una vision introductoria al desarrollo deaplicaciones con gtk# y se ha tratado de hacer ver la integracion entre las dos APIs, comocomplemento al tutorial se distribuye una aplicacion que funciona como conversor de medidas.La podeis encontrar aqui http://mono.es.gnome.org/tutoriales/gtksharp/code/conversor.cs