Module com.gluonhq.charm.glisten
Package com.gluonhq.charm.glisten.control

Class NavigationDrawer

  • All Implemented Interfaces:
    Styleable, EventTarget, Skinnable
    @DefaultProperty("items")
public class NavigationDrawer
extends Control
    NavigationDrawer is a panel that displays the application main navigation options on the edge of the screen. It is hidden most of the time, but is revealed when open() is called. This method is generally called when the user touches the nav icon in the AppBar.

    NavigationDrawer can be initialized on demand and made available throughout the application via AppManager.getDrawer(). This is recommended way of using this control.

    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 NavigationDrawerSample extends MobileApplication {

  @Override
   public void init() {
     NavigationDrawer navigationDrawer = getDrawer();
     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);
     addViewFactory(HOME_VIEW, () -> {
       View view = new View();
       view.showingProperty().addListener((obs, oldValue, newValue) -> {
         if (newValue) {
           AppBar appBar = MobileApplication.getInstance().getAppBar();
           Button navButton = MaterialDesignIcon.MENU.button();
           navButton.setOnAction(event -> navigationDrawer.open());
           appBar.setNavIcon(navButton);
           appBar.setTitleText("NavigationDrawer");
         }
       });
       return view;
     });
   }
 }

    Screenshot of NavigationDrawer

    Since:
    2.0.0

    • Property Detail

      • header

        public final ObjectProperty<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 ObjectProperty<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 ReadOnlyObjectProperty<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.

        Whenever a change is triggered, a call to close() is made automatically. To change this behavior, NavigationDrawer.Item.autoClose should be set to false.

        See Also:
        getSelectedItem(), setSelectedItem(Node)

      • open

        public final ReadOnlyBooleanProperty openProperty
        Represents whether this NavigationDrawer is currently open or close.
        Since:
        5.0.0
        See Also:
        isOpen()

    • Field Detail

      • ITEM_SELECTED

        public static final EventType<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​(ObservableList<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​(Node header,
                        ObservableList<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​(Node header,
                        Node footer,
                        ObservableList<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

      • open

        public void open()
        Animates the NavigationDrawer into the view.
        Since:
        5.0.0

      • close

        public void close()
        Animates the NavigationDrawer out of the view.
        Since:
        5.0.0

      • getHeader

        public final Node getHeader()
        Returns an object of the header.
        Returns:
        A Node containing the header object.

      • headerProperty

        public final ObjectProperty<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​(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 Node getFooter()
        Returns an node which is used as the footer of NavigationDrawer.
        Returns:
        A Node containing the footer object.

      • footerProperty

        public final ObjectProperty<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​(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 ObservableList<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 ReadOnlyObjectProperty<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.

        Whenever a change is triggered, a call to close() is made automatically. To change this behavior, NavigationDrawer.Item.autoClose should be set to false.

        See Also:
        getSelectedItem(), setSelectedItem(Node)

      • setSelectedItem

        public final void setSelectedItem​(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.

        Whenever a change is triggered, a call to close() is made automatically. To change this behavior, NavigationDrawer.Item.autoClose should be set to false.

      • getSelectedItem

        public final Node getSelectedItem()
        Returns the currently selected object.
        Returns:
        The selected node.

      • getSide

        public final Side getSide()
        Gets the value of the property side.
        Property description:
        Defines the side from which this NavigationDrawer will draw itself out.
        Default value:
        Side.LEFT
        Since:
        5.0.0

      • setSide

        public final void setSide​(Side value)
        Sets the value of the property side.
        Property description:
        Defines the side from which this NavigationDrawer will draw itself out.
        Default value:
        Side.LEFT
        Since:
        5.0.0

      • openProperty

        public final ReadOnlyBooleanProperty openProperty()
        Represents whether this NavigationDrawer is currently open or close.
        Since:
        5.0.0
        See Also:
        isOpen()

      • isOpen

        public final boolean isOpen()
        Represents whether this NavigationDrawer is currently open or close.
        Returns:
        A boolean representing whether the NavigationDrawer is open or closed.
        Since:
        5.0.0