X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

ListView

Mit <ListView>-Controls können Sie (einfache oder komplexe) Datenobjekte aus Listen darstellen. Wie ein einzelnes Objekt dargestellt wird, wird als Elementvorlage definiert. Dazu wird die Darstellung innerhalb eines Layouts (Flow-Layout 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 das <ListView>-Control enthält, ein entsprechender Technical Process definiert sein.

Hinweise zur Verwendung

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

<ListView>
...
</ListView>

<ListView>-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 <ListView>-Controls definieren.

Attribut

Beschreibung

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

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 Ausklapppfeil anzeigen lassen.

Mögliche Werte:

Ganzzahl

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

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

Beispiel 1: <ListView> 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 Listen:

Beispiel_ListView.png

Beispiel 2: <ListView> 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 Liste 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>