Le bouton est l'élément le plus simple de l'éditeur Web Apps mais joue un des rôles principaux dans l'interface de l'application finie. De plus, nous vous proposons aujourd'hui de réaliser une application qui ne sera constituée que de boutons. La tâche peut sembler un peu étrange, mais si vous la faites, vous apprendrez à personnaliser les boutons, à comprendre les bases du travail avec l'éditeur et la logique de l'ensemble de la plate-forme.
Faisons un petit quiz basé sur le livre Les aventures d'Alice au pays des merveilles. Voyons si les utilisateurs se souviennent où Alice rencontre pour la première fois le chat du Cheshire.
Notre application aura :
- Texte de la question : Où Alice a-t-elle rencontré pour la première fois le chat du Cheshire ?
- Boutons au choix : Mad-Tea Party, Maison de la Duchesse, Bois, Croquet-Terre. Si l'utilisateur a choisi la mauvaise réponse - le bouton avec celui-ci disparaît, si l'utilisateur a choisi la bonne - tous les boutons avec les mauvaises réponses disparaissent en même temps.
- Messages contextuels qui vous indiquent si la réponse était correcte ou non.
Au fait, vous souvenez-vous quelle option est correcte ?
Comment créer un bouton
Faites glisser l'élément "Bouton" avec le pointeur de la souris (en cliquant et en maintenant la touche gauche enfoncée) vers la zone où vous souhaitez placer le bouton.
Vous devez ajouter quatre boutons - selon le nombre de réponses possibles.
Personnaliser l'apparence des boutons
Cliquez une fois sur le premier bouton - la fenêtre des paramètres s'ouvrira. Vous vous retrouverez sur l'onglet "Look&Feel", qui est responsable de l'apparence des boutons.
1. Modifiez les champs suivants :
- Libellé : texte du bouton - saisissez la première réponse : "Mad-Tea Party" ;
- Icône : icône du bouton - cliquez sur l'icône "Choisir l'icône" et choisissez celle que vous aimez (il y en a maintenant plus de 2500);
- Taille : taille du bouton - réglé sur « Large » pour agrandir le bouton ;
- Nom : C'est le nom sous lequel le bouton est « vu » par les autres éléments de votre application ; chaque bouton a besoin d'un nom unique - nommez le bouton "btn-mad_tea".
Lorsque vous modifiez les champs, l'image en haut de la fenêtre change pour montrer à quoi ressemblera le bouton une fois les paramètres appliqués.
2. Lorsque vous remplissez tous les champs, cliquez sur "Enregistrer".
- Configurez le reste des boutons par analogie avec le premier, en utilisant les noms : btn-duchess_h, btn-wood, btn-croquet_g.
- Cliquez sur "Enregistrer les modifications" pour enregistrer les modifications apportées à votre application - sinon, les boutons disparaîtront une fois que vous actualiserez la page ou fermerez l'éditeur.
Configuration des déclencheurs et des événements
Vous devez maintenant définir les actions des boutons. Commençons par celui avec la bonne réponse - "Maison de la duchesse" . Votre tâche consiste à "expliquer" à l'éditeur Web Apps :
- quel est le déclencheur du bouton - signifie, à quoi exactement il doit réagir: en appuyant;
- quel événement se produit dans ce cas : les boutons disparaissent ;
- où cet événement se produit, quels éléments changent : d'autres boutons.
Revenez aux paramètres du bouton « Maison de la duchesse » et accédez à l'onglet Déclencheurs. Tous les déclencheurs qui ont été ajoutés pour cela seront affichés :
- Maintenant, il n'y en a qu'un - "OnClick". Il est ajouté automatiquement et signifie que le bouton agira lorsque vous cliquerez dessus (ce qui est exactement ce dont vous avez besoin).
- En plus de "OnClick", d'autres déclencheurs sont possibles pour le bouton. Une liste complète avec une description se trouve dans la documentation de la plateforme.
Maintenant, vous devez spécifier des informations sur l'événement (vous en aurez trois - un pour chaque bouton). Cliquez sur le "+" à côté de "OnClick". La fenêtre des paramètres de l'événement s'ouvrira.
Dans le champ "Composant cible", vous devez indiquer où l'événement se produira, dans le champ "Action" - de quel type d'événement il s'agira.
Cacher toutes les mauvaises réponses
Ajoutez un événement qui masquera le bouton Mad-Tea Party :
- Cliquez sur le champ "Composant cible" et recherchez-le sous le nom unique btn-mad_tea. Dans le champ Action, sélectionnez l'événement approprié, dans ce cas - "Masquer le bouton".
- Cliquez sur « Enregistrer ».
Configurez le reste des boutons à masquer de la même manière.
- Voici à quoi devrait ressembler la liste des déclencheurs du bouton « Maison de la duchesse » lorsque vous avez terminé.
- Cliquez sur « Enregistrer » pour enregistrer vos modifications.
Maintenant, vous devez vous assurer que tout fonctionne.
- Enregistrez vos modifications.
- Appuyez sur le bouton de publication de l'application (en la plaçant sur Internet), sélectionnez "Développement".
- Cliquez sur l'icône Aller à votre application - elle s'ouvrira dans un nouvel onglet.
Accédez à l'application et assurez-vous que lorsque vous sélectionnez la bonne option, le reste des boutons disparaît.
Masquer les réponses incorrectes au clic
Faisons maintenant disparaître le bouton avec la mauvaise réponse "Mad-Tea Party" lorsque l'utilisateur clique dessus. Dans ce cas, le déclencheur (appuyer) et l'événement (disparaître) appartiennent au même bouton - il vous suffit de travailler avec.
Ouvrez les paramètres du bouton, allez dans l'onglet "Déclencheurs", ajoutez un nouvel événement au déclencheur "onClick". Dans le champ « Composant cible », sélectionnez « Ce composant (lui-même) » pour indiquer que le bouton active un événement pour lui-même. La valeur du champ "Action" est la même que dans l'exemple précédent - "Masquer le bouton".
Enregistrez toutes les modifications et publiez l'application, passez à l'onglet de l'application et actualisez-la. Vérifiez que tout fonctionne comme prévu :
Ajustez maintenant le bois et le croquet-sol. Enregistrez-le, publiez-le et testez-le à nouveau.
Types de boutons
Super, les réponses fonctionnent. Il est temps d'ajouter une question. Bien sûr, Appmaster.io a des éléments spéciaux pour cela, mais vous vous souvenez de notre tâche - des boutons et rien d'autre. Alors ajoutons-en un de plus. Cette fois, pas sur le canevas principal, mais en haut de la page :
Pour le rendre plus amusant, remplissez la question comme sur cette capture d'écran :
Maintenant, "colorisez" en utilisant des schémas de couleurs pour différents types de boutons : allez dans les paramètres et changez la valeur dans le champ "Type" pour n'importe quelle autre.
Nous l'avons eu comme ça, mais vous pouvez choisir votre option, la palette de couleurs du bouton n'affecte pas son fonctionnement :
Passons maintenant à la dernière tâche - la configuration d'un message pour l'utilisateur.
Tâche plus difficile
Vous pouvez afficher un message à l'écran de différentes manières. Nous avons sélectionné l'un des plus insolites :
- Tout d'abord, assurons-nous que les boutons contenant la question sont automatiquement désactivés lorsque l'utilisateur a donné la bonne réponse. Ils deviendront gris et cesseront de répondre aux clics. Pour ce faire, nous utilisons la fonction Activer (Désactiver), que nous n'avons pas encore envisagée, et le déjà familier "onClick".
- Ensuite, nous considérerons un nouveau déclencheur - onStateChange, qui est déclenché lorsque l'état du bouton change. Attribuons ce déclencheur au "?" - et le message s'affichera dessus.
Désactiver les boutons
Vous pouvez activer ou désactiver le bouton manuellement dans ses paramètres en basculant le sélecteur de champ « Activer » :
Pour configurer la commutation automatique, ouvrez les préférences du bouton « Maison de la duchesse » et ajoutez un déclencheur « onClick ». Dans le champ "Composant cible" sélectionnez l'un des boutons de question, dans les champs "Action" - "Désactiver le bouton". Répétez l'opération pour tous les boutons contenant une question. Ça devrait ressembler à ça:
N'oubliez pas d'enregistrer toutes les modifications, de publier et de vérifier si l'application fonctionne correctement.
Maintenant, lions le début du message au bouton "?" (nous l'avons nommé "btn_qqq"). Ajoutons-y le déclencheur "onStateChange". Il s'active lorsque l'état du bouton change - par exemple, lorsqu'il s'éteint.
Dans le champ "Composant cible", sélectionnez "Application" (le message apparaîtra dans la fenêtre de l'application), dans le champ "Action" - "Afficher le message de l'interface utilisateur" (afficher un message à l'utilisateur).
- Dans le champ "Style de message", choisissez celui qui convient le mieux à votre situation. Dans notre cas, il s'agit de « Succès » - un message sur la réussite de l'exécution.
- Remplissez les champs "Titre" et "Contenu" - informez l'utilisateur que la réponse est correcte ou écrivez simplement quelque chose de gentil.
Enregistrez, publiez et testez.
Résultat
En choisissant la bonne option, les boutons avec des réponses incorrectes doivent être masqués, le texte de la question doit s'estomper et un message de confirmation doit apparaître.
Bien entendu, il était possible de personnaliser le message plus facilement en le liant au bon bouton de réponse. Bien qu'aujourd'hui, nous ne cherchons pas des moyens faciles. De plus, vous en savez déjà assez pour le faire sans nos instructions. Essayez de personnaliser le message d'erreur qui s'affiche lorsque vous choisissez la mauvaise réponse . Ça devrait ressembler à ça:
Nous sommes sûrs que cette instruction vous a aidé à mieux connaître Appmaster.io . Mais si ce n'était pas clair (ou peut-être, au contraire, trop simple), écrivez au canal télégramme de notre support technique les instructions dont vous avez besoin. Nous les écrirons !
Si vous recherchez des informations plus détaillées sur Studio.appmaster.io , veuillez vous référer à notre documentation .
