Genesis Vargas J

Como programar en C gráficamente con GTK + Configuración + Ejemplo

Comparte:

Hola amigos esta vez les traigo un tutorial sobre como armar nuestro entorno de desarrollo para programar con el lenguaje C gráficamente. Hago este tutorial/guía porque no he visto una buena manera para programar con GTK es decir, crear nuestros programas en C con interfaces gráficas asi como cuando uno desarrolla en Visual Studio, Netbeans, Monodevelop, etc.

Para este tuto es importante seguir los pasos y contar con las herramientas que nombraré.

Herramientas:

1) MinGW (compilador de GNU para C y C++)... Descarga: http://downloads.sourceforge.net/project/mingw/Installer/mingw-get-setup.exe?r=&ts=1408120697&use_mirror=hivelocity

2) Geany (IDE para muchos lenguajes de programación)... Descarga: http://download.geany.org/geany-1.24_setup.exe

3) Glade (Diseñador de Interfaces GTK)... Descarga: http://ftp.gnome.org/pub/GNOME/binaries/win32/glade/3.14/glade-3-14-2-installer.exe

4) GTK (conjunto de bibliotecas multiplataforma para desarrollar GUI)... Descarga (32bits): http://win32builder.gnome.org/gtk+-bundle_3.6.4-20130921_win32.zip La version de 64 bits no es recomendad porque esta en fase experimental asi que pueden trabajar con la de 32bits.

Instalación - Configuración:

1) MinGW: ejecutamos el instalador que descargamos nos va a mostrar lo siguiente: Damos click en install, luego esperamos a que cargue y damos click en continue, nos aparecera otra ventana y marcamos los paquetes a instalar en este caso marque a GCC (mingw32-base), mingw32-g++ y mysys-base; hacemos click en el menu installation y después en Apply Changes. Nos aparecerá otra ventana y damos click en continue y empezara a descargar los paquetes, esperamos a que termine y hacemos click en close para cerrar.

2) GTK: descomprimimos el archivo .zip que descargamos en la carpeta C:\GTK (si no la tienen, crean la carpeta)

3) Configuración: ahora nos toca agregar las variables de entorno para GCC y GTK, para esto abrimos una carpeta (cualquiera) localizamos "Este Equipo" "My Computer" hacemos click derecho y escogemos propiedades, luego se abrirán las propiedades del computador y hacemos click en "Configuración avanzada del sistema", se abrirá una ventana y hacemos click en el boton de "Variables de entorno", se abrirá otra ventana y seleccionamos la variable PATH y hacemos click en editar; se nos abrirá otra ventana y vamos a agregar gcc y gtk de la siguiente manera: hacemos click en en la caja de texto de valor de la variable y nos fijamos que lo que este escrito termine en ; sino termina en punto y coma lo agregamos y despues agregamos la siguiente línea: C:\GTK\bin;C:\MinGW\bin

4) para comprobar que todo esta correctamente configurado abrimos CMD o símbolo del sistema, escribimos: gcc y nos responderá: gcc: no input files (eso quiere decir que esta correctamente configurado porque funciona y no le dimos una orden para compilar un archivo) después escribimos: pkg-config --cflags --libs gtk+-3.0 y nos responderá: -mms-bitfields -IC:/GTK/include/gtk-3.0 -IC:/GTK/include/cairo -IC:/GTK/include/pango-1.0 -IC:/GTK/include/atk-1.0 -IC:/GTK/include/cairo -IC:/GTK/include/pixman-1 -IC:/GTK/include -IC:/GTK/include/freetype2 -IC:/GTK/include -IC:/GTK/include/libpng15 -IC:/GTK/include/gdk-pixbuf-2.0 -IC:/GTK/include/libpng15 -IC:/GTK/include/glib-2.0 -IC:/GTK/lib/glib-2.0/include -LC:/GTK/lib -lgtk-3 -lgdk-3 -lgdi32 -limm32 -lshell32 -lole32 -Wl,-luuid -lpangocairo-1.0 -lpangoft2-1.0 -lfreetype -lfontconfig -lpangowin32-1.0 -lgdi32 -lpango-1.0 -lm -latk-1.0 -lcairo-gobject -lcairo -lgdk_pixbuf-2.0 -lgio-2.0 -lgobject-2.0 -lgmodule-2.0 -lglib-2.0 -lintl (esto quiere decir que todo esta correctamente configurado).

5) Ahora vamos a diseñar la interfaz de nuestro primer programa, en este ejemplo vamos a hacer un programa donde vamos a escribir nuestro nombre y el programa nos "saludará". Para hacer esto abrimos Glade (lo debes haber instalado con el enlace que te di anteriormente, se instala como cualquier programa: siguiente, siguiente, etc) y comenzamos a diseñar la interfaz. Utilizaremos: 1 GtkWindow, 1 GtkBox (de tres), 2 GtkLabel y 1 GtkEntry. Finalmente guardamos el diseño en el escritorio con el nombre de "Interfaz.xml".

6) Ahora esciribiremos nuestro programa en C, abrimos Geany (deben haber instalado desde el enlace de descarga que les dí anteriormente, se instala como todos: siguiente, siguiente, etc) hacemos click en nuevo, pegamos éste código y guardamos el archivo en el escriorio con el nombre de: "ejemplo.c".

#include <stdlib.h>
#include <string.h>
#include <gtk/gtk.h>

GtkBuilder  *b;
GtkWidget    *FrmPrincipal;
GtkWidget    *LblSaludo;
GtkWidget    *TxtNombre;
GtkWidget    *BtnSaludar;

char* concatenar(char *s1, const gchar *s2)
{
    char *result = malloc(strlen(s1)+strlen(s2)+1);
    strcpy(result, s1);
    strcat(result, s2);
    return result;
}

void Saludar(GtkButton* button, gpointer user_data)
{
    const gchar *nombre = gtk_entry_get_text(GTK_ENTRY(TxtNombre));
    char* saludo = concatenar("Bienvenido a la programación en C: ", nombre);
    gtk_label_set_text(GTK_LABEL(LblSaludo), saludo);
}

int main (int argc, char *argv[])
{
    gtk_init (&argc, &argv);
    b = gtk_builder_new();
    gtk_builder_add_from_file(b, "interfaz.xml", NULL);
    FrmPrincipal = GTK_WIDGET(gtk_builder_get_object(b, "window1"));
    BtnSaludar = GTK_WIDGET(gtk_builder_get_object(b, "button1"));
    LblSaludo = GTK_WIDGET(gtk_builder_get_object(b, "label2"));
    TxtNombre = GTK_WIDGET(gtk_builder_get_object(b, "entry1"));
    g_signal_connect(FrmPrincipal, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    g_signal_connect(BtnSaludar, "clicked", G_CALLBACK(Saludar), NULL);    
    g_object_unref(G_OBJECT (b));
    gtk_widget_show_all(FrmPrincipal);                
    gtk_main();
    return 0;
}

En el código podemos destacar que hemos creado una función concatenar que se encargar de unir el saludo con el nombre que va a recibir en la caja de texto (Entry), un procedimiento llamado Saludar que se encarga de mostrar lo concatenado en el label2 de nuestro diseño (el label de abajo) y en el procedimiento main asignamos las variables que estan al inicio del codigo para su correspondiente uso: la variable b que es un GtkBuilder le asignamos una nuevode gtk_builder y le agregamos desde un archivo xml (que es nuestro diseño que hicimos anteriormente), luego le agregamos las variables de los widgets al window1 (FrmPrincipal), label2 (LblSaludo), entry1 (TxtNombre) y button1 (BtnSaludar); después conectamos al FrmPrincipal en la señal (evento en VB o C#) destroy el metodo: gtk_main_quit y al BtnSaludar en la señal clicked el procedimiento Saludar; Finalmente mostramos la ventana FrmPrincipal.

7) Ya que terminamos de escribir nuestro código lo normal es presionar F5 o el boton de depurar (en Visual studio, Mono, Java, etc) y no tener que hacer operaciones extrañas en la terminal o símbolo del sistema (LOL) para eso configuramos geany de la siguiente manera: hacemos click en la flechita que esta al lado del boton Construir y se abrirá un menú y escogemos la opción Establecer comandos de construcción; se nos abrirá una ventana y donde dice complilar al lado escribermos el siguiente comando (borramos el que trae por default): gcc -o "%e" "%f" -mms-bitfields -IC:/GTK/include/gtk-3.0 -IC:/GTK/include/cairo -IC:/GTK/include/pango-1.0 -IC:/GTK/include/atk-1.0 -IC:/GTK/include/cairo -IC:/GTK/include/pixman-1 -IC:/GTK/include -IC:/GTK/include/freetype2 -IC:/GTK/include -IC:/GTK/include/libpng15 -IC:/GTK/include/gdk-pixbuf-2.0 -IC:/GTK/include/libpng15 -IC:/GTK/include/glib-2.0 -IC:/GTK/lib/glib-2.0/include -LC:/GTK/lib -lgtk-3 -lgdk-3 -lgdi32 -limm32 -lshell32 -lole32 -Wl,-luuid -lpangocairo-1.0 -lpangoft2-1.0 -lfreetype -lfontconfig -lpangowin32-1.0 -lgdi32 -lpango-1.0 -lm -latk-1.0 -lcairo-gobject -lcairo -lgdk_pixbuf-2.0 -lgio-2.0 -lgobject-2.0 -lgmodule-2.0 -lglib-2.0 -lintl mas abajo donde dice ejecutar borraremos el comando que trae y colocamos este: %e.exe Finalmente le damos en aceptar.

Finalmente para ver nuestro programa en funcionamiento hacemos click en el boton de compilar y nos mostrará abajo de geany el mensaje del compilador, deberá decirte que la compilación ha terminado con éxito y para ejecutar hacemos click en el boton de Ejecutar.

Bueno, espero les sirva esta guía porque según yo creo que esta super entendible y no he visto una guía para programar en C de manera gráficamente sin tanta complicación. Si te gustan mis aportes no dudes en compartirlos, escribir tu comentario, dar like, contribuir, etc. Les dejo el programa en una carpeta comprimida para que lo descarguen.

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: