Tcnicas de Programacin

Indice:

Paso a paso para crear nuestro propio editor de texto

Por Federico Coca, profesor de FP Electrnica.

Creamos una nueva aplicacin Aadimos componentes y establecemos propiedades Lista de acciones Vinculacin de las acciones con las imgenes. Aadir imgenes a un TImageList Creacin de una barra de mens Creacin de una barra de herramientas Creacin de gestores de eventos o procedimientos Aadir un nuevo formulario a la aplicacin Creacin de la ventana Acerca de Editor Identificacin de la aplicacin Impresin del documento Otras acciones o funcionalidades
Configurar impresora Mostrar/Ocultar la barra de herramientas y Fuente Colores de fondo y de fuente Vietas Buscar y reemplazar Men contextual

Ayuda
Este tutorial es una gua para la creacin de una aplicacin (editor de texto) que va a contener barras de mens, de herramientas y de estado, mens contextuales, archivo de ayuda y alguna otra funcionalidad que veremos en el desarrollo. Est ideado como un complemento del desarrollo del mdulo de Tcnicas de programacin y el temario desarrollado para el mismo. Dicho esto, comencemos la tarea. Creamos una nueva aplicacin -Ir al indice1. 2. 3. Creamos un directorio o carpeta que denominaremos Editor de texto para guardar nuestros archivos. Creamos un nuevo proyecto C++ Builder. Si ya tenemos uno abierto, seleccionamos File|New Application. Cuando se crea un nuevo proyecto automticamente se crean los siguientes archivos: o Project1.bpr: fichero de proyecto con las opciones del proyecto o makefile. o Project1.cpp: fichero cpn el cdigo fuente asociado al proyecto. o Project1.res: archivo de recursos de Windows que son necesarios para el proyecto. o Unit1.cpp: archivo con el cdigo fuente relacionado con la ventana o Form del proyecto. o Unit1.h: archivo de cabecera relacionado con la ventana o Form del proyecto. o Unit1.dfm: archivo de recursos que almacena toda la informacin relacionada con la ventana o Form del proyecto o Cada formulario tiene sus ficheros Unitx.cpp, Unitx.h) y Unitx.dfm. Si aadimos un segundo Form se crearn los archivos Unit2.cpp, Unit2.h y Unit2.dfm automticamente. Guardamos nuestro trabajo en la carpeta Editor de texto dando los siguientes nombre a los ficheros: UnitPrincipal para el fichero Unit1 y Editor para el nombre del proyecto. El archivo ejecutable que se crear tendr como nombre Editor.exe.

4.

Aadimos componentes y establecemos propiedades -Ir al indiceCambiamos la propiedad Caption del Formulario de "Form1" a "Tutorial Editor de texto" y la propiedad Name de "Form1" a "FormPrincipal". Cambiamos la propiedad Position al valor poScreenCenter para que el formulario nos aparezca siempre centrado en pantalla. Vamos a establecer el icono y el ttulo de nuestra aplicacin, para lo que podemos seguir dos mtodos:

Abriendo el men Project y escogiendo Option se nos muestra una ventana con mltiples pestaas, nos interesa ahora mostrar Application y dejar el estado que vemos en la figura 1, tras lo cual pulsamos en OK. Cmo ttulo (nombre de la aplicacin que aparecer en la barra de tareas de Windows al minimizar) establecemos el valor correspondiente a Title y para el icono localizamos, mediante Load Icon, en la carpeta iconos el archivos Editor.ico.

Figura 1 Tambin podemos establecer el ttulo tecleando la siguiente lnea de cdigo en UnitPrincipal.cpp justo entre las llaves de las lneas en gris (que ya las ha escrito el propio compilador): __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { Application->Title="Mi Editor de texto"; } Antes de empezar a agregar objetos al formulario debemos planificar los que se conoce como UI (User Interface) o la interfaz de usuario de nuestra aplicacin. La UI es la que permite al usuario interactuar con la aplicacin y debe ser facil de usar. Un editor de texto va a requerir de un rea de edicin, una barra de estado donde mostrar informacin como el nombre del archivo que est siendo editado, una barra de mens, una barra de herramientas con iconos para facilitar el acceso a los comandos, etc. El rea de edicin la vamos a crear con un componentes RichEdit. Seleccionamos la pestaa Win32 de la paleta de componentes y buscamos el citado componente, como vemos en la figura 2.

Figura 2 Una vez localizado hacemos doble clic para que se site en el formulario. Cada componente de C++ Builder es una clase. Cuando situamos un componente en un formulario se crea una instancia de esa clase y C++ Builder genera el cdigo necesario para la instanciacin cuando se ejecuta la aplicacin.

Establecemos la propiedad Align del componente RichEdit1 a alClient. Para Ello hacemos un clic sobre RichEdit1 para seleccionarlo, escogemos la propiedad Align en el Inspector de Objetos y seleccionamos alClient de la lista desplegable.

Figura 3 El componente RichEdit pasa a ocupar todo el formulario agrandando considerablemente el rea de edicin de texto. Escoger este valor para la propiedad Align hace que el rea de edicin ocupe todo el formulario aunque modifiquemos su tamao ya sea en tiempo de diseo o en tiempo de ejecucin. Vamos por tanto a modificar ahora la propiedad WindowState del formulario para establecer su valor a wsMaximized de forma que siempre ocupe la totalidad del escritorio. No debemos olvidarnos de ir salvando periodicamente nuestro trabajo Vamos a crear nuestra barra de estado. Localizamos e insertamos en nuestro formulario un componente StatusBar de la pestaa Win32 y observamos como se sita en la parte inferior del formulario.

Figura 4 Lo que pretendemos es crear un lugar para mostrar el nombre del archivo abierto en nuestro editor, lo que podemos hacer de dos maneras:

La ms sencilla es establecer la propiedad SimplePanel de StatusBar1 a true y asignar el texto a mostrar en la propiedad SimpleText. Esto nos va a proporcionar tan slo un panel en la barra de estado al que tambin podemos asignarle valor as: StatusBar1->SimplePanel = true; StatusBar1->SimpleText = "Sin nombre.txt";

Sin embargo, muchas veces necesitaremos incluir ms de un panel en la barra de estado para suministrar ms informacin. Esto lo podemos hacer mediante la propiedad Panels del componente StatusBar como vamos a ver seguidamente.

Hacemos doble clic sobre StatusBar1 y nos aparecer la ventana de dilogo de edicin de sus paneles, como vemos en la figura 5.

Figura 5 Vamos a crear los paneles que vemos en la figura 6 con las propiedades establecidas para cada caso segn la pareja correspondiente. Si nos equivocamos podemos usar los botones o el men contextual de la ventana de dilogo de edicin de paneles para eliminarlos o moverlos. Posteriormente nos ocuparemos de hacer que trabajen.

Figura 6

Vemos como cada panel tiene un nmero de ndice asociado que nos va a permitir tener acceso a cada uno de los paneles que hemos creado. Procedemos ahora a la creacin de la barra de men y como complemento la de herramientas para que todos los comandos de los mens tengan una forma de acceso rpida. Como van a aparecer las mismas rdenes en los mens y en la barra de herramientas es conveniente centralizar el cdigo mediante (Action lists) listas de accin. A continuacin resumimos las acciones que vamos a dar inicialmente a nuestra aplicacin. Barra de herramientas Si Si Si No Si Si Si Si Si Si No No Si Si Si Si Si Si Si No No

Comando Nuevo Abrir Guardar Guardar como Imprimir Salir Cortar Copiar Pegar Deshacer Seleccionar todo Borrar Negrita Cursiva

Men Archivo Archivo Archivo Archivo Archivo Archivo Edicin Edicin Edicin Edicin Edicin Edicin Formato Formato

Descripcin breve Crear un archivo o fichero nuevo. Abrir un archivo o fichero existente para editarlo. Guardar el archivo actual en disco. Guardar el archivo usando un nuevo nombre (o bien almacenar un nuevo archivo con un nombre especifico). Acceso al men de impresin. Finalizar el programa editor. Cortar texto y pegarlo en el portapapeles. Copiar texto y pegarlo en el portapapeles. Insertar texto y pegarlo desde el portapapeles. Deshacer acciones. Permite seleccionar todo el contenido del archivo. Para borrar la seleccin actual. Poner tipo de letra en negrita. Poner tipo de letra en cursiva. Poner tipo de letra subrayado. Alineacin del texto a la izquierda. Alineacin del texto centrado. Alineacin del texto a la derecha. Mostrar los contenidos de la Ayuda y a partir de ellos acceder a temas de Ayuda Mostrar el ndice de la Ayuda . Mostrar informacin de la aplicacin.

Subrayado Formato Alinear Formato izquierda Alinear centro Formato Alinear derecha Contenidos Indice Acerca de Formato Ayuda Ayuda Ayuda

Tambin vamos a centralizar las imgenes a utilizar en la barra de herramientas y mens en un ImageList. Para aadir un ActionList y un ImageList al formulario: Localizamos y situamos un componente ActionList (pestaa Standard) en el formulario y un componente ImageList (pestaa Win32). Estos componentes no son visibles en tiempo de ejecucin, por lo que no importa mucho donde los pongamos. Lista de acciones -Ir al indice-

Vamos a proceder a aadir acciones a la lista de acciones. Es conveniente que tengan relacin con los elementos del men, tanto el nombre del men como el elemento concreto. Por ejemplo, la accin ArchivoSalir se refiere a la entrada Salir del men Archivo. Hacemos doble clic sobre el componente ActionList y se mostrar la ventana Editing FormPrincipal>ActionList1, como vemos en la figura 7, que normalmente denominada editor de lista de acciones.

Figura 7 En el inspector de objetos correspondiente a la accin establecemos las siguientes propiedades:

En Caption tecleamos &Nuevo. El smbolo ampersand delente de la N hace al comando accesible mediante la combinacin de teclas Alt+N. En Category tecleamos Archivo. Esto nos va a permitir organizar todos los comando de Archivo en un solo lugar. En Hint tecleamos Nuevo|Crear un nuevo archivo. Esto mostrar en la ayuda rpida Nuevo y en la barra de estado Crear un nuevo archivo. En ImageIndex tecleamos 0 para asociar al nmero de imagen 0 en ImageList con esta accin. Como Name vamos a establecer ArchivoNuevo (para el comando Nuevo del men Archivo). En ShortCut escogemos Ctrl+U. Nos habilita la combinacin de teclas para acceso rpido.

Aadimos una nueva accin y establecemos las siguientes propiedades:

En Caption tecleamos &Abrir. Nos aseguramos que en Category estamos en Archivo. En Hint tecleamos Abrir|Abrir un archivo guardado en disco. Esto mostrar en la ayuda rpida Abrir y en la barra de estado Abrir un archivo guardado en disco. En ImageIndex tecleamos 1. Como Name vamos a establecer ArchivoAbrir (para el comando Abrir del men Archivo). En ShortCut escogemos Ctrl+A.

Aadimos una nueva accin y establecemos las siguientes propiedades:

En Caption tecleamos &Guardar. Nos aseguramos que en Category seguimos en Archivo. En Hint tecleamos Guardar|Guardar -actualizar- archivo actual en disco.

En ImageIndex tecleamos 2. Como Name vamos a establecer ArchivoGuardar (para el comando Guardar del men Archivo). En ShortCut escogemos Ctrl+G.

Aadimos otra accin y establecemos las siguientes propiedades:

En Caption tecleamos G&uardar como. Nos aseguramos que en Category seguimos en Archivo. En Hint tecleamos Guardar como|Guardar archivo en disco. ImageIndex no es necesario por lo que dejamos el valor por defecto. Como Name vamos a establecer ArchivoGuardarComo (para el comando Guardar del men Archivo). En ShortCut escogemos Shift+F1.

Aadimos otra accin y establecemos las siguientes propiedades:

En Caption tecleamos &Imprimir. Nos aseguramos que en Category seguimos en Archivo. En Hint tecleamos Imprimir|Mostrar dialogo de impresora. En ImageIndex tecleamos 3. Como Name vamos a establecer ArchivoImprimir (para el comando Imprimir del men Archivo). En ShortCut escogemos Ctrl+P.

Aadimos otra accin y establecemos las siguientes propiedades:

En Caption tecleamos &Salir. Nos aseguramos que en Category seguimos en Archivo. En Hint tecleamos Salir|Terminar la aplicacin. En ImageIndex tecleamos 4. Como Name vamos a establecer ArchivoSalir (para el comando Salir del men Archivo). En ShortCut escogemos Ctrl+Q.

Creamos una nueva accin para crear una configuracin personalizada para la Ayuda. Establecemos las siguientes propiedades en el Inspector de Objetos:

En Caption tecleamos Ay&uda. En Category tecleamos Ayuda. En Hint tecleamos Ayuda|Acceder a los contenidos de la ayuda. En ImageIndex tecleamos 5. Como Name vamos a establecer AyudaContenidos (para el comando Contenidos del men Ayuda). En ShortCut escogemos F1.

Aadimos otra accin y establecemos las siguientes propiedades:

En Caption tecleamos I&ndice. Nos aseguramos que en Category seguimos en Ayuda. Como Name vamos a establecer AyudaIndice (para el comando Inidce del men Ayuda).

Aadimos otra accin y establecemos las siguientes propiedades:

En Caption tecleamos Acerca de Editor. Nos aseguramos que en Category seguimos en Ayuda. Como Name vamos a establecer AyudaAcerca (para el comando Acerca de Editor del men Ayuda).

Hemos dejado para el final algunas de las acciones detalladas en la tabla anterior debido a que estas la proporciona C++ Builder como de tipo estndar ya que se utilizan con frecuencia. Vamos a comenzar por el men Edicin para agregar las acciones detalladas. El editor de lista de acciones debe estar mostrndose o bien hacemos doble clic sobre ActionList1 para mostrarlo. Hacemos un clic con el botn secundario sobre la lista de acciones y escogemos New Standard Action que mostrar lo que vemos en la figura 8.

Figura 8 Hacemos doble clic en TEditCut y se crea una nueva categoria denominada Edit. Con EditCut1 seleccionado cambiamos en el inspector de objetos las siguientes propiedades:

En Caption tecleamos Co&rtar. En Category tecleamos o escogemos Edicion. En Hint tecleamos Cortar|Cortar la seleccin y ponerla en el portapapeles. En ImageIndex tecleamos 6. Como Name vamos a establecer EdicionCortar (para el comando Cortar del men Edicin). En ShortCut escogemos Ctrl+X.

Aadimos otra accin estndar para Copiar y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos C&opiar. En Category tecleamos o escogemos Edicion. En Hint tecleamos Copiar|Copiar la seleccin y ponerla en el portapapeles. En ImageIndex tecleamos 7. Como Name vamos a establecer EdicionCopiar (para el comando Copiar del men Edicin). En ShortCut escogemos Ctrl+C.

Aadimos otra accin estndar para Pegar y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos &Pegar.

En Category tecleamos o escogemos Edicion. En Hint tecleamos Pegar|Pegar el contenido desde el portapapeles. En ImageIndex tecleamos 8. Como Name vamos a establecer EdicionPegar (para el comando Pegar del men Edicin). En ShortCut escogemos Ctrl+V.

Aadimos otra accin estndar para Deshacer y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos Des&hacer. En Category tecleamos o escogemos Edicion. En Hint tecleamos Deshacer|Eliminar la accin tomada anteriormente. En ImageIndex tecleamos 9. Como Name vamos a establecer EdicionDeshacer (para el comando Deshacer del men Edicin). En ShortCut escogemos Ctrl+Z.

Aadimos otra accin estndar para Seleccionar todo y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos Seleccionar &todo. En Category tecleamos o escogemos Edicion. En Hint tecleamos Seleccionar todo|Seleccionar todo el contenido del archivo. No usaremos imagen. Como Name vamos a establecer EdicionSeleccionartodo (para el comando Seleccionar todo del men Edicin). En ShortCut escogemos Ctrl+Alt+A.

Aadimos otra accin estndar para Borrar y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos Seleccionar &Borrar. En Category tecleamos o escogemos Edicion. En Hint tecleamos Borrar|Borrar la seleccin. En ImageIndex tecleamos 10. Como Name vamos a establecer EdicionBorrar (para el comando Borrar del men Edicin). En ShortCut escogemos Del.

Para crear la nueva categora Formato seguimos un proceso similar al que hicimo con Edicion. Hacemos doble clic en RichEditBold y se crea una nueva categoria denominada Format. Con RichEditBold1 seleccionado cambiamos en el inspector de objetos las siguientes propiedades:

En Caption tecleamos &Negrita. En Category tecleamos Formato. En Hint tecleamos Negrita|Establecemos la fuente en negrita. En ImageIndex tecleamos 11. Como Name vamos a establecer FormatoNegrita (para el comando Negrita del men Formato). En ShortCut escogemos Ctrl+B.

Aadimos otra accin estndar para Cursiva y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos Cursi&va. En Category tecleamos o elegimos Formato. En Hint tecleamos Cursiva|Establecemos la fuente en Cursiva. En ImageIndex tecleamos 12. Como Name vamos a establecer FormatoCursiva (para el comando Cursiva del men Formato). En ShortCut escogemos Ctrl+I.

Aadimos otra accin estndar para Subrayado y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos &Subrayado. En Category tecleamos o elegimos Formato. En Hint tecleamos Subrayado|Establecemos la fuente Subrayada. En ImageIndex tecleamos 13. Como Name vamos a establecer FormatoSubrayado (para el comando Subrayado del men Formato). En ShortCut escogemos Ctrl+U.

Aadimos otra accin estndar para Alinear izquierda y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos Alinear i&zquierda. En Category tecleamos o elegimos Formato. En Hint tecleamos Alinear izquierda|Alineacin del texto a la izquierda. En ImageIndex tecleamos 14. Como Name vamos a establecer FormatoAlinizquierda (para el comando Alinear izquierda del men Formato). No establecemos ShortCut para esta opcin.

Aadimos otra accin estndar para Alinear Centro y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos Alinear &centro. En Category tecleamos o elegimos Formato. En Hint tecleamos Alinear centro|Alineacin del texto centrado. En ImageIndex tecleamos 15. Como Name vamos a establecer FormatoAlincentro (para el comando Alinear centro del men Formato). No establecemos ShortCut para esta opcin.

Aadimos otra accin estndar para Alinear derecha y establecemos las siguientes propiedades en el inspector de objetos:

En Caption tecleamos Alinear &derecha. En Category tecleamos o elegimos Formato. En Hint tecleamos Alinear derecha|Alineacin del texto a la derecha. En ImageIndex tecleamos 16. Como Name vamos a establecer FormatoAlinderecha (para el comando Alinear derecha del men Formato). No establecemos ShortCut para esta opcin.

Vinculacin de las acciones con las imgenes. Aadir imgenes a un TImageList -Ir al indiceCerramos la ventana lista de acciones y volvemos al formulario. Con el componente ActionList1 seleccionado le asignamos ImageList1 a su propiedad Images, como vemos en la figura 9. Esto vincula las imgenes disponibles en ImageList1 a la propiedad Images de ActionList1, por lo que lo siguiente que debemos hacer es trabajar con ImageList1.

Figura 9 Tenemos ahora que aadir imgenes a la lista de imgenes de ImageList1 segn la planificacin que hemos ido realizando anteriormente y que resumimos en la siguiente lista. Men / Comando Archivo / Nuevo Archivo / Abrir Archivo / Guardar Archivo / Guardar como Archivo / Imprimir Archivo / Salir Edicin / Cortar Edicin / Copiar Edicin / Pegar Edicin / Deshacer Edicin / Seleccionar todo Edicin / Borrar Formato / Negrita Formato / Cursiva Formato / Subrayado Formato / Alinear izquierda Formato / Alinear centro Formato / Alinear derecha Ayuda / Contenidos Ayuda / Indice Ayuda / Acerca de Nombre del archivo nuevo.bmp abrir.bmp guardar.bmp --Imprimir.bmp salir.bmp Cortar.bmp Copiar.bmp Pegar.bmp deshacer.bmp --Borrar.bmp Negrita.bmp Cursiva.bmp Subrayado.bmp Align_izda.bmp Align_centro.bmp Align_derecha.bmp Ayuda.bmp ----Valor de la propiedad ImageIndex 0 1 2 -1 3 4 6 7 8 9 -1 10 11 12 13 14 15 16 5 -1 -1

Para ello hacemos doble clic en el componente ImageList1 del formulario y se nos mostrar una ventana como la que vemos en la figura 10. Debemos tener previamente preparadas en una carpeta todas las imgenes cuyo nombre hemos dado en la tabla anterior. Esta carpeta la situaremos copo una subcarpeta de la de nuestro proyecto a fin de poder localizarlas con rapidez.

Figura 10 Hacemos clic en el botn Add y se nos mostrar una nueva ventana titulada Add Images que nos va a permitir navegar para localizarla. Aunque acompaando a este tutorial tenemos las necesarias para nuestro proposito y, que ahora veremos como no todas se adaptan perfectamente a las condiciones requeridas, tambin podemos localizarlas por nuestra cuenta o cogerlas de las que tenemos en el directorio de instalacin del compilador, que por defecto es C:\Archivos de programa\Archivos comunes\Borland Shared\Images\Buttons. En nuestro caso tendremos algo similar a lo que vemos en la figura 11.

Figura 11 Hacemos clic en abrir y se nos muestra un mensaje como el que vemos en la figura 12, que nos avisa de que tenemos imgenes que no cumplen las condiciones establecidas para Imagelist y se nos ofrece la posibilidad de separarlas en 4 bibmaps diferentes. Vamos a contestar pulsando el botn No to All para que esa imgenes no se modifiquen.

Fi gura 12 El resultado obtenido es el que vemos en la Figura 13. Observamos que debajo de cada imagen aparece un nmero (se trata del ndice asociado a ella) y que todos los nmeros estn sobre un fondo gris indicando que estn todos seleccionado aunque se muestra la ltima en Selected Image en el recuadro superior izquierdo.

Figura13 Observamos como algunas de las imgenes no tienen el aspecto deseado, ya se nos habia advertido, pero podemos solucionarlo mediante las opciones que se nos presentan en Options. Por ejemplo, si nos vamos al principio de la lista vemos que las correspondientes a alineacin no se ven correctamente, pues bien lo podemos solucionar escogiendo la opcin Center, lo que nos valdr para casi todas y, en cualquier caso lo que debemos hacer es probar entre las tres opciones para ver la que nos ofrece un mejor resultado. Tengase en cuenta que estas imgenes no son uniformes en cuanto a diseo precisamente para mostrar estas posibilidades y que probablemente no sean las mejores para un resultado ms visual. Tambin debemos observar que el ndice que tienen no se corresponde con el de la tabla anterior, por ejemplo la imagen con ndice 0 corresponde a la de Archivo/Abrir y no Archivo/Nuevo que tiene como ndice 15. Para arreglar esto y que a cada imagen le corresponda su ndice basta con hacer un clic sobre la misma y arrastrarla moviendo el ratn hasta la posicin que le corresponda. Cuando finalicemos la ordenacin segn la tabla anterior cerramos la ventana pulsando en OK. Hacemos doble clic sobre el componente ActionList1 y en Categories seleccionamos (All Actions), debemos ver algo similar a la figura 14, donde comprobamos el aspecto de los grficos, que cada uno corresponde a la accin creada y que algunas de las acciones no van a tener grfico asociado (indice 1).

Figura 14 Creacin de una barra de mens -Ir al indiceEl siguiente componente que vamos a agregar a nuestro formulario va a ser un MainMenu de la pestaa Standard. Tampoco importa mucha su ubicacin puesto que este componente no es visible. Establecemos la propiedad Images de MainMenu1 a ImageList1 lo que nos permite agragar las imgenes anteriores a las entradas de los mens. Hacemos doble clic sobre el componente MainMenu1 y se nos muestra (Figura 15) la ventana de diseo de mens.

Figura 15 En el inspector de objetos modificamos la propiedad Caption para que sea &Archivo la primera entrada de men y presionamos la tecla Enter. Debemos tener entonces una situacin parecida a la de la figura 16.

Figura 16 En el diseador de mens seleccionamos, si no lo est, la entrada que acabamos de crear. Observamos como hay un recuadro o item vaco justo debajo, pues bien lo seleccionamos y en el inspector de objetos en la propiedad Action escogemos la accin apropiada segn lo planeado (ahora toma sentido todo el trabajo anterior), en este caso ArchivoNuevo y vemos los cambios que se producen de forma inmediata. Adems vemos como aparece otro recuadro o item vaco justo debajo, con lo que para completar esta entrada de men repetimos el proceso para todas las acciones asociadas a Archivo. Una vez finalizado el proceso vamos a mejorar el aspecto incluyendo separadores entre algunas opciones. Para crear un separador basta con poner un guin (-) en la propiedad Caption del ltimo recuadro o item vacio y arrastrarlo hasta la posicin deseada. Repetimos el proceso tantas veces como sea necesario hasta obtener el aspecto de la figura 17.

Figura 17 Vamos ahora a crear el men Edicin seleccionando el recuadrito a la derecha de Archivo y siguiendo un proceso similar al anterior para crear todas las entradas de este men. Repetimos el proceso para los dos mens restantes y obtendremos un resultado como el de la figura 18.

Figura 18 Cerramos el diseador de mens y ejecutamos nuestra aplicacin y observamos como se refleja todo el trabajo realizado hasta el momento en la misma aunque an no tenga la operatividad deseada. El programa es una aplicacin Windows completa con su barra de ttulo, icono, botones minimizar, maximizar y cerrar, su barra de mens realizando su trabajo aunque la mayora de las ordenes estn desactivadas y adems una barra de estado ya configurada aunque no operativa. Antes de comenzar a darle funcionalidad a las acciones vamos a crear una barra de botones para dar acceso rpido a algunas de las acciones. En este momento cerramos nuestra aplicacin para continuar. Creacin de una barra de herramientas -Ir al indiceEl siguiente componente que vamos a insertar en nuestro formulario va a ser un ToolBar de la pestaa Win32. Observaremos como aparece justo debajo de la barra de mens. Al componente ToolBar1 le vamos a establecer las siguientes propiedades en el inspector de objetos:

A la propiedad Indent le damos el valor 4, lo que har que los iconos se separen o sangren 4 pixeles a la izquierda de la barra de botones. Para Images escogemos ImageList1. La propiedad ShowHint (mostrar pistas) la ponemos a true.

Vamos a aadir botones y separadores a la barra de herramientas: Con ToolBar1 seleccionado clicamos con botn secundario y vamos aadiendo botones, veremos como van apareciendo las imgenes que habiamos asociado. No vamos a dejarlos todos por lo que algunos los seleccionaremos y eliminaremos con la tecla suprimir. De forma similar aadimos separadores hasta conseguir un aspecto como el de la figura 19. Para moverlos y ordenarlos los seleccionamos y arrastramos.

Figura 19 Ahora procedemos a asignarle a cada botn la accin correspondiente de la lista de acciones. Para ello hacemos clic sobre el botn y en el inspector de objetos escogemos en la propiedad Action la que le corresponda. Si ejecutamos el programa vemos que ya tiene algunas funcionalidades. Para ello vamos a teclear algn texto en el rea de edicin y vamos a comprobrar como se pueden realizar las acciones correspondientes a los botones y entradas de mens que estn activas, que no son otras que las que se aprecia la imagen correctamente y en el men no aparece desactivada. Algunas funcionalidades las vemos en la figura 20.

Figura 20 En este momento tenemos desarrollada una aplicacin con cierta operatividad sin escribir ms que una lnea de cdigo. Esto es lo que hace de C++ Builder un excelente desarrollador de aplicaciones RAD. A partir de aqu debemos escribir funciones que se denominan gestores de eventos o procedimientos para que se ejecuten las acciones que indique el usuario en tiempo de ejecucin. Creacin de gestores de eventos o procedimientos -Ir al indiceComo todas las entradas de men y botones de la barra de herramientas estn definidos en la lista de acciones podemos crear los manejadores de eventor desde dicha lista. No obstante, antes de comenzar con las acciones del men Archivo correspondientes a Nuevo, Abrir, Guardar y Guardar como vamos a indicar que estas no son independintes unas de otras y vamos a tener que llamar desde algunos gestores de eventos a los procedimientos correspondientes a otros. Esto lo vamos a entender rpidamente si vemos un ejemplo, supongamos que con el programa en funcionamiento hemos realizado cambios en la zona de edicin y que escogemos la accin Archivo Nuevo. Debemos advertir al usuario de esos cambios y darle la posiblidad de guardarlos, no guardarlos o cancelar la operacin. Mostramos la ventana correspondiente al cdigo Cpp del FormPrincipal de cualquiera de las formas conocidas y volvemos a la ventana en la que se muestra el formulario, por ejemplo pulsando F12 o el botn Toggle Form/Unit, y hacemos un doble clic sobre el componente ActionList1 para ver la lista de acciones creada anteriormente. Una vez aqu seleccionamos la categoria Archivo y hacemos un doble clic sobre ArchivoNuevo. Se abrir la ventana de edicin de cdigo (figura 21) con el cursor situado en el gestor del nuevo evento.

Figura 21 Justo donde est situado el cursor es donde teclearemos las lneas de cdigo necesarias para el funcionamiento de la accin Archivo/Nuevo, pero antes de ellos vamos a realizar algunas otras tareas que sern necesarias. Nos dirigimos a la ventana Object TreeView (si no est abierta la podemos activar desde el men View) y hacemos un doble clic sobre el componente FormPrincipal crendose el gestor del evento OnCreate del formulario. En donde tecleamos el cdigo siguiente con la finalidad descrita en los comentarios. RichEdit1->Clear(); //Borramos el contenido la ventana de edicin RichEdit1->Modified = false; //Establecemos a false el flag "modified" del RichEdit1 Otra de las necesidades que van a surgir es verificar si el fichero actual hay que guardarlo por existir modificaciones. Para poder archivar vamos a necesitar insertar un componente SaveDialog de la pestaa Dialog. Cuando se llama al mtodo Execute de SaveDialog se abre la ventana de Guardar como estndar de Windows. A SaveDialog1 le establecemosen en el inspector de objetos las siguientes propiedades:

Establecemos DefaultExt a txt. Desplegamos su propiedad Options la opcin ofOverwritePrompt la establecemos a true. De esta forma si el nombre de archivo ya existe no preguntar si deseamos reemplazarlo o no mediante una ventana de dialogo. Establecemos Title a Guardar como Hacemos doble clic en Filter para que se nos muestre la ventana de edicin de filtros donde vamos a especificar los tipos de archivos para la ventana de dialogo que pondremos como vemos en la figura 22.

Figura 22 Otro de los aspectos interesantes cuando realizamos tareas como la de guardar archivos es mostrar una barra de progreso que nos indique el estado de la tarea. Este aspecto lo vamos a resolver como vamos a describir seguidamente. Aadir un nuevo formulario a la aplicacin -Ir al indiceVamos a aadir un nuevo formulario a nuestro proyecto bien desde File/New/Form o el botn correspondiente de la barra de herramientas. Procedemos a salvar los nuevos archivos creados desde File/Save As ... con el nombre UnitProgreso.cpp y al formulario le ponemos como nombre FormProgreso y le establecemos desde el inspector de objetos las siguientes propiedades: BorderStyle = bsNone, Cursor = crHourGlass, Height = 56, Position = poScreenCenter y Widht = 365. Sobre este nuevo formulario situamos un componente ProgressBar de la pestaa Win32 y le cambiamos su propiedad Widht a 345 y Cursor = crHourGlass. Aadimos de la pestaa Additional un componente StaticText al que le establecemos las propiedades siguientes: Alignment = taCenter, Caption = 100 %, Cursor = crHourGlass, en Font le asignamos como color el Rojo y Widht = 33. Agregamos un componente Timer de la pestaa System al que cambiamos su propiedad Interval al valor 100. Seleccionamos el componente ProgressBar1 y clicando con el botn secundario del ratn seguimos el proceso de eleccin de alineacin que vemos en la figura 23. Este mismo proceso lo repetimos para el componente StaticText1.

Figura 23 Creamos el gestor de evento OnTimer del componente Timer1 haciendo doble clic sobre el componente y le asociamos el siguiente cdigo: /* Transcurrido el tiempo indicado en la propiedad "Interval" del Timer1 incrementamos el progreso de la barra. Al llegar al final -Position = 100- ponemos la barra en su posicin de inicio y cerramos la ventana */

if (ProgressBar1->Position == 100) { ProgressBar1->Position = 0; /* cerramos la ventana cuando la barra de progreso llegue al final */ this->Close(); } else { /* hacemos que la barra de progreso avance segn el valor establecido en Step*/ ProgressBar1->StepIt(); } // Cambiamos el texto al valor de la barra de progreso StaticText1->Caption=AnsiString(ProgressBar1->Position)+ "%"; La ltima tarea a realizar para que el nuevo formulario se pueda mostrar cuando nos interese es poner el include correspondiente en el UnitPrincipal. En el editor de cdigo de C++Builder tenemos dos pestaas: UnitPrincipal.cpp y UnitProgreso.cpp, de ellas seleccionamos con un clic UnitPrincipal.cpp. Para aadir el include nos dirigimos a File/Include Unit Hdr y en la ventana que se nos muestra seleccionamos UnitProgreso y pulsamos en OK. Podemos comprobar que se aade la lnea #include "UnitProgreso.h" al principio de UnitPrincipal.cpp. El cdigo para el funcionamiento de la accin Archivo/Nuevo es el siguiente: /*Lo primero es verificar si el fichero actual hay que guardarlo por existir modificaciones. Al seleccionar esta accin comprobamos si se han producido cambios en el texto, y si es as permitir al usuario guardar esos cambios. Finalmente se borrar el texto de la ventana de edicin */ if (RichEdit1->Modified) { int bpuls = Application->MessageBox("El archivo actual ha cambiado. Salvar los cambios?","! Atencin !", MB_ICONEXCLAMATION | MB_YESNOCANCEL); if (bpuls == IDYES) ArchivoGuardarExecute(Sender); ******** if (bpuls == IDCANCEL) return; } /*Si hay algn caracter escrito lo borramos*/ if (RichEdit1->Lines->Count>0) RichEdit1->Clear(); SaveDialog1->FileName=""; Ojo con la lnea ArchivoGuardarExecute(Sender); ******** destacada, se trata de una llamadada a un procedimiento que an no hemos creado, el correspondiente a guardar archivo, por lo que si compilamos en este momento nos dar errores. Adems tenemos dos acciones para guardar, por lo que se nos va a plantear un problema similar cuando creemos sus gestores de eventos correspondiente. Es por tanto necesario para seguir completando la aplicacin que introduzcamos el cdigo necesario para las acciones de guardar y Guardar como, que hacemos seguidamente. Vamos por tanto a crear el gestor de evento para la opcin Guardar del men Archivo, que hacemos de forma similar a la descrita anteriormente y donde tecleamos el siguiente cdigo: /* Si ya se ha especificado un nombre de fichero no es necesario abrir el cuadro de dilogo Guardar Fichero. Solo hay que guardarlo con SaveToFile(). */ if (SaveDialog1->FileName !="") { RichEdit1->Lines->SaveToFile(SaveDialog1->FileName); FormProgreso->ShowModal(); RichEdit1->Modified=false; StatusBar1->Panels->Items[0]->Text = SaveDialog1->FileName; } else ArchivoGuardarComoExecute(Sender); //Si el archivo no tiene nombre ejecutar "guardar como" Observamos que en la ltima lnea llamamos a otro procedimiento an no creado y que procederemos a crear posteriormente y que en la lnea StatusBar1->Panels->Items[0]->Text = SaveDialog1->FileName; vamos a tener un problema y es que en la propiedad Hint hemos establecido que se muestren las pistas rpidas tanto al situarnos sobre el objeto como en la barra de estado, pero estas ltimas deben mostrarse en el item[0] que lo tenemos asignado al nombre del archivo. Para solucionar este problema y que las pistas rpidas se muestren tanto en los botones como en la barra de estado debemos establecer la propiedad Autohint de StatusBar1 a true y adems intercambiar los paneles 1 y 2. Vamos a realizar las tareas que describimos: 1. Seleccionamos el componente StatusBar1 y le cambiamos su propiedad Autohint a true.

2.

Hacemos un doble clic sobre el componente StatusBar1 para que se muestren los paneles y seguimos el proceso de la figura 24.

Figura 24 3. 4. Finalmente a las lneas (StatusBar1->Panels->Items[0]->Text = NombreArchivo;) debemos cambiarlas el nmero de item a 1 para que sea ah donde se muestra el nombre del archivo. Al componente ToolBar1 le establecemos su propiedad Hint = |Barra de botones de acceso rpido, de forma que cuando no tengamos el cursor situado sobre ninguno de los botones se muestre en la barra de estado ese mensaje. Observe como solamente tiene la parte correspondiente a mostrar las pistas en la barra de estado.

Para finalizar con la barra de estado nos falta que los items 3 y 5 nos muestren la fecha y la hora. Para ello insertamos un componente Timer de la pestaa System en nuestro formulario principal, nos aseguramos que su propiedad Interval vale 1000 (esta propiedad determina cada cuanto tiempo en milisegundos se produce el evento OnTimer) y en su evento OnTimer tecleamos lo siguiente: StatusBar1->Panels->Items[3]->Text = Now().DateString(); StatusBar1->Panels->Items[5]->Text = Now().TimeString(); Ya estamos en condiciones de seguir con el resto de gestores de eventos para otras acciones de la lista. Vamos por tanto a crear el gestor del evento para la accin ArchivoAbrir, que haremos de forma similar a como hemos creado ArchivoNuevo. Cuando abrimos un archivo se muestra la ventana de dialogo Abrir. Para asociarla a la accin Abrir debemos colocar en nuestro formulario un componente TOpenDialog de la pestaa Dialogs. Al componente OpenDialog1 le establecemos las siguientes propiedades mediante el inspector de objetos.

Establecemos DefaultExt a txt. Establecemos Title a Abrir Hacemos doble clic en Filter para que se nos muestre la ventana de edicin de filtros donde vamos a especificarexactamente los mismos tipos de archivos que vemos en la figura 22.

Mostramos la lista de acciones de ActionList1, seleccionamos la categoria Archivo y hacemos un doble clic sobre ArchivoAbrir. Se abrir la ventana de edicin de cdigo con el cursor situado en el gestor del evento ArchivoAbrirExecute. Tecleamos el siguiente cdigo: /*Lo primero es verificar si el fichero actual hay que guardarlo por existir modificaciones. Al seleccionar esta accin comprobamos si se han producido cambios en el texto, y si es as permitir al usuario guardar esos cambios. Posteriormente se pedir al usuario que elija el archivo que se abrir*/ if (RichEdit1->Modified) { int bpuls = Application->MessageBox("El archivo actual ha cambiado. Salvar los cambios?","! Atencin !", MB_ICONEXCLAMATION | MB_YESNOCANCEL); if (bpuls == IDYES) ArchivoGuardarExecute(Sender); if (bpuls == IDCANCEL) return; } OpenDialog1->FileName =""; if (OpenDialog1->Execute()) { if (RichEdit1->Lines->Count>0) RichEdit1->Clear();

RichEdit1->Lines->LoadFromFile(OpenDialog1->FileName); SaveDialog1->FileName = OpenDialog1->FileName; } RichEdit1->Modified = false; StatusBar1->Panels->Items[1]->Text = OpenDialog1->FileName; Vamos con la ltima accin de este grupo. Mostramos la lista de acciones de ActionList1, seleccionamos la categoria Archivo y hacemos un doble clic sobre ArchivoGuardarComo. Se abrir la ventana de edicin de cdigo con el cursor situado en el gestor del evento ArchivoGuardarComoExecute. Tecleamos el siguiente cdigo: //Ttulo de la ventana guardar como SaveDialog1->Title = "Guardar Archivo Como..."; //Establecemos el directorio por defecto al ltimo directorio que hemos accedido SaveDialog1->InitialDir = ExtractFilePath(SaveDialog1->FileName); if (SaveDialog1->Execute()) { RichEdit1->Lines->SaveToFile(SaveDialog1->FileName); FormProgreso->ShowModal(); StatusBar1->Panels->Items[1]->Text = SaveDialog1->FileName; RichEdit1->Modified=false; } Para sincronizar todos estos eventos con los cambios que se producen en el rea de edicin RichEdit1 vamos a establecer un nuevo gestor de evento. Nos situamos en el formulario principal, seleccionamos el componente RichEdit1 y en el inspector de objetos (pestaa eventos) hacemos doble clic en OnChange, tecleando la siguiente lnea de cdigo: RichEdit1->Modified = true; que har que el flag se establezca a true ante cualquier cambio en el rea de edicin. Creamos el gestor de eventos para la accin Salir del men Archivo y tecleamos la lnea: Application>Terminate(); Si en este momento ejecutamos la aplicacin presionando F9, haciendo clic en el botn run o escogiendo la opcin Run del men Run veremos que casi todas las acciones estn operativas. Creacin de la ventana Acerca de Editor -Ir al indicePosteriormente volveremos al men Archivo para la accin Imprimir, veremos como introducir nuevas acciones y alguna otra cosa, pero ahora nos vamos a dedicar a la accin Acerca de Editor del men ayuda. Muchas aplicaciones incluyen una ventana Acerca de para mostrar informacin como el nombre, la versin, logotipo, enlace a pgina web y copyright. Para crear la ventana Acerca de Editor: Vamos al men File y escogemos File/New/Other para ver la ventana denominada almacn de objetos (figura 25), donde seleccionamos la pestaa Forms.

Figura 25 Vamos a efectuar los siguientes cambios: Eliminamos todos los objetos TLabel. Al objeto TImage situado en Panel1 con el nombre de ProgramIcon le establecemos la propiedad Height = 92 la propiedad Width = 102 y pulsando en la diresis de Picture localizamos en la carpeta correspondiente el logotipo LogoIES.jpg. La propiedad Name del formulario la establecemos al valor Acerca y la propiedad Caption hacemos que valga Acerca de Editor. Salvamos nuestro trabajo, dando como nombre a la nueva Unit creada UnitAcerca, en la carpeta Acerca que debemos crear en nuestro directorio de trabajo. Sobre el objeto Panel1 situamos un componente TMemo al que modificamos su propiedad Font para establecerla en Arial de 9 puntos en negrita y colo rojo oscuro y la propiedad Lines para que valga: I.E.S. Virgen de las Nieves Avda. de Andaluca N 38 18014 GRANADA Telfonos: 958 893380 (Corporativo: 171380) FAX: 958 893386 (Corporativo: 171386) Sobre Panel1 situamos un componente TLabel al que vamos establecer su propiedad Font a Arial de 10 puntos en negrita y colo verde. A Label1 y al formulario les vamos a crear los gestores de eventos con el cdigo que vemos en la figura 26.

Figura 26 Esto har que Label1 acte como un hipervinculo a la web especificada, siempre que tenga acceso a internet, donde se aloja el presente tutorial. Aadimos un componente TPanel sobre el que situamos un TImage y un TMemo. Al componente Image1 le establecemos la propiedad Height = 61 la propiedad Width = 124 y pulsando en la diresis de Picture localizamos en la carpeta correspondiente el logotipo LogoDPTO.jpg. Las propiedades BevelInner y BevelOuter de Panel2 las ponemos iguales a las de Panel1. Situamos otro componente TPanel sobre el que situamos 9 componentes TLabel y un TBevel. Situamos tambin otro componente TMemo. Modificamos los componentes nuevos para obtener algo similar a la figura 27. Finalmente modificamos el Caption del componente TButton para que se Aceptar.

Figura 27 Identificacin de la aplicacin -Ir al indiceVamos a centrarnos ahora en la gestin de este apartado por medio del compilador. Nos dirigimos al men Project, escogemos la Options y en la ventana que se muestra seleccionamos la pestaa Version Info para completarla como vemos en la figura 28.

Figura 28

Situados en el formulario Acerca creamos el gestor del evento OnActivate y tecleamos el siguiente cdigo relativo a mostrar los campos (Key) y sus valores (Value) en los componentes TLabel correspondientes. DWORD h; /* Llamada para intentar obtener los datos del ejecutable. Si el Sistema Operativo no es capaz de obtener estos datos, la llamada devuelve el valor 0 (y por tanto acabamos)*/ DWORD Size=GetFileVersionInfoSize(Application->ExeName.c_str(), &h); if(Size==0) return ; // Reserva de memoria char *buf; buf=(char *)GlobalAlloc(GMEM_FIXED, Size); if (GetFileVersionInfo(Application->ExeName.c_str(),h,Size,buf)!=0) { char *ValueBuf; UINT Len; /* Una vez tenemos los datos del ejecutable, las llamadas a VerQueryValue obtienen para cada parametro concreto su valor establecido en las opciones del proyecto (como Compaia, Version, etc...). El parametro solicitado se indica en el segundo parametro de la funcion mediante una cadena. */ VerQueryValue(buf, "\\VarFileInfo\\Translation", &(void *)ValueBuf,&Len); if (Len>=4) { AnsiString CharSet=IntToHex((int )MAKELONG(*(int *)(ValueBuf+2),*(int *)ValueBuf), 8); // Obtener nombre de la compaia. CharSet se utiliza unicamente para indicar el juego de caracteres o idioma con el que queremos el resultado if (VerQueryValue(buf,AnsiString("\\StringFileInfo\\"+CharSet+"\\CompanyName").c_str(),&(void *)ValueBuf,&Len) !=0) Label4->Caption = ValueBuf; //Nombre del programa if (VerQueryValue(buf,AnsiString("\\StringFileInfo\\"+CharSet+"\\ProductName").c_str(),&(void *)ValueBuf,&Len) !=0) Label6->Caption = ValueBuf; // Version del ejecutable if (VerQueryValue(buf,AnsiString("\\StringFileInfo\\"+CharSet+"\\FileVersion").c_str(),&(void *)ValueBuf,&Len)!=0) Label8->Caption = ValueBuf; //Copyright if (VerQueryValue(buf,AnsiString("\\StringFileInfo\\"+CharSet+"\\LegalCopyright").c_str(),&(void *)ValueBuf,&Len)!=0) Label10->Caption = ValueBuf; } } GlobalFree(buf); //Liberamos la memoria reservada Impresin del documento -Ir al indiceAntes de nada debemos indicar que en este apartado no se realiza un estudio exhaustivo de la impresin de documentos, tan solo usaremos lo fundamental para poder imprimir el contenido del rea de edicin. Vamos a colocar un componente TPrintDialog de la pestaa Dialog en nuestro formulario principal. Desplegamos la lista de acciones y buscamos en Archivo la que denominamos ArchivoImprimir sobre la que hacemos doble clic para crear su gestor de evento en el que tecleamos el cdigo siguiente: if (PrintDialog1->Execute()) //Si se ejecuta el dialogo de impresin RichEdit1->Print(Caption); //Imprime el contenido de RichEdit1 En este caso cabe preguntarse la utilizacin de la sentencia if, pues bien hay que situarla para que cuando la respuesta en la ventana de dialogo Imprimir (figura 29) sea pulsar el botn Cancelar retornemos al documento y no se ejecute la accin Print.

Figura 29 Para depurar el cdigo referente a la impresin de documentos se propone al lector trabajar con un componente TPageControl para controlar las pginas del documento y las pistas que nos proporciona el cdigo siguiente: PrintDialog1->Options.Clear(); PrintDialog1->Options << poPageNums << poSelection; PrintDialog1->FromPage = 1; PrintDialog1->MinPage = 1; PrintDialog1->ToPage = PageControl1->PageCount; PrintDialog1->MaxPage = PageControl1->PageCount; if (PrintDialog1->Execute()) { int Start, Stop; // Determinamos el rango que el usuario quiere imprimir switch (PrintDialog1->PrintRange) { case prSelection: Start = PageControl1->ActivePage->PageIndex; Stop = Start; break; case prPageNums: Start = PrintDialog1->FromPage - 1; Stop = PrintDialog1->ToPage - 1; break; default: // prAllPages - Imprimir todas las pginas Start = PrintDialog1->MinPage - 1; Stop = PrintDialog1->MaxPage - 1; break; } // Impresin de las pginas Printer()->BeginDoc(); for (int i = Start; i <= Stop; i++) { PageControl1->Pages[i]->PaintTo(Printer()->Handle, 10, 10); if (i != Stop) Printer()->NewPage(); } Printer()->EndDoc(); } A falta de completar la ayuda del programa, este ya estara completo y con total funcionalidad, pero si somos observadores vemos que le podemos asociar algunas otras funcionalidades que lo hagan ms atractivo. Entre otras cosas podemos aadirle funcionalidad en cuanto a trabajo con tipos de fuentes,

colores, buscar, buscar y reemplazar, numeraciones o vietas, mens contextuales, etc. Pues bien vamos a aadir alguna de estas funcionalidades. Otras acciones o funcionalidades -Ir al indice-

Configurar impresora

Vamos a aadir una nueva entrada al men Archivo que va a ser Configurar Impresora. Para ello nos dirigimos al componente MainMenu1 y hacemos doble clic, aadimos una nueva entrada en el men Archivo y le establecemos como propiedad Name = ConfigurarImpresora, Caption = &Configurar Impresora ... y en la propiedad Bitmap localizamos y cargamos el archivo ConfigImpres.bmp. Desplazamos esta nueva entrada hasta situarla justo debajo de Imprimir y hacemos doble para crear el gestor de evento correspondiente, en el que vamos a teclear la siguiente lnea de cdigo: PrinterSetupDialog1->Execute(); Podemos aadir un botn a la barra de herramientas para este mismo fin?. La respuesta es que si, nos dirigimos a la pestaa Additional y escogemos un componente TSpeedButton que situamos sobre la barra de herramientas y en la propiedad Glyph localizamos y cargamos el archivo ConfigImpres.bmp. Desplazamos este botn hasta situarla justo a la izquierda del correspondiente a Imprimir. Cambiamos la propiedad Hint al valor Configurar Impresora|Opciones de configuracin de la impresora del sistema. Ahora nos surge otra pregunta, cmo hacemos que responda al mismo cdigo que hemos tecleado para el evento anterior?, pues bien, para ello seleccionamos el componente SpeedButton1 y en el inspector de objetos pulsamos en la pestaa Events y en el evento OnClick. Para seleccionar una de las funciones ya escritas, desplegamos la lista de funciones pulsando sobre la flecha que aparece a la derecha del evento OnClick (En nuestro caso esta ser ConfigurarImpresoraClick). Dicho de otra forma, hemos efectuado lo que hemos realizado con acciones de otra forma, aunque podamos haber declarado esta nueva accin y seguir los procedimientos ya descritos.

Mostrar/Ocultar la barra de herramientas y Fuente -Ir al indice-

Vamos a aadir dos nuevas entradas al men Formato, una para mostrar u ocultar la barra de herramientas y otra para mostrar el dialogo de fuentes, agregando los correspondientes separadores debemos tener algo como la figura 30.

Figura 30 La propiedad Checked correspondiente a la entrada Barra de Herramientas la establecemos a true, de forma que al iniciar la aplicacin dicha barra est visible. Hacemos doble clic sobre esta nueva entrada para crear su gestor de evento en el que tecleamos el siguiente cdigo: BarradeHerramientas1->Checked = !BarradeHerramientas1->Checked; //Conmutamos la propiedad Checked if (BarradeHerramientas1->Checked == true) ToolBar1->Visible = true;

else ToolBar1->Visible = false; Situamos en nuestro formulario principal un componente TFontDialog y hacemos doble clic sobre la entrada Fuente del menu Formato (teniendo desplegado el diseador de mens MainMenu1) para crear su gestor de evento en el que tecleamos el siguiente cdigo: if (FontDialog1->Execute()) { FontDialog1->Options.Clear(); FontDialog1->Options << fdLimitSize; //Limitamos el tamao de fuentes disponible entre 8 y 28 FontDialog1->MaxFontSize = 28; FontDialog1->MinFontSize = 8; FontDialog1->Options << fdApplyButton; //Pasamos el control al evento FontDialog1Apply y --> /* --> Muestra el botn Aplicar en la ventana de dialogo que permite ver los efectos en el documento sin cerrar la ventana*/ } Con el componente FontDialog1 seleccionado mostramos la pestaa Events y hacemos doble clic a la derecha del evento OnApply para teclear el siguiente cdigo: //Establecemos como fuente de RichEdit1 la de FontDialog1 RichEdit1->Font = FontDialog1->Font; Por otra parte tambin es habitual disponer en la barra de herramientas de componentes del tipo TComboBox para seleccionar la fuente y el tamao de la misma. Vamos a efectuar el trabajo necesario para llevar a cabo esta tarea. Situamos un componente TComboBox de la pestaa Standard sobre la barra de herramientas y le establecemos las siguientes propiedades:

o o o

Hint = Fuente|Seleccionar fuente Sorted = true Text la dejamos vaca

Debemos aadir las lneas siguientes al evento OnCreate del FormPrincipal: ComboBox1->Items = Screen->Fonts; //Establecemos como items las fuentes disponible para la pantalla ComboBox1->ItemIndex = 0; //Muestra por defecto el primer item de la lista. Creamos el gestor del evento OnChange del componente ComboBox1 y tecleamos el siguiente cdigo: /* La propiedad SelAttributes de un TRichEdit establece las caractersticas del texto seleccionado en el componente en el que se selecciona, en nuestro caso RichEdit1. Lo que hacemos es darle como nombre la que seleccionamos en nuestro ComboBox1 */ RichEdit1->SelAttributes->Name = ComboBox1->Text; RichEdit1->SetFocus(); //Devolvemos el control a la zona de edicin Junto al componente anterior situamos un CSpinEdit que encontraremos en la pestaa Samples y al que establecemos las siguientes propiedades en el inspector de objetos:

o o o o o o

EditorEnabled = false - impedir que tecleemos valores Hint = Tamao de fuente|Seleccionamos el tamao de la fuente Increment = 2 - Incrementos al pulsar sobre las flechitas MaxValue = 96 - Valor mximo para tamao de fuente MinValue = 8 - Valor mnimo para tamao de fuente Value = 10 - Valor por defecto para tamao de fuente

Creamos el gestor del evento OnChange del componente CSpinEdit1 y tecleamos el siguiente cdigo: //Establecemos el tamao de la seleccin al valor de CSpinEdit1 con las conversiones necesarias. RichEdit1->SelAttributes->Size = StrToInt(CSpinEdit1->Text.c_str()); RichEdit1->SetFocus(); //Devolvemos el control a la zona de edicin

Finalmente desplazamos estos dos compoentes a la derecha del correspondiente a Pegar y colcamos a la derecha de CSpinEdit1 un separador. En estos momentos nuestro formulario en tiempo de diseo tendr un aspecto como el de la figura 31.

NO SE HAN DEPURADO LAS DESIGUALDADES ENTRE LA ENTRADA DEL MEN FORMATO Y ESTOS DOS NUEVOS COMPONENTES

Figura 31

Colores de fondo y de fuente -Ir al indice-

Vamos a continuar con otro componente de la pestaa Dialogs, se trata de un componente TColorDialog que nos va a permitir trabajar con colores. A este componente le vamos a establecer las propiedades en el inspector de objetos que vemos en la figura 32 siguiente:

Figura 32 Situamos dos componentes TSpeedButton de la pestaa Additional sobre nuestra barra de herramientas justo a la izquierda del botn de ayuda y, tambin situamos un separador. Al primero de ellos le asociamos en su propiedad Glyph el grfico ColorFuente.bmp y al segundo ColorFondo.bmp. Creamos el gestor de eventos para color de fuente y tecleamos el siguiente cdigo: //Establecemos el color de la seleccion actual al elegido con colorDialog if (ColorDialog1->Execute()) RichEdit1->SelAttributes->Color = ColorDialog1->Color; Para el gestor de evento del color de fondo el cdigo es el siguiente: //Hacemos que el color de RichEdit1 sea el elegido en la ventana ColorDialog if (ColorDialog1->Execute()) RichEdit1->Color=ColorDialog1->Color;

Vietas -Ir al indice-

Vamos a situar otro botn sobre la barra de herramientas que nos permita realizar este tpico formateo de prrafos agregando un circulito a la izquierda del prrafo o prrafos seleccionados. Esta vez nos situamos sobre la barra de herramientas, pulsamos botn secundario del ratn y escogemos New Button y lo situamos justo a la derecha del correspondiente a color de fondo. Debemos asignarle una imagen, pero recordemos que esto la hacemos a travs de la propiedad ImageIndex asociada al componente ImageList1, por lo tanto hacemos doble clic sobre el mismo, pulsamos el botn Add y localizamos el archivo Vinetas.bmp, que observaremos que se sita en la posicin (ndice) 17. Seleccionamos ahora el ToolButton en la barra de herramientas y le establecemos mediante el inspector de objetos las siguientes propiedades:

o o

ImageIndex = 17 Style = tbsCheck

Hacemos doble clic sobre ToolButton y le asociamos al gestor del evento OnClick el codigo siguiente: if (ToolButton24->Down == true) { RichEdit1->Paragraph->Alignment = taLeftJustify;

RichEdit1->Paragraph->FirstIndent = 15; RichEdit1->Paragraph->Numbering = nsBullet; } else { RichEdit1->Paragraph->Alignment = taLeftJustify; RichEdit1->Paragraph->FirstIndent = 0; RichEdit1->Paragraph->Numbering = nsNone; }

Buscar y reemplazar -Ir al indice-

Nos dirigimos a la pestaa Dialogs y situamos en nuestro formulario un componente TFindDialog y otro TReplaceDialog. Vamos a situar otros dos botones sobre la barra de herramientas que nos permitan realizar las acciones de Buscar y Buscar y reemplazar, para los que nos situamos sobre la barra de herramientas, pulsamos botn secundario del ratn y escogemos New Button y lo situamos justo a la derecha del correspondiente a vietas y repetimos la accin para el segundo que colocamos a continuacin del anterior. Debemos asignarles una imagen, pero recordemos que esto la hacemos a travs de la propiedad ImageIndex asociada al componente ImageList1, por lo tanto hacemos doble clic sobre el mismo, pulsamos el botn Add y localizamos el archivo Buscar.bmp y repitiendo el proceso el archivo BuscarReemplazar.bmp, que observaremos que se sitan en la posicin (ndice) 18 y 19 respectivamente. Vamos en primer lugar con el botn correspondiente a Buscar, al que establecemos su propiedad Hint = Buscar|Buscar el texto especificado. Hacemos doble clic sobre el mismo para crear su gestor de evento y, en el mismo, tecleamos: FindDialog1->Execute(); //Pone en ejecucin a FindDialog1 Pero esto por si solo no sirve para nada, porque debemos indicar en el evento OnHint de FindDialog1 el cdigo necesario para realizar bsquedas, que es el siguiente: int Encontrar, PosIncicial, HastaFinal; //Comenzar la bsqueda despus de la seleccin actual si la hay, en otro caso comenzar desde el principio del texto if (RichEdit1->SelLength) PosIncicial = RichEdit1->SelStart + RichEdit1->SelLength; else PosIncicial = 0; //HastaFinal es la longitud desde PosIncicial hasta el final del texto en RichEdit1 HastaFinal = RichEdit1->Text.Length() - PosIncicial; Encontrar = RichEdit1->FindText(FindDialog1->FindText, PosIncicial, HastaFinal, TSearchTypes()<< stMatchCase); if (Encontrar != -1) { RichEdit1->SetFocus(); RichEdit1->SelStart = Encontrar; RichEdit1->SelLength = FindDialog1->FindText.Length(); } else Application->MessageBox("No existen coincidencias en la bsqueda","! Advertencia !", MB_ICONINFORMATION | MB_OK); Vamos en segundo lugar con el botn correspondiente a Reemplazar, al que establecemos su propiedad Hint = Reemplazar|Reemplaza el texto especificado por otro dado. Hacemos doble clic sobre el mismo para crear su gestor de evento y, en el mismo, tecleamos: ReplaceDialog1->Execute(); //Pone en ejecucin a ReplaceDialog1 De igual forma que anteriormente debemos ahora crear el evento OnReplace del componente ReplaceDialog1 al que le tecleamos el siguiente cdigo: TReplaceDialog *Reem = (TReplaceDialog *)Sender; //Realizamos una bsqueda global int PosSel = RichEdit1->Lines->Text.Pos(Reem->FindText); if (PosSel > 0)

{ RichEdit1->SelStart = PosSel - 1; RichEdit1->SelLength = Reem->FindText.Length(); //Sustituir el texto seleccionado RichEdit1->SelText = Reem->ReplaceText; } else Application->MessageBox("No existen coincidencias en la bsqueda","! Advertencia !", MB_ICONINFORMATION | MB_OK); Sera muy conveniente depurar el cdigo correspondiente a este apartado as como realizar las correspondientes entradas de men para todas las acciones que hemos introducidos en la barra de herramientas.

Men contextual -Ir al indice-

Un men contextual o men emergente es aquel que se desplega cuando pulsamos el botn derecho o secundario del ratn. Seleccionamos el componente PopUpMenu de la pestaa Standard y lo colocamos en el formulario. Fijamos Name=MenuEmergente. Este men se disear con el diseador de mens de forma similar a la que hemos seguido con el men principal. Aadimos las opciones con las propiedades siguientes (Podemos aadir otras si queremos): Cortar: Name = EmergenteCortar, Caption = Cortar, y ShortCut = Ctrl+X, Copiar: Name = EmergenteCopiar, Caption = Copiar y ShortCut = Ctrl+C, Pegar: Name = EmergentePegar, Caption = Pegar y ShortCut = Ctrl+V, Incluir un separador: Caption = Color de fuente: Name = EmergenteCFuente y Caption = Color de fuente, Color de fondo: Name = EmergenteCFondo y Caption = Color de fondo, Incluir un separador: Caption = Acerca de Editor: Name = EmergenteAcercade y Caption = Acerca de Editor El aspecto del componente en tiempo de diseo lo vemos en la figura 33 siguiente.

Figura 33 El men contextual puede asociarse a cualquier componente que tenga asociada la propiedad PopupMenu. En este caso se asociar al componente RichEdit1 para que al pulsar el botn derecho del ratn se despliegue el men que acabamos de crear. Para esto, seleccionmos dicho componente, accedemos a la propiedad PopupMenu y seleccionamos MenuEmergente (el nico disponible). Para las entradas Cortar, Copiar, Pegar y Acerca de Editor tenemos fcil asignarles el cdigo necesario para que trabajen, basta con seleccionar para cada caso la propiedad Action adecuada. En el caso Color de fuente y Color de fondo se trata de dos componentes TSpeedButton con sus gestores de evento, lo que debemos hacer es asociar al evento OnClick de la entrada correspondiente del men emergente el correspondiente de la lista desplegable disponible.

Ayuda -Ir al indiceRespecto a la ayuda sobre la aplicacin nos vamos a remitir al tutorial especfico sobre el tema que tenemos disponible en el siguiente enlace.

Creacin de la ayuda de nuestra aplicacin

Finalmente vamos crear un nuevo evento para el formulario principal, el OnPaint, en el que vamos a escribir el siguiente cdigo: this->ControlStyle << csOpaque; El aspecto final de la aplicacin con un fichero cargado (tambin se adjunta en la documentacin) y la ventana Acerca de Editor es el de la figura siguiente:

... y con esto lo damos por finalizado.

Si ha llegado hasta este punto debe haberle parecido interesante este tutorial, an as debo volver a recordar que su misin no es otra que servir de apoyo al estudio de los alumnos/as que cursan el mdulo de Tcnicas de Programacin en el C.F.G.S. de Desarrollo de Productos Electrnicos en el I.E.S. Virgen de las Nieves de Granada. Al final pondr unos enlaces que permitan descargarse los archivos de imagen necesarios, una copia del archivo Editor.exe ambos como archivos zip para que pueda trabajar con l.

El autor no adquiere ni requiere ninguna propiedad sobre el uso y distribucin del mismo pero si agradecer que se le comuniquen los errores encontrados, las sugerencias que estime oportunas y la posible confirmacin de que le ha resultado til, mediante el correo electrnico de contacto. El intercambio de informacin nos permitir mejorar a todos.
e-mail de contacto tutoriales@virgendelasnieves.es Imgenes y documento necesarios para el desarrollo de la aplicacin descargar zip Una copia del ejecutable descargar zip