TopLogic unterstützt Symbolschriften, die für Schaltflächen-, Menü- und Objektsymbole verwendet werden können. Um Ihre eigene Symbolschriftart einzubinden, müssen Sie die folgenden Schritte ausführen. Das Modul ext.com.fontawesome bietet die kostenlose Variante der Symbolschrift "FontAwesome" (​https://fontawesome.com/). Dieses Modul dient als detailliertes Beispiel, wie Sie Ihrer Anwendung eine eigene benutzerdefinierte Symbolschrift hinzufügen können.

Fontressourcen der Anwendung zur Verfügung stellen

Legen Sie Ihre Schriftartendateien (*.eot, *.svg, *.ttf, *.woff, *.woff2) in den Webapp-Ordner der Anwendung. So ist beispielsweise die Symbolschrift "FontAwesome" in der Distribution unter /ext.com.fontawesome/webapp/webfonts/... enthalten.

Begleitendes CSS einbinden

Legen Sie die CSS-Datei (*.css) der Schriftart in den Webapp-Ordner der Anwendung. Die CSS-Datei für "FontAwesome" befindet sich als Beispiel unter /ext.com.fontawesome/webapp/style/fontawesome/all.min.css.

Hinweis: Da die CSS-Datei der Schriftart auf die Fontressourcen verweist, stellen Sie sicher, dass beide Dateien (die CSS- und die Fontdateien) an einem Ort gespeichert sind, an dem die internen Verweise im CSS gültig sind. Z.B. "FontAwesome" hat die folgende Stilregel:

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
}

Daher müssen die Fontressourcen (z.B. fa-solid-900.eot) in einem Verzeichnis mit dem Namen ../webfonts relativ zum Style-Ordner der Anwendung (webapp/style) vorhanden sein. Alle CSS werden zur Laufzeit in eine einzige Ressource eingebunden, die dem Client über die URL https://your.server/your-app/style/top-logic.css angeboten wird, unabhängig davon, wo die tatsächlichen CSS-Dateien, die dem Theme hinzugefügt wurden, in der Anwendung gespeichert sind. Daher müssen die Referenzen im CSS relativ zu dieser URL sein.

CSS in das Standard-Theme einfügen

Fügen Sie einen Konfigurationseintrag hinzu, der die CSS-Datei der Schriftart in das Standardtheme core einfügt (oder Ihr benutzerdefiniertes Design, wenn Sie die Schriftart nur in einem einzigen Design verwenden möchten).

Legen sie hierfür in ihrem Projekt ein Verzeichnis src/main/webapp/WEB-INF/themes/core an und erstellen Sie darin eine Datei theme.xml mit folgendem Inhalt:

<theme>
    <styles>
        <style name="/style/fontawesome/all.css"/>
    </styles>
</theme>

Hinweis: Die CSS-Datei (hier das CSS des Fontawesome-Iconfonts) wird mit einem Namen in Bezug auf den Stammordner der Webapplikationsressource referenziert.

Verwendung von CSS-Symbolreferenzen

Eine Symbolschrift kühlt Symbole mit CSS-Klassen, die zu einem Inline-HTML-Element hinzugefügt wurden. Z.B. "FontAwesome" verweist auf das Symbol "Ambulanz" mit den CSS-Klassen <i class="fas fa-ambulance"></i> (siehe ​https://fontawesome.com/icons/ambulance?style=solid).

In TopLogic können Sie in allen Konfigurationseigenschaften vom Typ ThemeImage mit dem Präfix css: mit den CSS-Klassen, die durch Ihre angehängte Symbolschrift definiert sind, auf Symbolfontsymbole verweisen. Sie können z.B. das Symbol "Krankenwagen" von "FontAwesome" mit dem Symbolbezug "css:fas fa-ambulance" referenzieren.

Beispiele

Symbolreferenzen im Layout

Sie können eine Schaltfläche mit einer solchen Symbolschriftreferenz definieren (z.B. /com.top_logic.demo/webapp/WEB-INF/layouts/demo/table/tree_grid.xml):

<button id="..."
  class="..."
  image="css:fas fa-globe"
  resourceKey="..."
/>

Symbolreferenzen im Modell

Icon-Fontreferenzen können verwendet werden, um Icons zu solchen Modellelementen zu kommentieren (z.B. /com.top_logic.demo/webapp/WEB-INF/model/DemoTypes.model.xml):

<interface name="DemoTypes.X">
  <annotations>
    <instance-presentation icon="css:fas fa-handshake demo-blue"/>
  </annotations>
  ...
</interface>

Im obigen Beispiel sehen Sie, dass Sie unsere eigenen benutzerdefinierten CSS-Klassen zu denjenigen hinzufügen können, die durch Ihre Symbolschrift definiert sind, um die Anzeige des Symbols an dieser konkreten Stelle anzupassen. Im obigen Beispiel färbt die CSS-Klasse demo-blue das Symbol blau.