AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV 2024!
Ayuda / Tutorial WINDEV / Tutorial - Aplicación WINDEV: gestionar datos
  • Lección 1 - Ventanas para introducir y editar datos
  • Presentación del ejemplo utilizado en este tutorial
  • Abrir el proyecto de ejemplo
  • Seleccionar la configuración del proyecto
  • Crear una ventana con una lista de productos
  • Crear la ventana
  • Crear controles
  • Prueba de la ventana
  • Características del control Tabla
  • Crear una ventana "Product form"
  • Crear la ventana
  • Crear controles enlazados a datos
  • Crear botones
  • Mejoras de la UI de la ventana "Product form"
  • Alineación de controles
  • Cambiar el tamaño de la ventana
  • Aspecto de la ventana
  • Gestión de anclajes
  • Abrir la ficha de producto desde la lista de productos
  • Cambiar el tamaño de la ventana en el editor
  • Crear el control Botón
  • Mostrar el producto seleccionado en el control Tabla
  • Editar un producto
  • Modificar la imagen del producto
  • Validar los cambios realizados en el producto
  • Probar los cambios del producto
  • Crear un nuevo producto
  • Agregar un control Botón
  • Agregar un nuevo registro al archivo de datos
  • Probar la adición de un nuevo producto
  • Ver registros
  • En resumen

Tutorial - Aplicación WINDEV: gestionar datos

Lección 1 - Ventanas para introducir y editar datos
Abordaremos los siguientes temas:
  • Presentación del proyecto de ejemplo.
  • Crear una ventana de menú con una lista de productos.
  • Crear una ficha de producto.
  • Agregar y modificar productos.
Durée de la leçon 50 min
Presentación del ejemplo utilizado en este tutorial
En este tutorial, vamos a crear una aplicación que manipula archivos de datos en formato HFSQL Classic.
Esta aplicación de gestión de pedidos se utilizará para:
  • Ver, introducir y modificar productos,
  • Imprimir reportes,
  • Ver estadísticas,
  • Enviar correos electrónicos,
  • etc.
Más adelante, en otros tutoriales veremos cómo implementar y distribuir la aplicación a los clientes finales.
Vamos a:
  • crear diferentes ventanas para ver, agregar y modificar productos.
  • crear diferentes reportes.
Estas operaciones le permitirán descubrir varios temas relacionados con la gestión de archivos de datos y también le permitirán utilizar algunas funcionalidades de WINDEV.

Abrir el proyecto de ejemplo

En WINDEV, abra el proyecto "WD Full Application":
  1. Vaya a la página de inicio de WINDEV (Ctrl + <).
  2. En la página de inicio, haga clic en "Tutorial", luego en "Tutorial - WINDEV application: Manage data", haga doble clic en "Full application - Exercise".
En esta lección, nos centraremos en cómo crear ventanas simples para manipular archivos de datos. Trabajaremos con un proyecto que ya se creó y que no contiene ningún elemento.
Veremos cómo crear un proyecto en el tutorial Crear un proyecto WINDEV y un análisis.
Advertencia
Este proyecto se utilizará en las diferentes lecciones de este tutorial.

Seleccionar la configuración del proyecto

El proyecto "WD Full Application" tiene dos configuraciones de proyecto:
  • "Ejecutable Windows de 32 bits",
  • "Ejecutable Windows de 64 bits".
El proyecto puede probarse y ejecutarse en cualquiera de estos modos (32 bits o 64 bits).
¿Para qué sirven las configuraciones de proyecto?
Las configuraciones de proyecto permiten definir los distintos tipos de generaciones que admite el proyecto: 32 bits, 64 bits, Linux, componentes, etc.
Para obtener más información, consulte Configuración de proyecto.
En este tutorial, utilizaremos la configuración de 64 bits:
  • En el panel "Explorador de proyectos", despliegue la opción "Configuraciones (Ejecutable Windows de 32 bits)".
  • Haga doble clic en "Ejecutable Windows de 64 bits". La configuración de proyecto correspondiente se selecciona automáticamente.
Advertencia
Si utiliza la versión Express, solo podrá seleccionar la configuración de proyecto "Ejecutable Windows de 32 bits".
Crear una ventana con una lista de productos
Antes de crear o modificar un producto, vamos a crear una ventana que muestre la lista de los diferentes productos disponibles en nuestra aplicación.
Para crear la ventana con la lista de productos, primero crearemos una ventana en blanco y luego agregaremos todos los controles necesarios.

Crear la ventana

Para crear una nueva ventana:
  1. Haga clic en Crear un elemento en los botones de acceso rápido (o presione Ctrl + N).
  2. En la ventana "Nuevo", haga clic en "Ventana" y, a continuación, en "Ventana".
  3. En el asistente, haga clic en la pestaña "Basado en un modelo" y seleccione "Utilizar: WINTPL_Template".
  4. Valide.
  5. En la ventana que aparece, especifique el título de la ventana: "Menu".
    Guardar un elemento

    Observación: El nombre de la ventana (que se utilizará en el código) se crea automáticamente a partir del título. Sin embargo, puede especificar un nombre diferente al del título de la ventana.
  6. Valide.
En este tutorial, utilizamos un modelo de ventanas para mantener un diseño coherente entre las diferentes ventanas de la aplicación. WINTPL_Template contiene un logotipo que aparecerá en todas las ventanas:
Modelo de ventanas
Para obtener más información, consulte Modelos de ventanas.

Crear controles

Utilizaremos un control Tabla para crear la lista de productos. Este control mostrará los datos del archivo de datos "Product".
¿Qué es un control Tabla?
Es importante distinguir entre una "Tabla" y un "control Tabla".
  • El término Tabla se utiliza en el contexto de una base de datos de tipo SQL.
  • Un control Tabla muestra datos en la UI. En este caso, los datos se pueden introducir directamente o provenir de un archivo de datos (o tabla).

Para crear el control Tabla:
  1. En la pestaña "Creación", en el grupo "Datos", despliegue "Tabla y List Box" y seleccione "Tabla (Vertical)". El control seguirá el cursor del ratón.
  2. Haga clic dentro de la ventana: el asistente de creación del control Tabla se abre.
  3. El control Tabla que estamos creando debe mostrar los registros del archivo de datos "Product".
    En el asistente, seleccione la opción "Mostrar datos de un archivo o una consulta existente".
    Asistente de creación del control Tabla
    Pase a la etapa siguiente del asistente (botón "Siguiente").
  4. El asistente muestra los diferentes archivos de datos y consultas del proyecto actual.
    Despliegue "Análisis" si es necesario y seleccione el archivo de datos "Product".
    Seleccionar el archivo de datos
    Pase a la etapa siguiente.
  5. El asistente muestra la lista de campos en el archivo de datos "Product".
    De forma predeterminada, todos los campos están seleccionados para que se muestren en el control Tabla. En nuestro caso, se mostrarán todos los campos EXCEPTO el identificador "ProductID" que corresponde al identificador automático del archivo de datos.
    Deseleccione "ProductID".
    Asistente de creación del control Tabla
    Pase a la etapa siguiente.
  6. A continuación, el asistente propone seleccionar el campo de ordenación. Este campo se utilizará para ordenar los datos que se muestran en el control Tabla. Los campos que se muestran en el asistente son los que se definieron como clave en el análisis. Vamos a definir el orden de los campos según el título.
    Haga clic en la fila "Caption".
    Asistente de creación del control Tabla
  7. Finalice el asistente.
  8. El control Tabla se crea automáticamente en la ventana. El control se posiciona y redimensiona automáticamente para adaptarse a todo el espacio disponible en la ventana.
    Ventana con el control Tabla en el editor
Los datos ya se muestran en el control, incluso en el editor. Este concepto es conocido como "Live data": el contenido de los archivos de datos que se encuentran en el equipo de desarrollo se utiliza en las ventanas o reportes manipulados en el editor. Esta funcionalidad es especialmente útil para definir el tamaño de los controles en una ventana, por ejemplo.

Prueba de la ventana

Vamos a probar la ventana que acabamos de crear.
  1. Haga clic en Probar ventana en los botones de acceso rápido.
  2. La ventana se muestra automáticamente con sus datos en modo de ejecución.
  3. Puede navegar por los productos con la barra de desplazamiento (o con las flechas del teclado).

Características del control Tabla

Imaginemos que somos el usuario final para ver cómo funciona el control Tabla en tiempo de ejecución.
Prueba de la ventana que contiene el control Tabla
Observaciones:
  • El control Tabla se muestra de la misma manera en ejecución y en el editor: esto es conocido como WYSIWYG ("What You See Is What You Get"): lo que ves es lo que obtienes.
  • En la parte superior de las columnas aparecen íconos pequeños:
    • la doble flecha indica que la columna se puede ordenar (columna "Reference" o "Caption", por ejemplo).
      Doble flecha que indica que la columna se puede ordenar
      Haga clic dos veces en la columna "Caption": los datos se muestran según un orden diferente. Una flecha a la izquierda de la columna indica que está ordenada y muestra la dirección del orden.
    • la lupa indica que se puede realizar una búsqueda en la columna.
      Ícono de búsqueda en una columna de un control Tabla
      Haga clic en la lupa de la columna "Reference", por ejemplo. Un área de entrada le permite escribir la referencia que desea buscar. Introduzca "REF-010". El producto que corresponde a la referencia se muestra automáticamente.
      Búsqueda en una columna
  • El control Tabla y las columnas contienen un menú contextual. Este menú contextual aparece:
    • haciendo clic derecho en la columna del control Tabla.
    • haciendo clic en la flecha situada en la esquina superior derecha de los encabezados de las columnas.
    Este menú contextual permite exportar el contenido del control Tabla a Excel (u OpenOffice.org Calc), Word (u OpenOffice.org Writer), imprimir, etc.
    Menú contextual del control
En pocos minutos, hemos visto algunas de las funcionalidades que están incluidas automáticamente en el control Tabla. No es necesario escribir código para que los usuarios puedan acceder a estas funcionalidades. Estas funcionalidades se conocen como "FAA" (Funcionalidades Automáticas de la Aplicación).
Varios controles incluyen las FAA de forma predeterminada. Si estas funcionalidades no deben estar disponibles (por razones de seguridad o privacidad), pueden desactivarse en el editor o en el código.
Para obtener más información, consulte Funcionalidades Automáticas de la Aplicación (FAA).
Ahora que tenemos la lista de productos, veremos cómo editar uno. Para ello, vamos a crear una ventana en la que se mostrarán los detalles del producto.
Cierre la ventana de prueba con la "X" situada en la esquina superior derecha de la pantalla. Enseguida, se vuelve a mostrar el editor de WINDEV.
Crear una ventana "Product form"

Crear la ventana

Vamos a crear una ventana para mostrar las características del producto seleccionado en el control Tabla. El nombre de este tipo de ventana es "Form" porque corresponde a una ficha descriptiva del elemento deseado.
Vamos a crear una nueva ventana.
Realice las siguientes acciones:
Ya sabemos cuáles son los pasos para crear una ventana. Ahora siga estas instrucciones:
  • Utilice el modelo WINTPL_Template para crear la ventana.
  • Introduzca "Product form" para el título de la ventana ("WIN_Product_form" será sugerido como nombre de la ventana).

Crear controles enlazados a datos

En este ejemplo, la ventana "Form" mostrará los datos de los distintos campos del archivo de datos "Product".
Para crear los controles en la ventana:
  1. Abra el panel "Análisis" si es necesario: en la pestaña "Inicio", en el grupo "Entorno", despliegue "Paneles", seleccione "Paneles" y, a continuación, haga clic en "Análisis". Los archivos de datos descritos en el análisis "WD Full Application" se muestran en el panel.
  2. Haga clic en el ícono Flecha a la izquierda del archivo de datos "Product": los campos del archivo de datos aparecen.
    Panel Análisis
  3. Seleccione todos los campos que se muestran en el panel (excepto "ProductID"). Puede seleccionar varios elementos manteniendo pulsada la tecla Ctrl.
  4. Arrastre los campos y suéltelos en la ventana que acaba de crear.
    Arrastrar y soltar campos
  5. Varios controles se crean automáticamente en la ventana. Estos controles están enlazados al campo correspondiente en el archivo de datos. Para comprobarlo:
    • Seleccione el control "Reference".
    • Haga clic derecho para abrir el menú contextual y seleccione la opción "Descripción".
    • Vaya a la pestaña "Enlace" en la ventana de descripción:
      Descripción del control Campo de entrada
      Esta pestaña muestra que el control Campo de entrada actual está enlazado al campo "Reference" del archivo de datos "Product".
  6. Cierre la ventana de descripción.
  7. Guarde la ventana.
Mueva los controles y cambie el tamaño de la ventana para obtener la siguiente UI:
Interfaz de la ventana en el editor

Crear botones

Vamos a agregar y modificar productos de la lista en la ventana "WIN_Product_form".
Para ello, agregaremos un botón para validar y uno para cancelar.
Para crear el control Botón que permite validar los datos introducidos:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Botón" (haga clic en la flecha que se encuentra debajo de Control Botón).
  2. Enseguida, aparece una lista con botones predefinidos.
  3. Haga clic en "OK": la forma del control Botón aparece bajo el puntero del ratón.
  4. Haga clic a la derecha de los controles Campo de entrada para crear el control Botón.
Agregue el control Botón que permite cancelar la entrada de datos siguiendo los mismos pasos.
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Botón" (haga clic en la flecha que se encuentra debajo de Control Botón).
  2. En la lista de botones predefinidos, haga clic en "Cancel": la forma del control Botón aparece bajo el puntero del ratón.
  3. Luego, haga clic debajo del botón"OK" para crear el control.
    Interfaz en el editor
Mejoras de la UI de la ventana "Product form"
Esta ventana es bastante simple, vamos a mejorar su UI. Cambiaremos algunos detalles para mejorar la experiencia del usuario.

Alineación de controles

Vamos a comenzar alineando los controles y definiendo un mismo tamaño:
  1. Seleccione el control "Caption" y luego, todos los controles Campo de entrada de la ventana (mantenga pulsada la tecla Ctrl y haga clic en los controles). El primer control seleccionado se utilizará como referencia para establecer el tamaño de los otros controles.
  2. En la cinta de opciones, vaya a la pestaña "Alineación". Esta pestaña contiene todas las opciones de alineación disponibles para los controles.
    Pestaña Alineación
  3. Vamos a alinear los bordes externos e internos de los controles. Haga clic en la opción "Justificar (Int. y Ext.)".
    Si no está seguro de qué alineación elegir, pase el cursor por encima de las opciones de la pestaña "Alineación". Al pasar el cursor por encima de una opción, los controles seleccionados en la ventana se posicionan y/o cambian de tamaño automáticamente según la opción por la que se pasa el cursor.
    Para aplicar la alineación, haga clic en la opción deseada.
    Si no desea aplicar la alineación, simplemente salga de las opciones de alineación: los controles vuelven a su posición inicial.
Tamaño de la ventana

Cambiar el tamaño de la ventana

Una vez posicionados todos los controles en la ventana, podemos definir su tamaño final. En nuestro ejemplo, la ventana sigue siendo demasiado grande.
Podemos utilizar los controladores de tamaño, como hemos hecho anteriormente. Sin embargo, WINDEV también ofrece la posibilidad de introducir directamente las dimensiones de la ventana.
  1. Haga clic en la ventana del editor. La ventana se selecciona.
  2. En la barra de mensajes, introduzca el nuevo tamaño de la ventana.
    Interfaz en el editor
    En este ejemplo, la dimensión inicial es de 609 x 270, vamos a establecer una nueva dimensión de 554 x 252.
  3. La ventana se modifica automáticamente. Para deshacer los cambios y seleccionar otro tamaño, pulse Ctrl +Z.

Aspecto de la ventana

Veamos el aspecto de la ventana. Utilizaremos un modo de ejecución específico para mostrar solo la UI de la ventana (sin ejecutar el código).
  1. En la pestaña "Modificación", en el grupo "Vista previa", haga clic en "Vista previa".
  2. Amplíe la ventana con los controladores de tamaño que se encuentran en la parte inferior de la ventana. La posición de los controles no cambia, por lo que hay gran espacio vacío en la ventana.
    Vista previa de la ventana

    Existen dos métodos para resolver este problema:
    • Evitar que la ventana cambie de tamaño.
    • Definir los anclajes, es decir, el comportamiento de los controles cuando se cambia el tamaño de la ventana. Veamos cómo realizar esta acción.
  3. Cierre la vista previa: haga clic en el botón "Cerrar" o en la "X" que se encuentra en la esquina superior derecha de la ventana.

Gestión de anclajes

Ahora utilizaremos anclajes para definir el comportamiento de los distintos controles cuando cambia el tamaño de la ventana.
¿Cómo establecer los anclajes en una ventana?
Para establecer los anclajes:
  1. En el editor, reduzca la ventana a su tamaño mínimo. Todos los bordes externos de la ventana deben estar cerca de un control (conservando los márgenes).
  2. Analice la posición de los controles y tenga en cuenta: "¿Cómo reaccionarán los controles cuando se amplíe la ventana?". Luego, aplique el anclaje correspondiente.
Vamos a definir los anclajes para esta ventana:
  1. Los botones "OK" y "Cancel" deben permanecer anclados a la derecha.
    • Seleccione ambos controles.
    • Haga clic derecho para abrir el menú contextual y seleccione "Anclaje".
    • En la ventana de opciones de anclaje, seleccione "Derecha".
      Gestión de anclajes
    • Valide.
    • En el editor aparecen pequeñas flechas rojas que indican que los controles están anclados a la derecha.
  2. Los controles Campo de entrada deben ampliarse horizontalmente:
    • Seleccione los 4 controles Campo de entrada.
    • Haga clic derecho para abrir el menú contextual y seleccione "Anclaje".
    • En la ventana de opciones de anclaje, seleccione "Ancho" (Anclaje a la izquierda y a la derecha).
    • Valide.
  3. Vamos a probar el comportamiento de esta ventana en la vista previa:
    • En la pestaña "Modificación", en el grupo "Vista previa", haga clic en "Vista previa".
    • Amplíe la ventana: los controles se amplían horizontalmente.
    • Ahora vamos a definir el anclaje vertical de los controles.
  4. La extensión de la descripción del producto en el control "Description" puede variar. Es el control más grande de la ventana: es necesario que ocupe el máximo espacio disponible. Establezca un anclaje horizontal y vertical (Anclaje vertical y horizontal).
  5. Una línea roja aparece automáticamente alrededor del control "Price BT": el editor de ventanas indica un problema de anclaje. Si el control "Description" se extiende hacia abajo, el control "Price BT" también debe moverse hacia abajo.
  6. Abra la ventana de anclaje del control "Price BT". La mejor opción de anclaje se propone automáticamente: "Ancho y abajo" (se muestra una marca verde). Seleccione el anclaje propuesto y valide.
  7. Vamos a probar el comportamiento de esta ventana en la vista previa:
    • En la pestaña "Modificación", en el grupo "Vista previa", haga clic en "Vista previa".
    • Amplíe la ventana: los controles se adaptan vertical y horizontalmente.
      Vista previa de la ventana
  8. Cierre la vista previa de la ventana para volver al editor.
Abrir la ficha de producto desde la lista de productos
Ahora, veamos cómo abrir la ficha del producto seleccionado en la lista de productos. Es muy sencillo: el usuario selecciona el producto en el control Tabla y abre los detalles del producto mediante un control Botón.
Vamos a:
  • Cambiar el tamaño de la ventana y del control Tabla para que haya suficiente espacio para el control Botón.
  • Crear el control Botón.
  • Abrir la ficha de producto.

Cambiar el tamaño de la ventana en el editor

Vamos a modificar la ventana "WIN_Menu" para crear un control Botón.
Vaya a la ventana "Menu": haga clic en "WIN_Menu" en las pestañas de documentos abiertos:
Pestañas de documentos abiertos
Actualmente, el control Tabla ocupa toda la ventana.
Vamos a ampliar la ventana para crear más espacio a la derecha del control Tabla:
  1. Mantenga pulsada la tecla Mayús.
  2. Amplíe la ventana hacia la derecha con los controladores de tamaño.
    La tecla Mayús permite ignorar las opciones de anclaje de los controles al redimensionar la ventana.
Ahora tenemos un espacio a la derecha para crear el control Botón que nos permitirá ver el producto seleccionado en el control Tabla.

Crear el control Botón

En este tutorial, ya vimos cómo crear los botones "Cancel" y "OK" utilizando controles Botón predefinidos. Seguiremos los mismos pasos para crear el botón "Modify".
Para crear el control Botón que permite ver el producto:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Botón" (haga clic en la flecha que se encuentra debajo de Nuevo control Botón).
  2. Escriba "Modificar" en la barra de búsqueda de la lista de controles Botón predefinidos. Haga clic en "Botón Modificar". La forma del control aparece bajo el cursor. Luego, haga clic a la derecha del control Tabla para crear el control Botón.
    Ventana con el control Botón en el editor
El control se crea. Ahora, escribamos el código para abrir la ventana de la ficha:
  1. Haga clic derecho en el control Botón que acaba de crear. Seleccione "Código" en el menú que aparece.
  2. En la ventana de código que aparece, escriba el siguiente código WLanguage en el evento "Clic":
    WIN_Product_form.Open()

    El editor de código incluye la funcionalidad de entrada predictiva (también llamada "Autocompletado"): al introducir un punto después del nombre de la ventana, aparecerá una lista desplegable con las funciones que pueden utilizarse en dicha ventana. Solo tiene que seleccionar la función que desee con el teclado o cursor.
  3. Analicemos este código WLanguage: la función <Ventana>.Open permite abrir la ventana "WIN_Product_form".
  4. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  5. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Mostrar el producto seleccionado en el control Tabla

Vamos a modificar la ventana "WIN_Product_form" para mostrar el producto seleccionado en el control Tabla.
Abra la ventana "WIN_Product_form": selecciónela en las pestañas de documentos abiertos.
Para mostrar los datos del producto:
  1. Abra los eventos WLanguage de la ventana:
    • Haga clic derecho fuera de la ventana.
    • Seleccione "Código" en el menú contextual que aparece.
    • El editor de código se abre. Enseguida, se muestran los eventos WLanguage asociados a la ventana.
  2. Introduzca el siguiente código WLanguage en el evento "Fin de inicialización de WIN_Product_form":
    // Assigns the content of items to the controls
    Product.ToWindow()

    La función <Archivo de datos>.ToWindow muestra los datos del archivo de datos que corresponden al registro actual en los controles. En este caso, el registro actual es el registro seleccionado en el control Tabla de la ventana "WIN_Menu".
  3. Cierre la ventana de código.
  4. Guarde la ventana (Ctrl + S).
Ahora, podemos comprobar el resultado final.
  1. Abra la ventana "WIN_Menu" en el editor: selecciónela en las pestañas de documentos abiertos.
  2. Pruebe la ventana (haga clic en Probar ventana en los botones de acceso rápido).
    • En la lista de productos, haga clic en uno de ellos.
    • Haga clic en el botón "Modify".
    • La ventana de detalles del producto se abre. Este es el resultado esperado.
  3. Cierre las diferentes ventanas de prueba haciendo clic en la "X" de la equina superior derecha de las ventanas.
Editar un producto
Ahora modificaremos la ventana "WIN_Product_form" para modificar un producto.
Vamos a:
  • permitir que el usuario modifique la imagen del producto.
  • agregar controles Botón para guardar o cancelar los cambios realizados en la ficha del producto.

Modificar la imagen del producto

El usuario podrá modificar la imagen de la ficha de producto. Para ello, vamos a crear un control Botón "Modify" debajo de la imagen del producto. Este control abrirá un selector de archivos para seleccionar la imagen deseada.

Abra la ventana "WIN_Product_form" en el editor seleccionando la pestaña correspondiente.
Para crear el control Botón que permite modificar la imagen:
  1. Cree un control Botón "Modificar" utilizando los controles predefinidos.
  2. Ubique el control debajo de la imagen del producto.
  3. Si es necesario, cambie el tamaño del botón (con los controladores de tamaño) para que tenga el mismo ancho que la imagen.
    Al cambiar el tamaño del control, un efecto de magnetismo automático facilita la alineación del control Botón con el control Imagen.
    Interfaz de la ventana ficha de producto en el editor
  4. Haga clic derecho en el control Botón. Seleccione "Código" en el menú que aparece.
  5. En la ventana de código que aparece, escriba el siguiente código WLanguage en el evento "Clic":
    fImageSelect(
    Asistente de funciones en el editor de código
  6. El editor de código propone un asistente de código.
    • Haga clic en "fImageSelect wizard".
    • El asistente de código se abre.
      WINDEV incluye varios asistentes de código que generarán las líneas de código correspondientes a través de preguntas sencillas. No dude en utilizarlos, le ayudará a evitar errores de sintaxis.
  7. Conserve las opciones predeterminadas en el asistente y valide. El código WLanguage correspondiente se introduce automáticamente.
    sArchivo is string
    // Abre el selector de imágenes
    sArchivo = fImageSelect("", "", "Seleccione una imagen...")
    La función fImageSelect permite abrir la ventana de selección de imágenes y asociarla a la variable "File".
  8. Agregue el siguiente código WLanguage:
    // If a file was selected
    IF sArchivo <> "" THEN
    // Assigns the image to the Image control
    IMG_Visual = sArchivo
    END
    Este código WLanguage asigna el archivo seleccionado al control Imagen de la ventana.
  9. Cierre el editor de código (haga clic en la "X" en la esquina superior derecha del editor de código).
Probaremos esta funcionalidad una vez que se hayan realizado todos los cambios en la ficha de producto.

Validar los cambios realizados en el producto

Hemos creado dos controles Botón en la ventana "WIN_Product_form":
  • un control Botón "OK" para validar los cambios,
  • un control Botón "Cancel" para volver a la lista de productos.
Ahora vamos a escribir el código WLanguage de estos dos controles.

Primero, abra la ventana "WIN_Product_form".
Vamos a introducir el código WLanguage del botón "OK".
  1. Haga clic derecho en el control Botón y seleccione "Código" en el menú contextual.
  2. Introduzca el siguiente código en el evento "Clic" de WLanguage:
    Product.FromWindow()
    Product.Modify()
    Close()

    Analicemos este código WLanguage:
    • La función <Archivo de datos>.FromWindow actualiza los campos del registro actual con los datos de los controles enlazados. Esta función equivale a las siguientes líneas de código:
      Product.Reference = EDT_Reference
      Product.Caption = EDT_Caption
      Product.Description = EDT_Description
      ...

      Nuestra ventana contiene menos de 10 controles y ya hemos visto la simplicidad de WLanguage; entre más controles se utilicen, ahorrará más líneas de código: ¡una sola línea de código asigna todos los valores!
    • La función <Archivo de datos>.Modify actualiza el registro actual en el archivo de datos.
  3. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  4. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).
Las modificaciones realizadas en la ventana "WIN_Product_form" deben tenerse en cuenta en el control Tabla que muestra la lista de productos. Para ello, vamos a modificar el código WLanguage asociado al control Botón "Modify" en la ventana "WIN_Menu".
  1. Abra la ventana "WIN_Menu" en el editor: selecciónela en las pestañas de documentos abiertos.
  2. Seleccione el botón "Modify" y abra el editor de código (F2).
  3. Modifique el evento "Clic" de la siguiente manera:
    // Opens the product form for the selected product
    WIN_Product_form.Open()

    // Updates the selected row
    TABLE_Product.Display(taCurrentSelection)
    Analicemos este código:
    • La función <Tabla>.Display actualiza el control Tabla con los datos modificados en la ficha del producto.
    • La constante taCurrentSelection especifica que el control Tabla debe actualizarse a partir de la posición de la banda de selección.
  4. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  5. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Probar los cambios del producto

Hemos realizado todos los cambios para que sea posible modificar un producto. Ahora, podemos hacer una prueba.
Para probar los cambios de un producto:
  1. Pruebe el proyecto (haga clic en Probar proyecto en los botones de acceso rápido).
    Botones de acceso rápido
  2. WINDEV le pide que seleccione la primera ventana del proyecto. En este caso, la ventana "WIN_Menu". Seleccione la ventana y valide.
    La primera ventana del proyecto es la primera ventana que se abrirá al iniciar la aplicación. Para obtener más información, consulte Primera ventana del proyecto.
  3. El proyecto se inicia en modo de prueba y se muestra la primera ventana.
  4. Seleccione un producto de la lista de productos (por ejemplo, el primero) y haga clic en "Modify".
  5. Los detalles del producto seleccionado se muestran en la ficha del producto.
  6. Cambie el precio de 100,23 a 200,00 y haga clic en "OK".
  7. Al volver a la lista de productos, notará que el precio del producto se actualizó correctamente.
  8. Abra de nuevo los detalles del producto.
  9. Haga clic en el botón "Modify" debajo de la imagen. Un selector de imágenes se abre. Seleccione una imagen y valide. La imagen seleccionada se muestra en la ficha.
  10. Haga clic en el botón "Cancel". La modificación de la imagen no se tuvo en cuenta en el archivo de datos.
  11. Haga clic en la "X" para cerrar la aplicación.
Crear un nuevo producto
El principio para crear un producto es el siguiente:
  • En la ventana de la lista de productos, vamos a agregar un control Botón "New" que abrirá la ventana "Product form".
  • A continuación, modificaremos el código de la ventana "Product form" para agregar un producto al archivo de datos Product.

Agregar un control Botón

Para agregar un control Botón "New" en la ventana "WIN_Menu":
  1. Cree un control Botón "New" utilizando los controles predefinidos.
  2. Ubique el botón "New" encima del botón "Modify" (desplace este último si es necesario).
    Interfaz de la ventana en el editor
  3. Modifique el código WLanguage del control:
    • Seleccione el control y presione F2.
    • Introduzca el siguiente código en el evento "Clic" de WLanguage:
      Product.Reset()
      WIN_Product_form.Open()
      TABLE_Product.Display(taCurrentRecord)
      Analicemos este código:
      • La función <Archivo de datos>.Reset reinicia las variables de los campos del archivo de datos "Product" con los valores predeterminados para gestionar el nuevo registro.
      • La función <Ventana>.Open abre la ficha de producto para introducir el nuevo registro.
      • La función <Tabla>.Display vuelve a mostrar el control Tabla. En este código, la constante taCurrentRecord vuelve a mostrar el control Tabla a partir de la posición del registro actual.
  4. Guarde los cambios haciendo clic en Guardar un elemento en los botones de acceso rápido.
  5. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Agregar un nuevo registro al archivo de datos

Ahora modificaremos la ventana de la ficha de producto para agregar un nuevo registro.
  1. Abra la ventana "WIN_Product_form".
  2. Vamos a hacer algunos cambios en el código WLanguage del botón "OK":
    • Seleccione el control Botón "OK" y presione F2.
    • En el evento "Clic", reemplace el código WLanguage por el siguiente:
      Product.FromWindow()
      IF Product..NewRecord THEN
      Product.Add()
      ELSE
      Product.Modify()
      END
      Close()
      Analicemos este código WLanguage:
      • La propiedad NewRecord permite saber si se debe crear el registro actual.
      • Si se llamó a la función <Archivo de datos>.Reset previamente, la propiedad devuelve True (por ejemplo, al hacer clic en "New") y el registro se crea con la función <Archivo de datos>.Add.
      • Si el registro actual ya existe, se modifica con la función <Archivo de datos>.Modify.
      • La función <Archivo de datos>.Add agrega el registro al archivo de datos. Esta función toma los valores en la memoria y escribe el contenido de los campos en el mismo archivo de datos. Los índices se actualizan inmediatamente de forma automática. En este caso, se actualiza el archivo de datos "Product".
  3. Guarde los cambios haciendo clic en Guardar un elemento en los botones de acceso rápido.
  4. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Probar la adición de un nuevo producto

Para probar la adición de un producto:
  1. Pruebe el proyecto (haga clic en Probar proyecto en los botones de acceso rápido).
  2. En la lista de productos, haga clic en el botón "New".
  3. Introduzca un nuevo producto con las siguientes características:
    • Reference: REF-337
    • Caption: Surf WD
    • Description: Surf with WINDEV colors
    • Price: 150
      Prueba de la ventana para agregar un producto
  4. Valide. El nuevo producto aparece en la lista de productos.
  5. Haga clic de nuevo en el botón "New".
  6. Introduzca un nuevo producto con las siguientes características:
    • Reference: REF-337
    • Caption: Surf WB
    • Description: Surf with WEBDEV colors
    • Price: 150
  7. Valide. Enseguida, aparece una ventana específica:
    Gestión de duplicados
    Esta ventana le indica al usuario que se ha encontrado un duplicado: la referencia (que es una clave única) es la misma para dos productos. Esta ventana permite cambiar el valor de la referencia: introduzca "REF-338", por ejemplo.
    Esta ventana gestiona errores HFSQL automáticamente.
Pueden producirse varios errores al agregar o modificar un registro: errores de duplicados, de integridad, de contraseña, etc.
De forma predeterminada, WINDEV gestiona los errores automáticamente: por cada error encontrado al manipular los registros de la base de datos, se muestra una página específica al usuario. Esta ventana permite que los usuarios modifiquen sus datos directamente.
Para obtener más información, consulte Gestión automática de errores.

Ver registros

Los registros agregados se pueden ver inmediatamente en el control Tabla de la ventana "WIN_Menu".
Sin embargo, en algunos casos (al realizar pruebas, por ejemplo), es posible que desee ver el contenido del archivo de datos directamente.
WINDEV ofrece una herramienta sencilla para ver el contenido de los archivos de datos cuando se está desarrollando una aplicación (por ejemplo, cuando aún no se han creado las ventanas en las que se mostrarán los datos).
Esta herramienta es WDMAP. Vamos a utilizarla para ver el contenido del archivo de datos Product.
Para abrir WDMAP:
  1. En la pestaña "Herramientas", en el grupo "Base de datos", haga clic en "WDMap".
  2. Seleccione el archivo de datos "Product". El contenido del archivo de datos se muestra.
    WDMAP
  3. Ordene los elementos por referencia (haga clic en el encabezado de la columna "Reference"), los dos registros que creamos anteriormente aparecen en la tabla.
En resumen
Proyecto completado
¿Desea comprobar el resultado final de las etapas descritas en este tutorial?
Hay un proyecto completado disponible. Este proyecto contiene las ventanas creadas en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - WINDEV application: Manage data", haga doble clic en "Full application - Answers".
En esta lección vimos cómo agregar y modificar un registro en una base de datos a través de una interfaz de usuario. En la próxima lección, realizaremos una búsqueda simple en los registros de la base de datos.
Tabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 22/12/2023

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