X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Image

Mit <Image>-Controls können Sie Grafiken in Web Apps einbinden.

Hinweise zur Verwendung

Ein <Image>-Control wird mit dem Element <Image> erzeugt.

<Image>
...
</Image>

<Image>-Controls können in allen verfügbaren Layouttypen verwendet werden. Weitere Informationen finden Sie unter Layouts.

Attribute

Hinweis:

Es gibt eine Reihe von Standardattributen, die für alle Controls festgelegt werden können. Weitere Informationen zu den Standardattributen finden Sie unter Standardattribute.

Zusätzlich zu den Standardattributen können Sie die folgenden Attribute für <Image>-Controls definieren.

Attribut

Beschreibung

value 

Erforderlich

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)

Hinweis:

  • Wenn eine interne Grafik verwendet werden soll, dann muss die Grafikdatei im Ordner Resources direkt unterhalb des Web App Projects liegen.

  • Wenn auf die Grafik über eine externe URL zugegriffen werden soll, dann muss beim Input das Attribut type="external" gesetzt werden.

border

Legt fest, ob um das Control ein Rahmen angezeigt wird.

Mögliche Werte:

true/false

border-left

Legt fest, ob ein linker Rahmen angezeigt wird

Mögliche Werte:

true/false

border-right

Legt fest, ob ein rechter Rahmen angezeigt wird

Mögliche Werte:

true/false

border-top

Legt fest, ob ein oberer Rahmen angezeigt wird

Mögliche Werte:

true/false

border-bottom

Legt fest, ob ein unterer Rahmen angezeigt wird

Mögliche Werte:

true/false

height

Höhe des Controls

Mögliche Werte:

Beliebige Ganzzahl

iconColor

Definiert die Farbe des Icons.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

Hinweis:

  • Verwenden Sie keine Raute vor dem Farbwert.

  • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.

  • Farbcode aus der Farbpalette der Web App, z. B. A200
    Weitere Informationen finden Sie unter Theming.

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

width

Breite des Controls

Mögliche Werte: 

Beliebige Ganzzahl

Hinweis:

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.


Actions

Für <Image>-Controls stehen Ihnen folgende Actions zur Verfügung. Weitere Informationen zu Actions finden Sie unter Actions.

<SelectAction> 

Sie können die Action Select über das Element <SelectAction/> innerhalb von <Image> einfügen. Die Action wird ausgelöst, sobald der Benutzer das Bild auswählt.

Hinweis:

Sie müssen das Element <SelectAction> vor dem gewünschten Layouttyp (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout) einfügen.

<DoubleClickAction>

Sie können die Action DoubleClick über das Element <DoubleClickAction/> innerhalb von <Image> einfügen. Die Action wird ausgelöst, sobald der Benutzer auf das Bild doppelklickt.

Hinweis:

Sie müssen das Element <DoubleClickAction> vor dem gewünschten Layouttyp (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout) einfügen.

Beispiele

Hier finden Sie verschiedene Beispiele für <Image>-Controls.

Beispiel 1: <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 2: <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>

Beispiel 3: <Image> mit Data Binding (dynamisch aus einem Technical Process) - Grafiken aus einer externen URL

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="Image" />
		</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/png" type="external">
       <![CDATA[https://softproject.de/de/wp-content/uploads/sites/2/2019/01/LogoSoftProject.png]]>
    </image>
</Ok>