Theming mit ExtJS 6.5
Ihr Anwendung ist fertig, sieht aber noch nicht so aus? Der Kunde möchte die Anwendung an sein Corporate Design angepasst haben?
Um Ihrer Anwendung ein individuelles Aussehen zu verleihen, ist es notwendig ein eigenes Theme zu erstellen. Dieser Artikel beschreibt, welche Schritte dazu notwendig sind.
Abhängig davon für welche Plattformen Sie die Anwendung entwickeln Classic Toolkit oder Modern Toolkit, unterscheiden sich die Vorgehensweisen im Detail. Wir zeigen Ihnen in diesem Artikel die grundlegenden Prinzipien des ExtJS Themings für alle Plattformen.
Ein eigenes Theme erstellen und zuweisen
Zunächst müssen Sie ein neues Theme für Ihre Anwendung erstellen. Öffnen Sie dazu im Root-Verzeichnis Ihrer Anwendung eine Kommandozeile und führen Sie folgenden Befehl aus:
sencha generate theme name-des-themes
Damit haben Sie ein leeres Theme erstellt. Dieses Theme müssen Sie nun noch Ihrer Anwendung zuweisen, indem Sie in der Datei app.json unter dem Eintrag builds den Namen des eben erstellten Themen angeben.
"theme": "name-des-themes"
Ein komplettes Theme mit Stilen für alle Komponenten zu erstellen, ist eine enorme Aufgabe, die viel Zeit in Anspruch nimmt. Deshalb bietet ExtJS bereits einige Themes an, die als Basis für das eigene Theme genutzt werden können.
Alle ExtJS Themes sind Teil einer großen Theme-Hierarchie Übersicht aller ExtJS Themes. Wählen Sie ein Basis-Theme für Ihr eigenes Theme aus, das am besten zu ihrem gewünschten Design passt. Sie können das Basis-Theme ändern, indem Sie unter packages/local/name-des-themes/package.json den Eintrag extend anpassen.
Beispiel anhand des Triton-Themas:
"extend": "theme-triton"
Nun können Sie die Anwendung starten und unter localhost öffnen.
sencha app watch
Drei Stufen zum eigenen Stil
Um Ihr Theme an die eigenen Wünsche anzupassen, stehen Ihnen nun folgende Möglichkeiten zur Verfügung.
Styling über Variablen
ExtJS stellt Ihnen eine Menge Variablen zur Verfügung, mit denen Sie das Aussehen der kompletten Anwendung und das einzelner Komponenten schnell anpassen können. Alle Variablen liegen im Theme-Verzeichnis unter: sass/var/.
Legen Sie in diesem Verzeichnis eine Datei mit dem Namen Component.scss an. In dieser Datei können Sie die Werte der globalen Variablen überschreiben und auch eigene Variablen definieren. Bitte achten Sie beim Definieren von eigenen Variablen darauf, den Wert mit dynamic zu deklarieren.
Eine Auflistung aller verfügbaren globalen Variablen finden Sie unter:
Auszug aus einer Component.scss:$base-color: #ff00f0; //globale Variable
$font-family: Arial, Helvetica; //globale Variable
$color: #000000; //globale Variable
$headline-color: dynamic (#00ff00); // eigene Variable
$link-color: dynamic (#ffff00); // eigene Variable
Variablen einer Komponente, wie zum Beispiel eines Panels, müssen in einer Ordnerstruktur abgelegt werden, die der Klassenstruktur der Komponente entspricht. So müssen zum Beispiel Variablen für das Panel in var/panel/Panel.scss (Classic-Toolkit) bzw. in var/Panel.scss (Modern-Toolkit) abgelegt werden.
Eine Auflistung der verfügbaren Variablen steht in der Dokumentation der jeweiligen Komponente unter theme variables. Im Falle eines Panels finden Sie die Variablen unter: http://docs.sencha.com/extjs/6.5.0/classic/Ext.panel.Panel.html#vars bzw. unter http://docs.sencha.com/extjs/6.5.0/modern/Ext.Panel.html#vars.
Beispiel für eine Panel-Komponente
$panel-body-background-color: #00ff00;
$panel-body-padding: 20px;
$panel-border-width: 2px;
$panel-header-background-color: #00ff00;
$panel-header-color: #ffffff;
Styling über UIs
Oft ist es notwendig einer Komponente einen abweichenden Stil zu geben, ohne den globalen Stil dieser Komponente zu überschreiben. In diesem Fall bietet ExtJS die Möglichkeit UIs zu verwenden. Leider gibt es nicht für jede Komponente eine entsprechende UI. Ob eine Komponente über eine UI verfügt, können Sie in der Dokumentation der jeweiligen Komponente unter theme mixins nachlesen. Im Fall eines Panels finden Sie die UI-Variablen unter: http://docs.sencha.com/extjs/6.5.0/classic/Ext.panel.Panel.html#sass-mixins bzw. http://docs.sencha.com/extjs/6.5.0/modern/Ext.Panel.html#sass-mixins
UIs sind technisch gesehen CSS-Mixins, in denen die Variablen der Komponente erneut überschrieben werden, um einen anderen Stil zu erhalten. Alle UIs liegen im Theme-Verzeichnis unter sass/src/. Auch UIs müssen in einer Ordnerstruktur abgelegt werden, die der Klassenstruktur der Komponente entspricht.
So müssen zum Beispiel UIs für ein Panel in src/panel/Panel.scss (Classic Toolkit) bzw. in src/Panel.scss (Modern Toolkit) abgelegt werden.
Beispiel UI für ein Panel
@include extjs-panel-ui(
$ui: 'red-panel',
$ui-header-background-color: red,
$ui-border-color: red,
$ui-header-border-color: red,
$ui-body-border-color: red,
$ui-border-width: 5px,
$ui-border-radius: 5px,
$ui-header-color: white
);
Um die UI nun der Komponente zu zuweisen, müssen Sie folgende Eigenschaft konfigurieren:
ui: 'red-panel'
Styling über eigene CSS-Klassen
Durch das Anpassen der Variablen und durch die Verwendung von UIs lassen sich bereits viele Anpassungen vornehmen. Wenn dies noch nicht ausreichen sollte, haben Sie die Möglichkeit ein eigenes CSS zu verwenden.
Dazu geben Sie Ihrer Komponente zunächst eine CSS-Klasse, um ihr einen eigenen Stil zu zuweisen.
cls: 'custom-panel'
Weitere Eigenschaften zum Setzen von CSS-Klassen entnehmen Sie bitte der Dokumentation der Komponente. Im Falle eines Panels finden Sie die Eigenschaften unter: Classic Toolkit bzw. Modern Toolkits.
Anschließend legen Sie eine Datei mit dem Namen all.scss im Theme-Verzeichnis: sass/etc/ an.
Diese Datei ist die einzige Datei, die von ExtJS in diesem Verzeichnis ausgelesen wird.
Sie können also direkt in diese Datei Ihr CSS schreiben oder Sie teilen Ihr CSS in weitere Dateien und Verzeichnisse auf und importieren diese Dateien in all.scss.
Beispiel für eine eigene CSS-Klasse:
.custom-panel{
box-shadow: 2px 2px rgba(0,0,0,0.3);
};
Styling über Sencha Themen
Eine bequeme Möglichkeit ein Theme für Ihre Anwendung zu erstellen bietet der Sencha Themer. Er ist ein eigenständiges Produkt von Sencha, um Themes für ExtJS 6 Anwendungen (ab 6.0.1) zu gestalten.
Was wird benötigt:
- Windows (Win 7+) oder Mac OS X oder Linux 32-bit/64-bit
- Sencha Cmd 6.5.1 oder höher
- Sencha Themen Lizenz (enthalten im Pro und Premium Package) oder 30-Tage Testversion
- ExtJS 6.0.1+ Applikation
Über den Themer können Sie ein neues Theme anlegen oder ein bereits bestehendes Theme bearbeiten. Der Themer bietet die Möglichkeit einer Live-Ansicht der Applikation über Fashion im Browser auszugeben.
Um eine Live-Vorschau des Themes mit Ihrer Anwendung zu sehen, müssen Sie in der app.json folgenden Code-Block im Bereich js einfügen:
{
"path": "http://localhost:8900/resources/themer/js/themerInspect.js",
"remote": true,
"bootstrap": true
}
Anschließend starten Sie Ihre Anwendung in dem Sie Im Root-Verzeichnis folgendes ausführen:
sencha app watch -fashion
Ihre Anwendung können Sie nun über den Standard-Port localhost aufrufen. Der Themer verbindet sich automatisch mit Ihrer Anwendung und jede Änderung im Themer wird jetzt live im Browser angezeigt.
Es können Standard-Komponenten ausgewählt und die SASS-Variablen über die UI angepasst werden. Über das inspect tool kann in der Beispiel-Ansicht, sowie in der laufenden Anwendung im Browser eine Komponente selektiert und direkt bearbeitet werden. Zusätzlich können UIs für bestimmte Komponenten erstellt werden.
Der Themer deckt das Styling über Variablen und UIs ab. Eigene CSS-Klassen können Sie im Themer nicht anlegen und werden in der Beispiel-Ansicht auch nicht angezeigt. Wie Sie trotzdem ein eigenes CSS in Ihre Anwendung einbinden können, entnehmen Sie bitte dem AbsatzStyling über eigene CSS-Klassen weiter oben in diesem Artikel.
Tipp aus der Praxis
Margin, Padding, Border, Height und Width direkt der Komponente zuweisen und nicht über CSS festlegen. Da ExtJS beim Rendern der Seite mit absoluten Positionen arbeitet, lassen sich so fehlerhafte Darstellungen im Layout verhindern.