ComboBox

<ComboBox>-Controls werden verwendet, um Auswahllisten mit einer automatischen Vervollständigung zu erzeugen.

Um die Action "Select" bei Auswahl eines ComboBox-Eintrags auszulösen, kann innerhalb des ComboBox-Controls eine SelectAction eingefügt werden.

Neben den allgemeinen Attributen für Controls lassen sich folgende zusätzliche Attribute für das Element <ComboBox> definieren:

Attribut	Beschreibung
`displayName`	Titel der ComboBox. Wird klein über dem Ein-/Ausgabefeld angezeigt. Übersetzbar Data Binding möglich Mögliche Werte: Beliebige Zeichenkette
`displayProperty`	Muss angegeben werden, wenn `optionsList` gesetzt ist. Text, der in der ComboBox als Auswahlmöglichkeit angezeigt wird. Mögliche Werte: Zeichenkette, die einer definierten Property entspricht. Die angegebene Zeichenkette muss einer validen Subproperty entsprechen, die in `optionsList` verwendet wird. Wenn kein `displayProperty` angegeben wird, dann wird automatisch die erste Subproperty der Property verwendet, die für `optionsList` angegeben ist.
`iconColorProperty`	Name der Property, die die Farbangaben des Icons enthält. Dieses Attribut wird nur für Material Icons verwendet. Dabei kann die Farbangabe ein Hexadezimaler Farbwert, z. B.`ff5a00` oder ein Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200` sein. Data Binding möglich Mögliche Werte: Zeichenkette, die einer definierten Property entspricht. Für relative Bindings muss das Hashtag `#` als Präfix für die Property verwendet werden, z. B `#Country.Id`.
`iconProperty`	Name der Property, die die URL der Icon-Ressource enthält. Beim Icon kann es sich entweder um eine Ressource aus dem `Resources`-Ordner, ein Material Icon oder ein über eine externe URL eingebundenes Icon handeln. Wird das Icon über einen externen Link eingebunden, muss in der Property das zusätzliche Attribut `type="external"` angegeben werden. Data Binding möglich Mögliche Werte: Zeichenkette, die einer definierten Property entspricht. Für relative Bindings muss das Hashtag `#` als Präfix für die Property verwendet werden, z. B `#Country.Id`.
`optionsAutoWidth`	Automatische Breite für die Optionsliste aktivieren Mögliche Werte: `true` (Standard): Die Breite der Optionsliste passt sich automatisch der Breite der Optionswerte an `false`: Die Breite der Optionsliste richtet sich nach der Breite der ComboBox
`optionsList`	Bei ausgelagerter Optionsliste: Quelle der Liste. Kann nur zusammen mit `displayProperty` verwendet werden. Wird per Data Binding (Liste) angesteuert. Mögliche Werte: Zeichenkette (Data Binding)
`optionsMaxWidth`	Maximale Breite der Optionsliste in Prozent oder Pixel, wobei Prozent sich auf die Bildschirmbreite bezieht Mögliche Werte: Beliebige ganze Zahl
`optionsUnits`	Definiert die Einheit für das Attribut `optionsMaxWidth` Mögliche Werte: `percents` `pixels` (Standard)
`value`	Wert, der angezeigt und gespeichert wird. Data Binding möglich Mögliche Werte: Beliebige Zeichenkette
`valueProperty`	Wert, der technisch verarbeitet wird. Wenn dieses Attribut gesetzt ist, muss auch die für diesen Wert definierte Property so heißen. Wenn dieses Attribut nicht gesetzt wird, wird `value` verwendet. Mögliche Werte: Beliebige Zeichenkette Die angegebene Zeichenkette muss einer validen Subproperty entsprechen, die in `optionsList` verwendet wird. Wenn kein `valueProperty` angegeben wird, dann wird automatisch die der Wert verwendet, der für `displayProperty` angegeben ist.
`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`! 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`
`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
`visible`	Legt fest, ob das Control sichtbar ist. Data Binding (Boolean) möglich Mögliche Werte: `true`/ `false` oder Zeichenkette für Data Binding

ComboBox enthält mindestens ein <Option>-Element, das eine Auswahloption erzeugt. Die Optionen der Auswahlliste können entweder aus einem Technical Process kommen oder manuell eingetragen werden.

Für das Element <Option> lassen sich folgende Attribute deklarieren:

Attribut	Beschreibung
`displayName`	Obligatorisch. Anzeigename der Auswahloption. Übersetzbar Data Binding möglich Mögliche Werte: Beliebige Zeichenkette Hinweis: Wenn Sie in einer ComboBox mit zahlreichen Auswahloptionen schnell zu einer bestimmten Option wechseln möchten anstatt durch die gesamte Liste zu scrollen, klicken Sie in die ComboBox, und geben Sie den Anzeigenamen der Option ganz oder teilweise ein.
`value`	Wert der Auswahloption Data Binding möglich Mögliche Werte: Beliebige Zeichenkette
`iconColor`	Farbe des Icons Dieses Attribut wird nur für Material Icons verwendet. 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`
`iconUrl`	Pfad zum verwendeten Icon Beim Icon kann es sich entweder um eine Ressource aus dem `Resources`-Ordner, einem Material Icon oder einem über eine externe URL eingebundenen Icon handeln. Mögliche Werte: Zeichenkette (URI), z. B. `clock.png` Angabe eines Material Icons nach dem Muster `icon:<MaterialIconName>` , 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. Externe URL

Die Daten für eine ausgelagerte Optionenliste müssen als XML-Daten vorliegen. Dabei müssen die Optionen in einer Liste enthalten sein:

XML

<example>
	<listElement>list element 1</listElement>
</example>
<example>
	<listElement>list element 2</listElement>
</example>

Die Properties-Definition erfolgt entsprechend der XML-Daten. Dabei ist zu beachten, dass eine zusätzliche Property saveValue angelegt wird, die als initialen Wert und Container für das Speichern der Benutzereingabe verwendet wird.

XML

<Property name="example" type="List">
	<Property name="listElement" type="String" />
</Property>
<Property name="saveValue" type="String" />

Beispiele

Beispiel `<ComboBox>`

In folgendem Beispiel ist die Verwendung des <ComboBox>-Tags gezeigt.

XML

<DetailComponent name="ExampleComboBox" path="ExampleComboBox" displayName="Example ComboBox" process="ComboBox.wrf">
	<FlowLayout>
		<ComboBox value="#saveValue">
			<Option displayName="Answer A"/>
			<Option displayName="Answer B"/>
		</ComboBox>
	</FlowLayout>
</DetailComponent>

Obiger Code führt zu folgender ComboBox:

Beispiel `<ComboBox>` mit ausgelagerter Optionsliste

Im folgenden Beispiel wird eine ausgelagerte Optionenliste verwendet. Der angezeigte Name und der zugehörige technische Wert unterscheiden sich.

Die Daten für eine ausgelagerte Optionenliste müssen als XML-Daten vorliegen. Dabei müssen die Optionen inklusive der technischen Werte in einer Liste enthalten sein:

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<ComboBoxValue></ComboBoxValue>
	<OptionList>
		<OptionValue>Red</OptionValue>
		<TechnicalValue>#FF0000</TechnicalValue>
	</OptionList>
	<OptionList>
		<OptionValue>Green</OptionValue>
		<TechnicalValue>#008000</TechnicalValue>
	</OptionList>
	<OptionList>
		<OptionValue>Blue</OptionValue>
		<TechnicalValue>#0000FF</TechnicalValue>
	</OptionList>
</Ok>

Die Properties-Definition erfolgt entsprechend der XML-Daten.

XML

<Properties>
  <Property name="ComboBoxValue" type="String"></Property>
  <Property name="OptionList" type="List">
			<Property name="OptionValue" type="String"></Property>
			<Property name="TechnicalValue" type="String"></Property>
  </Property>	
</Properties>

Das ComboBox-Control in der Component enthält eine SelectAction. Die SelectAction sendet bei Auswahl einer Option aus der ComboBox die Daten an den definierten Technical Process.

In der ComboBox werden die Daten aus der ausgelagerten Optionenliste (Attribut optionsList) verwendet. Angezeigt werden die Elemente OptionValue, im Hintergrund ausgewählt werden jedoch die technischen Daten aus dem Element TechnicalValue.

XML

<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent
	xmlns="http://softproject.de/webapp/1.0"
	process="LoadData.wrf">
<Properties>
  <Property name="ComboBoxValue" type="String"></Property>
  <Property name="OptionList" type="List">
			<Property name="OptionValue" type="String"></Property>
			<Property name="TechnicalValue" type="String"></Property>
  </Property>
</Properties>
	<FlowLayout>
		<Header value="Welcome to my new Web App!" />
		<ComboBox
			value="#ComboBoxValue"
			optionsList="#OptionList"
			valueProperty="#TechnicalValue"
			displayProperty="#OptionValue">
			<SelectAction process="SaveData.wrf" />
		</ComboBox>
	</FlowLayout>
</DetailComponent>

Hinweis:

Die XML-Daten, die für die Optionen verwendet werden sollen, müssen von einem Technical Process (im Beispiel LoadData.wrf und SaveData.wrf) zur Verfügung gestellt werden.

Beispiel `<ComboBox>` mit Icons

In folgendem Beispiel ist die Verwendung des <ComboBox>-Elements mit Icons und einer ausgelagerten Optionsliste gezeigt.

Folgende Optionen werden über einen Technical Process (hier Options.wrf) als Auswahloption zur Verfügung gestellt:

Optionsliste

XML

<?xml version="1.0" encoding="UTF-8"?>
<OkList>
	<Country>
		<Id>6</Id>
		<Name>Worldwide</Name>
		<icon>icon:public</icon>
		<color>ff5a00</color>
	</Country>
	<Country>
		<Id>2</Id>
		<Name>Italy</Name>
		<icon>italy.png</icon>
	</Country>
	<Country>
		<Id>5</Id>
		<Name>Germany</Name>
		<icon>germany.png</icon>
	</Country>
	<Country>
		<Id>3</Id>
		<Name>Portugal</Name>
		<icon>portugal.png</icon>
	</Country>
	<Country>
		<Id>4</Id>
		<Name>Spain</Name>
		<icon>spain.png</icon>
	</Country>
	<selected>6</selected>
</OkList>

Die zwei beispielhaften ComboBoxen werden wie folgt definiert:

Ausschnitt aus der Definitionsdatei

XML

...
<DetailComponent default="true" displayName="Dashboard" path="Dashboard" 
                 process="folder_1/Options.wrf">
	<Properties>
		<Property name="selected" type="Integer"/>
		<Property name="direction" type="Integer"/>
		<Property name="Country" type="List">
			<Property name="Id" type="Integer"/>
			<Property name="Name" type="String"/>
			<Property name="icon" type="Image"/>
			<Property name="color" type="Color"/>
		</Property>
		<Property name="image" type="Image"/>
	</Properties>
	<FlowLayout>
		<ComboBox displayName="$Country" displayProperty="#Name" 
                  iconColorProperty="#color"
                  iconProperty="#icon"
                  optionsList="#Country"
                  value="#selected"
                  valueProperty="#Id"/>
		<ComboBox displayName="Means of transport" value="#direction">
			<Option displayName="Bike" iconColor="A200" iconUrl="icon:directions_bike" value="1"/>
			<Option displayName="Walk" iconColor="A200" iconUrl="icon:directions_walk" value="4"/>
			<Option displayName="Subway" iconColor="A200" iconUrl="icon:directions_subway" value="3"/>
		</ComboBox>
	</FlowLayout>
</DetailComponent>
...

Das Ergebnis sieht wie folgt aus:

Beispiele

Beispiel <ComboBox>

Beispiel <ComboBox> mit ausgelagerter Optionsliste

Beispiel <ComboBox> mit Icons

Optionsliste

Ausschnitt aus der Definitionsdatei

Beispiel `<ComboBox>`

Beispiel `<ComboBox>` mit ausgelagerter Optionsliste

Beispiel `<ComboBox>` mit Icons