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.
activeColor	String	(optional) The active color when the field has the focus, By default will be the color of the FLabel_obj
inactiveColor	String	(optional) The color when the field doesn't have the focus. By default will be #AAAAAA
fontSize	Number	(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	Number	(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	Number	(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	Number	(optional) Duration of the transition. By default will be 700 milliseconds