{"id":124618,"date":"2020-09-29T18:51:30","date_gmt":"2020-09-29T16:51:30","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/examples-advanced-events-and-interactions\/"},"modified":"2025-02-03T16:45:14","modified_gmt":"2025-02-03T15:45:14","slug":"examples-advanced-events-and-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/evenements-avances-et-interactions-exemples","title":{"rendered":"Exemples avanc\u00e9s : \u00e9v\u00e9nements et interactions"},"content":{"rendered":"

Dans cet article, vous apprendrez \u00e0 cr\u00e9er des \u00e9v\u00e9nements plus avanc\u00e9s avec des actions multiples et diff\u00e9rents d\u00e9clencheurs. Vous verrez \u00e9galement comment utiliser les fonctionnalit\u00e9s des formulaires interactifs et des entr\u00e9es de Justinmind pour cr\u00e9er des exp\u00e9riences utilisateur r\u00e9alistes. <\/p>\n

<\/a>Tabulation entre les champs d’un formulaire<\/h2>\n

Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er des formulaires pratiques et accessibles \u00e0 l’aide d’un d\u00e9clencheur On Key Up<\/strong> et d’une action Set Focus On.<\/strong> Vous ajouterez trois champs de formulaire – \u00ab\u00a0Nom d’utilisateur\u00a0\u00bb, \u00ab\u00a0Mot de passe\u00a0\u00bb et \u00ab\u00a0Confirmer le mot de passe\u00a0\u00bb – et vous vous d\u00e9placerez entre eux en appuyant sur la touche Tab.
\n

    \n
  1. Faites glisser trois widgets de champ de saisie sur le canevas et donnez-leur le style que vous souhaitez. Vous les trouverez dans la section \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb de la barre d’outils ou en appuyant sur la touche F.<\/kbd> <\/li>\n
  2. S\u00e9lectionnez le champ de saisie \u00ab\u00a0Nom d’utilisateur\u00a0\u00bb et acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements. Cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb. \"Bouton<\/li>\n
  3. Cliquez sur le menu d\u00e9roulant Trigger, passez la souris sur la section Keyboard<\/strong> et choisissez le trigger On Key Up.<\/strong> <\/li>\n
  4. Un nouveau champ appara\u00eet, dans lequel vous pouvez saisir la cl\u00e9 qui d\u00e9clenchera l’\u00e9v\u00e9nement lorsque vous la taperez. Saisissez la touche Tab.<\/kbd> <\/li>\n
  5. Dans le menu d\u00e9roulant Action, s\u00e9lectionnez l’action Mettre l’accent sur le champ de saisie<\/strong>. Vous verrez appara\u00eetre un aper\u00e7u du canevas dans lequel vous pourrez s\u00e9lectionner le champ de saisie \u00ab\u00a0Mot de passe\u00a0\u00bb. Il deviendra ainsi la cible de l’action Set Focus On, et vous basculerez vers lui lorsque vous quitterez le champ de saisie \u00ab\u00a0Nom d’utilisateur\u00a0\u00bb.
    \n\"An
    \nCliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.<\/li>\n
  6. De retour sur le canevas, s\u00e9lectionnez le champ de texte \u00ab\u00a0Mot de passe\u00a0\u00bb. Allez dans la palette Ev\u00e9nements et cr\u00e9ez une autre action On Key Up<\/strong> + Set Focus On<\/strong>. Cette fois, s\u00e9lectionnez le champ de texte \u00ab\u00a0Confirmer le mot de passe\u00a0\u00bb comme cible de l’action. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.<\/li>\n<\/ol>\n

    Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Concentrez-vous sur le champ \u00ab\u00a0Nom d’utilisateur\u00a0\u00bb et appuyez sur la touche de tabulation pour passer au champ \u00ab\u00a0Mot de passe\u00a0\u00bb. Appuyez \u00e0 nouveau sur la touche de tabulation pour passer au champ \u00ab\u00a0Confirmation du mot de passe\u00a0\u00bb. <\/p>\n

    <\/a>Effet multiple du passage de la souris<\/h2>\n

    Dans Justinmind, vous pouvez ajouter plusieurs actions \u00e0 un \u00e9v\u00e9nement. Dans cet exercice, vous apprendrez \u00e0 cr\u00e9er un \u00e9v\u00e9nement Au survol de la souris<\/strong> avec deux actions. Une action modifiera l’apparence d’une image et l’autre d\u00e9placera l’image.
    \n

      \n
    1. Cr\u00e9ez un nouveau projet Web et placez une Image I<\/kbd> sur le Canvas. Modifiez la transparence de l’image \u00e0 40 % dans la palette Propri\u00e9t\u00e9s.
      \n\"Image
      \nAssurez-vous que vous utilisez un projet Web – Mobile ou Tablette ne fonctionneront pas pour cet exemple, car vous ne pouvez pas passer la souris sur un \u00e9cran tactile.<\/li>\n
    2. L’image \u00e9tant toujours s\u00e9lectionn\u00e9e, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n
    3. Cliquez sur le menu d\u00e9roulant D\u00e9clencheur, survolez la section Souris<\/strong> et s\u00e9lectionnez une action Au passage de la souris.<\/strong> <\/li>\n
    4. Tapez sur le menu d\u00e9roulant Action et s\u00e9lectionnez une action Modifier le style<\/strong>. Vous verrez appara\u00eetre un aper\u00e7u du canevas dans lequel vous pourrez choisir l’image comme cible de l’action. <\/li>\n
    5. Dans le menu d\u00e9roulant ci-dessous, s\u00e9lectionnez \u00ab\u00a0Opacit\u00e9\u00a0\u00bb comme style \u00e0 modifier et fixez son opacit\u00e9 \u00e0 100 %. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.
    6. Dans la palette \u00c9v\u00e9nements, vous trouverez l’\u00e9v\u00e9nement que vous venez de cr\u00e9er. Vous verrez un bouton \u00ab\u00a0+\u00a0\u00bb \u00e0 c\u00f4t\u00e9 de l’action Modifier le style<\/strong>. Cliquez dessus pour ajouter une autre action \u00e0 l’\u00e9v\u00e9nement. \"Cliquez<\/li>\n
    7. Le d\u00e9clencheur Au survol de la souris<\/strong> devrait d\u00e9j\u00e0 \u00eatre s\u00e9lectionn\u00e9, il ne vous reste plus qu’\u00e0 choisir l’action D\u00e9placer<\/strong>.<\/li>\n
    8. S\u00e9lectionnez l’image comme cible de l’action dans l’aper\u00e7u du canevas. Une liste d\u00e9roulante appara\u00eet en dessous. Ici, vous pouvez d\u00e9finir o\u00f9 d\u00e9placer l’image lorsque vous passez la souris dessus. Conservez la position X (horizontale), mais modifiez la position Y (verticale) de 10px.
      \n\"La
      \nAjoutez un assouplissement lin\u00e9aire et modifiez la dur\u00e9e de l’assouplissement pour qu’elle soit de 200 ms. <\/p>\n

      Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.<\/li>\n

    9. Revenez \u00e0 la palette \u00c9v\u00e9nements et vous verrez un bouton \u00ab\u00a0Fl\u00e8che\u00a0\u00bb entre les actions Changer de style<\/strong> et D\u00e9placer<\/strong> que vous avez cr\u00e9\u00e9es. Cette fl\u00e8che indique l’ordre des actions. Pour l’instant, les actions s’ex\u00e9cutent l’une apr\u00e8s l’autre, mais vous voudrez qu’elles se produisent en m\u00eame temps.

      <\/a>Formulaires interactifs avec d\u00e9clencheurs multiples<\/h2>\n

      Vous pouvez \u00e9galement utiliser diff\u00e9rents d\u00e9clencheurs d’\u00e9v\u00e9nements sur un m\u00eame \u00e9l\u00e9ment. Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er des \u00e9v\u00e9nements avec des d\u00e9clencheurs \u00ab\u00a0On Focus In\u00a0\u00bb<\/strong> et \u00a0\u00bb On Focus Out\u00a0\u00bb<\/strong> pour modifier l’apparence d’un champ de texte de saisie.
      \n

        \n
      1. Faites glisser un champ de texte d’entr\u00e9e F<\/kbd> sur le canevas et donnez-lui le style que vous souhaitez.<\/li>\n
      2. Le champ de texte de saisie \u00e9tant s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n
      3. Dans le menu d\u00e9roulant D\u00e9clencheur, choisissez un d\u00e9clencheur On Focus In.<\/strong> <\/li>\n
      4. S\u00e9lectionnez une action Modifier le style<\/strong> et choisissez le champ de texte de saisie comme cible de l’action dans l’aper\u00e7u du canevas.<\/li>\n
      5. Vous verrez appara\u00eetre une liste d\u00e9roulante dans laquelle vous pourrez sp\u00e9cifier les styles du champ de texte de saisie que vous souhaitez modifier. Dans cet exemple, modifiez la bordure du champ de texte de saisie pour qu’elle soit d’une couleur plus fonc\u00e9e. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.<\/li>\n
      6. Le champ de texte de saisie \u00e9tant toujours s\u00e9lectionn\u00e9, revenez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb en haut de la palette pour cr\u00e9er une nouvelle interaction.\"Le Cette fois, choisissez un d\u00e9clencheur On Focus Out<\/strong> et une action Change Style<\/strong>.<\/li>\n
      7. Choisissez le champ de texte de saisie comme cible de l’action et s\u00e9lectionnez la bordure comme style \u00e0 modifier dans la liste d\u00e9roulante ci-dessous. La couleur de la bordure par d\u00e9faut devrait \u00eatre s\u00e9lectionn\u00e9e automatiquement, vous pouvez donc cliquer sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.<\/li>\n<\/ol>\n

        Voici \u00e0 quoi devrait ressembler votre palette Events :
        \n\"Palette
        \nCliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Concentrez-vous sur le champ de texte de saisie et observez comment sa bordure change de couleur. Cliquez hors du champ de saisie et vous verrez la couleur de sa bordure changer \u00e0 nouveau. <\/p>\n

        <\/a>Refl\u00e9ter les donn\u00e9es de l’utilisateur<\/h2>\n

        Dans ce dernier exercice, vous apprendrez \u00e0 utiliser l’action D\u00e9finir une valeur<\/strong> pour refl\u00e9ter les entr\u00e9es de l’utilisateur pendant la simulation.
        \n

          \n
        1. Placez un champ de texte de saisie et un bouton B<\/kbd> sur le canevas et donnez-leur le style que vous souhaitez. Faites glisser un \u00e9l\u00e9ment Texte T<\/kbd> sous le champ de texte de saisie et marquez-le comme \u00e9tant cach\u00e9 pendant la simulation. \"\u00c9l\u00e9ment<\/li>\n
        2. S\u00e9lectionnez le bouton, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb. Choisissez un d\u00e9clencheur On Click<\/strong> dans la liste d\u00e9roulante. <\/li>\n
        3. Choisissez l’action D\u00e9finir la valeur d’un \u00e9l\u00e9ment<\/strong> dans la liste d\u00e9roulante. Vous verrez appara\u00eetre un aper\u00e7u du canevas dans lequel vous pourrez s\u00e9lectionner l’\u00e9l\u00e9ment de texte situ\u00e9 sous le champ de saisie comme cible de l’action. <\/li>\n
        4. Regardez le texte ci-dessous qui dit \u00ab\u00a0La valeur est…\u00a0\u00bb et s\u00e9lectionnez le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb. Cliquez ensuite sur le lien \u00ab\u00a0Ajouter une expression\u00a0\u00bb. \"Ajouter<\/li>\n
        5. Vous verrez appara\u00eetre le constructeur d’expression de valeur, dans lequel vous d\u00e9finirez la valeur qui sera transf\u00e9r\u00e9e \u00e0 l’\u00e9l\u00e9ment de texte. Suivez les \u00e9tapes suivantes pour cr\u00e9er la valeur :\n
            \n
          • \n