PDF de programación - El tutorial del desarrollo visual

El tutorial del desarrollo visual
Antonio Larrosa Jiménez

Traductor: Miguel Revilla Rodríguez
Revision 1.00.01 (2003-12-27)

Copyright © 2003 Antonio Larrosa

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU
Free Documentation License, Version 1.1 or any later version published by the Free Software
Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts. A
copy of the license is included in the section entitled "GNU Free Documentation License".

Visual Tutorial es un tutorial que mostrará al lector la forma de crear aplicaciones visualmente
utilizando KDevelop y Qt Designer. Crearemos una aplicación que nos permitirá abrir una imagen y
teñirla de diferentes colores. Posteriormente cambiaremos el interfaz para permitir al usuario
seleccionar también la intensidad de un canal alfa.

Table of Contents

1. Introducción
2. Cómo descargar e iniciar KDevelop y Designer

Requisitos
Cómo ejecutar KDevelop

3. Creación de la aplicación

Creación de un nuevo proyecto
Cómo compilar lo generado por KDevelop
Comprensión de la estructura básica

4. Primeros cambios al código fuente

Eliminación de las partes que no utilizaremos

5. Uso del diseñador

Cómo añadir un archivo .ui
Uso del diseñador
Integración del diseñador con KDevelop

6. Cómo hacer que el widget generado por el diseñador funcione

Añadir nombres, slots y conexiones
Implementación de los slots

7. Eliminación del parpadeo utilizando un temporizador
8. Carga y manipulación de un mapa de pixels

Carga de un mapa de pixels
Mezcla de colores

9. Modificación del interfaz de usuario existente

Añadir el deslizador de alfa
Añadir el botón de selección de color

10. Añadir las implementaciones de los nuevos métodos

Soporte para el deslizador alfa
Soporte para el botón de color

11. Algunos cambios aquí y allá

Corrección del botón de color.
Corrección de mapa de pixels inicial

12. Añadir más características

Posibilidad de guardar el resultado
Añadir soporte para arratrar y soltar

A. Créditos y licencia

Chapter 1. Introducción

Visual Tutorial es un tutorial que mostrará al lector la forma de crear aplicaciones visualmente
utilizando KDevelop y Qt Designer. Crearemos una aplicación que nos permitirá abrir una imagen y
teñirla de diferentes colores. Posteriormente cambiaremos el interfaz para permitir al usuario
seleccionar también la intensidad de un canal alfa.

Este tutorial complementa mi otro trabajo sobre desarrollo en KDE, que puede encontrar en
developer.kde.org. Además hay otro excelente tutorial sobre KDevelop y Designer, realizado por
Anne-Marie Mahfouf que se encuentra en women.kde.org. Sobre el orden en el que se deberían leer
los tutoriales mencionados y estos otros, yo únicamente diré una cosa: cuantos más lea, mejor :), y si
también consulta la documentación de las clases que utiliza, mejor que mejor.

Si desea descargar el código de este tutorial junto a la documentación y demás elementos, puede
hacerlo en la página web. Puede seguir este tutorial haciendolo todo usted mismo de la forma que se
indica, o puede descargar cada paso del tutorial de esa página. En el segundo caso, obtendrá cada paso
en un directorio diferente y tendrá que abrir diferentes proyectos de KDevelop para cada uno de ellos.

¿Listo? Vamos a empezar.

Chapter 2. Cómo descargar e iniciar KDevelop y Designer

Requisitos

En este tutorial necesitaremos, además del compilador, alguna otra aplicación como KDevelop o
Qt/Designer. Se dará cuenta de que KDevelop tiene una lista de requisitos y/o aplicaciones
recomendadas, así es que posible que también tenga que instalar esas.

Puede descargar KDevelop de www.kdevelop.org y muy probablemente su distribución incluya
Qt/Designer en algún paquete, normalmente denominado qt-devel, qt3-devel o qt-designer. Si no lo
encuentra, puede descargarlo de trolltech.com

Necesitará KDE 3.x, lo que significa que también le hará falta Qt 3.x. La última versión estable de
KDevelop en el momento de redacción de este texto es la 2.1.5, mientras que la versión de desarrollo
de KDevelop 3.0 (con nombre clave gideon) se encuentra en estado alpha3. Este documento trata
mayormente sobre gideon, pero también se puede utilizar como referencia en el manejo de KDevelop
2.1.5.

Cómo ejecutar KDevelop

Una vez que haya instalado todos los paquetes, puede iniciar gideon (kdevelop) desde el menú K o
desde una ventana de konsole. Es necesario configurar elementos básicos (como la ubicación de la
documentación, etc.). Para hacerlo, basta con que siga las instrucciones en pantalla.

Una vez terminada la configuración, podrá ver una ventana similar a esta:

Ahora ya estamos listos para desarrollar una aplicación.

Chapter 3. Creación de la aplicación

Creación de un nuevo proyecto

Ahora vamos a crear un nuevo proyecto para nuestra aplicación. Para hacerlo, seleccionamos
Proyecto/Nuevo proyecto. Se abrirá un asistente en el que seleccionaremos las opciones del proyecto.

Podemos utilizar KDevelop para desarrollar en C++, C, Java, Python o PHP. El asistente de "nuevo
proyecto" se puede utilizar para crear una aplicación sencilla que sirve como estructura de base para la
aplicación final. Si decide crear una aplicación C++, puede generar (en el momento de redacción de
este tutorial): una aplicación de KDE, una aplicación de KDE que utilice KParts, un módulo del
Centro de control, un servicio DCOP, un salvapantallas, una extensión KHTMLPart, un esclavo KIO
(implementación de un protocolo), un módulo de KOffice, una extensión de Kate, un applet de Kicker,
una extensión del panel de navegación de Konqueror, una aplicación KDE sencilla, un módulo de
KDevelop, varios tipos de aplicaciones Qt y una aplicación para terminal basada en C++.

Si decide crear una aplicación en C, KDevelop podrá generar la estructura para una aplicación para
GameBoyAdvance, una aplicación GNOME (sí, es posible utilizar KDevelop para crear aplicaciones
para GNOME), o símplemente una aplicación para terminal basada en C.

Si prefiere utilizar Java, KDevelop podrá ayudarle con las estructuras de un proyecto de Ant, una
aplicación de KDE o una extensión de KDevelop, todas ellas con Java (incluso podrá utilizar el
depurador de aplicaciones Java integrado). Por último, también puede utilizar el asistente para crear un
simple guión de PHP, una aplicación Python Qt o un sencillo guión de Python.

Al pinchar en el botón Siguiente, se mostrarán las opciones sobre el sistema de control de versiones
que utilizaremos en el proyecto. Para simplificar nuestro ejemplo, seleccionaremos Ninguno y
continuaremos en las siguientes páginas, donde podremos cambiar la plantilla de la cabecera de los
archivos .h y .cpp. Fíjese en que KDevelop ha utilizado el año actual, su nombre y su dirección de
correo electrónico completos, por lo que probablemente no necesitará modificar nada. Al menos
nosotros no modificaremos nada, así que bastará con pinchar en el botón Finalizar.

Ahora KDevelop generará el proyecto, y estaremos listos para comenzar a desarrollar nuestra
aplicación sobre la estructura básica.

La siguiente instantánea muestra una ventana vacía de KDevelop con el interfaz IDEAL. Puede
cambiar el interfaz de usuario y poner alguno de los modos clásicos a través del menú
Preferencias/Configurar Gideon, en la sección Interfaz de usuario, pero en este tutorial utilizaremos el
interfaz IDEAL. Tenga en cuenta que las características de KDevelop son independientes del interfaz
que se utilice, así que puede seleccionar aquel en el que se encuentre más cómodo.

Cómo compilar lo generado por KDevelop

Ahora que ya está hecha una buena parte de la aplicación, vamos a compilarla. Pinche en
Construir/Construir proyecto, tras una corta espera (y en el caso de que no se produzca ningún error
debido a la falta de alguno de los paquetes necesarios), obtendrá una aplicación compilada que podrá
ejecutar por medio de Construir/Ejecutar progama, de forma similar a lo mostrado en la siguiente
instantánea.

La aplicación también tiene los menús estándar, y un díalogo de preferencias preparado para que añada
las opciones que considere oportuno. Algo parecido a esto:

Comprensión de la estructura básica

Vamos a revisar ahora el código utilizado por KDevelop. Pinche en la etiqueta Clases que podrá
encontrar a la izquierda para abrir la lista de clases de nuestro proyecto.

Puede ver que nuestro proyecto tiene 5 clases, TheTinter (que hereda de KMainWindow),
TheTinterView (que es el widget central de la aplicación donde se mostrarán nuestros
documentos), TheTinterPreferences (el diálogo de preferencias), y
TheTinterPrefPageOne y TheTinterPrefPageTwo (que son dos páginas de configuración
para diferentes opciones del diálogo de preferencias).

En primer lugar, vamos a echar un vistazo a la clase TheTinter. Esta clase es la ventana principal
de nuestra aplicación y contiene el menú, las barras de herramientas, etc. TheTinter contiene
algunos métodos interesantes que sin duda utilizaremos:

load(const KURL &url) es el método al que se llamará cuando el usuario quiera cargar un
documento. Tenga en cuenta que en KDE se recomienda utilizar la clase KURL para almacenar la
url de un documento. De esta forma, no nos preocupará si el documento es local, está en un
servidor ftp, si se accede por ssh, etc. La biblioteca KIO se ocupará de todo.

readProperties(KConfig *) y saveProperties(KConfig *) se utilizan para
cargar y guardar el estado de la aplicación (por ejemplo, los documentos cargados) cuando se
abre o se cierra la sesión de KDE. De esa forma, los usuarios podrán cerrar la sesión y, cuando
vuelvan a acceder al sistema, encontrarán la aplicación en el mismo estado en que la dejaron.

setupActions() se utiliza para crear las acciones y conectarlas con nuestros slots (si no le
resultan familiares conceptos como señales o slots, puede consultar la documentación de Qt o mi
otro tutorial). Tenga en cuenta que la mayoría de las acc