Curso de C++ Builder


Un sencillo editor de texto



En este ejemplo se explica cómo crear rápidamente una aplicación para Windows con C++ Builder. La aplicación que se va a presentar consiste en un editor de texto con bastante funcionalidad, aunque muy mejorable. No debe entenderse que la aplicación presentada está cerrada, más bien al contrario, y el alumno puede añadirle más funcionalidad, lo que le permitirá ampliar sus conocimientos sobre programación de aplicaciones visuales con C++ Builder.

Este ejercicio se estructura como sigue:

  1. Crear y Configurar el proyecto.
  2. Mostramos cómo crear un proyecto (conjunto de ficheros de programa y formularios asociados a una aplicación) y cómo configurarlo. Básicamente, a asociar nombres representativos a los ficheros descartando los que C++ Builder asocia por defecto.

  3. Configurar el formulario principal.
  4. Mostramos con profundidad cómo configurar un formulario, desde añadir una barra rápida hasta cuadros de diálogo. En esta sección se presentan los componentes habituales de una aplicación Windows.

  5. Añadir menús al formulario.
  6. Mostramos diversas técnicas para añadir menús y submenús y cómo incorporar un menú cotextual.

  7. Escribir el código del programa.
  8. Una vez diseñado el formulario hay que escribir el código C++ de los manipuladores de eventos asociados a los componentes

  9. Añadir un nuevo formulario (Acerca de ...)
  10. Aquí mostramos cómo se pueden añadir nuevos formularios.

  11. Sobre la barra de estado y los cuadros de pista (Hints).
  12. Mostramos cómo añadir cuadros de pista a los botones rápidos y cómo mostrar información en la barra de estado.

 

Como referencia, esta es la estructura del proyecto que vamos vamos a crear, tal como debe verse en el gestor de proyectos.

 

 

  1. Crear y configurar el proyecto.
  2. Para más información, pinchar el siguiente enlace:

    En primer lugar, crear el directorio EjemploEditor y, si procede, una nueva aplicación ( File | New Applicaction).

    1. Cambiar el nombre y título del formulario principal:

    2. Con el inspector de objetos, cambiar la propiedad Caption por Mi editor de texto y la propiedad Name por MainForm.
    3. Guardar (File | Save As) la unidad asociada al formulario (Unit1.cpp, por defecto) como FuncsEditor.cpp. Observar que Unit1.h ha cambiado automáticamente a FuncsEditor.h
    4. Guardar (File | Save Project As) el proyecto (Project1.bpr, por defecto) como MiEditor.bpr.
    5. Dar un nombre a la aplicación y fijar un icono (Project | Options | Application).
      Dar como título: Mi editor de texto 1.0 y seleccionar un icono.

    Ahora podemos construir el ejecutable y probarlo: seleccionar Project | Build MiEditor y a continuación, Run | Run.

     

  3. Configurar el formulario principal.
  4.  

    2.1. Agregar un componente Memo.

    Seleccionar, en la solapa Standard de la paleta de componentes, el componente Memo. Colocarlo sobre el formulario (no nos preocupamos de su tamaño ni de su alineación respecto al formulario).

    Cambiar la propiedad Name por Memo, seleccionar la propiedad Lines y dejar limpio su contenido con el editor de cadenas.

    Guardar los ficheros: File | Save All

     

    2.2. Agregar una barra rápida.

     

     

    2.3. Agregar una barra de estado.

     

    Seleccionar un componente StatusBar (solapa Win32). Fijar Name = StatusBar.

     

    2.4. Reajustar el componente Memo.

     

    Seleccionar el componente Memo y fijar la propiedad Align= alClient. Añadir una barra de scroll vertical: cambiar la propiedad ScrollBars a ssVertical.

     

    2.5. Añadir las componentes no visuales OpenDialog y SaveDialog

     

    Colocar en cualquier sitio del formulario los componentes OpenDialog y SaveDialog (solapa Dialogs). Estos son componentes no visuales, por lo que el lugar de ubicación no es importante. Cambiar las propiedades Name a OpenDialog y SaveDialog, respectivamente.

    El aspecto del formulario será el de la figura siguiente. Los componentes no visuales OpenDialog y SaveDialog no se ven en tiempo de ejecución.

     

     

    Guardar todos los ficheros del proyecto (File | Save All), construir el proyecto (Project | Build MiEditor) y ejecutarlo (Run | Run).

     

  5. Añadir menús al formulario.
  6.  

    En primer lugar, añadiremos un menú principal (sección 3.1) junto con los submenús asociados: Ficheros (sección 3.2), Edición (sección 3.3 y Ayuda (sección 3.4). El menú y los submenús son los típicos de las aplicaciones Windows. Finalmente, crearemos un menú contextual (sección 3.5).

    Para crear el menú principal y los submenús, seleccionar el componente no visual MainMenu (solapa Standard) y colocarlo en algún lugar del formulario. Fijar Name=MainMenu. A continuación, diseñar el menú. Se hará con el diseñador de menús: pinchar dos veces sobre el componente MainMenu.

     

    3.1. Diseño del menú principal.

     

    Las cabeceras de los submenús serán: Ficheros, Edicion y Ayuda. Deseamos que se abra un submenú asociado a cada una de estas categorías cuando se pinche con el ratón sobre éstas.

     

     

     

    3.2. Menú Ficheros.

     

    Añadir las opciones: Nuevo, Abrir, Guardar, Guardar como, (separador), Imprimir, Configurar impresora, (separador) y Salir.

    Para cada opción se procede como antes:

     

     

     

    3.3. Menú Edición.

     

    Añadir las opciones: Deshacer, (separador),Cortar, Copiar, Pegar, Seleccionar todo, (separador), Buscar, Reemplazar, (separador) y Ajustar.

    Este submenú se creará usando una plantilla de menú. Seleccionar del menú principal la cabecera Edicion. Pulsar el botón derecho del ratón y seleccionar Insert from Template | Edit Menu. Borrar la antigua cabecera Edicion. Camiar la nueva cabecera Edit para dejarla Name=EditMenu y Caption=&Edicion.

    A continuación, modificar el submenú Edicion para que quede:

     

     

     

    3.4. Menú Ayuda.

     

    Solamente tendrá una opción: Acerca de ... . Establecer las propiedades Name=HelpAbout y Caption=Ace&rca de ...

    Finalmente, cerrar el diseñador de menús. El aspecto del formulario será el siguiente:

     

     

     

    3.5. Menú Contextual.

     

    Para crear el menú contextual, seleccionar el componente no visual PopUpMenu (solapa Standard) y colocarlo en algún lugar del formulario. Fijar Name=PopUpMenu. Este menú se diseñará con el diseñador de menús, de la misma manera que se ha hecho con el menú principal.

    Añadir las opciones: Cortar, Copiar, Pegar, (separador) y Acerca de. Para cada opción:

    El menú contextual puede asociarse a cualquier componente que tenga asociada la propiedad PopupMenu. En este caso se asociará al componente Memo para que al pulsar el botón derecho del ratón se despliegue el menú que acabamos de crear. Para esto, seleccionar el componente Memo, acceder a la propiedad PopupMenu y seleccionar PopUpMenu (el único disponible).

     

  7. Escribir el código del programa.
  8.  

    Cada opción del menú y cada botón de la barra rápida debe tener asociada una acción. La acción se asocia a cada componente mediante el gestor de eventos del inspector de objetos.

    Todos los manipuladores de eventos se escriben con una metodología similar. Detallaremos cómo se hace el de la opción Ficheros | Salir, y los demás se completarán siguiendo las líneas aquí descritas.

    Seleccionar Ficheros | Salir del menu principal. Se activa el editor de código, mostrando el gestor que se va a completar:

    //------------------------------------------------------------
    
    void __fastcall TMainForm::FileExitClick(TObject *Sender)
    
    {
    
    }
    //------------------------------------------------------------
    

    Completar la función de la siguiente forma:

    //------------------------------------------------------------
    
    void __fastcall TMainForm::FileExitClick(TObject *Sender)
    
    {
       Application->Terminate();
    }
    //------------------------------------------------------------
    

    Como el botón rápido para salir ExitBtn debe realizar la misma tarea, le asignamos las misma función al evento OnClick. Para ello, seleccionar el componente ExitBtn en el inspector de objetos, pulsar en la pestaña Events y en en evento OnClick.

    Para seleccionar una de las funciones ya escritas, desplegar la lista de funciones pulsando sobre la flecha que aparece a la derecha del evento OnClick (ahora sólo está FileExitClick()) y seleccionarla. Dicho de otra forma, la función FileExitClick() se activa desde Ficheros | Salir y desde el botón rápido ExitBtn.

    Para cada opción, proceder de la misma forma. Así, el resultado final debe ser:

     

  9. Añadir un nuevo formulario (Acerca de...)
  10. Seleccionar File | New Form. Sobre este formulario, diseñar una ventana modal titulada Acerca de Mi editor de texto con el siguiente aspecto:

     

     

    Fijar las propiedades del formulario Caption = Acerca de Mi editor de texto, Name = AboutBox y BorderStyle = bsDialog y configurarlo:

    1. Añadir tres componentes Label (solapa Standard) con textos (Caption): Mi editor de texto, Versión 1.0, y © Curso de Programación Visual, respectivamente.
    2. Añadir un icono (el mismo que se asoció a la aplicación) seleccionando un componente Image (solapa Additional). Para este componente, fijar Autosize = true.
    3. Añadir un botón de OK. Corresponde al componente BitBtn (solapa Additional). Fijar Kind = bkOK.
    4. Crear un marco que englobe a los tres componentes Label. Seleccionar el componente Bevel (solapa Additional) y enmarcar el texto. Fijar Shape = bsFrame.

    Almacenar la unidad. Seleccionar File | Save y darle el nombre About.cpp

    Añadir esta unidad al proyecto. Seleccionar FuncsEditor.cpp y File | Include Unit Hdr. Seleccionar About.

    Ahora, cuando se seleccione Ayuda | Acerca de ... o Acerca de ... en el menú contextual debe abrirse la ventana que hemos creado. El código que abre esta ventana se completa como sigue: seleccionar la opción Ayuda | Acerca de ... y completar el manipulador HelpAboutClick() de la siguiente forma:

    //-----------------------------------------------------------

    void __fastcall TMainForm::HelpAboutClick(TObject *Sender)

    {

    AboutBox->ShowModal();

    }

    //-----------------------------------------------------------

    Asignar la misma función al gestor del evento OnClick de PopUpAbout.

    Finalmente, construir el proyecto y ejecutarlo.

     

  11. Sobre la barra de estado y los cuadros de pista (Hints).
  12. Se puede asociar a cada componente un cuadro de pista (Hint) fijando al valor de su propiedad Hint al texto que se quiere mostrar. Si se desea que aparezca un texto más amplio en la barra de estado, éste se especifica también en la misma propiedad separado por la barra |. Por ejemplo, seleccionar el botón FileOpenBtn y fijar la propiedad Hint a Abrir fichero | Abrir un fichero existente y fijar ShowHint = true. Salvar, construir el proyecto y ejecutar.

    Observar que al poner el cursor sobre el botón se muestra el cuadro de pista pero no en la barra de estado. Modificar las propiedades Hint de los botones FileSaveBtn y ExitBtn fijándolas a Guardar fichero | Guardar en un fichero el texto mostrado y Salir | Terminar la ejecución del programa, respectivamente, y fijar para ambos ShowHint = true.

    Para que aparezca el texto largo en la barra de estado basta con establecer la propiedad AutoHint de la barra de estado a true.

    Finalmente, salvar, construir el proyecto y ejecutar.

     



    Atrás