Hola Mundo en Mono – Version Grafica

Bueno habiendo visto ya la version en consola de “hola mundo” junto con una pequeña introduccion a MonoDevelop ahora vamos a continuar un paso mas alla: la version grafica. Para ello usaremos el diseñador de interfaces Stetic que viene con MonoDevelop. Es importante aclarar una cosa: ahi algunos que viendo este tuto diran que esto es cosa de linuxeros y nada mas, pero no es asi, en primer lugar cualquier aplicacion que creen con Mono y Monodevelop podra ser ejecutada usando el framework de .NET, ademas para diseñar las interfaces usaremos GTK# que tambien es multiplataforma, pero esas cosas las profundizare mas en otro post, por el momento vamos a lo practico:

Abrimos MonoDevelop, vamos a Archivo–>Nuevo–>Solucion, elegimos C# nuevamente a la izquierda y a la derecha elegimos proyecto GTK# 2.0, le damos un nombre a proyecto y luego apretamos siguiente, en la siguiente ventana no hacemos nada, solo le damos al boton OK para que MonoDevelop se encargue de crear todos los archivos necesarios para comenzar a trabajar.

Click para agrandar
Click para agrandar

De todos los archivos creados son 2 los mas importantes, Main.cs y MainWindows.cs estos se pueden ver en la ventana solucion

Para empezar a trabajar con el trabajo de diseño, se debe hacer dobre click sobre MainWindows.cs y seleccionar ‘diseñador’ que se encuentra en la parte inferior. De esta manera podremos ver la ventana sobre la cual podremos empezar a trabajar

Click para agrandar
Click para agrandar

A lo que me refiero es que los controles o componentes deben estar dentro de alguno de estos u otros contenedores. Para ser más gráfico, en este ejemplo quiero usar dos controles; un “Label” y un “Button” y quiero que al pulsar sobre el botón aparezca en la etiqueta un “Hola Mundo”. Por lo tanto, necesito pensar en el orden en que estarán los controles, por lo que para esta pequeña prueba solo necesito una tabla de una columna y dos filas usando el “VBox” y después incluyendo los controles en su fila correspondiente.


Todos los componentes se encuentran en la barra de herramientas a la derecha, el Vbox se encuentra dentro de los llamados ‘Containers’ y el label y el button dentro de los ‘Componentes’. Ahora es necesario ponerle nombre a los controles, esto se logra usando las pestaña de “Propiedades” a la derecha, es tan simple como seleccionar el control y modificar su propiedades de forma muy fácil. Para los que usaron Visual Basic alguna vez (calculo que todos) esto es lo mismo.

En este proyecto uso los siguientes valores:

Para el “MainWindow”
Window Title: Proyecto Hola Mundo
Window Position: Centered

Para el “label”
Widget name: texto
Label: Presiona el botón
Justification: Center

Para el “button”
Widget name: boton
Buton Type: Text and Icon
Icon: gtk-yes
Label: Aceptar

El siguiente paso a seguir es declarar la acción del botón, que cuando se de un click este haga algo, para realizar esta declaración es necesario seleccionar el botón y después ir a la pestaña “señales” en las “Propiedades del componente”. Ahí podremos ver un listado de comportamientos de control, buscamos el que se usa al pulsar el botón que se llama “Clicked”. Al lado de este evento veremos un mensaje que dice “Click here to add a new handler”, así que le hago caso y le doy un click para ponerle un nombre… se me ocurre por ejemplo: “boton_Clicked”, osea “boton” ya que es el nombre del control y agregarle el sufijo del nombre del evento, para que nuestro código tenga coherencia.

Listo, ahora es tiempo de ir a trabajar sobre el código pulsando sobre el botón “Código Fuente” del “MainWindow.cs” y veremos lo siguiente:

using System;
using Gtk;

public partial class MainWindow: Gtk.Window
{
public MainWindow (): base (Gtk.WindowType.Toplevel)
{
Build ();
}

protected void OnDeleteEvent (object sender, DeleteEventArgs a)
{
Application.Quit ();
a.RetVal = true;
}

protected virtual void boton_Clicked (object sender, System.EventArgs e)
{

}
}

Vemos ahora que ahi una funcion llamada boton_Clicked que MonoDevelop agrego automaticamente, y ahora vamos a agregar el codigo bendito para que se muestre un “Hola Mundo” en el label, seria asi:

texto.Text=”Hola Mundo!!”;

Ya quedó, eso fue todo, solo un consejo que quiero darles es que se fijen que es ‘texto.Text’ y no ‘texto.text’, estamos hablando de C# y este es case sensitive. Podemos probar como funciona nuestra aplicación de forma rápida, pulsando sobre el icono de ejecutar.

Queda asi:

Espero que les haya gustado y voy a estar esperando sus comentarios.

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

17
Comenta!

avatar
trackback

Información Bitacoras.com…

Si lo deseas, puedes hacer click para valorar este post en Bitacoras.com. Gracias….

Jhonathan
Jhonathan

Hola, no me aparece las opciones de entorno gráfico. Qué me falta?

Jhonathan
Jhonathan

perro, tienes razon, sino que primero intente con un proyecto de VB en lugar de C#, quisiera saber si hay manera de usar un diseñador gráfico también para VB, gracias

Christyan Duarte
Christyan Duarte

Oigan, nadie va a seguir con estos tutos de mono?

matias
matias

ahh… esta interesante, voy a probarlo para probarlo con gambas, mono esta centrado en C#, gambas se centra en Basic, ambos visuales… deben tener las mismas diferencias que tenian los viejos c y basic… o sea, basic es facil, c es mas potente, je

JimH
JimH

Excelente guía, se agradecen todos y cada uno de los detalles que pusiste puesto que está realmente claro, algo no muy usual!
Saludos :)

Hugo Lizama
Hugo Lizama

Hola, quiero consultar por un problema que me sale al intentar ejecutar el programa, he seguido al pie las indicaciones y me sale este error:
The type or namespace name `Quit’ does not exist in the namespace `Application’. Are you missing an assembly reference? (CS0234).

Desconozco totalmente a que se refiere, es la primera vez que utilizo monodevelop, incluso al crear una nueva solución e intentar ejecutarla directamente sin agregar/quitar/modificar nada me da ese error.

Tengo un Debian Squeeze, y el monodevelop(versión 2.4) lo instale desde Synaptic.

Anonymous
Anonymous

El post es muy viejo y yo no programo en mono hace mucho tiempo asi que no puedo ayudarte

Wintersun
Wintersun

Hola, estoy intentando aprender Mono, pero me está costando ya que no hay mucha documentación al respecto y tu web me ha parecido de lo más clarito que he encontrado.

Te pregunto a ver cómo agrego un segundo formulario a mi proyecto. Ando haciendo un pequeño proyecto con base de datos para poder aprender y tener una base para futuro proyectos, pero es que ando un poco confundido y no consigo que las cosas me salgan como quiero fácilmente.

Un saludo.

sefsinalas

Hola. Hace años que no veo nada de Mono y la verdad no creo que sea bueno ponerse a aprenderlo. Mejor son Python, Ruby, etc etc

Alex
Alex

Hola, cuando entro en la pestaña de diseñador solo me aparece un cuadro sin los botones de cerrar y maximizar, ¿eso aparece por defecto o se los tengo que agregar?

sefsinalas

La verdad hace muchos años que no trabajo con esto. Asi que no estoy seguro de nada

roger
roger

Alguien, borré por error el contenedor vBox de la barra de herramienta. Cómo puedo restaurarlo??

Gracias