C++ para Linux / Agregando botones con wxWidgets

Bienvenidos sean a este post, en el post anterior creamos una aplicacion base para generar una pequeña ventana que tenia como titulo Hola, Mundo!, hoy procederemos a agregarle dos botones.

Si no tienen el codigo base de Hola, Mundo les recomiendo ir a este post y copiarlo y pegarlo o tipearlo, seria lo mas recomendable, para generar nuestro codigo base, con esto realizado vamos a mencionar y mostrar cuales son las funciones que van a variar y las lineas que agregaremos.

La primera modificacion que vamos a realizar sera para nuestra clase MiCuadro, donde cambiaremos su bloque por el siguiente:

class MiCuadro : public wxFrame
{
public:
        MiCuadro (const wxString & titulo,
                const wxPoint & pos,
                const wxSize & tamano);
        void EnSalir(wxCommandEvent & evento);
        void EnSaludar(wxCommandEvent & evento);
        DECLARE_EVENT_TABLE()
private:
        wxPanel * m_Panel;
        wxButton * m_btnSaludar;
        wxButton * m_btnSalir;
};

En este caso agregamos tres lineas en la parte publica, las dos primeras seran dos prototipos para los eventos sobre nuestros botones, uno para salir y otro para saludar, observen que recibe dos valores de tipo evento, por ultimo usamos a :

DECLARE_EVENT_TABLE()

Esta macro sera la encargada de agregar miembros y metodos (funciones) usados por el sistema de evento de wxWidgets para nuestra clase MiCuadro, por ultimo en la parte privada, agregada para la ocasion, crearemos tres objetos, un panel y dos botones, pero despues hablaremos sobre ellos, nuestro siguiente paso sera agregar el siguiente bloque despues de la clase anterior y antes de la linea IMPLEMENT_APP:

enum { ID_Salir = 1, ID_Saludar };

BEGIN_EVENT_TABLE(MiCuadro, wxFrame)
        EVT_BUTTON(ID_Saludar, MiCuadro::EnSaludar)
        EVT_BUTTON(ID_Salir, MiCuadro::EnSalir)
END_EVENT_TABLE()

Primero crearemos un enum para establecer dos ID, uno para el boton de salir y otro para el de saludar, lo siguiente es una macro encargada de indicarle a wxWidgets como debe mapear los eventos de los botones, en el primer evento pasamos el ID del que sera el boton para saludar, luego le pasamos el metodo que debera ejecutar, lo mismo hacemos para el segundo evento donde esta vez pasaremos el ID de salir y su respectiva funcion, con esto solo nos resta un par de modificaciones mas, la antepenultima de ellas sera sobre el constructor de MiCuadro que lo modificaremos de la siguiente manera:

Nota: En esta tabla de eventos podemos agregar todos los que sean necesarios, siempre que tengamos principalmente un ID y una funcion para vincularlas.

MiCuadro ::MiCuadro(const wxString & titulo,
		const wxPoint & pos,
		const wxSize & tamano):
		wxFrame((wxFrame *) NULL, -1, titulo, pos, tamano)
{
	wxSize tamanoPanel = GetClientSize();
	m_panel = new wxPanel(this, -1, wxPoint(0,0), tamanoPanel);
	int al = tamanoPanel.GetHeight();
	int an = tamanoPanel.GetWidth();

	m_btnSaludar = new wxButton(m_panel,
				   ID_Saludar, _T("Saludos"),
				   wxPoint(an/2 - 80, al/2 - 35),
				   wxSize(70, 30));
	m_btnSalir = new wxButton(m_panel,
				  ID_Salir, _T("Salir"),
				  wxPoint(an/2 + 10, al/2 - 35),
				  wxSize(70, 30));
}

El inicio del constructor es tal cual como vimos en el post anterior, lo unico que hicimos para esta cuestion fue agregar instrucciones dentro del bloque, lo primero que haremos es crear un objeto de tipo wxSize para almacenar el tamaño del panel o ventana por medio de GetClientSize, luego definiremos a m_panel, donde usaremos el constructor por medio de new y le pasaremos los siguientes datos respectivamente:

• ventana padre
• identificador del panel
• La ubicacion del panel
• Tamaño del panel

Despues crearemos dos variables de tipo int para almacenar el alto (al) y el ancho (an) por medio del objeto tamanoPanel y las funciones GetHeight y GetWidth respectivamente, por ultimo definiremos a los objetos relacionados a los botones, veamos que datos les pasamos respectivamente:

• La ventana padre, no debe ser NULL
• El id para el boton
• El texto del boton
• La posicion del boton
• El tamaño del boton

Como podran ver lo unico que variamos es el ID de los botones, el texto a mostrar, y lo posicion de los mismos, la penultima modificacion sera la definicion de las acciones para los eventos y para ello agregaremos el siguiente bloque:

void MiCuadro::EnSalir(wxCommandEvent & WXUNUSED(evento))
{
	Close(TRUE);
}

void MiCuadro::EnSaludar(wxCommandEvent & WXUNUSED(evento))
{
	wxMessageBox("Hola, Mundo con wxWidgets!!!",
			"Hola, Mundo",
			wxOK | wxICON_INFORMATION,
			this);
}

En este caso utilizaremos a WXUNUSED, una macro para evitar que algunas funciones devuelvan errores por no recibir un evento, la primera funcion (OnSalir) simplemente llama a Close para cerrar la ventana, la siguiente funcion solo llama a wxMessageBox para mostrar un mensaje en pantalla, los parametros son los siguientes:

• Mensaje en el cuadro
• Titulo del cuadro
• El boton a mostrar y un icono
• La ventana que la llama

Como ven es un metodo muy simple, y el ultimo se puede omitir, solo nos resta una modificacion para terminar nuestro codigo, para ello deben ir a la funcion OnInit y modificar el siguiente bloque:

	MiCuadro * cuadro = new MiCuadro("Hola, Mundo!",
					wxPoint(50,50),
					wxSize(200,100));

De la siguiente manera:

	MiCuadro * cuadro = new MiCuadro("Hola, Mundo!",
					wxPoint(50,50),
					wxSize(300,200));

Basicamente lo unico que hicimos fue cambiar el tamaño de la ventana que generamos anteriormente, con esto terminamos las modificaciones de nuestro codigo pasemos a ver el codigo final hasta ahora:

holaWx.cpp

#ifdef __GNUG__
// #pragma implementation
#endif

#include 

#ifdef __BORLANDC__
#pragma hdrstop
#endif

#ifndef WX_PRECOMP
#include "wx/wx.h"
#endif

class MiApp : public wxApp
{
	virtual bool OnInit();
};

class MiCuadro : public wxFrame
{
public:
	MiCuadro (const wxString & titulo,
		const wxPoint & pos,
		const wxSize & tamano);
	void EnSalir(wxCommandEvent & evento);
	void EnSaludar(wxCommandEvent & evento);
	DECLARE_EVENT_TABLE()
private:
	wxPanel * m_panel;
	wxButton * m_btnSaludar;
	wxButton * m_btnSalir;
};

enum { ID_Salir = 1, ID_Saludar };

BEGIN_EVENT_TABLE(MiCuadro, wxFrame)
	EVT_BUTTON(ID_Saludar, MiCuadro::EnSaludar)
	EVT_BUTTON(ID_Salir, MiCuadro::EnSalir)
END_EVENT_TABLE()

IMPLEMENT_APP(MiApp)

bool MiApp::OnInit()
{
	MiCuadro * cuadro = new MiCuadro("Hola, Mundo!",
					wxPoint(50,50),
					wxSize(300,200));
	cuadro->Show(TRUE);
	SetTopWindow(cuadro);
	return TRUE;
}

MiCuadro ::MiCuadro(const wxString & titulo,
		const wxPoint & pos,
		const wxSize & tamano):
		wxFrame((wxFrame *) NULL, -1, titulo, pos, tamano)
{
	wxSize tamanoPanel = GetClientSize();
	m_panel = new wxPanel(this, -1, wxPoint(0,0), tamanoPanel);
	int al = tamanoPanel.GetHeight();
	int an = tamanoPanel.GetWidth();

	m_btnSaludar = new wxButton(m_panel,
				   ID_Saludar, _T("Saludos"),
				   wxPoint(an/2 - 80, al/2 - 35),
				   wxSize(70, 30));
	m_btnSalir = new wxButton(m_panel,
				  ID_Salir, _T("Salir"),
				  wxPoint(an/2 + 10, al/2 - 35),
				  wxSize(70, 30));
}

void MiCuadro::EnSalir(wxCommandEvent & WXUNUSED(evento))
{
	Close(TRUE);
}

void MiCuadro::EnSaludar(wxCommandEvent & WXUNUSED(evento))
{
	wxMessageBox("Hola, Mundo con wxWidgets!!!",
			"Hola, Mundo",
			wxOK | wxICON_INFORMATION,
			this);
}

Con todo esto lo volvemos a compilar como hicimos en el post anterior con el siguiente comando:

$ g++ holaWx.cpp `wx-config --libs` `wx-config --cflags` -o holaWx

Una vez compilado podemos probarlo y deberan obtener un resultado semejante al siguiente video

Como pueden ver de una manera «simple» agregamos un par de botones que se encargaran de ejecutar dos funciones, una para mostrar un mensaje en pantalla y otro para cerrar la ventana y salir de la aplicacion.

En resumen, hoy hemos visto las modificaciones necesarias para poder crear no solamente una ventana sino contenido dentro de la misma, como asignarles funciones y como trabajan ante estos eventos, espero les haya gustado sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.