Dicen que cuando se aprende a hablar un idioma diferente al nativo, los idiomas siguientes resultan

mucho ms sencillos de aprender, puede que sea cierto tambin en programacin, pues una vez se
conoce un lenguaje los dems no resultan tan complejos de asimilar.
El siguiente ejercicio pretende acercar al lector al desarrollo de aplicaciones en GTK# empleando
MonoDevelop y la herramienta Stetic para la construccin de interfaces grficas.
Requisito: contar con MonoDevelop y las dems herramientas relacionadas
1
instaladas en el PC
sobre el que se va a trabajar. Tener conocimiento de como programar en C#.
Lanzar MonoDevelop y seleccionar la opcin para iniciar un nuevo proyecto (Start a New
Project):
1 http://www.mono-project.com/Downloads
Seleccionar C# del listado que aparece al lado izquierdo y luego seleccionar GTK# 2.0
Project de las opciones que aparecen al lado derecho. Asignar un nombre para el proyecto y definir la
carpeta donde se va a almacenar, para comenzar a trabajar presionar el botn New:
Habilitar las diferentes barras de herramientas que sern utilizadas en el proyecto:
Seleccionar el elemento User Interface que aparece al lado izquierdo y hacer clic sobre la
fecha de despliegue que tiene a su izquierda con el fin de ver el elemento grfico principal de la
aplicacin: MainWindow
hacer doble clic sobre el elemento MainWindow con el fin de acceder a la vista de diseo.
Una vez en la vista de diseo seleccionar mediante un clic la ventana como tal para poder acceder a
las propiedades dentro de la pestaa Widget Properties que se encuentra al lado derecho. En dicha
pestaa abrir el grupo Window Properties y modificar el ttulo de la ventana en el campo Window Title:
en este momento ya se tiene una aplicacin lista para usar que nicamente lanza una
ventana con el ttulo que se le haya definido en el paso anterior, para probarlo presione la tecla F5 y
tras algunos segundos ver una ventana similar a la siguiente:
a continuacin se incluirn en la ventana principal los elementos grficos requeridos para
recibir una cadena de texto y mostrarla en pantalla luego de haber presionado un botn. Active para
tal fin la pestaa Widgets Palette que se encuentra al lado derecho, donde antes se activo Widgets
Properties:
el primer widget que se debe agregar a la ventana es uno que los contenga a todos, para tal
fin se debe seleccionar el widget Table, que se encuentra dentro de la seccin Containers de la
pestaa activa y arrastrarlo sobre la ventana, luego de la cual la misma se ver as:
a continuacin se integrarn los dems componentes de la interfaz para lo cual se irn
seleccionando los widgets hacia las casillas de la recin creada tabla. Debe arrastrarse un widget tipo
Label y uno tipo Entry como lo ilustra la siguiente imagen con el fin de solicitarle al usuario la candena
de texto:
hacer clic sobre el widget label que se aadi y seleccionar la pestaa Widget Properties
con el fin de modificar la etiqueta que se presenta al usuario:
de la misma manera en que se aadieron los widgets anteriores aadir ahora un Label ms
en la parte superior y un Button en la parte inferior:
es posible modificar el espacio entre las celdas de la tabla seleccionando el widget del
desplegable que aparece en la interfaz de edicin y accediendo luego a la pestaa Widget Properties
como se indica a continuacin:
de igual manera a como se indic anteriormente se modificarn las etiquetas del widget
Button y del ltimo Label aadidos, de forma tal que la ventana final se vea as:
Cada widget cuenta con una serie de seales dependiendo de su propia naturaleza. A continuacin
se asociar la seal Clicked del botn con una funcin (Handler) que imprima un mensaje de texto en
pantalla.
seleccionar el Widget Button y activar la pestaa Widget Properties, pero esta vez activar la
pestaa superior Signals en lugar de Properties e ingresar el nombre de la nueva funcin (sin
espacios ni caracteres especiales) frente a la seal Clicked:
en la interfaz de edicin de la ventana principal hacer clic sobre el botn Source Code que
se observa en la parte inferior, al lado izquierdo del botn Designer, de forma que se haga visible el
cdigo fuente de la ventana:
adicionar la siguiente lnea de cdigo en la funcin imprimirSaludo para que aparezca una
cadena de texto en la consola: Console.WriteLine(Hola GTK# en 15 minutos);
ejecutar de nuevo la aplicacin presionando F5, presionar ahora sobre la ventana el botn
Saludar y se podr ver en la salida la lnea de saludo que se defini en el paso anterior:
ahora se modificar el widget Entry para que se accesible desde el cdigo principal de la
ventana, para esto se debe seleccionar el widget y luego hacer clic sobre el botn etiquetado como
Bind To Field:
presionar el botn Source Code de nuevo para acceder al cdigo de la ventana. Podr
apreciarse como el widget se encuentra ahora definido dentro del cdigo y por lo tanto puede
comenzar a utilizarse:
modificar el cdigo de la funcin imprimir saludo para que ahora en lugar de Hola GTK# en
15 minutos!, el mensaje que aparezca en consola sea el que se ingrese en el campo de texto, el
widget entry3 que se acabo de incluir en el cdigo en el paso anterior:
ejecutar de nuevo el programa y escribir el saludo que se desea en el campo de texto,
presionar luego el botn saludar y se podr ver en la salida del programa el mensaje ingresado:
se realizar a continuacin la ltima modificacin para que en lugar de salir en consola, el
mensaje aparezca en el campo del label superior central, para esto debe realizarse con este widget lo
mismo que se hizo con el widget de entrada de texto algunos pasos atrs:
ahora se modifica una vez ms el cdigo de la funcin imprimir saludo:
ejecute de nuevo el programa, ingrese su nombre en el cuadro de texto y presione el
botn saludar, ver como ahora la etiqueta superior que antes deca Hola GTK#, cambia por Hola Su
Nombre:
1. La clave central de este artculo la encontr en (Gracias a Idan por la clave para comprender
de que forma conectar un widget con otro ;-) ): http://pixane.net/blog/?p=47
2. La pgina principal del proyecto Mono y todo lo relacionado con el mismo: http://www.mono-
project.com