Accordion

Accordion-Controls werden verwendet, um Bereiche auf einer Seite zu strukturieren und umfangreiche Listen platzsparend abzubilden. Dies ist beispielsweise dann hilfreich, wenn Sie mit zahlreichen Eingabefeldern aus verschiedenen Kategorien arbeiten. Zudem bieten Accordion-Controls ein hohes Maß an Flexibilität, da Sie jederzeit weitere Accordion-Elemente hinzufügen können und Ihre Web App immer übersichtlich bleibt.

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

BoxLayout
FlowLayout
GridLayout
ResponsiveLayout
TabLayout

Für ein Accordion-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
`expanded`	Legt fest, ob das Accordion-Element beim Öffnen der Web App aufgeklappt oder zugeklappt ist. Data Binding (Boolean) möglich Mögliche Werte: `true` (Standardwert) `false` 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` `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. Die Reihenfolge der Elemente entspricht ihrer Deklaration. Mögliche Werte: `left` (Standard) `center` `right`
`subtitle`	Untertitel des Accordion-Elements Mögliche Werte: Ausdruck für Data Binding (`String`, `Date`, `DateTime`)
`subtitleForeground`	Definiert eine Farbe für den Vordergrund des Untertitels. 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`
`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 Accordion-Elements Mögliche Werte: Ausdruck für Data Binding (`String`, `Date`, `DateTime`, `Integer`, `Decimal`, `URL`)
`visible`	Legt fest, ob das Control sichtbar ist. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Ausdruck für Data Binding

`<SelectAction`> innerhalb eines Accordion-Controls

Die Action Select wird über das Element <SelectAction/> innerhalb von <Accordion> erzeugt und ausgelöst, sobald der Benutzer das entsprechende Element im Accordion auswählt.

`<DoubleclickAction`> innerhalb eines Accordion-Controls

Die Action DoubleClick wird über das Element <DoubleClickAction/> innerhalb von <Accordion> erzeugt und ausgelöst, sobald der Benutzer auf das entsprechende Element im Accordion doppelklickt.

Hinweis:

Die Elemente <SelectAction> und <DoubleClickAction/> müssen vor dem gewünschten Layouttyp (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout) eingefügt werden.

Beispiel

CODE

<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent
	xmlns="http://softproject.de/webapp/1.0">
		<FlowLayout>
		<Header value="FlowLayout" />
		<Accordion title="FlowLayout inside" subtitle="My first accordion panel"
			expanded="false">
			<FlowLayout>
				<Label value="Welcome to my first accordion panel!" />
			</FlowLayout>
		</Accordion>	
		<Accordion title="ResponsiveLayout inside" 
			subtitle="My second accordion panel">
			<ResponsiveLayout>
				<Cell>
					<Label value="Welcome to my second accordion panel" />
				</Cell>
			</ResponsiveLayout>
		</Accordion>
		<Accordion title="TabLayout inside" subtitle="My third accordion panel">
			<TabLayout>
				<Tab displayName="Test">
					<FlowLayout>
						<Label value="This is a demo accordion panel."></Label>
					</FlowLayout>
				</Tab>
				<Tab displayName="Test">
					<FlowLayout>
						<Checkbox checked="true" displayName="I am a test checkbox" />
					</FlowLayout>
				</Tab>
			</TabLayout>
		</Accordion>
		<Accordion title="Disabled" subtitle="This accordion panel is disabled by default"
			disabled="true">
			<GridLayout>
				<Label value="Label" />
			</GridLayout>
		</Accordion>
		<Accordion title="Expanded by default" subtitle="Click the arrow to collapse me"
			expanded="true">
			<FlowLayout>
				<Label value="Insert the desired content here" />
			</FlowLayout>
		</Accordion>
		<Accordion title="Foreground color" subtitle="Choose your preferred foreground color"
			expanded="false" foreground="500">
			<FlowLayout>
				<Label value="Label"></Label>
				<Checkbox checked="true" displayName="I am a test checkbox" />
			</FlowLayout>
		</Accordion>
		<Accordion title="Background color" 
			subtitle="Adapt the look-and-feel of your accordion panel" background="A200" foreground="900">
			<ResponsiveLayout>
				<Cell>
					<Label value="Select your favorite background color" />
				</Cell>
			</ResponsiveLayout>
		</Accordion>
	</FlowLayout>
</DetailComponent>

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

<SelectAction> innerhalb eines Accordion-Controls

<DoubleclickAction> innerhalb eines Accordion-Controls

Beispiel

`<SelectAction`> innerhalb eines Accordion-Controls

`<DoubleclickAction`> innerhalb eines Accordion-Controls