Saltar al contenido principal
Versión: Siguiente

Formularios

Los formularios ofrecen la interfaz a través de la cual se introduce, modifica e imprime la información en una aplicación de escritorio. Los usuarios interactúan con los datos de una base de datos mediante formularios e imprimen informes utilizando formularios. Los formularios pueden utilizarse para crear cajas de diálogo personalizadas, paletas o toda ventana personalizada.

Los formularios también pueden contener otros formularios a través de las siguientes funcionalidades:

Creación de formularios​

Puede añadir o modificar formularios 4D utilizando los siguientes elementos:

  • La interfaz 4D Developer: cree nuevos formularios desde el menú Archivo o la ventana del Explorador.
  • El editor de formularios: modifique sus formularios utilizando el editor de formularios.
  • El código JSON: cree y diseñe sus formularios utilizando JSON y guarde los archivos de los formularios en la ubicación adecuada. Ejemplo:
{
    "windowTitle": "Hello World",
    "windowMinWidth": 220,
    "windowMinHeight": 80,
    "method": "HWexample",
    "pages": [
        null,
        {
            "objects": {
                "text": {
                "type": "text",
                "text": "Hello World!",
                "textAlign": "center",
                "left": 50,
                "top": 120,
                "width": 120,
                "height": 80
                },
                "image": {
                "type": "picture",
                "pictureFormat": "scaled",
                "picture": "/RESOURCES/Images/HW.png",
                "alignment":"center", 
                "left": 70,
                "top": 20, 
                "width":75, 
                "height":75        
                },
                "button": {
                "type": "button",
                "text": "OK",
                "action": "Cancel",
                "left": 60,
                "top": 160,


                "width": 100,
                "height": 20
                }
            }
        }
    ]
}

Formulario proyecto y formulario tabla​

Hay dos categorías de formularios:

  • Los formularios proyecto - Formularios independientes que no están unidos a ninguna tabla. Están pensados, sobre todo, para crear cajas de diálogo de interfaz, al igual que componentes. Los formularios proyecto pueden utilizarse para crear interfaces que cumplan fácilmente con los estándares del sistema operativo.

  • Los formularios tablas - Se adjuntan a tablas específicas y, por tanto, se benefician de funciones automáticas útiles para el desarrollo de aplicaciones basadas en bases de datos. Normalmente, una tabla tiene formularios de entrada y salida separados.

Normalmente, se selecciona la categoría del formulario al crearlo, pero se puede cambiar después.

Uso de formularios​

Los formularios se llaman usando comandos específicos del lenguaje 4D. En sus aplicaciones de escritorio 4D, los formularios se pueden utilizar de varias maneras, dependiendo del estado de su interfaz. Un formulario puede ser:

  • utilizado en su propia ventana para la visualización de datos, procesamiento, edición, o para mostrar información en pantalla al usuario,
  • utilizado integrado en otro formulario (subformulario),
  • utilizado como plantilla para la impresión,
  • o llamados por funciones específicas como el editor de etiquetas.

Utilizar un formulario de proyecto en una ventana​

Cuando quiera utilizar un formulario como diálogo en pantalla, necesita (1) crear una ventana y (2) cargar el formulario en la ventana, junto con un bucle de eventos para procesar acciones del usuario. Los pasos más sencillos para mostrar un formulario en pantalla son:

  1. Llame al comando Open form window para crear y preconfigurar una ventana adaptada a su formulario. Tenga en cuenta que el comando solo dibuja una ventana vacía, no muestra nada.
  2. En el mismo método, llame al comando DIALOG para cargar realmente el formulario en la ventana de formulario abierta, listo para la interacción del usuario. DIALOG carga los datos del formulario y pone su código en modo de escucha de eventos del usuario. Cuando llama a este comando sin asterisco (*), el diálogo permanecerá en pantalla y la ejecución del código se congelará hasta que ocurra un evento.
  3. (opcional) Utilice el comando Form desde el contexto del formulario para acceder a los datos del formulario.
Compatibilidad

Los comandos todo en uno como ADD RECORD o MODIFY RECORD fusionan todos los pasos en una sola llamada. Estos comandos heredados aún pueden utilizarse para la creación de prototipos o desarrollos básicos, pero no están adaptados a las interfaces modernas totalmente controladas. Dependen directamente de la base de datos 4D y de funciones heredadas, como los formularios tabla, y no aprovechan la potencia ni la flexibilidad de las funcionalidades ORDA. A menos que existan necesidades específicas, se recomienda utilizar plantillas de proyecto para las interfaces de sus aplicaciones de escritorio 4D.

Ejemplo simple​

Cree el siguiente formulario básico en el Editor de formularios:

El formulario está asociado a una clase "myForm", definida así:

    //cs.myForm
property name : Text
property age : Integer

Class constructor
  This.name:=""
  This.age:=0

La clase de formulario es automáticamente instanciada por 4D una vez cargado el formulario. Si ejecuta el siguiente método de proyecto:

    // Instanciar un objeto de formulario que alojará los datos del formulario y la lógica de la interfaz de usuario
var $formObject:=cs.myForm.new()

    // Preparar los valores por defecto en el objeto de formulario
$formObject.name:="Smith"
$formObject.age:=42

    // Crear una ventana vacía con una configuración ad hoc que se ajuste a las dimensiones deseadas del formulario, las propiedades de redimensionamiento,
    // y el tipo de ventana (esto no muestra el formulario)
var $win:=Open form window("myForm"; Movable form dialog box; Horizontally centered; Vertically centered)

    //Representa el formulario y proporciona datos $formObject. El cuadro de diálogo también activa el bucle de eventos del formulario
DIALOG("myForm"; $formObject)

    //Sin el asterisco en la instrucción DIALOG, el formulario espera a que el usuario lo cierre 
    //antes de ejecutar el resto del código. Llamar a Close window es simplemente una buena práctica 
CLOSE WINDOW($win) //libera la referencia

    //Muestra los datos modificados por el usuario, si los hay/
ALERT($formObject.name+" is "+String($formObject.age)+" years old!")

4D muestra:

Utilizar formularios como subformularios​

Un formulario puede estar integrado en otro formulario, en cuyo caso se convierte en un objeto subformulario que sigue unas reglas específicas. Un subformulario se utiliza automáticamente cuando su formulario principal se muestra en una ventana.

De la misma manera que pasas un objeto a un formulario con el comando DIALOG, también puede pasar un objeto a un área de subformulario utilizando la lista de propiedades. A continuación, puede utilizarlo en el subformulario con el comando Form. En este ejemplo, el objeto "InvoiceAddress" está vinculado al subformulario:

Utilizar formularios para imprimir​

En las aplicaciones de escritorio 4D, los formularios pueden imprimirse utilizando los diferentes comandos del tema Imprimir.

Ejemplos​

Puede utilizar formularios para imprimir datos, ya sea en forma de página o de lista.

  • Para imprimir solo una parte de un formulario, utilice el comando Print form. Por ejemplo:
var $formData:={}
$formData.lastname:="Smith"
$formData.firstname:="john"
$formData.request:="I need more COFFEE"
var $h:=Print form("Request_var";$formData;Form detail)
  • Para imprimir un formulario en una tarea de impresión para procesar datos durante la impresión, utilice los comandos FORM LOAD y Print object. Por ejemplo:
 var $formData : Object
 var $over : Boolean
 var $full : Boolean
 
 OPEN PRINTING JOB
 $formData:={}
 $formData.LBcollection:=[]
 ... //llenar la colección con datos
 
 FORM LOAD("GlobalForm";$formData) 
 $over:=False
 Repeat
    $full:=Print object(*;"LB") // la fuente de datos de este listbox "LB" es Form.LBcollection
     LISTBOX GET PRINT INFORMATION(*;"LB";lk printing is over;$over)
    If(Not($over))
       PAGE BREAK
    End if
 Until($over)
 FORM UNLOAD
 CLOSE PRINTING JOB

Imprimir motor de renderizado​

4D utiliza un motor de renderizado de impresión específico para generar salidas con un diseño adaptado a la impresión. Incluye las siguientes características principales:

  • Widgets interactivos como botones, interruptores, desplegables, etc. y los efectos de interfaz de usuario modernos como vidrio, desenfoque o transparencia o efectos de sombra se convierten en representaciones estáticas adaptadas y se aplanan en estilos imprimibles, para que el documento siga siendo legible y profesional una vez impreso.
  • La estructura del diseño, el espaciado y la alineación se conservan para que el documento impreso refleje la estructura lógica del formulario en pantalla.
  • Se produce la misma salida, tanto si el formulario se imprime desde macOS como desde Windows.

Por ejemplo, el siguiente formulario:

... se imprimirá con este renderizado:

Entrada de blog relacionada

Impresión de interfaces modernas con resultados limpios y coherentes

Renderizador de impresión heredado​

En versiones anteriores a 4D 21 R3, se utilizaba otro renderizador de impresión. Este renderizador heredado simplemente dibuja los widgets tal y como aparecen en la pantalla. Por motivos de compatibilidad, el renderizador heredado está activado por defecto en los proyectos o bases de datos convertidos desde versiones anteriores a 4D 21 R3, de modo que los formularios diseñados con este renderizador sigan imprimiéndose como se espera.

Sin embargo, puede habilitar el moderno motor de procesamiento de impresión en cualquier momento:

Limitación

Por motivos técnicos, el motor de impresión heredado no está disponible con los formularios que se muestran con Fluent UI en Windows o Liquid Glass en macOS. En estos contextos, los formularios se imprimen siempre con el motor de renderizado de impresión moderno, sea cual sea la opción de compatibilidad.

Otros usos de formularios​

Hay otras formas de utilizar los formularios en las aplicaciones de 4D, entre ellas:

Páginas formulario​

Cada formulario consta de al menos dos páginas:

  • una página 1: una página principal, mostrada por defecto
  • una página 0: una página de fondo, cuyo contenido se muestra en todas las demás páginas.

Puede crear varias páginas para un formulario de entrada. Si tiene más campos o variables de los que caben en una pantalla, puede crear páginas adicionales para mostrarlos. Las páginas múltiples le permiten hacer lo siguiente:

  • Coloque la información más importante en la primera página y la menos importante en otras.
  • Organice cada tema en su propia página.
  • Reducir o eliminar el desplazamiento durante la entrada de datos definiendo el orden de entrada.
  • Deje espacio alrededor de los elementos del formulario para lograr un diseño de pantalla atractivo.

Las páginas múltiples son útiles sólo para los formularios de entrada. No son para imprimir. Cuando se imprime un formulario de varias páginas, sólo se imprime la primera.

No hay restricciones en el número de páginas que puede tener un formulario. El mismo campo puede aparecer un número ilimitado de veces en un formulario y en todas las páginas que desee. Sin embargo, cuantas más páginas tenga un formulario, más tiempo tardará en mostrarse.

Un formulario multipáginas tiene una página de fondo y varias páginas de visualización. Los objetos que se colocan en la página de fondo pueden ser visibles en todas las páginas de visualización, pero sólo se pueden seleccionar y editar en la página de fondo. En los formularios multipágina, debe colocar su paleta de botones en la página de fondo. También es necesario incluir uno o más objetos en la página de fondo que ofrezcan las herramientas de navegación para el usuario.

Renderización Fluent UI​

Vista previa para desarrolladores

La compatibilidad con Fluent UI se encuentra actualmente en fase Developer Preview. No debe utilizarse en producción.

En Windows, 4D soporta el renderizado de formularios Fluent UI, el moderno diseño gráfico de la interfaz de usuario de Microsoft, basado en la tecnología WinUI 3. WinUI 3 es la base del Windows App SDK y representa las próximas interfaces gráficas de Windows.

La renderización Fluent UI ofrece controles modernos y atractivos, compatibilidad con los temas sistema dark/light, renderización más fluida optimizada para pantallas de alta resolución y una experiencia de usuario coherente y alineada con las aplicaciones recientes de Microsoft.

Tema claroTema oscuro
Disponibilidad

Esta funcionalidad puede utilizarse en proyectos 4D en Windows. No está disponible en macOS ni en bases de datos binarias 4D en Windows.

Entradas de blog relacionadas

Modernice sus interfaces 4D con Fluent UI
Despliegue Fluent UI sin esfuerzo en sus aplicaciones 4D

Requisitos​

El renderizado Fluent UI requiere que Windows App SDK esté instalado en su máquina. Debe asegurarse de que este SDK está instalado en cualquier máquina Windows que muestre sus formularios.

Si es necesario, puede instalar el Windows App SDK. Para mayor comodidad, el instalador 4D ofrece un enlace para descargar el instalador de Windows AppSDK. También puede visitar la página de descargas de Microsoft. Recomendamos utilizar la versión referenciada por el programa de instalación de 4D, que ofrece una compatibilidad óptima.

Si Windows App SDK no está correctamente instalado, 4D renderizará todos sus formularios en modo clásico sin ningún error y se registrará la siguiente advertencia en el log de diagnóstico: "Fluent UI es necesario pero no está disponible. La aplicación se ejecuta con el aspecto clásico de Windows."

Activar el renderizado Fluent UI​

Puede activar el modo de renderizado Fluent UI a nivel de aplicación o a nivel de formulario. La configuración del formulario tiene prioridad sobre la configuración de la aplicación.

Parámetros de la aplicación​

Seleccione la opción Utilizar Fluent UI en Windows en la página "Interfaz" de la caja de diálogo de las Propiedades.

En este caso, el modo de renderizado Fluent UI se utilizará por defecto en Windows para todos los formularios.

nota

Si la configuración actual no cumple las condiciones de Fluent UI, aparecerá un mensaje de error junto a la casilla de verificación.

Parámetros del formulario​

Cada formulario puede definir su propio renderizado a través de la propiedad Apariencia de los Widgets. Las siguientes opciones están disponibles:

  • Heredado: hereda las propiedades globales de la aplicación (por defecto),
  • Classic: utiliza el estilo clásico de Windows,
  • Fluent UI: permite el renderizado moderno basado en Fluent UI.

La propiedad de formulario JSON correspondiente es fluentUI con el valor undefined (es decir, heredado, valor por defecto), "true" o "false".

CSS​

El media query CSS form-theme permite configurar varios estilos en función del tema utilizado.

Comportamientos específicos​

Cuando utilice los formularios 4D con el renderizado Fluent UI, debe prestar atención a los siguientes puntos:

  • El comando FORM theme devuelve el tema actual del formulario. Valores posibles: "Classic" o "FluentUI". Si no existe un formulario actual o si el comando se ejecuta en macOS, se devuelve una cadena vacía.
  • El comando Application info le permite saber si Fluent UI puede ser utilizado (propiedad canUseFluentUI) o está siendo utilizado (propiedad useFluentUI).
  • Si GET STYLE SHEET INFO es llamado en el contexto de un formulario, la información devuelta se refiere a la apariencia actual del formulario (Classic o FluentUI). Si se llama al comando fuera del contexto de un formulario, la información devuelta se refiere a las propiedades globales del proyecto.
  • SET MENU ITEM STYLE con el parámetro itemStyle Underline no es soportado (ignorado) para los menús emergentes.
  • El objeto de formulario Stepper no admite el evento doble clic.
  • Los botones circulares son soportados (como en macOS).
  • Los comandos WA ZOOM IN / WA ZOOM OUT no son compatibles en áreas Web con motor de renderizado sistema.
  • Se puede añadir rectángulo de foco a las entradas imagen y texto.

Formularios heredados​

Los formularios 4D pueden utilizar y ser utilizados como "formularios heredados", lo que significa que todos los objetos de Formulario A pueden ser utilizados en Formulario B. En este caso, Formulario B "hereda" los objetos de Formulario A.

Las referencias a un formulario heredado están siempre activas: si se modifica un elemento de un formulario heredado (estilos de botón, por ejemplo), se modificarán automáticamente todos los formularios que utilicen este elemento.

Todos los formularios (formularios tabla y formularios proyecto) pueden ser designados como un formulario heredado. Sin embargo, los elementos que contienen deben ser compatibles con el uso en diferentes tablas de la base de datos.

Cuando se ejecuta un formulario, los objetos se cargan y combinan en el siguiente orden:

  1. Página cero del formulario heredado
  2. Página 1 del formulario heredado
  3. Página cero del formulario abierto
  4. Página actual del formulario abierto.

Este orden determina el orden de entrada de los objetos en el formulario.

Sólo las páginas 0 y 1 del formulario heredado pueden aparecer en otros formularios.

Las propiedades y el método de un formulario no se tienen en cuenta cuando ese formulario se utiliza como formulario heredado. Por otro lado, se llaman los métodos de los objetos que contiene.

Para definir un formulario heredado, el nombre del formulario heredado y la Tabla de formularios heredada (para el formulario tabla) las propiedades deben definirse en la forma que heredará algo de otro formulario.

Un formulario puede heredar de un formulario proyecto, definiendo la propiedad Inherited Form Table en \<None> en la Lista de propiedades (o " " en JSON).

Para dejar de heredar un formulario, seleccione \<None> en la lista de propiedades (o " " en JSON) para la propiedad Inherited Form Name.

Es posible definir un formulario heredado en un formulario que eventualmente se utilizará como formulario heredado para un tercer formulario. La combinación de objetos se realiza de forma recursiva. 4D detecta los bucles recursivos (por ejemplo, si el formulario [table1]form1 se define como el formulario heredado de [table1]form1, es decir, él mismo) e interrumpe la cadena de formularios.

Propiedades soportadas​

Barra de menú asociada - Altura fija - Ancho fijo - Divisor de formulario - Detalle de formulario - Pie de formulario - Encabezado de formulario - Nombre de formulario - Tipo de formulario - Nombre de formulario heredado - Tabla de formulario heredado - Altura máxima - Ancho máximo - Método - Altura mínima - Ancho mínimo - Páginas - Configuración de impresión - Publicado como subformulario - Guardar geometría - Título de ventana

Eventos soportados​

On Activate - On After Edit - On After Keystroke - On Before Keystroke - On Begin Drag Over - On Bound Variable Change - On Clicked - On Close Box - On Close Detail - On Data Change - On Deactivate - On Display Detail - On Double Clicked - On Drop - On Header - On Load - On Load Record - On Losing focus - On Menu Selected - On Mouse Enter - On Mouse Leave - On Mouse Move - On Open Detail - On Outside Call - On Page Change - On Plug in Area - On Printing Break - On Printing Detail - On Printing Footer - On Resize - On Selection Change - On Timer - On Unload - On Validate