Teil 2: Das CSS-Generator-Starterpack

Bei der Auswahl der Formatierungsmöglichkeiten werden zwei Techniken eingesetzt. Für die meisten Einstellungen reicht ein Listenfeld völlig aus. Nur im Bereich der Farbauswahl der Standardfarben liegt es nahe, die Farben in einzelnen Vorschaufeldern darzustellen und die Wahl der Farbe mit einem einfachen Mausklick auf das Farbfeld zu tätigen. Der Ordnung halber sind die Betitelungen der Formatierungen und die Klapplisten mit den möglichen Werten in einer HTML-Tabelle dargestellt.

Das Generieren der Listenfelder bräuchte unter HTML viele Zeilen Quellcode, allein die Erfassung von 30 oder mehr Schriftgrößen verlangte eine entsprechende Menge an Quellcodezeilen, da jede Schriftgröße in einer separaten Options-Klammer codiert werden müsste. Wir umgehen diese Textflut mit einfachen Skriptbrocken aus JavaScript, die in Laufanweisungen die Optionen jeder einzelnen Formatierung automatisch generieren. Die Skriptbrocken sind direkt im Bodybereich der HTML-Seite zu finden und zwar genau dort, wo sie den nötigen HTML-Code erzeugen sollen.

Das Beispiel der Schriftauswahl zeigt das Verfahren. Im Array "stand["schriftart"]" sind alle definierten Fonts enthalten. Die Standardschrift Times wurde zu Beginn des Skripts hier abgelegt. "schriftenlaenge" enthält die Anzahl der Schriften, die Sie für die Gestaltung verfügbar machen wollen. Die Laufanweisung erzeugt demnach genau so viele Options-Klammern, wie Schriften erfasst wurden. In der document. write-Anweisung wird für jede Schriftart die entsprechende Optionsklammer erzeugt. Den Value und den angezeigten Namen jeder Option nimmt die Laufanweisung aus dem anfangs definierten Array mit der Font-Liste.

Zusätzlich ist an dieser Stelle eine Variable namens "sel" (selected) im Einsatz. Bei jedem Durchlauf kontrolliert die Laufanweisung, ob die Schriftart aus dem Array gleich der zur Zeit definierten Schriftart im Array "stand["schriftart"]" ist. Das ist genau in einem Fall so. Genau dann wird der Variablen "sel" der Wert "selected" zugewiesen, andernfalls bleibt die Variable leer. "sel" taucht in jeder Optionsdefinition auf und stellt somit sicher, dass die eingestellte Standardschrift im Listenfeld angezeigt wird Diese Technik des schnellen Codierens umfangreicher Listenfelder finden Sie im CSSGenerator für fast alle Einstellungen. Wenn es um Zahlenwerte geht - wie bei der Definition der Schriftgröße oder der des Zeilenabstandes, so greift die Laufanweisung nicht auf Inhalte von definierten Arrays zu, sondern arbeitet einfach mit den Werten der Laufvariablen "i". Sie können in diesen Fällen die Anzahl der angezeigten Optionen in den Listenfeldern über die Laufanweisung bestimmen. Sollen das Schriftgrößen von 1 bis 1000 sein, lassen Sie die Laufanweisung einfach von 1 bis 1000 durcharbeiten.

Änderung bei Änderung

Jede Liste steht in der notwendigen <SELECT>- Klammer von HTML. Der Wert "size" jeder <SELECT>-Klammer ist auf "1" eingestellt. Das bedeutet, dass genau eine der gespeicherten Optionen auf der Webseite dargestellt wird. In dieser Grundeinstellung wird die bekannte Klappliste generiert. Um auf die weiteren Optionen zugreifen zu können, muss der Benutzer die Klappliste öffnen und die Auswahl treffen. Werte größer als 1 sorgen dafür, dass entsprechend viele Optionen untereinander in einem geöffneten Listenfeld erscheinen.

Jede <SELECT>-Klammer wird über eine ID mit einem eindeutigen und plausiblen Namen versehen. Über diese Namenskennung greift das Skript später auf die über das Listenfeld definierten Einstellungen zu. Damit überflüssige Mausklicks vermieden werden, ist jede Klammer mit einem onChange-Befehl versehen. Dieser Eventhändler prüft, ob im Listenfeld die Auswahl der Option verändert wurde. Ist das der Fall, wird im CSS-Generator eine JavaScript-Funktion namens "aendern()" aufgerufen. Der Funktion werden zwei Parameter übergeben. Der erste ist der Name des Select- Listenfeldes, der über ID definiert wurde. Der zweite Parameter ist die Indexbezeichnung des assoziativen Arrays, das jene Einstellungen beinhaltet, die über das Listenfeld verändert werden sollen.

Die Funktion muss aufgrund der definierten Arrays nicht viel Arbeit verrichten. Sie unterscheidet lediglich, ob ein Parameter aus einem Listenfeld verarbeitet werden soll oder ob es sich um eine Farbänderung handelt. Die Farbänderung per anklickbarer Felder wird später nicht mit Formularelementen aus HTML durchgeführt. Der bei dieser anderen Technik eingesetzte Funktionsaufruf übergibt einen dritten Wert (farbe), mit dessen Hilfe die Funktion unterscheiden kann, ob die Werte aus einem Formularfeld kommen oder nicht. Die Listenfelder werden im ELSE-Zweig dieser IFAbfrage verarbeitet.

In der lokalen Variablen "was" wird aufgrund des Funktionsaufrufes der Index-Wert des assoziativen Arrays übergeben. In "wie" steht der Name der ID des Listenfeldes, aus dem die neuen Werte übernommen werden sollen.

Die Funktion macht nichts weiter, als das entsprechende assoziative Array mit dem neuen Wert zu füllen. Damit ist dann die Veränderung eines Parameters geschehen.

Vorschau und Quellcode

Die Veränderung muss jetzt noch im Vorschau- und im Quellcodebereich angezeigt werden. Das übernimmt die Funktion "neuschreiben()". Da es programmiertechnisch viel zu kompliziert wäre, eine Veränderung an genau einem Parameter in den beiden Fenstern vorzunehmen - es müssten eine Reihe von Abfragen und Stringoperationen durchgeführt werden -, geht die Funktion den einfachen Weg. Anstatt selektiv einen Parameter ausfindig zu machen und diesen zu verändern, wird einfach der gesamte Quellcode für die Vorschau und den Quelltext komplett neu aufgearbeitet.

Der Beispieltext im Vorschau-DIV kann über die dem DIV zugewiesene ID namens "wy siwyg" leicht formatiert werden. Jeder verfügbare CSS-Parameter wird der Reihe nach neu zugewiesen. Dazu arbeitet die Funktion mit der "document.getElementByID"-Methode. Die entsprechenden Style-Einstellungen werden jeweils aus dem assoziativen Array übernommen. Neue Parameter interpretiert der Browser sofort und stellt den Beispieltext in der überarbeiteten Fassung unmittelbar dar.

Der Quellcode wird in der Variablen "ausgabecode" zusammengesetzt. Jede Zeile CSSCode setzt die Funktion aus dem Klartextnamen des CSS-Befehls und dem zugehörigen Wert aus dem entsprechenden assoziativen Array zusammen. Nach jeder Zeile wird ein <br> gesetzt, damit die Auflistung der CSS-Parameter zeilenweise im Quellcodebereich erscheint. Der Quellcodebereich ist mit der ID "code" benannt. Nach vollständigem Zusammensetzen des Quellcodes wird dieser einfach mit der innerHTML-Methode in das DIV geschrieben. Die alte Version des Quellcodes wird dabei überschrieben.

Farben in allen Schattierungen

Bei der Farbeinstellung liegen zwei unterschiedliche Techniken vor. Die Farbdefinition per Hexadezimalwert findet in den bekannten Listenfeldern statt. Jede der sechs Ziffern des hexadezimalen Wertes kann dabei separat eingegeben werden. Die Änderung der Farbwerte in diesem Fall übernimmt eine Funktion namens "farbaenderung()". Die Namen der sechs Klapplisten wurden für Schriftund Hintergrundfarbe mit einem eindeutigen Schema vergeben. So lauten die IDs für die Schriftfarbe sf1 - sf6 und die für die Hintergrundfarbe hf1-hf6. Bei Änderung eines Wertes aus diesen Listenfeldern wird entweder "sf" oder "hf" als Kennung übergeben. Die Funktion ist damit in der Lage, in einer einfachen Laufanweisung die IDs, die benötigt werden, zusammenzusetzen und die entsprechenden Hexadezimalziffern aus den richtigen Listenfeldern zu holen. Die sechs Ziffern werden einfach zusammen mit den Doppelkreuz im String "farbwert" zusammengesetzt und dem entsprechenden assoziativen Array als neue Farbmischung zugewiesen. Auch hier endet die Funktion mit dem Aufruf der Funktion "neuschreiben()", die den aktuellen Stand in Vorschau und Quelltext anzeigt. Etwas anders ist das Verfahren bei der Auswahl der Farbe durch Klicken auf ein Farbfeld. Es sind 16 Farbfelder unterzubringen, eine Anordnung in vier Reihen zu vier Feldern bietet sich an. Damit keine unnötigen Grafiken mit ins Spiel kommen, arbeitet der CSS-Generator an dieser Stelle mit einer einfachen HTML-Tabelle, die aus vier Reihen und vier Spalten besteht. Den Aufbau der Zellen übernimmt eine doppelte JavaScript-Laufanweisung. Die erste Laufanweisung definiert die Zeilen, die zweite die Zellen innerhalb der Zeilen.

Wie bei den Optionsfeldern wird einfach der Quellcode für die einzelnen Zellen mit dem "document.write"-Befehl durch Zusammensetzen von Klartext und Variablen-Werten generiert. Jede einzelne Zelle erhält eine andere Hintergrundfarbe. Die Farben entnimmt das Skript aus dem zu Beginn definierten Array, in dem die HTML-Farbnamen abgelegt wurden. Im Array sind die Farbnamen unter den Indexnummern 1-16 gespeichert. Diese Werte müssen von der zweiten Laufanweisung berechnet werden. Laufanweisung 1 mit der Laufvariablen "i" arbeitet die Werte 1-4 durch, die zweite mit der Laufvariablen "j" die Werte 0-3. Um daraus die Ziffern 1-16 fortlaufend zu generieren, setzt die Funktion die einfache Formel i + j * 4 ein. Sie sorgt als Indexwert dafür, dass die fortlaufend gespeicherten Farbwerte der richtigen Zelle zugewiesen werden. Den Aufruf der Veränderungsfunktion übernimmt in diesem Fall das Event OnClick, das in jede Zelle integriert wird. Da es sich bei Zellen nicht um Formularelemente handelt, muss anders als bei den Listenfeldern der Wert der Farbe und nicht die Adresse des Formularfeldes an die Änderungsfunktion übergeben werden. Damit die Funktion das weiß, wird als dritter Übergabeparameter einfach eine 1 übermittelt. Mithilfe der If-Abfrage kann dann der korrekte Parameter eingesetzt und die Aktualisierung des Vorschautextes und des Quellcodes vorgenommen werden.

Anpassungen

Möchten Sie das Programm erweitern, müssen Sie diese Zusätze in das Skript aufnehmen:

1. ein neues assoziatives Array definieren

2. ggf. ein Array mit CSS-Vorgaben definieren

3. Klappliste für die Optionen generieren

4. die Funktion „neuschreiben()“ um den neuen Parameter ergänzen.