AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Conceptos WINDEV / Parte 1 - Conceptos principales
  • Crear un control
  • Diferentes tipos de controles de ventanas
  • Crear un nuevo control
  • Crear un control asociado a un campo
  • Características del control
  • Ver las características
  • Características por pestaña
  • Manipular controles en el editor
  • Controladores de tamaño
  • Operaciones disponibles
  • Alineación de controles
  • Reglas
  • Cuadrícula magnética
  • Corrector de interfaz en tiempo real
  • Corrector de interfaz avanzado
  • Opciones de alineación
  • Opciones de edición de controles en una ventana
  • Hacer un control visible/invisible
  • Bloquear/Desbloquear un control
  • Enmarcar un control
  • Anclaje de los controles
  • Anclar un control en el editor
  • Ejemplo de anclaje de controles
  • Ejecución automática de un control Botón
  • Implementación
  • Programación
  • FAA: Funcionalidad Automática de la Aplicación
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
11. Controles en la práctica
Página anteriorTabla de contenidoPágina siguiente
WINDEV incluye varios tipos de controles que se pueden utilizar fácilmente en las ventanas. Estos controles se pueden crear a través de la pestaña "Creación" de la cinta de opciones.
Todos los controles se pueden manipular mediante programación.
Crear un control

Diferentes tipos de controles de ventanas

Los siguientes controles están disponibles en el editor de ventanas de WINDEV:
  • Campo de entrada,
  • Estático,
  • Botón,
  • Imagen,
  • Editor de imágenes,
  • Editor HTML,
  • Botón de opción,
  • Casilla de verificación,
  • List Box,
  • Combo Box,
  • ListView,
  • Barra lateral,
  • Cajón de navegación,
  • Cámara Web,
  • Control Conferencia,
  • Control OLE,
  • ActiveX,
  • Forma,
  • Código de barras,
  • Control de visualización HTML,
  • Supercontrol,
  • Agenda,
  • Planificador,
  • Valoración,
  • Tabla dinámica,
  • Cuadro de mando,
  • Tabla,
  • Hoja de cálculo,
  • Procesador de texto,
  • Diagrama de Gantt,
  • Tabla TreeView,
  • TreeView,
  • Editor de diagramas,
  • Organigrama,
  • Barra de progreso,
  • Looper,
  • Zona multilínea,
  • Barra de desplazamiento,
  • Control deslizante,
  • Control de número,
  • Línea de tiempo,
  • Pestaña,
  • Cinta de opciones,
  • Control Ventana interna,
  • Barra de herramientas,
  • Splitter,
  • Gráfico,
  • Mapa,
  • Carrusel,
  • Cubo,
  • Widget,
  • Xaml,
  • Calendario,
  • Modelo de controles,
  • Control Disposición,
  • Panel acoplable,
  • Lector PDF.
  • Kanban
Todos los controles se pueden manipular mediante programación.
Para obtener más información, consulte la ayuda en línea sobre cada tipo de control, sus principales características y programación en WLanguage.

Crear un nuevo control

Para crear un nuevo control:
  1. Seleccione el tipo de control a crear mediante el ícono correspondiente en la pestaña "Creación" del menú de WINDEV.
  2. La forma del nuevo control aparece bajo el cursor.
  3. Haga clic en la ubicación en la que desea crear el control. El control se crea automáticamente.
Observación: Existen otros métodos para crear controles. Para más información, consulte la ayuda en línea.

Crear un control asociado a un campo

Todos los controles de una ventana pueden enlazarse a un campo de un archivo de datos, EXCEPTO los siguientes:
  • Botón
  • Línea de tiempo
  • Forma
  • Cuadro de mando
  • Pestaña
  • Xaml
  • Barra de herramientas
  • Carrusel
  • Mapa
  • Cubo
  • Cinta de opciones
  • Control de visualización HTML
  • Splitter
  • Control Disposición

Existen varios métodos para crear un control enlazado a un campo:
  • Arrastrar y soltar el campo desde el panel "Análisis".
  • Utilizar la pestaña "Archivo" de la ventana de descripción del control.
Características del control
Todos los controles en el editor de ventanas incluyen una ventana de descripción. Esta ventana contiene varias pestañas que agrupan las características que se pueden establecer en uno o varios controles.
Observación: También puede ver y/o cambiar las características de uno o más controles en el modificador. Para más información, consulte la ayuda en línea.

Ver las características

Para abrir la ventana de descripción de un control:
  • haga doble clic en el control.
  • seleccione la opción "Descripción" en el menú contextual.
  • seleccione el control y presione Alt + Entrar.
Observaciones:
  • Es posible abrir una ventana de descripción para un conjunto de controles seleccionados. Solo se mostrarán las características comunes a los controles seleccionados.
  • Se pueden abrir varias ventanas de descripción al mismo tiempo. Cada ventana de descripción muestra las características de uno o más controles.

Características por pestaña

En esta sección se presentan las diferentes categorías de las características que se muestran en cada pestaña.
Pestaña General
La pestaña "General" permite especificar el nombre y las características de visualización del control (leyenda, máscara de entrada, etc.).
Pestaña UI
La pestaña "UI" permite definir los parámetros de la interfaz del control:
  • Estado inicial del control cuando se abre la ventana,
  • Visibilidad del control,
  • Tamaño del control,
  • Alineación, etc.
Pestaña Detalles
La pestaña "Detalles" permite definir los diferentes parámetros del control:
  • opciones de entrada,
  • acción de Arrastrar y Soltar, etc.
El contenido de esta pestaña depende del tipo de control.
Pestaña Enlace
Esta pestaña permite seleccionar el campo (de un archivo de datos o consulta) al que está enlazado el control. Dependiendo del registro actual, se mostrará el contenido del campo enlazado en el control.
El enlace puede establecerse a un solo archivo o a múltiples archivos.
Pestaña Contenido
La pestaña "Contenido" permite definir:
  • el contenido inicial del control (solo para los controles Campo de entrada).
  • la fuente de datos utilizada para rellenar el control (para controles List Box, Combo Box, Tabla, etc.).
Pestaña Notas
La pestaña "Notas" permite describir de forma detallada el modo de funcionamiento del control. Esta información se incluirá en la documentación técnica (documentación del proyecto, documentación de la ventana, etc.).
Pestaña Ayuda
La pestaña "Ayuda" permite introducir y configurar los tipos de sistemas de ayuda asociados al control. Un control puede tener:
  • Un tooltip (globo de ayuda), que se muestra cuando el cursor pasa sobre el control.
  • Un mensaje de ayuda, que se muestra en la barra de estado cuando el control obtiene el foco.
  • Una ventana de ayuda con un título específico, que se muestra al pulsar la tecla F1.
Un control también puede asociarse a una página de ayuda específica de un archivo de ayuda CHM. La página de ayuda se mostrará:
  • como una ayuda contextual (tooltip que aparece si es necesario), si se definió un archivo de ayuda para la ventana.
  • como una página de ayuda. En este caso, utilice la función WHelp para mostrar la página de ayuda.
Pestaña Estilo
La pestaña "Estilo" permite definir el estilo de los diferentes elementos del control. Esta pestaña permite:
  • Cambiar la apariencia del control: simplemente seleccione el elemento del control que desea modificar y, a continuación, elija las características de estilo. Solo se modifica la apariencia del control actual.
  • Aplicar un estilo existente al control: seleccione el estilo que desea aplicar.
  • Crear o cambiar un estilo: el estilo creado o modificado se actualiza para todos los controles del proyecto que utilizan este estilo.
Manipular controles en el editor

Controladores de tamaño

Cuando se crea o selecciona un control, este se muestra con controladores de tamaño. Los controladores permiten:
  • ver el tamaño del control,
  • cambiar el tamaño del control.
Los colores de los controladores identifican las acciones que se pueden realizar:
  • Los controladores negros (este color puede variar dependiendo de la plantilla utilizada) permiten distinguir y redimensionar el control seleccionado.
  • Los controladores blancos se utilizan en dos casos:
    • selección simple: el control seleccionado está en modo de solo lectura. Por ejemplo, estos controladores pueden aparecer si el control está seleccionado y la ventana de descripción está abierta. En este caso, el control no se puede modificar o mover directamente en el editor.
    • selección múltiple: el control seleccionado hace parte de una selección múltiple, pero no es el primer control seleccionado.
    Este tipo de controladores también se muestra cuando la ventana está en modo de solo lectura para el desarrollador: los controles no se pueden modificar.
  • Los controladores grises indican el primer control seleccionado en una selección múltiple. Este control será el control de referencia.

Operaciones disponibles

El editor de ventanas permite:
  • Seleccionar uno o más controles (con el lazo, por ejemplo),
  • Agrupar los controles seleccionados,
  • Mover los controles,
  • Cambiar el texto de los controles,
  • Mostrar un tooltip avanzado (cuando el cursor pasa por encima del control) con: el nombre, la posición, el tamaño, los anclajes y el estado inicial del control.
  • Utilizar un control fuera de la ventana. El control será visible en modo de edición e invisible en tiempo de ejecución.
Observación: Puede utilizar un control fuera de la ventana para:
  • asociarlo a la ventana sin mostrarlo en tiempo de ejecución. Esto le permite utilizar el contenido del control mediante programación (como una variable).
  • mostrar nuevos controles en una ventana al cambiar el tamaño de la ventana.
Alineación de controles
La alineación de controles permite crear interfaces homogéneas y profesionales. WINDEV incluye las siguientes características para ayudarle a diseñar interfaces excepcionales:

Reglas

Puede mostrar las reglas de alineación en el editor de ventanas.
Estas reglas tienen guías magnéticas: cuando un control se acerca a una guía, esta lo "atrae" automáticamente.
Esta función permite posicionar, alinear o redimensionar fácilmente los controles en una ventana.
Mostrar las reglas
Para que se muestren las reglas, en la pestaña "Vista", en el grupo "Ayuda edición", seleccione "Reglas". Se pueden utilizar dos tipos de marcadores:
  • los marcadores estándar, que permiten alinear y ubicar los controles dentro de las ventanas usando las guías asociadas.
  • los marcadores de bordes, que permiten definir bordes del mismo tamaño en cada lado de la ventana. Una guía resalta el área de los bordes.
Observación: Para mostrar u ocultar las guías de las ventanas, seleccione la opción "Mostrar guías" en el menú contextual de las reglas. Las guías siempre están activas incluso si no son visibles: cuando se acerca un control a un marcador, este lo atrae automáticamente.
Ejemplo en una ventana:
Manipular marcadores
Los marcadores se pueden manipular fácilmente con el cursor en el editor. Cuando el cursor pasa por encima de un marcador, este se transforma en una flecha doble.

Cuadrícula magnética

La cuadrícula magnética posiciona los marcadores verticales y horizontales en la ventana. Los controles creados son atraídos por estos marcadores, como si los controles y los marcadores fueran magnéticos. La cuadrícula magnética permite alinear los controles según los marcadores.

Corrector de interfaz en tiempo real

Cuando se mueve un control en una ventana, un corrector de interfaz muestra las guías automáticamente. Los objetos se ajustan a las guías, lo que le permite alinear el control movido con los demás controles de la ventana.

Corrector de interfaz avanzado

El corrector de interfaz avanzado es una herramienta que ayuda a mejorar la disposición de los controles en las diferentes ventanas de la aplicación.
Este corrector de interfaz también permite aplicar las reglas de interfaz del estándar de Windows a la ventana actual o a los controles seleccionados: alineación de los controles, tamaño de los botones, etc.

Opciones de alineación

Para alinear varios controles, WINDEV proporciona:
  • una alineación predefinida (disponible en la pestaña "Alineación" o "Modificación", en el grupo "Profundidad y Alineación").
  • una alineación personalizada (disponible en la pestaña "Alineación", en el grupo "Otras alineaciones").
La alineación personalizada permite definir propiedades de alineación específicas. En la alineación personalizada, es posible definir:
  • la alineación horizontal o vertical: los controles se pueden alinear a la izquierda desde el inicio del control o del área de entrada. También se pueden alinear a la derecha dependiendo de donde termine el control o el área de entrada.
  • el espaciado uniforme: el espaciado entre los controles se adapta para que sea el mismo entre cada control (horizontal o verticalmente).
  • el tamaño: el tamaño de los controles seleccionados se adapta automáticamente para obtener controles con el mismo alto y/o ancho.
  • el control de referencia: para alinear y definir el tamaño de los controles, el control de referencia puede ser:
    • el primer control seleccionado (que tiene los controladores de tamaño blancos).
    • el último control seleccionado.
    • el control más grande seleccionado.
    • el control seleccionado más arriba a la izquierda.
Opciones de edición de controles en una ventana
Las opciones de edición permiten establecer:
  • las opciones de visualización.
  • el modo de ajuste de los controles.
  • las operaciones de clic y doble clic en los controles.
  • las opciones de selección de los controles.
  • la posición de la ventana cuando se abre.
Estas opciones de visualización permiten personalizar las operaciones realizadas en los controles en el editor de ventanas.
Para abrir estas opciones, vaya a la pestaña "Vista" y haga clic en el iniciador de cuadro de diálogo () en el grupo "Opciones".

Hacer un control visible/invisible

Para hacer un control visible/invisible en el editor de ventanas:
  1. Seleccione el control en el editor.
  2. En la pestaña "Modificación", en el grupo "Ayuda edición", seleccione o deseleccione la opción "Visible (editor)".

Bloquear/Desbloquear un control

Para bloquear/desbloquear un control en el editor de ventanas:
  1. Seleccione el control en el editor.
  2. En la pestaña "Modificación", en el grupo "Ayuda edición", seleccione o deseleccione la opción "Bloqueado".
Un control bloqueado no se puede seleccionar haciendo clic y arrastrando el cursor sobre él. Veamos un ejemplo con un control Pestaña. Cuando el control está bloqueado, al hacer clic y arrastrar el cursor sobre varios controles en un panel de pestañas, el control Pestaña no se selecciona automáticamente.
Todas las demás operaciones pueden realizarse en un control bloqueado.

Enmarcar un control

Para enmarcar un control en el editor de ventanas:
  1. Seleccione el control en el editor.
  2. En la pestaña "Modificación", en el grupo "Ayuda edición", seleccione o deseleccione la opción "Con contorno".
Enmarcar un control le permite ver fácilmente todos los controles de una ventana (especialmente los controles Imagen).
Anclaje de los controles
Las ventanas de una aplicación WINDEV pueden redimensionarse en tiempo de ejecución. Con el mecanismo de anclajes, los controles se redimensionan y posicionan automáticamente al cambiar el tamaño de una ventana.
Los anclajes de un control incluyen dos ajustes:
  • el tipo de anclaje: define el comportamiento del control en función del nuevo tamaño de la ventana. El control puede moverse hacia la izquierda y/o hacia abajo, o extenderse horizontal o verticalmente.
  • la tasa de anclaje: define cuánto se estira o se mueve un control. Esta opción permite:
    • mantener un control centrado horizontalmente en la ventana independientemente de su tamaño.
    • ampliar proporcionalmente algunos controles.
Estos ajustes se pueden definir:
  • en el editor de ventanas.
  • mediante programación con las propiedades WLanguage.

Anclar un control en el editor

Para anclar un control:
  1. Seleccione los controles que desea anclar.
  2. Defina el anclaje de los controles:
    • en la pestaña "UI" de la ventana de descripción del control (opción "Descripción" del menú contextual).
    • mediante la opción "Anclaje" del menú contextual del control (clic derecho).
  3. En la ventana que aparece, seleccione el tipo de anclajes que desea aplicar. Las opciones más comunes están representadas por diferentes íconos:
    Ningún anclaje: El control no cambia al redimensionar la ventana. No se selecciona ninguna opción de anclaje.
    Ancho: El control se extiende hacia la derecha cuando se amplía la ventana. Para definir cuánto se debe extender el control con respecto a la ventana, establezca la tasa de anclaje "ancho".
    Derecha: El control se desplaza hacia la derecha cuando se amplía la ventana. Para definir cuánto se debe mover el control, establezca la tasa de anclaje "derecha".
    Centrado horizontalmente: El control permanece centrado horizontalmente independientemente del ancho de la ventana.
    Alto: El control se extiende hacia abajo cuando la ventana se amplía verticalmente. Para definir cuánto se debe extender el control con respecto a la ventana, establezca la tasa de anclaje "alto".
    Ancho y alto: El control se extiende hacia la derecha y hacia abajo cuando se amplía la ventana. Para definir cuánto se debe extender el control con respecto a la ventana, establezca las tasas de anclaje "ancho" y "alto".
    Alto y derecha: El control se extiende hacia abajo y se desplaza hacia la derecha cuando se amplía la ventana. Para definir cuánto se debe mover el control, establezca la tasa de anclaje "derecha". Para definir cuánto se debe extender el control con respecto a la ventana, establezca la tasa de anclaje "alto".
    Distribución vertical: Esta opción solo está disponible cuando se seleccionan varios controles. Los controles seleccionados se extienden hacia abajo y se distribuyen proporcionalmente cuando se amplía la ventana verticalmente.
    Abajo: El control se desplaza hacia abajo cuando la ventana se amplía hacia abajo. Para definir cuánto se debe mover el control, establezca la tasa de anclaje "abajo".
    Ancho y abajo: El control se extiende hacia la derecha y se desplaza hacia abajo cuando se amplía la ventana. Para definir cuánto se debe mover el control, establezca la tasa de anclaje "abajo". Para definir cuánto se debe extender el control con respecto a la ventana, establezca la tasa de anclaje "ancho".
    Derecha y abajo: El control se desplaza hacia la derecha y hacia abajo cuando se amplía la ventana. Para definir cuánto se debe mover el control, establezca la tasa de anclaje "abajo" y "derecha".
    Centrado horizontalmente abajo: El control permanece centrado horizontalmente independientemente del ancho de la ventana. Sin embargo, el control se ancla a la parte inferior de la ventana y se desplaza hacia abajo cuando esta se amplía.
    Para definir cuánto se debe mover el control, establezca la tasa de anclaje "abajo".
    Centrado verticalmente: El control permanece centrado verticalmente independientemente de la altura de la ventana.
    Distribución horizontal: Esta opción solo está disponible cuando se seleccionan varios controles. Los controles seleccionados se extienden hacia la derecha y se distribuyen horizontalmente cuando se amplía la ventana.
    Centrado verticalmente a la derecha: El control permanece centrado verticalmente independientemente de la altura de la ventana.
    Sin embargo, el control se ancla a la derecha y se desplaza hacia la derecha cuando se amplía la ventana. Para definir cuánto se debe mover el control, establezca la tasa de anclaje "derecha".
    Centrado: El control permanece centrado vertical y horizontalmente independientemente del tamaño de la ventana.

  4. Defina (si es necesario) las diferentes tasas de anclaje.
  5. Valide. Si la opción "Anclaje" está seleccionada (en la pestaña "Vista", en el grupo "Mostrar (todos los controles)"), los signos de anclaje se muestran automáticamente en el control (flechas rojas).

Ejemplo de anclaje de controles

El siguiente ejemplo muestra cómo se anclan los controles en una ventana.
Ventana original:
Ventana ampliada:
Para obtener este resultado:
  1. Seleccione los controles Botón [<-] y [->]: centre estos controles vertical y horizontalmente (opción ).
  2. Seleccione los dos controles List Box: ancle estos controles a la derecha, horizontal y verticalmente (seleccione las opciones "derecha", "ancho" y "alto").
  3. Seleccione los tres controles Botón: estos controles deben extenderse hacia la derecha proporcionalmente (opción ).
Observación: El anclaje de los controles puede establecerse mediante programación utilizando diferentes propiedades WLanguage.
Ejecución automática de un control Botón
Para forzar una acción en una ventana, establezca el modo "Ejecución automática" en un control Botón de la ventana. El principio es muy sencillo, si no se ha utilizado ningún botón durante un período de tiempo determinado, el código de clic del control Botón asociado a la "Ejecución automática" se ejecutará automáticamente.
En tiempo de ejecución, la duración se reduce automáticamente. Cuando llega a cero, el código del control Botón se ejecuta automáticamente.

Implementación

Para ejecutar el código de un control Botón automáticamente:
  1. Defina el control Botón que debe ejecutarse automáticamente.
  2. En la descripción de la ventana (pestaña "Detalles" de la ventana de descripción), especifique:
    • el tiempo antes de la ejecución automática del control Botón.
    • el nombre del control Botón que se va a ejecutar.
  3. En tiempo de ejecución, el tiempo restante se muestra automáticamente.

Programación

También puede definir un control Botón de validación automática utilizando la función DelayBeforeClosing.

FAA: Funcionalidad Automática de la Aplicación

Los usuarios finales pueden acceder a esta funcionalidad directamente. Pueden definir que un control Botón se ejecute automáticamente después de una duración determinada.
Página anteriorTabla de contenidoPágina siguiente
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 21/09/2023

Señalar un error o enviar una sugerencia | Ayuda local