Cómo dar formato a un informe con una hoja de estilos externa en cascada

Procedimiento: Cómo Dar formato a un informe con una hoja de estilos externa en cascada

Para dar formato a un informe con una hoja de estilos externa en cascada (CSS):

Especifique el formato del informe en la CSS. Determine la hoja de estilos en cascada que va a usar, las reglas que especifican el formato predefinido de su informe y las clases adecuadas para ser aplicadas a los componentes de informe. Alternativamente, si está creando una CSS nueva o va a modificar una existente, defina nuevas reglas que especifiquen el formato de su informe. Para especificar formato para:
- Un componente de informe, puede utilizar una regla para cualquier clase genérica (es decir, para cualquier clase que no haya sido declarada para un elemento). Para ver un ejemplo, vaya a Una regla CSS para la clase ColumnTitle.
  Los gráficos difieren de otros tipos de informes: para especificar un formato para la página en que aparece el gráfico, o para el encabezado o pie del gráfico, puede utilizar una regla para el elemento BODY, pero no una regla para una clase. No puede dar formato otros componentes de gráfico.
- El informe completo, utilice una regla para los elementos BODY o TD (no una regla para una clase de estos elementos) y salte el paso 2. Ésta es una forma efectiva de especificar el formato predeterminado de un informe y genera una salida de informe más eficiente que la generada al aplicar una clase de CSS en todo el informe. Para ver un ejemplo, vaya a Una regla CSS para el elemento TD.
  Los gráficos difieren de los otros tipos de informe: puede utilizar una regla para un elemento BODY, pero no para TD. Una regla para BODY da formato a la página en la que aparece el gráfico, así como su encabezado y pie, pero no da formato al gráfico en sí.
Para más información, consulte Cómo trabajar con una hoja de estilos externa en cascada.
Asigne clases a los componentes del informe. En una hoja de estilos de WebFOCUS, asigne una clase de hoja de estilos en cascada a cada componente de informe al que quiera aplicar un formato. Especifique la clase con el atributo CLASS. Puede asignar una clase diferente a cada componente y puede asignar la misma clase a múltiples componentes.
Para ver un ejemplo, vaya a Cómo aplicar una clase de CSS a valores ACROSS en un informe. Para más información, consulte Cómo aplicar una hoja de estilos externa en cascada.
Establezca un vínculo con la CSS. Establezca un vínculo a la hoja de estilos externa en cascada asignando el URL del archivo CSS al atributo CSSURL de hoja de estilos de WebFOCUS o al parámetro CSSURL SET. Para instrucciones, consulte Cómo utilizar el atributo y parámetro CSSURL.
Hay una excepción: si inserta la salida de informe en una página HTML existente, mediante el comando -HTMLFORM, incluya un elemento LINK en esa página HTML, en lugar de establecer CSSURL.

Para ver un ejemplo, vaya a Cómo vincular con la hoja de estilos en cascada de externa ReportStyles. Para más información, consulte Cómo vincular con una hoja de estilos externa en cascada.

¿Problemas? Si se presentan problemas, vaya a Cómo resolver problemas de hojas de estilos en cascada externas.

Referencia: Una regla CSS para la clase ColumnTitle

Esta regla de hoja de estilos en cascada (CSS) declara la clase genérica ColumnTitle (es decir, una clase que no se encuentre limitada por un elemento):

.ColumnTitle {font-family:helvetica; font-weight:bold; color:blue;}

Para un ejemplo más detallado que muestre una hoja de estilos externa en cascada, completa, un procedimiento de informe con una hoja de estilos en línea de WebFOCUS y salida de informe generada, consulte Cómo dar formato a un informe con una hoja de estilos externa en cascada.

Referencia: Una regla CSS para el elemento TD

Esta regla de hoja de estilos en cascada (CSS) para el elemento TD especifica la familia de fuente del elemento:

TD {font-family:helvetica}

Dado que esta regla funciona para el elemento TD, su formato se aplica a todo el informe, no sólo a un componente del informe.

Para un ejemplo detallado de cómo usar una regla de elemento TD para proporcionar un formato de informes general, consulte Cómo dar formato a un informe con una hoja de estilos externa en cascada.

Referencia: Cómo aplicar una clase de CSS a valores ACROSS en un informe

Esta declaración de hoja de estilos de WebFOCUS aplica el formato especificado para la clase ColumnTitle, a los valores ACROSS:

TYPE=AcrossValue, CLASS=ColumnTitle, $

Para un ejemplo más detallado que muestre una hoja de estilos externa en cascada, completa, un procedimiento de informe con una hoja de estilos en línea de WebFOCUS y salida de informe generada, consulte Cómo dar formato a un informe con una hoja de estilos externa en cascada.

Referencia: Cómo vincular con la hoja de estilos en cascada de externa ReportStyles

Esta declaración de hoja de estilos de WebFOCUS vincula con la hoja de estilos externa en cascada ReportStyles:

TYPE=REPORT, CSSURL=http://webserv1/css/reportstyles.css

Puede obtener el mismo resultado con un comando SET:

SET CSSURL=http://webserv1/css/reportstyles.css

Como alternativa, si desea insertar la salida de su informe en una página HTML ya existente mediante -HTMLFORM, especifique el vínculo codificando el elemento LINK en la página HTML en que se va a insertar el informe, en vez de establecer CSSURL:

<HEAD>
<TITLE>Accounts Receivable Report</TITLE>
<LINK REL="STYLESHEET" HREF="http://srv3/css/reports.css" 
TYPE="text/css">
</HEAD>

Para un ejemplo más detallado que muestre una hoja de estilos externa en cascada, completa, un procedimiento de informe con una hoja de estilos en línea de WebFOCUS y salida de informe generada, consulte Cómo dar formato a un informe con una hoja de estilos externa en cascada.

Principio de página

Ejemplo: Cómo dar formato a un informe con una hoja de estilos externa en cascada

Este informe muestra los productos ofrecidos actualmente por Gotham Grinds, con un formato de hoja de estilos externa en cascada (CSS). Se ha aplicado un formato al informe para que:

Su fuente predeterminada sea Arial.
El encabezado del informe sobrescribe la opción predeterminada con la fuente Times New Roman. El encabezado sea también una fuente más grande y esté centralizada.
Todos los títulos de columna estén en una fuente más gruesa y tengan un fondo en azul claro.
Cuando el precio por unidad de producto es inferior a 27$, el informe muestra la fila de producto en cursiva verde.

La solicitud de informe y la hoja de estilos de WebFOCUS en línea se muestran en el siguiente procedimiento, curprods.fex. La hoja de estilos en cascada externa, llamada report01.css, sigue al procedimiento.

curprods.fex

    TABLE FILE GGPRODS
    HEADING
    "</1 Current Products</1"
    PRINT PRODUCT_DESCRIPTION UNIT_PRICE
    BY PRODUCT_ID
    ON TABLE SET PAGE-NUM OFF 
    
1.  ON TABLE SET STYLE * 
2.  TYPE=REPORT, CSSURL=http://websrv2/css/report01.css, $ 
3.  TYPE=HEADING, CLASS=headText, $ 
4.  TYPE=TITLE, CLASS=reportTitles, $ 
5.  TYPE=DATA, CLASS=lowCost, WHEN=N3 LT 27, $ 
6.  ENDSTYLE
    END

report01.css

7.  BODY  {font-family:Arial, sans-serif} 
8.  TABLE {border:0} 
8.  TD    {border:0} 
9.  .reportTitles {font-weight:bolder; background:lightblue;} 
10. .lowCost {color:green; font-style:italic;} 
11. .headText {font-family:Times New Roman, serif; font-size:larger;
               text-align:center}

Inicie la hoja de estilos en línea de WebFOCUS.
Establezca un vínculo con la hoja de estilos externa en cascada, report01.css.
De formato al informe usando la regla de hoja de estilos en cascada para la clase headText.
De formato a los títulos de columnas del informe usando la regla CSS para la clase reportTitles.
Para cada fila del informe con un coste por unidad de producto inferior a $27, de formato a la fila mediante la regla CSS para la clase lowCost.
Finalice la hoja de estilos en línea de WebFOCUS.
Esta regla CSS para el elemento BODY especifica la fuente Arial y, si Arial no está disponible, la familia genérica de fuente sans serif.
Dado que se trata de una regla para BODY, se aplica a todo el informe: todo el texto en el informe estará en Arial por defecto. Puede anular esto para un componente de informe particular al aplicar una regla para una clase genérica a ese componente, tal como se hace en este procedimiento con la regla para la clase de texto de encabezado.
Estas reglas CSS para los elementos TABLE y TD eliminan la cuadrícula predeterminada del informe.
Esta regla CSS para la clase genérica de título de informe, especifica un grosor de fuente relativa mayor y un fondo en color azul claro.
La hoja de estilos de WebFOCUS aplica esto a los títulos de las columnas del informe (consulte la línea 4).
Esta regla CSS para la clase de bajo costo, especifica el texto de color verde y el estilo de fuente cursiva.
La hoja de estilos de WebFOCUS aplica esta regla de forma condicional, a las filas del informe con un coste de unidad de producto inferior a $27 (consulte la línea 5).
La regla CSS para la clase genérica de texto de encabezado especifica la familia de fuente Times New Roman y, si ésta no estuviera disponible, la familia genérica de fuente serif. Especifica también un mayor tamaño de fuente relativa y la centralización del texto.
La hoja de estilos de WebFOCUS aplica esta regla al encabezado del informe. Anula la fuente predeterminada que se ha especificado en la regla para el elemento BODY (vaya a la línea 7).

Este procedimiento muestra el siguiente informe: