Image | X4Documentation

<Image>-Controls werden verwendet, um Grafiken einzubinden.

Attribut	Beschreibung
`iconColor`	Definiert die Farbe des Icons. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Verwenden Sie keine Raute vor dem Farbwert oder eine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`value`	Grafik, die angezeigt wird. Verweist auf eine Property (vom Typ `Base64` oder `Image`) innerhalb der Component. Wird benötigt, um Grafiken dynamisch anzuzeigen. Mögliche Werte: Dateipfad zum Speicherort der Grafik oder Zeichenkette für Data Binding (Image, Base64, String, URL) Wenn eine interne Grafik verwendet werden soll, dann muss die Grafikdatei im Ordner `Resources` direkt unterhalb des Web-App-Projekts liegen. Wenn auf die Grafik über eine externe URL zugegriffen werden soll, dann muss beim Input das Attribut `type="external"` gesetzt werden.
`background`	Definiert eine Farbe für den Hintergrund des Controls. Diese Einstellung überschreibt die Standardfarbe des Farbschemas! Dieses Attribut funktioniert nicht für die Controls `Maps` und `HtmlDocument`! Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Verwenden Sie keine Raute vor dem Farbwert! Verwenden Sie keine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`border`	Legt fest, ob um das Control ein Rahmen angezeigt wird. Mögliche Werte: `true` / `false`
`border-left`	Legt fest, ob ein linker Rand angezeigt wird Mögliche Werte: `true` / `false`
`border-right`	Legt fest, ob ein rechter Rand angezeigt wird Mögliche Werte: `true` / `false`
`border-top`	Legt fest, ob ein oberer Rand angezeigt wird Mögliche Werte: `true` / `false`
`border-bottom`	Legt fest, ob ein unterer Rand angezeigt wird Mögliche Werte: `true` / `false`
`enabled`	Legt fest, ob der Nutzer mit dem Control interagieren kann. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Ausdruck für Data Binding Das Attribut `enabled` ersetzt das veraltete Attribut `disabled`. `enabled="true"` entspricht damit dem veralteten Attribut `disabled="false"` .
`foreground`	Definiert eine Farbe für den Vordergrund (Texte usw.) des Controls. Diese Einstellung überschreibt die Standardfarbe des Farbschemas! Dieses Attribut funktioniert nicht für die Controls `Map` und `HtmlDocument`! Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Verwenden Sie keine Raute vor dem Farbwert! Verwenden Sie keine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`height`	Höhe des Controls Mögliche Werte: Ganzzahl
`horizontalAlign`	Richtung, in die die Elemente fließen. Reihenfolge der Elemente entspricht ihrer Deklaration. Mögliche Werte: `left` (Standard) `center` `right`
`textOverflow`	Gibt an, was passieren soll, wenn das Control voll ist. Mögliche Werte: `ellipsis` : Mit `...` zeigen, dass der Text nicht zu Ende ist `hidden` : Text abbrechen, auf ganze Wörter achten `wordBreak` : innerhalb des Wortes abbrechen `allow` (Standard): Text zwischen den Wörtern umbrechen
`tooltip`	Gibt an, dass unter einer Grafik/einem Icon ein Tooltip angezeigt werden soll. Übersetzbar Data Binding möglich Mögliche Werte: beliebige Zeichenfolge oder Zeichenkette für Data Binding
`units`	Gibt die Einheit an, die für Größenangaben gilt. Mögliche Werte: `pixels` (Standard) `percents`
`visible`	Legt fest, ob das Control sichtbar ist. Data Binding (Boolean) möglich Mögliche Werte: `true` / `false` oder Zeichenkette für Data Binding
`width`	Breite des Controls Mögliche Werte: ganze Zahlen

Die Größe des Bildes kann über die allgemeinen Attribute height und width angepasst werden. Die Angabe erfolgt standardmäßig in Pixeln.
Wenn nur Höhe oder nur Breite angegeben wird, wird das Seitenverhältnis beibehalten. Wenn sowohl Höhe als auch Breite angegeben werden, wird das Bild verzerrt.

Werden weder auf dem Image-Control noch auf dem übergeordneten Element Größenangaben definiert (über die allgemeinen Attribute height und width), kann es in manchen Browsern zu Darstellungsproblemen kommen.

`<SelectAction`> innerhalb eines Image-Controls

Die Action Select wird über das Element <SelectAction/> innerhalb von <Accordion> erzeugt und ausgelöst, sobald der Benutzer das Bild auswählt.

`<DoubleclickAction`> innerhalb eines Image-Controls

Die Action DoubleClick wird über das Element <DoubleClickAction/> innerhalb von <Image> erzeugt und ausgelöst, sobald der Benutzer auf das Bild doppelklickt.

Hinweis:

Die Elemente <SelectAction> und <DoubleClickAction/> müssen vor dem gewünschten Layouttyp (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout) eingefügt werden.

Beispiel <Image> aus statischer Ressource

Im folgenden Beispiel ist die Verwendung des <Image>-Tags gezeigt.

XML

<DetailComponent name="ExampleImage" path="ExampleImage" displayName="Example Image">
	<FlowLayout>
		<Image value="image.jpg"/>
	</FlowLayout>
</DetailComponent>

Beispiel <Image> mit Data Binding (dynamisch aus einem Technical Process)

Grafiken im Base64-Format

Im folgenden Beispiel ist die Verwendung des <Image>-Tags mit Data Binding gezeigt.

XML

<DetailComponent path="ExampleImageWithDataBinding" name="ExampleImageWithDataBinding" displayName="Example Image with Data Binding" default="true" process="Image.wrf">
    <Properties>
        <Property name="image" type="Base64" />
    </Properties>
    <FlowLayout>
        <Image value="#image"/>
    </FlowLayout>
</DetailComponent>

Die Daten, die vom Technical Process Image.wrf geliefert werden, müssen folgendes Format haben:

XML

<?xml version="1.0" encoding="UTF-8" ?>
<Ok>
    <image mediaType="image/jpeg">
		<!-- Base64String -->
	</image>
</Ok>

Grafiken aus einer externen URL