8. FAB (Floating Action Button)

FAB

FABs are buttons floating above the user interface of a form. They act as call to action buttons, intended to represent a single action that users perform most on that particular form screen.

The FAB function we propose will allow you to create and manage this type of floating buttons.

This function allows you to designate an instance as the main button that will contain a collection of other secondary buttons.

Once the roles have been defined, the main button will be assigned to a callback internal to the component allowing it to display or hide the other secondary buttons associated with the collection. When displayed, the secondary buttons will be distributed around the main button reproducing a circle shape. The size, direction and distribution of the secondary buttons on this circle can be defined via the properties linked to the FAB functionality.

It is possible to apply an animation when the secondary buttons are shown or hidden.

Property list

Name	Type	Default value	Description
mainBtn	boolean	False	If true, the button is designated as the main button of an FAB system. Its only function is to show and alternately hide the secondary buttons. Any callbacks defined (OnClick and OnDoubleClick) to this button will be ignored.
btnCol	collection	empty collection	Collection of the names of the secondary buttons (name of the image form object) that will compose the FAB system. Their positions in the collection can be defined via an add function (FABAdd).
clockwise	boolean	True	If true, the arrangement of the buttons is clockwise, if not, it is the opposite.
startAngle	longint	270	Angle from which the first secondary button will be positioned. The values 0 to 359 are allowed. The value is in degrees. The starting point of the angle values (value 0) is located at 3 o'clock.
angleToTravel	longint	180	Sets the relative size of the angle where the secondary buttons will have to be spaced starting from the start angle (startAngle) and based on the direction (clockwise). Values from 0 to 360 are allowed. The value is in degrees.
radius	longint	100	Space between the secondary buttons and the main button. The value is in pixel.
mainPosition	string	empty string	Allows you to use a button positioning predefined by the component (see sub-chapter "predefined positions"). Using a predefined position will automatically update the startAngle and angleToTravel properties. ⚠️ the member function linked to mainPosition acts as a shortcut to enter predefined values for these two parameters only when it is called. It is not taken into account each time the FAB is used.
animation	boolean	False	Allows you to activate the FAB animation.

Predefined positions

Here are the 9 predefined positions and their identifiers that you can enter in the member function "FABMainPosition".

Member functions

List of member functions linked to the FAB functionnality.

• FABIsMainButton ( { $active } ) : Getter/Setter for the property « mainBtn ».
• FABIsClockwise( { $clockwise } ) : Getter/Setter for the property « clockwise ».
• FABStartAngle ( { $angle } ) : Getter/Setter for the property « startAngle ».
• FABAngleToTravel ( { $angle } ) : Getter/Setter for the property « angleToTravel ».
• FABRadius ( { $radius } ) : Getter/Setter for the property « radius ».
• FABMainPosition ( { $namePosition } ) : Getter/Setter for the property « mainPosition ».
• FABAdd ( $nameBtn { ; $position } ) : Adds the name of a button to the collection. You can define its position in the list as an optional second parameter, otherwise it will be added at the end. If the name of a button already exists in the list, the method will act as a update method for the position but will not create a duplicate.
• FABRemove ( $nameBtn ) : Removes from the collection the name of the button in parameter.
• FABClearCollection ( ) : Removes all items in the collection.
• FABIsAnimated ( { $isActivated } ) : Activate/inactivate animation.

Setting up

The first thing to do to implement the FAB function is to create each of the buttons that will compose it.

Once done, you will define an instance as the main button using the "FABIsMainButton" member function. This button will now have the sole function of showing and hiding the secondary buttons on the "On Mouse Up" and/or "On Double Click" events. Any callbacks defined (OnClick and OnDoubleClick) for this button will be ignored.

Then, you have to add to this instance the names of the other buttons with the "FABAdd" function, you can define their position in the collection. You can also activate the FAB animation.

When loading your form, the main button will automatically hide the secondary buttons. For a practical example of implementation, we advise you to look at the HDI_FAB form code in the component lab.