Tray

Verwendung

Das Tray-Oberflächenelement kann dazu verwendet werden, eine Menge von Oberflächenelementen unter einer gemeinsamen Überschrift anzuordnen und zählt deshalb wie die Group zu den Oberflächenelement-Containern. Im Unterschied zur Group bietet es jedoch weitere Funktionen an, beispielsweise kann das Tray auf- bzw. zugeklappt werden.

Beispiel für die visuelle Darstellung

Hinweis

Um die Entwicklung barrierefreier Anwendungen zu ermöglichen, wird im Rahmen des Syntaxchecks die Eigenschaft accessibilityDescription überprüft, wenn die Eigenschaft caption nicht gesetzt wurde.

Es findet keine Überprüfung auf die Eigenschaft tooltip statt.

Ein gesetzter Tooltip ist bei diesem Oberflächenelement nicht zwingend erforderlich, könnte aber - wenn er detaillierte semantische Informationen enthält - durchaus Sinn machen.

Performance-Aspekte bei Tray-Views

Falls bei einem Tray-UI-Element kein Action-Handler für den Event Tray.onToggle definiert wurde, so wird der Inhalt immer an den Browser geschickt. Das Öffnen und Schließen wird komplett am Browser abgehandelt.

Falls es einen Action-Handler für den onToggle-Event gibt, wird der Inhalt des Trays nur an den Browser geschickt, falls expanded=true ist - es also offen ist.

Gehen Sie folgendermaßen vor, damit der Inhalt des Trays nur im Falle des Öffnens an den Browser geschickt wird.

Setzen Sie initial die Eigenschaft expanded des UI-Element Tray auf false
Definieren Sie einen Action-Handler für den Event Tray.onToggle.

Dann wird der Inhalt des Trays nur im offenen Zustand an den Browser geschickt. Das spart Zeit für geschlossene Trays. Allerdings wird das Phasenmodell für Views, die in einem geschlossenen Tray eingebettet wurden, trotzdem durchlaufen.
Wir empfehlen, im Tray.onToggle-Action Handler beim (ersten) Öffnen eine Navigation auf die View ausführen, die im sich öffnenden Tray angezeigt wird. Dann wird die View erst beim Öffnen des Trays instanziiert.

Implementierungsdetails

Laufzeit-Klasse

CL_WD_TRAY

Eigenschaften im View Designer

Name	Typ	Anfangswert	Bindbar
id	STRING	(automatisch)	nein
accessibilityDescription	Übersetzbarer Text		ja
activateAccessKey	WDY_BOOLEAN	false	nein
ariaLandmark	WDUI_ARIA_LANDMARK	None	ja
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	nein
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		nein
defaultButtonId	WDY_MD_UI_ELEMENT_REFERENCE		ja
design	WDUI_TRAY_DESIGN	transparent	ja
enabled	WDY_BOOLEAN	true	ja
expandable	WDY_BOOLEAN	true	ja
expanded	WDY_BOOLEAN	true	ja
handleHotkeys	WDY_BOOLEAN	false	nein
hasContentPadding	WDY_BOOLEAN	true	ja
scrollingMode	WDUI_SCROLLING_MODE	none	ja
scrollLeft	I	0	nein
scrollTop	I	0	nein
styleClassName	STRING		ja
tooltip	Übersetzbarer Text		ja
visible	WDUI_VISIBILITY	visible	ja
width	STRING		ja

Aggregationen im View Designer

Name	Kardinalität	Typ
Element	0..n	UIElement
Header	1..1	Caption
Menü	0..1	Menu
Toolbar	0..1	ToolBar

Events im View Designer

Name

onToggle

Hinweis

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

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
accessibilityDescription	ACCESSIBILITY_DESCR	WDY_MD_TRANSLATABLE_TEXT
activateAccessKey	ACTIVATE_ACCESS_KEY	WDY_BOOLEAN
ariaLandmark	ARIA_LANDMARK	WDUI_ARIA_LANDMARK
ariaLandmark: Application	CL_WD_GROUP=>E_ARIA_LANDMARK-APPLICATION
ariaLandmark: Article	CL_WD_GROUP=>E_ARIA_LANDMARK-ARTICLE
ariaLandmark: Banner	CL_WD_GROUP=>E_ARIA_LANDMARK-BANNER
ariaLandmark: Complementary	CL_WD_GROUP=>E_ARIA_LANDMARK-COMPLEMENTARY
ariaLandmark: Contentinfo	CL_WD_GROUP=>E_ARIA_LANDMARK-CONTENTINFO
ariaLandmark: Form	CL_WD_GROUP=>E_ARIA_LANDMARK-FORM
ariaLandmark: Main	CL_WD_GROUP=>E_ARIA_LANDMARK-MAIN
ariaLandmark: Navigation	CL_WD_GROUP=>E_ARIA_LANDMARK-NAVIGATION
ariaLandmark: None	CL_WD_GROUP=>E_ARIA_LANDMARK-NONE
ariaLandmark: Search	CL_WD_GROUP=>E_ARIA_LANDMARK-SEARCH
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_TRAY=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_TRAY=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_TRAY=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
defaultButtonId	DEFAULT_BUTTON_ID	WDY_MD_UI_ELEMENT_REFERENCE
design	DESIGN	WDUI_TRAY_DESIGN
design: fill	CL_WD_TRAY=>E_DESIGN-FILL
design: plain	CL_WD_TRAY=>E_DESIGN-PLAIN
design: transparent	CL_WD_TRAY=>E_DESIGN-TRANSPARENT
enabled	ENABLED	WDY_BOOLEAN
expandable	EXPANDABLE	WDY_BOOLEAN
expanded	EXPANDED	WDY_BOOLEAN
handleHotkeys	HANDLE_HOTKEYS	WDY_BOOLEAN
hasContentPadding	HAS_CONTENT_PADDING	WDY_BOOLEAN
height	HEIGHT	STRING
heightImpact	HEIGHT_IMPACT	WDUI_TRAY_HEIGHT_IMPACT
heightImpact: heightOfContent	CL_WD_TRAY=>E_HEIGHT_IMPACT-HEIGHTOFCONTEXT
heightImpact: heightOfTray	CL_WD_TRAY=>E_HEIGHT_IMPACT-HEIGHTOFTRAY
scrollingMode	SCROLLING_MODE	WDUI_SCROLLING_MODE
crollingMode: auto	CL_WD_TRAY=>E_SCROLLING_MODE-AUTO
scrollingMode: both	CL_WD_TRAY=>E_SCROLLING_MODE-BOTH
scrollingMode: none	CL_WD_TRAY=>E_SCROLLING_MODE-NONE
scrollLeft	SCROLL_LEFT	I
scrollTop	SCROLL_TOP	I
styleClassName	STYLE_CLASS_NAME	STRING
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_TRAY=>E_VISIBLE-NONE
visible: visible	CL_WD_TRAY=>E_VISIBLE-VISIBLE
width	WIDTH	STRING

Dynamische Programmierung der Ereignisse

View Designer Name	Laufzeitname
onToggle	ON_TOGGLE

Dynamische Programmierung der Aggregationen

View Designer Name	Laufzeitname	Kardinalität
Element	CHILDREN	0..n
Header	HEADER	1..1
Menü	POPUP_MENU	0..1
Toolbar	TOOLBAR	0..1

Beispiel

Beispiele für dieses Oberflächenelement finden Sie im System in der Web-Dynpro-Applikation WDR_TEST_UI_ELEMENTS sowie in der Component WDR_TEST_EVENTS in der View Tray.