Hola Nena Qt

El Clásico Ejemplo


Hoy el clásico y muy básico ejemplo del “hola Nena” (Hola Mundo) en Qt. En este tutorial veremos la forma de crear un proyecto con interfaz, modificar y agregar elementos gráficos a la misma, crear slots y realizar las conexiones respectivas para hacer un widget funcional.

Primero que todo debemos crear abrir el Qt Creator y crear un nuevo proyecto:
File -> New File or Project…

Seleccionamos “Qt C++ Project” y “Qt Gui Application”. Damos un nombre a nuestro proyecto (En mi caso Hola_NENA), recuerda no usar nombres con espacios, y seleccionamos el directorio de trabajo. Seguidamente seleccionaremos la clase base y los nombres de los archivos de trabajo, los nombres pueden ser a criterio propio, pero para nuestro ejemplo la case base será QWidget, tendremos algo parecido a esto.

Pulsamos en siguiente y nos preguntará si queremos agregar nuestro proyecto a alguna versión de control, de momento no lo haremos, lo dejaremos para otro tutorial. Damos click en finalizar y Qt Creator cargará automáticamente el proyecto, y genera los archivos necesarios con las declaraciones pertinentes.

El texto que ven al principio del archivo el la nota de COPYING y puede ser indicada para cada proyecto indicando el archivo en el que esta almacenada (en forma de texto plano) la nota, esto lo pueden hacer en Tools -> Options -> C++ -> Licence template:.

Primero que todo abriremos el holawidget.ui y Qt Creator cargara el diseñador de interfaces (Qt Designer), desde allí agregaremos (en forma gráfica) todos los componentes de nuestro proyecto (el form de nuestra interfaz se encuentra en la ventana central de este editor). Desde el panel izquierdo (Widget Box) buscaremos los componentes y (drag and drop) arrastramos y soltamos dentro de nuestro formulario, en el panel derecho (Object Inspector) podrás ver la distribución de los elementos gráficos dentro de la interfaz, bajo este encontraras las propiedades (Property Editor)que pueden ser editadas ya sea desde esta caja o desde el código del proyecto, bajo la ventana central estará el editor de señales (Signals & Slots Editor) y el editor de acciones (Action Editor).

Agregaremos algunos elementos gráficos para obtener algo como los siguiente.

Se han insertado un Line Edit, un Label y dos Push Button, luego seleccionando el widget (no los elementos), y damos click en Lay Out in a Grid ó Tools -> Form Editor -> Lay Out in a Grid, luego click en Adjust Size ó Tools -> Form Editor -> Adjust Size, para obtener algo como esto.

Podemos editar las propiedades de cada uno de los elementos mientras estos están seleccionados, para el label y los Push Button ajustaremos la variable text ya sea dando doble click sobre este o cambiando esta en el Property Editor, también modificaremos la variable objectName de los mismos.

Label::text = “Hola Nena”
pushButton::text = “&Cerrar”
pushButton_2::text = “&Limpiar”

Para el botón con el texto Limpiar, pondremos el nombre (objectName) LimpiarButton y para el botón Cerrar el nombre CerrarButton.

Ahora aremos unas modificaciones al código para crear los slots y conexiones necesarias, en el archivo holawidget.h agregaremos dentro de la declaración de la clase las siguientes lineas:

private slots:
void LimpiarClicked();

Ahora en el archivo holawidget.cpp agregaremos la definición de la función

void HolaWidget::LimpiarClicked()
{
ui->lineEdit->clear();
ui->label->setText(tr("Hola Nena"));
}

Con lo anterior le indicamos al programa que cuando se ejecute esta función, primero que todo limpie el contenido del lineEdit y luego defina el texto del label como “Hola Nena”.

También modificamos la definición del constructor donde (al final del mismo) agregamos el siguiente código

connect(ui->LimpiarButton, SIGNAL(clicked()), this, SLOT(LimpiarClicked()));
connect(ui->lineEdit, SIGNAL(textChanged(QString)), ui->label, SLOT(setText(QString)));
connect(ui->CerrarButton, SIGNAL(clicked()), this, SLOT(close()));

La primer linea conecta la señal del PushButton LimpiarButton, clicked, a un slot alojado en el objeto HolaWidget (this) con nombre LimpiarClicked(); La segunda linea conecta la señal textChanged(QString) del lineEdit, que envía como parámetro un QString al slot alojado en el label, de nombre setText(QString), el cual recibe también como parámetro un QString, de tal manera que cuando el texto del lineEdit cambie inmediatamente se la asignará el label; Y finalmente la tercera conecta el PushButton CerrarButton con el objeto, haciendo que este se cierre al dar click sobre el botón cerrar.

Ahora lo único que tenemos que hacer es compilar y correr.

Esto fue todo por hoy, espero este corto y básico tutorial sea de utilidad para las personas que apenas se inician en el mundo de la programación con Qt.

Anuncios

One response to “Hola Nena Qt

Tu opinión nunca está de más...

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: