CREACIÓN DEL EDITOR DE TEXTO MI NOTE PAD (PARTE 1)
Contenido de este post:
- Introducción
- Interfaz Gráfica
- Estructura de Archivos
Introducción
Al terminar este tutorial habrás creado un editor de texto con todas las funciones básicas: crear y leer archivos de texto, modificarlos y guardarlos. Además, este editor de texto permite buscar un texto o palabra dentro del documento abierto y ajustar el zoom de la letra.
A diferencia de todos los tutoriales que existen en internet, aquí encontrarás cómo crear una aplicación completa (desde el análisis de su desarrollo hasta su distribución). Además, realizando los ajustes de aplicaciones predeterminadas en el sistema operativo, podrás usar esta aplicación como reemplazo del Bloc de notas de Windows, ya que también aprenderás a cargar un documento de texto en la aplicación abriendo directamente el archivo (sin necesidad de tener el editor abierto primero):
Para desarrollar esta aplicación he separado los dos paradigmas de programación principales que la hacen funcional.
Paradigma Orientado a Objetos: En una clase he desarrollado los algoritmos encargados de los principales procesos de la aplicación (los métodos abrir, guardar, nuevo, buscar y los de acceso y asignación). El post correspondiente a la creación de esta clase se encuentra en este enlace.
Paradigma Orientado a Eventos: Ya que es una aplicación Windows Forms, es necesario controlar varios eventos, como son los clics, cambios de contenido, cargas iniciales, cierre del formulario, atajos de teclado, etc. Todo esto descrito en el post que se encuentra en este enlace.
Esquema general de la arquitectura básica de la aplicación
Interfaz Gráfica
Lo primero será crear un nuevo proyecto del tipo Aplicación de Windows Forms con .NET Framework y lenguaje C#
Luego se debe cambiar el nombre del formulario que se crea por defecto (Form1) y lo llamaremos frmEDITOR. A este formulario debemos configurarle varias propiedades. A continuación relaciono el nombre de la propiedad a modificar y su valor:
Name = frmEDITOR
Icon = (archivo .ico descargado)*
KeyPreview = true**
StartPosition = CenterScreen
Text = Mi Note Pad
(Las demás propiedades deben conservar sus valores por defecto).
*Todos los íconos usados en esta aplicación fueron descargados de https://www.iconsdb.com/
**KeyPreview debe estar en true para poder crear más adelante los atajos de teclado.
En la siguiente imagen se muestran todos los controles usados, indicando el tipo de control y su nombre:
Es importante que uses los mismos nombres para los controles, ya que en los siguientes post donde se estudiará el código fuente se hará referencia a estos nombres.
Colores usados:
- Gris más oscuro: 37, 37, 38
- Gris menos oscuro: 45, 45, 48
- Blanco hueso: WhiteSmoke
- Azul: 0, 122, 204
- Rojo: Firebrick
- Controles con "Gris más oscuro" = (RichTextBox) RichTextBox
- Controles con "Gris menos oscuro" = (Panel) panelBotones y (Panel) panelBuscar
- Controles con "Blanco hueso" = (Label) label , (Label) lbESTADO y (Label) lbACERCADE
- Controles con "Rojo" = (Label) lbCerrar
Para que los controles mantengan sus posiciones al redimensionar el formulario (en tiempo de ejecución) es importante que uses la propiedad Anchor. Por ejemplo, para que panelBuscar mantenga su posición arriba a la derecha (y la misma distancia a los bordes del formulario/ventana) se debe ajustar su Anchor a Top y Right.
Se debe posicionar panelBotones a la derecha y panelEstado abajo, para esto se deben usar sus propiedades Dock. Por ejemplo, así se ajustaría el panelEstado:
Para que los botones tengan la apariencia flat, se debe ajustar su propiedad FlatStyle a Flat. Luego, en FlatAppearance poner el Border en 0.
Al cambiar el FlatStyle a Flat el botón tomará como color de fondo el de su contenedor (en este caso panelBotonones) así que no es necesario configurarlo a menos que se desee un color diferente.
RichTextBox (RichTextBox) debe ocupar todo el espacio restante del formulario y ajustar su propiedad Anchor así:
El menú contextual cmCLIPBOARD servirá para manejar el Portapapeles, así que se deben crear los menús Copiar, Pegar y Cortar así:
El control toolTip no requiere ningún tipo de configuración, este se agrega para que habilite la propiedad ToolTip en los demás controles, así que para cada botón se debe establecer un ToolTip. Por ejemplo, el botón Abrir (btABRIR) quedaría así:
Los ToolTips serían los siguientes:
btGUADAR = "Guardar (Ctrl + G)"
btABRIR = "Abrir (Ctrl + A)"
btNUEVO = "Nuevo (Ctrl + N)"
btZOOM_IN = "Aumentar (Ctrl + Más)"
btZOOM_OUT = "Disminuir (Ctrl + Menos)"
btBUSCAR = "Buscar (Ctrl + B)"
Toma nota de los atajos de teclado o shortcuts, ya que estas serán las combinaciones de teclas usadas en cada caso.
La tipografía usada en todos los controles a los cuales aplica es Segoe UI (normal)
Con esta guía ya podrás recrear un formulario muy parecido al que yo he diseñado.
Estructura de Archivos
La estructura de archivos de la aplicación es bastante sencilla. Está compuesta por el Proyecto MiNotePad en el cual esta prácticamente toda la aplicación. Dentro de este proyecto existen dos carpetas adicionales a las que vienen por defecto, son CLASES y FORMULARIOS. La carpeta CLASES contiene la clase encargada de las tareas principales y la carpeta FORMULARIOS contiene el formulario principal (frmEDITOR) y un formulario Acerca de (frmACERCA) el cual podrás omitir si deseas.
La Solución también contiene un segundo proyecto llamado Instalador, el cual se usa para crear la distribución de la aplicación. Puedes ver el post donde se explica todo este proceso en este enlace.
Si quieres apoyarme económicamente para que siga creando contenido y podamos seguir aprendiendo juntos, en Ko-Fi puedes hacerlo.
¡Sí, quiero apoyarte!
Deja un comentario: