article(s) dans votre panier VOIR

Utiliser des composants réutilisables : Composants interface utilisateur sur Animate CC 2017

  • Vidéo 8 sur 15
  • 1h36 de formation
  • 15 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Utiliser des composants réutilisables : Composants interface utilisateur
00:00 / 29:27
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
29,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans ce tuto, l’auteur vous apprend à utiliser les composants interface utilisateur. Le but est de créer un formulaire d’enregistrement. Dans un premier temps, il est conseillé de mettre à disposition les panneaux Composants, Actions, et Fragments de code pour faciliter l’accès aux éléments nécessaires à la mise en œuvre du formulaire. Pour commencer, vous intégrez dans le plan de travail les composants utilitaires au formulaire. Dans ce cadre, RadioButton sert pour les options de choix, TextInput est utile pour placer les champs de saisie de texte et ComboBox affiche une liste déroulante. Vous disposez aussi du NumericShapper pour les données numériques et du CheckBox pour mettre en place une case à cocher. En connaissant la fonction de chaque composant, vous êtes en mesure de les utiliser en fonction du formulaire à créer. Une fois les composants placés, vous arrangez leur disposition, puis vous les agrémentez de texte introductif en utilisant l’outil Texte. Pour continuer, vous paramétrez les composants pour les rendre fonctionnels. Pour y parvenir, vous les nommez pour faciliter la reconnaissance dans les codes. Plus particulièrement pour les caractéristiques du NumericShapper, vous avez la possibilité de définir une valeur minimale et une valeur maximale de telle façon à obtenir un sélecteur rotatif. Pour ce qui est de ComboBox, l’ajout de valeurs vous permet de garnir la liste déroulante. Par la suite, vous ajoutez un nouveau calque dans le projet comme support du code pour configurer le fonctionnement des composants. Pour éditer les instructions nécessaires, vous utilisez ensuite les fragments de codes disponibles dans le logiciel en rapport avec la fonction du composant. Dans ce sens, vous allez dans le panneau Actions, puis vous commencez par la détermination des variables de référence. Ces dernières servent à définir les données à récupérer à l’issue du formulaire. Ainsi, vous créez des variables nulles pour les données à saisir. En ce qui concerne les boutons de validation, vous faites recours aux variables booléennes. Vous sélectionnez ensuite un composant et vous cherchez le fragment de code correspondant pour le copier dans la programmation. Vous faites de même pour les autres composants. Pour terminer avec le bouton d’enregistrement des données saisies, vous lui attribuez le code Evènement de clic sur le bouton. Vous saisissez ensuite les instructions nécessaires pour récupérer la totalité des informations incluses dans le formulaire. Vous créez alors une fonction checkFormulaire dans laquelle vous appelez des instructions console.log incluant les données des composants. Par rapport à cela, vous avez la possibilité d’insérer une chaîne de caractères pour introduire les valeurs. En conclusion, les composants interface utilisateur vous permettent de former des boutons et des champs opérationnels.