AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Tutorial WEBDEV / Tutorial - Crear un sitio web con datos
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Crear una página en modo AWP para mostrar los nuevos productos
  • Crear la página
  • Crear la lista de nuevos productos
  • Ver los detalles de un nuevo producto
  • Crear la página
  • ¿Cuál es la función de esta página?
  • Crear controles
  • Mostrar datos en la página
  • Abrir la ficha de producto desde la lista de productos
  • Gestión de estilos
  • Importar una hoja de estilo CSS
  • Aplicar estilos CSS
  • Vincular los sitios de Internet e Intranet
  • Crear una página para las condiciones generales de venta
  • Crear la página
  • Crear el control
  • Conclusión
Lección 4.2. Crear páginas en modo AWP
Esta lección abarcará los siguientes temas
  • Crear una página en modo AWP para mostrar los nuevos productos.
  • Crear una ficha de producto en modo AWP.
  • Importar estilos CSS.
  • Enlace entre la sección de Internet e Intranet del sitio.
  • Crear una página para las condiciones generales de venta.
Duración de la lección

Tiempo estimado: 50 min
Lección anteriorTabla de contenidoSiguiente lección
Presentación
Vamos a crear diferentes páginas en modo AWP para mostrar, agregar y modificar productos. Estas operaciones le permitirán descubrir varios aspectos de los archivos de datos y utilizar algunas funcionalidades del modo AWP­.
Vamos a realizar estas operaciones en el proyecto "Full_WEBDEV_Site". Ya trabajamos en este proyecto en la parte anterior.

  • Para abrir el proyecto:
    1. Inicie WEBDEV si es necesario.
    2. Vaya a la página de inicio de WEBDEV (Ctrl +<).
    3. En la página de inicio, haga clic en "Tutorial", luego en "Parts 3 to 6", haga doble clic en "Full WEBDEV Site - Exercise".
    4. WEBDEV abre un cuadro de diálogo para informarle que el proyecto ya ha sido abierto y le pide que abra la versión local o sobrescriba el proyecto con la versión original. Para obtener sus cambios, haga clic en "Abrir la copia local".

Corregido

Hay un proyecto completado disponible. Este proyecto contiene las diferentes páginas creadas en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Parts 3 to 6", haga doble clic en "Full WEBDEV Site - Answers".
Crear una página en modo AWP para mostrar los nuevos productos
Vamos a crear una página para mostrar los nuevos productos en el proyecto "Full_WEBDEV_Site". Será una página de "exposición" y se podrá acceder a ella a través de Internet. Esta página aparecerá en los motores de búsqueda, por lo que debe utilizar el modo de generación AWP.

Crear la página

  • Para crear la página que mostrará los nuevos productos:
    1. Cree una nueva página:
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • La ventana de creación de nuevos elementos se abre: haga clic en "Página", y luego en "Página".
      • En el asistente de creación de páginas, haga clic en la página predefinida "Simple".
        Nueva página
      • Asegúrese de que la opción "Crear: una página y el modelo" está seleccionada.
      • Valide el asistente.
    2. La nueva página aparece en el editor. La ventana para guardar el elemento se abre.
    3. Introduzca el título de la página: "List of new products". El nombre de la página "PAGE_List_of_new_products" se completa automáticamente.
    4. Valide.
  • La página se crea con controles en un diseño predefinido. Elimine estos controles:
    1. Seleccione los controles de la página (presione Ctrl + A).
    2. Elimine los controles (tecla Supr).
  • Esta página aparecerá en los motores de búsqueda. Para ello, debe generarse en modo AWP:
    1. Abra la ventana de descripción de la página: abra el menú contextual y seleccione "Descripción".
    2. Vaya a la pestaña "General", "Tipo de página", "Modo", y seleccione "AWP".
      Modo AWP
    3. Valide.
    4. Guarde los cambios haciendo clic en Guardar un elemento en los botones de acceso rápido.

Crear la lista de nuevos productos

Vamos a mostrar la lista de nuevos productos. Para ello, usaremos un control Looper. En la parte anterior, ya explicamos cómo crear este tipo de control a través del asistente, sin tener que programar. Para esta página, veremos cómo rellenar el control Looper mediante programación.
Crear un control Looper
  • Para crear el control Looper:
    1. En la pestaña "Creación", en el grupo "Datos", despliegue "Looper" y seleccione "Looper". El control seguirá el cursor del ratón.
    2. Haga clic en la esquina superior izquierda de la página: el asistente de creación del control Looper se abre.
    3. En el asistente, seleccione "Rellenar el control Looper mediante programación".
      Asistente de creación del control Looper
      Pase a la etapa siguiente.
    4. En la siguiente etapa, definiremos ajustes adicionales para el nuevo 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".
        Asistente de creación del control Looper
    5. Pase a la etapa siguiente. Vamos a configurar los parámetros de visualización.
      • Conserve la dirección de visualización predeterminada: número de columnas fijo, rellenar por filas.
      • El control Looper mostrará los nuevos productos en 5 columnas.
        En el campo "Número de columnas", reemplace 1 por 5.
    6. Pase a la etapa siguiente.
    7. En la última etapa, especifique el nombre del control (LOOP_NewProducts, por ejemplo).
    8. Valide el asistente. El control Looper se crea automáticamente en la página.
El nuevo control Looper está vacío. WEBDEV representa la celda principal (la que se editará) con una línea continua y las demás con una línea de puntos.

  • Utilice los controladores de tamaño para reducir el ancho de la celda principal y hacer que las 5 celdas se ajusten a la página horizontalmente.
    Control Looper en modo de edición en la página
Vamos a crear los diferentes controles que se mostrarán en el control Looper.
Cada fila contendrá:
  • Un control Imagen que mostrará la imagen del producto.
  • Un control Enlace que mostrará el nombre del producto y abrirá la ficha de detalles.
  • Un control Estático que contendrá el identificador del producto.
Vamos a crear estos controles y a rellenar el control Looper mediante programación.
Crear controles dentro del control Looper
  • Para crear el control Imagen:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Imagen". La forma del control aparece bajo el cursor.
    2. Pase el cursor por encima de la primera fila: un borde verde le permite ver el área disponible.
    3. Haga clic en la esquina superior izquierda de la primera fila del control Looper. El control Imagen se crea. Agrande el control utilizando los controladores de tamaño. Obtendrá la siguiente página:
      Crear un control Imagen en el control Looper
    4. Haga doble clic en el control Imagen para abrir la ventana de descripción y cambiar las características del control.
    5. Cambie:
      • el nombre del control: IMG_Visual.
      • el modo de visualización de la imagen: seleccione "Homotético" y seleccione las opciones "Sin ampliar la imagen" y "Centrar imagen en el control".
      • el modo de transformación de la imagen. En nuestro caso, la imagen del producto se almacena como un campo Memo en el archivo de datos Product. Especifique que la transformación se calcula en el servidor para optimizar el ancho de banda y seleccione la opción "Alta calidad".
    6. Valide.
  • Para crear el control Enlace:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Enlace".
    2. Haga clic dentro del control Looper, debajo del control Imagen para crear el control Enlace.
      Crear un control Enlace en el control Looper
    3. Haga doble clic en el control Enlace para abrir la ventana de descripción y cambiar las características del control.
    4. Defina "LINK_View_Product" como nombre del control.
    5. Valide la ventana de descripción del control.
    6. Utilice los controladores de tamaño para ampliar el control Enlace horizontalmente y que se ajuste a la fila.
  • Para crear el control Estático que contiene el identificador del producto:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Texto" y seleccione "Estático simple".
    2. Haga clic en el control Looper, a la derecha del control Imagen para crear el control Estático.
      Crear un control Estático en el control Looper
    3. Haga doble clic en el control Estático para abrir la ventana de descripción y cambiar las características del control.
    4. Defina "STC_Product" como nombre del producto.
    5. Valide la ventana de descripción del control.
Vamos a agregar atributos para rellenar los controles que se encuentran dentro del control Looper y cambiar sus características en cada fila.

Nota

Un control Looper incluye:
  • controles que se repiten en cada fila.
  • atributos. Un atributo define la característica del control que cambiará en cada fila. Por ejemplo, si el valor y el color del control PRICE deben cambiar en cada fila, se deben definir dos atributos diferentes para el mismo control.

  • Para crear los atributos:
    1. Haga doble clic en el control Looper para abrir la ventana de descripción.
    2. En la parte superior de la ventana, aún no hay atributos. Vamos a definiremos 3 atributos (uno para cada control del control Looper).
    3. Cree un nuevo atributo haciendo clic en el botón "Nuevo":
      • Cambie el nombre del atributo por "ATT_Image".
      • Seleccione el control "IMG_Visual".
      • Seleccione la propiedad "Valor". El valor de la imagen cambiará en cada celda.
        Descripción del atributo ATT_Image
    4. Cree un nuevo atributo haciendo clic en el botón "Nuevo":
      • Cambie el nombre del atributo por "ATT_Link".
      • Seleccione el control "LINK_View_Product".
      • Seleccione la propiedad "Título". El título del control cambiará en cada celda.
    5. Cree un nuevo atributo haciendo clic en el botón "Nuevo":
      • Cambie el nombre del atributo por "ATT_ID".
      • Seleccione el control "STC_Product".
      • Seleccione la propiedad "Título". El título del control cambiará en cada celda.
        Descripción del control Looper
    6. Valide la ventana de descripción del control Looper.
    7. Guarde los cambios (Guardar un elemento o Ctrl + S).
Hemos creado el control Looper. Ahora vamos a programar cómo se va a rellenar.
Rellenar el control Looper
El control Looper se rellena cuando se inicializa la página.

  • Para rellenar el control Looper:
    1. Abra los eventos WLanguage de la página:
      • Haga clic fuera de la página (por ejemplo, en el área de trabajo, a la izquierda o a la derecha de la página en el editor).
      • Haga clic derecho para abrir el menú contextual y seleccione "Código", o presione F2.
    2. Escriba el siguiente código en el evento de inicialización de la página:
      FOR EACH Product WITH Arrival = True
      LOOP_NewProducts.AddLine(Product.Visual,Product.Caption,Product.ProductID)
      END
    3. Analicemos este código WLanguage:
      • Este código recorre el archivo de datos Product con la instrucción FOR EACH.
      • Solo se seleccionan los registros para los que el campo "Arrival" está establecido como True.
      • La función <Looper>.AddLine agrega una nueva fila en el control Looper. Los diferentes atributos se actualizan con los datos del registro actual:
        • el valor del atributo "ATT_Image" corresponde a la imagen del campo "Visual" del archivo de datos "Product".
        • el título del atributo "ATT_Link" corresponde al valor del campo "Caption" del archivo de datos "Product".
        • el título del atributo "ATT_ID" corresponde al valor del campo "ProductID" del archivo de datos "Product".
    4. Guarde los cambios (Guardar un elemento o Ctrl + S).
    5. Cierre la ventana de código.
  • 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 en ejecución
  • Cierre el navegador. El editor de WEBDEV aparece de nuevo.
Ver los detalles de un nuevo producto
Ya definimos cómo se muestra la lista de nuevos productos. Ahora, vamos a crear una página de tipo "ficha" para ver los detalles del producto. Esta página se mostrará cuando el usuario haga clic en el enlace con el nombre del producto en el control Looper.

Crear la página

  • Para crear la página que muestra los detalles del producto:
    1. Cree una nueva página.
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • La ventana para crear un nuevo elemento aparece: haga clic en "Página", y luego en "Página".
      • El asistente de creación de páginas se abre automáticamente.
      • En la sección "Basado en un modelo del proyecto", seleccione "PAGETPL_Simple" y valide el asistente.
    2. La ventana para guardar la página se abre. Introduzca el título: "Product details". El nombre "PAGE_Product_details" se rellena automáticamente.
    3. Valide.
  • Al igual que la página que muestra la lista de nuevos productos, esta página debe generarse en modo AWP:
    1. Abra la ventana de descripción de la página (seleccione "Descripción" en el menú contextual).
    2. En la sección "Tipo de página", seleccione el modo "AWP".
      Cambio de tipo de página
    3. Valide.
    4. Guarde los cambios (Guardar un elemento o Ctrl + S).

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

Esta página mostrará las características del producto seleccionado en el control Looper.
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. Este parámetro se pasará en la URL.

  • 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. Escriba el siguiente código en el evento "Declaraciones globales":
      PROCEDURE 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. Este parámetro contiene el valor que se pasará en la URL.
    4. Cierre el editor de código. Vamos a crear los diferentes controles de la página.

Crear controles

Vamos a crear los controles que mostrarán la información sobre el producto seleccionado.
En la parte anterior, explicamos cómo crear los controles arrastrándolos y soltándolos desde el panel del análisis. En esta parte, crearemos los controles uno por uno y los enlazaremos a los campos correspondientes en el archivo de datos.
Crearemos los siguientes controles:
  • un control Imagen.
  • varios controles de texto Estático simple para el nombre, precio y referencia del producto.
  • un control Área de texto enriquecido para la descripción del producto.
  • Para crear el control Imagen:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Imagen".
    2. Haga clic en de la página (en la esquina superior izquierda, por ejemplo).
      Crear el control Imagen
    3. Haga doble clic en el control Imagen para abrir la ventana de descripción y cambiar las características del control.
      • Defina "IMG_Product_Image" como nombre del control.
      • Elija una visualización calculada en el servidor para optimizar el ancho de banda y seleccione la opción "Alta calidad". El modo de visualización de la imagen es "Homotético". Seleccione las opciones "Sin ampliar la imagen" y "Centrar imagen en el control".

        Nota

        Con las opciones "Homotético", "Centrar imagen en el control" y "Sin ampliar la imagen", el tamaño de la imagen se adaptará homotéticamente al área definida para la imagen. La relación de aspecto se mantiene y la imagen no se amplía.
    4. Valide la ventana de descripción del control.
  • Para crear un control Estático simple que muestre el nombre del producto:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Texto" y seleccione "Estático simple".
    2. Haga clic en la página (a la derecha de la imagen, por ejemplo).
      Crear el control Estático

      Nota

      Para simplificar la posición de los controles, presione F7. Esta tecla permite ver el área ocupada por los controles. Al volver a presionar la tecla, aparece un contorno alrededor de los controles (solo en modo de edición).
      Esto permite ver los bordes de los controles para posicionarlos fácilmente unos respecto a otros.
      Esta función es útil para los controles que no tienen bordes.
    3. Cambie el nombre del control Estático por: "STC_Title".
    4. Amplíe el control horizontalmente (usando los controladores de tamaño).
  • Vamos a mostrar la descripción del producto en un control Área de texto enriquecido. Para crear este control:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Texto" y seleccione "Área de texto enriquecido". También puede hacer clic directamente en el ícono "Texto".
    2. Haga clic en la página (a la derecha de la imagen, debajo del control STC_Title, por ejemplo).
      Crear el control Área de texto enriquecido
    3. Cambie el nombre del control por: "RTA_Description".
El precio del producto se mostrará en un control de visualización con formato. Este control muestra fechas, horas y valores monetarios con el formato de visualización correspondiente.
  • Para crear un control de visualización con formato:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Texto" y seleccione "Control de visualización con formato".
    2. Haga clic en la página, debajo de la descripción del producto: el control se crea automáticamente.
    3. Reduzca el ancho del control con los controladores de tamaño.
  • Vamos a cambiar las características del control:
    1. Abra la ventana de descripción del control: haga doble clic en el control, por ejemplo.
    2. En la pestaña "General":
      • Cambie el nombre del control por: "FSTC_Price".
      • Elimine el título.
      • Cambie el tipo del control: seleccione "Monetario".
        Descripción del control de visualización con formato
    3. Valide.
  • Cree un control Estático simple para mostrar la referencia del producto. Defina "STC_Reference" como nombre del control e introduzca "Reference" en el título. Ubique el control debajo del precio.
Hemos creado todos los controles necesarios. Ahora, vamos a enlazar cada control al campo correspondiente. Este enlace se puede definir en la pestaña "Enlace" de la ventana de descripción del control.

  • Para enlazar el control "IMG_Product_Image" al campo correspondiente:
    1. Seleccione el control "IMG_Product_Image".
    2. Haga clic derecho para abrir el menú contextual y seleccione la opción "Descripción".
    3. Vaya a la pestaña "Enlace" en la ventana de descripción. Esta pestaña indica que el control actual no tiene enlaces. Vamos a enlazarlo al campo Visual del archivo de datos Product.
    4. En la parte "Campo enlazado", despliegue "Análisis" y después "Product". La lista de campos del archivo de datos Product aparece.
    5. Seleccione el campo "Visual" del archivo de datos "Product".
      Enlace entre un control y un campo
    6. Valide la ventana de descripción.
  • Siga los mismos pasos para establecer los siguientes enlaces:
    • Control STC_Title al campo "Caption" del archivo de datos "Product".
    • Control RTA_Description al campo "Description" del archivo de datos "Product".
    • Control FSTC_Price al campo "PriceBT" del archivo de datos "Product".
    • Control STC_Reference al campo "Reference" del archivo de datos "Product".
  • Guarde la página (Ctrl + S).

Mostrar datos en la página

La página de la ficha de producto mostrará el producto seleccionado en el control Looper. En el código de la página, vamos a introducir el código que permite:
  • buscar el producto que se mostrará.
  • mostrar datos en la página.
  • Para mostrar los datos en la página:
    1. Haga clic fuera de la página (por ejemplo, en el área de trabajo, a la izquierda o a la derecha de la página en el editor).
    2. Presione F2. El editor de código muestra los diferentes eventos WLanguage de la página.
    3. En el evento "Declaraciones globales", escriba el siguiente código debajo del código escrito anteriormente:
      Product.ReadSeekFirst(ProductID, NumProductToDisplay)
      IF Product.Found() THEN
      Product.ToPage()
      END
    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 (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.).
      • La función <Archivo de datos>.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.

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. El principio es muy sencillo: el usuario seleccionará un producto en el control Looper y abrirá los detalles a través de un enlace. Este enlace ya está insertado en el control Looper.

  • Primero, modificaremos la página "PAGE_List_of_new_products" para que control Enlace abra la ventana de descripción del producto.
    1. Vaya a la página "List of new products": haga clic en "PAGE_List_of_products" en las pestañas de documentos abiertos.
    2. Abra la ventana de descripción del control Enlace: haga doble clic en el control.
    3. En la pestaña "General" de la ventana de descripción, en la sección "Acción del enlace":
      • Seleccione "Mostrar una página del sitio".
      • Seleccione la página "PAGE_Product_details".
        Descripción del control Enlace
      • Haga clic en el botón "Parámetros". Definiremos el parámetro que se pasará a la página para mostrar los detalles del producto seleccionado.
    4. En la ventana que aparece, verá el nombre del parámetro declarado en el evento "Declaraciones globales" de la página (NumProductToDisplay). Seleccione el control que contiene el valor del parámetro. En nuestro caso, el identificador del producto se encuentra en el atributo "ATT_ID".
    5. Despliegue el valor que corresponde al parámetro "NumProductToDisplay" y seleccione "ATT_ID":
      Selección del parámetro de la página
    6. Haga clic en "OK" y valide la ventana de descripción de los parámetros.

      Nota

      Atención: En un control Looper, el valor no está contenido en el control sino en sus atributos según la característica del valor.
    7. Valide la ventana de descripción del control Enlace.
    8. Guarde los cambios (Guardar un elemento o Ctrl + S).
  • Haremos una prueba para asegurarnos de que todo funciona correctamente.
    1. Si es necesario, abra la página "PAGE_List_of_new_products" en el editor de páginas (haga clic en ella en las pestañas de documentos abiertos).
    2. Haga clic en Probar página en los botones de acceso rápido.
    3. La página se muestra automáticamente en el navegador.
    4. Haga clic en el enlace para ver los detalles del producto.
      Detalles del producto (en tiempo de ejecución)
  • Cierre las páginas para detener la prueba.
Gestión de estilos
Para mejorar la página, vamos a cambiar el estilo de los controles. Cuando se trabaja con un diseñador gráfico o se definen instrucciones de estilo para un sitio web (guía de estilo de la empresa, por ejemplo), los estilos se definen en una hoja de estilo CSS. Vamos a importar una hoja de estilo a nuestro proyecto WEBDEV para cambiar los estilos.

Nota

WEBDEV incluye dos tipos de estilos:
  • los estilos WEBDEV.
  • los estilos CSS.
Un estilo WEBDEV es un conjunto de estilos CSS que definen un estilo global en objetos de alto nivel.
Por ejemplo, un estilo WEBDEV para un control Campo de entrada contendrá dos estilos CSS:
  • un estilo para el título.
  • un estilo para el texto del área de entrada.

Nota

Recordatorio: Al crear el sitio, puede elegir un tema . Los temas permiten armonizar el aspecto visual de un sitio y cambiar fácilmente los estilos.
Los temas también incluyen imágenes, fuentes, texturas, formas de botones y estilos para el proyecto.
Puede crear estilos profesionales utilizando los estilos incluidos de forma predeterminada. La importación de estilos CSS le permite agregar un nuevo estilo de Internet, por ejemplo.

Importar una hoja de estilo CSS

  • Para importar la hoja de estilo CSS al proyecto:
    1. En la cinta de opciones, en la pestaña "Proyecto", en el grupo "Proyecto", despliegue "Importar" y seleccione "Una hoja de estilo CSS".
      Observación: En una versión de WEBDEV integrada en WINDEV, esta opción es ligeramente diferente: en la pestaña "Proyecto", en el grupo "Proyecto", despliegue "Importar", seleccione "De WEBDEV", y luego seleccione "Una hoja de estilo CSS".
    2. El asistente de importación se abre y muestra dos opciones:
      Asistente de importación de estilos
      • Importar estilos CSS a WEBDEV: Esta opción importa los estilos CSS al proyecto WEBDEV. Los estilos se pueden modificar más adelante en WEBDEV.
      • Utilizar una hoja de estilo CSS externa: Esta opción permite utilizar una hoja de estilo existente. Esta opción debe elegirse cuando se define una hoja de estilo para una empresa y debe compartirse entre varios sitios (tema gráfico de la empresa).
    3. Seleccione "Importar estilos CSS a WEBDEV" y haga clic en "Siguiente".
    4. Seleccione el archivo "customstyles.css". Este archivo está disponible en el directorio "\Tutorial\WB\Exercises\Full_WEBDEV_Site". Los diferentes estilos de la hoja de estilo aparecen.
      Selección de estilos a importar
      • Una vista previa del sitio seleccionado se muestra a la derecha .

        Consejo

        Los cuadros de color a la derecha de la vista previa permiten cambiar el color de fondo. Esto le permite generar una vista previa utilizando cualquier color de fondo.
      • El prefijo "class-" indica que es una clase CSS. Esto significa que el estilo se aplicará a los elementos con el atributo "class" de HTML.
    5. Conserve todos los estilos y valide. Los estilos se importan y aparecen como disponibles en WEBDEV.

Aplicar estilos CSS

Vamos a aplicar los diferentes estilos a los controles de la página "PAGE_Product_details".
  1. Vaya a la página "PAGE_Product_details".
  2. Haga doble clic en el control "FSTC_Price" para abrir la ventana de descripción.
  3. En la pestaña "Estilo":
    • Seleccione el elemento "Área de visualización (CSS)".
    • Seleccione el estilo "class-styleprice" en la lista "Estilo CSS":
      Pestaña Estilo de un control de visualización con formato
  4. Valide. El estilo se aplica automáticamente al control.
  5. Si es necesario, amplíe el control utilizando los controladores de tamaño para que se ajuste al contenido.
  6. Guarde los cambios (Guardar un elemento o Ctrl + S).
  • Haremos una prueba para asegurarnos de que todo funciona correctamente.
    1. Si es necesario, abra la página "PAGE_List_of_new_products" en el editor de páginas (haga clic en ella en las pestañas de documentos abiertos).
    2. Haga clic en Probar página en los botones de acceso rápido.
    3. La página se muestra automáticamente en el navegador.
    4. Haga clic en el enlace para ver los detalles del producto. El precio aparece en rojo.
      Uso de un estilo importado en tiempo de ejecución
  • Cierre las páginas para detener la prueba.
Vincular los sitios de Internet e Intranet
Hasta ahora, hemos creado páginas de Intranet para gestionar los productos y páginas de Internet para que los usuarios puedan ver los nuevos productos.
Vamos a agregar un enlace de "Administración" en las páginas de Internet para acceder a las páginas de Intranet.
Para ello, modificaremos el modelo de las páginas de Internet.

¡Atención!

Las siguientes operaciones solo pueden realizarse si se ha seguido la parte 3 de este tutorial, relativa a la creación de páginas de Intranet.
  • Para crear un enlace de administración:
    1. Seleccione la página "PAGE_List_of_new_products".
    2. Abra el menú contextual de uno de los enlaces de la parte superior de la página y seleccione "Abrir modelo".
    3. Abra la descripción del control Notifications (haga doble clic en el control).
    4. Cambie el texto del control por: Management.

      Consejo

      Le recomendamos elegir nombres claros para los elementos (en este caso, defina el nombre "LINK_Management" para el control Enlace). Así, su código será más fácil de leer.
    5. En "Acción del enlace", para la opción "Tipo", seleccione "Ejecutar solo código de clic Navegador".
    6. Valide.
      Enlace
  • A continuación, escribiremos el código WLanguage del control Enlace:
    1. Abra los eventos del control Enlace (seleccione el control y presione F2).
    2. Introduzca el siguiente código en el evento "Clic xxx (navegador)":
      DynamicSiteDisplay("Full_WEBDEV_Site")
    3. En este código, la función DynamicSiteDisplay muestra la primera página dinámica del proyecto (en nuestro caso, será "PAGE_List_of_products").
    4. Cierre el editor de código.
    5. En la barra del modelo, haga clic en Aplicar los cambios del modelo de páginas para aplicar los cambios realizados en el modelo a todas las páginas que lo utilizan.
    6. En nuestro caso, se proponen las dos páginas AWP del proyecto. Valide la ventana de actualización del modelo.
    7. Cierre el modelo de páginas.
  • Vamos a modificar la página "PAGE_List_of_products" para que se pueda abrir con la función DynamicSiteDisplay:
    1. Abra la página "PAGE_List_of_products" en el editor.
    2. Abra la ventana de descripción (seleccione "Descripción" en el menú contextual).
    3. En la pestaña "General", seleccione la opción "Accesible mediante la función DynamicSiteDisplay".
      Descripción de la página
    4. Valide.
  • Vamos a ejecutar la prueba del proyecto a través de las páginas AWP.
    1. Si es necesario, abra la página "PAGE_List_of_new_products" en el editor de páginas (haga clic en ella en las pestañas de documentos abiertos).
    2. Haga clic en Probar página en los botones de acceso rápido.
    3. La página se muestra automáticamente en el navegador.
      Página con la lista de nuevos productos en tiempo de ejecución
    4. Haga clic en el enlace "Management". La página de gestión de productos aparece.
      Modo Administrador en tiempo de ejecución
  • Cierre las páginas para detener la prueba.
Crear una página para las condiciones generales de venta
Vamos a crear un tipo de página que se utiliza generalmente en sitios de comercio electrónico: una página de condiciones generales de venta. Para ello, utilizaremos el control Área de texto enriquecido, que permite dar formato al texto rápidamente.

Crear la página

  • Para crear la página que contendrá las condiciones generales de venta:
    1. Cree una nueva página.
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • La ventana de creación de nuevos elementos se abre: haga clic en "Página", y luego en "Página".
      • El asistente de creación de páginas se abre automáticamente.
      • En la sección "Basado en un modelo del proyecto", seleccione "PAGETPL_Simple" y valide el asistente.
    2. La ventana para guardar la página se abre. Introduzca el título: "General sales conditions". El nombre "PAGE_General_sales_conditions" se rellena automáticamente.
    3. Valide.

Crear el control

  • Para crear un control Área de texto enriquecido:
    1. En la cinta de opciones, en la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Texto" y seleccione "Área de texto enriquecido".
    2. Haga clic en de la página (en la esquina superior izquierda, por ejemplo). El control se crea automáticamente.
  • Este tipo de control adapta automáticamente la altura a su contenido. Vamos a definir un ancho específico:
    1. Seleccione el control que acaba de crear.
    2. Expanda el control horizontalmente con los controladores de tamaño hasta que se ajuste al ancho de la página.
  • Ahora, vamos a mostrar las condiciones generales de venta en este control. El archivo que contiene el texto ya está listo.
    1. Copie el texto del archivo GSC.txt. Este archivo está disponible en "\Tutorial\WB\Exercises\Full_WEBDEV_Site" en el directorio de instalación de WEBDEV.
    2. Seleccione el control Área de texto enriquecido en la página.
    3. Pulse la barra espaciadora: el control se vuelve editable. Un borde amarillo aparece alrededor del control.
    4. Reemplace el texto existente con el texto del portapapeles (Ctrl + V). El texto aparece.
    5. Realice los siguientes cambios en el texto:
      • Agregue espacios antes y después de los títulos (tecla Entrar).
      • Ponga los títulos enumerados en negrita.
        En el editor de páginas
    6. Utilice las diferentes opciones: todas las opciones disponibles para el texto están en la cinta de opciones.
    7. Haga clic en Probar página en los botones de acceso rápido.
    8. La página se muestra automáticamente en el navegador.
      En ejecución
Conclusión
Las dos últimas partes nos han permitido ver las características específicas de un sitio de Intranet e Internet.
En la siguiente parte, presentaremos algunas características que pueden incluirse en un sitio de Internet o Intranet:
  • Búsqueda multicriterio,
  • Impresión,
  • Gestión de múltiples idiomas, etc.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 28
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 30/06/2023

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