Class FloatingActionButton
- java.lang.Object
-
- com.gluonhq.charm.glisten.control.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 anotherfloating 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 theSide
. Attaching more than one floating action button will result in anIllegalStateException
.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);
- Since:
- 1.0.0
-
-
Property Summary
Properties Type Property Description StringProperty
id
The id of thisFloatingActionButton
.ObjectProperty<EventHandler<ActionEvent>>
onAction
TheEventHandler
that will be called when the user interacts with the floating action button.ReadOnlyBooleanProperty
showing
Indicates whether the FAB is currently showing on the scene-graph.StringProperty
text
The text (either actual text, or aMaterialDesignIcon
graphic) to display inside the floating action button
-
Field Summary
Fields Modifier and Type Field Description static Function<FloatingActionButton,Point2D>
BOTTOM_CENTER
Places the floating action button in the bottom-center section of the user interface.static Function<FloatingActionButton,Point2D>
BOTTOM_LEFT
Places the floating action button in the bottom-left section of the user interface.static Function<FloatingActionButton,Point2D>
BOTTOM_RIGHT
Places the floating action button in the bottom-right section of the user interface.static String
STYLE_CLASS_MINI
Creates a FAB with a slightly smaller radius than defaultstatic Function<FloatingActionButton,Point2D>
TOP_LEFT
Places the floating action button in the top-left section of the user interface.static Function<FloatingActionButton,Point2D>
TOP_RIGHT
Places the floating action button in the top-right section of the user interface.
-
Constructor Summary
Constructors Constructor Description FloatingActionButton()
Creates a new FloatingActionButton instance with the default graphic (MaterialDesignIcon.ADD
) and no onAction handler installed (to set an onAction handler callsetOnAction(EventHandler)
).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.
-
Method Summary
All Methods Static Methods Instance Methods Concrete Methods Modifier and Type Method Description void
attachTo(FloatingActionButton primaryFAB, Side pos)
Attaches theFloatingActionButton
to an already existing FloatingActionButton i.e.static void
attachTo(Node node)
Attaches theFloatingActionButton
on the node.String
getId()
Gets the value of the property id.EventHandler<ActionEvent>
getOnAction()
Returns theEventHandler
assigned to the floating action buttonObservableList<String>
getStyleClass()
A list of String identifiers which can be used to style the button present in the floating action button.String
getText()
Returns the text to be displayed inside the floating action buttonvoid
hide()
Hides theFloatingActionButton
.StringProperty
idProperty()
The id of thisFloatingActionButton
.boolean
isShowing()
Gets the value of the property showing.ObjectProperty<EventHandler<ActionEvent>>
onActionProperty()
TheEventHandler
that will be called when the user interacts with the floating action button.void
setFloatingActionButtonHandler(Function<FloatingActionButton,Point2D> c)
The floating action button handler is the method that is called to determine the positioning of the floating action button in the layout pane.void
setId(String id)
Sets the value of the property id.void
setOnAction(EventHandler<ActionEvent> onAction)
Sets theEventHandler
for the floating action buttonvoid
setText(String text)
Sets the text to be displayed inside the floating action buttonvoid
show()
Shows theFloatingActionButton
.ReadOnlyBooleanProperty
showingProperty()
Indicates whether the FAB is currently showing on the scene-graph.void
showOn(View view)
Makes sure that the FAB is automatically shown when the supplied view is shown.StringProperty
textProperty()
The text (either actual text, or aMaterialDesignIcon
graphic) to display inside the floating action button
-
-
-
Property Detail
-
text
public final StringProperty textProperty
The text (either actual text, or aMaterialDesignIcon
graphic) to display inside the floating action button- See Also:
getText()
,setText(String)
-
onAction
public final ObjectProperty<EventHandler<ActionEvent>> onActionProperty
TheEventHandler
that will be called when the user interacts with the floating action button.- See Also:
getOnAction()
,setOnAction(EventHandler)
-
showing
public final ReadOnlyBooleanProperty showingProperty
Indicates whether the FAB is currently showing on the scene-graph.- See Also:
isShowing()
-
id
public final StringProperty idProperty
The id of thisFloatingActionButton
. 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)
-
-
Field Detail
-
STYLE_CLASS_MINI
public static final String STYLE_CLASS_MINI
Creates a FAB with a slightly smaller radius than default- See Also:
- Constant Field Values
-
TOP_LEFT
public static final Function<FloatingActionButton,Point2D> TOP_LEFT
Places the floating action button in the top-left section of the user interface. The primary FAB takes theAppBar
height into consideration while laying itself. This can be set on a floating action button by callingsetFloatingActionButtonHandler(Function)
.
-
TOP_RIGHT
public static final Function<FloatingActionButton,Point2D> TOP_RIGHT
Places the floating action button in the top-right section of the user interface. The primary FAB takes theAppBar
height into consideration while laying itself. This can be set on a floating action button by callingsetFloatingActionButtonHandler(Function)
.
-
BOTTOM_LEFT
public static final Function<FloatingActionButton,Point2D> BOTTOM_LEFT
Places the floating action button in the bottom-left section of the user interface. This can be set on a floating action button by callingsetFloatingActionButtonHandler(Function)
.
-
BOTTOM_CENTER
public static final Function<FloatingActionButton,Point2D> BOTTOM_CENTER
Places the floating action button in the bottom-center section of the user interface. This can be set on a floating action button by callingsetFloatingActionButtonHandler(Function)
.
-
BOTTOM_RIGHT
public static final Function<FloatingActionButton,Point2D> BOTTOM_RIGHT
Places the floating action button in the bottom-right section of the user interface. This can be set on a floating action button by callingsetFloatingActionButtonHandler(Function)
.
-
-
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 callsetOnAction(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
textonAction
- the event handler
-
-
Method Detail
-
attachTo
public static final void attachTo(Node node)
Attaches theFloatingActionButton
on the node. If a node is passed,FloatingActionButton
will relocate its center to the section of the node depending on the value set insetFloatingActionButtonHandler(Function)
. When there is a change in the node's translation or layoutBounds,FloatingActionButton
will remain attached to the node in two dimensional space.- Parameters:
node
- The node on which the FloatingActionButton is to be positioned.- Since:
- 4.0.0
-
textProperty
public final StringProperty textProperty()
The text (either actual text, or aMaterialDesignIcon
graphic) to display inside the floating action button- See Also:
getText()
,setText(String)
-
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
- AString
with the text to be set
-
onActionProperty
public final ObjectProperty<EventHandler<ActionEvent>> onActionProperty()
TheEventHandler
that will be called when the user interacts with the floating action button.- See Also:
getOnAction()
,setOnAction(EventHandler)
-
getOnAction
public final EventHandler<ActionEvent> getOnAction()
Returns theEventHandler
assigned to the floating action button- Returns:
- the
EventHandler
-
setOnAction
public final void setOnAction(EventHandler<ActionEvent> onAction)
Sets theEventHandler
for the floating action button- Parameters:
onAction
- theEventHandler
-
show
public void show()
Shows theFloatingActionButton
.- Since:
- 5.0.0
-
hide
public void hide()
Hides theFloatingActionButton
.- Since:
- 5.0.0
-
showingProperty
public final ReadOnlyBooleanProperty showingProperty()
Indicates whether the FAB is currently showing on the scene-graph.- See Also:
isShowing()
-
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 thisFloatingActionButton
. 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
-
setFloatingActionButtonHandler
public final void setFloatingActionButtonHandler(Function<FloatingActionButton,Point2D> c)
The floating action button handler is the method that is called to determine the positioning of the floating action button in the layout pane. Commonly used layout positions includes:- Parameters:
c
- aFunction
that manages to set the position of the floating action button
-
attachTo
public final void attachTo(FloatingActionButton primaryFAB, Side pos)
Attaches theFloatingActionButton
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 theSide
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
- TheSide
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 callingshow()
andhide()
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
-
-