PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad WEBDEV 25!
Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Esta lección le enseñará los conceptos siguientes
  • Presentación
  • Creación de una página en modo AWP para listar nuevos productos
  • Creación de la página
  • Creación de la lista de nuevos productos
  • Ver los detalles de un nuevo producto
  • Creación de la página
  • ¿Qué debe hacer esta página?
  • Creación de controles
  • Visualización de datos en la página
  • Mostrar el formulario de la lista de productos
  • Gestión de estilos
  • Importar una hoja de estilo CSS
  • Aplicación de estilos CSS
  • Vinculación entre el sitio de Internet y el sitio de la Intranet
  • Creación de una página para visualizar las condiciones generales de venta
  • Creación de la página
  • Crear control
  • Conclusión
Lección 4.3. Creación de páginas en modo AWP
Esta lección le enseñará los conceptos siguientes
  • Creación de una página en modo AWP utilizada para listar nuevos productos.
  • Creación de un formulario de producto en modo AWP.
  • Importación de estilos CSS.
  • Enlace entre la sección Internet y la sección Intranet del sitio.
  • Creación de una página para las condiciones generales de venta.
Duración de las clases

Tiempo estimado: 50 mn
Lección anteriorTabla de contenidoSiguiente lección
Presentación
Vamos a crear las diferentes páginas en modo AWP para listar, añadir y modificar nuevos productos. 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 funciones del modo AWP.
Vamos a realizar estas operaciones en el proyecto "Full_WEBDEV_Site".. Trabajamos en este proyecto en la sección anterior.
  • Para abrir este proyecto:
    • Si ha abierto el ejercicio "Sitio WEBDEV completo" en la sección anterior, abra el proyecto en el que ha estado trabajando:
      1. Abrir la página web de WEBDEV (Ctrl + <).
      2. En la página de inicio, haga clic en "Tutorial" y seleccione "Sitio WEBDEV completo (Ejercicio)".
      3. WEBDEV informa que este proyecto ya ha sido abierto y propone abrir la versión local o sobrescribir este proyecto con la versión inicial. Para recuperar sus cambios, haga clic en "Abrir la copia local".
    • Si el ejercicio "Sitio WEBDEV completo" no se abrió en la sección anterior:
      1. Abrir la página web de WEBDEV (Ctrl + <).
      2. En la página de inicio, haga clic en "Tutorial" y seleccione "Sitio WEBDEV completo (Ejercicio)"..
        Atención: En este caso, puede haber algunas diferencias con respecto a las imágenes de este tutorial y no será posible vincular la parte de Internet e Intranet del sitio. .

Respuesta

Un proyecto corregido está disponible. Este proyecto contiene las diferentes páginas creadas en esta lección. Para abrir el proyecto corregido, en la página de inicio, haga clic en "Tutorial" y seleccione "Sitio WEBDEV completo (Respuesta)".
Creación de una página en modo AWP para listar nuevos productos
Ahora vamos a crear una página para listar los nuevos productos del proyecto "Full_WEBDEV_Site".. Esta página será un "escaparate" y será accesible a través de Internet.. Esta página debe estar referenciada en Internet, por lo tanto debe utilizar el modo de generación AWP.

Creación de la página

  • Para crear una página en la que se muestren los nuevos productos:
    1. Crear una nueva página:
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • La ventana para crear 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 de preajuste "Single"..
        Creación de una nueva página
      • Asegúrese de que la opción "Crear: una página y su modelo".
      • Valide el asistente.
    2. La nueva página se muestra en el editor. Aparece la ventana de guardar.
    3. Escriba el título de la página: "Lista de nuevos productos". El nombre de la página ("PAGE_List_of_new_products") se propone automáticamente.
    4. Valide.
  • La página fue creada con los controles propuestos por defecto. Elimine estos controles:
    1. Seleccione los controles que se encuentran en la página (presione Ctrl + A).
    2. Eliminar los controles (tecla Supr).
  • Esta página debe ser referenciable. Para ello, debe generarse en modo AWP:
    1. Abrir la ventana de descripción de la página: muestra el menú contextual y selecciona "Descripción".
    2. Vaya a "General", "Tipo de página", "Modo", y seleccione "AWP"..
      Selección del modo AWP
    3. Valide.
    4. Guarda las modificaciones pulsando Grabar un elemento entre los botones de acceso rápido.

Creación de la lista de nuevos productos

Vamos a mostrar la lista de nuevos productos. Para ello, utilizaremos un control Looper. Ya hemos explicado en la parte anterior cómo crear este tipo de control sin necesidad de programación, a través del asistente. En esta página, la control Looper se rellenará mediante programación.
Crear un control Looper
  • Para crear la control Looper:
    1. En el panel "Creación", en el grupo "Datos", expanda "Looper" y seleccione "Looper".. El control creado actualmente sigue el movimiento del ratón.
    2. Haga clic en la esquina superior izquierda de la página: comienza el asistente de creación de control Looper.
    3. En el asistente, seleccione "Quiero llenar la control Looper por programación"..
      Asistente de creación de control Looper
      Pase a la etapa siguiente.
    4. En el siguiente paso, vamos a seleccionar parámetros adicionales para crear la control Looper:
      • La control Looper está en modo Clásico: los datos completos se mostrarán al cargar la página.
        Seleccione el modo de funcionamiento "Clásico".
      • El control Looper utiliza un número ilimitado de filas. En efecto, todos los productos deben ser accesibles en la página directamente. La página se ampliará para mostrar todos los productos.
        Seleccione "Sin límite" en "Número máximo de filas por página".
        Asistente de creación de control Looper
    5. Pase a la etapa siguiente. Vamos a configurar los parámetros de visualización.
      • Mantener la dirección de visualización propuesta: número fijo de columnas, rellenar fila.
      • La control Looper mostrará los nuevos productos en 5 columnas.
        En el área "Número de columnas", sustituya 1 por 5.
    6. Pase a la etapa siguiente.
    7. El último paso se utiliza para especificar el nombre de control (LOOP_NewProducts por ejemplo).
    8. Valide el asistente. La control Looper se crea automáticamente en la página.
La control Looper creada está vacía. WEBDEV materializa la celda principal (la que será editada) con una línea sólida y las otras con una línea punteada.
  • Con las manijas, reduzca el ancho de la celda principal para que las 5 celdas quepan en todo el ancho de la página..
    control Looper en modo edición en la página
Ahora vamos a crear los diferentes controles que se mostrarán en el control Looper.
Aparecerá cada fila:
  • Una control Imagen utilizada para mostrar la imagen del producto.
  • Un control Enlace utilizado para mostrar el nombre del producto y para abrir el formulario detallado.
  • Un control Estático utilizado para almacenar el identificador del producto.
Vamos a crear estos diferentes controles y programar la operación de llenado para la control Looper.
Crear controles dentro de control Looper
  • Para crear la control Imagen:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Imagen". El control creado actualmente aparece debajo del ratón.
    2. Pase el ratón por encima de la primera fila: aparece un borde verde que le permite ver el área disponible.
    3. Haga clic en la esquina superior izquierda de la primera fila en el menú control Looper. Se crea la control Imagen.
      Creación de una control Imagen en el control Looper
    4. Visualice la descripción de control Imagen para modificar las características de control (haga doble clic en el control).
    5. Modificar:
      • el nombre del control: IMG_Visual.
      • el modo de visualización de la imagen: seleccione "Homotético" y marque "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 en formato de memo en un elemento del archivo de datos del producto. Elija una pantalla calculada en el servidor para optimizar el ancho de banda y marque "Alta calidad".
    6. Valide.
  • Para crear la control Enlace:
    1. En el panel "Creación", en el grupo "Controles habituales", haga clic en "Enlace".
    2. Haga clic en el control Looper debajo del control Imagen para crear el control Enlace.
      Creación de una control Enlace en el control Looper
    3. Mostrar la descripción de control Enlace para modificar sus características (haga doble clic en el control).
    4. Este control se llama "LINK_View_Product".
    5. Validar la ventana de descripción del control.
    6. Seleccione la control Enlace y aumente su anchura (con los mangos) para que ocupe la anchura de 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.
      Creación de una control Estático en el control Looper
    3. Mostrar la descripción de control Estático para modificar sus características (haga doble clic en el control).
    4. Este control se llama "STC_Product".
    5. Validar la ventana de descripción del control.
Vamos a crear atributos para rellenar los controles de la control Looper y modificar sus características en cada fila.

Observación

Un control Looper incluye:
  • que se repiten en cada fila.
  • atributos. Se utiliza un atributo para definir la característica de control que se modificará en cada fila.. Por ejemplo, si el valor y el color del control PRICE deben cambiar en cada fila, tendrá que definir dos atributos diferentes para el mismo control.
  • Para crear atributos:
    1. Visualizar la ventana de descripción de control Looper (haga doble clic en el control).
    2. En la sección superior de la ventana, no se crea ningún atributo. Vamos a definir 3 atributos (uno para cada control del looper).
    3. Cree un nuevo atributo haciendo clic en el botón "Nuevo":
      • Renombrar el atributo a "ATT_Image".
      • Seleccione el control "IMG_Visual".
      • Seleccione la propiedad "Value. De hecho, el valor de la imagen se modificará para cada fila.
        Descripción del atributo ATT_Image
    4. Cree un nuevo atributo haciendo clic en el botón "Nuevo":
      • Renombrar el atributo a 'ATT_Link'..
      • Seleccione el control "LINK_View_Product".
      • Seleccione la propiedad "Caption. De hecho, el título de control se modificará en cada fila.
    5. Cree un nuevo atributo haciendo clic en el botón "Nuevo":
      • Renombrar el atributo a 'ATT_ID'..
      • Seleccione el control "STC_Product".
      • Seleccione la propiedad "Caption. De hecho, el título de control se modificará para cada fila.
        Descripción del control Looper
    6. Validar la ventana de descripción de control Looper.
    7. Guarda las modificaciones ( Grabar un elemento o Ctrl + S).
La control Looper se crea ahora. Ahora programemos el proceso de llenado para la control Looper.
Rellenar un control Looper
La control Looper se rellena al inicializar la página.
  • Para llenar el control Looper:
    1. Mostrar los eventos de WLanguage asociados a la página (haga clic dentro de la página y seleccione "Code" en el menú contextual, o pulse F2).
    2. Escriba el siguiente código en el evento "Inicialización" de la página:
      FOR EACH Product WITH NewProduct = True
      LooperAddLine(LOOP_NewProducts,Product.Visual,...
      Product.Caption,Product.ProductID)
      END
    3. Echemos un vistazo a este código de WLanguage:
      • Este código navega por el archivo de datos Product con la instrucción FOR EACH.
      • Sólo se seleccionan los registros para los que el elemento "NuevoProducto" está ajustado a True.
      • LooperAddLine se usa para añadir un nuevo fila en el control Looper. Los diferentes atributos de fila se actualizan con los datos del registro actual:
        • el valor del atributo "ATT_Image" corresponde a la imagen que se encuentra en el elemento "Visual" del archivo de datos del "Producto".
        • el valor del atributo "ATT_Link" caption es el contenido del elemento "Caption" que se encuentra en el archivo de datos del "Producto".
        • el valor del subtítulo del atributo "ATT_ID" es el contenido del elemento "ProductID" que se encuentra en el archivo de datos del "Producto".
    4. Guarda las modificaciones ( Grabar un elemento o Ctrl + S).
    5. Cierre la ventana de código.
  • Vamos a ejecutar la prueba de la página que acabamos de crear.
    1. Haga clic en Ejecutar la prueba de una página en los botones de acceso rápido.
    2. La página se muestra automáticamente en el navegador.
      Página en tiempo de ejecución
  • Cerrar el navegador. Se vuelve a visualizar el editor WEBDEV.
Ver los detalles de un nuevo producto
Mostrar la lista de nuevos productos es algo bueno. Ahora vamos a crear una página de "formulario" para ver los detalles del producto. Esta página se mostrará cuando el usuario de la Web haga clic en el enlace que muestra el nombre del producto en la sección control Looper.

Creación de la página

  • Para crear una página en la que se muestren los detalles del producto:
    1. Crear una nueva página.
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • Se muestra la ventana para la creación de elementos: haga clic en "Página", y luego en "Página".
      • Se inicia el asistente de creación de páginas.
      • En la sección "Basado en un proyecto modelo", elija "PAGETPL_Single" y termine el asistente.
    2. Aparece la ventana para guardar la página. Escriba el título: "Detalles del producto". El nombre ("PAGE_Product_details") se propone automáticamente.
    3. Valide.
  • Al igual que la página utilizada para listar nuevos productos, esta página debe ser generada en modo AWP:
    1. Mostrar la ventana de descripción de la página (seleccionar "Descripción" de el menú contextual).
    2. En el área "Tipo de página", seleccione el modo "AWP"..
      Cambiar el tipo de página
    3. Valide.
    4. Guarda las modificaciones ( Grabar un elemento o Ctrl + S).

¿Qué debe hacer esta página?

Esta página tiene por objeto mostrar las características del producto actualmente seleccionado en la control Looper.
En nuestro caso, esta página se utilizará para mostrar el contenido de los diferentes artículos que se encuentran en el archivo de datos del "Producto".
En primer lugar, vamos a indicar a la página el producto que se va a mostrar. Para ello, todo lo que tenemos que hacer es declarar un parámetro en la página. Este parámetro se pasará a la URL.
  • Para declarar un parámetro en la página:
    1. Pulsar F2. El editor de código muestra los diferentes eventos de página.
    2. Escriba el siguiente código en el evento "Declaraciones globales":
      PROCÉDURE MyPage(gnProductID is 8-byte int)
    3. Echemos un vistazo a este código de WLanguage:
      • La palabra clave PROCEDIMIENTO en el evento "Declaraciones globales" se utiliza para asociar un procedimiento a la apertura de la página.
      • El procedimiento se llama "MyPage".. En tiempo de ejecución, esta palabra clave será reemplazada automáticamente por el nombre de la página actual.
      • El procedimiento espera que la variable gnProductID (entero de 8 bytes) como parámetro. Esta variable corresponde al identificador del producto que se mostrará en la página. El tipo de esta variable es idéntico al tipo de elemento correspondiente de ProductID descrito en el archivo de datos del producto. Este parámetro contiene el valor que se encontrará en la URL.
    4. Cerrar el editor de código. Ahora vamos a crear los diferentes controles de página.

Creación de controles

Ahora vamos a crear los controles utilizados para mostrar información sobre el producto seleccionado.
En la parte anterior, explicamos cómo crear controles mediante Arrastrar y soltar desde el panel de análisis. En esta parte, vamos a crear los controles uno por uno y luego los asociaremos con el elemento correspondiente en el archivo de datos.
Vamos a crear los siguientes controles:
  • un control Imagen.
  • Controles estáticos simples para el título, precio y referencia del producto.
  • una rica control Estático para la descripción del producto.
  • Para crear la control Imagen:
    1. En la pestaña "Creación" en el grupo "Controles frecuentes", haga clic en "Imagen".
    2. Haga clic en la página (por ejemplo, en la esquina superior izquierda).
      Creación de la control Imagen
    3. Visualice la descripción de control Imagen para modificar las características de control (haga doble clic en el control).
      • Este control se denomina "IMG_Product_Image".
      • Elija una pantalla calculada en el servidor para optimizar el ancho de banda y marque "Alta calidad". De hecho, el modo de visualización de la imagen es "Homotético".. Marque "Sin ampliar la imagen" y "Centrar imagen en el control".

        Observación

        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. Las proporciones serán respetadas y la imagen no será ampliada.
    4. Validar la ventana de descripción del control.
  • Para crear el simple control Estático utilizado para mostrar el título 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).
      Creación de la control Estático

      Observación

      Para simplificar el posicionamiento de los mandos, pulsar la tecla F7. Una pulsación de esta tecla se utiliza para ver el área ocupada por el control, una segunda pulsación de esta tecla se utiliza para mostrar un contorno alrededor del control (sólo en edición).
      Esto le permite ver la frontera de control y posicionar fácilmente los controles en relación a los otros.
      Esta característica es muy útil para los controles sin fronteras.
    3. Renombrar la control Estático: "STC_Title".
    4. Amplíe el control horizontalmente (usando las manijas de medición).
  • Vamos a mostrar la descripción del producto en un rico control Estático (llamado Rich Text Area). Para crear este control:
    1. En el panel "Creación", en el grupo "Controles habituales", expanda "Texto" y seleccione "Área de texto enriquecido".. También tiene la posibilidad de hacer clic directamente en el icono "Texto".
    2. Haga clic dentro de la página (a la derecha de la imagen, por ejemplo, debajo del control STC_Title).
      Creando la rica control Estático
    3. Renombrar el control: "RTA_Descripción".
Vamos a mostrar el precio del producto en un control de visualización formateado. Este control se utiliza para visualizar fechas, horas y valores de moneda respetando 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 de control usando las manijas de tamaño.
  • Vamos a modificar las características de este control:
    1. Mostrar la ventana de descripción del control que se acaba de crear: haga doble clic en el control, por ejemplo.
    2. En la pestaña "General":
      • Modificar el nombre del control: "FSTC_Price".
      • Borrar el título.
      • Modificar el tipo de control: seleccione"Moneda".
        Descripción de un control de visualización formateado
    3. Valide.
  • Cree una simple control Estático para mostrar la referencia del producto. Este control se denomina "STC_Reference" y su título es "Reference".. Este control se posiciona por debajo del precio.
Se han creado todos los controles necesarios. Ahora vamos a asociar cada control con el ítem correspondiente. Esta asociación se realiza en la pestaña "Link" de la ventana de descripción del control.
  • Enlazar el control "IMG_Product_Image" con la posición correspondiente:
    1. Seleccione el control "IMG_Product_Image".
    2. Despliega el menú contextual (clic derecho del ratón) y selecciona "Descripción".
    3. Ve a la pestaña "Enlace" en la ventana de descripción. Esta pestaña le permite ver que el control actual es relacionado a ningún ítem. Vamos a vincularlo con el archivo de datos del artículo visual del producto.
    4. En la parte "Elemento relacionado", despliegue "Análisis" y después "Producto". Se muestra la lista de artículos que se encuentran en el archivo de datos del producto.
    5. Seleccione el elemento "Visual" del archivo de datos del "Producto"....
      Enlace entre el control y el artículo
    6. Valide la ventana de descripción.
  • Realice la misma operación para crear los siguientes enlaces:
    • STC_Title control relacionado al elemento "Caption" del archivo de datos "Producto".
    • RTA_Descripción control relacionado al elemento "Descripción" del archivo de datos del "Producto".
    • FSTC_Price relacionado al artículo "PriceBT" del archivo de datos "Producto".
    • STC_Control de referencia relacionado al elemento "Referencia" del archivo de datos "Producto".
  • Guarde la página (Ctrl + S).

Visualización de datos en la página

La página "Formulario" debe mostrar el producto que se ha seleccionado en el control Looper. En el código de la página, vamos a escribir el código utilizado para ello:
  • encontrar el producto a mostrar.
  • mostrar los datos en la página.
  • Para mostrar los datos en la página:
    1. Pulsar F2. El editor de código muestra las diferentes páginas de eventos WLanguage.
    2. En el caso de las "Declaraciones globales", escriba el siguiente código debajo del código escrito anteriormente:
      HReadSeekFirst(Product,ProductID,gnProductID)
      IF HFound(Product) THEN
      FileToScreen()
      END
    3. Echemos un vistazo a este código de WLanguage:
      • HReadSeekFirst se utiliza para encontrar el primer registro en el archivo de datos de productos para el que el elemento ProductID es igual al valor de gnProductID, correspondiente al parámetro pasado a la página.
      • HFound se utiliza para comprobar si un registro fue realmente encontrado. Esta función es necesaria principalmente para los centros multiusuario. Se utiliza para evitar errores causados por los borrados realizados por los demás usuarios.
      • FileToScreen se utiliza para mostrar en los controles los datos que se encuentran en el archivo de datos, para el registro actual. En nuestro caso, el registro actual corresponde al registro encontrado por HReadSeekFirst.
    4. Cierre el editor de código.

Mostrar el formulario de la lista de productos

Ahora, veamos cómo mostrar la forma del producto seleccionado en la lista de productos. El principio es sencillo: el usuario seleccionará el producto en el control Looper y mostrará los detalles a través de un enlace. Este enlace ya existe en la 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 "Lista de productos": haga clic en "PAGE_List_of_products" en la barra de documentos abierta.
    2. Mostrar la ventana de descripción de control Enlace: haga doble clic en el control.
    3. En la pestaña "General" de la ventana de descripción, en "Acción del enlace":
      • Seleccione "Mostrar una página del sitio".
      • Seleccione la página "PAGE_Product_details".
      • Haga clic en el botón "Parámetros. A continuación vamos a definir el parámetro que se pasará a la página para mostrar los detalles del producto seleccionado.
    4. En la ventana que aparece, encontrará el nombre del parámetro declarado en el evento "Declaraciones globales" de la página (gnProductID). Todo lo que tiene que hacer es seleccionar el control que contiene el valor del parámetro. En nuestro caso, el identificador del producto se encuentra en el atributo "ATT_ID"..
    5. Expandir y seleccionar "ATT_ID".:
      Selección del parámetro de página
    6. Haga clic en "OK" y valide la ventana de descripción de los parámetros..

      Observación

      Atención: En una control Looper, el valor no está contenido en el control sino en el atributo que se asocia con él para la característica de valor.
    7. Validar la ventana de descripción de control Enlace.
    8. Guarda las modificaciones ( Grabar un elemento o Ctrl + S).
  • Vamos a hacer una prueba para comprobar si todo está funcionando.
    1. Si es necesario, abra "PAGE_List_of_new_products" en el editor de páginas (utilice la barra de documentos).
    2. Haga clic en Ejecutar la prueba de una 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 de un producto (en tiempo de ejecución)
  • Cierre las páginas para detener la prueba.
Gestión de estilos
Para mejorar nuestra página, vamos a modificar los estilos de controles. Si está trabajando con un diseñador gráfico o si se ha definido un tema gráfico para su sitio (tema gráfico de la empresa, por ejemplo), los estilos se han definido previamente en una hoja de estilo CSS.. Vamos a importar esta hoja de estilo a nuestro proyecto WEBDEV para utilizar estos estilos.

Observación

WEBDEV propone dos tipos de estilos:
  • los estilos WEBDEV.
  • los estilos CSS.
Un estilo WEBDEV es un conjunto de estilos CSS utilizados para definir 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 la leyenda.
  • un estilo para el texto del área de entrada.

Observación

Recordatorio: Al crear el sitio, usted tiene la posibilidad de elegir un tema. Los skins se utilizan para estandarizar el aspecto visual de un sitio y le permiten cambiar fácilmente de estilo.
El tema proporciona las imágenes, las fuentes, la textura, la forma de los botones y los estilos disponibles para el proyecto.
Usted crea sitios con un estilo profesional a partir de los estilos suministrados en el estándar. La importación de estilos CSS se utiliza, por ejemplo, para añadir un nuevo estilo que se encuentra en Internet.

Importar una hoja de estilo CSS

  • Para importar la hoja de estilo CSS al proyecto:
    1. En la cinta, en el panel "Proyecto", en el grupo "Proyecto", expanda "Importar" y seleccione "Una hoja de estilo CSS".
    2. El asistente de importación se inicia y propone dos opciones:
      Asistente para la importación de estilos
      • Importar estilos CSS a WEBDEV: Esta opción importa los estilos CSS al proyecto WEBDEV. Luego, los estilos pueden ser modificados en WEBDEV.
      • Utilizar una hoja de estilo CSS externa: Esta opción le permite utilizar una hoja de estilo existente. Esta opción debe elegirse cuando se define una hoja de estilo para una empresa y cuando debe ser compartida entre varios centros (tema gráfico de empresa).
    3. Seleccione "Importar los estilos CSS a WEBDEV" y haga clic en "Siguiente".
    4. Seleccione el archivo "customstyles.css".. Este archivo se encuentra en el directorio "\Tutorial\WB\Ejercicios\Full_WEBDEV_Site".. Se muestran los diferentes estilos que se encuentran en la hoja de estilo.
      Selección de estilos para importar
      • A la derecha se muestra una vista previa del sitio seleccionado.

        Consejo

        Los rectángulos de colores que se encuentran en la vista previa se utilizan para cambiar el color de fondo. Esto le permite obtener una vista previa en otro color que no sea el blanco.
      • El prefijo "class-" significa que es una clase CSS. Este atributo significa que este estilo se aplicará a los elementos con el atributo HTML "class".
    5. Mantener todos los estilos propuestos y validar. Los estilos son importados y están disponibles en WEBDEV.

Aplicación de estilos CSS

Ahora vamos a aplicar los diferentes estilos a los controles que se encuentran en la página "PAGE_Product_details".
  1. Posición en la página "PAGE_Product_details".
  2. Mostrar la ventana de descripción del control "FSTC_Price" que muestra el precio del producto (haga doble clic en el control).
  3. En la pestaña "Estilo":
    • Seleccionar el elemento "Zona de visualización (CSS)".
    • Seleccione el estilo "class-styleprice" en la lista "CSS style".:
      Pestaña Estilo de un control de pantalla formateado
  4. Validar. El estilo se aplica automáticamente al control.
  5. Amplíe el control si es necesario (con las manijas) para adaptar su tamaño a su contenido.
  6. Guarda las modificaciones ( Grabar un elemento o Ctrl + S).
  • Vamos a hacer una prueba para comprobar si todo está funcionando.
    1. Si es necesario, abra "PAGE_List_of_new_products" en el editor de páginas (utilice la barra de documentos abierta).
    2. Haga clic en Ejecutar la prueba de una 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 se muestra ahora en rojo.
      Uso de un estilo importado en tiempo de ejecución
  • Cierre las páginas para detener la prueba.
Vinculación entre el sitio de Internet y el sitio de la Intranet
Hasta ahora, hemos creado páginas de Intranet para gestionar los productos y páginas de Internet que permiten a los usuarios de la Web ver los nuevos productos.
Ahora vamos a enlazar estas páginas proponiendo, desde las páginas de Internet, un enlace de "Gestión" para acceder a las páginas de la Intranet.
Para ello, vamos a modificar la modelo de las páginas de Internet.

¡Atención!

Las siguientes operaciones sólo pueden realizarse si se ha seguido la parte 3 de este tutorial, relativa a la creación de páginas de Intranet.
  • Crear un enlace "Gestión":
    1. Seleccione "PAGE_List_of_new_products".
    2. Abre el menú contextual de uno de los enlaces de la parte superior de la página y selecciona "Abrir modelo".
    3. Visualice la descripción del control de notificaciones (haga doble clic en el control).
    4. Modificar el título de control: Gestión.

      Consejo

      En sus programas, le aconsejamos que elija nombres significativos para sus elementos (en este caso, el control Enlace se llama "LINK_Management"). Así, su código será más legible.
    5. En el área de "Acción de enlace", para la opción "Tipo", seleccione "Ejecutar el código de clic del navegador solamente".
    6. Valide.
      Enlace
  • Ahora escribiremos el código WLanguage asociado a la control Enlace:
    1. Visualizar los eventos asociados a la control Enlace (F2 en el control).
    2. Escriba el siguiente código en el evento "Click (browser)":
      DynamicSiteDisplay("Full_WEBDEV_Site")
    3. En este código, DynamicSiteDisplay se utiliza para mostrar la primera página dinámica del proyecto (en nuestro caso, será la página "PAGE_List_of_Products").
    4. Cierre el editor de código.
    5. En la barra naranja de modelo, haz clic en Propagar modificaciones de la página modelo para propagar las modificaciones de modelo a todas las páginas que usan este modelo.
    6. En nuestro caso, las dos páginas del proyecto en modo AWP se proponen. Validar la ventana de actualización de la modelo.
    7. Cerrar la página modelo.
  • Ahora vamos a modificar la página "PAGE_List_of_products" para que pueda ser abierta por DynamicSiteDisplay:
    1. Abra la página "PAGE_List_of_Products" en el editor.
    2. Mostrar la ventana de descripción (seleccionar "Descripción" de el menú contextual).
    3. En la pestaña "General", seleccione la opción "Accesible mediante la opción DynamicSiteDisplay".
      Descripción de la página
    4. Valide.
  • Ahora vamos a ejecutar la prueba del proyecto a través de las páginas del AWP.
    1. Si es necesario, abra "PAGE_List_of_new_products" en el editor de páginas (utilice la barra de documentos).
    2. Haga clic en Ejecutar la prueba de una 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 "Gestión. Se muestra la página de gestión de productos.
      Modo Administrador en tiempo de ejecución
  • Cierre las páginas para detener la prueba.
Creación de una página para visualizar las condiciones generales de venta
Ahora vamos a crear un tipo de página que se utiliza a menudo en los sitios de comercio electrónico: una página que muestra las condiciones generales de venta. Para ello, utilizaremos el control Área de texto enriquecido, que le permitirá formatear rápidamente un texto.

Creación de la página

  • Para crear una página en la que se muestren las condiciones generales de venta:
    1. Crear una nueva página.
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • La ventana para crear nuevos elementos se abre: haga clic en "Página", y luego en "Página".
      • Se inicia el asistente de creación de páginas.
      • En la sección "Basado en un proyecto modelo", elija "PAGETPL_Single" y termine el asistente.
    2. Aparece la ventana para guardar la página. Escriba el título: "Condiciones generales de venta". El nombre ("PAGE_General_sales_conditions") se propone automáticamente..
    3. Valide.

Crear control

  • Para crear una rica control Estático:
    1. En la cinta, en el panel "Creación", en el grupo "Controles habituales", expanda "Texto" y seleccione "Área de texto enriquecido".
    2. Haga clic en la página (por ejemplo, en la esquina superior izquierda). El control se crea automáticamente.
  • Este tipo de control adapta automáticamente su altura a su contenido.. Vamos a definir un ancho específico:
    1. Seleccione el control que acaba de crearse.
    2. Expanda el control horizontalmente (con los controladores de tamaño) hasta que ocupe el ancho de la página.
  • Ahora, vamos a visualizar las condiciones generales de venta en este control. El archivo que contiene el texto fue preparado de antemano.
    1. Copiar el texto en el archivo GSC.txt. Este archivo se encuentra en "\Tutorial\WB\Ejercicios\Full_WEBDEV_Site" en el directorio de instalación de WEBDEV.
    2. Seleccione el control "Área de texto enriquecido" en la página.
    3. Pulsar la tecla Space del teclado: el control se vuelve editable. Se muestra un borde amarillo alrededor del control.
    4. Reemplazar el texto existente por el texto encontrado en el portapapeles (Ctrl + V). Aparece el texto.
    5. Realizar algunas modificaciones en el texto:
      • Añada caracteres CR antes y después de los títulos.
      • Escriba los títulos de los diferentes puntos en negrita.
        En el editor de páginas
    6. Pruebe las diferentes opciones: todas las opciones disponibles para el texto están disponibles en la cinta.
    7. Haga clic en Ejecutar la prueba de una 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 y las de un sitio de Internet.
En la siguiente parte, presentaremos varios temas que pueden ser incluidos en un sitio de Internet y en un sitio de Intranet:
  • Búsqueda multicriterio,
  • Imprimir,
  • Gestión de múltiples idiomas, etc.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario