ListView

ListView-Controls werden verwendet, um Datenobjekte (einfach oder komplex) aus Listen darzustellen. Wie ein einzelnes Objekt dargestellt wird, wird als Elementvorlage definiert. Dazu wird die Darstellung innerhalb eines Layouts (Flow- oder Grid-Layout) definiert. Diese Darstellung wird für jedes einzelne Objekt übernommen. Da die Datenobjekte, die dargestellt werden sollen, von einem Technical Process geliefert werden, muss in der Component, die die ListView enthält, ein entsprechender Technical Process definiert sein.

Attribut	Beschreibung
`elementWidth`	Gibt die Breite eines Elements (entspricht einem Listeneintrag in der XML-Datei) an. Mögliche Werte: Ganzzahl
`elementWidthUnits`	Gibt die Einheit an, die für Größenangabe des Elements gilt. Mögliche Werte: `pixels` `percents` (Standard)
`maxLength`	Gibt an, wie viele Einträge maximal angezeigt werden. Sind in der Liste mehr Einträge vorhanden, kann sich der Benutzer diese über einen Ausklapp-Pfeil anzeigen lassen. Mögliche Werte: Ganzzahl
`objectList`	Erforderlich. Quelle der Daten. Die Anzahl der Einträge definiert die Anzahl der angezeigten Elemente. Data Binding (Liste) möglich Mögliche Werte: Beliebige Zeichenkette
`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`
`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"`.
`fontFamily`	Legt die Schriftfamilie fest. Mit diesem Attribut wird die Standardschrift der Web App für dieses Control überschrieben. Wird das Attribut auf einem Element definiert, so wird die Schriftfamilie an die Kindelemente des Elementes vererbt, sofern die Kindelemente das Attribut `fontFamily` nicht explizit gesetzt haben. Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`. Mögliche Werte: `MainFont`: hinterlegte Hauptschrift Fontcode aus der Font-Palette, z. B. `Font04`
`fontSize`	Legt die Schriftgröße fest. Mit diesem Attribut wird die Standardschriftgröße der Web App für dieses Control überschrieben. Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`. Mögliche Werte: Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. `20` ; `20.8` ; `.9` Schriftgröße in Pixel, z. B. `20px` Schriftgröße in Punkt, z. B. `18pt` Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B.`.8em` oder `120%` Schlüsselwörter: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Legt die Breite der einzelnen Schriftzeichen fest. Mit diesem Attribut wird die Standardbreite der Schriftzeichen für dieses Control überschrieben. Mögliche Werte: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (Standard) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map`, `Chart` und `HtmlDocument` .
`fontStyle`	Legt die Neigung der Schrift fest. Mit diesem Attribut wird die Standardneigung der Schriftzeichen für dieses Control überschrieben. Mögliche Werte: `italic`: kursive Schrift `normal`: normale Schrift (Standard) `oblique`: schräg gestellter Schriftstil (berechnet) Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`.
`fontWeight`	Legt die Schriftstärke fest. Mit diesem Attribut wird die Standardstärke der Schriftzeichen für dieses Control überschrieben. Mögliche Werte: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (Standard) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`.
`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`
`horizontalAlign`	Richtung, in die die Elemente fließen. Reihenfolge der Elemente entspricht ihrer Deklaration. Mögliche Werte: `left` (Standard) `center` `right`
`visible`	Legt fest, ob das Control sichtbar ist. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Zeichenkette für Data Binding

Actions

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

Hinweis:

Das ausgewählte Element wird im Output mit dem Attribut selected="true" gekennzeichnet.

`<SelectAction>`

Sie können die Action Select über das Element <SelectAction/> innerhalb von <ListView> einfügen. Die Action wird ausgelöst, sobald der Benutzer einen Eintrag in der Listenansicht 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 <ListView> einfügen. Die Action wird ausgelöst, sobald der Benutzer auf einen Eintrag in der Listenansicht doppelklickt.

Hinweis:

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

Beispiele

Liste ohne Aktionen

Input

XML

<DetailComponent name="ExampleListView" path="ExampleListView" displayName="Example ListView" process="example.wrf">
	<Properties>
		<Property name="ListObject" type="List">
			<Property name="Caption" type="String" />
			<Property name="Name" type="String" />
			<Property name="City" type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<ListView objectList="#ListObject">
			<FlowLayout>
				<Label value="#Caption"/>
				<Label value="#Name"/>
				<Label value="#City"/>
			</FlowLayout>
		</ListView>						
	</FlowLayout>
</DetailComponent>

Output

Die Daten, die vom Technical Process geliefert werden, haben folgendes Format:

XML

<?xml version="1.0" encoding="UTF-8" ?>
<Ok>
	<ListObject>
		<Caption>Example 1</Caption>
		<Name>Max Mustermann</Name>
		<City>Ettlingen</City>
	</ListObject>
	<ListObject>
		<Caption>Example 2</Caption>
		<Name>John Doe</Name>
		<City>New York</City>
	</ListObject>
	<ListObject>
		<Caption>Example 3</Caption>
		<Name>Kari Nordmann</Name>
		<City>Oslo</City>
	</ListObject>
	...
</Ok>

Obiger Code erzeugt folgende ListView:

Liste mit Aktionen

Input

XML

<DetailComponent
	path="Dashboard"
	displayName="Dashboard"
	process="DataInput.wrf"
	default="true">
	<Properties>
		<Property
			name="ListObject"
			type="List">
			<Property
				name="name"
				type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<ListView objectList="#ListObject">
			<SelectAction process="Response.wrf" />
			<FlowLayout>
				<TextBox value="#name" />
			</FlowLayout>
		</ListView>
	</FlowLayout>
</DetailComponent>

Output

Die Daten, die vom Technical Process geliefert werden, haben folgendes Format:

Das ausgewählte Element wird im Output mit dem Attribut selected="true" gekennzeichnet.

Damit alle Einträge der ListView vollständig gelöscht werden können, muss im Output das Attribut empty="true" gesetzt werden.

XML

<?xml version="1.0" encoding="UTF-8"?>
<Action>
   <ListObject selected="true">
      <name>Ettlingen</name>
   </ListObject>
   <ListObject>
      <name>New York</name>
   </ListObject>
   <ListObject>
      <name>Oslo</name>
   </ListObject>
</Action>