Uso de algunos componentes de Builder.
•
•
•
•
•
•
•
•
Creando Coolbars, PageScrollers,
ImageLists y Toolbars con ToolButtons.
Mostrando mensajes en la barra de estado.
Utilizando el PageControl con TabSheets
para desplegar información.
Manipulando RadioGroups.
Aprendiendo a usar el ScrollBox.
Cambiando el tipo de letra y los colores con
cajas de diálogo invisibles.
Creando una ventana de animación con el
componente “Windows AVI”.
Explorando el componente MonthCalendar.
Creando Coolbars, PageScrollers,
ImageLists y Toolbars con ToolButtons.
• ToolBar: Puede utilizarse con
diferentes fines, la usaremos para
desplegar mensajes.
Práctica 6. Usando
Componentes
• En su carpeta PRACTICAS cree una
carpeta llamada Practica6.
• Cree un proyecto nuevo y llámelo
EjemploDeComponentes.BPR
• La unidad de la forma guárdela como
FormaEjemploDeComponentes.CPP
• Cambie la propiedad Name del
comoponente Form1 a
frmEjemploDeComponentes y su
Caption a “Ejemplo de Componentes”.
Práctica 6. Usando
Componentes
• Seleccione la página Win32 de la barra
de componentes.
• Agregue un CoolBar a la forma y llámelo
clbrPrincipal.
• Deposite un PageScroller al CoolBar y
llámelo pgscrlrBarraHerramientas.
Práctica 6. Usando
Componentes
• Observe el CoolBar y
verá que apareció una
banda.
• De click derecho
sobre el CoolBar y
elija la opción Bands
Editor.
• Cuando deposita un
componente en un
CoolBar se crea una
banda CoolBand y se
asigna dicho
componente a su
propiedad Control.
Práctica 6. Usando
Componentes
• El componente PageScroller también
tiene una propiedad Control. Dicha
propiedad indica cual es el
componente que se desplegará.
• Agregue un ToolBar al componente
PageScroller y llámelo tlbrPrincipal
Práctica 6. Usando
Componentes
• De un click derecho sobre el ToolBar
y elija la opción New Button.
• De un click derecho sobre el ToolBar
y elija la opción New Sepataror.
• Agregue 2 botones más al ToolBar.
• Llame al primer botón
tlbtnLevantado, al segundo
tlbtnIzquierdo y al tercero
tlbtnDerecho.
Práctica 6. Usando
Componentes
• El segundo y tercer botón los
usaremos para seleccionar. Asígneles
sus propiedades Grouped a true y
sus propiedades Style a tbsCheck.
Esto hará que puedan seleccionarse
de modo exclusivo.
• Asigne true a la propiedad Down del
segundo botón.
Práctica 6. Usando
Componentes
• Los botones no tienen imágenes
asociadas de modo que eso será lo
siguiente que haremos.
• Deposite un componente ImageList en la
forma y llámelo
imglstBarraHerramientas.
Práctica 6. Usando
Componentes
• De un doble click en el componente
ImageList. Utilizando el botón Add
agréguele imágenes al componente.
Práctica 6. Usando
Componentes
• Asigne imglstBarraHerramientas a la
propiedad Images del ToolBar. La forma
se verá así:
ImageList es un
arreglo y
ToolButton tienen
una propiedad
ImageIndex, que
sirve de índice
para tomar las
imágenes de dicho
arreglo.
Práctica 6. Usando
Componentes
• Ahora vamos a crear dos CoolBands depositando
dos componentes Edit (de la página Standard) en
el CoolBar. El primero se llamará edtTipoLetra y
el segundo edtColor y Limpie la propiedad Text de
ambos.
• Abra el editor de CoolBand para poner etiquetas
antes de cada Edit.
• En la propiedad Text del CoolBand
correspondiente escriba “Tipo de Letra:” y “Color:”
• De click en el botón correspondiente del
CoolBand Editor para agregar una banda más y
escriba “Fecha:” en su propiedad Text.
Práctica 6. Usando
Componentes
• Agregue un componente StatusBar y
llámelo stsbrEstado.
• Abra el editor de propiedades de la
propiedad Panels del StatusBar.
• Asigne 100 a la propiedad Width del
primer Panel. Escriba “Botón Izquierdo
Presionado” en la propiedad Text del
segundo Panel.
Práctica 6. Usando
Componentes
• Haremos que el primer Panel
despliegue un mensaje cuando el
usuario mantenga presionado el
botón tlbtnLevantado, lo cual
realizaremos por medio de los
eventos OnMouseDown y
OnMouseUp.
• Abra el evento OnMouseDown y
escriba el siguiente código:
stsbrEstado->Panels->Items[0]->Text = "Estoy Presionado";
Práctica 6. Usando
Componentes
• Abra el evento OnMouseUp y escriba
el siguiente código:
stsbrEstado->Panels->Items[0]->Text ="";
• En el evento OnClick del botón
tlbtnDerecho cambie el mensaje del
segundo Panel para informar al
usuario que el botón derecho está
presionado.
• Repita el paso anterior para el botón
tlbtnIzquierdo.
Práctica 6. Usando
Componentes
Guarde su proyecto y Presione F9 para probarlo
Práctica 7. Usando
Componentes
En esta práctica vamos a agregar páginas a nuestra
forma de la práctica 6.
Las páginas se utilizan cuando se tienen más
controles de los que es posible desplegar en la
forma.
Agregando Páginas
• Abra el proyecto de la práctica anterior.
• Active el diseñador de formas y deposite
un componente PageControl (el segundo
componente de la página Win32).
• Nómbrelo pgcntrlPaginas.
• Cambie su propiedad Align a alClient.
Agregando Páginas
• Dé click derecho sobre el PageControl y
elija la opción New Page del menú.
• Aparecerá un TabSheet, cambie su
propiedad Caption a Regiones y el
Name a tbshtRegiones. La forma se verá
así:
Agregando Páginas
• Agregue un RadioGroup (de los
componentes Standard) a la página
tbshtRegiones.
• Cambie el nombre del RadioGroup a
rdgrpRegiones, su propiedad Columns a
2 y su Caption a Regiones.
• Observe la propiedad Items del
RadioGroup. Se trata de un contenedor
de tipo TStrings. Dicha propiedad la
podemos llenar en el diseñador o bien a la
hora de ejecución, usaremos la segunda
alternativa.
Agregando Páginas
• Agregue un Edit a la forma, llámelo
edtAgregarRegion y limpie su propiedad
Text.
• Agregue un botón en seguida del Edit y
llámelo btnAgregarRegion y asigne su
Caption a “&Agregar Región” y el Width
a 100.
• De un doble click en el botón y escriba el
siguiente código:
rdgrpRegiones->Items->Add(edtAgregarRegion->Text);
Agregando Páginas
• Ejecute su aplicación y se verá algo así:
Agregando ScrollBox
• Reduzca el tamaño de la ventana del
programa en ejecución.
• Se esconderán los componentes, lo
cual puede ser un inconveniente.
• Cierre la aplicación y vaya al
diseñador de formas.
• Corte los tres componentes
(Seleccione los tres y presione
Ctrl+X).
Agregando ScrollBox
• De la página Additional seleccione un
ScrollBox y deposítelo en la forma.
• Cambie su propiedad Align a alClient.
• Pegue los tres componentes que cortó
(Ctrl+V).
• Ejecute la aplicación e intente reducir el
tamaño de la forma.
Cambiando el tipo de letra y los colores con
cajas de diálogo invisibles
• Muchas aplicaciones permiten al
usuario cambiar los colores y el tipo
de letra, eso también lo podemos
hacer en nuestros programas de C++
Builder.
Práctica 8. Cambiando el tipo de letra
y los colores.
• Continuaremos con la misma forma y le
agregaremos un nuevo TabSheet, al cual
llamaremos tbshtDialogos y su Caption será
Diálogos.
• En la nueva página depositaremos dos Button y
un Label.
• El primer botón se llamará btnColor y su Caption
“Cambiar Color” y ajuste su propiedad Width a
120.
• El segundo se llamará btnTipoLetra y su Caption
“Cambiar Tipo de Letra” y ajuste su propiedad
Width a 120.
• Al Label llámelo lblPrueba y cambie su Caption a
“¿Cómo me veo?”.
Práctica 8. Cambiando el tipo de letra
y los colores.
• Localice la página Dialogs y deposite en
la forma un componente FontDialog y
llámelo fntdlgTiposDeLetra.
• Deposite en la forma un componente
ColorDialog y llámelo clrdlgColor.
• La forma lucirá así:
Práctica 8. Cambiando el tipo de letra
y los colores.
• El propósito es mostrar una ventana de
diálogo cuando el usuario dé click en los
botones y mostrar en el Label los cambios
y en los Edit correspondientes del
CoolBar.
• De doble click en el botón btnTipoLetra y
escriba el siguiente código:
if (fntdlgTiposDeLetra->Execute())
{ lblPrueba->Font= fntdlgTiposDeLetra->Font;
edtTipoLetra->Text = fntdlgTiposDeLetra->Font->Name;
}
Práctica 8. Cambiando el tipo de letra
y los colores.
• Dé doble click en el botón btnColor
y escriba el siguiente código:
if (clrdlgColor->Execute())
{ lblPrueba->Color = clrdlgColor->Color;
edtColor->Text= clrdlgColor->Color;
}
Práctica 8. Cambiando el tipo de letra
y los colores.
Presione F9 y pruebe su aplicación:
Creando una ventana de animación
con el componente “Windows AVI”.
• Mantener informado al usuario de lo
que el programa esta realizando es
una necesidad. Muchas aplicaciones
cambian el cursor del ratón por un
reloj de arena, otras además de ello
presentan una animación. Con C++
Builder eso es posible utilizando el
componente Animate es posible
ejecutar un elemento común de
Windows AVI.
Práctica 9. El Componente Animate.
• Cree un nuevo TabSheet y llámelo
tbshtAnimacion y cambie su Caption a
Animación.
• Deposite un Panel de la página Standard,
llámelo pnlAnimacion, cambie su
propiedad Align a alTop y limpie su
Caption.
• Deposite un Animate (de Win32) y
cambie su propiedad Name
anmtAviDelSistema.
Práctica 9. El Componente Animate.
• Deposite dos botones abajo del panel; llámelos
btnIniciar y btnDetener. Cambie su Caption a
Iniciar y Detener respectivamente.
• Deposite un RadioGroup y llámelo
rdgrpAnimaciones, asigne 2 a Columns,
cambie su Caption a “Elija una animación” y
asigne a su propiedad Items la siguiente lista de
cadenas:
Copiar Archivo
Copiar Archivos
Borrar Archivos
Vaciar la Papelera
Buscar Computadora
Buscar Archivo
Buscar Carpeta
Práctica 9. El Componente Animate.
Práctica 9. El Componente Animate.
• Empezaremos a agregar funcionalidad. En
el botón Iniciar (btnIniciar) verificaremos
que el componente Animate tenga un
valor de animación AVI, inspeccionando su
propiedad CommonAVI. Si dicha
propiedad tiene un valor diferente de
aviNone entonces activaremos el
componente asignando true a su
propiedad Active. Por último
desabilitaremos el RadioGroup y el botón
Iniciar.
Práctica 9. El Componente Animate.
El código sería algo así:
if ( anmtAviDelSistema->CommonAVI != aviNone)
{ anmtAviDelSistema->Active = true;
btnIniciar->Enabled = false;
rdgrpAnimaciones->Enabled= false;
}
Práctica 9. El Componente Animate.
• Ahora haremos el código del botón
Detener (btnDetener), el cual
realizará exactamente lo contrario al
botón Iniciar.
Práctica 9. El Componente Animate.
• El código sería:
btnIniciar->Enabled = true;
rdgrpAnimaciones->Enabled = true;
anmtAviDelSistema->Active= false;
Práctica 9. El Componente Animate.
• El usuario puede seleccionar la
animación del RadioGroup. Eso se
implementará en el evento OnClick
de dicho componente.
Práctica 9. El Componente Animate.
• El código es el siguiente:
switch (rdgrpAnimaciones->ItemIndex)
{
case 0: anmtAviDelSistema->CommonAVI = aviCopyFile;
break;
case 1: anmtAviDelSistema->CommonAVI = aviCopyFiles;
break;
case 2: anmtAviDelSistema->CommonAVI = aviDeleteFile;
break;
case 3: anmtAviDelSistema->CommonAVI = aviEmptyRecycle;
break;
case 4: anmtAviDelSistema->CommonAVI = aviFindComputer;
break;
case 5: anmtAviDelSistema->CommonAVI = aviFindFile;
break;
case 6: anmtAviDelSistema->CommonAVI = aviFindFolder;
break;
default: anmtAviDelSistema->CommonAVI = aviNone;
}
Práctica 9. El Componente Animate.
Ejecute su aplicación
Práctica 10. Explorando el
componente MonthCalendar.
• Vamos a desplegar un calendario y en la
banda del CoolBar etiquetada con Fecha
desplegaremos la fecha seleccionada en
el calendario.
• Cree una nueva página y llámela
tbshtCalendario y asigne Calendario a su
Caption
• Deposite el componente MonthCalendar
(Win32) y llámelo mnthclndrFecha
y asigne alClient a su propiedad Align
Práctica 10. Explorando el
componente MonthCalendar.
Práctica 10. Explorando el
componente MonthCalendar.
• Ahora vamos a hacer que en el
CoolBand aparezca la fecha que el
usuario seleccione en el calendario.
• En el evento OnClick del componente
MonthCalendar escriba lo siguiente:
clbrPrincipal->Bands->Items[3]->Text = "Date:
FormatDateTime("dd 'de' mmmm 'de' yyyy",
mnthclndrFecha->Date);
"+
Práctica 10. Explorando el
componente MonthCalendar.
Práctica 10. Explorando el
componente MonthCalendar.
• Sin embargo, cuando corremos el
programa, se despliega la fecha
cuando el usuario selecciona una, de
lo contrario solo aparece el letrero
“Fecha :”. Si deseamos que desde el
principio se muestre la Fecha
marcada en el calendario debemos
hacer que el evento OnShow de la
forma apunte al evento OnClick del
componente MonthCalendar.
Práctica 10. Explorando el
componente MonthCalendar.
Descargar

Uso de algunos componentes de Builder.