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

Class FloatingActionButton

  • public class FloatingActionButton
extends Object

    A floating action button represents the primary action in an application. Only one floating action button is recommended per screen limiting to a total of two.

    A function can be set at any time to specify the position of this button. By default, it is at the right bottom. Setting a new position like BOTTOM_LEFT will be done with an animation, moving the action button from its actual position towards its new destination.

    In order to show a floating action button show() can be called. Similarly, hide() can be called to hide the floating action button.

    A floating action button can attach itself to a Node or to another floating action button. When attached to a node, it follows the position assigned to it by the function. When attached to another floating action button, the user has to explicitly define the Side. Attaching more than one floating action button will result in an IllegalStateException.

    A floating action button with a smaller radius can be created by adding the style-class mini.

    Example

    The following example shows a FloatingActionButton on a View that moves to a new position when the user presses the button with the label "Click".

     public class MyApp extends MobileApplication {

  @Override
   public void init() {
     addViewFactory(HOME_VIEW, () -> {
       FloatingActionButton fab = new FloatingActionButton(MaterialDesignIcon.DO_NOT_DISTURB.text, e -> System.out.println("action"));
       final Button button = new Button("Click");
       button.setOnAction(e -> fab.setFloatingActionButtonHandler(FloatingActionButton.BOTTOM_LEFT));
       View view = new View(button) {
        @Override
         protected void updateAppBar(AppBar appBar) {
           appBar.setTitleText("FloatingActionButton");
         }
       };
       fab.showOn(view);
       return view;
     });
   }
 }

    The following example shows a FloatingActionButton that can be attached to a VBox:

     VBox box = new VBox();
 FloatingActionButton fab = new FloatingActionButton(MaterialDesignIcon.STAR.text, e -> System.out.println("action"));
 FloatingActionButton.attachTo(box);

    The following example shows a FloatingActionButton, with mini style, attached to another FloatingActionButton:

     FloatingActionButton primaryFAB = new FloatingActionButton(MaterialDesignIcon.DO_NOT_DISTURB.text, e -> System.out.println("primary action"));
 FloatingActionButton secondaryFAB = new FloatingActionButton(MaterialDesignIcon.FAVORITE.text, e -> System.out.println("secondary action"));
 secondaryFAB.getStyleClass().add(FloatingActionButton.STYLE_CLASS_MINI);
 secondaryFAB.attachTo(primaryFAB, Side.TOP);

    Screenshot of FloatingActionButton

    Since:
    1.0.0

    • Property Detail

      • id

        public final StringProperty idProperty
        The id of this FloatingActionButton. This simple string identifier is useful for finding a specific FloatingActionButton within the scene graph. While the id of a FloatingActionButton should be unique within the scene graph, this uniqueness is not enforced. This is analogous to the "id" attribute on an HTML element (CSS ID Specification).

        For example, if a FloatingActionButton is given the id of "myId", then the lookup method can be used to find this floatingActionButton as follows: scene.lookup("#myId");.

        Default value:
        null
        Since:
        4.2.0
        See Also:
        getId(), setId(String)

    • Constructor Detail

      • FloatingActionButton

        public FloatingActionButton()
        Creates a new FloatingActionButton instance with the default graphic (MaterialDesignIcon.ADD) and no onAction handler installed (to set an onAction handler call setOnAction(EventHandler)).

      • FloatingActionButton

        public FloatingActionButton​(String text,
                            EventHandler<ActionEvent> onAction)
        Creates a new FloatingActionButton instance with the provided text and the provided event handler set as the onAction handler.
        Parameters:
        text - MaterialDesignIcon text
        onAction - the event handler

    • Method Detail

      • getText

        public final String getText()
        Returns the text to be displayed inside the floating action button
        Returns:
        A String with the text

      • setText

        public final void setText​(String text)
        Sets the text to be displayed inside the floating action button
        Parameters:
        text - A String with the text to be set

      • isShowing

        public final boolean isShowing()
        Gets the value of the property showing.
        Property description:
        Indicates whether the FAB is currently showing on the scene-graph.

      • idProperty

        public final StringProperty idProperty()
        The id of this FloatingActionButton. This simple string identifier is useful for finding a specific FloatingActionButton within the scene graph. While the id of a FloatingActionButton should be unique within the scene graph, this uniqueness is not enforced. This is analogous to the "id" attribute on an HTML element (CSS ID Specification).

        For example, if a FloatingActionButton is given the id of "myId", then the lookup method can be used to find this floatingActionButton as follows: scene.lookup("#myId");.

        Default value:
        null
        Since:
        4.2.0
        See Also:
        getId(), setId(String)

      • setId

        public final void setId​(String id)
        Sets the value of the property id.
        Property description:
        The id of this FloatingActionButton. This simple string identifier is useful for finding a specific FloatingActionButton within the scene graph. While the id of a FloatingActionButton should be unique within the scene graph, this uniqueness is not enforced. This is analogous to the "id" attribute on an HTML element (CSS ID Specification).

        For example, if a FloatingActionButton is given the id of "myId", then the lookup method can be used to find this floatingActionButton as follows: scene.lookup("#myId");.

        Default value:
        null
        Since:
        4.2.0

      • getId

        public final String getId()
        Gets the value of the property id.
        Property description:
        The id of this FloatingActionButton. This simple string identifier is useful for finding a specific FloatingActionButton within the scene graph. While the id of a FloatingActionButton should be unique within the scene graph, this uniqueness is not enforced. This is analogous to the "id" attribute on an HTML element (CSS ID Specification).

        For example, if a FloatingActionButton is given the id of "myId", then the lookup method can be used to find this floatingActionButton as follows: scene.lookup("#myId");.

        Default value:
        null
        Since:
        4.2.0

      • attachTo

        public final void attachTo​(FloatingActionButton primaryFAB,
                           Side pos)
        Attaches the FloatingActionButton to an already existing FloatingActionButton i.e. both the buttons are visible at the same time, close to each other. The placement of the button will depend on the Side passed during attachment. The gap between the two buttons is predefined and cannot be changed.

        Attaching more than one FloatingActionButton will result in an IllegalArgumentException.

        Parameters:
        primaryFAB - The existing FloatingActionButton to which it should be attached.
        pos - The Side at which the new FloatingActionButton should attach itself.
        Since:
        4.0.0

      • showOn

        public final void showOn​(View view)
        Makes sure that the FAB is automatically shown when the supplied view is shown. The FAB also automatically hides when the view is hidden. This allows the developer to not worry about calling show() and hide() methods explicitly.
        Parameters:
        view - The view on which FAB should be shown.
        Since:
        5.0.0

      • getStyleClass

        public final ObservableList<String> getStyleClass()
        A list of String identifiers which can be used to style the button present in the floating action button. This variable is analogous to the "class" attribute on an HTML element and, as such, each element of the list is a style class to which this Node belongs.
        Returns:
        An ObservableList of all the style class added to the floating action button.
        See Also:
        CSS3 class selectors