Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

Desarrollo de Aplicaciones Interactivas

3 ITIS

Guin de prcticas
Programacin visual con Borland C++ Builder
DESCRIPCIN

Borland C++ Builder es un Entorno Integrado de Desarrollo o IDE (esto es,

editor + compilador + depurador) bastante completo, intuitivo, fcil de manejar y
eficiente, que permite el desarrollo rpido de aplicaciones en entornos MS
Windows. Otros entornos de desarrollo utilizan una estructura muy parecida.

Caractersticas fundamentales de Borland C++ Builder:

Utiliza el lenguaje de programacin orientado a objetos C++ (como su
nombre indica), con todas las ventajas que supone el uso de la OO.
Permite realizar programacin visual y programacin dirigida por eventos.
Caractersticas avanzadas de IDE: editor sensible a la sintaxis,
compleccin de cdigo, ayuda sensible al contexto, inspector de objetos,
compilador y depurador integrados, etc.

Programacin visual: el programador centra su atencin en disear el aspecto

grfico de la aplicacin, la distribucin de los elementos visuales (botones,
mens, cuadros de texto, etc.), la interaccin entre los mismos, los distintos tipos
de ventanas existentes, etc.

Un entorno de programacin visual se asemeja a un programa de dibujo, donde

la imagen es una ventana (o formulario), y los elementos del dibujo son
botones, etiquetas de texto, mens, etc. El programador dispone los elementos
con el mismo aspecto que tendr la aplicacin final (WYSIWYG, What You See
Is What You Get).

Programacin dirigida por eventos: el programador escribe el cdigo que se

ejecutar en respuesta a determinados eventos (pulsar un botn, elegir una
opcin del men, abrir o cerrar una ventana, etc.).

No existe la idea de programa principal, sino que el programador toma el

control cuando se dispara un evento. La labor del programador es asociar a
cada evento el comportamiento adecuado.

Todo lo anterior es soportado gracias a la programacin orientada a objetos.

La POO es fundamental aqu, no slo para conseguir programas de calidad, sino
por el propio entorno: las funcionalidades bsicas y los distintos elementos

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

visuales (formularios, botones, cuadros de dilogo, etc.) estn definidos como

clases y sus instancias son objetos.

No basta con saber C++. Conocer y saber utilizar las clases existentes (tanto los
componentes visuales como los no visuales) se vuelve casi tan importante como
conocer el lenguaje de programacin subyacente.

Usaremos Borland C++ Builder 6.

EL ENTORNO DE C++ BUILDER

1. Ejecutar C++ Builder desde el men de inicio. Se abrirn una serie de ventanas
como las mostradas abajo.
Men
principal
Paleta de
componentes

Botones de
acceso rpido

Formulario de la
aplicacin creada

Editor de
cdigo

Inspector de
objetos

2. Partes del entorno:

Men principal. Contiene todas las operaciones tpicas para manejar los
ficheros de cdigo (abrir, cerrar, guardar, etc.), opciones de edicin
(copiar, pegar, buscar, etc.), manejo del proyecto (aadir ficheros al
proyecto, quitar, compilar, depurar, opciones de compilacin, etc.), ayuda
(tanto de C/C++, como de la funcionalidad propia), y otras operaciones.
Botones de acceso rpido. Contienen las operaciones ms frecuentes
del men principal.
Paleta de componentes. Son los elementos que se pueden poner dentro
del formulario de la aplicacin: botones, cuadros de texto, mens, listas,
cuadros de dilogo, etc.
Formulario de la aplicacin. Es el aspecto de la ventana que estamos
diseando. Es la "zona de dibujo" sobre la que situamos los
componentes. Un proyecto puede tener varios formularios.
2

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

Editor de cdigo. Es la zona donde escribimos el cdigo de la aplicacin.

Es sensible a la sintaxis, y se puede acceder a la ayuda pulsando F1
sobre una palabra. A la izquierda aparece la jerarqua de clases de la
aplicacin (se puede ocultar).
Inspector de objetos. Es fundamental. Sirve para ver y establecer
valores de los elementos visuales de la aplicacin. Dos tipos de valores:
propiedades (nombre, color, posicin en el formulario, etc.) y eventos
(funciones asociadas a cada posible accin sobre el elemento).

3. Mtodo de trabajo: usando los elementos de la paleta de componentes,

diseamos el aspecto del formulario de la aplicacin. Ajustamos las propiedades
de los elementos grficos usando el inspector de objetos. Despus, usamos el
editor de cdigo para escribir las operaciones asociadas a los eventos de
inters. Finalmente, usando las opciones de men o los botones de acceso
rpido, compilamos, ejecutamos, depuramos y guardamos el proyecto.
4. Ficheros de un proyecto. Un proyecto o aplicacin en C++ Builder est
compuesto por un conjunto de ficheros. Ejecutar en el entorno File|Save
Project As..., guardando todos los ficheros que indique en un directorio propio.
Observar la estructura de ficheros creada.
Fichero de proyecto: Project.bpr. Contiene la definicin de todos los
elementos y ficheros de los que se compone el proyecto. Usa un formato
propio de Borland, en XML. No nos interesa su contenido, ni lo
editaremos directamente.
Fichero de recursos del proyecto: Project.res. Fichero binario (no de
texto), con formato propio de Borland, que contiene los recursos usados
en el proyecto, como el icono de la aplicacin, o los dibujos de los
botones. No nos interesa su contenido, ni lo editaremos directamente.
Fichero de inicio del proyecto: Project.cpp. Fichero C++ generado
automticamente, que inicia la aplicacin, crea el formulario principal y lo
ejecuta. Se puede ver pero no tocar.
Formularios de la aplicacin: unit.dfm, unit.h y unit.cpp. La aplicacin
puede tener varios formularios, uno de ellos ser el formulario principal (el
que se abre automticamente al ejecutar la aplicacin). Cada formulario
se define como una clase hija de la clase TForm. Los elementos del
formulario (botones, mens, etc.) se definen como datos miembro de la
clase, y los eventos se definen como mtodos de la clase. Cada
formulario tiene asociados tres ficheros:
Descripcin del formulario: unit.dfm. Describe las propiedades
del formulario y sus componentes (posicin, tamao, color, etc.).
Utiliza un formato propio de Borland. No lo editaremos
directamente, sino de forma visual en el entorno.
Fichero de cabecera del formulario: unit.h. Contiene la
declaracin de la subclase de TForm asociada al formulario (por
defecto, tendrn los nombres TForm1, TForm2, etc.), y realiza los
includes necesarios. Puede ser necesario editarlo, por ejemplo,
para aadir propiedades a la clase.
Fichero de implementacin del formulario: unit.cpp.
Implementacin de la subclase de TForm asociada al formulario.
Este fichero s que tendremos que manejarlo, fundamentalmente

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

para escribir el cdigo asociado a los eventos. Si la clase del

formulario se llama TFormX, la instancia se llama FormX (puntero
a TFormX).
Mdulos creados por el usuario: modulo.h, modulo.cpp. Igual que en
cualquier programa C++, la funcionalidad debera estar bien repartida
modularmente entre distintas partes. Para cada mdulo, su fichero de
cabecera (.h) y de implementacin (.cpp). Cuidado, se tiende a incluir
mucho cdigo en los ficheros de implementacin del formulario. Evitarlo
con una buena programacin modular.

NUESTRO PRIMER PROGRAMA

1. Vamos a escribir nuestro primer programa con Borland C++ Builder, que
consistir en un simple contador manual y un mensaje de saludo.
2. Abrir C++ Builder. Si ya estaba abierto, seleccionar File|Close All, y luego
File|New|Application o bien pulsar en el botn

y luego Application.

3. Guardar el proyecto nuevo, con File|Save Project As... o pulsando el botn

Guardar todos los ficheros dentro de un directorio especfico del proyecto.

4. En el inspector de objetos (Object Inspector) est seleccionado Form1 (de tipo

TForm1) que es el formulario principal. Dentro de la propiedad Caption escribir
"Mi primer programa con C++ Builder". Observar el resultado.
5. Ejecutar Run|Run o pulsar el botn
. Ya has creado tu primer programa con
C++ Builder! ... Cirralo antes de seguir...
6. En la paleta de componentes seleccionar la etiqueta (Label), pulsando en el
, dentro de la solapa Standard. A continuacin, pinchar en el
icono
formulario, en la posicin donde se quiera colocar la etiqueta de texto.
7. Ir al inspector de objetos. Ahora est seleccionado Label1 (este es el nombre
dado automticamente a esta etiqueta). En la propiedad Caption escribir "Valor
del contador". Observar el resultado. Editar la propiedad Font y poner un
tamao de fuente 18.
8. En la paleta de componentes seleccionar un cuadro de texto (Edit), pulsando
en el icono
, dentro de la solapa Standard. A continuacin, pinchar en el
formulario, en la posicin y tamao donde se quiera colocar.
9. Ir al inspector de objetos. Ahora est seleccionado Edit1. En la propiedad Text
escribir 0. Editar la propiedad Font y poner un tamao de fuente 24.

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

10. De forma parecida, aadir tres botones (Button) al formulario usando el icono
de la paleta de componentes. En el primero (Button1), poner en Caption
"Incrementar", en el segundo "Decrementar" y en el tercero "Saludar".
11. Ya tenemos diseado el aspecto grfico de nuestro programa. Debera ser algo
ms o menor parecido a esto.

Label1: TLabel

Form1: TForm1

Edit1: TEdit
Button2,
Button3:
TButton

Button1: TButton

Probar a ejecutar ( ). Ver cmo el formulario tiene el comportamiento que se

esperara (se puede editar el cuadro de texto, los botones se hunden al
pulsarlos, etc.) , aunque no tienen ningn comportamiento til asociado. Eso es
lo que vamos a hacer ahora.
12. En el formulario diseado, hacer doble clic sobre el botn "Incrementar". Esto
crea un evento que se asocia a la pulsacin de este botn. Se activar el editor
de cdigo, donde aparecer el texto:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
}

Significado: se ha creado un nuevo mtodo en la clase TForm1, que est

asociado a la pulsacin del botn Button1. Este mtodo no devuelve ningn
valor, y recibe un parmetro que es el objeto que ha producido el evento (en este
caso el propio botn). Dentro de las llaves escribimos el cdigo que se ejecutar
cuando pulsemos el botn.
13. En el editor de cdigo, dentro del fichero Unit1.cpp, crear una variable global de
tipo entero, inicializada a 0. Escribir lo siguiente antes del evento Button1Click:
int contador = 0;

14. Escribir el siguiente cdigo dentro del evento Button1Click:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
contador++;
Edit1->Text= contador; // Conversin de tipos implcita
}

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

15. Hacer doble clic sobre el botn "Decrementar", creando un evento para este
botn. En el editor de cdigo escribir:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
contador--;
Edit1->Text= contador;
}

16. Hacer doble clic sobre el botn "Saludar", creando un evento para este botn.
En el editor de cdigo escribir:
void __fastcall TForm1::Button3Click(TObject *Sender)
{
ShowMessage("Hola Mundo!");
}

17. Tambin se pueden crear eventos desde el inspector de objetos. Seleccionar

alguno de los botones y en el inspector de objetos activar la solapa Events. En
la fila OnClick aparecer el evento que hemos creado. Haciendo doble clic en
otra fila podemos crear eventos asociados a otras acciones (que se seleccione
el botn, que se deseleccione, que pase el ratn por encima, etc.).
18. Guardar ( ) y ejecutar ( ) el proyecto. La ejecucin conlleva, de forma
implcita, la compilacin del proyecto (compilacin + enlace). Aunque tambin se
puede compilar explcitamente con Project|Build Project.
19. Cambiar las etiquetas de los botones por "&Incrementar", "&Decrementar" y
"&Saludar" y observar el resultado. Ejecutar (
teclas Alt+I, Alt+D y Alt+S.

) y probar las combinaciones de

20. Observar los nuevos ficheros creados dentro del directorio del proyecto:
Project.exe (fichero ejecutable de Windows), ficheros .obj (cdigo objeto), .tds
(tabla de smbolos) y .~xxx (copias de respaldo temporales).
21. Observar la definicin de la clase TForm1 en el fichero Unit1.h. Por ejemplo,
en el editor de cdigo, pulsar con el botn derecho y seleccionar Open
Source/Header File. Los componentes incluidos aparecen como atributos de la
clase, y los eventos como mtodos, adems del constructor de la clase.

ELEMENTOS DE LA PALETA DE COMPONENTES

1. Es importante conocer los elementos ms frecuentes de la paleta de
componentes, que darn contenido a los formularios. Los ms tiles e
interesantes se encuentran en las solapas: Standard, Additional, Win32, System,
Dialogs y Samples. Destacamos los siguientes:
Standard

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

MainMenu: men principal, situado normalmente en la parte superior

de la ventana. Se edita haciendo doble clic. Lo importante son los
eventos asociados a cada entrada del men.
- Label: etiqueta de texto, normalmente con contenido fijo, aunque
puede modificarse en el programa cambiando el atributo Caption.
- Edit: cuadro de entrada de texto. Lo importante es el atributo Text, que
indica el texto escrito por el usuario (o por el programa).
- Memo: cuadro de texto que puede ocupar varias lneas. El contenido
es el atributo Lines, de tipo TStrings (con operaciones Clear, Add, Get,
etc., ver la ayuda).
- Button: botn normal. Lo importante es el evento asociado a su
pulsacin, y el atributo Caption. El botn puede estar desactivado
(atributo Enabled).
- CheckBox: cuadro de chequeo, para recibir entradas de tipo
booleano. Ver los atributos Checked y Caption.
- RadioButton: botn circular. Indica una eleccin entre un conjunto de
posibilidades excluyentes. Ver los atributos Checked y Caption.
- ListBox: selector de una lnea entre una lista de posibilidades. Las
posibilidades estn en el atributo Items, de tipo TStrings, que se puede
rellenar en tiempo de diseo o de ejecucin. La propiedad ItemIndex
indica el nmero de la entrada seleccionada.
- ComboBox: selector de lista desplegable. Parecido a la anterior, pero
la lista puede estar desplegada o no.
- RadioGroupBox: grupo de botones de radio. Los botones existentes
se establecen en la propiedad Items, de forma parecida a un ListBox.
- GroupBox: establece un marco para agrupar un conjunto de
elementos y darle un nombre (propiedad Caption).
Additional
-

BitBtn: botn con un dibujo. Igual que un botn normal, pero muestra
tambin un dibujo, establecido en la propiedad Glyph.
SpeedButton: botn cuadrado con dibujo y sin texto, como los de
acceso rpido.
StringGrid: matriz de cadenas, para la visualizacin e introduccin de
datos. Ver las opciones (propiedad Options), para permitir la edicin.
Con la propiedad Cells se accede al contenido de las celdas.
Image: imagen, cargada en tiempo de diseo o en ejecucin. La
propiedad Picture hace referencia al bitmap almacenado en la imagen.
Shape: figura geomtrica sencilla. Ver las propiedades Brush (relleno),
Pen (borde) y Shape (forma).
LabeledEdit: cuadro de entrada de texto, junto con una etiqueta. El
texto est en la propiedad Text, y la etiqueta en EditLabel.
ColorBox: selector de color. Permite al usuario seleccionar un color,
que se lee en el atributo Selected. El color viene dado como un tipo
TColor (long), donde el ltimo byte es R, el segundo G y el tercero B.

Win32
-

PageControl: sistema de solapas. Permite tener varias pginas en un

mismo espacio, cada una con una solapa asociada. Para crear nuevas

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

pginas: botn derecho del ratn, New Page. Cada hoja creada es de
tipo TabSheet.
- TrackBar: barra de seleccin de posicin. Permite seleccionar
visualmente un valor que est entre un mnimo y un mximo
(propiedades Min y Max, respectivamente). La propiedad Position
(entero) indica la posicin actual.
- ProgressBar: barra de indicacin de progreso. Muestra el nivel de
progreso de algn proceso, entre 0 y 100%, establecido en Position.
- UpDown: par de botones arriba/abajo. Igual que el anterior, contiene
propiedades Min, Max y Position, pero no se muestra grficamente la
posicin actual del elemento.
System
-

Timer: reloj. Su principal misin es crear eventos que se activan cada

cierto tiempo. La propiedad Interval indica el tiempo, en milisegundos,
entre cada par de eventos generados.
- PaintBox: zona de dibujo. La diferencia con Image es que no tiene
asociado un fichero de bitmap (Picture). El atributo principal es Canvas
(lienzo) de tipo TCanvas, que tiene operaciones LineTo, MoveTo,
Rectangle, Ellipse, Pixels[x][y], etc.
Dialogs
-

OpenDialog: cuadro de dilogo de abrir fichero. El mtodo Execute()

muestra el cuadro de dilogo, que pide al usuario un nombre de
fichero. No se hace ninguna accin sobre el fichero, slo se obtiene el
nombre, que se almacena en el atributo FileName. Observar las
distintas opciones (Options) y la propiedad de restringir la extensin
del fichero de entrada (Filter).
- SaveDialog: cuadro de dilogo de guardar fichero. Igual que antes,
pero para indicar un nombre para guardar. Recordar que no se guarda
nada, slo se almacena el nombre seleccionado en FileName.
- ColorDialog: cuadro de dilogo de seleccin de un color. Al
ejecutarlo, Execute(), pide al usuario que seleccione un color, que es
almacenado en la propiedad Color, de tipo TColor.
Ver otros componentes interesantes en la paleta Samples

2. Probar el comportamiento de estos componentes. "Jugar" con ellos

incluyndolos en un programa de prueba. Analizar sus propiedades y eventos en
el inspector de objetos. Buscar ms informacin sobre las propiedades, eventos
y mtodos en la ayuda.

ALGUNAS INDICACIONES IMPORTANTES

1. Involuntariamente, la programacin visual y dirigida por eventos pueden
favorecer un mal estilo de programacin, donde no se separa adecuadamente
entre la parte de interface de usuario y la lgica de la aplicacin. Se tiende a
poner todo el cdigo dentro de los eventos, hacindolo confuso, ilegible y
desorganizado. Es importante respetar la programacin modular: crear
8

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

mdulos separados para la parte no visual, con sus ficheros de cabecera y de

implementacin, y desde los eventos hacer simples llamadas a las operaciones
que correspondan. El cdigo asociado a los eventos debera ser trivial. La
funcionalidad debe estar fuera, estructurada en mdulos de forma adecuada.
2. En la medida de lo posible, utilizar cdigo C++ estndar, sobre todo en la parte
no visual. Algunas funcionalidades estn muy bien, aunque no son muy
estndar, como por ejemplo el tipo AnsiString para manejar cadenas.
3. Algunos consejos prcticos sobre C++ Builder:
Los ejecutables generados por C++ Builder son muy pequeos, porque se
usan paquetes en tiempo de ejecucin. Pero esto requiere tener instalado
C++ Builder en el ordenador donde se vaya a ejecutar el programa. Para
evitarlo, hay que modificar las opciones de proyecto, en Project|
Options... En la solapa Packages, en la seccin Runtime packages,
desactivar la opcin Build with runtime packages.
Ya de paso, observar las opciones de compilacin del proyecto,
fundamentalmente las incluidas en Compiler. Existen dos modos bsicos
de compilacin: Full debug (modo depuracin) y Release (versin final).
Normalmente, mientras estamos desarrollando el programa compilaremos
con Full debug. Una vez que est acabado, compilaremos con Release.
A veces el formulario no se ve como se ha diseado, porque se ejecuta
en un pantalla con distinta resolucin. Esto es debido a la propiedad
Scaled de TForm. Lo ms recomendable es desactivarla, ya que por
defecto est activada.

Desarrollo de Aplicaciones Interactivas

Programacin visual con Borland C++ Builder

Guin de Prcticas

TAREA A REALIZAR
Habituarse a los distintos elementos del entorno de C++ Builder. Abrir el proyecto de
contador y aadir los siguientes elementos:
1. Un men principal con las opciones Archivo (Iniciar contador, Salir), Edicin
(Incrementar, Decrementar) y Acerca de. Asociar el comportamiento adecuado a
cada una de estas opciones.
2. Para el comando Acerca de crear un formulario especfico (New
| Forms |
About box). El formulario se abre con AboutBox->Show(); y se cierra con
Close();. Qu falta para poder usar el formulario AboutBox desde Form1?
3. Crear una barra de botones de acceso rpido con la misma funcionalidad que el
men principal. Ojo: no hace falta repetir cdigo.
4. Incluir un ListBox que permita seleccionar el tipo de saludo a mostrar al pulsar
en el botn Saludar. Deben haber 4 opciones: Estndar, Coleguilla, Corto,
International. Segn la lnea que seleccione el usuario, el saludo ser: Hola
Mundo!, Qu pasa to?, Ale u Bon yur!, respectivamente.
5. Aadir en el men principal un comando Opciones, que abra una ventana donde
se pueda configurar el tamao del incremento/decremento del contador. Crear
una nueva ventana y abrirla con ShowModal().
6. Aadir dentro del men principal, en Archivo, un par de comandos Abrir y
Guardar, que guarden el estado del contador en un fichero (un simple entero). El
nombre del fichero se seleccionar abriendo un cuadro de dilogo (OpenDialog
o SaveDialog).

10