Editor de ventanas#
El botón "Editor de ventanas" (editor de formularios) en el menú de desarrollo permite crear sus propias ventanas y mostrarlas en modo modal y no modal, incluyendo de manera asíncrona en relación con el flujo del guion.
El trabajo con el Editor de ventanas se demuestra aquí.
Una ventana modal no permite continuar el trabajo de la aplicación hasta que se cierre. Una ventana no modal permite al Usuario cambiar a otros modos de trabajo de la aplicación sin cerrarla, pero visualmente siempre está ubicada sobre la aplicación. Además, las ventanas creadas se pueden vincular a elementos personalizados en otras aplicaciones.
El Editor de ventanas permite utilizar tanto un diseño fijo como un diseño adaptable de las ventanas.
El diseño adaptable cambia el diseño de la página dependiendo del comportamiento del Usuario, la plataforma, el tamaño de la pantalla y la orientación del dispositivo, y es una parte integral del desarrollo web moderno. Permite ahorrar significativamente y no volver a dibujar un nuevo diseño para cada resolución, sino cambiar el tamaño y la ubicación de elementos individuales.
El diseño fijo es un tipo de diseño en el que el ancho del contenido está fijado en píxeles y no cambia según el tamaño de la ventana del navegador.
La interfaz de usuario del Editor de ventanas consta de las siguientes áreas principales:
- Menú principal (barra superior);
- Elementos y contenedores generales;
- Área de trabajo central;
- Panel de propiedades de los elementos.
| № p/p | Elemento de interfaz | Descripción |
| 1. | menú "Archivo" | Permite utilizar funciones básicas para gestionar formularios de usuario en el editor de ventanas. |
| 2. | menú "Editar" | Permite realizar acciones de deshacer, rehacer, copiar, etc. |
| 3. | botón "Nueva ventana" | Permite desplegar un nuevo formulario para editar. |
| 4. | botón "Vista previa" | Permite ver la opción que estará disponible después del diseño. También se puede utilizar la tecla F5. |
| 5. | botón "Editar propiedades de la ventana" | Permite corregir la configuración del formulario. También se puede utilizar la tecla F8. |
| 6. | botón "Editar eventos de la ventana" | Permite corregir la configuración del formulario. También se puede utilizar la combinación de teclas Ctrl+F8. |
| 7. | botón  | Permite deshacer la acción. |
| 8. | botón  | Permite rehacer la acción. |
| 9. | botón  | Permite eliminar el elemento seleccionado. |
| 10. | botón  | Permite alinear el elemento seleccionado a la izquierda. |
| 11. | botón  | Permite alinear el elemento seleccionado al centro. |
| 12. | botón  | Permite alinear el elemento seleccionado a la derecha. |
| 13. | botón  | Permite alinear el elemento seleccionado en la parte superior. |
| 14. | botón  | Permite alinear el elemento seleccionado en el medio. |
| 15. | botón  | Permite alinear el elemento seleccionado en la parte inferior. |
| 16. | botón  | Permite alinear el elemento seleccionado en ancho. |
| 17. | botón  | Permite alinear el elemento seleccionado en altura. |
| 18. | botón  | Permite alinear el elemento seleccionado en tamaños. |
El menú "Archivo" del Editor de ventanas contiene las siguientes funciones:
| № p/p | Elemento de interfaz | Descripción |
| 1. | opción “Nueva ventana” | Permite abrir un nuevo formulario para edición. |
| 2. | opción “Exportar a archivo” | Permite exportar el formulario a un archivo json. También se puede usar la combinación de teclas Ctrl+E. |
| 3. | opción “Importar desde archivo” | Permite importar el formulario desde un archivo json. También se puede usar la combinación de teclas Ctrl+I. |
| 4. | opción “Vista previa de ventana” | Permite ver la opción que estará disponible después del diseño. También se puede usar la tecla F5. |
| 5. | opción “Editar propiedades de ventana” | Permite ajustar la configuración del formulario. También se puede usar la tecla F8. |
| 6. | opción “Editar eventos de ventana” | Permite ajustar la configuración del formulario. También se puede usar la combinación de teclas Ctrl+F8. |
| 7. | opción “Cerrar” | Permite cerrar el Editor de ventanas. |
La ventana “Editar configuración del formulario” se puede abrir de varias maneras:
- En el menú “Archivo” mediante las opciones “Editar propiedades de ventana” o “Editar eventos de ventana”.
- En el menú principal mediante los botones “Editar propiedades de ventana” o “Editar eventos de ventana”.
- Usando las teclas del teclado “F8” y “Ctrl+F8” para abrir el Editor de configuración del formulario en la pestaña “Propiedades” y en la pestaña “Eventos” respectivamente.
La pestaña "Propiedades" de la ventana "Editar configuración del formulario" contiene las siguientes funciones:
| № p/p | Elemento de interfaz | Descripción |
| 1. | botón “Agregar elemento” | Permite agregar un elemento de la lista de elementos comunes mediante la selección de un menú desplegable. |
| 2. | botón “Mover arriba” | Permite mover hacia arriba el elemento seleccionado. |
| 3. | botón “Mover abajo” | Permite mover hacia abajo el elemento seleccionado. |
| 4. | columna “Nombre de enlace” | Permite seleccionar una variable a la que se enlazará otra variable. |
| 5. | columna “Tipo de enlace” | Tipo de enlace, comparación o asignación. |
| 6. | columna “Valor de enlace” | Permite seleccionar una variable a la que se enlazará un valor. |
La pestaña "Eventos" de la ventana "Editar configuración del formulario" contiene las siguientes funciones:
| № p/p | Elemento de interfaz | Descripción |
| 1. | botón “Agregar elemento” | Permite agregar un elemento de la lista de elementos comunes que ya están instalados en la ventana (formulario) mediante la selección de un menú desplegable. |
| 2. | botón “Agregar eventos de botones” | Permite agregar eventos de botones. |
| 3. | columna “Nombre” | Nombre del elemento agregado. |
| 4. | columna “Valor” | Valor del evento. |
El menú "Edición" del Editor de ventanas proporciona las siguientes opciones:
| № p/p | Elemento de interfaz | Descripción |
| 1. | opción “Deshacer” | Permite deshacer la acción. También se puede usar la combinación de teclas Ctrl+Z. |
| 2. | opción “Rehacer” | Permite rehacer la acción. También se puede usar la combinación de teclas Ctrl+Y. |
| 3. | opción “Copiar” | Permite copiar el elemento. También se puede usar la combinación de teclas Ctrl+C. |
| 4. | opción “Pegar” | Permite pegar el elemento. También se puede usar la combinación de teclas Ctrl+V. |
| 5. | opción “Eliminar” | Permite eliminar el elemento. También se puede usar la tecla Delete. |
Al usar el Editor de ventanas, hay una serie de elementos y herramientas disponibles:
- diseño de tabla multinivel;
- botones, casillas de verificación, campos de texto;
- listas normales y desplegables, así como listas con casillas de verificación;
- botones de opción y grupos de opción;
- calendarios;
- campos de contraseña y otros tipos especiales de campos;
- imágenes;
- barras de progreso;
- editor de texto con formato;
- divisores, pestañas, barras de desplazamiento;
- tablas de datos editables;
- otros controles.
Cada control tiene más de 50 propiedades configurables que determinan su apariencia y comportamiento. Los valores de cada una de ellas, así como las acciones de los usuarios en la ventana, pueden estar vinculados a cambios en los valores de las variables seleccionadas, y viceversa: el cambio en los valores de las variables provoca cambios en los valores de los controles correspondientes. Esta funcionalidad permite desarrollar dentro del escenario del robot sistemas de diálogo y expertos ramificados, ventanas de configuración del robot, sugerencias interactivas y asistentes, así como aplicaciones completas de múltiples ventanas.
¡Importante! Para demostrar el funcionamiento de esta funcionalidad, se ha añadido un juego "Tres en raya" en la carpeta del Proyecto: los primeros tres en raya del mundo, implementados con los medios de la plataforma RPA.
| № p/p | Elemento de interfaz | Descripción |
| 1. | Elementos generales | |
| 1.1. | Cursor | Permite seleccionar un elemento en el formulario para su configuración/movimiento. |
| 1.2. | Label | Permite establecer una etiqueta de texto en la ventana editable (formulario). |
| 1.3. | Button | Permite establecer un botón. |
| 1.4. | CheckBox | Permite establecer un checkbox. |
| 1.5. | TextBox | Permite establecer un campo de texto. |
| 1.6. | ComboBox | Permite seleccionar un elemento de una lista de opciones predefinidas. |
| 1.7. | CheckedListBox | Permite establecer una lista simple con checkboxes. |
| 1.8. | DateTimePicker | Permite establecer un elemento para seleccionar fecha y hora. |
| 1.9. | LinkLabel | Permite establecer un elemento con un hipervínculo. |
| 1.10. | ListBox | Permite establecer una lista simple. |
| 1.11. | MaskedTextBox | Permite establecer un campo de texto con control de entrada y verificación automática de errores. |
| 1.12. | MonthCalendar | Permite establecer un elemento con una fecha que se puede seleccionar mediante un calendario visual mensual. |
| 1.13. | NumericUpDown | Permite establecer un contador con un campo de entrada numérica. |
| 1.14. | PictureBox | Permite establecer un elemento que muestra objetos gráficos en los siguientes formatos: imágenes rasterizadas, GIF, JPEG, metarchivo o ícono. |
| 1.15. | ProgressBar | Permite establecer un indicador que muestra el progreso de una tarea. |
| 1.16. | RadioButton | Permite establecer un elemento que proporciona la opción de seleccionar una opción de un conjunto predefinido. |
| 1.17. | RichTextBox | Permite establecer un campo de texto con capacidad de entrada y formato de texto. |
| 1.18. | DataGridView | Permite establecer un elemento que muestra datos en formato tabular. |
| 2. | Contenedores | |
| 2.1. | Cursor | Permite seleccionar un elemento en el formulario para su configuración/movimiento. |
| 2.2. | GroupBox | Permite establecer un marco alrededor de un grupo de controles. |
| 2.3. | Panel | Permite establecer un panel que contiene otros controles. |
| 2.4. | SplitContainer | Permite establecer dos paneles separados por un divisor. Al cambiar la posición del divisor, se pueden cambiar los tamaños de estos paneles. |
| 2.5. | TabControl | Permite establecer un control con varias pestañas. Cada pestaña contendrá un conjunto de otros controles como botones, campos de texto, etc. |
| 2.6. | TableLayoutPanel | Permite establecer un elemento para organizar componentes en forma de cuadrícula o tabla. |
El área de trabajo central del Editor de ventanas está destinada a trabajar con la ventana (formulario) creada y su diseño. Aquí se muestran los resultados de todas las manipulaciones que se realizan en la barra superior del menú principal y en los paneles laterales del Editor de ventanas.
El panel de propiedades de los elementos permite configurar la ventana (formulario), cambiar su nombre y ajustar las propiedades de cada uno de los elementos y contenedores establecidos en la ventana (formulario). Para seleccionar el elemento que se desea configurar, debe seleccionarse en el menú desplegable en la parte superior del panel. En el panel derecho se encuentran las pestañas, cuyo número y contenido cambian según el elemento seleccionado. Cada una de las pestañas se puede expandir para configurar el elemento de la ventana (formulario). Para mayor comodidad, el contenido de las pestañas se puede ordenar no solo por categorías, sino también alfabéticamente.
| № p/p | Elemento de interfaz | Descripción |
| 1. | pestaña “Apariencia” | Configuración de los parámetros de apariencia del elemento seleccionado. |
| 2. | pestaña “Datos” | Configuración del enlace de datos del elemento seleccionado. |
| 3. | pestaña “Diseño” | Configuración del diseño del elemento seleccionado. |
| 4. | pestaña “Comportamiento” | Configuración del comportamiento del elemento seleccionado. |
| 5. | pestaña “Otros” | Configuración de otras propiedades del elemento seleccionado. |
| 6. | pestaña “Desarrollo” | Configuración de propiedades relacionadas con el desarrollo. |
| 7. | pestaña “Accesibilidad” | Configuración de propiedades relacionadas con la accesibilidad. |
| 8. | pestaña “Estilo de ventana” | Configuración del estilo de la ventana. |
| 9. | pestaña “Enfoque” | Configuración de propiedades relacionadas con el enfoque del elemento seleccionado. |
Una descripción detallada de las propiedades se puede ver en el sitio.