{"id":124619,"date":"2018-02-22T16:08:29","date_gmt":"2018-02-22T15:08:29","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/variables\/"},"modified":"2025-02-03T16:43:42","modified_gmt":"2025-02-03T15:43:42","slug":"variables","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/variables","title":{"rendered":"Variables"},"content":{"rendered":"<p>Avec les variables, vous pouvez faire passer vos wireframes au niveau sup\u00e9rieur et construire des projets plus vrais que nature. Vous pouvez utiliser des variables pour stocker et transf\u00e9rer des informations telles que du texte, des images ou des donn\u00e9es d&rsquo;un \u00e9cran \u00e0 l&rsquo;autre dans votre projet. Par exemple, vous pouvez prendre un nom tap\u00e9 dans un champ de texte d&rsquo;entr\u00e9e et afficher ce m\u00eame nom dans un \u00e9l\u00e9ment Texte sur un autre \u00e9cran.<\/p>\n<p><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/variable-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" variable-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/variable-example.png\" alt=\"Exemple de variable\">Exemple de variable<\/video><\/p>\n<h2><a id=\"create-variable\"><\/a>Cr\u00e9er une variable<\/h2>\n<p>Consultez la palette Variables et cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour cr\u00e9er une nouvelle variable dans votre projet. Si vous ne voyez pas la palette Variables, assurez-vous qu&rsquo;elle est visible dans le menu Palette.<br \/>\nLorsque vous cr\u00e9ez une nouvelle variable, vous pouvez d\u00e9finir sa valeur par d\u00e9faut. Le plus souvent, vous voudrez laisser cette valeur vide.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44229\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-variable-1.png\" alt=\"Nouveau pop-up de variables\" width=\"1624\" height=\"779\"><\/p>\n<h2><a id=\"define-variable\"><\/a>D\u00e9finir la valeur d&rsquo;une variable<\/h2>\n<p>Pour modifier la valeur d&rsquo;une variable pendant la simulation, vous devez utiliser des \u00e9v\u00e9nements. Vous pouvez le faire de deux mani\u00e8res : <\/p>\n<ul>\n<li><strong>Glisser-d\u00e9poser :<\/strong> Faites glisser l&rsquo;\u00e9l\u00e9ment auquel vous souhaitez attribuer la valeur de la variable vers la palette Variable. Par exemple, faites glisser un champ de texte de saisie vers la palette Variables. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-and-drop-variable.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Glisser-d\u00e9poser la variable<\/video><br \/>\nCela cr\u00e9e automatiquement un \u00e9v\u00e9nement <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong>, qui transf\u00e8re ce qui se trouve dans le champ de texte de saisie vers la variable lorsque vous passez \u00e0 un autre \u00e9cran.\n<\/li>\n<li><strong>La palette \u00c9v\u00e9nements :<\/strong> Vous pouvez \u00e9galement cr\u00e9er manuellement les \u00e9v\u00e9nements qui donneront une valeur \u00e0 une variable \u00e0 l&rsquo;aide de la palette \u00c9v\u00e9nements. Cette fonction est utile lorsque vous souhaitez d\u00e9finir la valeur d&rsquo;une variable d&rsquo;une autre mani\u00e8re, par exemple apr\u00e8s avoir quitt\u00e9 un champ de texte ou cliqu\u00e9 sur un bouton.\n<ol>\n<li>S\u00e9lectionnez l&rsquo;\u00e9l\u00e9ment auquel vous souhaitez attribuer une valeur \u00e0 la variable. Prenons l&rsquo;exemple d&rsquo;un champ de texte d&rsquo;entr\u00e9e. <\/li>\n<li>Allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44237\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-event-variables-1.png\" alt=\"Ajouter un \u00e9v\u00e9nement dans la palette d'\u00e9v\u00e9nements\" width=\"1822\" height=\"1037\"><\/li>\n<li>Vous verrez une liste d\u00e9roulante intitul\u00e9e \u00ab\u00a0Choose Trigger\u00a0\u00bb (choisir un d\u00e9clencheur). Cliquez dessus et choisissez un d\u00e9clencheur qui lancera l&rsquo;\u00e9v\u00e9nement. Par exemple, choisissez le d\u00e9clencheur <strong>On Focus Out.<\/strong>   <\/li>\n<li>S\u00e9lectionnez <strong>D\u00e9finir la valeur d&rsquo;<\/strong> un \u00e9l\u00e9ment dans la liste d\u00e9roulante \u00ab\u00a0Choisir l&rsquo;action\u00a0\u00bb.<\/li>\n<li>Vous verrez ensuite appara\u00eetre un aper\u00e7u du canevas avec deux boutons radio : \u00ab\u00a0\u00c9l\u00e9ments\u00a0\u00bb et \u00ab\u00a0Variables\u00a0\u00bb. Cliquez sur le bouton radio \u00ab\u00a0Variables\u00a0\u00bb et choisissez dans la liste une variable que vous avez pr\u00e9c\u00e9demment cr\u00e9\u00e9e. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44241\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Select-variable-value.png\" alt=\"Variable s\u00e9lectionn\u00e9e dans la bo\u00eete de dialogue des \u00e9v\u00e9nements\" width=\"668\" height=\"300\"><\/li>\n<li>Vous trouverez ci-dessous l&rsquo;endroit o\u00f9 vous d\u00e9finirez la valeur \u00e0 donner \u00e0 la variable. Cliquez sur le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb, puis sur le lien \u00ab\u00a0Ajouter une expression\u00a0\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44246\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-expression-variables-1.png\" alt=\"Ajouter un lien de texte d'expression survol\u00e9\" width=\"804\" height=\"280\"><\/li>\n<li>Vous verrez maintenant le constructeur de l&rsquo;expression de valeur, qui vous permet de d\u00e9finir la valeur que vous donnerez \u00e0 la variable. Faites glisser et d\u00e9posez le champ de texte de l&rsquo;aper\u00e7u du canevas dans l&rsquo;espace libre de l&rsquo;expression \u00ab\u00a0Cliquez pour modifier ou faites glisser et d\u00e9posez un composant\u00a0\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44248\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Input-to-variable-value.png\" alt=\"Champ de texte de saisie d\u00e9plac\u00e9 vers l'expression\" width=\"799\" height=\"497\"><\/li>\n<li>Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression et de l&rsquo;\u00e9v\u00e9nement.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Cet \u00e9v\u00e9nement transf\u00e8re ce qui a \u00e9t\u00e9 saisi dans le champ de saisie dans la variable lorsque vous cliquez hors du champ de saisie.<\/p>\n<h2><a id=\"give-element-value\"><\/a>Donner \u00e0 un \u00e9l\u00e9ment la valeur d&rsquo;une variable<\/h2>\n<p>Maintenant que vous avez d\u00e9fini une valeur pour la variable, vous pouvez d\u00e9placer la valeur de la variable vers un \u00e9l\u00e9ment d&rsquo;un autre \u00e9cran. Acc\u00e9dez \u00e0 un autre \u00e9cran de votre projet et s\u00e9lectionnez l&rsquo;\u00e9l\u00e9ment dans lequel vous souhaitez afficher la valeur de la variable. Par exemple, vous pouvez s\u00e9lectionner un \u00e9l\u00e9ment Text <kbd>T<\/kbd> que vous avez ajout\u00e9 au Canvas. Vous pouvez donner la valeur de la variable \u00e0 cet \u00e9l\u00e9ment texte de deux mani\u00e8res :<\/p>\n<ul>\n<li><strong>Glisser-d\u00e9poser :<\/strong> faites glisser la variable de la palette Variable vers l&rsquo;\u00e9l\u00e9ment de texte sur le canevas.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-variable-to-element.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-variable-to-element.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-variable-to-element.png\" alt=\"Faites glisser la variable vers l'\u00e9l\u00e9ment\">Glisser la variable vers l&rsquo;\u00e9l\u00e9ment<\/video> Cela cr\u00e9era automatiquement un \u00e9v\u00e9nement <strong>On Page Load<\/strong> + <strong>Set Value<\/strong>, qui transf\u00e9rera ce qui est stock\u00e9 dans la variable vers l&rsquo;\u00e9l\u00e9ment de texte sur cet \u00e9cran.<\/li>\n<li><strong>La palette d&rsquo;\u00e9v\u00e9nements :<\/strong> vous pouvez vouloir qu&rsquo;un \u00e9l\u00e9ment affiche la valeur de la variable apr\u00e8s avoir fait quelque chose d&rsquo;autre \u00e0 l&rsquo;\u00e9cran, par exemple en tapant sur du texte.\n<ol>\n<li>S\u00e9lectionnez l&rsquo;\u00e9l\u00e9ment qui doit afficher la valeur de la variable. Par exemple, s\u00e9lectionnez un \u00e9l\u00e9ment texte. <\/li>\n<li>Acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n<li>S\u00e9lectionnez un d\u00e9clencheur <strong>On Page Load<\/strong> et une action <strong>Set Value<\/strong> pour l&rsquo;\u00e9v\u00e9nement.<\/li>\n<li>Vous verrez un aper\u00e7u du canevas dans lequel vous pourrez s\u00e9lectionner l&rsquo;\u00e9l\u00e9ment de texte comme cible de l&rsquo;action.<\/li>\n<li>Ci-dessous, cliquez sur le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb et sur le lien \u00ab\u00a0Ajouter une expression\u00a0\u00bb pour ouvrir le g\u00e9n\u00e9rateur d&rsquo;expression de valeur.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44251\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-expression-input-field.png\" alt=\"Valeur calcul\u00e9e pour le champ de saisie\" width=\"1089\" height=\"687\"><\/li>\n<li>Cliquez sur l&rsquo;onglet \u00ab\u00a0Variables\u00a0\u00bb dans l&rsquo;aper\u00e7u du canevas et faites glisser la variable de la liste vers l&rsquo;espace libre de l&rsquo;expression.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Variable-in-expression-1.png\" alt=\"Variables de l'onglet dans l'expression\" width=\"1346\" height=\"696\"><\/li>\n<li>Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression et de l&rsquo;\u00e9v\u00e9nement.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Cet \u00e9v\u00e9nement permet de copier la valeur de la variable et de la coller sur l&rsquo;\u00e9l\u00e9ment de texte lorsque vous cliquez dessus pendant la simulation. Vous pouvez cr\u00e9er de nombreux types de projets diff\u00e9rents avec les variables &#8211; continuez \u00e0 lire l&rsquo;article suivant pour voir d&rsquo;autres exemples de leur utilisation pour partager des informations entre les \u00e9crans, d\u00e9finir un contenu conditionnel et cr\u00e9er des comptes \u00e0 rebours automatiques.<\/p>\n<h2>Comment faire : apprenez \u00e0 concevoir des cas d&rsquo;utilisation courants.<\/h2>\n<p>Avec les variables, vous pouvez transf\u00e9rer des informations d&rsquo;un \u00e9cran \u00e0 l&rsquo;autre et cr\u00e9er des interactions avanc\u00e9es. D\u00e9couvrez ces exercices pour apprendre \u00e0 les utiliser. <\/p>\n<h2><a id=\"share-information\"><\/a>Partager des informations entre les \u00e9crans<\/h2>\n<p>Dans cet exercice, vous allez cr\u00e9er un \u00e9cran d&rsquo;inscription avec une adresse \u00e9lectronique et voir cette adresse appara\u00eetre sur un \u00e9cran de confirmation.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/share-information-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" share-information-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/share-information-example.png\" alt=\"Exemple de partage d'informations\">Exemple de partage d&rsquo;informations<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Cr\u00e9ez un projet avec deux \u00e9crans. Allez \u00e0 l&rsquo;\u00e9cran 1 et concevez un formulaire d&rsquo;inscription \u00e0 l&rsquo;aide d&rsquo;un champ de texte de saisie <kbd>F<\/kbd> et d&rsquo;un bouton <kbd>B.<\/kbd> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44266\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Share-info-form.png\" alt=\"Un champ de texte et un bouton pour cr\u00e9er un formulaire\" width=\"2046\" height=\"1190\"><\/li>\n<li>Ajoutez un \u00e9l\u00e9ment de texte \u00e0 l&rsquo;\u00e9cran 2 et donnez-lui le style souhait\u00e9. Vous utiliserez cet \u00e9l\u00e9ment de texte pour afficher l&rsquo;adresse \u00e9lectronique que vous avez saisie dans l&rsquo;\u00e9cran pr\u00e9c\u00e9dent. <\/li>\n<li>Allez dans la palette Variables et cr\u00e9ez une nouvelle variable en cliquant sur le bouton \u00ab\u00a0+\u00a0\u00bb. Nommez la variable \u00ab\u00a0Email\u00a0\u00bb et laissez sa valeur par d\u00e9faut vide. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44267\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-email-variable.png\" alt=\"Variable d'email pop-up\" width=\"1897\" height=\"840\"><\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>Revenez \u00e0 l&rsquo;\u00e9cran 1 et s\u00e9lectionnez le champ de texte de saisie. Faites-le glisser vers la variable \u00ab\u00a0Email\u00a0\u00bb dans la palette Variables. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" email-to-variable.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Email to variable<\/video><br \/>\nCela cr\u00e9e un \u00e9v\u00e9nement <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong>, qui donne \u00e0 la variable la valeur que vous avez saisie dans le champ de texte lorsque vous vous \u00e9loignez de l&rsquo;\u00e9cran.\n<\/li>\n<li>S\u00e9lectionnez le bouton situ\u00e9 sous le champ de texte de saisie et faites-le glisser vers l&rsquo;\u00e9cran 2 de la palette \u00c9crans, cr\u00e9ant ainsi un lien entre le bouton et l&rsquo;\u00e9cran 2.<\/li>\n<li>Allez \u00e0 l&rsquo;\u00e9cran 2 et faites glisser la variable \u00ab\u00a0Email\u00a0\u00bb vers l&rsquo;\u00e9l\u00e9ment de texte \u00e0 l&rsquo;\u00e9cran.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44271\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Variable-to-text.png\" alt=\"Variable d'email gliss\u00e9e dans un \u00e9l\u00e9ment de texte, cr\u00e9ant un \u00e9v\u00e9nement au chargement de la page + valeur d\u00e9finie\" width=\"992\" height=\"401\"><br \/>\n Cela cr\u00e9e un \u00e9v\u00e9nement <strong>On Page Load<\/strong> + <strong>Set Value<\/strong> et donne \u00e0 l&rsquo;\u00e9l\u00e9ment de texte la valeur de la variable lors du premier chargement de l&rsquo;\u00e9cran.<\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Saisissez une adresse \u00e9lectronique dans le formulaire d&rsquo;inscription et cliquez sur le bouton pour acc\u00e9der \u00e0 l&rsquo;\u00e9cran 2. Vous verrez l&rsquo;adresse \u00e9lectronique que vous avez saisie appara\u00eetre dans l&rsquo;\u00e9l\u00e9ment de texte.  <\/p>\n<h2><a id=\"show-hide-content\"><\/a>Afficher ou masquer le contenu conditionnel<\/h2>\n<p>Vous pouvez utiliser des variables avec des conditions pour d\u00e9terminer la relation entre des \u00e9l\u00e9ments sur diff\u00e9rents \u00e9crans. Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er un formulaire d&rsquo;inscription qui affiche plus de contenu sur un autre \u00e9cran en fonction de ce que vous saisissez dans le formulaire.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-content-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" conditional-content-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-content-example.png\" alt=\"Exemple de contenu conditionnel\">Exemple de contenu conditionnel<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Cr\u00e9ez un projet avec deux \u00e9crans. Cr\u00e9ez un formulaire d&rsquo;inscription sur l&rsquo;\u00e9cran 1 avec un champ de texte et un bouton. <\/li>\n<li>Passez \u00e0 l&rsquo;\u00e9cran 2 et concevez-le comme vous le souhaitez. S\u00e9lectionnez certains \u00e9l\u00e9ments de l&rsquo;\u00e9cran et regroupez-les \u00e0 l&rsquo;aide de <kbd>Commande<\/kbd> \/ <kbd>Contr\u00f4le<\/kbd> + <kbd>G.<\/kbd> <\/li>\n<li>Marquez ce groupe comme \u00e9tant cach\u00e9 dans la palette Propri\u00e9t\u00e9s.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44275\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-conditional-content.png\" alt=\"Groupe s\u00e9lectionn\u00e9 et marqu\u00e9 comme cach\u00e9\" width=\"866\" height=\"341\"><\/li>\n<li>Cr\u00e9ez une nouvelle variable nomm\u00e9e \u00ab\u00a0User\u00a0\u00bb et laissez sa valeur par d\u00e9faut vide.<\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>Revenez \u00e0 l&rsquo;\u00e9cran 1 et s\u00e9lectionnez le champ de texte de saisie dans le formulaire d&rsquo;inscription. Faites glisser ce champ de texte de saisie vers la variable \u00ab\u00a0User\u00a0\u00bb dans la palette Variable, ce qui cr\u00e9e un \u00e9v\u00e9nement <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong>. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44279\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Username-to-variable.png\" alt=\"Champ de texte de saisie du nom d'utilisateur d\u00e9plac\u00e9 vers une variable\" width=\"754\" height=\"382\"><\/li>\n<li>S\u00e9lectionnez le bouton sur cet \u00e9cran et faites-le glisser vers l&rsquo;\u00e9cran 2 de la palette \u00c9crans, ce qui cr\u00e9e un lien entre les \u00e9crans.<\/li>\n<li>Allez \u00e0 l&rsquo;\u00e9cran 2 et double-cliquez sur le canevas pour s\u00e9lectionner l&rsquo;\u00e9cran de base.<\/li>\n<li>Acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb. Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Page Load<\/strong> + <strong>Show<\/strong> ( <strong>chargement de la page<\/strong> + <strong>affichage)<\/strong>, en affichant le groupe que vous avez cr\u00e9\u00e9 pr\u00e9c\u00e9demment.  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<\/li>\n<li>Cliquez sur le lien \u00ab\u00a0Ajouter une condition\u00a0\u00bb au-dessus de l&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er, ce qui ouvrira le g\u00e9n\u00e9rateur d&rsquo;expressions conditionnelles.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44277\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-condition-variables.png\" alt=\"Survoler le lien \"ajouter un texte de condition\".\" width=\"792\" height=\"381\"><\/li>\n<li>Suivez les \u00e9tapes suivantes pour cr\u00e9er la condition :\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 60%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743467489\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Cliquez sur l&rsquo;onglet \u00ab\u00a0Variables\u00a0\u00bb dans l&rsquo;aper\u00e7u du canevas et faites glisser la variable \u00ab\u00a0Utilisateur\u00a0\u00bb vers l&rsquo;espace libre de l&rsquo;expression.<\/li>\n<li><strong>b.<\/strong> Faites glisser une fonction logique <strong>\u00e9gale (=)<\/strong> \u00e0 c\u00f4t\u00e9 de la variable.<\/li>\n<li><strong>c.<\/strong>  Un nouvel espace appara\u00eet, dans lequel vous pouvez saisir \u00ab\u00a0Admin\u00a0\u00bb.<\/li>\n<li><strong>d.<\/strong>  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de la condition.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Saisissez \u00ab\u00a0Admin\u00a0\u00bb dans le champ de saisie, cliquez sur le bouton pour passer \u00e0 l&rsquo;\u00e9cran 2 et vous verrez tout le contenu s&rsquo;afficher \u00e0 l&rsquo;\u00e9cran. Simulez \u00e0 nouveau le projet et saisissez une autre valeur dans le champ de saisie. Cliquez sur le bouton pour passer \u00e0 l&rsquo;\u00e9cran 2 et vous verrez moins d&rsquo;\u00e9l\u00e9ments \u00e0 l&rsquo;\u00e9cran cette fois. <\/p>\n<h2><a id=\"recurring-events\"><\/a>\u00c9v\u00e9nements r\u00e9currents<\/h2>\n<p>Dans cet exercice, vous apprendrez \u00e0 utiliser le d\u00e9clencheur <strong>Sur changement de variable<\/strong>, qui vous permet de cr\u00e9er des \u00e9v\u00e9nements automatis\u00e9s, comme un compte \u00e0 rebours.<\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Ajoutez un \u00e9l\u00e9ment de texte et un bouton au canevas. Attribuez \u00e0 l&rsquo;\u00e9l\u00e9ment texte la valeur \u00ab\u00a010\u00a0\u00bb et nommez le bouton \u00ab\u00a0D\u00e9marrer\u00a0\u00bb. <\/li>\n<li>Cr\u00e9ez une nouvelle variable nomm\u00e9e \u00ab\u00a0Compte \u00e0 rebours\u00a0\u00bb et laissez sa valeur par d\u00e9faut vide.<\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>S\u00e9lectionnez le bouton \u00ab\u00a0Start\u00a0\u00bb sur le canevas et cr\u00e9ez un \u00e9v\u00e9nement <strong>On Tap<\/strong> + <strong>Set Value<\/strong>. S\u00e9lectionnez la variable \u00ab\u00a0Compte \u00e0 rebours\u00a0\u00bb comme cible de l&rsquo;\u00e9v\u00e9nement et saisissez \u00ab\u00a011\u00a0\u00bb comme valeur \u00e0 donner \u00e0 la variable. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44284\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Countdown-variable-value.png\" alt=\"La variable compte \u00e0 rebours a une valeur fixe de 11\" width=\"1952\" height=\"1230\"><\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb en haut de la palette pour ajouter une autre interaction.<\/li>\n<li>S\u00e9lectionnez un d\u00e9clencheur <strong>\u00ab\u00a0On Variable Change\u00a0\u00bb<\/strong>. Vous verrez appara\u00eetre un menu d\u00e9roulant dans lequel vous pourrez s\u00e9lectionner la variable \u00ab\u00a0Compte \u00e0 rebours\u00a0\u00bb. <\/li>\n<li>S\u00e9lectionnez une action <strong>Pause<\/strong> et modifiez la dur\u00e9e en 1000ms (1 seconde). Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44286\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/On-variable-change-pause.png\" alt=\"Un \u00e9v\u00e9nement de changement de variable et de pause\" width=\"2042\" height=\"674\"><\/li>\n<li>Regardez l&rsquo;action que vous venez de cr\u00e9er dans la palette \u00c9v\u00e9nements et cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour ajouter une autre action.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44288\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Variable-change-add-action.png\" alt=\"Ajouter un bouton d'action survol\u00e9\" width=\"1740\" height=\"1062\"><\/li>\n<li>Choisissez une <strong>action On Variable Change<\/strong> avec la variable \u00ab\u00a0Countdown\u00a0\u00bb. Choisissez une action <strong>Set Value<\/strong> et appuyez sur le bouton radio &lsquo;Variables&rsquo; pour trouver la variable &lsquo;Countdown&rsquo; \u00e0 s\u00e9lectionner. <\/li>\n<li>Pour la valeur, cliquez sur le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb et sur le lien \u00ab\u00a0Ajouter une expression\u00a0\u00bb, ce qui ouvrira le g\u00e9n\u00e9rateur d&rsquo;expression de valeur.<\/li>\n<li>Suivez les \u00e9tapes suivantes pour construire l&rsquo;expression :\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  Cliquez sur l&rsquo;onglet \u00ab\u00a0Variables\u00a0\u00bb dans l&rsquo;aper\u00e7u du canevas et faites glisser la variable \u00ab\u00a0Compte \u00e0 rebours\u00a0\u00bb vers l&rsquo;espace libre de l&rsquo;expression.<\/li>\n<li><strong>b.<\/strong> Placez une fonction num\u00e9rique <strong>Moins (-)<\/strong> \u00e0 c\u00f4t\u00e9.<\/li>\n<li><strong>c.<\/strong>  Vous verrez appara\u00eetre un nouvel espace dans l&rsquo;expression, o\u00f9 vous pourrez taper \u00ab\u00a01\u00a0\u00bb.<\/li>\n<li><strong>d.<\/strong>  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression et de l&rsquo;\u00e9v\u00e9nement.<\/li>\n<\/ul>\n<\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour ajouter une action suppl\u00e9mentaire &#8211; <strong>Sur changement de variable<\/strong> + <strong>D\u00e9finir la valeur<\/strong>. S\u00e9lectionnez l&rsquo;\u00e9l\u00e9ment de texte comme cible de l&rsquo;action et cliquez sur le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb et sur le lien \u00ab\u00a0Ajouter une expression\u00a0\u00bb. <\/li>\n<li>Faites glisser la variable \u00ab\u00a0Compte \u00e0 rebours\u00a0\u00bb dans l&rsquo;espace libre de l&rsquo;expression et cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;\u00e9v\u00e9nement.<\/li>\n<li>Cliquez sur le lien \u00ab\u00a0Ajouter une condition\u00a0\u00bb situ\u00e9 au-dessus de vos \u00e9v\u00e9nements <strong>\u00ab\u00a0Sur changement de variable\u00a0\u00bb<\/strong>. Faites glisser la variable \u00ab\u00a0Compte \u00e0 rebours\u00a0\u00bb dans l&rsquo;espace libre de l&rsquo;expression, suivie d&rsquo;une fonction logique <strong>Plus grand ou \u00e9gal (\u2265)<\/strong>. Enfin, tapez \u00ab\u00a01\u00a0\u00bb dans l&rsquo;espace libre qui appara\u00eet et cliquez sur \u00ab\u00a0OK\u00a0\u00bb.  <\/li>\n<\/ol>\n<p>Voici \u00e0 quoi devrait ressembler votre palette Events :<\/p>\n<p>Cet exemple fonctionne en modifiant la valeur de la variable \u00ab\u00a0Compte \u00e0 rebours\u00a0\u00bb lorsque vous cliquez sur le bouton \u00ab\u00a0D\u00e9marrer\u00a0\u00bb. Cette action d\u00e9clenche les actions <strong>\u00ab\u00a0On Variable Change\u00a0\u00bb (sur changement de variable<\/strong> ) : une pause d&rsquo;une seconde et une soustraction de 1 \u00e0 la variable. La derni\u00e8re action transf\u00e8re la valeur de la variable \u00e0 l&rsquo;\u00e9l\u00e9ment de texte. \u00c9tant donn\u00e9 que le deuxi\u00e8me \u00e9v\u00e9nement <strong>Set Value<\/strong> affecte la variable elle-m\u00eame (en soustrayant 1), les \u00e9v\u00e9nements se d\u00e9clenchent \u00e0 nouveau jusqu&rsquo;\u00e0 ce que la valeur de la variable soit inf\u00e9rieure \u00e0 1.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avec les variables, vous pouvez faire passer vos wireframes au niveau sup\u00e9rieur et construire des projets plus vrais que nature. Vous pouvez utiliser des variables pour&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8420],"tags":[],"class_list":["post-124619","post","type-post","status-publish","format-standard","hentry","category-formation","category-interactions-web-et-mobiles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124619"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124619"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124619\/revisions"}],"predecessor-version":[{"id":126129,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124619\/revisions\/126129"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}