JavaScript-Bibliothek agorum.icons/js/icons

Diese JavaScript-Bibliothek bietet Funktionen zum Verwenden von Icons in agorum core.

Verwendung

Binden Sie die Bibliothek stets am Anfang eines Skripts ein:

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

Ein Icon erstellen

Um die Funktionen dieser JavaScript-Bibliothek verwenden zu können, erstellen Sie ein Icon in agorum core.

Klicken Sie oben rechts in der Kopfleiste auf und dann auf Icon erstellen.
Erstellen Sie Ihr Icon.
Kopieren Sie den Code aus dem Feld Code im Abschnitt Code/SVG.
Verwenden Sie den Code für die beschriebenen Funktionen.

Aufbau von agorum-Icons

Ein Icon in agorum core definiert sich durch eine Zeichenkette und besteht aus mindestens einer bis mehreren Ebenen.

Die Zeichenkette besteht aus einzelnen Eigenschaften, die das Icon näher definieren.
Jede Eigenschaft trennen Sie durch ein Semikolon (;).
Mehrere Ebenen trennen Sie durch einen Pipe (|).
Das System stapelt die Ebenen von der untersten Ebene bis zur obersten Ebene.

Beispiel für ein Icon mit einer Ebene

agorum:rounded-square-5;color=#0069b5;scale=.9

Beispiel für ein Icon mit mehreren Ebenen

agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9

In diesem Beispiel liegt das abgerundete Quadrat unterhalb des Information-Icons.

Eigenschaften

color

Definiert die Farbe für die Umrandung und Füllung des Icons.

Geben Sie die Farbe in hexadezimaler Schreibweise an (#rrggbb).
Um die Umrandung und Füllung separat einzufärben, verwenden Sie die Eigenschaften fill und stroke.

class

Definiert die CSS-Klasse für eine Ebene, um das resultierende SVG gezielt per CSS anzupassen.

fill

Definiert die Farbe für die Füllung einer Ebene.

Geben Sie die Farbe in hexadezimaler Schreibweise an (#rrggbb).

rotate

Definiert den Winkel in Grad °, um den die Ebene im Uhrzeigersinn wird.

Das Zentrum dieser Drehung ist in der Mitte der Ebene (auch nach Verschiebungen).

scale

Definiert den Faktor, um den die Ebene skaliert wird.

Ein Wert zwischen 0 und 1 verkleinert die Ebene.
Ein Wert größer als 1 vergrößert die Ebene.

slot

Vordefinierte Kombinationen aus Skalierung und Translation, die eine Ebene an feste Stellen verschiebt:

top-left
top
top-right
left
center
right
bottom-left
bottom
bottom-right

stroke

Definiert die Farbe für die Umrandung einer Ebene.

Geben Sie die Farbe in hexadezimaler Schreibweise an (#rrggbb).

translate

Verschiebt eine Ebene in horizontale und vertikale Richtung.

Geben Sie den x-Wert, dann ein Komma (,) und dann den y-Wert an.

translate=x,y

Wert	Beschreibung
x	Verschiebt eine Ebene in horizontale Richtung. Positive Werte verschieben die Ebene nach rechts. Negative Werte verschieben die Ebene nach links.
y	Verschiebt eine Ebene in vertikale Richtung. Positive Werte verschieben die Ebene nach unten. Negative Werte verschieben die Ebene nach oben.

Das System interpretiert das Maß der Verschiebung im Verhältnis zur Größe der Ebene (nach Skalierung).

translate=.2,.5

Dieses Beispiel verschiebt die Ebene um 20 % ihrer Breite nach rechts und um 50 % ihrer Höhe nach unten.

Alternative Ansichten bei undefinierten Icons

Wenn das System automatisch Icons, etwa mit Platzhaltern, erzeugt und bei einem Datentyp auf undefinierte Icons stößt, kann es für diese undefinierten Icons nichts darstellen. Für diese Fälle verwenden Sie alternative Ansichten, die das System verwendet, wenn es die vorhergehenden Ansichten wegen undefinierter Icons nicht oder nicht vollständig darstellen kann.

Trennen Sie mehrere Ansichten durch ein Ausrufezeichen (!).

Beispiel

Im Standard verwendet das System für die Darstellung von Objekten:

fileicon:${nameExtension}!fileicon:blank

Das System versucht zunächst, das Objekt mit einem typspezifischen Icon darzustellen. Wenn ein solches Icon nicht existiert, verwendet es stattdessen fileicon:blank als Alternative.

Objekt-Icons

Um automatisch Icons für die Darstellung von Objekten zu erzeugen, verwendet agorum core das Icon-Format.
Das Icon-Format basiert auf Regeln, die sich in der MetaDB unter MAIN_MODULE_MANAGEMENT/customers/agorum.icons befinden.
Das System unterscheidet zwischen Basis-Regeln und Overlay-Regeln und interpretiert beide Regeltypen in alphabetischer Reihenfolge.

Basis-Regeln

Sie finden die Basis-Regeln in der MetaDB unter dem Pfad:

MAIN_MODULE_MANAGEMENT/customers/agorum.icons/base

Damit eine Regel gültig ist, muss sie mindestens die zwei Property-Entrys icon und selectors besitzen.
Zu einem Objekt wird eine passende Basis-Regel gewählt, die dessen Basis-Icon definiert.
Bei mehreren zutreffenden Selektoren greift der spezifischste Selektor.
Bei mehreren gleich spezifischen Selektoren greift der zuletzt definierte Selektor.

Property-Entrys

Property-Entry	Beschreibung
expanded	Definiert das Icon, das das System in einer Baumansicht verwendet, in der das zugehörige Objekt aktuell aufgeklappt ist. Gilt nur für Objekte, die in einer Baumstruktur dargestellt werden.
icon	Definiert das Icon, das das System für die Standardanzeige verwendet. Sie können über Platzhalter Eigenschaften des Objekts verwenden, etwa: fileicon:${nameExtension}
selectors	Definiert einen Selektor oder ein Array von Selektoren, von denen mindestens einer auf ein Objekt passen muss, damit das System dieses Basis-Icon verwendet.

Overlay-Regeln

Sie finden die Overlay-Regeln in der MetaDB unter dem Pfad:

MAIN_MODULE_MANAGEMENT/customers/agorum.icons/overlay

Damit eine Regel gültig ist, muss sie mindestens die zwei Property-Entrys icon und selectors besitzen.
Das System wendet zu einem Objekt alle passenden Overlay-Regeln nacheinander an.
Das System legt die Overlays der Reihenfolge nach auf das Icon. Dabei können früher definierte Overlays können von später definierten überlagert werden.

Property-Entrys

Property-Entry	Beschreibung
icon	Definiert das Icon, das das System für die Standardanzeige verwendet. Sie können über Platzhalter mit <${Name des Platzhalters}> Eigenschaften des Objekts verwenden.
selectors	Definiert einen Selektor oder ein Array von Selektoren, von denen mindestens einer auf ein Objekt passen muss, damit das System dieses Basis-Icon verwendet.

Funktionen

get

Liefert einen String, der das übergebene Icon im SVG-Format enthält.

Syntax

icons.get(<icon>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let svg = icons.get('agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9');

url

Liefert einen String, der das übergebene Icon als SVG-Data-URL enthält.

Sie können diese URL etwa als src-Attribut eines img-Tags oder in einer CSS-Regel per url() verwenden.

Syntax

icons.url(<icon>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let url = icons.url('agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9');

cls

Registriert das übergebene Icon im aktuell geöffneten Browserfenster für die Verwendung als CSS-Klasse und liefert den Namen dieser Klasse.

Diese Funktion können Sie nur innerhalb eines aguila-Kontexts verwenden.
Verwenden Sie diesen Klassennamen als icon-Property eines Widgets (etwa agorum.button), um das Icon dort anzuzeigen.

Syntax

icons.cls(<icon>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let cls = icons.cls('agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9');

tree

Registriert die übergebenen Icons im aktuell geöffneten Browserfenster für die Verwendung als Icon in einem agorum.tree- oder agorum.basicTree-Widget und gibt den Namen der dafür registrierten CSS-Klasse zurück.

Diese Funktion können Sie nur innerhalb eines aguila-Kontexts verwenden.
Verwenden Sie diesen Klassennamen als icon-Property eines Knotens in einem Widget des Typs agorum.tree oder agorum.basicTree, um das Icon dort anzuzeigen.
Die Angabe eines zweiten Icons für den Zustand expanded ist optional. Wenn Sie ausschließlich ein Icon übergeben, verwendet das System das Icon sowohl für den eingeklappten als auch den ausgeklappten Zustand des Baum-Knotens.

Syntax

icons.tree(<icon>, <expanded>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let cls = icons.tree('ionicon:folder;color=#f8c100', 'ionicon:folder-open;color=#f8c100');

list

Liefert ein Array, das alle im System registrierten Icon-Namen enthält, die Sie für die Komposition von Icons verwenden können.

Syntax

icons.list();

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let all = icons.list();

object

Liefert Icons, die das System nach dem Regelwerk für das übergebene Objekt erzeugt.

Sie erhalten mindestens das Standard-Icon.
Für ordnerähnliche Objekte erhalten Sie zusätzlich ein expandiertes Icon.

Syntax

icons.object(object);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');
let objects = require('common/objects');

let iconSet = icons.object(objects.find('/'));

/*
{
  icon: '<Standard-Icon>',
  expanded: '<expandiertes Icon>'
}
*/