AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Conceptos WEBDEV / Parte 2 - Desarrollar un sitio
  • Crear un control
  • 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
  • Cuadrícula magnética
  • Corrector de interfaz en tiempo real
  • Corrector de interfaz avanzado
  • Opciones de alineación
  • Zoom configurable
  • Opciones de edición de controles en una página
  • Anclaje de los controles
  • Anclar un control en el editor
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
14. Controles en la práctica
Página anteriorTabla de contenidoPágina siguiente
WEBDEV propone diferentes tipos de controles que se pueden incluir fácilmente en las páginas. Estos controles se pueden crear directamente a través de la pestaña "Creación" de la cinta de opciones de WEBDEV.
Todos los controles se pueden manipular mediante programación.
Crear un control
Los siguientes controles están disponibles en el editor de páginas de WEBDEV:
  • Control Estático,
  • Control Planificador,
  • Control Área de texto,
  • Control Calendario,
  • Control de visualización con formato,
  • Control Gráfico,
  • Control Botón,
  • Control Código de barras,
  • Control Enlace,
  • Control Barra de progreso,
  • Control Imagen,
  • Control Celda,
  • Control Popup,
  • Control Pestaña,
  • Control Miniatura,
  • Control Cajón de navegación,
  • Control Esquina doblada,
  • Control Banner deslizante,
  • Control Red social,
  • Control Editor de imágenes,
  • Control Multimedia,
  • Control Editor de diagramas,
  • Control Cámara Web,
  • Control Página interna,
  • Control Campo de entrada,
  • Control Modelo de controles,
  • Control Combo Box,
  • Supercontrol,
  • Control List Box,
  • Control Tabla HTML,
  • Control Valoración,
  • Menú,
  • Control Captcha,
  • Control Paginación,
  • Control Botón de opción,
  • Control Mapa del sitio,
  • Control Casilla de verificación,
  • Control Migas de pan,
  • Control deslizante,
  • Control HTML,
  • Control Looper,
  • Control iFrame,
  • Control Looper lineal,
  • Looper de tipo Galería de imágenes,
  • Control Tabla,
  • Control Tabla TreeView,
  • Control kanban,
  • Control Flexbox,
  • Control Applet Java,
  • Control TreeView,
  • Control Línea,
  • Control Cuadro de mando ,
  • Control "Componente Web",
  • Control Agenda,
  • Control Disposición.

Crear un nuevo control

Para crear un nuevo control:
  1. Seleccione el tipo de control que desea crear haciendo clic en el ícono correspondiente en la pestaña "Creación" del menú de WEBDEV.
  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 tipos de controles de una página pueden enlazarse a un campo de un archivo de datos, excepto los siguientes:
  • Control Botón,
  • Control "Componente Web"
  • Control Pestaña
  • Control Mapa del sitio
  • Control Línea
  • Control Paginación
  • Control HTML
  • Control Celda y control Tabla HTML
  • Control Applet Java

Existen varios métodos para crear un control enlazado a un campo:
  • Arrastrar y soltar el campo desde el panel "Análisis".
  • Ir a la pestaña "Enlace" de la ventana de descripción del control.
Características del control
Se puede abrir una ventana de descripción para todos los controles de una página. Esta ventana contiene varias pestañas que agrupan las características configurables de uno o más 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.
Para más información, consulte la ayuda en línea.
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 página,
  • Visibilidad del control,
  • Tamaño del control,
  • Anclaje, etc.
Pestaña Detalles
La pestaña "Detalles" permite definir los diferentes parámetros del control:
  • opciones de entrada,
  • permitir indirecciones, etc.
El contenido de esta pestaña depende del tipo de control.
Pestaña Enlace
La pestaña "Enlace" permite seleccionar el campo (de un archivo de datos o consulta) con el que se va a enlazar 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 Ayuda
La pestaña "Ayuda" permite:
  • describir el modo de funcionamiento del control. Esta información se imprimirá en la documentación técnica (documentación del proyecto, documentación de la página, etc.).
  • configurar todos los tipos 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.
Pestaña Avanzado
La pestaña "Avanzado" permite introducir el código HTML generado antes y después del control. También permite introducir el valor agregado en el atributo 'class' del control.
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.
  • Crear o cambiar un estilo.
  • Seleccionar un 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 permiten ver y cambiar el tamaño de los controles.
  • Los controladores blancos resaltan los controles seleccionados. Por ejemplo, cuando se seleccionan varios controles, los controladores blancos indican que no se puede cambiar el tamaño de los controles.
    Este tipo de controladores también se muestra cuando una página es 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 páginas permite:
  • Seleccionar uno o más controles (con el lazo, por ejemplo).
  • Agrupar los controles seleccionados.
  • Mover un control.
  • Cambiar el título del control.
  • Mostrar un tooltip avanzado cuando se pasa el cursor sobre el control. Este tooltip contiene: el nombre del control, la posición, el tamaño y el estado inicial (si el control es invisible).
Alineación de controles
La alineación de los controles permite crear una UI "profesional" y homogénea. Puede crear interfaces estándar utilizando las siguientes herramientas de WEBDEV:

Cuadrícula magnética

La cuadrícula magnética permite ubicar marcadores verticales y horizontales en la página. 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

Al mover un control en una página, el corrector de interfaz en tiempo real muestra las guías automáticamente. Los objetos se ajustan a las guías, lo que permite alinear el control que se está moviendo con los otros controles que se encuentran en la página.

Corrector de interfaz avanzado

El corrector de interfaz avanzado es una herramienta que permite homogeneizar la distribución de los controles en las diferentes páginas de un sitio.
El corrector de interfaz avanzado propone aplicar, a la página actual o a los controles seleccionados, las reglas de interfaz del estándar de Windows: alineación de los controles, tamaño de los botones, etc.

Opciones de alineación

Para alinear varios controles, WEBDEV permite definir:
  • una alineación predefinida (disponible en la pestaña "Alineación" o en la pestaña "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,
    • el último control seleccionado,
    • el control más grande seleccionado,
    • el control seleccionado más arriba a la izquierda.

Zoom configurable

Se puede especificar un factor de zoom para reducir o ampliar la visualización de la página actual.
Para especificar un factor de zoom, siga una de las siguientes opciones:
  • en la pestaña "Vista", en el grupo "Ayuda edición", especifique el factor de zoom deseado.
  • introduzca el factor de zoom en la barra de estado del editor (abajo a la derecha).
  • presione la tecla Ctrl y cambie el factor de zoom con la rueda del ratón manteniendo presionada la tecla Ctrl.
Opciones de edición de controles en una página
Las opciones de visualización permiten personalizar las operaciones realizadas en los controles en el editor de páginas.
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.
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".
Anclaje de los controles
Las páginas de un sitio WEBDEV se pueden redimensionar en tiempo de ejecución: se puede cambiar el tamaño del navegador y el sitio se puede mostrar en diferentes plataformas (iPhone, PC, etc.). El mecanismo de anclaje permite adaptar automáticamente el tamaño y la posición de los controles cuando se cambia el tamaño de la página.
El anclaje de un control se define a través de varios parámetros:
  • el anclaje del control: este parámetro define la modificación que se aplicará al control según el cambio de tamaño de la página. El control puede moverse hacia la izquierda y/o hacia abajo y ampliarse vertical y/o horizontalmente.
  • el alto y/o ancho del control: este parámetro permite definir el comportamiento del control cuando se redimensiona. El alto o ancho pueden adaptarse al contenido del control o al navegador. También se puede definir el tamaño mínimo del control.
Estos parámetros se pueden configurar en el editor de páginas.

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. Elija el tipo de anclaje que desea utilizar en la ventana que aparece.

    Se pueden definir tres tipos de anclajes:
    • anclaje de posición: permite definir la posición del control cuando se cambia el tamaño del navegador.
    • anclaje horizontal: permite definir el comportamiento del control (horizontalmente) cuando se cambia el tamaño del navegador. El control puede:
      • conservar el mismo ancho,
      • adaptarse al contenido,
      • seguir el comportamiento del navegador.
    • anclaje vertical: permite definir el comportamiento del control (verticalmente) cuando se cambia el tamaño del navegador. El control puede:
      • conservar la misma altura,
      • adaptarse al contenido,
      • seguir el comportamiento del navegador.
  4. También es posible definir el comportamiento del control cuando su contenido es más grande. Es posible:
    • ampliar el control y empujar los otros controles de la página,
    • truncar el contenido,
    • activar siempre una barra de desplazamiento,
    • mostrar una barra de desplazamiento solo cuando el contenido es más grande que el control.
  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).
Observación: Para definir el anclaje de los controles, también se pueden utilizar tablas de posicionamiento. Para obtener más información, consulte Tabla de posicionamiento.
Página anteriorTabla de contenidoPágina siguiente
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 14/09/2023

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