Axure RP - Logique de condition
Dans ce chapitre, nous aborderons la logique conditionnelle utilisée dans Axure RP.
Si - Alors - Sinon dans Axure
Comme tous les autres outils de programmation, Axure prend également en charge la logique conditionnelle pour créer des interactions améliorées dans les prototypes. Une fois que vous êtes familiarisé avec la façon dont vous pouvez fournir des interactions, fournir une logique conditionnelle aux interactions est le niveau suivant.
Voici le flux simple et concis pour la logique conditionnelle -
- Si, un widget / écran particulier est cliqué
- Ensuite, effectuez une action / interaction particulière
- Sinon, conserver / modifier l'état du widget ou de l'écran
Pour mieux comprendre cela, reprenons notre flux de l'exemple précédent. À cette fin, il nous est nécessaire de nous familiariser avec le générateur de conditions.
Le générateur de conditions
Double-cliquez sur l'une des interactions, par exemple OnClick. Vous pourrez voir l'éditeur de cas comme indiqué dans la capture d'écran suivante.
Cliquez sur le bouton - Ajouter une condition à côté du nom du cas. Il apparaîtra ci-dessous dans la boîte de dialogue.
Comme indiqué sous la description, le générateur de conditions créera le flux If-Then-Else selon les conditions choisies dans la section condition.
Créons une condition sur ce bouton.
Nous voulons afficher le bouton Masquer l'image, une fois que le panneau dynamique est visible. Nous avons rendu le panneau dynamique visible en cliquant sur le bouton Afficher l'image dans l'exemple précédent. Maintenant, rendons visible un autre bouton Masquer l'image.
Fermez le générateur de conditions et revenez dans la zone de conception.
Insérez le bouton Masquer l'image des bibliothèques sous les bibliothèques communes. Pour réitérer, il est recommandé de nommer l'élément d'interface utilisateur juste après l'avoir inséré dans la zone de conception.
Cliquez avec le bouton droit sur le bouton Masquer l'image et cliquez sur Définir masqué. Le bouton sera masqué de la zone de conception, comme indiqué dans la capture d'écran suivante.
Maintenant, revenons aux interactions pour le bouton Afficher l'image.
Tout d'abord, sous les interactions du bouton Afficher l'image, double-cliquez sur Cas 1, vous pourrez voir l'éditeur de cas. Utilisez l'action Afficher / Masquer pour sélectionner hideImageButton et définir sa visibilité à afficher.
De même, à l'aide de l'action Afficher / Masquer, sélectionnez showImageButton et définissez sa visibilité sur Masquer.
Nous avons géré la visibilité du bouton Masquer l'image de telle sorte que, lorsque nous cliquons sur le bouton Afficher l'image, le bouton s'affiche.
Une condition complète sera comme indiqué dans la capture d'écran suivante.
Construisons la condition.
Sous la zone de conception, cliquez sur le bouton Masquer l'image. Dans la section Inspecteur, cliquez sur Ajouter un cas.
Sous Ajouter un cas, cliquez sur le bouton Ajouter une condition. Conformément à l'arrière-plan fourni précédemment, créez l'ensemble de conditions à l'aide des valeurs de liste déroulante dans le générateur de conditions.
En termes simples, avec la condition ci-dessus, nous vérifions si le panneau dynamique showImageDynamicPanel est visible ou non
Maintenant, concevons l'interaction pour le bouton Masquer l'image, configurez-la comme suit -
- Sélectionnez l'action Afficher / Masquer.
- Sélectionnez le widget showImageDynamicPanel.
- Définissez la visibilité sur Masquer.
De même, répétez l'exploration pour afficher showImageButton et masquer le hideImageButton.
Une fois terminé, cliquez sur OK pour fermer l'éditeur de cas.
Ensuite, cliquez sur Aperçu pour voir les modifications effectuées.
Les résultats positifs seront comme indiqué dans les captures d'écran suivantes.
Lorsque vous cliquez sur le bouton Afficher l'image -
Lorsque vous cliquez sur le bouton Masquer l'image -
