Uso de algunos componentes de Builder.

1. 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.

2. Creando Coolbars, PageScrollers, ImageLists y Toolbars con ToolButtons. • ToolBar: Puede utilizarse con diferentes fines, la usaremos para desplegar mensajes.

3. 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”.

4. 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.

5. 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 BandsEditor. • Cuando deposita un componente en un CoolBar se crea una banda CoolBand y se asigna dicho componente a su propiedad Control.

6. 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

7. 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.

8. 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.

9. 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.

10. Práctica 6. Usando Componentes • De un doble click en el componente ImageList. Utilizando el botón Add agréguele imágenes al componente.

11. 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.

12. 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 edtColory 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.

13. 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.

14. 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";

15. 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.

16. Práctica 6. Usando Componentes Guarde su proyecto y Presione F9 para probarlo

17. 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.

18. 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.

19. 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í:

20. 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 suCaptiona 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.

21. 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);

22. Agregando Páginas • Ejecute su aplicación y se verá algo así:

23. 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).

24. 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.

25. 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.

26. 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 dosButtony unLabel. • 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?”.

27. 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í:

28. 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; }

29. 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; }

30. Práctica 8. Cambiando el tipo de letra y los colores. Presione F9 y pruebe su aplicación:

31. 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.

32. 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 NameanmtAviDelSistema.

33. 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

34. Práctica 9. El Componente Animate.

35. 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.

36. 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; }

37. 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.

38. Práctica 9. El Componente Animate. • El código sería: btnIniciar->Enabled = true; rdgrpAnimaciones->Enabled = true; anmtAviDelSistema->Active= false;

39. 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.

40. 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; }

41. Práctica 9. El Componente Animate. Ejecute su aplicación

42. 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

43. Práctica 10. Explorando el componente MonthCalendar.

44. 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);

45. Práctica 10. Explorando el componente MonthCalendar.

46. 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.

47. Práctica 10. Explorando el componente MonthCalendar.