P. 1
46172282 Tutorial de Qt

46172282 Tutorial de Qt

|Views: 26|Likes:
Published by pcoliver

More info:

Published by: pcoliver on Sep 02, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

01/20/2012

pdf

text

original

Tutorial de Qt - Capítulo 1

Resumen
En nuestro primer programa mostraremos la típica frase "Hola Mundo!". Solo contiene lo indispensable para poner en marcha una aplicación Qt. La siguiente imagen es una captura de lo que vamos a hacer:

Veamos el código completo de la aplicación: #include <QApplication> #include <QPushButton> int main(int argc, char *argv[]) { QApplication app(argc, argv); QPushButton hello("Hola Mundo!"); hello.show(); return app.exec(); }

Explicación
#include <QApplication>

Esta linea incluye la definición de la clase QApplication. Solo tiene que haber un objeto QApplication en cada aplicación con GUI que use Qt. QApplication maneja los diferentes recursos de la aplicación, como la fuente por defecto y el cursor. #include <QPushButton>

Esta linea incluye la definición de la clase QPushButton. Para cada clase de la API de Qt existe un fichero de cabecera con el mismo nombre que contiene su definición. Un QPushButton es un botón de la GUI que el usuario puede pulsar y soltar. Maneja su propio look and feel, como cualquier otro QWidget. Un widget es un objeto de la interfaz de usuario que puede dibujar gráficos y procesar entradas por parte del usuario. El programador puede cambiar tanto el aspecto general como otras muchas propiedades menores (como el color), asi como el contenido del widget. Un QPushButton puede mostrar un texto o un QIcon. int main(int argc, char *argv[]) {

La función main() es el punto de entrada del programa. Casi siempre que usemos Qt, main() solo necesitará realizar algún tipo de inicialización antes de pasar el control a la biblioteca Qt, la cual le comunicará al programa como actuar con el usuario a través de los eventos que genere. El parámetro argc es el numero de argumentos pasados por la linea de ordenes, y argv es el array que contiene dichos argumentos. Esto es una definición estándar de C++. QApplication app(argc, argv);

El objeto app es la instancia de QApplication de este programa. Pasamos argc y argv al constructor de QApplication para que pueda procesar los argumentos de la linea de ordenes (como -display). Cada vez que un argumento es reconocido por Qt, se elimina de argv y consecuentemente argc se decrementa. Para mas detalles puedes ver QApplication::arguments(). El objeto QApplication debe crearse ante de usar cualquier elemento de la GUI de Qt. QPushButton hello("Hello world!");

Despues de QApplication viene el primer código relacionado con la interfaz, hemos creado un botón. Establecemos que el botón muestre el texto "Hola Mundo!". Como no hemos especificado una ventana padre (por ejemplo mediante el segundo argumento del constructor de QPushButton), el botón será una ventana en si misma, con su propio marco de venta y su barra de titulo. El tamaño del botón está determinado por su propio tamaño por defecto. Podríamos llamar a QWidget::move() para asignarle una posición determinada al widget, pero por ahora vamos a permitir que el administrador de ventanas elija su posición. hello.show();

Un widget nunca es visible al usuario cuando lo creamos, debemos llamar a QWidget::show() para hacerlo visible. return app.exec(); }

Aquí es donde main() pasa el control a Qt. QCoreApplication::exec() terminará cuando se salga de la aplicación (QCoreApplication es la clase base de QApplication. Implementa el núcleo deQApplication, la funcionalidad no-GUI y puede usarse para desarrollar aplicaciones sin GUI).

En QCoreApplication::exec(), Qt recibe y procesa los eventos del usuario y del sistema y los pasa a los widgets apropiados. Pasemos a compilar y ejecutar nuestro primer programa.

Compilar y ejecutar la aplicación.
Una vez creado el archivo .cpp en un directorio de trabajo, el siguiente paso es crear el makefile de Qt en dicho directorio. Para crear un makefile de Qt vamos a usar qmake, la herramienta de trabajo que incorpora Qt. Ejecutamos las dos siguientes sentencias desde una terminal en nuestro directorio de trabajo para crear el makefile. qmake -project qmake La primer orden indica a qmake que cree un archivo de proyecto (.pro). La segunda le dice a qmake que use el archivo .pro para crear el makefile. Ahora podemos ejecutar make para compilar el programa, y si todo ha ido bien, ya podemos ejecutar nuestra primera aplicación Qt!.

Ejercicios.
Intenta redimensionar la ventana. Pulsa el botón. Intenta ejecutar el programa con la opción -geometry (por ejemplo -geometry 100x200+10+20).

Resumen Este ejemplo es una continuación de la ventana creada en el capitulo 1. Vamos a hacer que la aplicación se cierre correctamente cuando el usuario se lo diga. También vamos a usar un tipo de letra mas atractivo de la que se muestra por defecto.

Veamos el código completo de la aplicación: #include <QApplication> #include <QFont> #include <QPushButton> int main(int argc, char *argv[]) { QApplication app(argc, argv);

QPushButton quit("Quit"); quit.resize(75, 30); quit.setFont(QFont("Times", 18, QFont::Bold)); QObject::connect(&quit, SIGNAL(clicked()), &app, SLOT(quit())); quit.show(); return app.exec(); } Explicación #include <QFont> Como vamos a usar QFont en nuestro programa, tenemos que incluir QFont. QPushButton quit("Quit"); Esta vez el botón mostrara el texto Quit, y eso será lo que el programa haga cuando lo pulsemos. quit.resize(75, 30); Hemos elegido otro tamaño para el botón ya que el texto es algo mas corto que "Hola Mundo!". También podríamos haber usado QFontMetrics para establecer el tamaño adecuado, o permitir que QPushButton eligiera un tamaño razonable por defecto. quit.setFont(QFont("Times", 18, QFont::Bold)); Elegimos una nueva fuente para el botón: Times y negrita de 18 puntos. También es posible cambiar la fuente por defecto de toda la aplicación mediante QApplication::setFont(). QObject::connect(&quit, SIGNAL(clicked()), &app, SLOT(quit())); QObject::connect() es quizás la característica mas importante de Qt. Ten en cuenta que connect() es una función estática de QObject, no confundirla con la función connect() de la biblioteca de sockets de Berkeley. La llamada a connect() establece una conexión "en una sola dirección" entre dos objetos de Qt (objetos que heredan de QObject, directa o indirectamente). Cada objeto de Qt puede tener signals (para mandar mensajes) y slots (para recibir mensajes). Todos los widgets son objetos de Qt ya que heredan de QWidget, que a su vez hereda de QObject. En nuestro caso, la señal clicked() de quit se conecta al slot quit() de app, así cuando se pulsa el botón, se termina la ejecución de la aplicación. La documentación de Signals and slots explica este mecanismo en profundidad. Compilar y ejecutar la aplicación. Podemos compilar y ejecutar la aplicación de forma similar al capitulo 1. Si pulsamos el botón Quit, vemos como la aplicación termina su ejecución.

Ejercicios. &window). 40). 18. QWidget window. Resumen En el tercer capítulo vamos a ver como crear widgets padres y widgets hijos de la forma mas sencilla posible: creando un padre y un solo hijo. 40. argv). QPushButton quit("Quit".show(). 180. ¿Existe alguna otra señal de de QPushButton que puedas conectar al botón? (sugerencia: QPushButton hereda la mayor parte de su funcionalidad de QAbstractButton). SIGNAL(clicked()). window. return app. quit. Creamos simplemente un widget. #include <QApplication> #include <QFont> #include <QPushButton> #include <QWidget> int main(int argc. QObject::connect(&quit. 120). char *argv[]) { QApplication app(argc. QWidget window. y dibuja una representación de si . Intenta redimensionar la ventana. La clase QWidget es la clase base de todos los objetos de la interfaz de usuario. SLOT(quit())).setGeometry(10. el teclado y otros eventos del administrador de ventanas. &app. QFont::Bold)). quit.exec().setFont(QFont("Times". } Explicación #include <QWidget> Añadimos la cabecera de QWidget para poder usarla. Pulsa el botón para cerrar la aplicación.resize(200. window. Un widget es el átomo de la interfaz de usuario: captura el ratón.

180. Un widget sin widget padre siempre es una ventana independiente y su posición inicial en la pantalla está controlada por el administrador de ventanas. A diferencia del capitulo 2 del tutorial.resize(200. Ejercicios. 40. 0). 40).setGeometry(10. el botón ya no llena toda la ventana. QPushButton quit("Quit". este llamará a la función show() de cada uno de sus hijos (excepto aquellos que se ocultaron explicitamente mediante QWidget:hide()). Normalmente las ventanas tienen su propio marco de ventana y una entrada en la barra de tareas. De todas formas. ya que el código es correcto.show(). 40). Puede parece que el destructor del botón quit se invocará dos veces al final de main(). una cuando su padre (window) sale de su ámbito y el destructor elimina el botón porque es hijo suyo. y los dos últimos son la anchura y la altura del botón. El resultado es un botón que ocupa desde la posición (10. proporcionado por el administrador de ventanas. &window). Este QPushButton se ha creado definiendo un widget padre (window). en la posición (0. y otra cuando el botón sale de su ámbito. Un widget queda recortado por su widget padre y por widgets que estan delante de él. Los lectores del tutorial que ya hayan estudiado la documentación de QObject recordarán que cuando se invoca al destructor de un QObject. Intenta redimensionar la ventana. Establecemos el ancho de la ventana a 200 pixeles a la altura a 120 pixeles. debido a la llamada a QWidget::setGeometry(). 40) hasta la posición (190. 120). Un widget hijo siempre se muestra en el area del padre. el destructor invocado llamará automáticamente al destructor de cada hijo. existe un caso en el que el programador debe ser consciente del orden de la destrucción de objetos en la pila (puedes ver la explicación del orden de construcción/destrucción de QObjects aqui). 40) dentro de la ventana con un tamaño (180. y cuando se muestra es recortado por los limites del padre.mismo en la pantalla. 80). La funcion QWidget::setGeometry() tiene cuatro argumentos: los dos primeros son las coordenadas x e y de la esquina superior izquierda del botón (relativas al widget padre). Por defecto se ancla a la esquina superior izquierda. No hay necesidad de preocuparse en este caso. ¿Cómo cambia el botón? ¿Qué sucede con la altura del botón si se ejecuta el programa con un tipo de letra mas grande?¿Qué ocurre si intentas hacer la ventana muy pequeña? . como el que hemos creado. window. si el QObject tiene hijos. Ejecutar la aplicación. Acabamos de crear un hijo :P. se le llama ventana. quit. sino que se mantiene en la posición (10. A un widget que no está relacionado con un widget padre. Cuando mostramos un widget padre. window.

}. 30).exec(). widget. } Explicación class MyWidget : public QWidget { public: .Resumen En este capítulo vamos a ver como crear nuestro propio widget y como controlar el tamaño mínimo y máximo de dicho widget. 75. MyWidget::MyWidget(QWidget *parent) : QWidget(parent) { setFixedSize(200. SIGNAL(clicked()). quit->setFont(QFont("Times". char *argv[]) { QApplication app(argc. argv).show(). QPushButton *quit = new QPushButton(tr("Quit"). SLOT(quit())). } int main(int argc. MyWidget widget. quit->setGeometry(62. #include <QApplication> #include <QFont> #include <QPushButton> #include <QWidget> class MyWidget : public QWidget { public: MyWidget(QWidget *parent = 0). this). return app. 18. QFont::Bold)). connect(quit. 40. 120). qApp.

es decir. La función tr() marca la cadena "Quit" para que pueda ser traducida. La clase solo tiene un miembro. . MyWidget widget. } El puntero qApp es una variable global declarada en el fichero cabecera QApplication. la instancia de MyWidget). La llamada a QWidget::setGeometry() establece la posición y el tamaño del widget en la pantalla. }. QPushButton *quit = new QPushButton(tr("Quit"). la nueva clase podrá ser un widget (y quizá una ventana independiente) o un widget hijo (como el QPushButton del capítulo anterior). Para crear una ventana independiente con el widget debes especificar un puntero nulo como padre. connect(quit. Creamos y establecemos un widget hijo de nuestro widget (el padre del nuevo widget es this. 40. char *argv[]) { QApplication app(argc. MyWdiget no hace un seguimiento de ella. y apunta a la instancia única de QApplication en la aplicación. 75. fijamos su tamaño. qApp. Ya que el widget no sabe como manejar el redimensionado. Como hereda de QWdiget. el widget es por defecto una ventana independiente. MyWidget::MyWidget(QWidget *parent) La implementación del constructor empieza aquí. simplemente pasa el argumento parent al constructor de QWdiget. haciendo posible cambiarla en tiempo de ejecución según los archivos de traducción. Lo primero que hacemos es crear una nueva clase. quit->setFont(QFont("Times". el hijo avisará automáticamente a Qt de su muerte inmediatamente). int main(int argc. : QWidget(parent) { setFixedSize(200. Qt es quien lo hace y la borrará automáticamente cuando el objeto MyWdiget sea destruido (No hay nada malo en borrar un hijo cuando lo desees. El constructor es un constructor estándar de widget de Qt. Como puedes ver. El argumento del constructor es el widget padre. Es un buen habito usar tr() en todas las cadenas visibles al usuario en el caso de que decidas traducir mas tarde tu aplicación a otros idiomas. SIGNAL(clicked()). argv). QFont::Bold)). 18. SLOT(quit())). this). En el siguiente capítulo veremos como un widget puede responder al redimensionado por parte del usuario. Ten en cuenta de que quit es una variable local del constructor. Como la mayoría de los widgets. deberías incluir siempre un constructor similar cuando crees un widget. el constructor (además de los miembros heredados de QWdiget). 120).MyWidget(QWidget *parent = 0). 30). Es equivalente a llamar a QWidget::move() seguido de QWidget::resize. quit->setGeometry(62.

18. Ejercicios. QLCDNumber *lcd = new QLCDNumber(2). Intenta crear otro objeto MyWidget en main(). Ejecutar la aplicación. return app. Aunque no son exactamente iguales. quit->setFont(QFont("Times". intenta redimensionar la ventana para verlo.widget. #include <QApplication> #include <QFont> #include <QLCDNumber> #include <QPushButton> #include <QSlider> #include <QVBoxLayout> #include <QWidget> class MyWidget : public QWidget { public: MyWidget(QWidget *parent = 0). Por ejemplo. MyWidget::MyWidget(QWidget *parent) : QWidget(parent) { QPushButton *quit = new QPushButton(tr("Quit")).exec(). y como manejar el redimensionado de varios widgets en nuestra aplicación. El comportamiento del programa es muy similar al del capítulo anterior. } Instanciamos nuestro nuevo hijo. QFont::Bold)). ¿Qué ocurre?. la diferencia reside en la manera en la que lo hemos implementado. Prueba a añadir mas botones o a incluir otros widgets a parte de QPushButton.show(). . }. Resumen En el quinto capítulo del tutorial vamos a ver como crear y conectar varios widgets entre ellos usando signals y slots. lo mostramos y ejecutamos la aplicación.

lcd->setSegmentStyle(QLCDNumber::Filled). } Explicación class MyWidget : public QWidget { public: MyWidget(QWidget *parent = 0). SLOT(quit())). layout->addWidget(quit). connect(quit. } int main(int argc. QFont::Bold)).show(). setLayout(layout). QLCDNumber *lcd = new QLCDNumber(2). 99). SIGNAL(clicked()). QSlider *slider = new QSlider(Qt::Horizontal). QSlider *slider = new QSlider(Qt::Horizontal). }. widget. SLOT(display(int))). . slider->setRange(0. 99). SIGNAL(valueChanged(int)). connect(slider. return app.lcd->setSegmentStyle(QLCDNumber::Filled). quit->setFont(QFont("Times". lcd es un QLCDNumber: un widget que muestra un número como si fuera un LCD. QVBoxLayout *layout = new QVBoxLayout. lcd.exec(). layout->addWidget(lcd). slider->setValue(0). 18. Vamos a hacer que lcd muestre dos dígitos y estableceremos la propiedad QLCDNumber::segmentStyle a QLCDNumber::Filled para que sea mas legible. slider->setRange(0. layout->addWidget(slider). slider->setValue(0). MyWidget widget. char *argv[]) { QApplication app(argc. MyWidget::MyWidget(QWidget *parent) : QWidget(parent) { QPushButton *quit = new QPushButton(tr("Quit")). argv). qApp.

Como esta señal está conectada al slot display() del LCD. Por eso no tenemos que especificar this como padre en los widgets quit. pero el layout nunca puede actuar como un padre en si. usar un layout asegura que se redimensionen los widgets hijos cuando la ventana se redimensione. SIGNAL(valueChanged(int)). lcd y slider al layout mediante QBoxLayout::addWidget(). el constructor de QWidget toma un puntero a QWidget como padre.El usuario puede usar un QSlider para ajustar un valor entero dentro de un rango. layout->addWidget(lcd). octal o binaria). SLOT(display(int))). Además. este emitirá el nuevo valor lanzando la signal valueChanged(). En Qt. por lo que no tenemos que preocuparnos de borrarlo. Un widget se puede añadir a un layout. layout->addWidget(quit). . los widgets pueden ser hijos de otros widgets (por ejemplo mediante this) o pueden no tener padre. los slots son funciones miembro normales y siguen las reglas de acceso normal en C++. Ejecutar la aplicación. lcd y slider. Además. Ejercicios. Cada vez que el valor del slide cambie. connect(slider. hexadecimal. Es mas. la relación padre-hijo asegura que será borrado junto a MyWidget. establecemos su rango de 0 a 99 y su valor inicial a 0. Date cuenta de que el widget LCD cambia de tamaño cuando se cambia el tamaño de la ventana (porque puede). Ten en cuenta que ninguno de los objetos sabe sobre el otro (esencial en la programación con componentes). lo cual hace que el layout sea el responsable de manejar la geometría de dicho widget. MyWidget ahora usa un QVBoxLayout para manejar la geometría de sus widgets hijos. Por esta razón ya no necesitamos especificar las coordenadas en la pantalla para cada widget hijo tal como hicimos en el capítulo 4. setLayout(layout). Usamos el mecanismo de signals y slots para conectar la señal valueChanged() del slider al slot display() del LCD. la llamada QWidget::setLayout() ajusta automaticamente los widgets en el layout como hijos de MyWidget. La función QWidget::setLayout() establece el layout de MyWidget. Esto hace que el layout sea hijo de MyWidget. pero los otros siguen teniendo el mismo tamaño (lo contrario sería sería extraño). y los widgets se redimensionan de forma correcta. QVBoxLayout *layout = new QVBoxLayout. y QLayout no hereda de QWidget. El LCD de números refleja los cambios hechos en el slider. Incluso puedes añadir cuatro botones para establecer la base del número (decimal. se llamará al slot cuando la señal sea emitida. layout->addWidget(slider). Por otra parte. Con estas tres instrucciones creamos un slider horizontal. Intenta cambiar el LCD añadiendo mas dígitos o cambiando el modo (QLCDNumber::setMode()). Por tanto añadimos los widgets quit. lcd.

El código de un Hola Mundo en Qt es el siguiente 1 #include <QApplication> 2 #include <QLabel> 3 4 int main(int argc.También puedes probar a cambiar el rango del slider. 4 int main(int argc. es la encargada de administrar el flujo de ejecución y la configuración principal de la aplicación. esta vez con Qt. ¿Tal vez hubiera sido mejor usar un QSpinBox en vez de un slider? Intenta hacer que la aplicación se cierre si se produce un desbordamiento en el LCD. argv). char *argv[]) Declaramos nuestra función main en la cual comenzará la ejecución de nuestro programa. char *argv[]) 5 { 6 QApplication app(argc. es necesario especificar los argumentos de línea de comandos argc (un entero que contiene el número de argumentos) y argv (un arreglo/matriz que contiene el valor de cada uno de los argumentos) ya que al crear un objeto de la clase QApplication es necesario especificarlos. Crea un apuntador a un objeto QLabel llamado label. 12 } 1 #include <QApplication> 2 #include <QLabel> Incluimos los archivos de cabecera que utilizaremos para el ejemplo. QLabel es una clase que representa a un control de interfaz de usuario etiqueta. 6 QApplication app(argc. Otra Guia: Tutorial de Qt 4: Nuestro primer programa. 9 label->show(). “Hola Mundo” En este artículo vamos a crear y explicar a detalle la clásica primera aplicación en programación.exec(). la cual reserva memoria para la etiqueta que contendrá el texto que queremos mostrar en pantalla. 7 QLabel *label = new QLabel("Hola Mundo!"). Es conveniente crear la variable label como apuntador ya que de esta forma Qt se hará cargo de gestionar la memoria asignada a este elemento. el cual especificamos como argumento del constructor. Crea el objeto QApplication llamado app y pasa como parámetros los argumentos de línea de comandos. QApplication es una clase que representa una aplicación gráfica de Qt. y lo inicializa con la sentencia new QLabel(“Hola Mundo!”). el cual es generalmente utilizado para mostrar texto no editableen pantalla. 7 QLabel *label = new QLabel("Hola Mundo!"). argv). 10 11 return app. 8 9 label->show(). .

cpp”. Abrimos una terminal en la ubicación de nuestro archivo holamundo. Inicia el hilo principal de la aplicación a partir de este momento el framework toma el control de la aplicación y responde a la interacción del usuario con los controles de interfaz gráfica de acuerdo a todo lo especificado anteriormente. qmake -project Crea un archivo de proyecto para nuestra aplicación qmake holamundo. La sentencia return regresa al sistema operativo la respuesta de la ejecución del programa una vez que ha finalizado. comunicación con el usuario (Parte II) En el artículo anterior revisamos la primera de las dos formas principales de utilizar diálogos en Qt.exec(). Qt se encargará de crear una ventana para poder mostrar la etiqueta en pantalla ya que nosotros no hemos asignado alguna. 11 return app./holamundo Ejecuta el archivo ejecutable generado por el compilador al procesar nuestro código.Muestra la etiqueta en pantalla. implementando la funcionalidad de estas clases y gestionando las respuestas que recibimos a través de la función QDialog::exec() . está respuesta tipicamente será cero en caso de que la aplicación se haya ejecutado exitosamente. esto es creando clases que hereden de QDialog. Compilación y Ejecución Guardamos el archivo como holamundo.pro Crea un archivo de proyecto específico para la plataforma o SO en el que estamos trabajando make Generar un archivo ejecutable correspondiente a nuestra aplicación. .cpp o cualquier otro nombre con extensión “. Si todo ha ido bien deberías ver una ventana parecida a la siguiente Tutorial de Qt4: Diálogos.cpp y ejecutamos los siguientes comandos.

estas clases son: • • • • • QMessageBox Permite mostrar mensajes de notificación al usuario.h" <QPushButton> <QLabel> <QGridLayout> . QColorDialog Muestra un diálogo para que el usuario pueda seleccionar un color. Cada uno de ellos servirá para mostrar un diálogo estándar que nos permitirá obtener un dato del usuario.6 El ejemplo se compone de los siguientes archivos: • • • Ventana. QPrintDialog Muestra un diálogo para especificar configuraciones de la impresora.En este artículo veremos la segunda forma de utilizar diálogos en una aplicación de Qt. Dicha ventana se muestra en la siguiente imagen.cpp componen la clase Ventana.nokia.cpp Los archivos Ventana. La segunda columna se compone de etiquetas y en cada una de ellas escribiremos la información que proporcionó el usuario a través del diálogo correspondientes. A continuación explicamos el código del archivo Ventana. utilizando las clases de diálogos estándar que nos proporciona Qt. Esta clase esta compuesta por dos columnas de widgets. esto es.cpp: 1 2 3 4 #include #include #include #include "ventana. QFileDialog Permite mostrar un diálogo que sirve para seleccionar un archivo o carpeta del sistema de archivos.h y Ventana.cpp main. esta documentación la podemos encontrar en la dirección: http://qt. la cual representa la ventana principal de la aplicación de ejemplo.h Ventana. QInputDialog Permite mostrar un diálogo con un widget para que el usuario puede introducir información.com/doc/4. A continuación mostraremos un ejemplo de uso de estos diálogos mediante una traducción/adaptación de el ejemplo Standar Dialogs de la documentación oficial de Qt. una de ellas está compuesta por botones.

cada slot mostrará un diálogo distinto para cada botón y procesará la respuesta del usuario. 0). De las líneas 1 a 11 incluimos los archivos de cabecera que necesitamos para este ejemplo. A partir de la línea 17 creamos los botones que servirán para mostrar cada uno de los diálogos estándar de Qt. SIGNAL(clicked()). botonObtenerEntero = new QPushButton(trUtf8("Obtener Entero")). Y finalmente. 1). En la línea 13 comienza el constructor de nuestra clase. (. etiquetaObtenerDoble = new QLabel(trUtf8("\t\t\t\t")).) etiquetaObtenerTexto = new QLabel(trUtf8("\t\t\t\t")). 0. SLOT(obtenerEntero())). No mostramos todas las líneas debido a que el código es muy repetitivo y las líneas son muy similares. A partir de la línea 32 y hasta la 45 creamos las etiquetas en las que escribiremos el valor de retorno de cada uno de los diálogos. 1.. . En las líneas 62 a 89 configuramos la apariencia de la interfaz de usuario utilizando un QGridLayout.) 93 94 95 96 connect(botonObtenerTexto. this. SLOT(obtenerDoble())). El código del ejemplo se puede descargar mediante los links de la parte inferior de este artículo.5 6 7 8 9 10 11 12 13 14 #include #include #include #include #include #include <QInputDialog> <QColorDialog> <QFileDialog> <QFontDialog> <QMessageBox> <QErrorMessage> Ventana::Ventana(){ QGridLayout* layoutPrincipal = new QGridLayout. 0). (... this. de las líneas 93 a 106 conectamos cada botón con su slot correspondiente. SIGNAL(clicked()). etiquetaObtenerDoble->setFrameStyle(QFrame::Box). etiquetaObtenerEntero->setFrameStyle(QFrame::Box). (.. connect(botonObtenerEntero. En dónde escribimos (…) van líneas iguales a las anteriores pero para los demás widgets. SIGNAL(clicked()). (. En la línea 15 declaramos el layout con el que organizamos los componentes de nuestra ventana. 17 18 19 32 33 34 35 botonObtenerTexto = new QPushButton(trUtf8("Obtener Texto")). (. connect(botonObtenerDoble.. 0. layoutPrincipal->addWidget(etiquetaObtenerTexto. layoutPrincipal->addWidget(botonObtenerEntero.) De las líneas 47 a 60 establecemos un marco para las etiquetas que mostrarán la respuesta de los diálogos.. etiquetaObtenerEntero = new QLabel(trUtf8("\t\t\t\t")).. SLOT(obtenerTexto()))..) De las líneas 17 a 45 creamos los widgets que utilizaremos en el ejemplo.) layoutPrincipal->addWidget(botonObtenerTexto... this. 47 48 49 50 62 63 64 65 etiquetaObtenerTexto->setFrameStyle(QFrame::Box).

trUtf8(""). 43. trUtf8(""). &ok). 127 trUtf8(""). Ejecutamos el diálogo para obtener la información del usuario y el valor de respuesta. 128 if(ok) 129 etiquetaObtenerDoble->setText(QString::number(doble)). 5. 109 trUtf8(""). 110 111 if(ok) 112 etiquetaObtenerTexto->setText(texto). QLineEdit::Normal. trUtf8(""). 130 } 131 132 void Ventana::obtenerElemento() 133 { 134 QStringList listaElementos. 135 listaElementos << "Elemento 1" << "Elemento 2" << "Elemento 136 3". 9. si es que la hay. 42. 113 } 114 115 void Ventana::obtenerEntero() 116 { 117 int entero = QInputDialog::getInt(this. 1. 15. A continuación revisamos los slots que conectamos con cada uno de los botones. 118 trUtf8(""). 3. 137 QString elemento = QInputDialog::getItem(this.9. 0. &ok). comenzaremos con los slots que hacen uso de los diálogos que nos ofrece la clase QInputDialog. } . 2.A partir de la línea 109 comienza la implementación de los slots. 41. void Ventana::obtenerTexto() { QString texto = QInputDialog::getText(this. en todos ellos realizamos las siguiente acciones: 1. &ok). Evaluamos el valor de respuesta del diálogo. 2. 138 trUtf8(""). trUtf8(""). 122 } 123 124 void Ventana::obtenerDoble() 125 { 126 double doble = QInputDialog::getDouble(this. &ok). trUtf8(""). 4. Dependiendo del valor de la respuesta decidimos de que manera procesar la información capturada. Creamos una variable para almacenar la información que ingresa el usuario por medio del diálogo. false. listaElementos. este último está determinado por el botón que presiona el usuario. 119 if(ok) 120 etiquetaObtenerEntero121 >setText(QString::number(entero)). if(ok) etiquetaObtenerElemento->setText(elemento).

Este diálogo lo ejecutamos mediante la función QString QInputDialog::getText ( QWidget * parent. const QString & label. bool * ok = 0. bool * ok = 0.De la línea 109 a la 115 implementamos el slot obtenerTexto. Los valores posibles son parte de la enumeración Qt::WindowFlags • • • Si el usuario no cierra el diálogo y en cambio presiona algún botón. El texto que mostrará el diálogo. Qt::WindowFlags flags = 0 ) . Aqui podemos establecer un valor de la enumeración EchoMode el cual indicará si el texto debe ser visible. Las flags (banderas u opciones) del diálogo. De la línea 117 a 122 implementamos el slot obtenerEntero. int min = -2147483647. int max = 2147483647. Qt::WindowFlags flags = 0 ) Está función recibe como parámetros: • • • • Un apuntador al widget que deseamos establecer como su padre. const QString & text = QString(). las cuales establecen propiedades del sistema de ventanas para un widget. QLineEdit::EchoMode mode = QLineEdit::Normal. entonces escribimos el valor de la respuesta en la etiqueta correspondiente. const QString & label. const QString & title. int value = 0. const QString & title. El texto que se mostrará en la barra de título del diálogo. que no se muestre o que se muestren caracteres para enmascarar contraseñas (como asteriscos) El valor predeterminado que se mostrará en el campo de texto Un apuntador a una variable que almacena el valor que indica que botón fue presionado. El modo (EchoMode) en el que se mostrará el texto ingresado. Este diálogo lo ejecutamos mediante la función int QInputDialog::getInt ( QWidget * parent. en él mostramos un diálogo que nos permitirá obtener un valor de texto capturado por el usuario. en él mostramos un diálogo que contiene una spinBox que permitirá al usuario establecer un valor numérico entero. como los botones que se muestran en la barra de título o si debe mostrar barra de título o no. int step = 1.

Este diálogo lo ejecutamos mediante la función double QInputDialog::getDouble ( QWidget * parent. const QString & label. en él mostramos un diálogo muy similar al que del slot obtenerEntero con la diferencia de que el valor de la spinbox podrá ser un valor decimal o de punto flotante de doble precisión. double value = 0. A partir del cuarto parámetro y en orden. . int decimals = 1. double min = -2147483647.Los primeros tres y los dos últimos parámetros de está “familia” de funciones y de algunos de los otros diálogos estándar son iguales. un apuntador a la variable donde se almacenará la respuesta al diálogo y una lista de flags u opciones del diálogo. los parámetros específicos de este diálogo son: • • • • El valor predeterminado que al que se establecerá la spinbox cuando se muestre el diálogo El valor mínimo al que se puede establecer el valor de la spinbox El valor máximo al que se puede establecer el valor de la spinbox La cantidad en que se incrementará o decrementará el valor de la spinbox al presionar las flechas del extremo (step o paso) De las líneas 124 a 129 implementamos el slot obtenerDoble. Qt::WindowFlags flags = 0 ) Los parámetros de esta función son muy similares a la función getInt salvo por el séptimo parámetro. el cuál indica el número de decimales del número. el texto que se mostrará en el diálogo. bool * ok = 0. const QString & title. el valor por defecto es de uno. el título del diálogo. indican el widget padre. double max = 2147483647.

bool editable = true. const QString & title.De la línea 131 a 138 implementamos el slot obtenerElemento.toString()). } De las líneas 140 a 148 implementamos el slot obtenerColor. bool * ok = 0. int current = 0.isValid()) { etiquetaObtenerColor->setText(color. etiquetaObtenerColor->setPalette(QPalette(color)). en él mostramos un diálogo que contiene una comobox que permite al usuario elegir un valor de una lista que indiquemos. Este diálogo lo ejecutamos mediante la función QString QInputDialog::getItem ( QWidget * parent. if(color. const QString & label.name()). } } void Ventana::obtenerFuente() { QFont fuente = QFontDialog::getFont(&ok). si no se especifica será cero Un valor booleano que indica si la combobox será editable void Ventana::obtenerColor() { QColor color = QColorDialog::getColor(). const QStringList & items. Este diálogo lo mostramos mediante la función QColorDialog::getColor( const QColor & initial. Qt::WindowFlags flags = 0 ) Esta función recibe del cuarto al sexto parámetro: • • • 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 Una lista de cadenas de texto que serán los elementos de la combobox La posición del elemento seleccionado por defecto. ColorDialogOptions options = 0 ) . en el mostramos un diálogo que contiene controles especializados para permitir que el usuario eliga un color. const QString & title. QWidget * parent. etiquetaObtenerColor->setAutoFillBackground(true). if(ok) etiquetaObtenerFuente->setText(fuente.

el cual muestra un diálogo que incluye controles especiales para que el usuario pueda seleccionar una fuente para el texto. . que permiten establecer algunas propiedades del diálogo como mostrar canal alfa o usar el diálogo nativo del sistema operativo • • • De la línea 150 a 155 implementamos el slot obtenerFuente. si no se especifica ninguno el color blanco será el seleccionado El widget padre del diálogo El título del diálogo Miembros de la enumeración ColorDialogOptions. QWidget *parent) Dicha función tiene múltiples sobrecargas en las cuales se pueden establecer valores iniciales y configuraciones del diálogo similares a las de los diálogos anteriores pero en este ejemplo utilizamos una función que sólo recibe como parámetros el apuntador a la variable que almacena la respuesta que da el usuario al diálogo y un apuntador al widget padre de este diálogo. Dicho diálogo se muestra mediante la función QFont QFontDialog::getFont(bool *ok.Esta función recibe como parámetros: • Un objeto de la clase QColor que indica el color inicial que se establecerá en el diálogo.

. } void Ventana::obtenerArchivosAbrir() { QStringList archivos = QFileDialog::getOpenFileNames( this. } void Ventana::obtenerArchivoAbrir() { QString filtroSeleccionado.157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 void Ventana::obtenerDirectorioExistente() { QString directorio = QFileDialog::getExistingDirectory(this. trUtf8("").count()) { etiquetaObtenerArchivosAbrir>setText(QString("[%1]").txt). if(!directorio.isEmpty()) etiquetaObtenerDirectorioExistente>setText(directorio).isEmpty()) (this. "))).Archivos de Código Fuente C++ (*. etiquetaObtenerArchivoGuardar->text().join(". trUtf8("")..Archivos de Cabecera C/C++ (*. "".h). trUtf8("Todos los archivos (*).cpp)")).Archivos de Código Fuente C++ (*...isEmpty()) etiquetaObtenerArchivoAbrir->setText(Nombre).Archivos de Cabecera C/C++ (*. if (!Nombre. if (archivos.cpp)")). etiquetaObtenerDirectorioExistente->text(). &filtroSeleccionado. etiquetaObtenerArchivoAbrir->text(). trUtf8(""). } } void Ventana::obtenerArchivoGuardar() { QString nombreArchivo = QFileDialog::getSaveFileName trUtf8(""). trUtf8("Todos los Archivos (*). QString Nombre = QFileDialog::getOpenFileName(this. 0). QFileDialog::ShowDirsOnly).txt).. .cpp)").arg(archivos.Archivos de Cabecera C/C++ (*. trUtf8("Todos los Archivos (*). if (!nombreArchivo.Archivos de Código Fuente C++ (*..

const QString & dir = QString(). Options = 0 ) . const QString & dir = QString(). Options options = ShowDirsOnly ) Esta función recibe como parámetros • • • • Un apuntador al widget padre del diálogo El título del diálogo La ruta del directorio en dónde se desea comenzar a buscar Miembros de la enumeración QFileDialog::Options que permiten configurar opciones del diálogo como el sólo mostrar directorios o utilizar un diálogo no nativo De la línea 176 a 187 implementamos el slot obtenerArchivoAbrir el cual funciona de manera muy similar al slot anterior con la diferencia de que este permite seleccionar un archivo en lugar de un directorio. De las líneas 157 a 207 implementamos los slots que hacen uso de las funciones estáticas de la clase QFileDialog. const & caption = QString().} etiquetaObtenerArchivoGuardar->setText(nombreArchivo). Este diálogo lo mostramos con la función QString getExistingDirectory ( QWidget * parent = 0. Mostramos el diálogo utilizado en este slot con la función QString QString QString options QFileDialog::getOpenFileName ( QWidget * parent = 0. const QString & caption = QString(). De la línea 157 a 162 implementamos el slot obtenerDirectorioExistente en el cual ejecutamos un diálogo que mostrará una ventana de exploración del sistema de archivos y que nos permitirá seleccionar una carpeta o directorio. const & filter = QString(). QString * selectedFilter = 0.

const QString & dir = QString(). este filtro determina que tipo de archivo se muestra. const & filter = QString(). QString * selectedFilter = 0. El diálogo utilizado en este slot lo ejecutamos mediante la función QString QString QString options QFileDialog::getSaveFileName ( QWidget * parent = 0. Como quinto parámetro.. una cadena que representa los filtros que podrán ser aplicados al diálogo. Mostramos el diálogo utilizado en este slot con la función QStringList QFileDialog::getOpenFileNames ( QWidget * parent = 0. const QString & dir = QString(). Los parámetros propios de esta función son: • Como cuarto parámetro. QString * selectedFilter = 0. Options options = 0 ) Los parámetros de la función utilizada para ejecutar el diálogo son iguales a los de la función utilizada para abrir un solo archivo. De la línea 189 a 199 implementamos el slot obtenerArchivoGuardar el cual muestra un diálogo que permite guardar un archivo al usuario y eligiendo su ubicación y especificando su nombre. const QString & caption = QString(). una cadena que indique el filtro seleccionado actualmente. Separamos cada tipo de archivo mediante dos caracteres punto y coma (. const QString & filter = QString(). Para cada tipo de archivo se escribe una descripción y entre paréntesis la extensión del tipo de archivo. • De la línea 176 a la 187 implementamos el slot obtenerArchivosAbrir el cual muestra un diálogo casi igual al del slot anterior con la diferencia de que este permite al usuario seleccionar más de un archivo.En esta función el último y los tres primeros parámetros son iguales al de la función del slot anterior. Options = 0 ) . const & caption = QString().).

trUtf8(""). Si especificamos un nombre que coincida con el de un archivo existente se mostrará otro diálogo solicitando la confirmación del usuario. if (respuesta == QMessageBox::Ok) etiquetaMostrarMensajeInformacion->setText(tr("OK")). QMessageBox::Abort | QMessageBox::Retry | QMessageBox::Ignore). } void Ventana::mostrarMensajePregunta() { QMessageBox::StandardButton respuesta. 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 void Ventana::mostrarMensajeCritico() { QMessageBox::StandardButton respuesta = QMessageBox::critical( this. este diálogo muestra dos botones de respuesta: Aceptar y Cancelar. respuesta = QMessageBox::information(this. trUtf8("Este es un mensaje con una pregunta"). trUtf8(""). if (respuesta == QMessageBox::Abort) etiquetaMostrarMensajeCritico->setText(tr("Abortar")).Los parámetros de esta función son iguales que los de la función utilizada para ejecutar el diálogo que permite abrir archivos. else if (respuesta == QMessageBox::Retry) etiquetaMostrarMensajeCritico>setText(tr("Reintentar")). . trUtf8(""). QMessageBox::Yes | QMessageBox::No | QMessageBox::Cancel). else etiquetaMostrarMensajeInformacion>setText(tr("Escape")). } void Ventana::mostrarMensajeInformacion() { QMessageBox::StandardButton respuesta. trUtf8(""). else etiquetaMostrarMensajeCritico->setText(tr("Ignorar")). respuesta = QMessageBox::question(this. trUtf8("Este es un mensaje de información")).

Cancelar. 247 msgBox. Mostramos este diálogo mediante la función StandardButton QMessageBox::critical ( QWidget * parent. 250 QMessageBox::RejectRole). Entre las líneas 201 y 215 implementamos el slot mostrarMensajeCritico el cual permite mostrar un diálogo con un icono de error que normalmente sirve para indicar que ocurrió algún error grave en la aplicación. StandardButton defaultButton = NoButton ) Dicha función nos devuelve un valor de la enumeración StandarButttons. 248 QMessageBox::AcceptRole). 244 trUtf8("QMessageBox::warning()"). la cual contiene todos los posibles valores que devuelve un diálogo al presionar cada uno de los botones disponibles. Reintentar. 0.if (respuesta == QMessageBox::Yes) etiquetaMostrarMensajePregunta->setText(tr("Sí")). const QString & text. 239 } 240 241 void Ventana::mostrarMensajeAdvertencia() 242 { 243 QMessageBox msgBox(QMessageBox::Warning. Sí. No. 251 if (msgBox. StandardButtons buttons = Ok. 249 msgBox. los cuales son: • • Un apuntador al widget padre del diálogo El título del diálogo .addButton(trUtf8("Guardar Otra Vez"). } A partir de la línea 201 y hasta el fin del archivo en la línea 251 implementamos los slots que muestran los diálogos de la case QMessageBox. this).addButton(trUtf8("Continuar"). else if (respuesta == QMessageBox::No) etiquetaMostrarMensajePregunta->setText(tr("No")). else etiquetaMostrarMensajePregunta>setText(tr("Cancelar")). else etiquetaMostrarMensajeAdvertencia>setText(tr("Continuar")). 245 trUtf8("Este es un mensaje de 246 advertencia"). Las cuatro funciones de la clase QMessageBox que revisaremos y que nos sirven para mostrar un diálogo de información reciben los mismos parámetros. como: Aceptar. Cancelar. const QString & title. Sí a todo.exec() == QMessageBox::AcceptRole) etiquetaMostrarMensajeAdvertencia->setText(tr("Guardar Otra Vez")).

const QString & text. StandardButtons buttons = Ok. Mostramos el diálogo utilizado mediante la función StandardButton QMessageBox::information ( QWidget * parent. (el que se usa para un OR a nivel bit en C/C++) en donde cada valor indica que se debe mostrar su botón correspondiente Un valor de la enumeración StandarButtons el cual indica que botón se establecerá como predeterminado. es decir sobre cual se hará un efectro de clic al presionar la tecla enter al estar el diálgo activo • Entre las líneas 217 y 225 implementamos el slot mostrarMensajeInformacion en el cual mostramos un diálogo que sirve para mostrar información al usuario. como información sobre un error poco grave. const QString & title. StandardButton defaultButton = NoButton ) Y finalmente de le la línea 241 a la 251 implementamos el slot mostrarMensajeAdvertencia en el cual mostramos un diálogo con que sirve para mostrar un mensaje de advertencia. como un aviso sobre la conclusión de una tarea o una notificación de algún evento. const QString & title. const QString & title. const QString & text. StandardButton defaultButton = NoButton ) De la línea 227 a 239 implementamos el slot mostrarMensajePregunta en el cual mostramos un diálogo con icono de un signo de interrogación. Mostramos este diálogo mediante la función StandardButton QMessageBox::question ( QWidget * parent. StandardButtons buttons = Ok. StandardButtons buttons = Ok. este diálogo sirve para realizar una pregunta al usuario o solicitar su confirmación u aprobación para un proceso. Este diálogo lo mostramos mediante la función StandardButton QMessageBox::warning ( QWidget * parent. const QString & text. como al guardar o borrar un archivo.• • El texto que deseamos mostrar en el diálogo Una lista de valores de la enumeración StandarButton separadados por caracteres 2de barra”. StandardButton defaultButton = NoButton ) .

Tutorial de Qt 4: QMainWindow. QMainWindow. Herramientas o Ayuda.cpp. Eso es todo en este artículo. la ventana principal de la aplicación En el artículo anterior de este tutorial vimos como implementar la funcionalidad de una aplicación gráfica de Qt utilizando señales y slots. Edición. tabla o árbol de manera sencilla. Normalmente sólo existe una de ellas en la ventana y está colocada en la parte superior. Algunos ejemplos muy conocidos de menús que suelen colocarse en esta barra son Archivo. QTableWidget y QTreeWidget.Con esa función concluimos la revisión del código del archivo Ventana. En el archivo main. el cuál posee características especiales para ser utilizado como la ventana principal de las aplicaciones Qt. los cuales están compuestos por elementos de texto o etiquetas que indican las acciones que puede realizar la aplicación y que se ejecutan al hacer clic sobre ellas. los cuales nos permiten visualizar un conjunto de datos a manera de lista. debajo de la barra de título. La estructura de la QMainWindow se puede ver en la siguiente imagen Una QMainWindow puede estar compuesta de las siguientes cinco áreas o secciones: • Menu Bar como su nombre lo indica esta barra contiene menús. En este artículo revisaremos a detalle un widget especial. En la siguiente parte de este tutorial veremos como utilizar los widgets QListWidget. .cpp simplemente creamos un objeto de esta clase y lo mostramos en pantalla. Estos widgets son parte del framework modelo/vista que Qt provee.

esta clase de barras. Dock Widgets Este es un tipo de widgets que pueden ser acoplados o ajustados alrededor del widget central de una aplicación o permitir que “floten” libremente en el escritorio. Un ejemplo muy conocido de iconos colocados en este tipo de barras son los de Guardar. • Status Bar Esta barra. conocida como barra de herramientas está compuesta por las acciones que puede realizar la aplicación. representado por una impresora. las acciones que está realizando o la descripción del elemento al que estemos apuntando con el mouse. representado por un diskette o Imprimir. en ella se muestran mensajes informativos sobre el estado de la aplicación. con la diferencia de que en esta barra dichas acciones se muestran mediante iconos en lugar de etiquetas.• Toolbars al igual que la barra de menús. • . al igual que las barras de herramientas contienen iconos y botones que permiten ejecutar acciones que proporciona la aplicación. Estas barras suelen estar ubicadas debajo de la barra de menús y podemos encontrar una o más de estas barras en una ventana. conocida como barra estatus o de estado. normalmente está colocada en la parte inferior de la ventana.

• Central Widget Este widget representa el área de trabajo de una aplicación. QAction. ventanaprincipal. La aplicación está compuesta por los siguientes tres archivos: • ventanaprincipal.h 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #ifndef VENTANAPRINCIPAL_H #define VENTANAPRINCIPAL_H #include <QMainWindow> class class class class QLabel. contiene la declaracion de las variables y la definición de las funciones que utilizaremos en esta aplicación.cpp • • A continuación revisaremos a detalle los archivos de la aplicación. class VentanaPrincipal : public QMainWindow { Q_OBJECT . la cual contendrá una etiqueta como widget central la cual cambiará el texto que muestra dependiendo de la acción que ejecutemos.h es el archivo de encabezado de la clase VentanaPrincipal. QToolBar. estas acciones se encontrarán en una barra de menús y una barra de herramientas también incluiremos una barra de estatus. A continuación mostraremos un sencillo ejemplo de una aplicación que basada en una QMainWindow. sólo explicaremos las secciones que no hayan sido revisadas en partes anteriores de este tutorial o que sean relevantes en este contexto ventanaprincipal. como la tabla de celdas de una aplicación en hoja de cálculo o el área de texto de un procesador de textos. Podemos reconocer estás secciones en un buen número de aplicaciones.cpp es el archivo fuente de la clase VentanaPrincipal. contiene la implementación de las funciones declaradas en el archivo de encabezado. como ejemplo presentamos la ventana de Open Office Writer (clic para ampliar). main. QMenu.

cpp 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #include "ventanaprincipal. accionNuevo->setShortcut(QKeySequence::New). accionNuevo = new QAction(QIcon("iconos/nuevo. this). private: QMenu* menuArchivo. QAction* accionAbrir. void accionSalirLanzada(). QAction* accionAcercaDe.15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 public: VentanaPrincipal(). trUtf8("&Nuevo"). QToolBar* barraDeHerramientas. void accionAcercaDeLanzada(). QAction* accionSalir. ventanaprincipal. }. menuAyuda = menuBar()->addMenu(trUtf8("A&yuda")). De la líneas 18 a 22 declaramos los slots por medio de los cuales implementaremos la funcionalidad de nuestra aplicación. accionNuevo->setStatusTip(trUtf8("Crear un nuevo archivo")).h" #include #include #include #include #include <QMenuBar> <QToolBar> <QLabel> <QStatusBar> <QMessageBox> VentanaPrincipal::VentanaPrincipal() { menuArchivo = menuBar()->addMenu(trUtf8("&Archivo")). #endif En la línea 4 incluimos el archivo de cabecera QMainWindow el cual contiene la definición de la clase en la que basaremos nuestra ventana principal. QLabel* widgetCentral. . void accionAbrirLanzada().png"). barraDeHerramientas = addToolBar(trUtf8("&Archivo")). widgetCentral = new QLabel(trUtf8("Widget central")). En la línea 11 definimos nuestra clase VentanaPrincipal e indicamos que heredará de QMainWindow. QAction* accionNuevo. Y finalmente de las líneas 24 a 32 declaramos las variables que utilizaremos en la aplicación. QMenu* menuAyuda. widgetCentral->setFont(QFont("Sans-Serif". private slots: void accionNuevoLanzada(). 25)).

setWindowTitle("Ventana Principal"). connect(accionAbrir. 200)). connect(accionAcercaDe. SIGNAL(triggered()). this->resize(QSize(widgetCentral->sizeHint(). accionAbrir->setStatusTip(trUtf8("Abrir un archivo existente")). accionAcercaDe->setStatusTip(trUtf8("Información sobre esta aplicación")). setMinimumSize(200. menuArchivo->addAction(accionSalir). 200)). this. SLOT(accionSalirLanzada())). } . SIGNAL(triggered()). this). connect(accionNuevo. SLOT(accionAbrirLanzada())). barraDeHerramientas->addAction(accionSalir). accionSalir->setStatusTip(trUtf8("Salir de la aplicación")). } void VentanaPrincipal::accionNuevoLanzada() { widgetCentral->setText(trUtf8("Acción \"Nuevo\" lanzada")). SLOT(accionAcercaDeLanzada())). menuAyuda->addAction(accionAcercaDe). menuArchivo->addSeparator(). accionAbrir->setShortcut(QKeySequence::Open). this. trUtf8("&Acerca de").width(). } void VentanaPrincipal::accionAbrirLanzada() { widgetCentral->setText(trUtf8("Acción \"Abrir\" lanzada")).png"). this. this). accionSalir->setShortcut(QKeySequence::Quit). this.png"). 200).width().png"). SLOT(accionNuevoLanzada())).24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 accionAbrir = new QAction(QIcon("iconos/abrir. menuArchivo->addAction(accionNuevo). accionSalir = new QAction(QIcon("iconos/salir. trUtf8("&Abrir"). this). this->resize(QSize(widgetCentral->sizeHint(). accionAcercaDe->setShortcut(QKeySequence("Ctrl+d")). barraDeHerramientas->addSeparator(). trUtf8("&Salir"). statusBar()->showMessage(trUtf8("Bienvenido")). barraDeHerramientas->addAction(accionAbrir). connect(accionSalir. accionAcercaDe = new QAction(QIcon("iconos/salir. SIGNAL(triggered()). menuArchivo->addAction(accionAbrir). SIGNAL(triggered()). setCentralWidget(widgetCentral). barraDeHerramientas->addAction(accionNuevo).

mediante el constructor de la clase QAction::QAction(QIcon(QString &archivo). es decir. Y en la línea 17 establecemos la fuente que queremos que ocupe la etiqueta. artículos y enlaces de programación en:\nhttp://www. del tipo QAction.com")). QString &texto. int tamanio)). La cual recibe como parámetros un objeto QFont. el cual representa una fuente de texto y que a su vez recibe como parámetros el nombre de la fuente y el tamaño de la misma. esto se hace mediante la instrucción: QLabel::setFont(QFont(QString &fuente.programacion-linux. this->windowTitle(). QWidget* padre) Este constructor recibe como parámetros un objeto QIcon. En la línea 19 inicializamos nuestra variable accionNuevo. para lograrlo utilizamos las funciones QMenuBar* QMainWindow::menuBar() Devuelve una referencia a una barra de menús que es creada al llamar a la función por primera vez. En las línea 11 inicializamos la variable menuArchivo la cual representa un menú que podemos incluir en la barra de menús de la QMainWindow. } void VentanaPrincipal::accionSalirLanzada() { exit(0).81 82 83 84 85 void VentanaPrincipal::accionAcercaDeLanzada() { QMessageBox::about(this. y trabaja de manera muy similar a las descritas anteriormente. En la línea 14 inicializamos la variable que representa a una barra de herramientas. el cual representa un icono que se mostrará cuando la acción sea colocada dentro de una barra de herramientas y que a su vez recibe como parámetro una cadena de texto con la dirección dónde se encuentra el archivo de imágen que mostrará el icono. QMenu* QMenuBar::addMenu(QString &texto) Devuelve una referencia a un menú que se creará al llamar a la función y que mostrará en pantalla el texto indicado en la cadena de caracteres que se pasa como parámetro. trUtf8("Aquí se debe colocar información sobre la aplicación y la compañia que la desarolla\n\nTutoriales. el segundo parámetro del constructor de la clase . devuelve una referencia a una QToolBara que se crea cuando se llama a la función y que mostrará en pantalla la cadena que se pasa como parámetro. En la línea 16 inicializamos la etiqueta que será utilizada como widget central en la aplicación. En la línea 12 realizamos lo mismo para el menú Ayuda. La función utilizada es: QToolBar* QMainWindow::addToolBar(QString &texto). } De las líneas 1 a 7 incluimos los archivos de cabecera necesarios para implementar la aplicación.

En las líneas 23 a 33 realizamos lo mismo para las acciones restantes. mediante la función QAction::setShortcut(const QKeySecuence secuencia) la cual recibe como parámetro un elemento de la enumeración QKeySecuence. entonces podemos decir que una QAction proporciona una interfaz común para la ejecución de los comandos de la aplicación. asociarlo a otra combinación de teclas más adecuada en esa situación. por mencionar algunos ejemplos. en la línea 20 establecemos un atajo de teclado para nuestra acción Nuevo. En la línea 21 establecemos el texto que deseamos que se muestre en la barra de estatus al posicionar el cursor del mouse sobre los widgets relacionados con la acción correspondiente. dicha enumeración nos proporciona combinaciones estándar de teclas dependiendo de la configuración del sistema operativo en el que nos encontremos. En las líneas 35 a 38 agregamos tres de las acciones que creamos al menú Archivo. un icono de alguna barra de herramientas o una combinación de teclas. Por ejemplo en el caso de mi sistemas operativo el elemento QKeySecuence::New esta relacionado con la combinación de teclas Ctrl+N sin embargo esto puede ser distinto en otro sistema operativo. En la línea 48 creamos la barra de estatus mediante la función . Antes de seguir debemos definir el concepto de QAction: Una QAction es una representación abstracta de un comando de la aplicación que puede ser ejecutado por el usuario. acciones o funciones pueden ser ejecutados de diferentes maneras. Siguiendo con el código. Esto lo hacemos a través de la función QMenu::addAction(QAction* accion) Con el fin de lograr un diseñod e interfaz de usuario más claro y atractivo en la línea 37 agregamos un separardor. utilizando la función QMenu::addSeparator() Un separador es una línea vertical u horizontal que separa las acciones que está colocadas dentro del mismo menú o barra de herramientas pero que pueden ser ubicadas en una categoría específica o diferente del resto de las acciones del mismo menú o barra de herramientas. En las líneas 42 a 45 agregamos las acciones a la barra de herramientas de la aplicación utilizando las mismas funciones que utilizamos para agregarlas a los menús. En muchas aplicaciones los mismos comandos. En la línea 40 agregamos la acción AcercaDe al menú Ayuda. Una QAction nos es muy útil en este tipo de situación ya que puede estar asociada a múltiples widgets.QAction es una cadena que indica el texto que se mostrará cuando la acción sea colocada dentro de una barra de menús y el último parámetro es el widget padre de la acción. Esto se logra mediante la función: QAction::setStatusTip(QString &texto) La cual recibe como parámetro una cadena con el texto que deseamos mostrar. gracias a esto será posible proporcionar la misma función en distintos lugares de la aplicación y de manera sincronizada. pero al utilizar esta enumeración Qt se encargará de administrarlo y en caso de que se requiera. ya sea mediante un elemento de la barra de menús.

en la línea 84 utilizamos la función exit(int codigo) para indicar que deseamos salir de la aplicación. Normalmente un valor de cero indica que la aplicación termino normalmente. main. esto lo realizamos mediante la función connect(). es decir. Debido a que una acción puede estar asociada a múltiples widgets no siempre será lanzada de la misma forma. En la misma línea utilizamos la función QStatusBar::showMessage(QString &mensaje) para mostrar un mensaje en la barra de estatus. la cual revisamos a detalle en un artículo anterior. por ejemplo un clic sobre un botón lanzará una acción asociada al mismo mientras que una combinación de teclas lanzará dicha acción al ser presionada por el usuario. En las líneas 52 y 53 conectamos la acción accionNuevo con su slot correspondiente. En la línea 65 comienza la implementación de los slots. en este caso mostramos la palabra “Listo” con el fin de indicar que la aplicación puede comenzar a utilizarse. creará una barra de estatus para la ventana la primera vez que es llamada.h" 2 #include <QApplication> 3 4 int main(int argc. En la línea 77 comienza la implementación del slot asociado a la acción acercaDe. debido a ello Qt nos proporciona la señal triggered() (lanzada o disparada) la cual se emitirá cada vez que un widget asociado a la señal sea activado. En las líneas 55 a 62 conectamos las acciones restantes a sus respectivos slots. la aplicación devolverá un código el código de error indicado como parámetro. respectivamente. es decir.QMainWindow::statusBar() La cual funciona de manera muy similar a las funciones utilizadas para crear las otras barras de la ventana principal. int height)) esta función recibe como parámetro un objeto QSize. en la línea 79 indicamos que al dispararse dicha acción se mostrará el conocido diálogo acerca de el cuál contiene información sobre la aplicación como versióno fecha de lanzamiento y sobre la compañia que creo la aplicación. Finalmente en las líneas 82 a 85 implementamos el slot asociado a la acción salir. los slots accionNuevoLanzada y accionAbriLanzada cambiarán el texto que se muestra en la etiqueta utilizada como widget central y redimensionarán la ventana para ajustarla al nuevo texto mostrado. También utilizamos la función sizeHint() la cual devuelve un objeto QSize con el tamaño requerido por el widget sobre el que se llamo la función.cpp 1 #include "ventanaprincipal. el cual es una estructura que incluye el ancho y alto de un widget y que a su vez recibe como parámetros dos enteros indicando el ancho y alto del widget. sin ningún error. El cambio de tamaño de la ventana se realiza mediante la función QMainWindow::resize(QSize(int width. El cambio de texto de la etiqueta se realiza mediante la función QLabel::setText(QString &texto) la cual recibe como parámetro una cadena de caracteres con el texto que se desea mostrar. char* argv[]) .

5 { 6 7 8 9 10 11 12 13 } QApplication app(argc.exec(). VentanaPrincipal* ventanaPrincipal = new VentanaPrincipal. return app. y finalmente en la línea 10 mostramos nuestra ventana principal. En la línea 1 incluimos el archivo de cabecera de la clase VentanaPrincipal. Al ejecutar esta aplicación de ejemplo obtendremos algo parecido a lo mostrado en las siguientes imagenes: . argv). mientras que en la línea 8 creamos e inicializamos un objeto de dicha clase. ventanaPrincipal->show().

Tutorial de Qt 4: Layouts. en la siguiente parte del tutorial veremos como implementar un widget personalizado. Utilizamos este enfoque debido a que realizamos un programa que sólo serviría de ejemplo. organización de los Widgets En el ejemplo anterior realizamos nuestra primera aplicación en Qt. el cual en nuestro caso fue una etiqueta. . pero en él se pueden apreciar serias deficiencias. tal vez la más notoria es que sólo es posible utilizar un elemento de interfaz gráfica (widget) a la vez. el clásico Hola Mundo. QHBoxLayout Nos permite ordenar los widgets en filas. Los Layouts son objetos que nos permiten organizar los widgets dentro de una ventana. es decir. En este artículo veremos la forma de solucionar esto: utilizando Layouts. de manera horizontal. en Qt disponemos de los siguientes tipos básicos de Layouts: • • • • QHBoxLayout QVBoxLayout QGridLayout QFormLayout A continuación describiremos brevemente estos layouts y mostraremos un ejemplo básico de su uso. el cual podremos utilizar en futuras aplicaciones que desarrollemos. en el cual solamente creamos una etiqueta con el texto “Hola Mundo!” y la mostramos en pantalla.Es todo en este artículo.

argv). Un diálogo es una ventana mediante la cual el usuario y la aplicación se comunican. layout->addWidget(boton1). char *argv[]) { QApplication app(argc. layout->addWidget(boton3). QHBoxLayout *layout = new QHBoxLayout(). QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1")). o el acento (tilde).El código para crear una aplicación con un layout como el de la imagen anterior es el siguiente. QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3")).exec(). explicaremos sólo las líneas de código que no hayan sido vistas a detalle en partes anteriores del tutorial: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #include #include #include #include #include <QObject> <QApplication> <QDialog> <QHBoxLayout> <QPushButton> int main(int argc. Solicitar confirmación para realizar alguna acción como borrar o guardar un archivo. ventana->show(). caracteres propios del español como la ñ. QDialog es una clase que representa un diálogo de aplicación. en nuestro caso. QDialog *ventana = new QDialog(). Solicitar información. layout->addWidget(boton2). QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2")). Algunos de sus usos son: • • • Informar al usuario sobre la ocurrencia de algún evento relevante como una notificación al terminar un proceso o un error al realizarlo. return app. ventana->setWindowTitle("QHBoxLayout"). como la palabra a buscar en un diálogo de buscar y reemplazar. QObject nos proveerá de la función trUtf8() necesaria para escribir cadenas con caracteres Unicode. } Las líneas 1 a 5 importan las bibliotecas necesarias para esta aplicación. . ventana->setLayout(layout). Utilizamos un diálogo en lugar de una ventana principal buscando mantener la simplicidad del ejemplo.

En la línea 17 establecemos nuestro layout como el principal de la ventana. un entero que indica el indice de “flexibilidad” (stretch) del widget y un elemento de la enumeración Qt::Alignment. En las líneas 17 a 19 colocamos los botones dentro de nuestro layout mediante la función addWidget(QWidget *widget. En las líneas 11 a 13 creamos un nuevo diálogo. es relativo al stretch indicado en los otros widgets que están dentro del layout. QHBoxLayout *layout = new QHBoxLayout(). 18 ventana->setWindowTitle("QHBoxLayout"). Y por último en la línea 18 indicamos el título que queremos que muestre nuestra ventana. int stretch=0. La enumeración Qt:Alignment indica la alineación que tendrá el widget y puede tener los siguiente valores: • • • Horizontales: Qt::AlignLeft (izquierda). es decir el que indicará como se muestran los widgets en esa ventana. QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1")). . Las líneas 14 y 15 crean los otros botones de la misma forma. Si queremos invertir el orden de los widgets podemos escribir las instrucciones en orden inverso o podemos indicar que nuestros widgets se añadan de derecha a izquierda con la instrucción setDirection(QBoxLayout:RightToLeft) 17 ventana->setLayout(layout). de manera vertical. layout->addWidget(boton3). El stretch indica la proporción de espacio disponible en el layout que el widget ocupará. en este caso el constructor del botón es el único que recibe parámetros. 17 18 19 layout->addWidget(boton1). layout y botón mediante la sentencia new para ejecutar el constructor de cada clase. entre mayor sea el valor de stretch mayor será el espacio que ocupará el widget. QPushButton es una clase que representa a un botón estándar. Qt::AlignJustify (justificado) Verticales:Qt::AlignTop (superior/arriba). Qt::Alignment aling=0) Esta función recibe como parámetros un apuntador al widget que deseamos agregar. este parámetro es una cadena de texto que contenga la etiqueta que debe mostrar el botón. Qt::AlignBottom (inferior/abajo). los últimos dos parámetros pueden omitirse y en caso de hacerlo se les asiga el valor de cero.QHBoxLayout es una clase que representa a nuestro layout horizontal. 11 12 13 QDialog *ventana = new QDialog(). Qt::AlignRight (derecha). layout->addWidget(boton2). QVBoxLayout Nos permite ordenar los widgets en columnas. Qt::AlignVCenter (centrado verticalmente) Bidimensionales:Qt::AlignCenter (centrado horizontal y verticalmente) Los widgets se colocan en el orden en que se ejecutan las instrucciones. si no se especifica se utilizará el del nombre del archivo. Qt::AlignHCenter (centrado horizontalmente). es decir. de forma que en este layout el primer botón de izquierda a derecha (la dirección por default de este layout) es boton1 seguido de boton2 y por último boton3.

layout->addWidget(boton2). QGridLayout Nos permite ordenar los widgets a manera de tabla o rejilla. ventana->setWindowTitle("QVBoxLayout"). de arriba hacia abajo. lo único que cambia es que nuestro objeto layout ahora es de tipo QVBoxLayout. QDialog *ventana = new QDialog(). layout->addWidget(boton1). QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1")). . Si lo comparamos con el ejemplo anterior del QHBoxLayout.exec(). char *argv[]) { QApplication app(argc. argv). } return app. Si queremos invertir el orden en que se agregan los widgets al layout utilizamos la instrucción setDirection(QBoxLayout::BottomToTop). QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3")). layout->addWidget(boton3). ventana->show(). QVBoxLayout *layout = new QVBoxLayout(). el resultado de esto es que los widgets ahora se organizan de acuerdo a las reglas de este layout. es decir. QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2")). ventana->setLayout(layout).El código para crear una aplicación con un layout como el de la imagen anterior es el siguiente: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #include #include #include #include #include <QObject> <QApplication> <QDialog> <QVBoxLayout> <QPushButton> int main(int argc.

1). 1). 0). Nuevamente cambiamos el tipo de nuestro objeto layout. char *argv[]) { QApplication app(argc. ahora será de la clase QGridLayout. ventana->setLayout(layout). 0. 0). QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3")). Qt::Alignment align=0). QDialog *ventana = new QDialog(). 1. 0. layout->addWidget(boton1. 17 18 19 layout->addWidget(boton1. QGridLayout *layout = new QGridLayout(). de la celda sobre la cual queremos agregar el widget en cuestión y un valor de la enumeración Qt::Alignment. dos enteros que indican la fila y columna. ventana->setWindowTitle("QGridLayout"). layout->addWidget(boton3. layout->addWidget(boton2.exec(). 1. QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2")). 0. layout->addWidget(boton3. QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1")). ventana->show().1 y 1.0. posición 0. Luego colocamos al boton2 y boton3 en las celdas 0. argv). int columna. La forma de agregar los widgets a este tipo de layout es ligeramente distinta. 0). columna=0. 0. es decir.El código para crear una aplicación con un layout similar al de la imagen es: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #include #include #include #include #include <QObject> <QApplication> <QDialog> <QGridLayout> <QPushButton> int main(int argc. int fila. respectivamente. Esta función recibe como parámetros un apuntador al widget que deseamos agregar. layout->addWidget(boton2. Las filas y columnas comienzan a contarse desde cero de tal manera que la primera celda en la esquina superior izquierda tiene la posición fila=0. .0 respectivamente. ahora lo haremos mediante la función addWidget(QWidget *widget. } return app. En la línea 17 colocamos al primer botón en la celda definida por la intersección de la fila cero con la columna cero. 0).

pero al ejecutar el programa obtendríamos el mismo resultado que se muestra en la imagen pasada. layout->setRowMinimumHeight(2. estas tienen un alto y ancho de cero ya que no hemos colocado ningún widget en ellas ni hemos establecido el tamaño mínimo para ellas. layout->addWidget(boton3. 60). 20). 1). 1. int anchoMinimo ) setRowMinimumHeight(int fila. 0. 0. layout->addWidget(boton2. 1. Podemos establecer el ancho mínimo de una columna y el alto mínimo de una fila con las funciones: setColumnMinimumWidth(int columna.El espacio vacío en la celda 1. 2. 0). Obtendríamos el siguiente resultado: Sin embargo habrá que tener en cuenta que las filas o columnas extras no serán visibles a menos que establezcamos el alto/ancho mínimo de cada fila/columna o que coloquemos un widget en la fila/columna correspondiente. layout->addWidget(boton3. 3. int altoMinimo) Por ejemplo si añadieramos los botones al layout mediante el siguiente código: layout->addWidget(boton1. 2). 3). en este caso dos. Se crearían cuatro filas y cuatro columnas. Esto ocurre debido a que aunque la fila y columna con el número dos existen. si añadieramos los botones al layout mediante las líneas layout->addWidget(boton1. en este último caso (que es lo que ha ocurrido en los dos ejemplos anteriores) el QGridLayout asigna automáticamente el alto/ancho mínimo de esta fila/columna con un valor igual al mínimo requerido por el widget en cuestión. Por ejemplo. es decir. Obtendríamos el siguiente resultado: . debido a la existencia de las filas y columnas uno y cero. 0).1 se genera debido a que el QGridLayout crea tantas divisiones de filas y columnas como el número máximo de filas o columnas que indiquemos. una fila y columna más que en el ejemplo anterior. 1). Pero si después de la línea dónde agregamos el último botón al layout añadimos las líneas: layout->setColumnMinimumWidth(2. layout->addWidget(boton2.

es decir. layout->addRow(QObject::trUtf8("Botón 2:"). ventana->show(). QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3")).exec().QFormLayout Nos permite ordenar los widgets de manera similar a la de formulario web. ventana->setLayout(layout). boton3). ventana->setWindowTitle("QVBoxLayout"). los cuales normalmente son una etiqueta y un campo de texto. . } return app. boton2). filas compuestas por un par de widgets. layout->addRow(QObject::trUtf8("Botón 1:"). char *argv[]) { QApplication app(argc. layout->addRow(QObject::trUtf8("Botón 3:"). QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1")). argv). QDialog *ventana = new QDialog(). El código para crear una aplicación con un layout como el de la imagen anterior es el siguiente: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #include #include #include #include #include <QObject> <QApplication> <QDialog> <QFormLayout> <QPushButton> int main(int argc. boton1). QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2")). QVBoxLayout *layout = new QVBoxLayout().

Layouts Anidados Normalmente las aplicaciones que desarrollemos no tendrán una interfaz tan sencilla como para ser diseñadas utilizando sólo un layout. QWidget *widget). de la siguiente forma addLayout(QLayout *layout. boton3). es decir. int fila. A continuación mostraremos un sencillo ejemplo de anidación de layouts para crear una interfaz de usuario muy conocida: un formulario de inicio de sesión. para QHBoxLayout y QVBoxLayout la función es: addLayout(QLayout *layout. int columna. utilizamos la versión sobrecargada de addRow() en la que el primer parámetro es una cadena de texto con el fin de ahorrar código. En las líneas 17 a 19 agregamos los widgets al layout. boton2). Qt::Alignment align=0) Para el QFormLayout se utiliza una función sobrecargada de addRow(). boton1). 18 layout->addRow(QObject::trUtf8("Botón 2:"). por ejemplo. La función que nos permite anidar layouts depende del tipo de layout que estemos utilizando. aunque también es posible utilizar la siguiente función sobre cargada. QLayout *layout) Está función recibe como parámetros un apuntador a la etiqueta que contiene el texto que describe al layout o simplemente una QString con ese texto y un apuntador al layout que deseamos agregar. . 19 layout->addRow(QObject::trUtf8("Botón 3:").texto. addRow(QLayout *layout) Esta función recibe cómo parámetro un apuntador al layout que deseamos agregar. QWidget *widget) 17 layout->addRow(QObject::trUtf8("Botón 1:").En este caso nuestro layout será del tipo QFormLayout y para añadir widgets utilizarermos la función addRow(QLabel *etiqueta.texto. dependiendo de la apariencia que deseemos lograr: addRow(QLabel *label. QLayout *layout) addRow(QString &amp. con el fin de evitar crear una etiqueta para cada uno de los widgets que deseeemos agregar: addRow(const QString &amp. en una de las siguientes formas. un layout dentro de otro. para organizar los widgets de maneras más complejas utilizamos layouts anidados. en la creación de formularios para la solicitud de información (como un registro de usuarios o un formulario de comentarios) en dónde debemos de indicar que información debe de capturar el usuario en cada campo. int Qt::Alignment align=0) Para el QGridLayout además debemos especificar la fila y columna de la celda dónde deseamos agregar el layout. Este tipo de layout es muy útil. debido a que en este ejemplo no necesitamos que el texto de alguna fila cambie y por lo tanto no es necesario conservar un apuntador hacia las etiquetas.

layoutUsuario->addWidget(campoUsuario). QLineEdit *campoContrasenia = new QLineEdit().1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 #include #include #include #include #include #include #include <QApplication> <QHBoxLayout> <QVBoxLayout> <QLabel> <QLineEdit> <QPushButton> <QDialog> int main(int argc. layoutUsuario->addWidget(etiquetaUsuario). layoutPrincipal->addLayout(layoutUsuario). return app. char *argv[]) { QApplication app(argc. QLabel *etiquetaContrasenia = new QLabel("Password"). layoutPrincipal->addLayout(layoutBotones). QPushButton *botonAceptar = new QPushButton("Aceptar"). layoutContrasenia->addWidget(campoContrasenia). QHBoxLayout *layoutBotones = new QHBoxLayout(). layoutBotones->addWidget(botonCancelar). layoutContrasenia->addWidget(etiquetaContrasenia). } Al ejecutar este código obtendremos una salida parecida a la siguiente imagen . ventana->setWindowTitle(QObject::trUtf8("Iniciar Sesión")). argv). QVBoxLayout *layoutPrincipal = new QVBoxLayout(). layoutBotones->addStretch(). ventana->show(). QPushButton *botonCancelar = new QPushButton("Cancelar"). QDialog *ventana = new QDialog(). ventana->setLayout(layoutPrincipal). layoutBotones->addWidget(botonAceptar).exec(). layoutPrincipal->addLayout(layoutContrasenia). QHBoxLayout *layoutUsuario = new QHBoxLayout(). QLineEdit *campoUsuario = new QLineEdit(). QHBoxLayout *layoutContrasenia = new QHBoxLayout(). QLabel *etiquetaUsuario = new QLabel("Usuario").

mientras que en las líneas 13 a 26 creamos los widgets que utilizaremos. char *argv[]) { QApplication app(argc. A partir de la línea 38 agregamos en el layout principal (el cual es un QVBoxLayout) el layout que contiene los controles de usuario. QLineEdit *campoContrasenia = new QLineEdit(). Para el ejemplo anterior un mejor diseño (considerando que requiere menos líneas) puede lograrse utilizando un QFormLayout en lugar de los primeros dos QHBoxLayout. 41 42 ventana->setLayout(layoutPrincipal). QPushButton *botonCancelar = new QPushButton("Cancelar"). QLineEdit *campoUsuario = new QLineEdit(). Con el fin de lograr una interfaz más agradable alineamos los botones a la derecha insertando un espacio en blanco al principio del QHBoxLayout mediante la instrucción addStretch(int stretch=0). lo mismo hacemos para los campos de contraseña y para los botones. En las líneas 28 y 29 colocamos los widgets del campo usuario en un QHBoxLayout. Es posible diseñar una interfaz de usuario utilizando distintas combinaciones de layouts. 40 layoutPrincipal->addLayout(layoutBotones). QDialog *ventana = new QDialog(). 38 layoutPrincipal->addLayout(layoutUsuario). QPushButton *botonAceptar = new QPushButton("Aceptar"). 39 layoutPrincipal->addLayout(layoutContrasenia). argv). QFormLayout *layoutPrincipal = new QFormLayout(). es cuestión de tiempo y experiencia poder encontrar aquella que sea más fácil y rápida de crear o la que se adapte mejor a las necesidades de nuestra aplicación.En las líneas 1 a 7 incluimos los archivos de cabecera necesarios para desarrollar la aplicación. seguido por el que contiene los controles de contraseña y por último el que contiene los botones y finalmente en la línea 40 establecemos el layout principal de nuestra apliciación. El código es el siguiente: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #include #include #include #include #include #include <QApplication> <QHBoxLayout> <QFormLayout> <QLineEdit> <QPushButton> <QDialog> int main(int argc. . QHBoxLayout *layoutBotones = new QHBoxLayout().

return app. el segundo es extraerlo a la carpeta donde tendremos todos nuestros archivos de origen. sin embargo “simula” estarlo.tar. layoutPrincipal->addRow(QString("Usuario").gz tar xvfj gtk+-2. layoutBotones->addWidget(botonCancelar).0. Instalacion de Gtk con Gestor de paquetes.0. esto lo hacemos con los comandos: tar xvfz gtk+-2. ventana->setLayout(layoutPrincipal). campoContrasenia).tar.21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 layoutBotones->addStretch(). layoutPrincipal->addRow(QString("Password"). layoutBotones->addWidget(botonAceptar). al estar programado en C es bastante flexible con otros lenguajes y facilmente adaptable. Instalar Gtk con un gestor de paquetes como es el Synaptic de Ubuntu es bastante sencillo ya que solamente necesitamos localizar la libreria con el nombre de “libgtk2. de manera parecida a Qt. layoutPrincipal->addRow(layoutBotones).org de la sección de descargas de la misma. Tutorial Gtk+ 2: Instalacion de Gtk+ 2 en Linux Gtk+ es.0. } Al ejecutar este código obtenemos una salida similar a la siguiente La cual tiene una apariencia muy similar a la del ejemplo anterior y que en mi opinión incluso se ve mejor. la interfaz grafica de Gnome (el entorno de escritorio de Ubuntu) esta creada con Gtk+. no se encuentra orientado a objetos. ventana->setWindowFlags(Qt::Window). ventana->show().0-dev” y nuestro magico gestor de paquetes resolvera las dependencias de librerias necesarias para que todo funcione correctamente. escrito completamente en C. ventana->setWindowTitle(QObject::trUtf8("Iniciar Sesión")).exec(). pero lo importante es que el número de líneas utilizadas se redujo un poco. pero es de suponer que en una aplicación de mayor tamaño el ahorro de líneas de código también será mayor.0.gtk. Instalacion de Gtk+ con paquetes de distribución (O la ruta escénica) El primer paso es conseguir el paquete de distribución de la página www. un conjunto de herramientas usado para crear interfaz gráfica de usuario. campoUsuario).bz2 .

./configure --prefix=/opt/gtk Despues de hacer esto simplemente hacemos uso de los archivos recien creados e instalamos con los siguientes comandos: make make install Despues de esto puede que sea necesario hacerle saber al sistema operativo acerca de las nuevas librerias dinámicas esto lo hacemos ejecutando: ldconfig Una vez hecho esto al fin hemos conseguido instalar Gtk+ en uestra maquina con Linux. la manera mas fácil de comprobar que nuestro Gtk+ fue instalado con exito es ejecutar en nuestra liena de comandos el demo que viene jutno con Gtk+: gtk-demo Con esto tenemos todo listo para crear nuestro “Hola Mundo” en Gtk+.Despues de hacer esto nos ubicamos en la carpeta donde se contienen todos los demas archivos y ejecutamos el script llamado configure el cual crea archivos makefile adecuados al sistema operativo. la manera mas comun de hacer esto es: . lo mas probable es que se trate de alguna libreria de la cual depende gtk para compilar/ejecutar. si ocurrel agun fallo a pesar de que ya se encuentra instalado Gtk+.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->