Accordion

Ein Accordion-UI-Element ähnelt der vertikalen Version eines TabStrip, mit dem Unterschied, dass bei dem Accordion alle untergeordneten Elemente gleichzeitig zusammengeklappt sein können.

Beispiel für die visuelle Darstellung
(Accordion)

Ein Accordion enthält AccordionItems (und MultipleAccordionItems) die jeweils durch einen Header visualisiert werden. Wenn ein AccordionItem selektiert wird, wie im Beispiel-Screenshot Item 1, dann wird sein Inhaltsbereich unterhalb des Headers dargestellt (First item im Beispiel-Screenshot).

Hinweis Hinweis

Lassen Sie beim Einbetten komlexer UI-Elemente wie Accordion, FlashIsland, SilverlightIsland, InteractiveForm, IFrame, Gantt, etc. Vorsicht walten: AccordionItems können Scroll-Balken enthalten. Aufgrund technischer Einschränkungen des Browsers, die außerhalb der Kontrolle des Web-Dynpro-ABAP-Frameworks liegen, kann es beim Rendering dieser UI-Elemente zu Problemen mit den Scroll-Balken kommen.

Ende des Hinweises.

Vergleich mit TabStrip

Ähnliche Funktionalität
- Genau so wie das TabStrip bietet auch das Accordion Drag&Drop-Funktionalität.
- Genau so wie beim TabStrip kann immer nur ein Eintrag selektiert werden.
Andere Funktionalität
- Anders als beim TabStrip können alle Einträge gleichzeitig deselektiert werden, aber nur, wenn Sie die Eigenschaft Accordion.allowDeselect auf TRUE setzen.
- Anders als beim TabStrip gibt es zwei Arten von untergeordneten Elementen, die aggregiert werden können: AccordionItems und MultipleAccordionItems, wobei letztere lediglich AccordionItems sind, die über den Context multipliziert werden. AccordionItems und MultipleAccordionItems verhalten sich zueinander wie RoadMapStep zu MultiRoadMapStep oder BreadCrumbStep zu MultipleBreadCrumbStep.
- Anders als beim TabStrib, in dem der TabContent das TabStrip aufdrückt, drückt der AccordionItemContent das Accordion nicht auf.

Implementierungsdetails

Laufzeit-Klasse

CL_WD_ACCORDION

Eigenschaften im View Designer
Name	Typ	Anfangswert	Bindbar
id	`STRING`	(automatisch)	nein
allowDeselect	`WDY_BOOLEAN`	`false`	ja
contextMenuBehaviour	`WDUI_CONTEXT_MENU_BEHAVIOUR`	`inherit`	nein
contextMenuId	`WDY_MD_UI_ELEMENT_REFERENCE`		nein
enabled	`WDY_BOOLEAN`	`true`	ja
selectedItem	`STRING`		ja
tooltip	Übersetzbarer Text		ja
visible	`WDUI_VISIBILITY`	`visible`	ja

Aggregationen im View Designer
Name	Kardinalität	Typ
DRAG_SOURCE_INFO	`0..1`	DragSourceInfo
DROP_TARGET_INFO	`0..1`	DropTargetInfo
ITEMS	`0..n`	AccordionItem

Events im View Designer
Name
onDrop
onSelect

Hinweis Hinweis

Weitere Eigenschaften, die über Vererbung zur Verfügung stehen, sind in den dazugehörigen übergeordneten Klassen definiert. Die dazugehörigen Oberflächenelemente sind:

Ende des Hinweises.

Dynamische Programmierung

Für die dynamische Programmierung stehen dieselben Eigenschaften, Ereignisse und Aggregationen zur Verfügung wie im View Designer. Beachten Sie dabei die unterschiedlichen Schreibweisen.

Dynamische Programmierung der Eigenschaften
View Designer Name	Laufzeitname	Typ
allowDeselect	`ALLOW_DESELECT`	`WDY_BOOLEAN`
contextMenuBehaviour	`CONTEXT_MENU_BEHAVIOUR`	`WDUI_CONTEXT_MENU_BEHAVIOUR`
`contextMenuBehaviour: inherit`	`CL_WD_ACCORDION=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT`
`contextMenuBehaviour: provide`	`CL_WD_ACCORDION=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE`
`contextMenuBehaviour: suppress`	`CL_WD_ACCORDION=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS`
contextMenuId	`CONTEXT_MENU_ID`	`WDY_MD_UI_ELEMENT_REFERENCE`
enabled	`ENABLED`	`WDY_BOOLEAN`
selectedItem	`SELECTED_ITEM`	`STRING`
tooltip	`TOOLTIP`	`WDY_MD_TRANSLATABLE_TEXT`
visible	`VISIBLE`	`WDUI_VISIBILITY`
visible: none	`CL_WD_ACCORDION=>E_VISIBLE-NONE`
visible: visible	`CL_WD_ACCORDION=>E_VISIBLE-VISIBLE`

Dynamische Programmierung der Ereignisse
View Designer Name	Laufzeitname
onDrop	`ON_DROP`
onSelect	`ON_SELECT`

Dynamische Programmierung der Aggregationen
View Designer Name	Laufzeitname	Kardinalität
DRAG_SOURCE_INFO	`DRAG_SOURCE_INFO`	`0..1`
DROP_TARGET_INFO	`DROP_TARGET_INFO`	`0..1`
ITEMS	`ITEMS`	`0..n`

Beispiel

Sie finden ein Beispiel für dieses Oberflächenelement im System in der Component WDR_TEST_ACCORDION.