Programacion Grafica con C++ en linux Primera parte

Introduccion :

vamos a ver como escribir programas en c++ con contenido grafico (ventanas, botones etc..) en cualquier plataforma, primero nos centraremos en linux (ubuntu) y al final voy a mostrar un ejemplo en windows. Esta es la primera parte, que usaremos las herramientas codeblocks (IDE para c++) y wxWidgets.

al final va a haber un video mostrando todos los pasos.

es nesesario tener conocimientos basicos de c++ y de poo

video de lo que vamos a hacer, conviene leer el post primero y luego ver el video

IDE Codeblocks

Es uno de los entornos de programación mas conocidos, facil de usar y open source, esta disponible para linux, windows y mac os x

instalacion :

http://www.codeblocks.org/downloads/26

o por los paquetes synaptic

o por las apt, abrimos una terminal y ponemos;

sudo aptitude install codeblocks libcodeblocks0 libwxsmithlib0 codeblocks-contrib

wxWidgets

Las wxWidgets son unas bibliotecas multiplataforma y libres, para el desarrollo de interfaces gráficas programadas en lenguaje C++. Están publicadas bajo una licencia LGPL, similar a la GPL con la excepción de que el código binario producido por el usuario a partir de ellas, puede ser propietario, permitiendo desarrollar aplicaciones empresariales sin coste de licencias.

Las wxWidgets proporcionan una interfaz gráfica basada en las bibliotecas ya existentes en el sistema (nativas), con lo que se integran de forma óptima y resultan muy portables entre distintos sistemas operativos. Están disponibles para Windows, MacOS, GTK+, Motif,OpenVMS y OS/2. (http://es.wikipedia.org/wiki/WxWidgets)

Son unas librerías que en un principio se orientaron a crear interfaces gráficas para C++, pero que actualmente sirven incluso para implementaciones cliente/servidor. Además de su potencia como herramienta de desarrollo, está su potencia como herramienta multiplataforma, ya que llevado el código con cuidado, este será igual de válido para Linux, Windows, Mac, etc.

Documentacion : http://docs.wxwidgets.org/stable/

instalacion :

En Ubuntu :


abrir la terminal y escribir
sudo aptitude install libwxgtk2.8-0 libwxgtk2.8-dev wx2.8-headers wx-common

o sino;

usando los paquetes synaptic: instalar los siguientes

otra opcion

http://www.wxwidgets.org/downloads/ estan las ultimas versiones para linux y para windows

Primera Parte:

introducion:

vamos a explicar a modo de ejemplo como crear una aplicacion usando lo descrito arriba, conviene usar la documentacion a los que les interese profundizar y poder sacarle el jugo a esto

http://docs.wxwidgets.org/2.8/

tambien se la puede descargar para ubuntu

sudo apt-get install xchm

Primera Parte :

Crear un proyecto nuevo y usar la libreria  

wxWidgets

Antes que nada, una breve descripcion de estas librerias y de como leer la documentacion, existen muchas clases las cuales podemos importar y utilizar, a continuacion vamos a ver un ejemplo de como crear un programa que simplemente tiene una ventana, lo importante es ver como analisamos las clases de wxwidgets y sus atributos, para esto esta la docuementacion de la misma, que iremos revisando en el ejemplo.

http://docs.wxwidgets.org/2.8/wx_classesbycat.html#classesbycat

como cualquier libreria esta debe ser revisada con cuidado.

Comienzo:

Vamos a abrir el programa CodeBlocks y empezar un nuevo proyecto (con wxwidget ya instalado), vamos a crear entonces un proyecto, wxwidgets proyect, entonces hacemos “crear nuevo proyecto” y seleccionamos la siguiente opcion

 

luego seguimos las instrucciones, ponemos el nombre al proyecto… etc, cuando nos pida que elijamos el constructor grafico seleccionamos de la manera siguiente

hacemos en siguiente hasta terminar de crear el proyecto, vamos a crear un empty proyect o proyecto vacio, se pueden crear proyectos que ya vienen con algunas clases basicas como dialog etc, pero vamos a crear un proyecto vacio y asi ver desde 0.

nuestro proyecto va a tener 4 archivos, el “main y una ventana”

Prueba1Main.h

Prueba1Main.cpp

ventana.h

ventana.cpp

antes de mostrar el codigo, como dije anteriormente vamos a fijarnos en la documentacion y analizar la clase que vamos a usar

la clase que vamos a usar se llama wxdialog, es la mas utilizada para hacer ventanas simples, tiene muchas funciones y atributos que pueden ser leidos en la documentacion    http://docs.wxwidgets.org/2.8/wx_wxdialog.html#wxdialog

lo primero que vemos es una descrpcion de la clase y luego nos dice que es lo que tenemos que incluir

Include files

<wx/dialog.h>

luego lo segundo que vemos, es el contructor por defecto y vemos que estructura tiene, esta informacion esta en el link de arriba

wxDialog()

Default constructor.

wxDialog(wxWindow* parent, wxWindowID id, const wxString& title, const wxPoint& pos = wxDefaultPosition, const wxSize& size = wxDefaultSize, long style = wxDEFAULT_DIALOG_STYLE, const wxString& name = “dialogBox”)

Constructor.

Parameters

parent

• Can be NULL, a frame or another dialog box.

id

• An identifier for the dialog. A value of -1 is taken to mean a default.

title

• The title of the dialog.

pos

• The dialog position. A value of (-1, -1) indicates a default position, chosen by either the windowing system or wxWidgets, depending on platform.

size

• The dialog size. A value of (-1, -1) indicates a default size, chosen by either the windowing system or wxWidgets, depending on platform.

style

• The window style. See wxDialog.

name

• Used to associate a name with the window, allowing the application user to set Motif resource values for individual dialog boxes.

los primeros 3 atributos se pueden considerar los mas importantes, los otros no hace falta ponerlos solo si se quiere modificar el tamano de la ventana o el estilo, estas cosas se pueden ir probando y viendo. Lo primero indica como hay que llamar al constructor, lo vamos a llamar de la siguiente manera en el codigo

wxDialog(NULL, -1, Title)

mas adelante cuando veamos el codigo completo se va a entender mas, en vez de usar el -1 se puede usar una constante llamada wx_any.

Title va a ser el titulo de la ventana que contruiremos.

IMAGENNNNNNNNNNNNNNNNN

vamos a construir una clase llamada “ventana” que va a heredar todo de la clase WxDialog. el siguiente es el codigo

—————————————————————————————————————————————————

#ifndef VENTANA_H

#define VENTANA_H

#include <wx/dialog.h> //aca incluimos la clase de la cual vamos a heredar sus atributos
class Ventana : public wxDialog //creamos la clase y a continuacion definimos el constructor
{ public:     Ventana(wxString Title = _T(“FingCode“));

};

#endif

—————————————————————————————————————————————————

esto va a estar en un archivo ventana.h, ahora veremos su implementacion en ventana.cpp.

—————————————————————————————————————————————————

#include <math.h>#include <stdio.h>
#include <wx/wx.h>#include
#include “ventana.h”
Ventana::Ventana(wxString Title) : wxDialog(NULL,-1, Title) {}

—————————————————————————————————————————————————

vemos en la ultima linea como llamamos al constructor de wxDialog.

hasta ahora tenemos una clase que representa a una ventana, con todos los atributos de wxDialog. lo que resta por hacer es el main y llamar a esta clase, a continuacion pongo el codigo.

Prueba1Main.h

—————————————————————————————————————————————————

#ifndef PRUEBA1MAIN_H

#define PRUEBA1MAIN_H
class EjemploApp : public wxApp

{

public: virtual bool OnInit();

};
#endif

—————————————————————————————————————————————————

Prueba1Main.cpp

—————————————————————————————————————————————————

#include <math.h>

#include “ventana.h”

#include <stdio.h>

#include <wx/wx.h>

#include “prueba1Main.h”

IMPLEMENT_APP(EjemploApp)

bool EjemploApp::OnInit() {

Ventana *v1;

v1 = new Ventana();

v1->Show(true); //muestra el app

return true; //true == arrancar la app

}

—————————————————————————————————————————————————

wxApp

The wxApp class represents the application itself. It is used to:

• set and get application-wide properties;
• implement the windowing system message or event loop;
• initiate application processing via wxApp::OnInit;
• allow default processing of events not handled by other objects in the application.

esta clase, es la aplicacion en si misma, “sirve para simular eventos” como en otros lenguajes de programacion como visual basic que existen eventos, y estos se activan cuando hay un clic o un doble clic etc, cada vez que se activa uno se larga una serio de instrucciones que en este caso es simplemente abrir una ventana con el titulo “FINGCODE”.

lo primero que hacemos en el header (.h) es definir Ejempliapp que es nuestra aplicacion heredada de wxapp, y vamos a ponerle un metodo a la operacion OnInit (que es la que inicializa la aplicacion)

wxApp::OnInit

bool OnInit()

Return true to continue processing, false to exit the application immediately.

lo anterior esta en la documentación.

IMPLEMENT_APP(EjemploApp)

esto va siempre antes de implementar la app, otra consideracion es cuando hacemos v1->show() hacemos referencia a la funcion shows que lo que hace es simplemente mostrar la ventana.

por ultimo compilamos todo y lo ejecutamos. lo que se muestra es lo siguiente

se ve la ventana que creamos con su respectivo titulo.

Video Con los pasos desde instalar el programa y las librerias, crear el proyecto y ver el resultado del programa.

Esta es la primera parte, a continuacion vamos a ir viendo como colocar botones y relacionar los diferentes objetos en la parte 2