Tutorial - Crear un sitio web con procesos de back office

Advertencia
Esta lección utiliza el proyecto de ejemplo creado en la lección anterior. Debe haber completado la lección 2.

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".

Agregar un producto al inicializar la página

1. Seleccione la página "Product form": haga clic en "PAGE_Product_form" en las pestañas de documentos abiertos.
2. Presione F2 para abrir los eventos WLanguage de la página.
3. En el evento "Declaraciones globales", asignaremos un valor predeterminado al parámetro pasado a la página. Cuando se modifica un registro, el parámetro pasado siempre corresponde al identificador del producto que se va a modificar. Pero cuando se agrega un registro, el elemento aún no tiene un identificador. Para esto, estableceremos "-1" como el valor predeterminado.
4. Reemplace la siguiente línea de código en el evento "Declaraciones globales":
   
   Declaraciones globales de PAGE_Product_form (servidor)

   PROCEDURE MyPage(NumProductToDisplay is 8-byte int)

   
   por el código:
   
   Declaraciones globales de PAGE_Product_form (servidor)

   PROCEDURE MyPage(NumProductToDisplay is 8-byte int=-1)

5. Ahora vamos a definir el valor "-1" (cuando se agrega un registro). Reemplace el siguiente código:
   
   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()

   
   por el código:
   
   Declaraciones globales de PAGE_Product_form (servidor)

   IF NumProductToDisplay = -1 THEN
   	Product.Reset()
   ELSE
   	Product.ReadSeekFirst(ProductID, NumProductToDisplay)
   	IF Product.Found() = False THEN
   		// Display the list of products
   		PAGE_List_of_products.Display()
   	END
   END
   Product.ToPage()

   
   Analicemos este código:
   • Si el valor del identificador es -1, significa que se agrega un producto. En este caso, se ejecuta la función Reset. Esta función inicializa las variables de los campos del archivo de datos "Product" con los valores predeterminados para agregar un nuevo registro.
   • Si el identificador del producto tiene un valor diferente de -1, se utiliza el código para abrir el formulario en modo de edición.
6. Cierre la ventana de código.

Agregar un producto cuando se valida la página

1. Seleccione el botón "OK" en "PAGE_Product_form".
2. Abra los eventos WLanguage asociados al control (F2).
3. El código del evento "Clic xxx (navegador)" no debe cambiar: las verificaciones a realizar son las mismas. Solo se debe modificar el código Servidor.
4. En el evento "Clic xxx (servidor)", reemplace el código existente por el siguiente código:
   
   Clic (servidor)

   Product.FromPage()
   //IF ImagePath <> "" THEN
   //	Product.Visual = fLoadBuffer(ImagePath) 
   //END
   Product.Save()
   PAGE_List_of_products.Display()

   
   Analicemos este código: la función <Archivo de datos>.Save comprueba si el registro ya se encuentra en el archivo de datos "Product", y permite agregarlo o modificarlo, si es necesario.
5. Guarde los cambios ( o Ctrl + S).
6. Cierre la ventana de código.

Agregar un producto en el menú de la página

1. Seleccione la página "List of products": haga clic en "PAGE_List_of_products" en las pestañas de documentos abiertos.
2. Haga clic derecho en una opción del menú para abrir el menú contextual y seleccione "Abrir modelo".
3. En el modelo de páginas, seleccione el menú.
4. Abra el menú contextual y seleccione la opción "Editar menú". Un contorno amarillo aparece alrededor del menú. Este contorno indica que el menú está en modo de edición: se puede modificar.
5. Seleccione la opción "Product form", haga clic derecho y seleccione "Descripción de la opción" en el menú contextual.
6. En la pestaña "General", en "Acción de la opción":
   • seleccione "Mostrar una página del sitio".
   • seleccione la página "PAGE_Product_form".
     
7. Valide.
8. En la barra del modelo, haga clic en para aplicar los cambios realizados en el modelo a todas las páginas que lo utilizan.
9. En nuestro caso, se proponen las dos páginas del proyecto. Valide la ventana de actualización del modelo.
10. Cierre el modelo de páginas.

1. Haga clic derecho en la opción "Product form" y seleccione "Sobrescribir control".
2. Abra de nuevo el menú contextual del menú y seleccione "Editar menú". El menú pasa al modo de edición: un contorno amarillo aparece alrededor del menú.
3. Haga clic derecho en la opción "Product form" y seleccione "Sobrescribir control".
4. Haga clic derecho de nuevo en la opción "Product form" y seleccione "Establecer esta opción de menú como seleccionada".
5. Presione Esc para salir del modo de edición.
6. Guarde la página (Ctrl + S).

Gestión de la imagen del producto

Subir archivos consiste en copiar un archivo del equipo cliente en el servidor.

La descarga, por su parte, consiste en copiar un archivo del servidor en el equipo cliente.

WEBDEV incluye un control Smart "Upload".

1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Botón". La lista de los tipos de botones disponibles aparece.
2. Seleccione "Subir archivos (Upload)".
3. Haga clic en la ubicación en la que deseada crear el control (debajo del control Imagen, por ejemplo).
   

El control Upload incluye:

• una celda que contiene:
  • un control Estático,
  • un control Looper para mostrar las características de los archivos que se van a subir.
• un botón "Add" que permite al usuario seleccionar los archivos que desea subir,
• un botón "Send" que permite al usuario enviar archivos al servidor.

1. Abra el código del botón "ADD": seleccione el control y presione F2.
2. Diferentes eventos WLanguage están asociados al control Upload. Vamos a modificar el evento "Recepción de archivos subidos" para copiar la imagen en el directorio de datos del sitio.
3. Escriba el siguiente código en el evento "Recepción de archivos subidos" (ignore los errores de compilación, los corregiremos más tarde):
   
   Recepción de archivos subidos de UPL_Upload

   UploadCopyFile(MySelf, fDataDir(), UploadFileName(MySelf, False))
   ImagePath = fDataDir() + [fSep()] + UploadFileName(MySelf, False)
   IMG_Visual = ImagePath

4. Analicemos este código:
   • La función UploadCopyFile guarda el archivo cargado por el usuario en el servidor. En nuestro caso, el archivo se copia en el directorio de datos (devuelto por la función fDataDir). El nombre del archivo se conserva.
   • La ruta de la imagen cargada se almacena en la variable global ImagePath.
     
     

     ¿Por qué utilizar una variable global?

     Aquí se requiere una variable global porque la ruta de la imagen se utilizará en el código del botón "OK" para guardar la nueva imagen en el archivo de datos.

     Para obtener más información sobre el uso de variables locales y globales, consulte el Tutorial de WLanguage.
   • La función fSep obtiene el separador a utilizar en el sistema operativo del servidor ("\" para Windows y "/" para Linux). Así, el sitio es totalmente independiente del servidor en el que está instalado.
   • A continuación, la imagen cargada se muestra en el control Imagen IMG_Visual.
5. En el editor de código, la variable ImagePath se muestra en rojo y aparece un error de compilación junto a las líneas de código: "El elemento 'ImagePath' es desconocido o inaccesible". Aún no hemos declarado la variable global. Estos errores también aparecen en el panel de errores de compilación.
6. Para declarar la variable global:
   • Vaya al evento "Declaraciones globales" de la página (por ejemplo, en el editor de código, vaya a la pestaña "Código" y seleccione "Declaraciones globales" en el cuadro cuadro combinado que contiene la lista de todos los eventos).
     
   • Escriba el siguiente código después de la declaración del procedimiento:
     
     Declaraciones globales de PAGE_Product_form (servidor)

     ImagePath is string

7. Guarde los cambios haciendo clic en en los botones de acceso rápido. Los errores de compilación desaparecen.
8. Cierre el editor de código.

1. Abra el código del botón "OK":
   • Seleccione el botón "OK".
   • Presione F2.
2. En el evento "Clic xxx (servidor)" del control Botón, introduzca el siguiente código DESPUÉS de la llamada a la función <Archivo de datos>.FromPage:
   
   Clic en BTN_OK (servidor)

   IF ImagePath<>"" THEN
   	Product.Visual = fLoadBuffer(ImagePath) 
   END

3. Analicemos este código WLanguage:
   • Este código comprueba el contenido de la variable global ImagePath. Si la variable no corresponde a una cadena vacía, significa que el usuario cargó la imagen correctamente. En este caso, el campo "Visual" del archivo de datos Product se actualiza con el contenido binario de la imagen. Este contenido se obtiene con la función fLoadBuffer.
   • La función <Archivo de datos>.Modify (que ya se utiliza en el código) guarda los cambios en el archivo de datos.
4. Guarde los cambios ( o Ctrl + S).
5. Cierre la ventana de código.

Probar la adición de un nuevo producto

1. Pruebe el proyecto (haga clic en en los botones de acceso rápido). La página que contiene la lista de productos aparece.
2. Haga clic en "Product form".
3. Introduzca un nuevo producto con las siguientes características:
   • Reference: M49629
   • Caption: Xxx bag
   • Description: Leather bag
   • Price: 150
4. Valide. El nuevo producto aparece en la lista de productos.

1. En la lista de productos, haga clic en el enlace "Modify" del nuevo producto. La ficha del producto se abre.
2. Haga clic en el botón "Add" (debajo de "Drop files here") y seleccione un archivo de imagen en su equipo.
3. Haga clic en el botón "Send".
4. Haga clic en "OK" para confirmar los cambios.
5. La nueva foto se muestra para el producto que acabamos de editar.