FR 6. Floating Label

floatingLabel

Cette animation est un peu plus complexe. En fait, nous avons intégré AJUI_FloatingLabel directement dans le composant AJUI_Animate. Cela permet d'afficher une étiquette flottante avec une animation.

La fonction membre floatingLabel veillera à afficher une étiquette flottante qui correspondra à un Placeholder ou bien à un label. C'est pourquoi l'utilisation de la fonction membre floatingLabel est un peu différente des autres animations.

Comment l'utiliser

1. Vous devez d'abord créer une zone de saisie appelée FLabel_obj dans votre formulaire. Cet objet de formulaire sera utilisé pour créer autant de labels que nécessaire. Vous pouvez le créer manuellement, dans ce cas nous avons quelques recommandations :
   • Désactivez la saisie et le focus sur l'objet.
   • Désactivez l'option du menu contextuel.
   • Désactivez l'option de drag and drop.
   • Réglez la visibilité sur invisible.
   • Activez l'événement onClick et utilisez ce code :

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

Ce code permettra de sélectionner la zone de saisie qui se trouve sous le Floating Label. Nous utilisons cette astuce parce que nous allons utiliser le label comme Placeholder qui sera alors situé en haut de la zone de saisie.

2. Ensuite, vous devez activer quelques événements dans vos zone de saisie :
   • On Load, On Getting Focus, On Losing Focus et On After Edit
   • vous pouvez ensuite écrire ce genre de code pour définir le comportement du 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()

Propriétés

Voici la liste des propriétés disponibles.

Propriétés	Types	Descriptions
target	String	Nom de l'objet du formulaire 4D qui sera la cible de l'opération.
formPath	String	Cette propriété est utilise si vous assigné une expression à votre variable formulaire via la notation à point et à la variable "Form". Vous pouvez passer un chemin d'attribut. Par exemple : "entity.firstname" ou "myValue". Cela va chercher dans la variable "Form" si la valeur est trouvée.
activeColor	String	(optionnel) La couleur active lorsque la zone de saisie reçois le focus. Par défaut, la couleur correspond à celle de FLabel_obj.
inactivColor	String	(optionnel) La couleur lorsque la zone de saisie n'a pas le focus. Par défaut, elle sera #AAAAAA.
fontSize	Longint	(optionnel) La taille de la police du label. Par défaut, cela sera la taille de la police du FLabel_obj.
placeholder	String	(optionnel) Le Placeholder sera utilisé comme label. Par défaut, il s'agit du Placeholder du target.
offset	Longint	(optionnel) Espace entre le target et le label. Par défaut, il est de 3 pixels.
position	String	(optionnel) La position du label, il peut être "top" ou "left". Par défaut, c'est la valeur "top".
noPlaceholder	Boolean	(optionnel) Si vous voulez toujours afficher le label au lieu du Placeholder. Par défaut, c'est à False.
formEvent	Longint	(optionnel) Peut être utilisé pour simuler un événement de formulaire spécifique si vous souhaitez déclencher un effet à partir d'un autre contexte. Par défaut, il utilisera la valeur renvoyée par Form event code.
placeholderFontColor	String	(optionnel) Couleur de la police du placeholder. Par défaut, ce sera #AAAAAA.
animationType	String	(optionnel) Le type d'animation que vous souhaitez utiliser lorsque le placeholder est remplacé par un label. La liste des animations se trouve dans le Lab, dans l'exemple HDI Object Animation. Voici la liste des animations disponibles. Animation Types
duration	Longint	(optionnel) Durée de la transition. Par défaut, elle est de 700 millisecondes.
followTarget	boolean	(optionnel) Si vrai, quand le target a l'option move activé pour un redimensionnement du formulaire, alors le floating label l'active aussi. Vrai par défaut.