Top-Logic 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 Thema hinzugefügt wurden, in der Anwendung gespeichert sind. Daher müssen die Referenzen im CSS relativ zu dieser URL sein.

CSS in das Standard-Thema einfügen

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

<application xmlns:config="http://www.top-logic.com/ns/config/6.0">
  <services>
    <config service-class="com.top_logic.gui.ThemeFactory">
      <instance>
        <themes>
          <theme id="default">
            <styles>
              <style name="/style/fontawesome/all.css"/>
            </styles>
          </theme>
        </themes>
      </instance>
    </config>
  </services>
</application>

Hinweis: Die CSS-Datei 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 Top-Logic 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.