Bild/Icon
Ein Bild/Icon dient dazu Grafiken oder auch statisch gerenderten HTML Code in einem Formular darzustellen. Die Bild-URL dient dabei entweder als Pfad zur Bilddatei oder zum Eingeben eines HTML Markups.
Bild URL:
Relative Pfade (wie im Bild oben) werden ausgehend vom web-Ordner auf dem Server interpertiert. In diesen Ordner oder dessen Unterordnern können Bilddateien z. B. über den Dateimanager hochgeladen werden.
Bildateien, die im Browser (per "Button [...]") auswählbar erscheinen sollen, müssen im Unterordner "assets" oder in einem seiner Unterordner platziert werden.
Als Bild-URL können aber auch externe Links zu Bilddateien angegeben werden, sofern diese über den Server abgerufen werden können.
►HINWEIS◄ In einem Portal (s. Portale) kann der Wert für Bild URL an ein Datenfeld gebunden werden, während in Erfassungsmasken kein Datenfeld zugeordnet werden kann. In beiden Fällen kann allerdings mit der Aktion Wert setzen zur Laufzeit das angezeigte Bild beeinflusst werden, indem ein gültiger Pfad als Wert zugewiesen wird. Befindet sich das Bild/Icon in einem Wiederholendes Element Container, sollte für das Datenfeld die Option Überspringen gesetzt sein, damit das per Wert setzen definierte Bild zuverlässig erscheint und nicht durch Mechanismen des Containers übersteuert wird.
Tipp: Als Elementwert wird neben URLs und HTML Markup auch ein Objekt vom Typ FileInfo unterstützt. Dieses wird beispielsweise von einem Datei Element geliefert.
Zoombar:
Durch das Aktivieren der "Zoombar" Option, wird es dem Benutzer ermöglicht, das gezeigte Bild zu zoomen. Auf Desktop-PCs kann ein Zoom durch halten der STRG (Mac: CMD) Taste und gleichzeitigem betätigen des Mausrads erreicht werden. Ebenfalls ist ein Doppelklick an die gewünschte Stelle des Bildes oder aber auch eine "Pinch"-Geste auf dem Touchpad möglich.
Hinweis: Die Zoomfunktion steht nicht für den HTML-Modus zur Verfügung!
Die Option Zoomhinweis anzeigen blendet dem Benutzer dabei einen Hinweis zum Zoomen ein. Diese Option ist nicht verfügbar, wenn die Option "Zoombar" nicht aktiviert ist.
Skalieren von Bildern
Wenn die Eigenschaften "Breite" und "Höhe" (in der Eigenschaften-Rubrik "Allgemein") auf "Auto" eingestellt sind, erscheint das Bild in Originalgröße.
Wenn man genau eine der beiden Optionen auf "Fix" stellt, kann man diese Dimension des Bilds exakt skalieren und die andere Dimension wird über das Original-Seitenverhältnis des Bilds passend berechnet.
Wenn man beide Optionen auf "Fix" stellt, kann man beide Dimensionen des Bild-Elements exakt vorgeben. Das Bild wird dann unter Beibehaltung des Original-Seitenverhältnisses in diesen Bereich eingepasst und erscheint dann ggf. zentriert mit Leeraum links/rechts bzw. oben/unten.
Ein vom Original abweichendes Seitenverhältnis kann nicht erzwungen werden. Das Bild wird also nie gezerrt oder gestaucht.
Darstellung in der Erfassungsmaske
►HINWEIS◄ Bild/Icon Elemente bieten zum Konfigurieren von Verhalten auch das Ereignis "Angeklickt" (analog zum Button Element) an.
Font Awesome Icons
Neben den gängigen Bildformaten stehen auch die im Web gängigen "Font Awesome" Icons zur Verfügung. Diese befinden sich im Reiter "Font Awesome" des Asset Pickers. Die URL für solche Icons sieht wie folgt aus:
fa://fa-<icon name>
Der wesentliche Vorteil an diesem Icon-Set ist, dass keine Bilddateien hochgeladen werden müssen und eine beliebig hohe Größenskalierung erzielbar ist.
Außerdem können mehrere Icons mit den im Abschnitt Arbeiten mit Bildressourcen (Icons) beschriebenen Methoden kombiniert werden.
Bei "Font Awesome" Icons handelt es sich tatsächlich nicht um Bilder, sondern um eine spezielle Schriftart, daher orientiert sich hierbei die Größe aus technischen Gründen stets an der Höhe des Bild/Icon Elements, welches dann die interne Schriftgröße entsprechend anpasst.
Hinweis: Bei einer "auto" Höhe fällt die Symbolgröße auf die aktuell gültige Schriftgröße zurück.
Beispiel für ein "Font Awesome" Icon
|
|
|
HTML Markup
Wenn als Bild URL HTML code anstelle einer URL zu einem Bild angegeben ist, dann wird dieser Markup-Code in einem IFRAME-Element gerendert:
<table style="border:3px solid black; text-align:center; font-family:sans-serif; font-weight:bold"> <tr> <td style="background-color:red;color:white">I</td> <td style="background-color:green;color:white">II</td> </tr> <tr> <td style="background-color:blue;color:white">III</td> <td style="background-color:yellow">IV</td> </tr></table> Dieser HTML-Code generiert ein HTML-Tabellenobjekt innerhalb des als Bild/Icon-Element erzeugten IFRAME-Objekts:
|
|
|
|
