x

Um einen Report mit einem externen Cascading StyleSheet (CSS) zu formatieren:

1. Geben Sie die Reportformatierung im CSS an. Legen Sie fest, welches Cascading StyleSheet Sie verwenden werden, welche seiner Regeln Default-Formatierung für Ihren Report angeben und welche seiner Klassen auf die Reportkomponenten angewendet werden können. Sie können alternativ, wenn Sie ein neues CSS erstellen, oder ein vorhandenes erweitern, neue Regeln definieren, um Formatierung für Ihren Report anzugeben. Um die Formatierung anzugeben für:
   • eine Reportkomponente, indem Sie eine Regel für eine allgemeine Klasse verwenden (d. h. jegliche Klasse, die nicht für eine Element deklariert worden ist). Ein Beispiel finden Sie unter Eine CSS-Regel für die ColumnTitle-Klasse.

     Diagramme unterscheiden sich von anderen Reporttypen. Um Formatierung für die Seite anzugeben, auf der das Diagramm angezeigt wird, oder für die Diagrammkopf- oder -fußzeile, können Sie eine Regel für das Element BODY verwenden, aber keine Regel für eine Klasse. Sie können andere Diagrammkomponenten nicht formatieren.

   • ...den gesamten Report, indem Sie eine Regel für doe BODY- oder TD-Elemente verwenden (aber nicht eine Regel für eine Klasse dieser Elemente) und den Schritt 2 überspringen. Dies ist eine effektive Methode für die Angabe eines Defaultformats für einen Report und erzeugt leistungfähigere Reportausgaben, als durch die Anwendung einer CSS-Klasse auf den gesamten Report. Ein Beispiel finden Sie unter Eine CSS-Regel für das TD-Element.

     Diagramme unterscheiden sich von anderen Reporttypen. Sie können eine Regel für das Element BODY verwenden, aber nicht für TD. Eine Regel für BODY formatiert die Seite, auf der das Diagramm angezeigt wird, sowie die Kopfzeile und die Fußzeile, aber nicht das Diagramm selbst.

   Weitere Informationen finden Sie unter Mit einem externen Cascading StyleSheet arbeiten.

2. Reportkomponenten Klassen zuweisen. Weisen Sie in einem WebFOCUS StyleSheet jeder Reportkomponente, die Sie formatieren möchten, eine Cascading-StyleSheet-Klasse zu. Geben Sie die Klasse mit dem Attribut CLASS an. Sie können jeder Komponente eine andere Klasse zuweisen und Sie können mehreren Komponenten dieselbe Klasse zuweisen.

   Ein Beispiel finden Sie unter Eine CSS-Klasse auf ACROSS-Werte in einem Report anwenden. Weitere Informationen finden Sie unter Externe Cascading StyleSheet-Formatierung anwenden.

3. Link zum CSS. Verknüpfen Sie mit dem externen Cascading StyleSheet, indem Sie die URL der CSS-Datei entweder dem Attribut CSSURL WebFOCUS StyleSheet oder dem Parameter CSSURL SET zuweisen. Eine Anleitung finden Sie unter Das CSSURL-Attribut und den CSSURL-Parameter verwenden.

   Es gibt eine Ausnahme. Wenn Sie die Reportausgabe in eine vorhandene HTML-Seite mit dem Befehl -HTMLFORM einbetten, nehmen Sie in diese HTML-Seite ein LINK-Element auf, anstatt CSSURL einzustellen.

   Ein Beispiel finden Sie unter Einen Link mit dem externen Cascading StyleSheet ReportStyles erstellen. Weitere Informtionen finden Sie unter Mit einem externen Cascading StyleSheet verknüpfen.

Probleme? Falls Sie auf Probleme stoßen, schlagen Sie unter Fehlerbehebung bei externen Cascading StyleSheets nach.

x

Diese Cascading-StyleSheet-Regel (CSS) erklärt ColumnTitle zu einer generischen Klasse (eine Klasse, die nicht an ein Element gebunden ist):

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

Ein umfangreicheres Beispiel, in dem ein vollständiges externes Cascading StyleSheet, eine Reportprozedur mit einem eingebetteten WebFOCUS StyleSheet und erzeugte Reportausgabe zu sehen ist, finden Sie unter Einen Report mit einem externen CSS formatieren.

x

Diese Cascading StyleSheet-Regel für das TD-Element gibt die Schriftartfamilie für das Element an:

TD {font-family:helvetica}

Da diese Regel für das TD-Element gilt, wird ihr Format auf den gesamten Report angewendet und nicht nur auf die Komponente des Reports.

Ein umfangreicheres Beispiel dafür, wie Sie eine Regel für das Element TD verwenden, um allgemeine Reportformatierung bereitzustellen, finden Sie unter Einen Report mit einem externen CSS formatieren.

x

Diese WebFOCUS StyleSheet-Deklaration formatiert ACROSS-Werte, indem die Formatierung für die ColumnTitle-Klasse angewendet wird:

TYPE=AcrossValue, CLASS=ColumnTitle, $

Ein umfangreicheres Beispiel, in dem ein vollständiges externes Cascading StyleSheet, eine Reportprozedur mit einem eingebetteten WebFOCUS StyleSheet und erzeugte Reportausgabe zu sehen ist, finden Sie unter Einen Report mit einem externen CSS formatieren.

x

Diese WebFOCUS StyleSheet-Deklaration ist mit dem externen Cascading StyleSheet ReportStyles verknüpft:

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

Sie könnten dasselbe mit dem SET-Befehl durchführen.

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

Wenn Sie alternativ Ihre Reportausgabe mit -HTMLFORM in eine vorhandene HTML-Seite einbetten möchten, müssen Sie den Link angeben, indem Sie das Element LINK auf der HTML-Seite codieren, in die der Report eingebettet wird, anstatt CSSURL einzustellen:

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

Ein umfangreicheres Beispiel, in dem ein vollständiges externes Cascading StyleSheet, eine Reportprozedur mit einem eingebetteten WebFOCUS StyleSheet und erzeugte Reportausgabe zu sehen ist, finden Sie unter Einen Report mit einem externen CSS formatieren.

Nach oben

Beispiel: Einen Report mit einem externen CSS formatieren

Dieser Report zeigt die Produkte an, die derzeit von Gotham Grinds angeboten werden, und wird mit einem externen Cascading StyleSheet (CSS) formatiert. Der Report ist so formatiert, dass:

• Seine Deaukl-Schriftart ist Arial.
• Die Reportkopfzeile überschreibt den Default mit einer Schriftartfamilie von Times New Roman. Die Kopfzeile hat auch eine größere Schrift und ist zentriert.
• Alle Spaltentitel werden in fett gedruckt und besitzen einen leicht blauen Hintergrund.
• Wenn der Stückpreis eines Produkts kleiner ist als $27, zeigt der Report diese Produktzeile grün und kursiv an.

Die Reportanfrage und das Inline-WebFOCUS StyleSheet sind in der folgenden Prozedur zu sehen (curprods.fex). Das externe Cascading StyleSheet namens report01.css folgt der Prozedur.

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}

1. Beginnen Sie mit dem Inline-WebFOCUS StyleSheet.
2. Zum externen Cascading StyleSheet report01.css verlinken.
3. Den Report mit der Cascading StyleSheet-Regel für die Klasse headText verlinken.
4. Formatieren Sie die Reportspaltentitel mit der CSS-Regel für die Klasse reportTitles.
5. Formatieren Sie jede Reportzeile, in der die Stückkosten für das Produkt kleiner als $27 sind, mit der CSS-Regel für die Klasse lowCost.
6. Beenden Sie das Inline-WebFOCUS StyleSheet.
7. Diese CSS-Regel für das BODY-Element spezifiziert die Schriftart Arial und, falls Arial nocht verfügbar ist, die allgemeine Schriftart Sans Serif.

   Da dies eine Regel für BODY ist, wird sie auf den gesamten Report angewendet: jeglicher Text im Report wird per Default in Arial angezeigt. Sie können dies für eine bestimmte Reportkomponente überschreiben, indem Sie eine Regel für eine generische Klasse auf diese Komponente anwenden. Dies wird in dieser Prozedur mit der Regel für die Klasse headText getan (siehe Zeile 11).

8. Diese CSS-Regeln für die Elemente TABLE und TD entfernen das Defaultraster des Reports.
9. Diese CSS-Regel für die generische Klasse ReportTitles gibt eine fettere Schriftart und einen hellblauen Hintergrund an.

   Das WebFOCUS StyleSheet wendet dies auf die Reportspaltentitel an (siehe Zeile 4).

10. Diese CSS-Regel für die generische Klasse lowCost gibt die Textfarbe Grün und den Schriftstil kursiv an.

    Das WebFOCUS StyleSheet wendet diese Regel bedingt auf Reportzeilen an, in denen die Stückkosten für das Produkt kleiner als $27 sind (siehe Zeile 5).

11. Die CSS-Regel für die allgemeine Klasse headText spezifiziert die Schriftart Times New Roman und , falls diese nicht verfügbar ist, die allgemeine Schriftart Serif. Es gibt außerdem eine größere relative Schriftgröße und zentrierte Ausrichtung an.

    Das WebFOCUS StyleSheet wendet diese Regel auf die Reportkopfzeile an. Es überschreibt die Default-Schriftart, die in der Regel für das BODY-Element angegeben wurde (siehe Zeile 7).

Die Prozedur zeigt diesen Report an: