Programación con Qt4/Mi propio Widget

Crear un widget personalizado

Es posible 'crear' un widget personalizado, justo con lo que queramos y/o necesitemos. Esto se realiza usando el metodo 'class' de c++. Ver el código siguiente.

/******** mi_widget.cpp **********/
#include <QApplication>
#include <QPushButton>
#include <QFont>
#include <QWidget>

class MiWidget:public QWidget { public:MiWidget(QWidget *parent = 0);};

MiWidget::MiWidget(QWidget *parent):QWidget(parent)
{
    setFixedSize(300,200);
    QPushButton *boton_salir = new QPushButton(tr("Salir"), this);
    boton_salir->setGeometry(20,50,150,40);
    boton_salir->setFont(QFont("Times", 18, QFont::Bold));
    QObject::connect(boton_salir, SIGNAL(clicked()), qApp, SLOT(quit()));
}
 
int main(int argc, char *argv[])
{
    QApplication aplicacion(argc, argv);
    MiWidget mi_boton_salir;
    mi_boton_salir.show();
    return aplicacion.exec();
}

Descripción

linea 7

Se observa que se define MiWidget como un objeto public QWidget.

linea 9

Se determina a quien corresponde, en este caso a parent.

linea 11,12,14

Aquí se describen sus propiedades, como el tamaño(size), posición(geometry), fuente(font).

linea 12

Se agrega un botón (QPushButton) a MiWidget.

linea 15

Se asocia el botón al señal de salida, obsérvese que qApp es un 'puntero' a la aplicación.

linea 20-23

Finalmente se muestra el código necesario para cualquier aplicación básica en Qt.

Comparación de código

Ahora comparemos este código con el anterior, que mostraba un widget prediseñado que se encuentra en la libreria de QWidget.

Observar las lineas resaltadas (linea 21 en mi_widget.cpp y linea 11 en widget_ventana.cpp) estas llaman a un widget (MiWidget y QWidget) que se nombraran mi_boton_salir y Ventana, respectivamente.

Comparando el código actual contra el código del ejemplo previo.

mi_widget.cpp

widget_ventana.cpp

/******** mi_widget.cpp **********/ #include <QApplication> #include <QPushButton> #include <QFont> #include <QWidget> class MiWidget:public QWidget { public:MiWidget(QWidget *parent = 0);}; MiWidget::MiWidget(QWidget *parent):QWidget(parent) { setFixedSize(300,200); QPushButton *boton_salir = new QPushButton(tr("Salir"), this); boton_salir->setGeometry(20,50,150,40); boton_salir->setFont(QFont("Times", 18, QFont::Bold)); QObject::connect(boton_salir, SIGNAL(clicked()), qApp, SLOT(quit())); } int main(int argc, char *argv[]) { QApplication aplicacion(argc, argv); MiWidget mi_boton_salir; mi_boton_salir.show(); return aplicacion.exec(); }

/******** widget_ventana.cpp **********/ #include <QApplication> #include <QPushButton> #include <QFont> #include <QWidget> int main(int argc, char *argv[]) { QApplication aplicacion(argc, argv); QWidget ventana; ventana.resize(300,200); QPushButton boton_salir("Salir", &ventana); boton_salir.resize(200, 130); boton_salir.setFont(QFont("Times", 18, QFont::Bold)); boton_salir.setGeometry(20,50,150,40); QObject::connect(&boton_salir, SIGNAL(clicked()), &aplicacion, SLOT(quit())); ventana.show(); return aplicacion.exec(); }

Si se analiza detenidamente se observa que todas los propiedades y eventos o acciones del widget Ventana en widget_ventana.cpp (linea 12-18) se agrupan al definir la clase de MiWidget en mi_widget.cpp (linea 9-16).

Para finalizar, si se compara la sección main de mi_widget.cpp contra el primer ejemplo de hola mundo (hola.cpp) se observe que prácticamente tiene la misma estructura. La diferencia que se aprecia es en las lineas 6 y 7, y se deben al tipo de widget y al nombre que se le da. En el caso de MiWidget mi_boton_salir no requiere 'argumento' ya que previamente se definió en la linea 12 de mi_widget.cpp (ver el código inicial de esta pagina).

Comparando el código actual contra el código del primer ejemplo.

mi_widget.cpp	hola.cpp
/******** mi_widget.cpp **********/ int main(int argc, char *argv[]) { QApplication aplicacion(argc, argv); MiWidget mi_boton_salir; mi_boton_salir.show(); return aplicacion.exec(); }	/******** hola.cpp **********/ int main(int argc, char *argv[]) { QApplication aplicacion(argc, argv); QLabel etiqueta("Hola Mundo!"); etiqueta.show(); return aplicacion.exec(); }