Archivo de Diciembre 2007

Ingresa tu edad Qt4

Diciembre 5, 2007

Es esta sección vamos a crear una pequeña aplicación, que demuestra cómo utilizar layouts para manejar la geometría de los widgets en una ventana y el modo de utilizar señales y slots para sincronizar dos widgets.

La aplicación pregunta al usuario su edad y el podrá responder utilizando una spin box o un slider.

La aplicación consta de tres Widgets: un QSpinBox, un QSlider, y un QWidget. El QWidget es la aplicación de la ventana principal. El QSpinBox y la QSlider se encuentran en el interior de la QWidget.

Alternativamente podemos decir que QWidget es padre de QSpinBox y de QSlider. El QWidget no tiene padre, porque se está utilizando como un nivel superior máximo de la ventana.

El código que usaremos para esta aplicación es el siguiente.

1 #include <QApplication>
2 #include <QHBoxLayout>
3 #include <QSlider>
4 #include <QSpinBox>
5 int main(int argc, char *argv[])
6 {
7 QApplication app(argc, argv);
8 QWidget *window = new QWidget;
9 window->setWindowTitle(“Ingresa tu edad”);
10 QSpinBox *spinBox = new QSpinBox;
11 QSlider *slider = new QSlider(Qt::Horizontal);
12 spinBox->setRange(0, 130);
13 slider->setRange(0, 130);
14 QObject::connect(spinBox, SIGNAL(valueChanged(int)),
15 slider, SLOT(setValue(int)));
16 QObject::connect(slider, SIGNAL(valueChanged(int)),
17 spinBox, SLOT(setValue(int)));
18 spinBox->setValue(35);
19 QHBoxLayout *layout = new QHBoxLayout;
20 layout->addWidget(spinBox);
21 layout->addWidget(slider);
22 window->setLayout(layout);
23 window->show();
24 return app.exec();
25 }

Línea 8 y 9 setWindowTitle() nos permite editar el texto que será visible en la Barra de Titulo de nuestra aplicación.

Lineas 10 y 11 crean una QSpinBox y un QSlider, mientras que las líneas 12 y 13 le dice el valor máximo y mínimo que mostrarán. Asumo que una persona vive máximo y exageradamente 130 años (yo solo sé de personas que han vivido hasta 116 años y eso porque les hacen reportajes en noticieros nacionales).

Las lineas 14 y 17 que contienen QObject::connect() garantizan que la QSpinBox y el QSlider están sincronizadas y que siempre tendrán el mismo valor. Cuando algún valor del los Widgets cambie se enviara una señal de cambio mediante valueChanged(int) mientras que el valor de el otro Widget cambiará debido a esa señal mediante setValue(int).

Línea 18 establece el valor 35 por default. Cuando esto sucede, la Spin Box emite la señal valueChanged(int) con int establece el valor 35. Este valor es pasado al slot de setValue(int) del Slider. El Slider entonces emite la señal valueChanged(int), porque su propio valor a cambiado activando el slot setValue(int) de la Spin Box. Pero en este punto, setValue(int) no emite ninguna señal, ya que el valor de la Spin Box ya es 35, esto previene una repetición infinita.

Lineas 19 a 22 en donde establezco la Spin Box y el Slider, uso un Layout Manager. Un Layout Manager es un objeto que establece el tamaño y la posición de los widgets que están bajo su responsabilidad Qt4 tiene tres 3 principales clases de Layout Manager:

  • QHBoxLayout Establece widgets horizontalmente de izquierda a derecha (derecha a izquierda para otras culturas).
  • QVBoxLayout Establece widgets verticalmente de arriba a abajo.
  • QGridLayout Establece widgets en una cuadrícula.

La llamada a QWidget::setLayout() en la línea 22 instala el Layout Manager sobre la ventana.. Detras del proceso, la QSpinBox y QSlider son nuevamente llamados a ser niños de el widget en la que el layout es instalado, y por esta rason no necesitamos especificar un parentezco cuando construimos un widget que se pondrá en un layout.

A pesar de que no establecimos la posición o el tamaño de cualquier widget, la QSpinBox y el QSlider aparecerá bien establecido de un lado al otro. Esto es porque QHBox-Layout automáticamente asignará posiciones y tamaños razonablesa los widgets. El Layout Manager nos libera de la ardua tarea de codificación de las posiciones en nuestra pantalla de las aplicaciones y asegura el tamaño de las ventanas sin problemas.

La imagen de nuestra aplicación es la siguiente.

ingresa-edad.png

Haciendo conexiones en Qt4

Diciembre 4, 2007

El segundo ejemplo muestra como responderá una aplicacion a las acciones que le demos. La aplicación consiste en un botón que el usuario podrá presionar y salir de la aplicacion. El código es muy semejante a HelloQt4 a excepción porque usaremos la orden QPushButton en lugar de QLabel  y relacionaremos el click que se le dará al botón con una parte del código.

 1 #include <QApplication>
2 #include <QPushButton>
3 int main(int argc, char *argv[])
4 {
5     QApplication app(argc, argv);
6     QPushButton *button = new QPushButton(“Quit”);
7     QObject::connect(button, SIGNAL(clicked()),
8                      &app, SLOT(quit()));
9     button->show();
10     return app.exec();
11 }

Los Widgets emiten señales para indicar que una acción del usuario o un cambio de estado se ha producido. Por ejemplo, QPushButton emite un clicked () que es una señal cuando el usuario hace clic en el botón. Una señal puede ser conectada a una función (llamada slot), de manera que cuando se emite la señal, el slot se ejecuta automáticamente. En nuestro ejemplo, conectamos la señal del clic del botón ( clicked () )  al slot del objeto quit () de QApplication.  Los macros  (conjunto de instrucciones) SIGNAL () y SLOT () son parte de la sintaxis, que se explican con más detalle.

La aplicación quedaría de la siguiente manera.

conexiones

Otro ejemplo Qt4 más divertido

Diciembre 4, 2007

Bien, usaremos el código del anterior post, pero ahora le haremos unas sencillas modificaciones para hacerlo más divertido.

#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QLabel *label = new QLabel(“<h2><i>Hello</i> “
“<font color=red>Qt!</font></h2>”);
label->show();
return app.exec();
}

Como podrán darse cuenta, cambiamos la línea que contiene

QLabel *label = new QLabel(“Hello Qt!”);

por

QLabel *label = new QLabel(“<h2><i>Hello</i> “
“<font color=red>Qt!</font></h2>”);

Con esta simple modificación obtuvimos la siguiente aplicación.

helloqt-fun.png