Jetzt plane ich die Arbeit für Version 0.0.6 irgendwann man zu beginnen

Die Arbeitsversion 0.0.5 Version wird hochgeladen. Es ist ein Prototyp, der beim svt-Viewhelper und seiner darunterliegenden Klasse verschiedene Steuerklassen enthält. Ich denke, Da ich mit dem render-Viewhelper einfacher und Update-sicherer das erreiche, was ich haben wollte - eine Möglichkeit zum Überladen von Partials. Werde ich es vielleicht später einmal zurückbauen.

Angesichts der Stunden von Arbeit, die ich in die svt-Builder-Klasse hineingesteckt habe, ist es traurig, aber "Wer die falschen Fragen stellt, erhält immer falsche Antworten - auch bei hohem Aufwand." Ich machte also die Erfahrung, die zum Beispiel den Computermodell-Forschern zum menschengemachten(!) Klimawandel aus meiner Sicht noch bevorsteht. Für mich sind deren Ergebnisse so glaubwürdig wie die Prognosen von Astrologen, deren Modelle ja auch auf Computerberechnungen basieren. Klimawandel gab es schon viele auf der Erde, wie die Relikte der letzten Eiszeit zeigen.

svt-Viewhelper - beispielhaft vorgestellt

20170929 - Anmerkung

Der Text befindet sich in der Überarbeitungsphase und enthält viele Rechtschreib-, Logik- und Satz-Fehler. Ich bitte dies zu entschuldigen,aber meine Rechtschreibung ist seit der Grundschule phantasievoll geblieben. ;-).

Inhaltsverzeichnis

  • 1. SVT ist ganz einfach
  • 1.1. SVT ein kleine Beispiel
  • 1.2. Nachbemerkung
  • 2. Weiterlesen lohnt nicht: Vorwort zu version 0.0.5.
  • 3. Nutzmöglichkeiten von SVG
  • 3.1. Didaktische Vorbemerkung
  • 3.2. Einfache Formen
  • 3.2.1. Rechteck und Pfade
  • 3.2.2. Kreis, Elipse, Pfade (+ Browserfehler)
  • 3.3. Mächtige Formen
  • 3.3.1. Linien, Polylinien und Pfade
  • 3.3.2. ... Strategie-Idee für SVG
  • 3.4. svt-Anwendungsidee Diagramm als statisches Beispiel
  • 3.4.1. Balkendiagramm
  • 3.4.2. Tortendiagramm
  • 3.5. Rechnen mit calculate im View
  • 3.x. Nachsatz
  • 4. Beispiele für Diagramme
  • 4.1. Generisches Piktogramm für Stoffnachweise
  • 4.x. Nachsatz
  • 5. Unterstellter Workflow & Einleitung
  • 5.1. Didaktische Hilfe
  • 5.2. Kreative Aspekte
  • 6. svt:svt versus f:image
  • 6.1. SVG eingekapselt im img-Tag dank <f:image>
  • 6.2. SVG mit Link und "hover"-Pfütze dank <svt:svt>
  • 7. Die Flagge der DDR bearbeitet mit svt:svt
  • 7.0.1. Technik trifft Politik
  • 7.1. Hinweise zur Dokumentation
  • 7.2. Erste dynamische Manipulationen am SVG-Code
  • 7.2.1. Flagge - img-Tag erstellen in zwei Varianten
  • 7.2.2. Flagge - SVG-Code inline mit svt-Viewhelper
  • 8. Manipulatoren im svt-Viewhelper - Ihre Vielfalt der Möglichkeiten
  • 8.1. Mind-Map definiert Konfigurationsarray
  • 8.2. svg-Manipulatoren - Reihenfolge der Abarbeitung
  • 8.3. Nutzung von remove-Manipulator in svt-Viewhelper
  • 8.4. Nutzung von Suchen-Ersetzen in prepare-Manipulator in svt-Viewhelper
  • 8.4.1. Nutzung von Suchen-Ersetzen in workOver-Manipulator in svt-Viewhelper
  • 8.5. In rebuild auf einzelner Knoten mit "xPath" zugreifen
  • 8.5.1. SVG mit rebuild-Manipulator einfach ändern
  • 8.5.2. SVG mit mehreren xPathes und rebuild-Manipulator Anweisungen reduziert
  • 8.5.3. SVG mit rebuild-Manipulator, um ein Bild erweitern
  • 8.6. Wiederholungen - nein, Nutzung von JSON oder PHP (Err: nicht angepasst 20170908).
  • 8.7. ... und der compress-Manipulator zum Schluss
  • 9.8. Weitere svt-Viewhelper Optionen vereinfachen Beschreibung der Manipulatoren
  • 9.10.. Per Default aktive Manipulatoren
  • 10. Fehlerhafter Konfiguration und das svt-Attribut infoConfigError
  • 10.1. Wie mit einer fehlerhafter Konfiguration umgehen?
  • 11. Ihre Unterstützung
  • 11.1. Mein Shop
  • 11.2. Hinweis auf das Impressum
  • 12. Ein Abschlussstatement - noch ein bissChen mehr Politik
  • 12.1. Was ich mir für die Zukunft wünsche
  • 12.2. Was ich mir für die Zukunft NICHT wünsche

Beschreibung

1. SVT ist ganz einfach

Kreativität ist planbar, aber nicht steuerbar

Die Psychologin Magret A. Bode definierte in "Die Fluegel des Geistes. Kreativitaet und Kuenstliche Intelligenz" Kreativität als die Fähigkeit, eigene Grenzen und Beschränkungen zu überwinden, wobei Sie zwischen historischer - also eine für die Menschheit neue Erkenntnis - und individueller Kreativität - also für eine Person neue Erkenntnis - unterschied. Auch wenn bestimmte Rahmenebedingungen das Entstehen von Kreativität fördern und vorantreiben können, sind die Wege der Kreativität nicht wirklich planbar.

Mit Name svt für den Viewhelper repräsentiert einer meiner Kreativitätsschritte. svt steht für sexy variable template und steht für die Erkenntnis, dass SVG eine Markupsprache für Templates vom zweidimensionalen 'Plotter'-Typ ist. (HTML ist eine Markupsprache für Templates vom linearen 'Nadeldrucker'-Typ.)

Beispiel für einen Kreativitätsschritt

Einen zweiten Kreativitässchritt hatte ich kürzlich, als ich mich mit der Frage beschäftigte, wie ich mit dem svt-Viewhelper auch Diagramme herstellen könnte. Ich merkte, dass ich Sprachkonstrukte brauchen würde, die viel Ähnlichkeit mit TypoScript hat. Da TypoScript eher unübersichtlich & schlecht ist und die Programmierung unübersichtlich zu werden drohte, wuchs mein Unbehagen. Der Lösungsweg fühlte sich falsch an, denn komplizierte Lösungen sind fast sicher immer Antworten auf falsch gestellte Fragen.

Ich hinterfragte also nocheinmal, was ich überhaupt haben wollte. Ich fragte, was einen normalen Teaser von meinem supertollen svt-Teaser unterscheiden würde:

- Ein plakativer Teaser ist eine Komposition aus Slogan, Teaser-Text mit Link und Bild in einem statischen Partial.
- Ein toller svt-Teaser ist eine Komposition aus Slogan, Teaser-Text mit Link und Bild in einem wählbaren Partial.

Der eigentliche Unterschied liegt also nicht im Austausch von HTML und SVG, sondern in Übersteuern von Fallback-Teasern. Irgendwann dämmerte es mir, dass ich meinen svt-Viewhelper wegschmeißen muss. Statt einer eigene Rendering-Maschine muss Fluid nur leicht erweitert werden. Der Render-Viewhelper müsste das Übersteuern seines Partials durch alternativer Fluid-Teaser erlauben. Ob der Fluid-Teaser nun SVG oder HTML als Markup-Sprache verwendet ist dem Fluid ziemlich egal.

Nachdenken über die Idee
  • Eine Konsequenz ist, dass svt-Viewhelper als Umweg-Entwicklung überflüssig wird. Er ist wegzuschmeißen.
  • Das Fluid kennt For-Schleifen und kann also auch für Diagramme etc verwendet werden.
  • Das Verfahren ist Redakteurs-sicher, da technisch immer ein Fallback-Template existieren muss.
  • Diagramme brauchen Berechnungen, die innerhalb des Fluid mit dem entwickelten calculate-Viewhelper erledigt werden können.
  • Die Einbindung von Templates über das FAL erlaubt, zeitgesteuerte Nutzung von Hiftemplates.

1.1. SVT ein kleine Beispiel

Die Planung

Die Extension horny-shit bzw. die dockumentationsfreie TER-Version svt legen in der Pages-Tabelle eine Spalte für Alternative Templates an. Es ist ein TypoScript angegeben, dass einen Link auf ein Template zur Verfügung stellt. So kann man alternative Template für Seiten bekanntgeben und gleichzeitig im File-Modul festlegen, ob bzw. in welchem Zeitraum TYPO3 die Dateien nutzen darf. die Variation von Templates für die Weihnachtszeit, für Ostern, ... wird leicht möglich, wenn die Konzepter, Designer und Layouter es denn dann bedacht haben.

Das Vorgehen SVG-Teaser

Für den Test wird das Beispiel mit dem Balken-Diagramm genommen, dass im Alternativ-Fall in Tortenform dargestellt werden soll. Die Objekte werden hier mit dem <f:alias> simuliert.

Tortendiagram- Musterkonstruktion

Die folgenden Beispiele sollten identisch aussehen und unterscheiden sich in der Art der Konstruktion der Troten-Anordnung.

TestMuster für Ohne-Register

TestMuster für Mit-Register

Balkendiagramm nur mit Teaser-Fallback

207 287 97

Balkendiagramm nur mit Alternaitve-Teaser

207 287 97

Balkendiagramm nur mit Teaser-Fallback wegen fehlerhafter Alternativ-Datei

207 287 97

Tortendiagramm nur mit Alternaitve-Teaser

Tortendiagramm nur mit Alternaitve-Teaser und Register

(Torten)-Diagramm mit Alternaitve-Teaser aus FAL

TypoScript 'lib.svt.alternativeTeaser' holt die Id der Filereference

Resultat ist die Uid in sys_filereference: ""

Es hat Stunden gedauert, die richtigen Zeilen TypoScript-Code für eine Zeitschaltung von Templates zu finden, da einige Beispieleaus der Dokukmentation nicht funktionierten, da die Beschreibung der TypoScript-Funktionalität und seiner Abhängigkeiten und impliziten Voraussetzungen unverständlich beschrieben ist und da TypoScript mit hilfreichen Fehlermeldungen sehr, sehr, wirklich sehr sparsam umgeht.

Vielleicht gibt es ja bald eine Timer-Funktionalitä auf Resourcen-Ebenen.

(Torten)-Diagramm mit nicht existierene Alternaitve-Teaser aus FAL (=> Default-Fall)

207 287 97

(Torten)-Diagramm aus Seiteneigenschaften (svt-falsch)

207 287 97

(Torten)-Diagramm aus Seiteneigenschaften (svt-richtig)

207 287 97

(Torten)-Diagramm aus Seiteneigenschaften (svt-Weihnachten)

207 287 97

(Torten)-Diagramm aus Seiteneigenschaften (hornyshit-falsch)

207 287 97

(Torten)-Diagramm aus Seiteneigenschaften (hornyshit-richtig)

207 287 97

(Torten)-Diagramm aus Seiteneigenschaften (hornyshit-Weihnachten)

207 287 97

<f:alias map="$#123; myData: $#123;   1 : $#123; uid: '1', value : '207', fill:'darkred'$#124;,
                            2 : $#123; uid: '2', value : '287', fill:'darkblue'$#124;,
                            3 : $#123; uid: '3', value : '97',  fill:'gold'$#124;
                    $#124;,
                baseInfo : $#123;fill : 'green', stroke: 'darkblue', prefix: 'special'$#124;,
                myTemplatePath: '/typo3conf/ext/horny_shit/Resources/Private/Partials/Content/B1BalkenSvg.svg',
                myErrorPath: '/typo3conf/ext/horny_shit/Resources/Private/Partials/Content/ErrorB1BalkenSvg.svg',
                myTortenPath: '/typo3conf/ext/horny_shit/Resources/Private/Partials/Content/B1TorteSvg.svg'
          $#124;"
>
    <h5>Balkendiagramm nur mit Teaser-Fallback </h5>
    <p><hornyShit:render partial="Content/A1BalkenSvg.svg"
                         section="Main"
                         arguments="$#123;myData : myData$#124;" /></p>
    <h5>Balkendiagramm nur mit Alternaitve-Teaser</h5>
    <p><hornyShit:render partial="Content/A1BalkenSvg.svg"
                         section="Main"
                         altPartialSrc="$#123;myTemplatePath$#124;"
                         arguments="$#123;myData : myData$#124;" /></p>
    <h5>Balkendiagramm nur mit Teaser-Fallback wegen fehlerhafter Alternativ-Datei</h5>
    <p><hornyShit:render partial="Content/A1BalkenSvg.svg"
                         section="Main"
                         altPartialSrc="$#123;myErrorPath$#124;"
                         arguments="$#123;myData : myData$#124;" /></p>
    <h5>Tortendiagramm nur mit Alternaitve-Teaser</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialSrc="$#123;myTortenPath$#124;"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
    <h5>(Torten)-Diagramm mit Alternaitve-Teaser aus FAL</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialObject="$#123;images.0$#124;"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />

    <h4>TypoScript 'lib.svt.alternativeTeaser' holt die Id der Filereference</h4>
    <p>Resultat ist die Uid in sys_filereference: &quot;$#123;f:cObject(typoscriptObjectPath:'lib.svt.alternativeTeaser')$#124;&quot;</p>
    <p>[...]</p>
    <h5>(Torten)-Diagramm mit nicht existierene Alternaitve-Teaser aus FAL (=> Default-Fall)</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialObject="$#123;images.1$#124;"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
    <h5>(Torten)-Diagramm aus Seiteneigenschaften (svt-falsch)</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialSrc="$#123;f:cObject(typoscriptObjectPath:'lib.svt.alternativePagePartial')$#124;"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
    <h5>(Torten)-Diagramm aus Seiteneigenschaften (svt-richtig)</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialSrc="$#123;f:cObject(typoscriptObjectPath:'lib.svt.alternativePagePartial')$#124;"
                          treatIdAsReference="1"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
    <h5>(Torten)-Diagramm aus Seiteneigenschaften (svt-Weihnachten)</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialSrc="$#123;f:cObject(typoscriptObjectPath:'lib.svt.altPartialChristmas')$#124;"
                          treatIdAsReference="1"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
    <h5>(Torten)-Diagramm aus Seiteneigenschaften (hornyshit-falsch)</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialSrc="$#123;f:cObject(typoscriptObjectPath:'lib.hornyshit.alternativePagePartial')$#124;"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
    <h5>(Torten)-Diagramm aus Seiteneigenschaften (hornyshit-richtig)</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialSrc="$#123;f:cObject(typoscriptObjectPath:'lib.hornyshit.alternativePagePartial')$#124;"
                          treatIdAsReference="1"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
    <h5>(Torten)-Diagramm aus Seiteneigenschaften (hornyshit-Weihnachten)</h5>
    <p>
        <hornyShit:render partial="Content/A1BalkenSvg.svg"
                          section="Main"
                          altPartialSrc="$#123;f:cObject(typoscriptObjectPath:'lib.hornyshit.altPartialChristmas')$#124;"
                          treatIdAsReference="1"
                          arguments="$#123;   myData  :   myData,
                                        baseInfo:   baseInfo$#124;"
        />
    </p>
</f:alias>
        

1.2. Nachbemerkung

Falsche Fragen führen immer zu falschen Antworten - egal wie groß das Bemühen ist

So wie ein glatter Spiegel nur mit drei Scheiben herzustellen ist, so braucht konstruktive Kreativität immer den Einfluss von Beispielen, Theorien und Fragen. Ich habe am Anfang das gefühl, dass man mit SVG sehr gut im Frontend arbeiten könnte. Ich musste aber mehrfach meine Fragen neu stellen. Ein Bruch ergab sich aus dem Konflikt, ob SVG eine Markup-Sprache für Graphiken oder für Templates ist. Ein zweiter Bruch ergab sich aus der Frage, ob man einen eigenen Mechanismus braucht, um Templates zu generieren oder ob es reicht, Bestehende für HTML-Render-Mechanismen aus SVG loszulassen.

Die aktuelle Erweiterung des f:render-Viewhelper für alternative Partials kann man natürlich auch für HTML-Dateien verwenden. die bisher geübte Praxis der statischen Templates beschneidet die Nutzer in den Möglichkeiten. Man kann leicht Webseiten bauen, die Weihnachten, Neujahr, Ostern anders aussehen als den Rest des Jahres. Die Extension "horny_shit" war, wenn man vom calculate-Viewhelper absieht, eher 'shit', weil die svt-KLasse nur die falsche Antwort auf eine falsche Frage war.

Solche Fehler sind Teil des kreativen Prozesses

Version 0.0.5 bleibt experimentell, weil ...

Da der render-Viewhelper noch nicht vollständig getestet ist und der svt-Viewhelper noch nicht entfernt ist, ist die aktuelle Version immer noch als experimentell gekennzeichnet. Analoges gilt auch für die Extension svt, die den wenig getesteten Render-Viewhelper enthält. - Wahrscheinlich/Vielleicht ist er bald sowieso obsolet, weil TYPO3/Fluid die Idee übernimmt und ordentlich testet, denn variable Alternativ-Partials sind ein coole Optionen für variable zeitgesteuerte Webseiten.
Wie hieß es doch vor Jahren bei 'den Prinzen' so schön klingend: ... ist alles nur von Andern.....

2. Weiterlesen lohnt nicht: Vorwort zu version 0.0.5.

0.0.1. Hinweis: 1.

Die aktuelle Version 0.0.4 ist noch im Status EXPERIMENTELL.
Das grundsätzliche Konzept wird vermutlich erhalten bleiben, aber es fehlen noch ein Vielzahl von Tests für die einzelnen Funktionen der svtService-Klassen. Bisher ist nur gegen das vorliegende Plugin mit seinen Fällen getestet worden.

0.0.2. Hinweis: 2.

Die aktuelle Version 0.0.4 enthält zusätzlich einen Viewhelper für Berechnungen <hornyShit:calculate>. Der ist zahlreiche Tests abgesichert und sollte jeden beliebigen String entweder korrekt berechnen können oder - falls freigeschaltet - eine Fehlermeldung geben.
Im Falle von Fehlern bitte ich, mir eine Mail (info@mobger.de) zusenden, damit ich den Fehler korrigieren und die Unittests erweitern kann.
Eine weitere Begrenzung ergibt sich aus den Zahlenraum, in welchen PHP seine Berechnungen ausführen kann. Ich habe nie ausgetestet, was bei zu großen oder zu kleinen Zahlen passiert. Der Mailaufruf gilt auch für den Fall, dass wichtige unitäre oder binäre Operatoren fehlen und nachgepflegt werden sollen. Bitte begründen.

0.0.3. Hinweis: 3.

Das Plugin der aktuelle Version 0.0.4 ist nur provisorisch. Es enthält logische Brüche und didaktische Ungereimtheiten. Sorry, aber im Moment erscheint mir das Testen noch wichtiger als didaktisches Refactoring.

0.0.4. Hinweis: 4.

Die Angaben in Kapitel 5.x stimmen noch nicht mit der neuen Struktur überein. Sie werden zeitnah nachgepflegt. Das Placeholder-Konzept ist in den Beispielen des Plugins noch nicht integriert, weshalb eine Flaggen falsch dargestellt werden..

0.0.5. Hinweis: 5.

Beim Nachdenken fiel auf, dass aktuell noch ein Loop-Konzept fehlt, um mit TYPO3 zum Beispiel dynamisch Balkendiagramme zu konstruieren. Hier muss ich noch einwenig über die Implikationen nachdenken.

3. Nutzmöglichkeiten von SVG

Links zu guten technischen Tutorials
Anwendungsaspekte

Mir sind eine ganze Reihe von guter Tutorials aufgefalle, die die technisches Aspekte von SVG erläutern. Mir ist aktuell (2017/08/18) aber kein Tutorial bekannt, dass Heuristiken und Herangehensweisen beschreibt, wie man SVG als Markup-Sprache im produktiven Betrieb einsetzen könnte. auch wenn das Tutorial von mediaevent in die Richtung geht. Mit meinen Erläuterungen für den svt-Viewhelper habe ich weniger die Technik im Blick, als vielmehr die Anwendung für prdoktive dynamische Systeme. Als Anwendungen habe ich folgendes im Hinterkopf:

  • Montage-Anleitungen
  • Eye-Catcher für Internet-Shops
  • Text-Bild-Collagen, Teaser, Plakate
  • Info-Grafiken & Diagramme
  • ...

Wenn Ihnen bestimmte Aspekte fehlen, werde ich mich über eine Hinweis-Mail freuen. Wenn es thematisch passt, werde ich es gern mit integrieren.

3.1. Didaktische Vorbemerkung

Grundsätzlich lässt sich jede einfache geometrische Figur wie ein Kreis, ein Rechteck oder Ähnliches statt mit einem Standard-SVG-Tag auch mit dem <path>-Tag darstellen. Auch wenn ich wegen der Allgemeinheit den <path>-Tag bevorzuge, werde ich an einigen Stellen aus didaktischen Gründen auf einige SVG-Tags von einfachen geometrischen Figuren eingehen.
Insgesamt wird die vorliegende Einführung aber unvollstndig bleiben. Viele Tags, die man andere Anwendungen wie zum Beispiel für Animationen oder für die Definition von Schriftfonts nutzen könnte, werde ich hier überhaupt nicht erwähnen. Dafür sei auf die schon genannten technischen Tutorials verwiesen.

In den Beispielen verwende ich meist 'krumme' Zahlen, um die Ähnlichkeiten zwischen dem allgem,einen path-Tag und den SVG-Tags für einfache geometrische Grundformen deutlicher werden zu lassen.

3.2. Einfache Formen

Beschränkung der Einführung

Jeder kennt einfache geometrischen Formen wie Rechteck, Kreis und Ellipse (gequetschter Kreis). Für diese Formen existieren im SVG eigene Tags. Auch komplexere Formen wie Dreiecke, Sterne, Polyeder oder Spiralen werden hier nicht näher betrachtet werden, weil sie für einfache Teaser oder Diagramme nicht essentiell sind.

Lernen mit SVG-Editoren

Sie können die Formen, statt Sie selbst im Editor zu 'programmieren', aber auch zum Beispiel mit SVG-Editoren wie Inkscape erzeugen und speichern. Wenn Sie sich dann den generierten SVG-Code im Text-Editor oder Textprogramm anschaut, können Sie die Tags am Hand des generierten Codes lernen. Störend beim Lernprozess kann dabei aber der überflüssige oder schlechte Code sein, mit dem sie bei generierten Code rechnen müssen.

Lernen durch Wegstreichen und Lernprobleme

Wenn Sie mit SVG-Editoren lernen, scheuen Sie sich nicht, Code zu streichen, um zu schauen, was bei der Ausgabe im Browser passiert. Für mich persönlich war und ist die vektorielle Strukturierung ein echtes Lernhemmnis. Gerade bei Transformationen, bei den Bezierkurven und/oder beim <use>-Tags hatte/habe ich oft Schwierigkeiten mit der Frage, was für das beobachjtete Verhalten eigentlich der Bezugspunkt ist und warum das passiert ist, was ich sah (oder manchmal auch nicht sah.

Mein Denkhemmnis: Ein Koordinatensystem pro SVG

Für die Erkenntnis habe ich lange bgebraucht, da ich vom HTML in Kombination mit der CSS-Anweisung position:* gewohnt war, dass jedes Tag sein eigenes Koordinatensystem aufspannen kann. Im SVG haben sie nur ein global-wirkendes Koordinatensystem, dass für alle Elemente gilt und das Konzept relativer Koordinatensysteme wird durch die mächtigen - in der Vorstellung aber etwas sperrigen - Transformationen substituiert.

3.2.1. Rechteck und Pfade

Beim Rechteck ist der Startpunkt die linke obere Ecke und dann wird die Weite und Breite angegeben.
Das Rechteck kennt zwar Attribute, die das Styling des Rechtecks manipuliaren. Man sollte aber – analog wie bei HTML/CSS auch – das Styling ins CSS und in CSS-Klassen auslagern, um Markup und Styling getrennt zuhalten.

<polyline>, <polygon> oder <path>

Bei den drei genannten Tags muss man jeweils eine Liste von Punkten angeben. Ein <polygon> ist immer zyklisch, weil dort im Gegensatz zur <polyline> der letzten Punkt mit dem ersten verbunden wird.

Das Schweizer Teschenmesser ist im SVG aber der path-Tag. Durch geschickte Wahl der Pfades können Sie mit Hilfe der Fill-Rule auch Löcher schaffen.

            <svg viewBox="0 0 2000 2000" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
                <rect   x="23" y="134" width="305" height="386" style="fill:transparent; stroke-width:1%; stroke:#5d5203;" />
                <rect  x="123" y="234" width="345" height="456" style="fill:gold;        stroke-width:1%; stroke:#5d5203;" />
                <rect  x="223" y="334" width="145" height="256" style="fill:transparent; stroke-width:1%; stroke:#5d5203;" />

                <polyline points="1023 134, 1023 520, 1328 520, 1328 134, 1023 134" style="fill:transparent; stroke-width:1%; stroke:#065461;" />
                <polyline points="1123 234, 1468 234, 1468 690, 1123 690, 1123 234" style="fill:#d0faa6;     stroke-width:1%; stroke:#065461;" />
                <polyline points="1223 334, 1368 334, 1368 590, 1223 590, 1223 334" style="fill:transparent; stroke-width:1%; stroke:#065461;" />

                <polygon  points=" 23 1134,  23 1520, 328 1520, 328 1134 "          style="fill:transparent; stroke-width:1%; stroke:#062861;" />
                <polygon  points="123 1234, 468 1234, 468 1690, 123 1690 "          style="fill:#2E64FE;     stroke-width:1%; stroke:#380B61;" />
                <polygon  points="223 1334, 368 1334, 368 1590, 223 1590 "          style="fill:transparent; stroke-width:1%; stroke:#380B61;" />

                <path d="M 1023 1134 h 305 v 386 h-305 z "                          style="fill:transparent; stroke-width:1%; stroke:#8e051b;" />
                <path d="M 1123 1234 h 345 v 456 h-345 z
                         M 1223 1334 h 145 v 256 h-145 z"                           style="fill-rule: evenodd; fill:#facdae; stroke-width:1%; stroke:#8e051b;" />
            </svg>
        

3.2.2. Kreis, Elipse, Pfade (+ Browserfehler)

Der Kreis

Bezugspunkt ist das Zentrum des Kreises.
Ein Teil des Kreises ragt aus der viewBox heraus. (!!! SVG reagiert sensibel auf Groß- & Kleinschreibung)

Die Ellipse als Verallgemeinerung des Kreises

Statt einem Radius muss man natürlich zwei Radien angeben. und damit die Ellipsen voll passen, startet die linke obere Ecke der Viewbox nicht bei 0.0 wurde. :-)

Das Path-Object

Natürlich kann man die Ellipsen auch mit dem path-Tag generieren. Die relative 'a' bzw. absolute 'A' Anweisung ist die Parameterreichste aller Pfad-Funktionen. Bei Mozilla findem man die Kurzformel "A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y", wobei das kommaseparierte Paar rx,ry die Radien definiert. Da ein Pfad beginnt immer am aktuellen Punkt und endet im Punkt des kommaseparierten Paares x,y. Der Parameter xAxisRotate beschreibt in Grad, wie die Ellipse verdreht ist. die beiden anderen Parameter kennen nur die Werte 0 oder 1. Hat LargeArcFlag den Wert 1, wird der größere Kreisbogen verwendet, bei 0 der kleinere. Hat SweepFlag den Wert 0, so ist das Zentrum der Ellipse rechts vom Start-Ziel Vektor zu finden. Bei SweepFlag=1 ist de Zentrum links vom Start-Ziel-Vector zu finden. (Die gleichbedeutende Erklärung mit den Winkeln ist für Nicht-Mathematiker, Programmierer und Designer vermutlich eher schwerverständlich und beschreibt das aktuelle Verhalten der Browser nicht korrekt.

Fehler in modernen Browsern

Die etwas merkwürdig erscheindendde W3C-Definition für SweepFlag über die Winkel-Orientierung erlaubt, dass ein Arc-Pfad auch in seinem Startpunkt endet, da die definition auf auf einen richtungslosen Null-Vektor anwendbar ist. In den real existierenen, aktuellen (2017/08/20) Browsern Chrome [60], Firefox [55] und Microseft Edge [38/HTML14] werden leider solche zu Null-Vektoren führenden Definitionen nicht berücksichtigt, wie der nichtangezeigte Kreis der ersten Path-Definition zeigt.

            <svg viewBox="0 -300 2000 3400" width="100%" height="100%">
                <circle  cx="-23" cy="-34" r="345" style="fill:transparent; stroke-width:1%; stroke:#5d5203;" />
                <circle  cx="123" cy="234" r="345" style="fill:gold; stroke-width:1%; stroke:#5d5203;" />
                <circle  cx="123" cy="234" r="135" style="fill:transparent; stroke-width:1%; stroke:#5d5203; file-rule:evenodd;" />

                <ellipse  cx="1078" cy="389" rx="345" ry="567" style="fill:transparent; stroke-width:1%; stroke:#065461;" />
                <ellipse  cx="1278" cy="789" rx="345" ry="567" style="fill:d0faa6; stroke-width:1%; stroke:#065461;" />
                <ellipse  cx="1278" cy="789" rx="145" ry="367" style="fill:transparent; stroke-width:1%; stroke:#065461;" />
                <!--
                        468 = 123 + 345;
                        199 = 345-(123+23)
                -->
                <path d="M 199 1956
                         A 345,345 0 1,1 199,1956"    style="fill-rule: evenodd; fill:transparent; stroke-width:1%; stroke:#000000;" />
                <path d="M 199 1966
                         A 345,345 0 1,1 199,1965"    style="fill-rule: evenodd; fill:transparent; stroke-width:1%; stroke:#8e051b;" />
                <path d="M 468 2234
                         A 345,345 0 1,1 468,2233
                         M 268 2234
                         A 145,145 0 1,1 268,2233" style="fill-rule: evenodd; fill:#facdae; stroke-width:1%; stroke:#8e051b;" />
                <!--
                        1423 = 1078 + 345;
                        1623 = 1278 + 345;
                        2789 = 2000 + 789
                -->
                <path d="M 1423 2389
                         A 345,567 0 1,1 1423,2388"    style="fill-rule: evenodd; fill:transparent; stroke-width:1%; stroke:#8e051b;" />
                <path d="M 1623 2789
                         A 345,567 0 1,1 1623,2788
                         M 1423 2789
                         A 145,367 0 1,1 1423,2788"    style="fill-rule: evenodd; fill:#facdae; stroke-width:1%; stroke:#8e051b;" />
            </svg>
        

3.3. Mächtige Formen

Wie sich schon bei den geometrischen Firguren andeutete, ist der Path-Tag eine sehr wichtige Form.

In den Beispiele werden krumme Zahlen verwendet, um die Beziehungen zwischen dem mächtigen path-Tag und den Tags für geometrische Grundformen deutlich werden zu lassen.

Das Rechteck als Verallgemeinerung des Quadrats

Bezugspunkt ist die linke obere Ecke.
Es gibt zwar style-Attribute, aber dafür sollte CSS zuständig bleiben.

Polyline, Polygon oder Path

Hier muss man jeweils eine Liste von Punkten angeben. Ein polygonem> ist immer zyklisch, weil dort im Gegensatz zur polyline der letzten Punkt mit dem ersten verbunden wird.

Das Schweizer Teschenmesser ist der path-Tag. Durch geschickte Wahl der Pfades kann man mit Hilfe der Fill-Rule auch Löcher schaffen.

            <svg viewBox="0 0 2000 2000" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
                <rect   x="23" y="134" width="305" height="386" style="fill:transparent; stroke-width:1%; stroke:#5d5203;" />
                <rect  x="123" y="234" width="345" height="456" style="fill:gold;        stroke-width:1%; stroke:#5d5203;" />
                <rect  x="223" y="334" width="145" height="256" style="fill:transparent; stroke-width:1%; stroke:#5d5203;" />

                <polyline points="1023 134, 1023 520, 1328 520, 1328 134, 1023 134" style="fill:transparent; stroke-width:1%; stroke:#065461;" />
                <polyline points="1123 234, 1468 234, 1468 690, 1123 690, 1123 234" style="fill:#d0faa6;     stroke-width:1%; stroke:#065461;" />
                <polyline points="1223 334, 1368 334, 1368 590, 1223 590, 1223 334" style="fill:transparent; stroke-width:1%; stroke:#065461;" />

                <polygon  points=" 23 1134,  23 1520, 328 1520, 328 1134 "          style="fill:transparent; stroke-width:1%; stroke:#062861;" />
                <polygon  points="123 1234, 468 1234, 468 1690, 123 1690 "          style="fill:#2E64FE;     stroke-width:1%; stroke:#380B61;" />
                <polygon  points="223 1334, 368 1334, 368 1590, 223 1590 "          style="fill:transparent; stroke-width:1%; stroke:#380B61;" />

                <path d="M 1023 1134 h 305 v 386 h-305 z "                          style="fill:transparent; stroke-width:1%; stroke:#8e051b;" />
                <path d="M 1123 1234 h 345 v 456 h-345 z
                         M 1223 1334 h 145 v 256 h-145 z"                           style="fill-rule: evenodd; fill:#facdae; stroke-width:1%; stroke:#8e051b;" />
            </svg>
        

3.3.1. Linien, Polylinien und Pfade

line - die einfachste Verbindung zwischen zwei Punkten
Zur Definition einer Strecke braucht man genau zwei Punkte – den Anfang und das Ende. Entsprechend ist der line-Tag definiert. Eine Strecke ist im SVG relativ zum Koordinatensystem absolut positioniert. Wegen ihrer Einfachheit eignet sie sich gut, um das merkwürdige Verhalten der Transformationsmatrix zu deuten. Letztendlich sind die Beispiele nur von MDN adaptiert worden. Von der schwarzen Basislinie leitet sich die blaue Translationslinie ab.
Die cyanfarbene um 50% vergrößerte Linie leitet sich von der schwach cyanfarbenden Linie ab. Bemerkenswert ist, dass die beiden Linie sich nicht überdecken. Dies ist dem Vektor-Charakter geschuldet. Nicht die Strecke wird vergrößert, sondern die Werte beider Vektor-Punkte werden vergrößert und damit entsprechend auf die Gerade.
Wenn man nun Texte im Text positionieren will. hat man zewei Möglichekeiten. Die einfache Variante wendet die Drehung (transform) auf den text-Tag an. In der zweiten Varianten verknüpft man den Text über das xlink:href-Attribut mit dem path-Tag, der auch eine geschwungene Linie sein darf.
Die meisten Tutorial, wie der vorliegende Tutorials-Versuch auch, erläutern nur, wie die einzelnen Elmente funktionieren. Leider geben sie keine Strategie vor, wie man systematisch, planbar SVG's komponiert. Hier gibt es noch viel Spielraqum für interessante Strategien. im Nachfolgenden findet sich meine kleine Heuristik, wie ich an meine Darstellungsherausforderungen herangehe.
Drehungs-Beispiel - einfach Jugendstil statt Bauhaus
<svg viewBox="0 0 2000 3000" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
    <line x1="175" y1="100" x2="875" y2="1525"
          style="stroke-width: 1%; stroke: black; "
    />
    <g transform="matrix(1,0, 0, 1, 225, 10)" id="j000svg4translation">
        <line x1="175" y1="100" x2="875" y2="1525" style="stroke-width: 1%; stroke: blue; "/>
    </g>

    <g transform="matrix(1, 0, 0, 1, -100, 0)">
        <line x1="175" y1="100" x2="875" y2="1525" style="stroke-width: 1%; stroke: cyan; opacity:0.5; "/>
        <g transform="matrix(1.5, 0, 0, 1.5, 0, 0)">
            <line x1="175" y1="100" x2="875" y2="1525" style="stroke-width: 1%; stroke: cyan; "/>
        </g>
    </g>

    <text x="700" y="50" transform="rotate(20 700,40)" style="font-size:5em; color:darkred; stroke:darblue; fill:darkgreen">
        Drehungs-Beispiel - einfach
    </text>
    <path id="MyPath"
          d="   M 1000 1300
                C 1200 1200 1300
                0 2600 1100"
          style="fill:transparent;"
    />
    <linearGradient id="textGrad">
        <stop stop-color="#c00"/>
        <stop stop-color="#da0" offset="100%"/>
    </linearGradient>
    <text fill="url(#textGrad)"
          textLength="1300" lengthAdjust="spacingAndGlyphs"
          style="  stroke: #ee0;font-family: sans-serif;font-weight: bold;font-size: 10em; filter: drop-shadow(2px 2px 2px #a60);"
    >
        <textPath xlink:href="#MyPath"  method="stretch" spacing="auto">
            Jugendstil statt Bauhaus
        </textPath>
    </text>

    <g transform="matrix(1, 0, 0, 1, -100, 0)">
        <line x1="175" y1="100" x2="875" y2="1525" style="stroke-width: 1%; stroke: cyan; opacity:0.5; "/>
        <g transform="matrix(1.5, 0, 0, 1.5, 0, 0)">
            <line x1="175" y1="100" x2="875" y2="1525" style="stroke-width: 1%; stroke: cyan; "/>
        </g>
    </g>
</svg>

        

3.3.2. ... Strategie-Idee für SVG

Ich könnte hier jetzt weitermachen und wie alle anderen Tutorials alle weiteren SVG-Element vorstellen. Aber die anderen Tutorials sind ausgefeilter und können das besser als ein Halbwissender wie ich. Hier ein paars Links, die mir immer wieder mal aufgefallen sind:

Eine Strategie für gut SVG-Teaser

Selbst-Verortung

Ich bin kein Layouter, der mit einem Federstrich was schönes schafft oder eigenständig Icons entwicklen will. Ich bin Techniker und bin froh, wenn ich morgen noch weiß, warum ich etwas gestern noch schön fand.

Es gibt zwei Bereiche, wo ich SVG als Markupsprache dem HTML oder dem Canvas vorziehen würde. Der eine Fall sind Teaser, die quasi als Mini-Plakate Texte, Links und Bilder zu kompositionen zusammenfassen. Der zweite fall sind Diagramme, wo sich selbstähnliche Strukturen wiederholen und die Schönheit in der Wiederholung von Strukturen liegt. Und als Techniker gehöre ich natürlich zu den Faulen Menschen, und möchte mit möglichst wenig Lernen möglichst viel erreichen.

SVG-Strategie

Schön ist, dass ich für meine Anwendungsfälle die bekannte PatternLab-Bau-Strategie (vom Atom übers Molekül zum Template) auch beim SVG analog anwenden kann und dabei nur gut eine Handvoll Tags brauche (siehe angedeutetes SVG rechts).

  • wichtige SVG-Atome
    • <image> - Atom für Pixelbilder
    • <text> & <textPath> - Atome für Textdarstellung
    • <path> - Atom für jede geometrische Form
  • Wichtige SVG-Atom-Container (Molekül)
    • <symbol> - gekapseltes Object mit eigenen viewport
    • <g> - Gruppe von Objecten
  • Wichtige SVG-Molekülvorlagen-Container
    • <defs> - gekapseltes Object mit eigenen viewport
  • Wichtige SVG-Multiplikator (Guttenberg-Multiplikator)
    • <use> - kopiert Vorlaugen aus <defs> an beliebige Stellen
  • Wichtige SVG-Attribute
    • viewBox - begrenzt die Anzeige bei <svg> und <symbol>
    • stroke - färbt Ränder
    • fill - färbt innere Flächen
    • transform - dreht, verschiebt, vergrößert oder verkleinert Formen

Natürlich gibt es viele Tags und Attribute mehr, die in speziellen Fällen definitv ihre Berechtigung haben. Aber als einfach gestrickter Techniker denke ich, dass ich in den speziellen Fällen dann in die Internet-Dokumentation schaue, wenn ich sie brauche, und sie ansonsten ignoriere.
Zum Lernen gehört immer auch die Entscheidung, was Lernballast ist, der den Freaks vorbehalten bleiben sollte.

Styling
CSS gilt auch für SVG. Die meisten Attribute der Einzelelement können auch über CSS-befehle in Klassen definiert werden. Gemäß dem Prinzuip der Trennung von Layout und Funktion sollte mal alle optischen Eigenschaften grundsätzlich über CSS definieren.
- soweit es geht und die Browser-Hersteller keine S... gebaut haben .....
Früher war ja der IE das Sorgenkind im Internet. Heute ist es der Apfel, den Eva vor der Vertreibung aus dem Paradies angebissen liegen ließ, der oft für graue Haare beim Frontendler sorgt. (Liebe Gleichstellungsbeauftragte, ich kann die Bibel nicht einfach umschreiben, um ....

<svg viewBox=“...“>
    <defs>
        <g id=“g“>
            <path d=“M..L..Q..A..Z“ />
        </g>
        <symbol id=“s“ viewBox=“...“>
            <image xlink:href=“a.png“  >
        </symbol>
    <defs>


    <use id=“a“ xlink:href=“g“ x=““ y=““ />
    <use xlink:href=“da.svg#g“ />

    <text>
        <textPath xlink:href=“a“>
            SVG ergänzt HTML
        </textPath>
    </text>
</svg>
        

3.4. svt-Anwendungsidee Diagramm als statisches Beispiel

Was man im Internet eher selten auf Webseiten findet, sind Diagramme und Statistiken. Vermutlich liegt es daran, dass die dynamische Generierung eher schwierig ist bzw. man bislang keinen svt-Viewhelper hatte.

3.4.1. Balkendiagramm

Man könnte meinen, dass Balkendiagramme einfache Gebilde sind. Sie bestehen aus einer Grundlinie, einem farbigen Rechteck und vielleicht noch einem kurzen Text.

Das erste Beispiel wurde von der Seite webmeister-glossar aus dem Tutorial übernommen. Es ist vollständig statisch. Sobald man die dynamische Erweiterung zum Beispiel mit dem svt-viewhelper in Bettracht zieht, steht man vor zwei Herausforderungen:

  1. Die Einzelwerte pro Balken sind vorab unbekannt.
    In der zweiten Variante wurde per JavaScript der Viewport dynamisch bestimmt. Leider bin ich im CSS nicht so firm und weiß nicht, ob es ähnlich wie count() im CSS eine Funktion für solche Aufgaben gibt.
  2. Die Anzahl der Balken kann im dynamischen Verlauf meist zwischen 3 bis 20 variaieren.
    Wenn der svt-Renderer nicht rechnet, sollte man eine entsprechende JavaScript-Funktion schreiben. Manko. Im Beispiel müsste der Renderer noch die y-Werte bestimmen. Sicher könnte man im Javascript auch eine Funktion definieren, die die Abstände bestimmt.
207 287 97 207 287 97
            <!-- Max-Weite + Abstand nach links + padding = 287 + 50 + 10 = 347 -->
            
            <svg viewBox="0 0 347 145"
                 onload="this.setAttribute('viewBox','0 0 347 145');"
                 width="100%"
                 height="auto"
                 preserveAspectRatio="xMidYMid meet"
            >
                    <text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">207</text>
                    <rect x="50" y="35" width="207" height="20" rx="3" ry="3" fill="#2A7BB4" />
                    <text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">287</text>
                    <rect x="50" y="65" width="287" height="20" rx="3" ry="3" fill="#2A7BB4" />
                    <text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">97</text>
                    <rect x="50" y="95" width="97" height="20" rx="3" ry="3" fill="#B4472A" />
                    <line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />
            </svg>
            <svg viewBox="0 0 1000 500"
                 onload="dummyList=[207,287,97]; dummyMax=Math.max(...dummyList)+50+10; dummyHeight=3*30+2*10+25; dummyView='0 0 '+dummyMax+' '+dummyHeight; this.setAttribute('viewBox',dummyView);"
                 width="100%"
                 height="auto"
                 preserveAspectRatio="xMidYMid meet"
            >
                <line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />

                <rect x="50" y="35" width="207" height="20" rx="3" ry="3" fill="#2A7BB4" />
                <text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">207</text>
                <rect x="50" y="65" width="287" height="20" rx="3" ry="3" fill="#2A7BB4" />
                <text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">287</text>
                <rect x="50" y="95" width="97" height="20" rx="3" ry="3" fill="#B4472A" />
                <text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">97</text>
            </svg>
        

3.4.2. Tortendiagramm

Bei einem Tortendiagramm muss man normalerweise einwenig rechnen, damit die einzelnen Tortenstücke sich nicht überlappern oder überdecken. Ich hatt einige Zeit mein Kämpfen mit der Rotation der Tortenstücke, weil im SVG die Rotation im Uhrzeiger-Sinn erfolgt. Damit werden Gewohnheiten zu trigonometrischen Berechnungen etwas hinderlich. Es mich einiges an Umdenkarbeit gekostet, bis ich verstanden habe, dass im SVG das Koordinatensystem im Vergleich zum normalen Koorddinaten-System an der x-Achse gespiegelt ist. Dies erklärt die Drehung der Winkel uim Urzeigersind, auch die merkwürdig anmutende Berechnug im TYPO3-Template.

Nachbemerkung

Die aktuelle Version ist für mich eine Spielversion. Der obige Vorschlag ist noch nicht ideal, um ein Template für dynamisch generierte SVG-Diagrasmme zu bekommen. Insbesondere ein Mechanismus zur Summation über alle einzutrageneden Werte fehlt noch, um so zum Beispiel schnell ein vollständig gefülltes SVG-Kreisdiagramme dynamisch erzeugen zu können.

Auf den ersten Blick könnte man glauben, dass die VHS-Viewhelper zur Summation ausreichen würden, aber der Blick auf den Parameter , dass man während des Renderns vermutlich ein verallgemeinerte Register-Konzept braucht - also ein Konzept zur lokalen Speicherung und Anpassung von Variablen. Aktuell wird ein Register-Konzept erprobt.

<f:alias map="{ prefix: 'dummy' }" >
    <f:alias map="{ list: {
                             first: { sizeAngle: '30', rotate: '0', old:'zero', color:'darkred' },
                             second: { sizeAngle: '65', rotate: '-30', old:'first', color:'darkblue' },
                             third: { sizeAngle: '27', rotate: '-95', old:'second', color:'gold' }
                           }
                       }"
    >
        <svg height="auto" width="100%" viewBox="-400 -400 800 800" >
            <defs>
                <f:for each="{list}" key="nameId" as="item">
                    <path id="{nameId}"
                          d=" M 0 0
                            l 150,0
                            A 150,150 0 0,0 {hornyShit:calculate(value:'150*cos({item.sizeAngle}°)')},{hornyShit:calculate(value:'-150*sin({item.sizeAngle}°)')}
                            z"
                          fill="{item.color}" stroke="black" stroke-width="2" stroke-linejoin="round" />
                </f:for>
            </defs>

            <g id="torte">
                <circle cx="0" cy="0" r="150" style="fill:green;stroke:darkblue;"/>
                <f:for each="{list}" key="nameId" as="item">
                    <g class="{nameId}">
                        <use x="0" y="0" xlink:href="#{nameId}" id="{prefix}{nameId}" transform="rotate({item.rotate}) "/>
                    </g>
                </f:for>
            </g>
            <use x="200" y="200" xlink:href="#torte" />
        </svg>
    </f:alias>
</f:alias>
        
<svg height="auto" width="100%" viewBox="-400 -400 800 800">
    <defs>
        <path id="first" d=" M 0 0 l 150,0 A 150,150 0 0,0 129.90381056767,-75 z" fill="darkred" stroke="black" stroke-width="2" stroke-linejoin="round" />
            <path id="second" d=" M 0 0 l 150,0 A 150,150 0 0,0 63.392739261105,-135.9461680555 z" fill="darkblue" stroke="black" stroke-width="2" stroke-linejoin="round" />
                <path id="third" d=" M 0 0 l 150,0 A 150,150 0 0,0 133.65097862826,-68.098574960932 z" fill="gold" stroke="black" stroke-width="2" stroke-linejoin="round" />
    </defs>
    <g id="torte">
        <circle cx="0" cy="0" r="150" style="fill:green;stroke:darkblue;">
            <g class="first">
                <use id="dummyfirst" x="0" y="0" xlink:href="#first" transform="rotate(0) ">
            </g>
            <g class="second">
                <use id="dummysecond" x="0" y="0" xlink:href="#second" transform="rotate(-30) ">
            </g>
            <g class="third">
                <use id="dummythird" x="0" y="0" xlink:href="#third" transform="rotate(-95) ">
            </g>
    </g>
    <use x="200" y="200" xlink:href="#torte">
</svg>
        
Nachbemerkung 2

Natürlich könnte man die inneren Abhängigkeiten durch Verschachtelung auch auslagern. Das ist technisch zwar eher eine unschöne Lösung, aber angesichts der Unzulänglichkeiten von TYPO3/Fluid, wird man vermutlich eine solche Lösung nehmen müssen, wenn man Annahme-frei mit TYPO3 Diagramme rendern will.

        
            
<svg
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns="http://www.w3.org/2000/svg"
        height="auto"
        width="100%"
        viewBox="-400 -400 800 800"
>
    <defs>
        <path id="torte-1" d=" M 0 0 l 150,0 A 150,150 0 0,0 129.90381056767,-75 z" fill="inherit" stroke="black" stroke-width="2" stroke-linejoin="round" />
        <path id="torte-2" d=" M 0 0 l 150,0 A 150,150 0 0,0 63.392739261105,-135.9461680555 z" fill="inherit" stroke="black" stroke-width="2" stroke-linejoin="round" />
        <path id="torte-3" d=" M 0 0 l 150,0 A 150,150 0 0,0 133.65097862826,-68.098574960932 z" fill="inherit" stroke="black" stroke-width="2" stroke-linejoin="round" />
    </defs>
    <g id="torte-a">
        <circle cx="0" cy="0" r="150" style="fill:green;stroke:darkblue;" />

        <g class="torte-1" transform="rotate(0)">
            <use id="dummyfirst" x="0" y="0" xlink:href="#torte-1"  fill="darkred" />
            <g class="torte-1" transform="rotate(-30)">
                <use id="dummysecond" x="0" y="0" xlink:href="#torte-1"   fill="darkblue" />
                <g class="torte-1" transform="rotate(-30)  ">
                    <use id="dummythird" x="0" y="0" xlink:href="#torte-1"  fill="gold" />
                    <g class="torte-1" transform="rotate(-30)  ">
                        <use id="dummythird" x="0" y="0" xlink:href="#torte-1"  fill="green" />
                        <g class="torte-1" transform="rotate(-30)  ">
                            <use id="dummythird" x="0" y="0" xlink:href="#torte-1"  fill="magenta" />
                            <g class="torte-1" transform="rotate(-30)  ">
                                <use id="dummythird" x="0" y="0" xlink:href="#torte-1"  fill="red" />
                                <g class="torte-1" transform="rotate(-30)  ">
                                    <use id="dummythird" x="0" y="0" xlink:href="#torte-1"  fill="orange" />
                                    <g class="torte-1" transform="rotate(-30)  ">
                                        <use id="dummythird" x="0" y="0" xlink:href="#torte-1"  fill="cyan" />
                                        <g class="torte-1" transform="rotate(-30)  ">
                                            <use id="dummythird" x="0" y="0" xlink:href="#torte-1"  fill="violet" />
                                            <g class="torte-1" transform="rotate(-30)  ">
                                                <use id="dummythird" x="0" y="0" xlink:href="#torte-2"  fill="brown" />
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
    <use x="200" y="200" xlink:href="#torte-a" />
</svg>
        

3.5. Rechnen mit calculate im View

Bekenntnis

Erst im Laufe der Beschäftigung mit dem svt-Viewheklper wart mir bewusst, dass neben Teasern auch Diagramme ein bevorzugtes Anwendungsfeld für SVGs sind. DaDiagramme die Abhängigkeit von Daten zueinander darstellen, braucht diese Darstellungsform oft einfache Berechnungen im View. Meist sind ei Berechungen einfach. Beim Tortendiagramm ist der Größe der Tortenstücke zu berechnen oder beim Balkendiagramm die Diemnsion der Viewbox. Diese Berechnungen kann man nach meinem Wissen nicht immer in CSS auslagern, weshalb für horny-Shit ein Berechnungsviewhelper entwickelt wurde..

eval ist böse

Mit der Funktion eval bietet PHP ein Funktion zur Auswertung von berechnungen. Aber schon im Manual zum PHP wird davor gewarnt, weil die Funktion jeden PHP-code auswertet. Da mir vorschwebte, dass man einfach eine Berechnungsformel ausrechen löässt, kamen die vielen mathematischen Viewhelper der TYPO3-Extension VHS nicht wirklich in Betracht.

Selber-Machen macht Arbeit

Leider fand ich - vermutlich weil ich mit den 'falschen'Suchbegriffe suichte - keine PHP-Klasse, die das Rechnen von Strings unterstützte. Deshalb entschloss ich mich notgedrungen, dieses eigentlich triviale Problem selbst zu programmieren. Vorteilhaft und motivierend war, dass ich dabei meine Kenntnisse zu Unittests mit PHPUnit vertiefen konnte.

Regeln für calculate

Die entstandene Klasse bzw. der entstanden Viewhelper calculate unterstützt die üblichen Rechenregeln:
  • Zahlwerte Ausdrücke werden zuerst in Teil-Berechnungen übersetzt.
    • 12% => (12/100)
    • 12e15 => (12*10^15)
    • 12e-15 => (12*10^-15)
    • 12° => (12/180*M_PI)
    wobei M_PI im PHP für die Konstante der Kreiszahl π steht.
  • Ausdrücke in Klammern sind immer zuerst auszurechen
  • Unitäre Operatoren wie sin, cos, tan, ln und log binden stärker als jeder binäre Operatoren. Zusätzlich wurden auch die unitären Operatoren abs, round, floor und ceil zugelassen.
    Unitäre Opertoren wie !(Fakultät), cot, sinh, cosh , tanh und coth wurden bislang nicht integriert, weil dafür kein aus meiner Sicht kein Bedarf besteht.
  • Bei den binären Operatoren gilt folgende aufsteigenden Bindungsreihenfolge:
    1. ↑ (Windows Tatsatur-Code: alt-24. Maximum-Operator gibt die größere von zwei Zahlen zurück. Zusätzlich)
    2. ↓ (Windows Tatsatur-Code: alt-25. Minimum-Operator gibt die kleinere von zwei Zahlen zurück. Zusätzlich)
    3. +, -
    4. *, /
    5. \, div ( beide darstellungsvformen sind identisch. Division mit Ergebnis ohne Nachkommastellen)
    6. mod (Modulo - Restwert, berechenbar auch für rationale Zahlen. Das in vielen Programmiersprachen verwendete %em>-Zeichen kann hier nicht verwendet werden, weil hier das Zeichen % mit Blick auf den allgemeinen Gebrauch als Faktor 1/100 interpretiert ist.)
    7. ^ (Potenzoperator. Beispiele:
      4^2= 4 hoch 2 = 16;
      16^0.5 = 2 hoch einhalb = zweite Wurzel von 16 = 4)
    Der aus der Wahrscheinlichkeitsrechnung bekannte Binäre Operator "n über k", der bei Berechnung der Binomialkoeffizienten gebraucht wird, wurde bislang nicht integriert. Ich sehe dafür derzeit keinen Anwendungsfall. Wenn ich ihn integrieren müsste, würde der Permutationsoperator stärker als der Potenzoperator binden, und Rechensymbol würde ich vermutlich die bislang in der Mathematik unbenutzte Raute/HashTag # verwenden.
Die einzige Funktion aus der Math-Gruppe von VHS, die ich nicht umegesetzt habe, war der veiwhelper avareage, der den Mittelwerts von eines Datenvectors/Arrays bestimmt. Da ein Mittelwert die Beziehung zwischen vielen Zahlen herstellt, ist die Funktion kein echter unitärer oder binärer Operator im eindiemensionalen Zahlenraum. Solche Funktionen gehören aus meiner Sicht in den Bereich der Vektor-Arithmetik, die durrch die lineare Algebra ausführlich theoretisch begründet wird.

Test Rechnung (manuell)

sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \8 + 2^6 mod 2 + 13

= 1 + -1*1 + 2/1 + -2 - 0*-1 + 0 + 64 %2 + 13

= 1 - 1 + 2 + -2 - 0 + 0 + 0 +13

= 13

Test Rechnung (automatisch)

In funktionaler Fluid-Schreibweise

sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = 13 (erwartet =13)

Test-Rechnung (automatisch, ohne Umbrüche)

In funktionaler Fluid-Schreibweise

sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = 13 (erwartet =13)
bzw. in tag-basierter Schreibweise mit Value als inkludiertes Kind
sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = 13 (erwartet =13)

bzw. in value-basierter Schreibweise - also mit Attribut

sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = 13 (erwartet =13)

Test Rechnung mit Fehler und erlaubten Fehlerhinweis

Fehlerhinweis okay

The error is near this place ´abs(-1)) | + floor(-`.
Your calculationstring has the following normalized form:
sin((90*3.1415926535898/180))+ cos((180*3.1415926535898/180))* exp( ln(1))+ log(100)/ abs(-1))+ floor(-(140/100))- ceil(-0.8)* round(-0.5)+5\8+2^6#2+13
A possible reason is perhaps a missing bracket. Others reason could be unknown operators or an unallowed cascade of operators. Although the usage of an floating comma can cause an error. You have to use a dot for the floatingpoint. And one number contain at least only one floating-point.

Fehlerhinweis zeigt nicht auf Fehlerursache (fehlende schließende Klammer bzw. öffnende Klammer zuviel)

The error is near this place ´+2^6#2+13 |`.
Your calculationstring has the following normalized form:
sin((90*3.1415926535898/180))+ cos((180*3.1415926535898/180))* exp( ln(1))+( log(100)/ abs(-1)+ floor(-(140/100))- ceil(-0.8)* round(-0.5)+5\8+2^6#2+13
A possible reason is perhaps a missing bracket. Others reason could be unknown operators or an unallowed cascade of operators. Although the usage of an floating comma can cause an error. You have to use a dot for the floatingpoint. And one number contain at least only one floating-point.
        <h4>Test Rechnung (manuell)</h4>
        <div>
            <p>sin(90°)
            + cos(180°) * exp( ln(1) )
            + log(100) /abs(-1)
            + floor(-140%)
            - ceil(-0.8) * round(-0.5)
            + 5 \8 + 2^6 mod 2
            + 13
            </p>
            <p>= 1
                + -1*1
                + 2/1
                + -2
                - 0*-1
                + 0
                + 64 %2
                + 13</p>
            <p>= 1
                - 1
                + 2
                + -2
                - 0
                + 0
                + 0
                +13</p>
            <p>= 13 </p>
        </div>
<h4>Test Rechnung (automatisch)</h4>
<f:alias map="{calc : 'sin(90°)
    + cos(180°) * exp( ln(1) )
    + log(100) /abs(-1)
    + floor(-140%)
    - ceil(-0.8) * round(-0.5)
    + 5 \ 8
    + 2^6 mod 2
    + 13'
}">
    <p>
        <strong>In funktionaler Fluid-Schreibweise</strong>
    </p>
    <div>
        <div>{calc->f:format.raw()} = {calc->hornyShit:calculate()} (erwartet =13)</div>
    </div>
</f:alias>
<h4>Test-Rechnung (automatisch, ohne Umbrüche)</h4>
<f:alias map="{calc : 'sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13'}">
    <p>
        <strong>In funktionaler Fluid-Schreibweise</strong>
    </p>
    <div>
        <div>{calc->f:format.raw()} = {calc->hornyShit:calculate()} (erwartet =13)</div>
    </div>

    <div>
        <strong>bzw. in tag-basierter Schreibweise mit Value als inkludiertes Kind</strong>
        <div>
            <f:format.raw></f:format.raw> = <hornyShit:calculate></hornyShit:calculate> (erwartet =13)
        </div>
    </div>
    <div>
        <p>
            <strong>bzw. in <em>value</em>-basierter Schreibweise - also mit Attribut</strong>
        </p>
        <div>
            <f:format.raw value="" /> = <hornyShit:calculate value="" /> (erwartet =13)
        </div>
    </div>
</f:alias>
        
<h4>Test Rechnung (manuell)</h4>
<div>
    <p>sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \8 + 2^6 mod 2 + 13 </p>
    <p>= 1 + -1*1 + 2/1 + -2 - 0*-1 + 0 + 64 %2 + 13</p>
    <p>= 1 - 1 + 2 + -2 - 0 + 0 + 0 +13</p>
    <p>= 13 </p>
</div>
<h4>Test Rechnung (automatisch)</h4>
<p>
    <strong>In funktionaler Fluid-Schreibweise</strong>
</p>
<div>
    <div>sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = (erwartet =13)</div>
</div>
<h4>Test-Rechnung (automatisch, ohne Umbrüche)</h4>
<p>
    <strong>In funktionaler Fluid-Schreibweise</strong>
</p>
<div>
    <div>sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = (erwartet =13)</div>
</div>
<div>
    <strong>bzw. in tag-basierter Schreibweise mit Value als inkludiertes Kind</strong>
    <div> sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = (erwartet =13) </div>
</div>
<div>
    <p>
        <strong>
            bzw. in
            <em>value</em>
            -basierter Schreibweise - also mit Attribut
        </strong>
    </p>
    <div> sin(90°) + cos(180°) * exp( ln(1) ) + log(100) /abs(-1) + floor(-140%) - ceil(-0.8) * round(-0.5) + 5 \ 8 + 2^6 mod 2 + 13 = (erwartet =13) </div>
</div>

        

3.x. Nachsatz

Der svt-Viewhelper steht für die Idee, SVG-Konstrukte als dynamische füllbare Templates zu betrachten, die auf einer Website leicht und schnell ausgetauscht werden können. damit werden die darstellungsformen flexibler und eine Website kann schneller und einfacher optisch umgestaltet werden.

Für Unternehmen ist heutzutage die Website wie ein Schaufenster. Trotz Branding und Corporate Design sollte man sein Schaufenster immer wieder neu dekorieren, um so nach Außen Leben und Wandlungsfähigkeit zu signalisieren und um so verschiedene Menschen mit unterschiedlichen Vorlieben ansprechen zu können.


              \\     ||     //
                \\   ||   //
                 \\  ||  //
             XXXXXXXXXXXXXXXXXX
         XXXX                  XXXX
       XXX                        XXX
     XXX                            XXX
   XXX                                XXX
  XXX         XXX        XXX           XXX
 XX           XXX        XXX            XX
 XX           XXX        XXX             XX
 XX           XXX   x    XXX             XX
 XX                xxx                   XX
 XX               xxxxx                  XX
 XX     XX       x\XXX/x        XX       XX
 XX      XXX                  XXX        XX
  XX     XXXX                XXXX       XX
   XX       XXXX          XXXX         XX
    XX         XXXXXXXXXXXX           XX
     XXX                            XXX
       XXXX                      XXXX
          XXXX                XXXX
            XXXXXX        XXXXX
                  XXXXXXXXX


        

4. Beispiele für Diagramme

Unterstellter Workflow im Produktiv-Betrieb

Für die letztendliche Ausbaustufe vom svt-Viewhelper wird ein Verfahren angestrebt, dass dem realen Workflow Rechnung trägt. In der Regel wird ein Redakteur ein Muster-SVG-Template zum Beispiel mit Inkscape erstellen oder aus dem Netz herunterladen. Diese Muster-Rohdateien können verseucht sein oder mit überflüssigen Code beladen sein. Der Redaktuer wird deshalb in einem von anderen Entwicklern programmierten Plugin auf einer Testseite seinen Code reinigen und gleichzeitig auf korrektes Funktionieren prüfen. Die Testseite sollte einen gereinigten SVG-Mustercode zur Verfügung stellen, den der Redakteur dann für den Produktiv-Prozess verwenden kann.

Für den gereinigten Code stehen nur die Variablen-Funktion und die Registerdefinitionen zu Verfügung. Er gilt der FirstComeFirstDone-Prinzip. Die Ersetzungen finden auf der Basis von Strings statt mit der php-Funktion 'str_replace'. Es sind also keine regulären Ausdrücke zulässig.

Wenn die Variable bzw. der Variablenarray keine Start- und Endmarkierung für Loops enthält, so gilt sie global. Wenn ein Delimiter angegeben ist, so wird er auf die Variablenliste angewandt und ein Array von daten erzeugt. Diese ersetzen dann nacheinander die im Muster-SVG gefunden Marker. Sind weniger Marker als Variablen vorhanden, dann werden die übrig gebliebenen Werte verworfen. Sind Weniger Variablen als Marker vorhanden, dann wird der letzte nur Marker solange kopiert, bis alle Marker ersetzt wurden.

Wenn aber die Variable bzw. der Variablenarray eine Start- und Endmarkierung für Loops enthält, dann wird für die Sucher der Marker nur der durch die Loopbegrenzer definierte Bereich durchsucht. Für die Variablen gilt in dem Bereich das das gleiche Verhalten wie für die globalen Variablen. Nach dem Setzen aller Werte werden gegebenenfalls die Loopgrenzen entfernt.

Es ist zu beachten, dass Lopps belibig ineinander verschachtelt sein können. Es muss deshalb immer sichergestellt sein, dass ein Marker oder eine Marker für eine Loopgrenze immer Unique für die gesamte Muster-SVG ist

Einleitung

Im Nachfolgenden werden einige Beispiele für generische SVG-Diagramme präsentiert werden, die mit dem SVT-Viewhelper erzeugt werden. Hierbei kommen nur die Variablen und die Register zum Einsatz.

4.1. Generisches Piktogramm für Stoffnachweise

Vorwort

Für ein private Forschungsprojekt brauche ich ein modular aufgebautes Pictogramm mit vielen generischen, dass in der einfachsten Stufe das folgende Aussehen hat:

In der regulären voll ausgenutzten Stufe hat es folgendes Aussehen:

generisches Pictogramm

Das Piktogramm fungiert wie ein Menü, wobei die generischen Teil-Icons jeweils bestimmte Methoden für den Nachweis bestimmter Stoffeigenschaften kennzeichnet. In der zu schaffenden Reaktionsextension sollen über die jeweiligen Teilicons jeweils Listen mit den verschiedenen Nachweis-Protokollen verfügbar gemacht werden. Dabei sollen aber nur die Icons angezeigt werden, welche mindestens ein Dokument bereithalten. Das nachfolgende Beispiel zeigt generisch, wie der Einsatz ein Einsatz des SVT-Veiwhelper erfolgen könnte.

Erläuterung

Ein Register wird nicht benötigt. Mit dem PlaceholderLast maskiert man das <-Zeichen, das im alias-Viewhelper wegen Fluid Probleme macht. Wenn die Daten als Objekte übergeben wwerden, kann man darauf verzichten. Für die Anzeige im Generischen Piktogramm müssen nur in dem didaktischen Beispiel die ID der Defenition im <defs> sowie ein Erläuterungstext angegeben werden. Da die Daten mehrfach ausgegeben werden sollen, sind in Parts jeweils komma-separierte Listen angeführt. Für beide listen gilt das Prinzip der maximalen Reichweite. Pro Loop-Vorlage wird jeweils der nächste Wert verwendet un im Vorlage-Template ersetzt. Sobald eine kommaseparierte Liste sein Ende erreicht hat, wird das letzte Element solange verdoppelt, bis alle Listen aus den Parts ihr Ende erreicht haben. Dann wird die Schleife abgebrochen. Durch die 1[=true] beim Flag-Schalter 'deleteLoopMarker' wird der Viewhelper angewiesen, Nach Beendigung der Loop die Schleifenmarkierungen zu entfernen.

4.x. Nachsatz

5. Unterstellter Workflow & Einleitung

SVG ist wie HTML eine Markup-Sprache. Der svt-Viewhelper (sexy-variable-template-Viewhelper) baut nach dem dynamischen Umbau des SVG-Codes diesen direkt in das HTML ein. Das hat folgende Vorteile:

  • Der Browser muss eine Dateiabfrage weniger machen, weil das SVG schon im HTML integriert ist.
  • Das SVG kann direkt per JavaScript und über das globale CSS beeinflusst werden.
  • Der im HTML integrierte SVG-Code erlaubt wie HTML Links und hover-Effekte.
  • Als Frontend-Entwickler haben Sie direkt Zugriff auf den SVG-Code.
  • Als Redakteur könnten Sie schnelle einen Muster-SVG-Code durch einen anderen ersetzen, um ihre Seite zum Beispiel für Weihnachten zu schmücken.

Natürlich hat das SVG im HTML auch Nachteile:

  • Sie müssen als Frontentwickler Neues lernen - die Markup-Strache SVG und mit den dazugehörigen Editoren.
  • Ein Editor für Vektorgraphiken, wie zum Beispiel InkScape, arbeitet andere als ein Pixelbild-Editor, wie zum Beispiel Gimp oder Photoshop.
  • Im SVG haben Sie KEINEN automatischen Textumbruch.
  • Die Konfigurationssprache des svt-Viewhelpers ist nicht ganz so einfach.

5.1. Didaktische Hilfe

Rechts finden Sie Code-Beispiele. Farblich wird zwischen TYPO3-Template und Browser-Code unterschieden. In der vorliegenden Spalte finden Sie kurze Erläuterungen, Beispiel-Bilder sowie die eine oder andere politisch-provokante Anmerkung in brauner Farbe. Die Extension heißt nicht umsonst 'geiler Scheiß' bzw. 'horny shit'.
Beispiel für Code im TYPO3/Fluid-Template
        

Resultierender Code im Browser
        

5.2. Kreative Aspekte

Warum der Name?

Um diese Frage zum Namen horny-shit zu beantworten, muss ich etwas weiter ausholen.
Für mich war die Extension ein Forschungsprojekt, um mich den Themen 'Test-Driven-Development' und 'Unittests' zu nähern. Es ist/war ein Projekt, mit dem ich Erfahrungen zum Thema TDD sammeln wollte. Ich stieß - wie ich auch vorab vermutete - schnell an meine persönlichen Grenzen und Gründe für die Aversion von Test-Dreiven-Development.

Unittest wirken wegen ihrer Einstellungseffekte als Kreativitätsblocker

Nach ersten Versuchen des TDD-Vorgehens, immer nur genau soviel zu programmieren, wie ich unbedingt für grüne Tests benötigt, verwarf ich dies Vorgehen relativ schnell wieder, weil ich zu häufig alte Test zurückbauen musste.

Dabei störte mich nicht die Arbeit sondern die Denk-Impuls-Wirkung der falschen Tests. Um aus der Liste der Aufgaben die Tests zu entfernen, die ich nicht brauchte. musste ich nämlich die 'falschen' Tests noch einmal lesen. Dabei las ich natürlich nochmals die 'falschen' Ideen mit. Dies Lesen wirkte trotz der Motivation des Löschen-Wollens eher wie ein Verstärkungsprozess der gerade verworfenenen Ideen. Durch diese fehlerhafte Selbsteinstellung erschwerte ich es meinem Gehirn, schnell und effizient alternative Wege anzudenken.

(Ich schreibe hier bewusst in der Ich-Person, weil andere Menschen anders denken und weil ich nicht weiß, wie weit meine Erfahrungen von der Normalität entfernt sind)

Was ist für mich Kreativität NICHT?

Meine Kreativität funktioniert NICHT test-getrieben

Die obige Beschreibung entsprang meinem Gefühl. Ich hoffe, dass die Beschreibung vielleicht klar genug ist, so dass Forscher der Kognitiven Psychologie vielleicht einmal reproduzierbare,reliable und auch valide Experimenten zur These vom Einstellungseffekten der Unittests konstruieren. Wenn es schon entsprechende Versuche gegeben hat, was ich nicht ausschließe, werde ich mich über die Zusendung von Literaturhinweisen freuen.

Was ist für mich Kreativität?

Meine persönliche Kreativität-Heuristik

Schon in meiner Studienzeit kam ich für mich zu folgenden Kreativitäts-Modell bzw. zur folgenden Kreativitätsheuristik. Ein kreativer Prozess wird im Kern durch drei verschiedene Aspekte bestimmt:

  • Fragen, wofür der Scheiß eigentlich gut sein soll.
  • Ideen, wie ich es noch geiler machen könnte.
  • Daten, die didaktisch-belehrend (!) auf Macher wirken.

Die Formulierungen sind bewußt emotional formuliert, um mich selbst zur nötigen Ernsthaftigkeit und Distanz zu motivieren. Die Übersetzung der Zusammensetzung geiler Scheiß führte im Rahmen eines kreativen Impuls zu horny-shit und später zum Icon, dass mehr kann ein ein svg im img-Tag. Ich hatte nicht gedacht, dass der Zeitgeist heute wieder so moralisch-humorlos geworden ist.

Während des kreativen Prozesse wäge ich schrittweise immer zwei der drei Aspekte gegeneinander ab. Während der kreativen Schritte können im Wechsel drei verschiedene konstruktive Konflikt-Paare aufeinander treffen:

Fragen <=> Ideen
Ein Analogie zu diesem kreative Konflikt bietet vielleicht das Spannungsverhältnis zwischen Chef und Sacharbeiter. Während der Chef seinen Fokus eher auf die strategischen Fragen richtet und ein Unternehmen optimal ausrichten will, ist der Sachbearbeiter eher bestrebt, seine Arbeitsprozesses optimal einzurichtent, auch wenn diese nicht immer optimal für die strategischen Ziele sind.
Als Beispiel für den Fargen-Ideen-Keavtivkonflikt bzw. den Strategie-Operations-Kreativkonflikt sei bei der Basisklasse für den Viewhelper svt in horny-shit auf das Escape-Problem hingewiesen. Im ersten Schritt sah ich nur die Probleme für den TYPO3-Viewhelper und beschränkte den Mechanismus auf die Anführungszeichen und die öffnende geschweifte Klammer. Die Lösung war aus operativer Sicht durch statische Variablen ideal gelöst. Vor dem strategisschen Hintergrund, dass die SvtService-Klasse auch für andere Systeme verfügbar sein sollte, welchs andere placehoder brauchen könnte, machte einen allgemeinere aber auch ineffizientere Methode nötig.
Fragen <=> Daten
Dieser konstruktive Kreativkonflikt zwischen Fragen und Daten ist für mich ähnlich zum Vorgehen von Projektmanagern, die gern agil mit Userstoriesem und Sprints ihre Entwicklungen/Entwickler planen und vorantreiben wollen. Dieser Kreativkonflikt zwischen Fragen und Daten ist aktuell in der Extension horny-shit wichtig, um zum Beispiel über die strategischen Leitlinie 'Nutze Muster-SVG für Teaser und Diagramme' passende Testdaten für die Tests ableiten. Erst das Nachdenken über mögliche Testdaten ließ mich kreativ darauf stoßen, dass für Diagramme mit dynamisch-vielen Angaben ein eigener einfacher Schleifen-Mechanismus uzu schaffen ist, der in Version 0.0.4 noch nicht integriert ist. ... Dies war nur ein Beispiel für die Wirkung von solchen Kreativkonflikten.
Daten <=> Ideen
Dieser konstruktive Kreativkonflikt beschreibt für mich das Vorgehen für das, was man meist als Test-Driven-Development bezeichnet. Die Tests leiten sich vom Datenaspekt ab, weil man für bestimmte Variationen von Daten bestimmte Ergebnisse erwartet. Die zu testenden Methoden leiten sich vom (operativen) Ideenapsekt ab, indem in den Methoden definiert wird, wie im Detail die Daten jeweils zu geforderten Ergebnissen führen könnten.
Im Kreativkonflikt hinterfragt man, ob man im Ausnahmefall einzelne Daten-Ergbniss-Paare für den Methodentest ausschließen muss oder ob man die Methode an die Daten-Ergbniss-Paare des Tests anpassen muss. Letztendlich führt der Kreativkonflikt oft auf das Problem, die Gültigkeit einer Methode mit Hilfe von Unittest vollständig zu beweisen.

Warum gerade drei Aspekte

Beim Kreativen Prozess muss man sich ähnlich vorgehen wie beim Schleifen von einem ebenen, geraden Spiegel. Für das Schleißen braucht man drei Scheiben, die sie gegeneinander glätten und wegen des Dreiklangs keine Unebenheiten zulassen. Im Kreativen Prozess heißen die drei Scheiben 'Fragen', 'Ideen' und 'Daten' und das Reiben findet im 'Kreativkonflikt' statt.

Persönliche Verortung

Ich selbst zähle mich zu den Menschen, die gern von einer strategischen Fragestellung aus starten, wobei ich bei hohem Wissen eher mit dem Fragen-Ideen-Kreativkonflikt und bei geringem Wissen eher mit dem Frage-Daten-Kreativkonflikt beginne. Ein Beginn des kreativen Prozesse mit dem Daten-Ideen-Kreativkonflikt widerstrebt meinem persönlichen Denken, auch wenn ich vermutlich so manche technische oder mathematische Idee so entstanden ist.
Vielleicht habe ich den Begriff Test-Driven-Development aber auch falsch verstanden. Ich könnte mir vorstellen, dass die Verfechter mit diesem Begriff meinen, dass man seinen kreativen Prozess mit einem Ideen-Daten-Konflikt beginnen sollte. Damit könnte ich mich anfreunden, wenn die TDD-Verfechter akzeptieren, dass Der Beginn mit TDD nicht für jedes Problem und nicht für jeden Menschen gleich gut nutzbar ist.
Nachsatz
Mein Spiel tri-plan könnte man als Versuch nehmen, dem Menschen das gleichzeitige Beachten von zwei Konkurrenten erlernen zu lassen. Ich bin mir nicht sicher, ob es geht. Ich weiß nur, dass ich die Form des triangulären Denkens nicht beherrsche.

6. svt:svt versus f:image

Der svt-Viewhelper ist genauso einfach wie der f:image-Viewhelper zu nutzen, wenn man nur ein Icon darstellen möchte. Aber im Frontend zeigen sich doch Unterschiede.

6.1. SVG eingekapselt im img-Tag dank <f:image>

So sieht das Icon horny shit im Template mit dem f:image-Viewhelper von Fluid aus (gelb).

<div style="width:64px; height: auto;">
<f:image src="\typo3conf\ext\horny_shit\Resources\Public\Icons\HornyshitHornyShit.svg" width="64" > Nur ein Bild.</f:image>
</div>
        

So wie oben sieht es anschließend im Browser aus, nachdem TYPO3 das Template gerendert hat (rot).

Der hover-Effekt fehlt.

<div style="width:150px; height: auto;">
<img src="/typo3conf/ext/horny_shit/Resources/Public/Icons/HornyshitHornyShit.svg" alt="" width="150" height="150">
</div>
        

6.2. SVG mit Link und "hover"-Pfütze dank <svt:svt>

Interaktiver & dynamischer aber genauso einfach wird der SVG-Code dank des svt-Viewehlpers ins normale HTML eingebaut.

<div style="width:150px;height: auto; overflow: hidden;">
    <hornyShit:svt src="\typo3conf\ext\horny_shit\Resources\Public\Icons\HornyshitHornyShit.svg" />
</div>
        

Boaaaah.... wahrhaftig geiler Scheiß (engl.: horny shit - laut google)!

Der svt-Viewhelper macht in TYPO3 daraus natürlich den SVG-Code in Rot. [...] zeigt, dass der Code natürlich umfangreicher ist.

Aus Übersichtsgründen wurde viel Code ausgelassen. Nutzen Sie zum Beispiel Firebug oder die Entwicklertools Ihres Browsers, um sich den generierten Frontend-Code anzuschauen.

<div style="width:150px;height: auto; overflow: hidden;">
    <svg id="svg_horny_shit_extension" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc [...]>
        <defs id="defs7121">
        [...] </g>
    </svg>
</div>
        

7. Die Flagge der DDR bearbeitet mit svt:svt

7.0.1. Technik trifft Politik

Politik und Technik - geht das? Ja, denn die Extension heißt horny shit. Wenn Sie richtig geile Technik kostenlos geschenkt bekommen, dann muss die Sache # einen Haken haben. Hier kommt Politik ins Spiel. In Zeiten der Globalisierung mit gleichgeschalteten Wissenschaftlern in Thinktanks und milliardenschweren Public-Relation-Etats von Konzernen und Regierungen braucht ein Intellektueller wie ich ein Vehikel, um seine Ideen als freies, einigermaßen unabhängiges Individuum in die Diskussionsdynamik einzubringen. Eine geschenkte Technik kann mir vielleicht helfen, um meine Ideen und Fragen in die öffentliche Diskussion einzubringen.

Sie dürfen die shitty-braun gefärbten Anmerkungen ignorieren. Sie können meine Fragen gern auch als horny shit betrachten und einfach nur die Extension nutzen. Ich vertraue darauf, dass es mehr vernünftige Menschen in der Welt gibt als es uns die Politik glauben machen will. Ich glaube an die Menschheit und daran, dass sie einen Weg finden wird, die kommende Ernährungskrise und die aktuelle Internet-Propaganda-Krise menschlich zu lösen.

Am Ende werden Sie sehen, was ich mir politisch wünsche und was ich politisch fürchte. Beide Themen halte ich für wichtig, weil aus meiner Sicht Freiheit und Überleben heutzutage immer mehr zu Tabu-Themen werden.
"geiler Scheiß" heißt laut google auf Englisch "horny shit".
:-) :-) :-) :-) :-) :-) :-) :-) :-) :-) :-) :-) :-) :-) :-)
        

7.1. Hinweise zur Dokumentation

Das vorliegende Plugin zeigt nur Beispiele der Anwendung des svt-Viewhelpers. Die Abkürzung 'svt' stammt von mir.

Abbildungen und Fotos sind von mir oder sie sind auf wikipedia.de als gemeinfrei gekennzeichnet gewesen.

Die genaue Hierarchie der Konfiguration sowie die Manipulationsmöglichkeiten entnehmen Sie dem Mind-Map, dass Sie im Dokumentationsordner dieser Extension finden.

Ich nutze als Freeware für Mind-Maps eine alter Version des Programms FreeMind. FreePlane sollte aber auch funktionieren (ungetestet).

Benennung;
Ich habe den Viewhelper bewusst zu svt (sexy-variable-template)
umbenannt, weil die Abkürzung svg (Scalable Vector Graphics) meine Phantasie zu sehr beschnitt
Kurven beflügeln die Phantasie des Mannes.
Kurven machen auch das Internet sexy.
Mit svt (sexy variable template) werden
Content-Management-Systeme und Shop-Systeme sexyer.

7.2. Erste dynamische Manipulationen am SVG-Code

1989 gab die Funktionärsriege der DDR ihren Abwehrkampf auf und 1990 kam es so zur freundlichen Übernahme der BRD durch die DDR - oder war es doch umgekehrt? Naja egal. Beide Länder hatten eine gemeinsame Geschichte, eine gemeinsame Sprache und eine ähnlich hohe Autoritätsgläubigkeit, was sich auch in ihren sehr ähnlichen Flaggen zeigte.

Die DDR gab sich auf der Flagge eher symbolisch, während die Bundesrepublik auf jeden Firlefanz verzichtete.

Eine ähnliche Verwandtschaft wie zwischen den Flaggen von BRD und DDR besteht zwischen HTML und SVG. Aktuell führt das SVG ein Schattendasein neben dem HTML. Aber wer weiß, wie es in zehn oder zwanzig Jahren sein wird.

Die Analogie eignet sich aus meiner Sicht gut, um die Vereinigung von HTML und SVG mit dem svt-Viewhelper vorzustellen.

7.2.1. Flagge - img-Tag erstellen in zwei Varianten

Um die Flagge der DDR wie hier per img-Tag darzustellen, habe ich aus dem TYPO3-Fluid einmal den f:uri.image-Viewhelper und einmal f:image-Viewhelper verwendet.

Das Ergebnis ist jeweils das Gleiche.

 

<div style="width:{myWidth}px; height: {myHeight}px;">
    <f:image src="{svg.ddr}" width="{myWidth}" >Pixelbilder sind einfach</f:image>
</div>
<div style="width:{myWidth}px; height: {myHeight}px;">
    <img src="{f:uri.image(src:'{svg.ddr}',width:'{myWidth}')}" width="{myWidth}" />
</div>
<div style="width:150px; height: 120px;">
    <img src="/typo3conf/ext/horny_shit/Resources/Public/Example/DDR.svg" alt="" width="150" height="90">
</div>

7.2.2. Flagge - SVG-Code inline mit svt-Viewhelper

Der in das HTML eingebettete SVG-Code verhält sich nicht wie ein img-Tag. Für einen ersten Versuch wurde der hornyShit::svt-Viewhelper wie der f:image-Viewhelper eingesetzt und nicht optimiert. Weil im originalen SVG die Bilddefinition in Pixeln viel größer ist als das Bild im div-Container in Pixeln sein darf, und weil der div-Container per CSS-Style auf overflow:hidden gesetzt wurde, wird nur ein Teil der DDR-Flagge gezeigt. Aktuell sehen sie hier nur eine Schwarzes Rechteck aus der linken oberen Ecke der Flagge.

 

Ein bissChen politischer Horny Shit

Ähnliche Farben sahen am 9. November 1989 wohl auch die Funktionäre der DDR, als sie die Strategie zur Übernahme der BRD aufgaben und die DDR-Bewohner frei ließen. Plötzlich trabierte eine Zweitakter-Invasion durch Westdeutschland & Europa und die Verkaufsverhandlungen zur Übernahme der DDR begannen.

Im Vergleich zur Dieselabluft im heutigen Jahr 2017 stank es damals wirklich in den Städten nach Zweitakter-Öl; - aber alle freuten sich. Wiedervereinigung und Politik waren damals wichtiger als individuelle Gesundheit. Heute, wo Gen-Lebensmittel unter dem Schutz der Regierung die gesunde Ernährung ersetzen darf, wird die effiziente Diesel-Technik geopfert, um dem Elektro-Auto zum Durchbruch zu verhelfen. Ein Umbau auf eine regionalisierte Elektro-Fahrrad-Wirtschaft ist mit Politikern der heutigen Parteien kaum denkbar, weil dasTheme Endzeit des Öls tabuisiert ist. Wie beim Klimawandel wird eine richtige Aktion mit falschen Argumenten begründet, was letztendlich aber zu einer falschen Politik führen wird.

Der Rückgang der weltweiten Erdölproduktion (Peak of Oil-These) ist absehbar. Individuelle Mobilität und die globalisierte Wirtschaft der Arbeitsteilung ist nicht mehr aufzuhalten. Ich rechne in zehn bis zwanzig Jahren mit immer mehr regionalen Hungerkrisen, mit Euro-Dollar-Finanzkrise, mit Bürgerkriegen und auch mit einem Hunger-Welt-Krieg. Das aktuelle Erblühen von Diktaturen (USA, Venezuela, Türkei, Polen, Russland, ...) und die Autarkiebestrebungen (Brexit, Tibeter, Palästinenser, Tschetschenien, Republik Krim, ... ) könnten erste unbewusste Krisenzeichen für den kommenden politischen Wechsel sein - der Zeitgeist 2017 hat nach meinem Eindruck viel Ähnlichkeit mit dem Zeitgeist aus Jahren um 1928.

Ich weiß nicht, was ich von meinen Gedanken halten soll, weil es keine Diskussion über dieses Tabu-Thema gibt: Wie lange kann die globalisierte Öl-Wirtschaft die Menschheit noch ernähren?

<div style="width:{myWidth}px;height: {myHeight}px; overflow: hidden;">
    <hornyShit:svt src="{svg.ddr}" />
</div>
<div style="width:150px;height: 120px; overflow: hidden;">
            <!--?xml version="1.0"?-->
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.0" width="1000" height="600" id="svg4463"
    >
        [...]
    </svg>
</div>

8. Manipulatoren im svt-Viewhelper - Ihre Vielfalt der Möglichkeiten

8.1. Mind-Map definiert Konfigurationsarray

Mind-Maps sind insbesondere in der Pädagogik beliebt, weil viele Erzieher, Populisten und Eltern gern die Welt einfach über natürliche hierarchische Ordnungen erklären und/oder definieren wollen. Mind-Maps bilden das autoritäre Denkmuster der Hierarchie einfach und sinnbildlich durch Abzweigungen von einem Zentrum ab.

Ihre Nutzung führt bei nicht-hierarchischen Konstrukten leicht zu Denkfehlern. Als Beispiel seien rekursive oder fraktale Probleme genannt, wie zum Beispiel die Ast-Dicke in Bäumen, die fraktale Struktur von agiler Planungsprozessen oder die fraktale Struktur Bäumen. Im Webbereich scheitert ein hierarchisches Konzept schnell bei der Visualisierung komplexerer Klick-Logiken für Frontend-Designs.

Aber ein assoziativer-Array ist per se eine hierarchisch geordnete Struktur. Es ist daher naheliegend, eine Struktur wie den Konfigurationsarray des svt-Viewhelpers mit einer Mind-Map zu beschreiben. Mit Hilfe von Icons definiert man den Datentyp des jeweiligen Eintrags und der Text beschreibt den Key im Konfigurations-Array. Im Idealfall lässt sich aus dem Namen des Key schon auf seine Bedeutung schließen. Texte ohne Icon definieren entweder Schlüsselworte oder sind als Kommentare zu lesen.

Da ein Bild oft mehr als tausend Worte sagt, wird im weiteren an Hand von kleinen Mind-Maps-Schnipsel gezeigt, wie das Mind-Map, die Konfigurationsarraystruktur und der svt-Viewhelper miteinander in Beziehung stehen. Auch sollten die Beispiele zeigen, wie das gesamte Mind-Map der Konfigurationsstruktur zu lesen ist.

 

Die Dokumentation von TypoScript und TsConfig in TYPO3 oder die Konfuguration des neuen RTE-Editors würde vielleicht übersichtlicher werden, wenn die Datenstrukturen mit Mind-Maps beschreiben werden würde. Nachteilig wäre vermutlich aber, wie im vorliegenden Text schone am Beispiel des extract-Manipulators gezeigt wurde, dass das rekursive Potential vom TypoScript so nicht wirklich gut dargestellt werden würde.

8.2. svg-Manipulatoren - Reihenfolge der Abarbeitung

Es gibt die folgenden svt-Manipulatoren des SVG-Codes, die in der nachfolgenden Reihenfolge abgearbeitet werden.

  1. checkSvg

    checkt an Hand formaler Kriterien, ob ein SVG vorliegt

  2. prepare

    erlaubt normale und reguläre Suchen-Ersetze-Manipulationen auf String-Ebene

  3. namespace

    entfernt im XML überflüssige Angaben, die manche Programme zurücklassen - es werden im SVG nur die Angaben gelassen, die in der Liste des Manipulators aufgezählt sind.

  4. remove

    entfernt ohne die Möglichkeit der Unterscheidung in allen Knoten des SVG-Codes gefährliche Attribute wie zum Beispiel 'onload'

  5. rebuild

    manipuliert Attribute und Inhalte von SVG-Knoten, die man mit Hilfe von xPath bestimmen und/oder eingrenzen kann

  6. workOver

    erlaubt wie prepare die normale oder reguläre Suchen-Ersetze-Manipulationen auf String-Ebene

  7. compress

    kennt verschiedene Modi zum Entfernen von Whitespaces (Leerzeichen, Tabs, Umbrüche).


        

    

8.3. Nutzung von remove-Manipulator in svt-Viewhelper

Das Original enthält im svg-Tag Angaben zur Weite. Eine naheliegende Idee ist, einfach die Weiten-Definition mit dem remove-Manipulator zu entfernen.

Bedenken Sie, dass mit dem remove-Maniipulator in allen Knoten des SVG-Codes das width-Attribut entfernt. Das hat hier zur Folge, dass die Flagge unsichtbar wird. (Mit den Entwicklertools Ihres Browsers finden Sie im nachfolgenden HTML-Code noch kaputt-manipulierten SVG-Code.

Im Ausgangszustand (Default) entfernt der svt-Viewhelper mit Blick auf Cross-Site-Scripting übrigens auch javascript-Attribute wie onload etc. Die genaue Liste finden Sie bei den Klassenkonstanten in der Klasse "RemoveService" im PHP-Code.

<div style="width:{myWidth}px;height: {myHeight}px; overflow: hidden;">
    <hornyShit:svt src="{svg.ddr}" remove="{attributes: 'width,height'}" />
</div>
        

        
<div style="width:150px;height: 120px; overflow: hidden;">
            <!--?xml version="1.0"?-->
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.0" id="svg4463"
    >
        [...]
    </svg>

</div>
        

8.4. Nutzung von Suchen-Ersetzen in prepare-Manipulator in svt-Viewhelper

Anmerkung: Place-Holder

Um den Viewhelepr 'übersichtlich' zu halten, wird statt bei den Parameter statt den " der &quot; verwendet. Das so escapte Anführungszeichen kann über das Attrribute-Konstrukt parameter->placeholder vor der Verarbeitung des Objekts zurückgebaut werden.

Eine zweite Möglichkeit, um die Angabe zur Weite im svg-Tag zu entfernen, bietet die Suchen-Ersetzen-Funktionalität. Per Default stoppt der svt-Viewhelper nach dem ersten Sucherfolg die aktuelle Suche-Ersetze-Manipulation.

 

Der Manipulator prepare unterscheidet bei der Option "method" zwischen normal und regular. Damit wird zwischen normaler Suche und Suche mit variablen Ausdrücken (reguläre Suche) unterschieden, wobei der eigentliche Ausdruck generisch ist.

Das Postfix NoCase, also die Angabe normalNoCase ermöglicht das Abschalten der Unterscheidung zwischen Groß- und Kleinschreibung für die lateinischen Buchstaben A-Z. (Die Groß- und Kleinschreibung von Umlauten wie ä,ö oder ü wird nicht unterstützt.

Das Präfix html, also zum Beispiel in htmlNormal, wendet die PHP-Funktion html_entity_decode auf Suchparameter und SVG an. Das dazu alternative Präfix special, also zum Beispiel in specialNormal, wendet die PHP-Funktion htmlspecialchars_decode auf die definierten Suchparameter an. Die Anführungszeichen sowie das Hochkomma können im Suchparametern so in der HTML-Codierung &quot; bzw. &acute; maskiert werden.

Für die Prä- und Postfixe gilt die lowerCamelCaseSchreibweise.

<div style="width:{myWidth}px;height: {myHeight}px; overflow: hidden;">
    <hornyShit:svt src="{svg.ddr}"
                   prepare="{ 0: {  search: 'width=&quot;1000&quot; height=&quot;600&quot;',
                                    replace: 'preserveAspectRatio=&quot;xMidYMid meet&quot; viewBox=&quot;0 0 1000 1600&quot;',
                                    method: 'normal'
                   }}"
                   parameter="{placeholder:{marker:'"',replacer:'\"'}}"
    />
</div>
        

        
<div style="width:150px;height: 120px; overflow: hidden;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 1600" id="svg4463"
    >
    [...]
    </svg>
</div>
        

8.4.1. Nutzung von Suchen-Ersetzen in workOver-Manipulator in svt-Viewhelper

Der workOver-Manipulator ist identisch mit dem prepare-Manipulator. Während die Suchen-Ersetzen-Manipulation des prepare-Manipulators als allererster Manipulator noch vor der Codereinigung mit dem namespace-Manipulator und dem SVG-weit wirkenden removeem>-Manipulator ausgeführt wird, wird der workOver Manipulator als Vorletzter, also vorm compress-Manipulator, ausgeführt.
<div style="width:{myWidth}px;height: {myHeight}px; overflow: hidden;">
    <hornyShit:svt src="{svg.ddr}"
                   workOver="{ 0: {  search: 'width=&quot;1000&quot; height=&quot;600&quot;',
                                    replace: 'preserveAspectRatio=&quot;xMidYMid meet&quot; viewBox=&quot;0 0 1000 1600&quot;',
                                    method: 'normal'
                   }}"
    />
</div>
        

        
<div style="width:150px;height: 120px; overflow: hidden;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 1600" id="svg4463"
    >
    [...]
    </svg>
</div>
        

8.5. In rebuild auf einzelner Knoten mit "xPath" zugreifen

Im svt-Viewhelper können Sie über xPath einzelne Knoten oder auch mehrere Knoten erfassen und bei diesen verschiedene Manipulationen vornehmen lassen. Wie beim Suchen-Ersetzen-Manipulationen können Sie eine Aktion auch mehrfach ausführen lassen, wobei hier aber keine Clean-Funktion vorgesehen ist.
  • attribute - Sie können Attribute ausgewählter Tages überschreiben, schaffen oder leeren.
  • child - Sie können SVG-Fragmente in den bestehende Muster-SVG-Code einfügen.
  • class - Sie können Klassen bei einzelnen Tags dynamisch hinzufügen oder entfernen.
  • image - Sie können Links zu Pixel-Bildern in den SVG-Code einfügen.
  • style - Sie können spezifisch CSS-Style-Definitionen ändern, einfügen oder überschreiben.
  • use - Sie können das Use-Element benutzen, um zum Beispiel dynamisch fraktale Kompositionen zu schaffen.
  • value - Sie können den Wert von Tags ändern, um zum Beispiel eine Schlagzeile im SVG-Teaser anzupassen.
  • delete - (geplant) Sie können Tags oder Attribute löschen.
Prüfen Sie die Operationen der verschiedenen Browser genau, denn schon bei diesem Beispiel heute (31.7.2017) zeigen die aktuellen Versionen von Firefox und Chrome durchaus unterschiedliche Ergebnisse. Unerwartet ist das Verhalten von Chrome, weil dieser das SVG - für mich unverständlicherweise - auf 50% verkleinert.

8.5.1. SVG mit rebuild-Manipulator einfach ändern

Im ersten Schritt soll die prepare-Manipulation nur die DDR-Flagge so umgebaut werden, dass sie in Klein im div-Container gezeigt wird. Dazu wird per xPath das Root-Element selektiert und mehrere Attribute werden überschrieben bzw. neu gesetzt.

        
<div style="width:{myWidth}px;height: {myHeight}px; overflow: hidden;">
    <hornyShit:svt src="{svg.ddr}"
                   rebuild="{   items: { 0: {   xPath: '/*',
                                        attribute: {0: {key:'width', new:'auto'},
                                                    1: {key:'height', new:'auto'},
                                                    2: {key:'preserveAspectRatio', new:'xMidYMid meet'},
                                                    3: {key:'viewBox', new:'0 0 1000 1600'}
                                                    }
                                            }
    }}"/>
</div>
        
<div style="width:150px;height: 120px; overflow: hidden;">
            <!--?xml version="1.0"?-->
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.0" width="auto" height="auto" id="svg4463" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 1600">
    [...]
        <g transform="translate(-896.5747,-1479.218)" id="g1991">
    [...]
    </svg>
</div>
        

8.5.2. SVG mit mehreren xPathes und rebuild-Manipulator Anweisungen reduziert

Hammer und Sichel fehlen in dem zweiten Beispiel, dass eine komplexere rebuild-Anweisung vorstellt. Neben den Manipulationen am Root-Knoten wird die Gruppe, die die Hammer und Sichel-Definitionen enthält, per xPath bestimmt und mit der CSS-Definition "display:none;" deaktiviert. Ein rebuild-Submanipulator zum Löschen von Tags und/oder Attributen ist als "toDo" vermerkt.

        
<div style="width:150px;height: 120px; overflow: hidden;">
    <hornyShit:svt src="\typo3conf\ext\horny_shit\Resources\Public\Example\DDR.svg"
                   rebuild="{   items: { 0: {   xPath: '/*',
                                            attribute: {0: {key:'width', new:'auto'},
                                                        1: {key:'height', new:'auto'},
                                                        2:{key:'preserveAspectRatio', new:'xMidYMid meet'},
                                                        3:{key:'viewBox', new:'0 0 1000 1600'}}
                                            },
                                        1: {    xPath:'//*[@id=\'g1991\']',
                                            style: { type:'add', key:'display', new:'none'}
                                        }
                            }}"
    />
</div>
        
<div style="width:150px;height: 120px; overflow: hidden;">
            <!--?xml version="1.0"?-->
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.0" width="auto" height="auto" id="svg4463" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 1600">
    [...]
          <g transform="translate(-896.5747,-1479.218)" id="g1991" style=" color:#FF00FF;display:none">
    [...]
      </g>
    </svg>
</div>
        

8.5.3. SVG mit rebuild-Manipulator, um ein Bild erweitern

Die Manipulation aus dem vorherigen Kapitel Operation wird so erweitert, dass nun zusätzlich ein SVG-Element per rebuild.child-Manipulator eingefügt wird.
Statt den Arbeiter des Monats lässt uns der große Bruder heute neben Fußball unsere Bundes-Mama Merkel anbeten. Hurra

        
<div style="width:{myWidth}px;height: {myHeight}px; overflow: hidden;">
    <hornyShit:svt src="{svg.ddr}"
                   rebuild="{   items: { 0: {   xPath: '/*',
                                            attribute: {0: {key:'width', new:'auto'},
                                                        1: {key:'height', new:'auto'},
                                                        2:{key:'preserveAspectRatio', new:'xMidYMid meet'},
                                                        3:{key:'viewBox', new:'0 0 1000 1600'}}
                                            },
                                        1: {    xPath:'//*[@id=\'g1991\']',
                                            style: { type:'add', key:'display', new:'none'}
                                        },
                                        2: {    xPath:'//*[@id=\'g1991\']',
                                                child: {    xml: '<image href=\"{svg.merkel}\" x=\"270\" y=\"-340\" height=\"1120\" width=\"1120\" style=\"z-index:100\"></image>',
                                                type: 'after'}
                                        }
                }}"
    />
</div>
        
<div style="width:150px;height: 120px; overflow: hidden;">
            <!--?xml version="1.0"?-->
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.0" width="auto" height="auto" id="svg4463" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 1600">
    [...]
            <g transform="translate(-896.5747,-1479.218)" id="g1991" style=" color:#FF00FF;display:none">
    [...]
         <image href="\typo3conf\ext\horny_shit\Resources\Public\Example\merkel3.png" x="270" y="-340" height="1120" width="1120" style="z-index:100"></image></g>
    [...]
    </svg>
</div>
        

8.6. Wiederholungen - nein, Nutzung von JSON oder PHP (Err: nicht angepasst 20170908).

Seit der Geburtstagsparty für Ackermann im April 2008, zu der Bundes-Mama Merkel eingeladen hat, ist aber klar, wer wirklich das Sagen hat. Bemerkenswert ist, dass ein halbes Jahr nach der Party der Finanzbosse in vom Merkel geführten Bundeskanzleramt die Pleite der Lehmann Brothers Realität wurde.

Was wurde bei der Banker-Party im Führungszentrum von Deutschland besprochen?
  • die Abwicklung der Finanzkrise
  • die Sozialhilfe für reiche Pleite-Banker in Form von Bad-Banks und Boni-Sicherung
  • ...
  • ...
In der bisherigen Definition wurden jeweils die Attributes des Viewhelpers verwendet, was die Lesbarkeit der Templates unnötig kompliziert macht. Man kann, wie die folgenden Beispiele zeigen, aber auch die Konfiguration als JSON-String oder als serialisierten PHP-Array übergeben.

Das nebenstehende Mind-Map zeigt an, welche Aspekte für die vier Beispiele berücksichtigt werden mussten.

Im originalen Mind-Map finden sie keine Abzweigung vom entry-Knoten im extract-Manipulatorzweig, weil der nachfolgende String eigentlich nur im JSON-Format die Konfiguration für die Manipulatoren selbstähnlich doppelt. Da Mind-Maps zur Abbildung von rekursiven und/oder fraktalen Strukturen schlecht geeignet sind, wurden sie in der Dokumentation weggelassen. Hier wurden sie, um das Verständnis zu erleichtern, trotzdem eingefügt.

Achtung:

Damit der String nicht in Konflikt mit Fluid kommen, wurden Anführungszeichen, Hochkommata und geschweite Klammern maskiert. Per Default sind die Begriffe `xyzQuotezyx`["], `xyzAcutezyx`['] und `xyzOpenBracezyx`[{] als Maskierungscode vorgesehen. Die Defaultwerte können individuell angepasst werden.

Selbstkritik:

Sorry, aber das Konzept der Maskierung der Maskierung der Maskierung ... habe ich noch nicht konsequent zu Ende gedacht, weshalb die Beschreibung hier vielleicht etwas unklar wirkt.

Tipp:

Wer dagegen Wert auf lesbare Varianten legt, der kann den Konfigurationsstring im JSON-Format auch in ein eigenes Partial auslagern.

Sorry, Hier wurden die comprimierten Dateienen noch nicht angepasst.
Ein YAML-Beispiel fehlt derzeit.

        
<div style="width:150px;height: 120px; overflow: hidden;">
    <hornyShit:svt src="\typo3conf\ext\horny_shit\Resources\Public\Example\DDR.svg"
                   extract="{   type: 'json',
                                entry: 'xyzOpenBracezyxxyzQuotezyxcheckSvgxyzQuotezyx:xyzQuotezyxxmlSvgxyzQuotezyx,xyzQuotezyxrebuildxyzQuotezyx:xyzOpenBracezyxxyzQuotezyxitemsxyzQuotezyx:[xyzOpenBracezyxxyzQuotezyxxPathxyzQuotezyx:xyzQuotezyx\/*xyzQuotezyx,xyzQuotezyxattributexyzQuotezyx:[xyzOpenBracezyxxyzQuotezyxkeyxyzQuotezyx:xyzQuotezyxwidthxyzQuotezyx,xyzQuotezyxnewxyzQuotezyx:xyzQuotezyxautoxyzQuotezyx},xyzOpenBracezyxxyzQuotezyxkeyxyzQuotezyx:xyzQuotezyxheightxyzQuotezyx,xyzQuotezyxnewxyzQuotezyx:xyzQuotezyxautoxyzQuotezyx},xyzOpenBracezyxxyzQuotezyxkeyxyzQuotezyx:xyzQuotezyxpreserveAspectRatioxyzQuotezyx,xyzQuotezyxnewxyzQuotezyx:xyzQuotezyxxMidYMid meetxyzQuotezyx},xyzOpenBracezyxxyzQuotezyxkeyxyzQuotezyx:xyzQuotezyxviewBoxxyzQuotezyx,xyzQuotezyxnewxyzQuotezyx:xyzQuotezyx0 0 1000 1600xyzQuotezyx}]},xyzOpenBracezyxxyzQuotezyxxPathxyzQuotezyx:xyzQuotezyx\/\/*[@id=xyzAcutezyxg1991xyzAcutezyx]xyzQuotezyx,xyzQuotezyxstylexyzQuotezyx:xyzOpenBracezyxxyzQuotezyxtypexyzQuotezyx:xyzQuotezyxaddxyzQuotezyx,xyzQuotezyxkeyxyzQuotezyx:xyzQuotezyxdisplayxyzQuotezyx,xyzQuotezyxnewxyzQuotezyx:xyzQuotezyxnonexyzQuotezyx}},xyzOpenBracezyxxyzQuotezyxxPathxyzQuotezyx:xyzQuotezyx\/\/*[@id=xyzAcutezyxg1991xyzAcutezyx]xyzQuotezyx,xyzQuotezyxchildxyzQuotezyx:xyzOpenBracezyxxyzQuotezyxxmlxyzQuotezyx:xyzQuotezyx<path d=&quot;m 1,1 h 148 v 148 h -148 z m 21,21 v 107 h 107 v -107 z m 68,15 h 27 l -56,77 h -27 z &quot; style=&quot;z-index:1000;fill:#0018A8; fill-rule:evenodd;&quot; transform=&quot;translate(500,-130) scale(4.3)&quot; \/>xyzQuotezyx,xyzQuotezyxtypexyzQuotezyx:xyzQuotezyxafterxyzQuotezyx}}]},xyzQuotezyxcompressxyzQuotezyx:xyzQuotezyxallxyzQuotezyx,xyzQuotezyxinfoConfigErrorxyzQuotezyx:false}'
                                }"
                   parameter="{placeholder:{marker:'"',replacer:'\"'}}"
    />
</div>
<div style="width:150px;height: 120px; overflow: hidden;">
    <hornyShit:svt src="\typo3conf\ext\horny_shit\Resources\Public\Example\DDR.svg"
                   extract="{   type: 'json',
                                entry: '{f:render(partial:\'Content/K38ParamJson\',section:\'main\')}'
                                }"
                   parameter="{placeholder:{marker:'"',replacer:'\"'}}"
    />
</div>
<div style="width:150px;height: 120px; overflow: hidden;">
    <hornyShit:svt src="\typo3conf\ext\horny_shit\Resources\Public\Example\DDR.svg"
                   extract="{   type: 'serialized',
                                entry: 'a:5:xyzOpenBracezyxs:8:xyzQuotezyxcheckSvgxyzQuotezyx;s:6:xyzQuotezyxxmlSvgxyzQuotezyx;s:7:xyzQuotezyxrebuildxyzQuotezyx;a:1:xyzOpenBracezyxs:5:xyzQuotezyxitemsxyzQuotezyx;a:3:xyzOpenBracezyxi:0;a:2:xyzOpenBracezyxs:5:xyzQuotezyxxPathxyzQuotezyx;s:2:xyzQuotezyx/*xyzQuotezyx;s:9:xyzQuotezyxattributexyzQuotezyx;a:4:xyzOpenBracezyxi:0;a:2:xyzOpenBracezyxs:3:xyzQuotezyxkeyxyzQuotezyx;s:5:xyzQuotezyxwidthxyzQuotezyx;s:3:xyzQuotezyxnewxyzQuotezyx;s:4:xyzQuotezyxautoxyzQuotezyx;}i:1;a:2:xyzOpenBracezyxs:3:xyzQuotezyxkeyxyzQuotezyx;s:6:xyzQuotezyxheightxyzQuotezyx;s:3:xyzQuotezyxnewxyzQuotezyx;s:4:xyzQuotezyxautoxyzQuotezyx;}i:2;a:2:xyzOpenBracezyxs:3:xyzQuotezyxkeyxyzQuotezyx;s:19:xyzQuotezyxpreserveAspectRatioxyzQuotezyx;s:3:xyzQuotezyxnewxyzQuotezyx;s:13:xyzQuotezyxxMidYMid meetxyzQuotezyx;}i:3;a:2:xyzOpenBracezyxs:3:xyzQuotezyxkeyxyzQuotezyx;s:7:xyzQuotezyxviewBoxxyzQuotezyx;s:3:xyzQuotezyxnewxyzQuotezyx;s:13:xyzQuotezyx0 0 1000 1600xyzQuotezyx;}}}i:1;a:2:xyzOpenBracezyxs:5:xyzQuotezyxxPathxyzQuotezyx;s:16:xyzQuotezyx//*[@id=xyzAcutezyxg1991xyzAcutezyx]xyzQuotezyx;s:5:xyzQuotezyxstylexyzQuotezyx;a:3:xyzOpenBracezyxs:4:xyzQuotezyxtypexyzQuotezyx;s:3:xyzQuotezyxaddxyzQuotezyx;s:3:xyzQuotezyxkeyxyzQuotezyx;s:7:xyzQuotezyxdisplayxyzQuotezyx;s:3:xyzQuotezyxnewxyzQuotezyx;s:4:xyzQuotezyxnonexyzQuotezyx;}}i:2;a:2:xyzOpenBracezyxs:5:xyzQuotezyxxPathxyzQuotezyx;s:16:xyzQuotezyx//*[@id=xyzAcutezyxg1991xyzAcutezyx]xyzQuotezyx;s:5:xyzQuotezyxchildxyzQuotezyx;a:2:xyzOpenBracezyxs:3:xyzQuotezyxxmlxyzQuotezyx;s:226:xyzQuotezyx<path d=&quot;m 1,1 h 148 v 148 h -148 z m 21,21 v 107 h 107 v -107 z m 68,15 h 27 l -56,77 h -27 z &quot; style=&quot;z-index:1000;fill:#0018A8; fill-rule:evenodd;&quot; transform=&quot;translate(500,-130) scale(4.3)&quot; />xyzQuotezyx;s:4:xyzQuotezyxtypexyzQuotezyx;s:5:xyzQuotezyxafterxyzQuotezyx;}}}}s:8:xyzQuotezyxcompressxyzQuotezyx;s:3:xyzQuotezyxallxyzQuotezyx;s:7:xyzQuotezyxextractxyzQuotezyx;s:0:xyzQuotezyxxyzQuotezyx;s:15:xyzQuotezyxinfoConfigErrorxyzQuotezyx;b:0;}'
                                }"
                   parameter="{placeholder:{marker:'"',replacer:'\"'}}"
    />
</div>
<div style="width:150px;height: 120px; overflow: hidden;">
    <hornyShit:svt src="\typo3conf\ext\horny_shit\Resources\Public\Example\DDR.svg"
                   extract="{   type: 'serialized',
                                entry: '{f:render(partial:\'Content/K38ParamSerialized\',section:\'main\')}'
                                }"
                   parameter="{placeholder:{marker:'"',replacer:'\"'}}"
    />
</div>
        
            Output jweile wie beim vorhergehenden Kapitel
        

8.7. ... und der compress-Manipulator zum Schluss

Der compress-Manipulator räumt den svg-String vor der Integration in das HTML auf. Je nach gewählter Methode können doppelte Weißzeichen auf ein Leerzeichen reduziert und oder Leerzeichen zwischen Tags entfernt werden.
Eine weitere Heruasforderung ist die Maskierung von " als &quot;. In der Version 0.0.3 wurde dies noch automatisch in ein Anfühurngszeichen umgewandelt Ab der immer noch experimentellen Version 0.0.4 sind dafür extra Placeholder anzugeben. Der Vorteil ist, dass man beliebige Zeichenketten als Parameter=>Palceholder verwenden kann.

Seit der Geburtstagsparty für Ackermann sind sieben Jahre ins Land gegangen. Die Verteidigungsministerin bereitet die Armee auf Einsätze im Innern vor und die Überwachung der Bevölkerung wird vorangetrieben. Ein Militärputsch beim Sieg des SPD würde mich nicht überraschen.

Das gezeigte Macht-Marken-Emblem der gezeigten Flagge ist wohl nicht mehr zeitgemäß.


        
<div style="width:{myWidth}px;height: {myHeight}px; overflow: hidden;">
    <hornyShit:svt src="{svg.ddr}"
                   rebuild="{   items: { 0: {   xPath: '/*',
                                            attribute: {0: {key:'width', new:'auto'},
                                                        1: {key:'height', new:'auto'},
                                                        2:{key:'preserveAspectRatio', new:'xMidYMid meet'},
                                                        3:{key:'viewBox', new:'0 0 1000 1600'}}
                                            },
                                        1: {    xPath:'//*[@id=\'g1991\']',
                                            style: { type:'add', key:'display', new:'none'}
                                        },
                                        2: {    xPath:'//*[@id=\'g1991\']',
                                                child: {    xml: '<path d=&quot;m 1,1 h 148 v 148 h -148 z m 21,21 v 107 h 107 v -107 z m 68,15 h 27 l -56,77 h -27 z &quot; style=&quot;z-index:1000;fill:#0018A8; fill-rule:evenodd;&quot; transform=&quot;translate(500,-130) scale(4.3)&quot; />',
                                                            type: 'after'}
                                        }
                   }}"
                   compress="all"
                   parameter="{placeholder:{marker:'"',replacer:'\"'}}"
    />
</div>
        
<div style="width:150px;height: 120px; overflow: hidden;">
            <?xml version="1.0"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" [...]> [...] <g transform="translate(-896.5747,-1479.218)" id="g1991" style=" color:#FF00FF;display:none"> [...] <path d="m 1,1 h 148 v 148 h -148 z m 21,21 v 107 h 107 v -107 z m 68,15 h 27 l -56,77 h -27 z " style="z-index:1000;fill:#0018A8; fill-rule:evenodd;" transform="translate(500,-130) scale(4.3)"/></g></g></svg>
</div>
        

9.8. Weitere svt-Viewhelper Optionen vereinfachen Beschreibung der Manipulatoren

Es gibt weitere Optionen/Viewhelper-Argumente, die die Steuerung der Manipulatoren des svt-Viewhelper erleichtern

  • ignore

    ermöglicht die Abschaltung der oben genannten Manipulatoren, um die Performance zu optimieren.

  • extract

    ermöglicht die Übergabe von Konfigurationen als serialisierter PHP-Array und im JSON-Format.

  • config

    ermöglicht die Angabe von Strings, die die (escapten) Maskierungsformen von Anführungszeichen bzw. Hochkomma definieren.

  • infoConfigError

    schaltet die Ausgabe von Fehlerhinweisen bei fehlerhafter Konfiguration an oder aus.

Die typischen Standardattribute der TYPO3-Viewhelper werden ignoriert.

9.10. Per Default aktive Manipulatoren

Folgende Aktionen werden per Default ausgeführt.

  • Entfernen überflüssiger Angaben aus unerwünschten Namespaces, die zum Beispiel von Programmen wie InkScape beim Konstruieren von SVG-Code inline angelegt werden.
  • Entfernen von potentiell gefährlichen Script-Attributen, die zum Tracking, zur Spionage oder zum Spammen missbraucht werden könnten.

Neben Sicherheitsaspekten haben die Aktionen den Vorteil, da sie den Code kompakter machen. Natürlich können Sie die Default-Manipulatoren auch über die Konfiguration abschalten, wenn sie diese aus Performance Gründen nicht haben wollen.

svt-Array - ein Konfigurationsarray für den Viewhelper

Die Steuerung des svt-Viewhelpers erfolgt über ein Konfigurations-Array. Es kann relativ leicht und flexibel an die jeweiligen Erfordernisse angepasst werden. Die erste Ebene des Konfigurationsarray wird dabei über die Attribute des svt-Viewhelpers abgebildet. Es wird hier von einem Konfigurations-Array gesprochen, weil sie die gesamte Konfiguration auch als serialisierten PHP-Array oder als JSON-Array an den Viewhelper übergeben können.

Ich hatte auch überlegt, auch das YAML-Format zuzulassen. Ich nahm davon Abstand, weil ein YAML-Parser nicht zum Standard-Umfang eines PHP-Interpreters gehört. Auch XML-Format erschien mir einwenig zu aufwendig, für die einfachen Konfigurationen.