Wichtig
Detail
Wichtig
Detail
Wichtig
#26986
Theme-Variablen nicht direkt sondern nur über CSS-Variablen nutzen
Der Entwickler kann in Stylesheets (CSS-Dateien) die Top-Logic Themevariablen verwenden, indem der Name der Variable innerhalb von Prozentzeichen steht: %TL_THEME_VARIABLE_NAME%.
Beim Start der Anwendung werden alle CSS-Dateien zusammengefügt und pro Theme eine große umfassende Datei erzeugt, in der die Themevariablen durch ihren Wert ersetzt werden. Das ist unschön, da dem Benutzer die Möglichkeit genommen wird, anhand des Inspektors der Browserkonsole herausfinden, ob und welche Themevariable möglicherweise an der untersuchten Stelle benutzt wird.
Es ist schwer herauszufinden wie die Themevariablen mit Teilen des Layouts in Verbindung stehen.
Umsetzung
Anstatt die Themevariablen direkt durch ihren Wert zu ersetzen, werden CSS-Variablen benutzt, um so den Nutzer die Möglichkeit zu bieten, anhand der Entwicklertools herauszufinden, welche Variablen in dem untersuchten Teil des Layouts Einfluss haben.
Für jede Themevariable X`, die in einer CSS-Datei benutzt wird, wird eine CSS-Variable `--X: value mit dem Wert value der Themevariable definiert. Die Auswertung der Themevariable muss entsprechend von %X% zu var(--X) geändert werden. Die CSS-Variablen werden im CSS-Selektor :root definiert.
Code-Migration
- In CSS-Dateien nach dem regulären Ausdruck %([A-Za-z_][-A-Za-z_0-9\\.@/]*)% (Pattern des Namens einer Themevariable) suchen und mit var(--$1) ersetzen.
- CSS Variablen können nicht innerhalb von url benutzt werden (Details hier). Sofern die Variablen nicht nicht explizit im Java-Code verwendet werden, kann ihr Typ von <icon> auf <string> und ihr Wert in url(...) gewrappet werden in den entsprechenden Definitionen der theme-settings.xml. Andernfalls müssen neue Variablen angelegt werden. In den CSS-Dateien kann dann anschließend das url(var(--foobar) durch var(--foobar) für die Variable foobar ersetzt werden.
- Werte von Variablen, die zur weiteren Berechnung benutzt werden müssen innerhalb einer CSS calc-Funktion benutzt werden. Ausdrücke der Form width: -var(--myWidth) sind ungültig. Stattdessen kann der Ausdruck width: calc(-1*var(--myWidth)) verwendet werden. Um entsprechende Probleme zu identifieren kann der reguläre Ausdruck :\s*([^\s]+\s*var\(--[a-zA-Z_-]+\)|var\(--[a-zA-Z_-]+\)[^\s]+\s*)\s*; für CSS-Dateien verwendet werden. Nicht alle Suchtreffer sind Probleme, da auch CSS-Shortcuts existieren wie bspw. margin: 5px 10px, die ein Margin für alle Seiten setzen.
- Dialog#createDialog wurde entfernt.
- LayoutUtils#createDialogInfo wurde die Signatur für Breite und Höhe von int auf tl:DisplayDimension angepasst.
- In tl:SizeInfo wurden die Konfigurationsoptionen widthUnit und heightUnit entfernt und der Typ von height und widht von int zu tl:DisplayDimension geändert. Anstelle bspw. in der tl:DialogInfo die Breite und Höhe über den Wert und ihre Einheit separat zu konfigurieren, wird das nun direkt über height bzw. width gemacht.
{{{#!xml <dialogInfo
height="100"
heightUnit="px"
width="50"
widthUnit="%"
/> }}} wird zu: {{{#!xml <dialogInfo
height="100px"
width="50%"
/> }}}
- Die Templates
- editAttributedDialog.xml
- createAttributed.xml
- riskDialog.xml
- createAttributedNoSecLayout.xml
haben nun für die Parameter width und height eine Einheit.
- Die Konfiguration tl:SortConfigDialog für Dialoge zum Sortieren von Spalten hat jetzt anstelle der Optionen dialogWidth, dialogHeight, dialogWidthUnit und dialogHeightUnit nur noch die Optionen width and height (Wert mit Einheit).
Test
Demo starten. In der Anwendung mit Hilfe des Inspektors der Entwicklertools Teile des Layouts untersuchen. Es sollten die Verwendung von CSS-Variablen zu sehen sein. Insbesondere sollte in dem CSS-Selektor :root eine große Menge von Variablen definiert werden.