Ejemplo de desarrollo de una aplicacin en GTK#

Publicado Originalmente en http://ultimaorbita.com/raciel/x-ezine/x1/1x004-gtksharp.html

Roberto Prez Mono-Hispano www.monohispano.org/ hylian@jazzfree.com 1. Introduccion Este tutorial es una pequea muestra de lo que podemos hacer con gtk# y todo ello con muy poco esfuerzo. No pretende ser un estudio a fondo de la api ya que aun se encuentra en estado inicial, 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 programacion orientada a objetos. Junto al tutorial se distribuye una pequea aplicacion. Esta aplicacion es un conversor de medidas entre los sistemas Metrico y Estado Unidense, asi pues podemos convertir libras a kilogramos o grados celsius a farenheit. La aplicacion no es un modelo de programacion orienteda a objetos su objetivo es simplemente ver de una forma didactica como construir una interfaz grfica de forma sencilla. Asi pues la mejor forma de seguir el tutorial es haciendose un ejemplo sencillo y viendo el cdigo de la aplicacin Sin mas vamos a por el tutorial :)

2. Requerimientos para el desarrollo Para 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, en debian, lo mas facil sin tener que acudir al CVS es instalarse los paquetes que residen en el sitio de alp toker para ello debemos aadir a nuestro sources.list deb http://www.atoker.com/mono unstable main Y 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 podemos empezar a desarrolar :)

3. Como compilar y ejecutar las pruebas Una vez que hemos escrito nuestro codigo fuente lo que queremos es compilarlo y probarlo asi que para compilar nuestro codigo tendremos que hacer # mcs -r gtk-sharp -r glib-sharp prueba.cs Siendo prueba.cs el archivo con el codigo fuente, los flags -r son para indicar al compilador que use 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 de ejecucion al fichero .exe creado y ejecutarlo como otro ejecutable mas, ya que para eso un modulo del kernel que se instala a la vez que instalamos mono se encargara de que esto sea factible, por tanto usando mono pondremos mono prueba.exe Y ejecutando directamente el fichero chmod u+x prueba.exe ./prueba.exe Esto es, primero le damos permisos de ejecucion y ejecutamos sin mas

4. Como empezar con nuestra aplicacion Primero empezaremos incluyendo las librerias que vamos a usar, en c# usamos using, que buscando su semejante en otros lenguajes podria ser el #include de C o el import de Java. Por tanto nuestras primeras lineas serian using Gtk; using Gdk; using GtkSharp; using System; Ahora que ya tenemos las librerias "importadas" vamos a definir la clase principal y el punto de entrada 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 que llamarse como el archivo y tambien definimos la funcion principal que puede ser void o int eso si debe ser static para que se puede llamar desde el motor de ejecucion. Ojo que la m de Main es mayuscula y el lenguaje es case-sensitive :)

5. Creaccion de una ventana simple Lo 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 mas sencillo. Por tanto para crear la ventana hacemos Gtk.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 ( esto permanece 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 y finalmente en la tercera linea establecemos su tamao por defecto. Realmente solo la primera linea es necesaria, pero es una pequea muestra de lo que podemos hacer con la ventana y la facilidad con que lo hacemos

5.1. Aadiendo un callback a la ventana Una vez que tenemos la ventana, tenemos que controlar que una vez que pulsemos el boton cerrar la ventana se cierre limpiamente y no tengamos que finalizar el programa matando al proceso para ello aadimos un callback a la ventana. Lo que en gtk+ haciamos con un signal_connect aqui lo hacemos con EventHandlers, la linea de codigo seria win.DeleteEvent += new EventHandler (Window_Delete); Con esta linea lo que decimos es que asocie el evento DeleteEvent al controlador de eventos creado para la ocasion. Creamos el controlador de Eventos mediante el constructor al que le pasamos el nombre de una funcion de nuestro codigo que se va a encargar de gestionar el evento, en este caso Window_Delete. El uso del operador += da a entender que podemos tener mas de un EventHandler asociado a un evento de un objeto y por tanto podemos "sumarlo" a los ya existentes El 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 que estamos diciendo es que cierre la aplicacion y que el valor de retorno de esta sea true, indicando que todo ha sido correcto. Los parametros de entrada de la funcion deben ser esos ya que cuando se la llama internamente desde la aplicacion se le pasa estos datos a la funcion

6. Creando nuestros primeros objetos En este capitulo vamos a aprender a crear objetos simples que luego aadiremos a nuestra aplicacion para crear la interfaz. Se pueden crear muchos widgets pero aqui vamos a mostrar como crear alguno de ellos ya que la orientacion a objetos que tiene gtk# lo hace muy sencillo de entender y viendo como creamos una caja de texto seguro que sabemos como crear otros widgets simplemente mirando la API.

6.1. Creando una caja de texto El objeto que representa una caja de texto recibe el mismo nombre que en gtk+, esto es, entry por tanto crear una caja de texto sera tan sencillo como Entry 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 que contiene, su anchura o si se puede editar o no. Para establecer las propiedades nada mas facil que referenciarlas desde el objeto y darles un valor, por tanto caja_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 obtenemos su valor para sacarlo por pantalla

6.2. Creando un boton Al igual que hemos creado la caja de texto, ahora vamos a crear un boton, el proceso es exactamente 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 es pasandole la etiqueta o bien sin pasarsela. Si no le pasamos la etiqueta que tiene el boton, o bien si queremos cambiarla existe la propiedad 'Label' que contiene el texto que se muestra sobre el boton. Asi por tanto dando un vistazo a sus propiedades mas importantes tenemos boton.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 eventos respectivos. En lo referente a los eventos lo trataremos en un capitulo aparte asi que de momento solo vamos a crear los objetos

6.3. Creando una etiqueta de texto Una vez mas la creacion es muy sencilla y para crear la etiqueta de texto usamos Label 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 cambiarlo

7. Colocando los widgets en la aplicacion Muy bien ahora tenemos todos los objetos que queramos, el siguiente paso es colocarlos en nuestra aplicacion. No voy a entrar muy a fondo en todos los layouts que tenemos en gtk#, ya que son los mismos que en gtk+ y por tanto para comprenderlos en su totalidad es mejor mirar la documentacion de gtk+, en este capitulo comentaremos los layouts de tipo table y de tipo vbox y hbox

7.1. Creando nuestro layout de tipo table Este widget nos creara una disposicion semejante a una tabla para colocar nuestros objetos dentro de el, por tanto el primer paso es crear el widget en cuestion Table 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 van a 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 el metodo 'Attach' del objeto, su uso es el siguiente mi_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 que queremos insertar dentro de la tabla. Los cuatro parametros izq, der, superior e inferior nos van a decir donde encuadramos el objeto, cabe la posibilidad de plantearse por que usar 4 parametros y no solo dos, la respuesta es sencilla ya que podemos tener objetos q ocupen dos celdas juntas, tres o siemplemente una sola, asi que por tanto son necesario los 4 parametros. Por tanto si queremos colocar un objeto en la posicion 1,2 de la tabla los 4 parametros serian 1,2,2,3. Si diera el caso que nuestro objeto tendria que extenderse dentro de la fila 2 por las columnas 3,4 y 5 los cuatro numeros serian 3,6,1,2. Los dos siguientes parametros son las opciones que tomaran los objetos que metamos en la o las celdas. Para establecer ambos parametros vamos a tomar el objeto AttachOptions, las opciones posibles son Expand y Fill ambas son atributos de AttachOptions, se puede poner mas de una opcion sumandolas con la operacion "|". Finalmente los dos ultimos parametros son el espaciamiento que van a tener los objetos en la celda que lo insertemos. Un ejemplo de esto podria ser tabla.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 nos permiten meter otros objetos como pueden ser otros widgets de disposicion ( como boxes ) o incluso otras tablas, para mas informacion mirar la documentacion de gtk en www.gtk.org

7.2. Creando layouts de tipo boxes En estos tipos de layouts vamos a colocar los objetos de forma seguida, ya sea en disposicion vertical como en disposicion horizontal, asi que basicamente lo que tenemos que controlar es si queremos colocarlo por el final o por el principio. Por tanto tenemos dos tipos de boxes, horizontales y verticales

7.2.1. Horizontal Boxes ( HBox ) En este widget vamos a insertar los objetos siguiendo una disposicion horizontal, para ello primero tenemos que crear el objeto HBox de la siguiente forma Gtk.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 a dejar entre los objetos que coloquemos. Una vez que tenemos el objeto creado ya nos disponemos a introducir nuestros widgets dentro de el, para ello fundamentalmente vamos a usar dos metodos, PackStart y PackEnd. Veamos un ejemplo de ellos disp_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 objeto que queremos insertar. El segundo parametro es si nuestro objeto va o no a ocupar todo el espacio restante dentro de nuestro widget box. El siguiente parametro ( fill ) controla si el espacio extra 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 q estamos "empaquetando" y el siguiente objeto. Una vez visto como introducimos objetos dentro del widget vamos a analizar la diferencia entre PackStart y PackEnd. El primero, PackStart, introduce los objetos de izquierda a derecha dentro del 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 pero el resto de valores los toma por defecto disp_horiz.PackStartDefaults(objeto). Igual que el anterior solo que esta vez empaquetamos de izquierda a derecha disp_horiz.ReorderChild(objeto, posicion). Reordena un objeto dentro del layout

7.2.2. Vertical Box ( VBox ) Realmente este widget es un clon del anterior pero como se puede suponer diferente a la hora de empaquetar objetos. Su creacion es similar, por tanto Gtk.VBox disp_vert = new VBox(true, 10); Como antes el primer parametro indica si la disposicion va a ser homogenea y el segundo el espaciado entre objetos insertados. Los principales metodos como antes van a ser PackStart y PackEnd, los cuales tendran los mismos parametros. La diferencia es que con el metodo PackStart los objetos se insertaran de arriba a abajo y usando PackEnd los objetos se insertaran comenzando 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 clase Box que es la que aporta esos metodos.

8. Conectando los eventos Muy bien ahora ya tenemos nuestros botones y etiquetas y todo creado y ahora que? pulso en un boton pero no sale nada. Aqui es donde entra en juego este capitulo. Cada objeto tiene unos eventos predeterminados, como por ejemplo un boton tiene el evento Clicked que se lanza cuando se pulsa. En el capitulo no nos vamos a centrar en profundidad en los eventos ya que es un tema amplio dentro de gtk# pero si seremos capaces de hacer cosas cuando se produce el evento. La conexion de eventos en gtk# es similar a lo que haciamos en gtk+ con las funciones signal_connect. Veamos un ejemplo de codigo en gtk# boton.Clicked += new EventHandler (boton_pulsado); Con esta linea de cdigo lo que hacemos es ligar el evento Clicked del objeto boton a un manejador de eventos. Este manejador lo creamos para la ocasion y el constructor recibe como parametro la funcion que se va a encargar de gestionar el evento Al igual que en el capitulo que creabamos la ventana aqui usamos el operador "+=" para significar que podemos aadir mas de un controlador para un evento predeterminado

9. Introduciendo una sencilla barra de menu 9.1. Los principales objetos que entran en juego Para 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; el objeto 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 menus

9.2. Creando la barra de menu Una vez comprendido el uso de los tres objetos parece facil crear una barra de menus; por tanto el primer paso debe ser crear la propia barra de menu MenuBar 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 veamos yque va a poner, como queda claro, "File". El siguiente paso es decirle al menu que use el Item menu para su representacion; para ello file_item.Submenu = menu_file; Ya tenemos creado el item, ahora el siguiente paso es crear todo lo que vayamos a meter dentro del menu "File", para el ejemplo vamos a insertar el Item "exit", por tanto necesitamos crear un objeto 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 es aadirlo a la barra de menu, lo que hacemos con menu.Append(file_item); Ahora debemos aadir el callback para el Item exit, para que cuando pulsemos sobre el, se realize alguna opcion; en ese caso salir de la aplicacion. Para ello exit_item.Activated += new EventHandler(exit_func); Como se ve, para hacer esto lo unico que tenemos que hacer es indicar que el evento Activated se controle con el EventHandler que creamos en esta sentencia; lo que realmente hace es llamar a la funcion exit_func.

9.3. Finalizando Ahora ya tenemos creado el menu incluidos los controladores de eventos, el ultimo paso consiste en incluirlo en la ventana, para ello debemos empaquetarlo como si fuera un boton, una caja de texto o cualquier otro widget; por ejemplo si usaramos un vbox para empaquetar los widgets de la ventana pondriamos VBOX.PackStart(menu, false, false, 0 );

10. Conclusiones Como se puede ver gtk# mejora gtk+ en la facilidad de uso. Dada la orientacion a objetos que nos ofrece gtk#, todo es bastante mas sencillo y conceptualmente mas comprensible. Se puede decir que es mucho mas facil programar con gtk# que con gtk+, aunque no conviene olvidarse de gtk+ 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 de nuestro programa Como se ha visto el tutorial no cubre los aspectos mas complejos de gtk, de hecho tampoco era ese el objetivo. Con el tutorial se pretendia dar una vision introductoria al desarrollo de aplicaciones con gtk# y se ha tratado de hacer ver la integracion entre las dos APIs, como complemento 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