Nutzen Sie Ihre StyleVision-Designs optimal aus, indem Sie CSS-Dateien dynamisch auswählen
Eine der größten Vorteile von StyleVision ist die Flexibilität, die es bietet. Mit StyleVision können Sie visuell ansprechende Stylesheets und Berichte erstellen, die in verschiedenen Formaten ausgegeben werden können, darunter HTML, PDF und elektronische Formulare. Jetzt macht StyleVision es noch einfacher, unterschiedliche Formatierungsanforderungen in einem einzigen Design zu berücksichtigen, und zwar durch die dynamische Auswahl von CSS-Dateien – eine neue Funktion, die in StyleVision 2012 eingeführt wurde.
Obwohl Sie fast alle Formatierungsaufgaben weiterhin direkt im StyleVision-Design vornehmen können, ermöglicht die dynamische Auswahl von CSS-Dateien die Erstellung einer einzigen Vorlage, die in verschiedenen Situationen verwendet werden kann. Zum Beispiel haben wir eine Rechnung für die fiktive Firma Nanonull Corporation erstellt, bei der sich das Design je nach der Anzahl der Tage zwischen dem Rechnungsdatum und dem Fälligkeitsdatum ändert. Obwohl wir XPath verwenden hätten können, um die Formatierung jedes Elements basierend auf der Anzahl der vergangenen Tage zu ändern, ist es in diesem Fall effizienter, einzelne CSS-Dateien zu erstellen, die für verschiedene Szenarien gelten.
Im Folgenden finden Sie die Rechnung, die wir in StyleVision erstellt haben. Beachten Sie, dass sie abgesehen von den fettgedruckten Überschriften kaum Formatierungen enthält. Wir werden die Formatierung mithilfe von CSS-Dateien anpassen, basierend auf der Anzahl der Tage, die zwischen dem Rechnungsdatum und dem Fälligkeitsdatum liegen.
Jetzt können wir unsere CSS-Dateien in XMLSpy erstellen, dem XML-Editor von Altova, der eine integrierte Unterstützung für die Bearbeitung von CSS2 und CSS3 bietet.
Zuerst erstellen wir eine CSS-Datei für Rechnungen mit Fälligkeitsdaten, die nach dem Rechnungsdatum liegen (d.h. Rechnungen, die nicht überfällig sind). Hier haben wir lediglich den body-Selektor mit einem gelblichen Hintergrund sowie das Nanonull-Logo und eine Header-Klasse erstellt.
Jetzt erstellen wir ein detaillierteres CSS für überfällige Rechnungen. Der body-Selektor wird ein Bild für überfällige Rechnungen enthalten, der paragraph-Selektor wird eine fettgedruckte, rote Schriftgröße von 20 Punkt haben, und die Klassen für Überschriften und Unterüberschriften werden eine fettgedruckte, rote Schrift in verschiedenen Größen verwenden.
Jetzt können wir die CSS-Dateien dem StyleVision-Design zuordnen und anschließend Klassen verschiedenen Designelementen zuweisen.
In StyleVision können wir einfach auf "Neue CSS-Datei hinzufügen" im Bereich "Designübersicht" klicken und zu den CSS-Dateien navigieren, die wir in XMLSpy erstellt haben. StyleVision unterstützt mehrere CSS-Dateien innerhalb desselben Designs.
Unser Design sieht jetzt wie folgt aus – bitte beachten Sie, dass die Formatierungen sowohl von CSSRegular als auch von CSSOverdue in der Designansicht von StyleVision angewendet wurden.
Wir möchten jedoch die CSS-Datei basierend auf dem Abstand zwischen dem Rechnungsdatum und dem Fälligkeitsdatum zuweisen. Daher klicken wir mit der rechten Maustaste auf den Pfeil neben der CSS-Datei im Bereich "Designübersicht" und wählen die Option "Eine CSS-Datei mit XPath auswählen" (siehe unten).
Dadurch wird das Dialogfenster "CSS-Datei mit XPath auswählen" (siehe unten) geöffnet. In diesem Dialogfenster können wir XPath verwenden, um die passende CSS-Datei basierend auf dynamischen Eingaben auszuwählen. Hier haben wir StyleVision angewiesen, die CSS-Datei "CSSOverdue.css" zu verwenden, wenn das Fälligkeitsdatum der Rechnung vor dem Ausstellungsdatum liegt, und die CSS-Datei "CSSRegular.css" in allen anderen Fällen.
Hier ist der vollständige XPath-Ausdruck, den wir oben in das Dialogfenster "CSS-Datei mit XPath auswählen" eingegeben haben.
Jetzt können wir die in den CSS-Dateien definierten Klassen den einzelnen Designelementen im StyleVision-Design zuordnen.
Hier haben wir den Absatz, der den Text "Rechnung" enthält, der Klasse "Kopfzeile" im Bereich "Formatvorlagen" zugewiesen. Basierend auf dem Inhalt unserer CSS-Dateien wird dieser Text bei überfälligen Rechnungen in roter, 20-Punkt-Fettschrift und bei Rechnungen, deren Fälligkeitsdatum in der Zukunft liegt, in schwarzer, 20-Punkt-Fettschrift angezeigt.
Ebenso werden wir das Fälligkeitsdatum der Rechnung dem Klassenmerkmal "kleine Überschrift" zuordnen
Jetzt können wir die Rechnung vorab einsehen.
Im Folgenden ist eine HTML-Vorschau für eine überfällige Rechnung dargestellt. Bitte beachten Sie, dass der Text "Rechnung" und das Fälligkeitsdatum in roter, fettgedruckter Schrift angezeigt werden und dass das Bild "Überfällig" in der Mitte platziert ist.
Schauen wir uns nun dieselbe Rechnung mit einem zukünftigen Fälligkeitsdatum an – achten Sie auf den gelben Hintergrund, das Nanonull-Logo und die Tatsache, dass "Rechnung" und das Fälligkeitsdatum in Schwarz dargestellt sind.
Die Möglichkeit, eine CSS-Datei basierend auf dynamischen Eingaben auszuwählen, eröffnet eine Vielzahl von Möglichkeiten und macht Ihre StyleVision-Designs noch flexibler. Mit dieser Funktion können Sie Formatierungen in Echtzeit über die mit einem Design verknüpften CSS-Dateien ändern – besonders nützlich für Designs mit vielen Elementen.
Haben Sie ein großartiges Projekt mit dem StyleVision-Stylesheets und dem Berichtsentwurfs-Tool oder einem anderen Altova-Produkt erstellt und möchten es präsentieren? Teilen Sie Ihre Erfahrungen mit anderen Altova-Nutzern, indem Sie diesen Blogbeitrag kommentieren.
Wenn Sie glauben, dass dies eine interessante Fallstudie abgeben könnte, besuchen Sie bitte die Seite Fallstudien von Altova – wenn wir Ihre Geschichte verwenden, erhalten Sie eine Amazon-Geschenkkarte im Wert von 200 US-Dollar. Wir freuen uns darauf, von Ihnen zu hören!