Anecdotas:Implementando Una Sumadora en Qt Creator

Anécdotas de programación | www.group64bits.co.cc | Kamilo Cervantes S.

Anécdotas de programación

Implementando una sumadora en Qt CreatorResumen: A continuación se muestra el proceso de implementación de una sumadora usando Qt

Creator y C++. El proyecto aunque muy sencillo cuenta con una característica muy importante: opera

tanto en el pc de escritorio común como en plataformas móviles. Es un inicio para familiarizarse con el

desarrollo de aplicaciones móviles con Qt y C++.

Figura 1. En la imagen se aprecia el resultado final: La misma aplicación ejecutada en el pc y en el simulador de un Nokia N900 (el cual es proporcionado por Nokia como plugin para Qt Creator).

Creando el proyecto

Lo primero, crear el proyecto nuevo. Para ello le damos click en File > New File or Project.

Luego aparece una ventana para configurar el nuevo proyecto, seleccionar Qt C++ Project en la

columna izquierda y Qt Gui application en la columna derecha y click en Choose.

Ahora debemos asignarle el nombre del proyecto y la ubicación donde va a quedar guardado, una vez


hecho esto hacer click en next >.

En la siguiente pantalla podemos elegir las versiones de Qt sobre las cuales vamos a trabajar. En mi

caso tengo la version desktop (viene por defecto) y la version para móviles (despues de haber instalado

el Nokia Qt SDK), se eligen las dos para que soporte tanto pc como móviles con Symbian o Maemo.

Luego dar click en Next >.

Figura 2. Seleccionando las versiones de Qt.

En la pantalla siguiente se puede decidir el nombre de la clase principal y de la ventana, esto se puede

dejar como viene por defecto para efectos de este proyecto. Dar click en Next >.

La última pantalla muestra el resumen de los cambios que se van a hacer al proyecto y la opción de

agregar el proyecto a un sistema de control de versiones como Mercurial o Git. En mi caso lo he dejado

como viene por defecto. Dar click en Finish.


Creando la interfaz de usuario

Al crear el proyecto lo primero que aparece es la ventana de la aplicación lista para agregarle

componentes.

Figura 3. Trabajando en la GUI.

Para la sumadora necesitamos dos campos de texto para introducir los valores a sumar y un label para

cada campo de texto que indique alguna información para el usuario relacionada con el campo de texto.

Tambien se necesita un botón y un label que muestre el resultado de la suma.

Para agregar un componente se arrastra el componente necesario de la barra izquierda y se suelta sobre

la ventana en la vista de diseño. Para el caso agregamos 3 Label, 2 Line Edit y 1 Push Button.

Una vez agregados y ubicados como se desea (tomar como referencia la Fig. 1), es recomendable hacer

dos cosas: poner nombres a los componentes y asignar un layout a la ventana. Lo primero es para

poder recordar los nombres de los componentes con facilidad al momento de escribir el código de la


aplicación. Lo segundo para que se vean mejor distribuídos los componentes de la ventana.

Para cambiar el nombre de variable de un componente se debe hacer lo siguiente: dar click derecho

sobre el componente y seleccionar la opción change objectName. Le cambiamos el nombre a los

importantes: Los campos de texto, el botón y el label que muestra el resultado de la suma.

Tambien se debe cambiar el texto de los labels y del botón. Para hacer esto se da click derecho sobre el

componente y se selecciona la opción change rich text para los labels y change text para el botón.

Para asignar un layout a la ventana se da click derecho sobre la ventana, en la opción Lay Out hay

varias opciones. En este caso se ha escogido Form Layout, la cual se caracteriza por poner los

elementos en dos columnas.

Figura 4. Se muestran en rojo los nombres de las variables de los componentes

Codificando la suma

En C++ se usa la programación orientada a objetos por lo tanto se pueden crear clases, métodos,

atributos, etc. Sin embargo, una clase c++ esta dividida en dos archivos con el mismo nombre pero

diferente extensión: el header y el cpp. El primero siempre tiene la extension .h y en este archivo se


define la estructura objectual de la clase, es decir es aquí donde se define la clase, los métodos y

atributos sin implementación, etc. Este archivo se importa mediante un include en el archivo .cpp, el

cual contiene la implementación de los métodos definidos en el header.

Necesitamos definir dos atributos que serian los valores a sumar y un método que haga la suma.

-- archivo mainwindow.h

#ifndef MAINWINDOW_H#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui { class MainWindow;}

class MainWindow : public QMainWindow{ Q_OBJECT

public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); void setX(int val); void setY(int val); int getX(); int getY(); int suma();

private: Ui::MainWindow *ui; int x,y; //Atributos de la suma

private slots: void sumar(); //acción de la señal onclick del botón sumar};

#endif // MAINWINDOW_H

A la plantilla por defecto se le han agregado dos atributos x,y en la zona privada, los métodos set y get

de los atributos en la zona pública y un slot privado para el botón sumar. El slot define la

implementación de la señal del botón al hacer click sobre éste.


-- archivo mainwindow.cpp

#include "mainwindow.h"#include "ui_mainwindow.h"#include "stdio.h"#include "QString"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow){ ui->setupUi(this);}

MainWindow::~MainWindow(){ delete ui;}

void MainWindow::setX(int val){ MainWindow::x = val;}

void MainWindow::setY(int val){ MainWindow::y = val;}

int MainWindow::getX(){ return MainWindow::x;}

int MainWindow::getY(){ return MainWindow::y;}

int MainWindow::suma(){ return MainWindow::x + MainWindow::y;}

void MainWindow::sumar(){ int x = ui->inputx->text().toInt(); int y = ui->inputy->text().toInt(); MainWindow::setX(x); MainWindow::setY(y); int suma = MainWindow::suma(); ui->resultado->setText(QString::number(suma));

}


Se puede observar en este archivo la implementación de los métodos definidos en el header. Estan los

set y get de los atributos, el método suma() devuelve la suma de los atributos y el método sumar()

asigna a los atributos los valores ingresados en los campos de texto, luego asigna el resultado de la

suma al label resultado.

Con ésto lo unico que falta es poner la señal en el botón. Esto se hace seleccionando el botón e ir a la

opción edit > edit signals/slots luego se da click en el botón y se suelta sobre la misma

ventana. Aparecerá una ventana para configurar la señal. En la columna izquierda se selecciona

clicked() que es la señal que sucede al hacer click. Luego en la columna derecha se da click sobre el

botón edit. En la ventana emergente hay una zona de slots y otra de signals. Como vamos a agregar un

slot entonces le damos en el signo + que corresponde a slots y le ponemos el nombre del slot que

habiamos creado en el código, es decir: sumar(). Luego click en ok, ahora aparece sumar() en la lista

de la columna derecha, la seleccionamos y click en ok.

Probando la aplicación

Para ejecutar la aplicación debe hacer click en el triángulo verde que aparece en la barra derecha. Para

seleccionar la plataforma a usar se hace click sobre la opción debug. Si el simulador de Qt ha sido

instalado, ahi aparecerán las dos plataformas y se puede intercambiar entre una y otra.

Exclusivo para De Códigos

Anecdotas:Implementando Una Sumadora en Qt Creator

Documents

Transcript of Anecdotas:Implementando Una Sumadora en Qt Creator