6. Floating Label

floatingLabel

This animation is a little bit more complex. In fact we have integrated AJUI_FloatingLabel directly in the AJUI_Animate component. This allow the floating label to be displayed with an animation.

The floatingLabel member function will take care to display the floating label as a placeholder or as a label. That is why the use of the floatingLabel member function is a little bit different than other animation.

How To Use

1. First you must create an input called FLabel_obj in your form. This input will be used to create as many label you will need. You can create it manually, in that case we have some recommendations :
   • Remove the enterable and focusable properties.
   • Deactivate the Context menu option.
   • Deactivate the draggable and droppable properties.
   • Set the visibility to hidden
   • Activate the onClick event and use this code :

			$evt:=Form event code
			Case of 
				: ($evt=On Clicked)
					GOTO OBJECT(*;Replace string(OBJECT Get name(Object current);"_Flabel_obj";""))
			End case 

This code will allow the select the input field which is under the floating label. We must use that little trick because we use the label as a placeholder and it is then located on top of the input field.

2. Second, you must activate some event in your input field :
   • On Load, On Getting Focus, On Losing Focus and On After Edit
   • You can then write such code to define the behavior of the floating label :

			$evt:=Form event code
			Case of 
				: ($evt=On Load)
					Form.FLabel1:=New Animation 
					Form.FLabel1.formPath:="firstName"
					Form.FLabel1.animationType:="elastic"
					Form.FLabel1.duration:=1100
			End case 
			Form.FLabel1.floatingLabel()

Properties

Here is the list of properties available

Properties	Types	Descriptions
target	String	Name of the 4D form object that will be the target of the operation.
formPath	String	This property is useful if you have assigned an expression to your form variable via the dot notation and the "Form" variable. For example : "entity.firstname" or "myValue". It will look inside the "Form" variable to find the value.
activeColor	String	(optional) The active color when the field has the focus, By default will be the color of the FLabel_obj.
inactivColor	String	(optional) The color when the field doesn't have the focus. By default will be #AAAAAA.
fontSize	Longint	(optional) The font size of the label, By default will be the font size of the FLabel_obj.
placeholder	String	(optional) The placeholder will be used as the label. By default will be the placeholder of the target.
offset	Longint	(optional) The offset between the target and the label. By default will be 3 pixels.
position	String	(optional) The position of the label, can be "top" or "left", by default will be "top".
noPlaceholder	Boolean	(optional) If you want to always display the label and not the placeholder. By default will be False.
formEvent	Longint	(optional) Can be used to simulate a sepecific form event if you want to trigger an effect from another context. By default it will use the value returned by Form event code.
placeholderFontColor	String	(optional) The font color of the placeholder. By default will be #AAAAAA.
animationType	String	(optional) The type of animation that you want to use when the placeholder move to a label. The list of animation can be found in the Lab,in the HDI Object Animation exemple. Here is the list of available animations Animation Types.
duration	Longint	(optional) Duration of the transition. By default will be 700 milliseconds.
followTarget	boolean	(optional) If true, when the target has the move option enabled for a form resize, then the floating label enables it too. By default True.