Package com.gluonhq.charm.glisten.control

Class NavigationDrawer

java.lang.Object

javafx.scene.Node

javafx.scene.Parent

javafx.scene.layout.Region

javafx.scene.control.Control

com.gluonhq.charm.glisten.control.NavigationDrawer

@DefaultProperty("items")
public class NavigationDrawer
extends javafx.scene.control.Control

NavigationDrawer is a panel that displays the application main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user touches the nav icon in the AppBar.

Navigation Drawer is logically divided into three vertical sections:

• Header - Top most section of Navigation Drawer and usually consists of an image, title and subtitle. The recommended node for header is NavigationDrawer.Header. However, a user is not restricted to use NavigationDrawer.Header and can use any Node, with custom style(s).
• Items - The list of nodes that a user wants to display beneath the header node. The recommended node for items is NavigationDrawer.Item. However, a user is not restricted to use NavigationDrawer.Item and can use any Node, with custom style(s).
• Footer - Bottom most section of the Navigation Drawer and is usually used for showing secondary items like help, settings, and feedback. These items cannot be selected i.e. they do not retain a special selection style when clicked or pressed unlike, NavigationDrawer.Item. The recommended node for footer is NavigationDrawer.Footer. However, a user is not restricted to use NavigationDrawer.Footer and can use any Node, with custom style(s).

None of the above sections are mandatory. A user may set one or more sections as per their requirements.

Example

The following example creates a View that has a navigation button which, when pressed, shows a SidePopupView with a NavigationDrawer. That View is set as the initial View.

 public class NavigationDrawer extends MobileApplication {
 private static final String NAVIGATION_DRAWER = "NavigationDrawer";

  @Override
   public void init() {
     NavigationDrawer navigationDrawer = new NavigationDrawer();
     Header header = new Header("GluonHQ", "support@gluonhq.com");
     navigationDrawer.setHeader(header);
     navigationDrawer.getItems().setAll(new Item("Inbox", MaterialDesignIcon.INBOX.graphic()),
                                        new Item("Starred", MaterialDesignIcon.STAR.graphic()));
     Node footer = new Footer("Settings", MaterialDesignIcon.SETTINGS.graphic());
     navigationDrawer.setFooter(footer);
     addLayerFactory(NAVIGATION_DRAWER, () -> new SidePopupView(navigationDrawer));
     addViewFactory(HOME_VIEW, () -> {
       View view = new View("HomeView");
       view.showingProperty().addListener((obs, oldValue, newValue) -> {
         if (newValue) {
           AppBar appBar = MobileApplication.getInstance().getAppBar();
           Button navButton = MaterialDesignIcon.MENU.button();
           navButton.setOnAction(event -> showLayer(NAVIGATION_DRAWER));
           appBar.setNavIcon(navButton);
           appBar.setTitleText("NavigationDrawer");
         }
       });
       return view;
     });
   }
 }
 

Since:

2.0.0

Property Summary

Properties

Type	Property	Description
javafx.beans.property.ObjectProperty<javafx.scene.Node>	footer	The footer represents the bottom most node of Navigation Drawer and is usually used for showing secondary items like help, settings, and feedback.
javafx.beans.property.ObjectProperty<javafx.scene.Node>	header	The header represents the top most node of Navigation Drawer and usually consists of an image, title and subtitle.
javafx.beans.property.ReadOnlyObjectProperty<javafx.scene.Node>	selectedItem	Refers to the selected item property, which is used to indicate the currently selected item in the selection model.

Properties inherited from class javafx.scene.control.Control

contextMenu, skin, tooltip

Properties inherited from class javafx.scene.Node

accessibleHelp, accessibleRoleDescription, accessibleRole, accessibleText, blendMode, boundsInLocal, boundsInParent, cacheHint, cache, clip, cursor, depthTest, disabled, disable, effectiveNodeOrientation, effect, eventDispatcher, focused, focusTraversable, hover, id, inputMethodRequests, layoutBounds, layoutX, layoutY, localToParentTransform, localToSceneTransform, managed, mouseTransparent, nodeOrientation, onContextMenuRequested, onDragDetected, onDragDone, onDragDropped, onDragEntered, onDragExited, onDragOver, onInputMethodTextChanged, onKeyPressed, onKeyReleased, onKeyTyped, onMouseClicked, onMouseDragEntered, onMouseDragExited, onMouseDragged, onMouseDragOver, onMouseDragReleased, onMouseEntered, onMouseExited, onMouseMoved, onMousePressed, onMouseReleased, onRotate, onRotationFinished, onRotationStarted, onScrollFinished, onScroll, onScrollStarted, onSwipeDown, onSwipeLeft, onSwipeRight, onSwipeUp, onTouchMoved, onTouchPressed, onTouchReleased, onTouchStationary, onZoomFinished, onZoom, onZoomStarted, opacity, parent, pickOnBounds, pressed, rotate, rotationAxis, scaleX, scaleY, scaleZ, scene, style, translateX, translateY, translateZ, viewOrder, visible

Properties inherited from class javafx.scene.Parent

needsLayout

Properties inherited from class javafx.scene.layout.Region

background, border, cacheShape, centerShape, height, insets, maxHeight, maxWidth, minHeight, minWidth, opaqueInsets, padding, prefHeight, prefWidth, scaleShape, shape, snapToPixel, width

Nested Class Summary

Nested Classes

Modifier and Type	Class	Description
static class	NavigationDrawer.Footer	A convenience class for creating a default footer for NavigationDrawer with styled implementations according to Material Design Guidelines.
static class	NavigationDrawer.Header	A convenience class for creating a default header for NavigationDrawer with styled implementations according to Material Design Guidelines.
static class	NavigationDrawer.Item	A convenience class for creating a default items for NavigationDrawer with styled implementations according to Material Design Guidelines.
static class	NavigationDrawer.ViewItem	A convenience class for creating a default items for NavigationDrawer with styled implementations according to Material Design Guidelines.

Field Summary

Fields

Modifier and Type	Field	Description
static javafx.event.EventType<javafx.event.Event>	ITEM_SELECTED	Event type that happens whenever a item on the drawer is selected, regardless if it was already selected or not

Fields inherited from class javafx.scene.Node

BASELINE_OFFSET_SAME_AS_HEIGHT

Fields inherited from class javafx.scene.layout.Region

USE_COMPUTED_SIZE, USE_PREF_SIZE

Constructor Summary

Constructors

Constructor	Description
NavigationDrawer()	Creates a default NavigationDrawer.
NavigationDrawer(javafx.collections.ObservableList<javafx.scene.Node> items)	Creates a default NavigationDrawer which will stack the contents retrieved from the provided items vertically.
NavigationDrawer(javafx.scene.Node header, javafx.collections.ObservableList<javafx.scene.Node> items)	Creates a default NavigationDrawer which will stack the contents retrieved from the provided header and items vertically.
NavigationDrawer(javafx.scene.Node header, javafx.scene.Node footer, javafx.collections.ObservableList<javafx.scene.Node> items)	Creates a default NavigationDrawer which will stack the contents retrieved from the provided header, footer and items.

Method Summary

Modifier and Type	Method	Description
protected javafx.scene.control.Skin<?>	createDefaultSkin()
javafx.beans.property.ObjectProperty<javafx.scene.Node>	footerProperty()	The footer represents the bottom most node of Navigation Drawer and is usually used for showing secondary items like help, settings, and feedback.
javafx.scene.Node	getFooter()	Returns an node which is used as the footer of NavigationDrawer.
javafx.scene.Node	getHeader()	Returns an object of the header.
javafx.collections.ObservableList<javafx.scene.Node>	getItems()	Returns an ObservableList that contains the items currently being shown to the user in the content area.
javafx.scene.Node	getSelectedItem()	Returns the currently selected object.
javafx.beans.property.ObjectProperty<javafx.scene.Node>	headerProperty()	The header represents the top most node of Navigation Drawer and usually consists of an image, title and subtitle.
javafx.beans.property.ReadOnlyObjectProperty<javafx.scene.Node>	selectedItemProperty()	Refers to the selected item property, which is used to indicate the currently selected item in the selection model.
void	setFooter(javafx.scene.Node footer)	Sets the underlying footer for the NavigationDrawer.
void	setHeader(javafx.scene.Node header)	Sets the underlying header for the NavigationDrawer.
void	setSelectedItem(javafx.scene.Node value)	Sets the value of the property selectedItem.

Methods inherited from class javafx.scene.control.Control

computeMaxHeight, computeMaxWidth, computeMinHeight, computeMinWidth, computePrefHeight, computePrefWidth, contextMenuProperty, executeAccessibleAction, getBaselineOffset, getClassCssMetaData, getContextMenu, getControlCssMetaData, getCssMetaData, getInitialFocusTraversable, getSkin, getTooltip, isResizable, layoutChildren, queryAccessibleAttribute, setContextMenu, setSkin, setTooltip, skinProperty, tooltipProperty

Methods inherited from class javafx.scene.Node

accessibleHelpProperty, accessibleRoleDescriptionProperty, accessibleRoleProperty, accessibleTextProperty, addEventFilter, addEventHandler, applyCss, autosize, blendModeProperty, boundsInLocalProperty, boundsInParentProperty, buildEventDispatchChain, cacheHintProperty, cacheProperty, clipProperty, computeAreaInScreen, contains, contains, cursorProperty, depthTestProperty, disabledProperty, disableProperty, effectiveNodeOrientationProperty, effectProperty, eventDispatcherProperty, fireEvent, focusedProperty, focusTraversableProperty, getAccessibleHelp, getAccessibleRole, getAccessibleRoleDescription, getAccessibleText, getBlendMode, getBoundsInLocal, getBoundsInParent, getCacheHint, getClip, getContentBias, getCursor, getDepthTest, getEffect, getEffectiveNodeOrientation, getEventDispatcher, getId, getInitialCursor, getInputMethodRequests, getLayoutBounds, getLayoutX, getLayoutY, getLocalToParentTransform, getLocalToSceneTransform, getNodeOrientation, getOnContextMenuRequested, getOnDragDetected, getOnDragDone, getOnDragDropped, getOnDragEntered, getOnDragExited, getOnDragOver, getOnInputMethodTextChanged, getOnKeyPressed, getOnKeyReleased, getOnKeyTyped, getOnMouseClicked, getOnMouseDragEntered, getOnMouseDragExited, getOnMouseDragged, getOnMouseDragOver, getOnMouseDragReleased, getOnMouseEntered, getOnMouseExited, getOnMouseMoved, getOnMousePressed, getOnMouseReleased, getOnRotate, getOnRotationFinished, getOnRotationStarted, getOnScroll, getOnScrollFinished, getOnScrollStarted, getOnSwipeDown, getOnSwipeLeft, getOnSwipeRight, getOnSwipeUp, getOnTouchMoved, getOnTouchPressed, getOnTouchReleased, getOnTouchStationary, getOnZoom, getOnZoomFinished, getOnZoomStarted, getOpacity, getParent, getProperties, getPseudoClassStates, getRotate, getRotationAxis, getScaleX, getScaleY, getScaleZ, getScene, getStyle, getStyleableParent, getStyleClass, getTransforms, getTranslateX, getTranslateY, getTranslateZ, getTypeSelector, getUserData, getViewOrder, hasProperties, hoverProperty, idProperty, inputMethodRequestsProperty, intersects, intersects, isCache, isDisable, isDisabled, isFocused, isFocusTraversable, isHover, isManaged, isMouseTransparent, isPickOnBounds, isPressed, isVisible, layoutBoundsProperty, layoutXProperty, layoutYProperty, localToParent, localToParent, localToParent, localToParent, localToParent, localToParentTransformProperty, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToSceneTransformProperty, localToScreen, localToScreen, localToScreen, localToScreen, localToScreen, lookupAll, managedProperty, mouseTransparentProperty, nodeOrientationProperty, notifyAccessibleAttributeChanged, onContextMenuRequestedProperty, onDragDetectedProperty, onDragDoneProperty, onDragDroppedProperty, onDragEnteredProperty, onDragExitedProperty, onDragOverProperty, onInputMethodTextChangedProperty, onKeyPressedProperty, onKeyReleasedProperty, onKeyTypedProperty, onMouseClickedProperty, onMouseDragEnteredProperty, onMouseDragExitedProperty, onMouseDraggedProperty, onMouseDragOverProperty, onMouseDragReleasedProperty, onMouseEnteredProperty, onMouseExitedProperty, onMouseMovedProperty, onMousePressedProperty, onMouseReleasedProperty, onRotateProperty, onRotationFinishedProperty, onRotationStartedProperty, onScrollFinishedProperty, onScrollProperty, onScrollStartedProperty, onSwipeDownProperty, onSwipeLeftProperty, onSwipeRightProperty, onSwipeUpProperty, onTouchMovedProperty, onTouchPressedProperty, onTouchReleasedProperty, onTouchStationaryProperty, onZoomFinishedProperty, onZoomProperty, onZoomStartedProperty, opacityProperty, parentProperty, parentToLocal, parentToLocal, parentToLocal, parentToLocal, parentToLocal, pickOnBoundsProperty, pressedProperty, pseudoClassStateChanged, relocate, removeEventFilter, removeEventHandler, requestFocus, resizeRelocate, rotateProperty, rotationAxisProperty, scaleXProperty, scaleYProperty, scaleZProperty, sceneProperty, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, screenToLocal, screenToLocal, screenToLocal, setAccessibleHelp, setAccessibleRole, setAccessibleRoleDescription, setAccessibleText, setBlendMode, setCache, setCacheHint, setClip, setCursor, setDepthTest, setDisable, setDisabled, setEffect, setEventDispatcher, setEventHandler, setFocused, setFocusTraversable, setHover, setId, setInputMethodRequests, setLayoutX, setLayoutY, setManaged, setMouseTransparent, setNodeOrientation, setOnContextMenuRequested, setOnDragDetected, setOnDragDone, setOnDragDropped, setOnDragEntered, setOnDragExited, setOnDragOver, setOnInputMethodTextChanged, setOnKeyPressed, setOnKeyReleased, setOnKeyTyped, setOnMouseClicked, setOnMouseDragEntered, setOnMouseDragExited, setOnMouseDragged, setOnMouseDragOver, setOnMouseDragReleased, setOnMouseEntered, setOnMouseExited, setOnMouseMoved, setOnMousePressed, setOnMouseReleased, setOnRotate, setOnRotationFinished, setOnRotationStarted, setOnScroll, setOnScrollFinished, setOnScrollStarted, setOnSwipeDown, setOnSwipeLeft, setOnSwipeRight, setOnSwipeUp, setOnTouchMoved, setOnTouchPressed, setOnTouchReleased, setOnTouchStationary, setOnZoom, setOnZoomFinished, setOnZoomStarted, setOpacity, setPickOnBounds, setPressed, setRotate, setRotationAxis, setScaleX, setScaleY, setScaleZ, setStyle, setTranslateX, setTranslateY, setTranslateZ, setUserData, setViewOrder, setVisible, snapshot, snapshot, startDragAndDrop, startFullDrag, styleProperty, toBack, toFront, toString, translateXProperty, translateYProperty, translateZProperty, usesMirroring, viewOrderProperty, visibleProperty

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait

Methods inherited from class javafx.scene.Parent

getChildren, getChildrenUnmodifiable, getManagedChildren, getStylesheets, isNeedsLayout, layout, lookup, needsLayoutProperty, requestLayout, requestParentLayout, setNeedsLayout, updateBounds

Methods inherited from class javafx.scene.layout.Region

backgroundProperty, borderProperty, cacheShapeProperty, centerShapeProperty, getBackground, getBorder, getHeight, getInsets, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpaqueInsets, getPadding, getPrefHeight, getPrefWidth, getShape, getUserAgentStylesheet, getWidth, heightProperty, insetsProperty, isCacheShape, isCenterShape, isScaleShape, isSnapToPixel, layoutInArea, layoutInArea, layoutInArea, layoutInArea, maxHeight, maxHeightProperty, maxWidth, maxWidthProperty, minHeight, minHeightProperty, minWidth, minWidthProperty, opaqueInsetsProperty, paddingProperty, positionInArea, positionInArea, prefHeight, prefHeightProperty, prefWidth, prefWidthProperty, resize, scaleShapeProperty, setBackground, setBorder, setCacheShape, setCenterShape, setHeight, setMaxHeight, setMaxSize, setMaxWidth, setMinHeight, setMinSize, setMinWidth, setOpaqueInsets, setPadding, setPrefHeight, setPrefSize, setPrefWidth, setScaleShape, setShape, setSnapToPixel, setWidth, shapeProperty, snappedBottomInset, snappedLeftInset, snappedRightInset, snappedTopInset, snapPosition, snapPositionX, snapPositionY, snapSize, snapSizeX, snapSizeY, snapSpace, snapSpaceX, snapSpaceY, snapToPixelProperty, widthProperty

Methods inherited from interface javafx.css.Styleable

getStyleableNode

Property Detail

header

public final javafx.beans.property.ObjectProperty<javafx.scene.Node> headerProperty

The header represents the top most node of Navigation Drawer and usually consists of an image, title and subtitle.

Returns:

An ObjectProperty containing the header instance.

footer

public final javafx.beans.property.ObjectProperty<javafx.scene.Node> footerProperty

The footer represents the bottom most node of Navigation Drawer and is usually used for showing secondary items like help, settings, and feedback.

See Also:

getFooter(), setFooter(Node)

selectedItem

public final javafx.beans.property.ReadOnlyObjectProperty<javafx.scene.Node> selectedItemProperty

Refers to the selected item property, which is used to indicate the currently selected item in the selection model. Since NavigationDrawer do not show selected item. The selected item is the item corresponding to which user can do an action. For example, change the view. In NavigationDrawer, the selected item is either null, to represent that there is no selection, or an Object that is retrieved from the underlying data model of the control the selection model is associated with.

See Also:

getSelectedItem(), setSelectedItem(Node)

Field Detail

ITEM_SELECTED

public static final javafx.event.EventType<javafx.event.Event> ITEM_SELECTED

Event type that happens whenever a item on the drawer is selected, regardless if it was already selected or not

Constructor Detail

NavigationDrawer

public NavigationDrawer()

Creates a default NavigationDrawer.

NavigationDrawer

public NavigationDrawer(javafx.collections.ObservableList<javafx.scene.Node> items)

Creates a default NavigationDrawer which will stack the contents retrieved from the provided items vertically.

Parameters:

items - An ObservableList of nodes to set as items in Navigation Drawer.

NavigationDrawer

public NavigationDrawer(javafx.scene.Node header,
                        javafx.collections.ObservableList<javafx.scene.Node> items)

Creates a default NavigationDrawer which will stack the contents retrieved from the provided header and items vertically.

Parameters:

header - The header of Navigation Drawer.

items - An ObservableList of nodes to set as items in Navigation Drawer.

NavigationDrawer

public NavigationDrawer(javafx.scene.Node header,
                        javafx.scene.Node footer,
                        javafx.collections.ObservableList<javafx.scene.Node> items)

Creates a default NavigationDrawer which will stack the contents retrieved from the provided header, footer and items.

Parameters:

header - The header of Navigation Drawer.

footer - The footer of Navigation Drawer.

items - An ObservableList of nodes to set as items in Navigation Drawer.

Method Detail

getHeader

public final javafx.scene.Node getHeader()

Returns an object of the header.

Returns:

A Node containing the header object.

headerProperty

public final javafx.beans.property.ObjectProperty<javafx.scene.Node> headerProperty()

The header represents the top most node of Navigation Drawer and usually consists of an image, title and subtitle.

Returns:

An ObjectProperty containing the header instance.

setHeader

public final void setHeader(javafx.scene.Node header)

Sets the underlying header for the NavigationDrawer. The header when set here is fixed and cannot be scrolled. If you want the header to scroll, place it inside items.

Normally, a user is advised to add a NavigationDrawer.Header as the node. A NavigationDrawer.Header provides appropriate methods to set the necessary details and it receives the appropriate styling automatically. Nevertheless, a user is not restricted to a NavigationDrawer.Header and may add any node with custom style.

Parameters:

header - The header node of the NavigationDrawer.

getFooter

public final javafx.scene.Node getFooter()

Returns an node which is used as the footer of NavigationDrawer.

Returns:

A Node containing the footer object.

footerProperty

public final javafx.beans.property.ObjectProperty<javafx.scene.Node> footerProperty()

The footer represents the bottom most node of Navigation Drawer and is usually used for showing secondary items like help, settings, and feedback.

See Also:

getFooter(), setFooter(Node)

setFooter

public final void setFooter(javafx.scene.Node footer)

Sets the underlying footer for the NavigationDrawer. The footer when set here is fixed and cannot be scrolled. If you want the footer to scroll, place it inside items.

Normally, a user is advised to add a NavigationDrawer.Footer as the node. A NavigationDrawer.Footer provides appropriate methods to set the necessary details and receives the appropriate styling automatically. Nevertheless, a user is not restricted to a footer and may add any node with custom style.

Parameters:

footer - The footer node of Navigation Drawer.

getItems

public final javafx.collections.ObservableList<javafx.scene.Node> getItems()

Returns an ObservableList that contains the items currently being shown to the user in the content area.

Returns:

An ObservableList containing the items to be shown to the user.

selectedItemProperty

public final javafx.beans.property.ReadOnlyObjectProperty<javafx.scene.Node> selectedItemProperty()

Refers to the selected item property, which is used to indicate the currently selected item in the selection model. Since NavigationDrawer do not show selected item. The selected item is the item corresponding to which user can do an action. For example, change the view. In NavigationDrawer, the selected item is either null, to represent that there is no selection, or an Object that is retrieved from the underlying data model of the control the selection model is associated with.

See Also:

getSelectedItem(), setSelectedItem(Node)

setSelectedItem

public final void setSelectedItem(javafx.scene.Node value)

Sets the value of the property selectedItem.

Property description:

Refers to the selected item property, which is used to indicate the currently selected item in the selection model. Since NavigationDrawer do not show selected item. The selected item is the item corresponding to which user can do an action. For example, change the view. In NavigationDrawer, the selected item is either null, to represent that there is no selection, or an Object that is retrieved from the underlying data model of the control the selection model is associated with.

getSelectedItem

public final javafx.scene.Node getSelectedItem()

Returns the currently selected object.

Returns:

The selected node.

createDefaultSkin

protected javafx.scene.control.Skin<?> createDefaultSkin()

Overrides:

createDefaultSkin in class javafx.scene.control.Control