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 2 - Mostrar una lista de productos
  • Presentación
  • Primera página para mostrar la lista de productos
  • Crear una página a partir de un modelo
  • Crear controles en la página
  • Crear un control Looper
  • Editar un control Looper
  • Editar los controles del Looper
  • Prueba de la página
  • Agregar datos al control Looper
  • Crear el control "ARRIVAL"
  • Configuración del control Looper
  • Prueba de la página
  • Gestión del menú
  • Prueba de la página
  • En resumen

Tutorial - Crear un sitio web con procesos de back office

Lección 2 - Mostrar una lista de productos
Abordaremos los siguientes temas:
  • Crear una página en modo Sesión a partir de un modelo.
  • Crear controles en la página: Looper, etc.
  • Optimización de la página.
  • Prueba de la página.
Durée de la leçon 50 min
Presentación
Crearemos las diferentes páginas del sitio WEBDEV en modo Sesión para mostrar, editar y agregar productos. Esto le permitirá entender:
  • cómo utilizar WEBDEV para crear páginas en modo Sesión,
  • cómo acceder a la base de datos.
También podrá utilizar algunas funcionalidades prácticas de WEBDEV.

En esta lección, veremos cómo mostrar la lista de productos de un archivo de datos. En las próximas lecciones, veremos cómo crear y editar 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.
Primera página para mostrar la lista de productos
En primer lugar, vamos a crear una página para mostrar la lista de productos disponibles. Mostraremos la imagen, la descripción y el precio de cada producto en una presentación en forma de tabla. Para ello, utilizaremos un control Looper. También crearemos un menú para abrir esta página.

Crear una página a partir de un modelo

En primer lugar, vamos a crear una página en blanco para mostrar los productos. Esta página se basará en un modelo de páginas.
Un modelo de páginas permite agrupar una parte de la interfaz y diferentes procesos en un solo elemento.
Se recomienda utilizar modelos de páginas para obtener una interfaz coherente y fácil de reutilizar.
WEBDEV ofrece una serie de modelos de páginas predefinidos.

Para crear una página utilizando un modelo de páginas, siga los pasos a continuación:
  1. Haga clic en Crear un elemento en los botones de acceso rápido (o presione Ctrl + N). La ventana de creación de nuevos elementos se abre.
  2. Haga clic en "Página", y luego en "Página". El asistente de creación de páginas se abre.
    Asistente de creación de páginas
  3. Seleccione el modelo "PAGETPL_Menu".
  4. Finalice el asistente ("OK"). La página se crea y una ventana para guardarla se abre.
  5. Introduzca "List of products" en el título de la página. El nombre de la página "PAGE_List_of_products" se completa automáticamente.
    Guardar página
  6. Valide.
Veamos más de cerca los elementos que se crearon. Podemos ver:
  • una página en el área principal del editor de páginas.
  • algunos controles con cuadrados amarillos en la esquina superior izquierda.
Página en el editor
Los controles de la página y los cuadrados amarillos en la parte superior izquierda de los controles indican que la página está basada en un modelo.
Crear controles en la página

Crear un control Looper

Vamos a insertar un control Looper para crear la lista de productos. Este control estará vinculado al archivo de datos "Product".
¿Qué es un control Looper?
Un control Looper muestra una lista de elementos en una página web. Un control Looper incluye una serie de filas que pueden contener varios controles y repetirse un número determinado de veces.
Cada fila puede contener datos diferentes.

Un asistente nos ayudará a crear el control Looper:
  1. En la pestaña "Creación", en el grupo "Datos", despliegue "Looper" y seleccione "Looper".
  2. Haga clic en la esquina superior izquierda de la página, justo debajo del menú: el asistente de creación del control Looper se abre. El asistente le pide que elija cómo rellenar el control Looper. Hay varias opciones:
    • de un archivo de datos o consulta,
    • de una variable WLanguage,
    • mediante programación (veremos esta opción en otro tutorial).
    En este ejemplo, el control Looper mostrará todos los productos. Seleccione "Mostrar datos provenientes de un archivo o consulta".
    Nuevo control Looper - Modo de relleno
    Pase a la etapa siguiente.
  3. La etapa siguiente del asistente muestra los diferentes archivos de datos y consultas del proyecto actual. En "Análisis", seleccione el archivo de datos "Product".
    Nuevo control Looper - Archivo de datos asociado
    Pase a la etapa siguiente.
  4. A continuación, el asistente muestra la lista de campos en el archivo de datos. De forma predeterminada, todos los campos están seleccionados para que se muestren en el control Looper. En nuestro caso:
    • conservaremos todos los campos, excepto "Description" y "Arrival". Desmarque estos dos campos.
    • cambiaremos el orden de los campos antes de crear el control Looper. De este modo, los controles se posicionarán correctamente una vez creado el control Looper. Utilice los botones de flecha para reorganizar los campos de la siguiente manera: Visual, Reference, Caption, PriceBT, ProductID.
      Nuevo control Looper - Campos a mostrar
      Pase a la etapa siguiente.
  5. A continuación, el asistente le pide que seleccione la clave de búsqueda, que define el orden predeterminado de los datos en el control Looper. Los campos que se muestran en el asistente son los que se definieron como clave en el análisis.
    Ya vimos el concepto de claves en el análisis del tutorial Crear un proyecto y un análisis.

    Vamos a definir el orden de los campos según el título.
    Nuevo control Looper - Clave de búsqueda
    Seleccione "Caption" y pase a la etapa siguiente.
  6. Vamos a definir algunos ajustes adicionales para el control Looper:
    • El control Looper estará en modo Servidor: todos los datos se mostrarán cuando se cargue la página.
      En "Modo de funcionamiento", seleccione "Servidor".
    • El control Looper tendrá un número ilimitado de filas. Se debe poder acceder a todos los productos directamente en la página. La página se ampliará para mostrar todos los productos.
      En la opción "Número máximo de filas por página", seleccione "Sin límite".
      Nuevo control Looper - Modo de funcionamiento
  7. Pase a la etapa siguiente. El control Looper mostrará los productos en 4 columnas.
    • Conserve la opción predeterminada: "Número de columnas fijo, Rellenar por filas".
    • En el campo "Número de columnas", cambie 1 por 4.
      Nuevo control Looper - Modo de funcionamiento
  8. Finalice el asistente. El control Looper se crea automáticamente en la página.
Veamos con detenimiento el control Looper que acabamos de crear: los datos ya se muestran en el control, incluso en el editor.
Nuevo control Looper - Modo de funcionamiento
Este concepto es conocido como "Live data": el contenido de los archivos de datos ubicados en el equipo de desarrollo se utiliza en las páginas o reportes manipulados en el editor. Esta funcionalidad es útil para definir el tamaño de los controles en una página, por ejemplo.

Editar un control Looper

Vamos a reposicionar el control Looper en la página:
  1. Seleccione el control Looper.
    Para seleccionar un control, solo tiene que hacer clic en él y los controladores de selección aparecerán automáticamente.
    Los controles Looper requieren más atención, dado que pueden contener otros controles. Una forma sencilla de seleccionar un control Looper es hacer clic en su área gris.
  2. Si es necesario, desplace el control al área superior izquierda de la página. Cuando el control alcanza el borde del área de visualización del modelo de páginas, se muestran líneas verdes: estas líneas le ayudan a posicionar el control dentro del área de visualización.
Las 4 celdas del control Looper no caben en la página. Por lo tanto, tenemos que reducir el tamaño de las celdas.
  1. Seleccione el control Looper si es necesario.
  2. Seleccione el controlador del medio.
  3. Mantenga pulsado el botón izquierdo del ratón y reduzca el tamaño de la celda. Dado que los controles de cada celda están "anclados" de forma predeterminada, se reducirán a medida que reduzca el control Looper. El control Imagen es el único que mantiene su tamaño.
    Los anclajes son una técnica que permiten definir el comportamiento de los controles cuando cambia el tamaño del navegador. Para obtener más información, consulte Anclajes, zoning y layouts.
Líneas de puntos rojos aparecen alrededor del control Imagen para indicar que no cabe en la celda.
Reduzca el control Imagen para que no desborde la celda. Las líneas de puntos rojos desaparecen.

Editar los controles del Looper

Tras redimensionar el control Looper, el área de visualización de los controles se redujo considerablemente. Para mejorar la legibilidad, reduciremos la altura de los controles, eliminaremos los títulos y redimensionaremos el área de visualización.
Realizaremos estas operaciones en el control "Reference", y luego las aplicaremos automáticamente a los demás controles.
Para eliminar el título del control:
  1. Seleccione el control Reference.
  2. Abra la ventana de descripción (Alt + Entrar).
  3. Elimine el título y valide.
  4. Seleccione los otros controles de 1 en 1 y presione F4 cada vez: los mismos cambios se aplican a cada control.
Ahora, redimensionemos el control para ocultar el área vacía:
  1. Seleccione de nuevo el control Reference.
  2. Seleccione el controlador interior y arrástralo para ocultar el área donde estaba el texto.
  3. Seleccione los otros controles de 1 en 1 y presione F4 cada vez: los mismos cambios se aplican a cada control.
Ahora solo nos queda ajustar la altura del control:
  1. Seleccione el control Reference.
  2. En la barra de estado, cambie la altura del control de 71 a 23.
  3. Seleccione los otros controles de 1 en 1 y presione F4 cada vez: los mismos cambios se aplican a cada control.
Vamos a ocultar el control que contiene el identificador del producto. ¿Por qué ocultarlo en lugar de eliminarlo? Porque este identificador nos va a servir en el resto de nuestro proyecto de desarrollo.
  1. Seleccione el control STC_ProductID". Este control corresponde al identificador (control con un número en la parte inferior del Looper).
  2. Abra la ventana de descripción del control (seleccione "Descripción" en el menú contextual).
  3. En la pestaña "UI", deseleccione la opción "Visible".
  4. Valide la ventana de descripción del control.
A continuación, reorganizaremos los controles del control Looper. Para ver la superficie ocupada por cada control, presione F7.
  1. Seleccione cada control y desplácelo hacia arriba en la celda.
  2. Reduzca el espacio entre los controles.
  3. Ubique el control que contiene el identificador a la derecha del control "Price BT".
  4. Seleccione la celda y redúzcala verticalmente utilizando los controladores de selección.
  5. Seleccione el área de pie de página y muévala hacia arriba para reducir el espacio entre el final de la celda y el pie de página.
Obtendrá la siguiente interfaz:

Prueba de la página

Pruebe la página para ver el resultado de todos estos cambios en el navegador:
  1. Haga clic en Probar página en los botones de acceso rápido.
  2. La página aparece en el navegador.
  3. Cierre el navegador.
En la página de prueba, aparece un "margen" entre los distintos productos. Sin embargo, este margen no se muestra en el editor. Esto se debe a los anclajes, y más concretamente a los anclajes del control Imagen. Al inicio de esta lección, vimos que el control Imagen no tenía anclajes. Lo redimensionamos para que ocupara el espacio dentro de la celda. Ahora, para eliminar los "márgenes" y permitir que la imagen se redimensione con el navegador, definiremos anclajes específicos para el control Imagen:
  1. Seleccione el control Imagen.
  2. En el menú contextual, seleccione la opción "Anclaje".
  3. En la ventana que aparece, especifique las nuevas opciones de anclaje del control:
    • Anclaje horizontal: Ampliar o reducir como el navegador (o su contenedor)
    • Anclaje vertical: Adaptar al contenido y reajustar controles.
  4. Valide.
Pruebe la página de nuevo.
Agregar datos al control Looper
Esta página enumera los diferentes productos disponibles en nuestro sitio web. Cuando creamos el control Looper, no incluimos el campo "Arrival". Vamos a agregar esta información creando un control Área de texto enriquecido, que solo se mostrará si el producto es una novedad.

Crear el control "ARRIVAL"

En primer lugar, crearemos un control Área de texto enriquecido.
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Texto" y seleccione "Área de texto enriquecido".
  2. Haga clic en el control Looper, debajo del precio. El control se crea y se selecciona.
  3. Pulse la barra espaciadora: el texto pasa a modo de edición.
  4. Introduzca "ARRIVAL" y valide.
No olvide alinear el control "Arrival" con los demás controles de la celda. Obtendrá lo siguiente:

Configuración del control Looper

El texto ARRIVAL solo se mostrará para los nuevos productos. Para ello, cambiaremos la configuración del control Looper mediante la ventana de descripción.
Primero, abra la ventana de descripción del control:
  1. Seleccione el control Looper.
    Consejo: Para asegurarse de seleccionar el control Looper, haga clic en el control manteniendo pulsada la tecla Mayús: una ventana aparece para permitirle seleccionar el control deseado.
  2. Presione Alt + Entrar para abrir la ventana de descripción.
En la ventana de descripción aparecen varios controles:
  • en la parte superior, aparecen los diferentes atributos. Estos atributos indican qué parámetros cambiarán en cada celda.
  • en la parte inferior, las características de cada atributo se muestran en diferentes pestañas.
Vamos a agregar un atributo para el control Arrival que acabamos de crear:
  1. Haga clic en el botón "Nuevo". Un nuevo atributo se crea automáticamente.
  2. Cambie las características del atributo de la siguiente manera:
    • Defina "ATT_Arrival" como nombre del atributo.
    • Vincule el atributo al control Arrival que acabamos de crear. Seleccione "RTA_ARRIVAL".
    • La propiedad definida puede cambiar en cada celda. En nuestro caso, vamos a cambiar la visibilidad del control. Si el producto es una novedad, se debe mostrar el control "ARRIVAL". Seleccione "Visible".
  3. En la pestaña "Enlace", seleccionaremos un campo para enlazarlo al atributo. En nuestro caso, seleccionaremos el campo Arrival del archivo de datos Product.
    • Despliegue "Análisis", y luego "Product".
    • Seleccione el campo "Arrival".

      El campo Arrival es un booleano. Si el valor del campo es 1, el producto es una novedad.
  4. Valide.

Prueba de la página

Pruebe la página para ver el resultado de todos estos cambios en el navegador:
  1. Haga clic en Probar página en los botones de acceso rápido.
  2. La página aparece en el navegador.
  3. Cierre el navegador.
Gestión del menú
Vamos a modificar el menú de la página para incluir una opción que permita mostrar la lista de productos. El menú se encuentra en el modelo de páginas. Por lo tanto, vamos a modificar el modelo de páginas.
Para abrir el modelo de páginas:
  1. Haga clic derecho en la opción "List of products" de la página PAGE_List_of_products y seleccione "Abrir modelo".
    Vista del modelo de páginas
  2. El modelo de páginas aparece en el editor. Seleccione el menú del modelo de páginas.
  3. Haga clic derecho para abrir el menú contextual y seleccione "Editar menú". Un contorno amarillo aparece alrededor del menú. Este contorno indica que el menú está en modo de edición: se puede modificar.
    Menú del modelo en modo de edición
  4. Haga clic derecho en la opción "List of products" y seleccione "Descripción de la opción" en el menú contextual.
  5. En la pestaña "General", en "Acción de la opción":
    • Seleccione "Mostrar una página del sitio".
    • Seleccione la página "PAGE_List_of_products".
  6. Valide la ventana de descripción de la opción.
  7. Presione Esc para salir del modo de edición.
    Hemos modificado el menú del modelo. También puede modificar otros elementos, como el logotipo o el título "Company".
Ahora, solo tenemos que actualizar todas las páginas que utilizan el modelo modificado.
Para actualizar las páginas que utilizan el modelo:
  1. En la barra del modelo, haga clic en Aplicar los cambios del modelo de páginas: este botón aplica los cambios realizados en el modelo a todas las páginas que lo utilizan.
    Si no aplica los cambios a las páginas, se le pedirá que sincronice los modelos antes de probar o implementar una página.
  2. En nuestro caso, solo se propone una página.
    Páginas para las que hay que actualizar el modelo
  3. Haga clic en "OK" para validar la ventana de actualización del modelo.
  4. Cierre el modelo de páginas.
Ahora, definiremos que se seleccione la opción "List of products" cuando se muestre la página correspondiente. Para ello, vamos a sobrescribir el menú de la página "PAGE_List_of_products" y la opción "List of products".
Realice las siguientes acciones:
  1. Abra el menú contextual del menú (haga clic derecho en "List of products", por ejemplo) 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. Abra el menú contextual de "List of products" y seleccione "Sobrescribir control".
  4. Abra de nuevo el menú contextual de "List of products" 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).
La página está lista para ser probada.

Prueba de la página

Vamos a probar la página que acabamos de crear.
  1. Haga clic en Probar página en los botones de acceso rápido.
  2. La página se muestra automáticamente en el navegador.
    Página web con la lista de productos
  3. Puede desplazarse por los productos con la barra de desplazamiento de la página.
Cierre el navegador. El editor de WEBDEV aparece de nuevo.
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 manipulamos el modelo de páginas y sobrescribimos el menú.
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". La página "PAGE_List_of_products" se encuentra en la carpeta "Administration pages".
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: 13/12/2023

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