AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WEBDEV 2024!
Ayuda / Tutorial WEBDEV / Tutorial - Crear un sitio web con procesos de back office
  • Lección 3 - Editar los productos
  • Presentación
  • Una nueva página para editar productos
  • Crear la página
  • ¿Cuál es la función de esta página?
  • Crear controles Campo de entrada
  • Mostrar datos en la página
  • Confirmar cambios en la página
  • Abrir la ficha de producto desde la lista de productos
  • Probar los cambios del producto
  • En resumen

Tutorial - Crear un sitio web con procesos de back office

Lección 3 - Editar los productos
Abordaremos los siguientes temas:
  • Crear una página de ficha de producto en modo Sesión.
  • Editar un producto.
Durée de la leçon 50 min
Presentación
En la lección anterior, creamos la lista de productos. Ahora, vamos a crear una nueva página para ver y editar los detalles del producto.
En la próxima lección veremos cómo agregar un producto.
Abrir el proyecto de ejemplo:
En WEBDEV, abra el proyecto "Full_WEBDEV_Site":
  1. Vaya a la página de inicio de WEBDEV (Ctrl +<).
  2. Haga clic en "Tutorial", luego en "Tutorial - Create a WEBDEV website (Back Office and Front Office)", haga doble clic en "Full WEBDEV Site - Exercise".
Advertencia
Este proyecto se utilizará en las diferentes lecciones de este tutorial.
Una nueva página para editar productos
Ahora que tenemos la lista de productos, veremos cómo editar uno. Crearemos una página para ver y editar los detalles del producto.

Crear la página

Seguiremos los mismos pasos que antes para crear la página:
  1. Haga clic en Crear un elemento en los botones de acceso rápido.
  2. En la ventana "Nuevo", haga clic en "Página", y luego en "Página".
  3. En el asistente de creación de páginas, en "Basado en un modelo del proyecto", seleccione "PAGETPL_Menu".
  4. Finalice el asistente.
  5. En la ventana "Guardar página", introduzca el título de la página "Product form". El nombre de la página "PAGE_Product_form" se completa automáticamente.
  6. Valide.

¿Cuál es la función de esta página?

En esta página, los usuarios podrán editar las características del producto seleccionado en el control Looper. Este tipo de página se llama "Form" porque corresponde a una ficha descriptiva del elemento deseado.
En nuestro caso, esta página mostrará el contenido de los diferentes campos del archivo de datos "Product".
En primer lugar, tenemos que indicar qué producto se mostrará. Para ello, simplemente declare un parámetro en la página.
Para declarar un parámetro en la página:
  1. Presione F2. El editor de código muestra los diferentes eventos de la página.
  2. En el evento "Declaraciones globales", reemplace el código existente por el siguiente código WLanguage:
    Declaraciones globales de PAGE_Product_form (servidor)
    PROCÉDURE MyPage(NumProductToDisplay is 8-byte int)
  3. Analicemos este código WLanguage:
    • La palabra clave PROCEDURE del evento "Declaraciones globales" permite asociar un procedimiento a la apertura de la página.
    • El nombre del procedimiento es "MyPage". En tiempo de ejecución, esta palabra clave será reemplazada automáticamente por el nombre de la página actual.
    • El procedimiento espera la variable NumProductToDisplay (entero de 8 bytes) como parámetro. Esta variable corresponde al identificador del producto que se mostrará en la página. Esta variable es del mismo tipo que el campo ProductID correspondiente descrito en el archivo de datos Product.
  4. Cierre el editor de código.

Crear controles Campo de entrada

Vamos a crear los controles Campo de entrada que mostrarán la información del producto seleccionado.

Para crear los controles en la página:
  1. Abra el panel "Análisis" si es necesario: en la cinta de opciones, en la pestaña "Inicio", en el grupo "Entorno", despliegue "Paneles", haga clic en "Paneles" y seleccione "Análisis". Los diferentes archivos de datos definidos en el análisis "Full_WEBDEV_Site" se muestran en el panel.
  2. Haga clic en la 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 página que creó anteriormente.
    Arrastrar y soltar campos
  5. Diferentes controles se crean automáticamente en la página. 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 Reference (pestaña 'Enlace')
      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 (botón "OK" o "Cancelar").
  7. Guarde la página (Ctrl + S).
Mueva los controles en la página para obtener la siguiente UI:
Interfaz de la ficha de producto
  • Ubique la imagen a la derecha de los controles Campo de entrada.
  • Ubique el control "Arrival" debajo de los controles Campo de entrada

Mostrar datos en la página

La página de la ficha de producto mostrará el producto seleccionado en el control Looper. En los eventos WLanguage de la página, vamos a escribir el código para:
  • buscar el producto que se mostrará.
  • mostrar datos en la página.
Para buscar datos y mostrarlos en la página:
  1. Haga clic en la página en el editor.
  2. Presione F2. El editor de código muestra los diferentes eventos de la página.
  3. En el evento "Declaraciones globales", escriba el siguiente código debajo del código escrito anteriormente:
    Declaraciones globales de PAGE_Product_form (servidor)
    Product.ReadSeekFirst(ProductID, NumProductToDisplay)
    IF Product.Found() = False THEN
    // Display the list of products
    PAGE_List_of_products.Display()
    END
    Product.ToPage()
  4. Analicemos este código WLanguage:
    • La función <Archivo de datos>.ReadSeekFirst busca el primer registro del archivo de datos Product cuyo campo ProductID sea igual al valor de NumProductToDisplay. NumProductToDisplay corresponde al parámetro pasado a la página.
    • La función <Archivo de datos>.Found comprueba si se encontró un registro. Esta función se utiliza principalmente en sitios a los que acceden varios usuarios. Permite evitar errores causados por otros usuarios (registros eliminados, etc.). En este caso, si no se encuentra el registro (<Archivo de datos>.Found devuelve False), se vuelve a mostrar la lista de productos.
    • La función <Fuente>.ToPage obtiene los datos del registro actual en el archivo de datos y los muestra en los controles de la página. En nuestro caso, el registro actual corresponde al registro encontrado con la función <Archivo de datos>.ReadSeekFirst.
  5. Cierre el editor de código.

Confirmar cambios en la página

La página "PAGE_Product_form" le permitirá editar un producto de la lista de productos.
Vamos a agregar un control Botón para confirmar los cambios realizados en la página: el botón de validación (OK) verificará los datos introducidos y guardará los cambios.
Para crear el control Botón "OK":
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Botón".
  2. A continuación, haga clic en el centro de la página, debajo del control "Arrival", para crear el nuevo control.
  3. Cambie el texto del control: escriba "OK".
    Ficha del producto con el control Botón
    El botón "OK" permitirá:
    • verificar los datos introducidos: esto consiste en comprobar si el usuario rellenó los distintos campos de la página. Además, no requiere ningún acceso al servidor y puede realizarse en código Navegador.
    • guardar los datos introducidos en el archivo de datos Product. Esta operación se realiza en código Servidor. Los datos se envían al servidor y luego se guardan en el archivo de datos.
Escriba el código del botón "OK":
  1. Seleccione el botón "OK" y presione F2. Los eventos asociados al control Botón se abren.
  2. En el evento "Clic xxx (navegador)" del control Botón, escriba el siguiente código para comprobar los datos introducidos:
    Clic en BTN_OK (evento onclick navegador)
    IF EDT_Reference ~= "" THEN
    Error("Enter a reference.") 
    SetFocusAndReturnToUserInput(EDT_Reference)
    END
    IF EDT_Caption ~= "" THEN
    Error("Type a caption.")
    SetFocusAndReturnToUserInput(EDT_Caption)
    END
    IF EDT_Description ~= "" THEN
    Error("Enter a description.")
    SetFocusAndReturnToUserInput(EDT_Description)
    END
    IF EDT_PriceBT = 0 THEN
    Error("Type a price.")
    SetFocusAndReturnToUserInput(EDT_PriceBT)
    END
  3. Analicemos este código WLanguage:
    • Por cada control Campo de entrada en la página, verificamos si se introdujo un valor.
    • El operador '~=' comprueba si los valores son iguales, sin tener en cuenta las mayúsculas y minúsculas, ni la puntuación.
    • Si no se introduce ningún valor, un mensaje de error le pide al usuario que introduzca un valor (función Error). La ejecución del código se detiene y el foco de entrada se establece en el control Campo de entrada correspondiente con la función SetFocusAndReturnToUserInput.
  4. En el evento "Clic xxx (servidor)" del control Botón, escriba el siguiente código WLanguage para guardar los datos:
    Clic en BTN_OK (servidor)
    Product.FromPage()
    Product.Modify()
    PAGE_List_of_products.Display()
  5. Analicemos este código WLanguage:
    • La función <Archivo de datos>.FromPage 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 página utiliza menos de 10 controles y ya podemos notar las ventajas. Estas ventajas son mucho más notorias en las páginas que contienen un mayor número de controles: ¡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.
    • La función <Página>.Display muestra otra página. En nuestro caso, se vuelve a mostrar la página "PAGE_List_of_products".
  6. Guarde los cambios (Guardar un elemento o Ctrl + S).
  7. Cierre la ventana de código.
Un ícono aparece en la esquina superior derecha del botón "OK". Este ícono indica que hay un error en la UI o una posible mejora. Pase el cursor por encima del ícono para ver más detalles. En nuestro caso, WEBDEV sugiere asociar el botón a la tecla Entrar. Vamos a aceptar esta sugerencia:
  • Haga clic en el ícono .
  • En la ventana que aparece, haga clic en "Corregir".

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 Looper y ve los detalles mediante un control Enlace.

Vamos a modificar la página "PAGE_List_of_products" para crear un control Enlace:
  1. Seleccione la página "List of products": haga clic en "PAGE_List_of_products" en las pestañas de documentos abiertos:
    Pestañas de documentos abiertos
  2. Reduzca el control Reference horizontalmente: Crearemos el control Enlace al lado.
  3. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Enlace".
  4. A continuación, haga clic junto a la referencia en el control Looper para crear el control Enlace.
    Posicionamiento del control Enlace
  5. Cambie el texto del control Enlace (presione la barra espaciadora para editar el texto): introduzca "Edit".
El control Enlace "Edit" debe abrir la página "PAGE_Product_form". Vamos a abrir esta página mediante programación.
  1. Seleccione el enlace "Edit" y abra los eventos WLanguage asociados (F2).
  2. En la ventana de código que aparece, escriba el siguiente código en el evento "Clic xxx (servidor)":
    Clic en LINK_Edit (servidor)
    PAGE_Product_form.Display(ATT_ProductID[LOOP_Product])
  3. Analicemos este código WLanguage:
    • La función <Página>.Display abre la página "PAGE_Product_form".
    • La página abierta espera como parámetro el identificador del producto a mostrar. Este identificador corresponde al identificador del producto seleccionado en el control Looper. Para obtener el identificador, se especifica el atributo que contiene el identificador (ATT_ProductID) para la fila actual. Los corchetes permiten especificar la fila y LOOP_Product obtiene la fila actual en el control Looper.
      De forma predeterminada, ATT_ProductID devuelve el valor del atributo de la fila seleccionada. El código se puede escribir de la siguiente manera:
      PAGE_Product_form.Display(ATT_ProductID)
  4. Guarde los cambios (Guardar elemento o Ctrl + S).
  5. Cierre la ventana de código.
Probar los cambios del producto
Hemos creado los elementos necesarios para editar los productos. Ahora vamos a probarlos.
Pruebe el proyecto (haga clic en Probar proyecto en los botones de acceso rápido).
  1. El editor le pide que seleccione la primera página del modo Sesión.
    En este caso, seleccione la página "PAGE_List_of_products" y valide.
    La primera página del modo Sesión corresponde a la primera página que se abre al iniciar el sitio en modo Sesión.
    La primera página del proyecto en modo Sesión se puede definir:
    • al probar el proyecto.
    • en el panel "Explorador de proyectos": seleccione la página deseada, y luego abra el menú contextual y seleccione "Primera página del proyecto en modo sesión".
    Cuando se define la primera página del modo Sesión, aparece un "1" rojo pequeño a la izquierda del nombre de la página en el panel "Explorador de proyectos".
  2. El sitio se abre.
  3. En la lista de productos:
    • Haga clic en el enlace "Edit".
    • La página con los detalles del producto se abre.
      Página de detalles del producto
    • Cambie el precio del producto y haga clic en OK para confirmar los cambios.
    • El nuevo precio del producto aparece en la lista de productos.
Cierre las páginas para detener la prueba.
En resumen
En esta lección, vimos cómo manipular controles específicos de la web (control Looper) para mostrar datos procedentes de una base de datos. También creamos una página para ver los datos de un registro.
En la próxima lección, veremos cómo editar un registro y mejorar el diseño de la página web.
Proyecto completado
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. Este proyecto contiene las diferentes páginas creadas en las lecciones de esta parte. Este proyecto muestra el resultado esperado. Para abrir el proyecto completado, vaya a la página de inicio de WEBDEV y haga clic en "Tutorial", luego en "Tutorial - Create a WEBDEV website (Back Office and Front Office)", haga doble clic en "Full WEBDEV Site - Answers".
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 11/12/2023

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