Arriba

Creando Nuestro Propios Widgets

Una de las ventajas que tiene la programación orientada a objetos es la reusabilidad del código ya hecho. Si creamos una clase, la depuramos exhaustivamente y la dejamos lista, podemos usarla como base para otros programas sin tener que rehacer el código. Una de los puntos a favor del toolkit Qt es que está hecho en C++ brindando todos los beneficios de este lenguaje junto a la programación orientada a objetos; y KDE, estando derivado de Qt también ofrece esta ventaja.

La mejor opción, desde mi punto de vista, al momento de crear interfaces visuales es, precisamente, el crear widgets a nuestra medida o derivar algún widget ya depurado e insertarlo en nuestra aplicación. Un widget es un objeto, que bien diseñado, puede contener cualquier objeto como otros widgets, incluso objetos más complejos como barras de herramientas, layouts, etc. Aprovechando esta facilidad, diseñaremos un widget sencillo con una barra de herramientas y un editor de texto para mostrar una frase. La barra de herramientas la haremos usando un método que nos permitirá ubicarla en cualquier widget, a diferencia del método que vimos en un artículo anterior, que solo se puede ubicar en el área destinada por KMainWindow para este propósito. A la barra de herramientas le colocaremos un ComboBox y un SpinBox para que veamos que la clase KToolBar nos permite colocar otras cosas además de botones y cómo hacer para colocarlos. Además de estos dos componentes, le añadiremos tres botones para recordar el uso de los slots; dos botones para modificar el tamaño de la letra del editor y un botón para terminar la aplicación. Una vez creado nuestro objeto, lo asignaremos como objeto principal de la aplicación para que sea mostrado al correr nuestro programa.

Este artículo será más una prueba de concepto que la realización de un programa con un fin útil. Para este artículo necesitaremos crear cuatro archivos para nuestra aplicación: kapp.pro, include/CWMiWidget.h, src/CWMiWidget.cpp y src/kapp.cpp. Acostumbro a anteponer al nombre del archivo una C para indicar que el archivo es una clase y CW para indicar que es una clase que produce un widget y, como habrán notado al leer otros artículos, no me gusta usar nombres con minúsculas solamente, ni tampoco uso Qt Designer para crear algún widget o alguna interfaz, por lo que si alguien prefiere hacer los widgets con este editor puede buscar en la web algún tutorial al respecto. El contenido de los archivos serían los siguientes:

Archivo CWMiWidget.h
#ifndef CWMIWIDGET_H #define CWMIWIDGET_H // Librerías Qt #include <qwidget.h> class KComboBox; class KIntSpinBox; class KTextBrowser; class QGridLayout; class CWMiWidget : public QWidget { Q_OBJECT public: CWMiWidget(QWidget *parent = 0, const char *name = 0); private: KComboBox *cmb; KIntSpinBox *sp; KTextBrowser *tb; QGridLayout *Layout; // Funciones privadas void CrearToolbar(void); private slots: void slotComboBox (int index); void slotSpinBox (int num); }; #endif
Archivo CWMiWidget.cpp
#include "CWMiWidget.h" // Librerías KDE #include <kcombobox.h> #include <kiconloader.h> #include <knuminput.h> #include <ktextbrowser.h> // Librerías Qt #include <qdockarea.h> #include <qlayout.h> #include <qtoolbar.h> #include <qtoolbutton.h> /****************************************************************************** * Constructor del Widget. * ******************************************************************************/ CWMiWidget::CWMiWidget(QWidget *parent, const char *name) : QWidget(parent, name, Qt::WDestructiveClose) { Layout = new QGridLayout(this, 2, 1, 5, 5, "CWMiWidget_Layout"); tb = new KTextBrowser(this, "CWMiWidget_tb"); CrearToolbar(); Layout->addWidget(tb, 1, 0); setGeometry(0,0,400,400); setCaption("CWMiWidget"); show(); } /****************************************************************************** * Crea y configura la barra de herramientas * ******************************************************************************/ void CWMiWidget::CrearToolbar(void) { // Creamos el DockArea y la barra de herramientas QDockArea *qda = new QDockArea(Qt::Horizontal, QDockArea::Normal, this, "CWMiWidget_qda"); QToolBar *qtb = new QToolBar ("ToolBar", NULL, qda, FALSE, "CWMiWidget_qtb"); // Creamos y añadimos los widgets a la barra de herramientas // Primero creamos el ComboBox cmb = new KComboBox(FALSE, qtb, "CWMiWidget_cmb"); // LLenamos con algo el ComboBox for (int i = 1; i < 11; i++) cmb->insertItem(QString::number(i)); // Ahora creamos el SpinBox sp = new KIntSpinBox(1, 10, 1, 1, 10, qtb, "CWMiWidget_sp"); // Creamos los tres botones y los añadimos a la barra de herramientas qtb->addSeparator(); new QToolButton(BarIcon("viewmag+.png"), "Aumentar tamaño de fuente", "", tb, SLOT(zoomIn()), qtb, "tlbZoomIn"); new QToolButton(BarIcon("viewmag-.png"), "Disminuir tamaño de fuente", "", tb, SLOT(zoomOut()), qtb, "tlbZoomOut"); qtb->addSeparator(); new QToolButton(BarIcon("exit.png"), "Cerrar ventana", "", this, SLOT(close()), qtb, "tlbZoomOut"); // Añadimos el DockArea con la barra de herramientas al Layout de CWMiWidget Layout->addWidget(qda, 0, 0); // Creamos las conexiones a los slots connect(cmb, SIGNAL(activated(int)), this, SLOT(slotComboBox(int))); connect(sp, SIGNAL(valueChanged(int)), this, SLOT(slotSpinBox(int))); } /****************************************************************************** * Cambia el texto según el item seleccionado en el combo box * ******************************************************************************/ void CWMiWidget::slotComboBox(int index) { tb->setText(QString("Seleccionado el item %1 en el ComboBox").arg(index + 1)); } /****************************************************************************** * Cambia el texto según el item seleccionado en el spin box * ******************************************************************************/ void CWMiWidget::slotSpinBox(int num) { tb->setText(QString("Seleccionado el item %1 en el SpinBox").arg(num)); }

En el código de este ejemplo no hay mucho que explicar pues ya algunas cosas las hemos visto; lo único nuevo interesante es el uso del DockArea. Este elemento nos permite ubicar componentes acoplables, como el caso de las barras de herramientas, en cualquier parte de nuestro widget personalizado. Si se arrastra la barra de herramientas fuera del área de acoplamiento, se observa como se convierte en una ventanita; si se hace doble clic sobre el título de la ventanita entonces se vuelve a acoplar al DockArea. Por medio de este elemento podemos ubicar la barra de herramientas en cualquier widget que lo necesite. Luego que creamos el DockArea, creamos la barra de herramientas pero teniendo como padre al DockArea. Esto tiene que ser así porque la clase QToolBar necesita saber el área donde será acoplado el objeto luego de ser creado. Ya teniendo la barra de herramientas vamos creando los objetos que queremos añadirle, poniéndoles como padre la barra de herramientas donde queremos que se inserten, en nuestro caso un KComboBox, un KIntSpinBox y tres QToolButton; una vez creados todos los componentes que van en la barra de herramientas, la añadimos al layout de nuestro widget. Es de notar que el orden de creación de los componentes altera el orden de visualización de los controles en la barra de herramientas. Por último, creamos las conexiones de los controles con los slots que recibirán las señales.

Nuestro archivo principal también hay que modificarlo pues ahora debemos instanciar un objeto de la clase CWMiWidget y asignarlo como objeto principal de nuestra aplicación.

Archivo kapp.cpp
#include "CWMiWidget.h" #include <kapp.h> int main( int argc, char **argv ) { KApplication kaplicacion(argc, argv, "kapp_CWMiWidget"); CWMiWidget *mw = new CWMiWidget(0, "CWMiWidget"); kaplicacion.setMainWidget(mw); return kaplicacion.exec(); }

El archivo de proyecto también debe ser modificado para incluir los archivos del objeto creado.

kapp.pro
# Opciones de compilación CONFIG = qt INCLUDEPATH = /usr/include/kde ./include LIBS = -lkdeui -L/usr/lib/ TEMPLATE = app TARGET = kaplicacion DEPENDPATH = . # Archivos con código fuente HEADERS += include/CWMiWidget.h SOURCES += src/CWMiWidget.cpp src/kapp.cpp # Directorios de destino DESTDIR = bin MOC_DIR = moc OBJECTS_DIR = obj

Una vez modificado se ejecuta en una cónsola:

qmake && make && bin/kaplicacion

Y tendremos nuestro programa funcionando y mostrando una apariencia similar a ésta:

Creando Nuestro Propio Widget

Aunque los puristas de la programación orientada a objetos dicen que si un objeto no va a ser instanciado más de una vez, entonces no es necesario el uso de una clase para ese objeto, en cuanto al uso de widgets me parece más útil encapsularlos en una clase para poder reusarlo en otro momento. Usando este enfoque podemos disponer de nuestro widget en cualquier otra aplicación. Por ejemplo, en esta imagen se muestra una aplicación que hace uso de dos pestañas y en cada pestaña se usa nuestro widget.

Creando Nuestro Propio Widget  Creando Nuestro Propio Widget

Esto fue hecho simplemente modificando el archivo principal para demostrar el uso de nuestro widget personalizado. El archivo principal quedaría así:

Archivo kapp.cpp
#include "CWMiWidget.h" // Encabezados KDE #include <kapp.h> #include <klocale.h> // Encabezados Qt #include <qtabwidget.h> int main( int argc, char **argv ) { KLocale::setMainCatalogue("kdelibs"); KApplication kaplicacion(argc, argv, "kapp_CWMiWidget"); QTabWidget *tab = new QTabWidget(0, "tab"); tab->addTab(new CWMiWidget(tab, "CWMiWidget_1"), "CWMiWidget #1"); tab->addTab(new CWMiWidget(tab, "CWMiWidget_2"), "CWMiWidget #2"); tab->show(); kaplicacion.setMainWidget(tab); return kaplicacion.exec(); }

2 comentarios:

  1. Gracias por tu opinión. Espero que te sea útil la información que consigas en este blog. Y si tienes algún artículo bien detallado y explicado, aunque parezca simple, me lo puedes enviar y lo publico; yo me encargo de darle el formato.
    Blogger tiene sindicación, el que no ha puesto el icono soy yo porque no he tenido tiempo de modificar la plantilla del blog. En lo que tenga tiempo lo añado, pero si quieres enlazarlo con aKregator las direcciones son RSS y Atom.

  2. Anónimo

    Hola que tal me gusto tu pagina es muy chevere y agradable. Me gustaria que hablaras sobre como trabajar con archivos o sea almacenar variables de cualquier tipo en un archivo. Gracias