TreeView

TreeView-Controls werden in Detail Components verwendet, um Daten auf beliebig vielen Ebenen zu strukturieren und in einer Baumstruktur übersichtlich darzustellen.

TreeView-Controls können in allen verfügbaren Layouttypen verwendet werden:

BoxLayout
FlowLayout
GridLayout
ResponsiveLayout
TabLayout

Hinweis:

Das Element <TreeView> kann folgende Aktionen enthalten:

<SelectAction/> (siehe Action "Select")
<DoubleClickAction/> (siehe Action "DoubleClick")

Für ein TreeView-Control lassen sich folgende Attribute definieren:

Attribut	Beschreibung
`background`	Definiert eine Farbe für den Hintergrund des Controls. Diese Einstellung überschreibt die Standardfarbe des Farbschemas! Dieses Attribut funktioniert nicht für die Elemente `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`
`disabled`	Legt fest, ob der Benutzer mit dem Control interagieren kann. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Ausdruck für Data Binding
`enabled`	Legt fest, ob der Benutzer mit dem Control interagieren kann. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Ausdruck für Data Binding
`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 Font-Code 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` (Standard) `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` `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` (Standard) `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` `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. Die Reihenfolge der Elemente entspricht ihrer Deklaration. Mögliche Werte: `left` (Standard) `center` `right`
`icon`	Icon für das `TreeView`-Control Data Binding mit Base64-Werten möglich Mögliche Werte: Base64-kodierte Grafikdatei Pfad zu einer Grafikdatei als Zeichenkette (URI), z. B. `clock.png` Angabe eines Material Icons, z. B. `icon:extension` Mit `Strg`+`Leertaste` erhalten Sie eine Übersicht der verfügbaren Icons. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen. Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Das Material Icon muss mit dem Präfix `icon` angegeben werden, z. B. `icon:<MaterialIconName>`. Dieses Attribut kann nicht gleichzeitig mit `iconUrl` verwendet werden.
`iconColor`	Definiert die Farbe des Icons. 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`
`id`	Gibt einen eindeutigen Bezeichner des Elements an. Mögliche Werte: Ausdruck für Data Binding (`String`, `Integer`)
`objectList`	Erforderlich. Quelle der Daten. Die Anzahl der Einträge definiert die Anzahl der angezeigten Elemente. Mögliche Werte: Ausdruck für Data Binding (`List`)
`parentId`	Gibt einen eindeutigen Bezeichner des übergeordneten Elements an. Mögliche Werte: Ausdruck für Data Binding (`String`, `Integer`)
`textOverflow`	Gibt an, was passieren soll, wenn das Control voll ist. Mögliche Werte: `ellipsis`: Mit … zeigen, dass der Text nicht zu Ende ist (Standard) `hidden`: Text abbrechen, auf ganze Wörter achten `wordBreak`: innerhalb des Wortes abbrechen `allow`: Text zwischen den Wörtern umbrechen
`title`	Titel des Controls Mögliche Werte: Ausdruck für Data Binding (`String`, `Date`, `DateTime`, `Integer`, `Decimal`)
`visible`	Legt fest, ob das Control sichtbar ist. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Ausdruck für Data Binding

Beispiel

CODE

<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent xmlns="http://softproject.de/webapp/1.0" process="loadTreeView.wrf">
	<Properties>
		<Property name="TV_List" type="List">
			<Property name="id" type="String"></Property>
			<Property name="pid" type="String"></Property>
			<Property name="entryName" type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<Header value="TreeView in FlowLayout" />
		<FlowLayout>
			<TreeView objectList="#TV_List" id="#id" parentId="#pid" title="#entryName">
				<SelectAction componentName="Dashboard_Copy" />
			</TreeView>
		</FlowLayout>
	</FlowLayout>
</DetailComponent>

Output-Format des Prozesses

Der im Beispiel genannte Technical Process loadTreeView.wrf generiert folgenden Output:

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<TV_List>
		<id>0-1</id>
		<pid>0</pid>
		<entryName>Root</entryName>
	</TV_List>
	<TV_List>
		<id>1-1</id>
		<pid>0-1</pid>
		<entryName>Entry 1 on first sub-level</entryName>
	</TV_List>
	<TV_List>
		<id>1-2</id>
		<pid>0-1</pid>
		<entryName>Entry 2 on first sub-level</entryName>
	</TV_List>
	<TV_List>
		<id>1-3</id>
		<pid>0-1</pid>
		<entryName>Sub-root</entryName>
	</TV_List>
	<TV_List>
		<id>2-1</id>
		<pid>1-3</pid>
		<entryName>Entry 1 on second sub-level</entryName>
	</TV_List>
	<TV_List>
		<id>0-2</id>
		<pid>0</pid>
		<entryName>Second root</entryName>
	</TV_List>
</Ok>

Der oben gezeigte Beispielcode generiert folgende Ausgabe in der Web App: