{"id":129051,"date":"2018-02-22T16:08:29","date_gmt":"2018-02-22T15:08:29","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/variables\/"},"modified":"2025-02-13T17:55:54","modified_gmt":"2025-02-13T16:55:54","slug":"variables","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/variablen","title":{"rendered":"Variablen"},"content":{"rendered":"<p>Mit Variables k\u00f6nnen Sie Ihre wireframes auf die n\u00e4chste Stufe bringen und lebensechte Projekte erstellen.<\/p>\n<p>Sie k\u00f6nnen Variablen verwenden, um Informationen wie Text, Bilder oder Daten zu speichern und \u00fcber Bildschirme hinweg in Ihrem Projekt zu \u00fcbertragen. Sie k\u00f6nnen zum Beispiel einen Namen, den Sie in ein Textfeld eingegeben haben, in einem Textelement auf einem anderen Bildschirm anzeigen.<br \/>\n<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=\"Variables Beispiel\">Variables Beispiel<\/video><\/p>\n<h2><a id=\"create-variable\"><\/a>Erstellen Sie eine Variable<\/h2>\n<p>Sehen Sie sich die Palette Variablen an und klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216;, um eine neue Variable in Ihrem Projekt zu erstellen. Wenn Sie die Variablenpalette nicht sehen, vergewissern Sie sich, dass sie im Men\u00fc Palette aktiviert ist.<br \/>\nWenn Sie eine neue Variable erstellen, k\u00f6nnen Sie ihren Standardwert festlegen. In den meisten F\u00e4llen werden Sie diesen Wert leer lassen wollen.<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=\"Neue Variable Pop-up\" width=\"1624\" height=\"779\"><\/p>\n<h2><a id=\"define-variable\"><\/a>Definieren Sie den Wert einer Variablen<\/h2>\n<p>Um den Wert einer Variablen w\u00e4hrend der Simulation zu \u00e4ndern, m\u00fcssen Sie Ereignisse verwenden. Sie k\u00f6nnen dies auf zwei Arten tun: <\/p>\n<ul>\n<li><strong>Ziehen und ablegen:<\/strong> Ziehen Sie das Element, das Sie der Variable als Wert zuweisen m\u00f6chten, auf die Palette Variable. Ziehen Sie zum Beispiel ein Eingabe-Textfeld auf die Palette Variablen.<br \/>\n<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-and-drop-variable.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-and-drop-variable.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-and-drop-variable.png\" alt=\"Variable ziehen und ablegen\">Ziehen und Ablegen der Variablen<\/video><br \/>\nDadurch wird automatisch ein Ereignis <strong>&#8222;On Page Unload<\/strong> + <strong>Set Value&#8220;<\/strong> erzeugt, das den Inhalt des Eingabefeldes in die Variable \u00fcbertr\u00e4gt, wenn Sie zu einem anderen Bildschirm wechseln.<\/li>\n<li><strong>Die Ereignispalette:<\/strong> Mit der Palette Ereignisse k\u00f6nnen Sie auch manuell die Ereignisse erstellen, die einer Variable einen Wert geben. Dies ist n\u00fctzlich, wenn Sie den Wert einer Variablen auf andere Weise definieren m\u00f6chten, z.B. nach dem Fokussieren aus einem Eingabefeld oder dem Klicken auf eine Schaltfl\u00e4che.\n<ol>\n<li>W\u00e4hlen Sie das Element aus, dem Sie einen Wert f\u00fcr die Variable zuweisen m\u00f6chten. Nehmen Sie als Beispiel ein Eingabe-Textfeld. <\/li>\n<li>Gehen Sie zur Palette Ereignisse und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;.<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=\"Ereignis in der Ereignispalette hinzuf\u00fcgen\" width=\"1822\" height=\"1037\"><\/li>\n<li>Sie sehen ein Dropdown-Men\u00fc mit der Bezeichnung &#8218;Ausl\u00f6ser w\u00e4hlen&#8216;. Klicken Sie darauf und w\u00e4hlen Sie einen Ausl\u00f6ser, der das Ereignis starten soll. W\u00e4hlen Sie zum Beispiel den Ausl\u00f6ser <strong>On Focus Out<\/strong>.  <\/li>\n<li>W\u00e4hlen Sie <strong>Wert<\/strong> auf ein Element <strong>setzen<\/strong> aus der Dropdown-Liste &#8218;Aktion w\u00e4hlen&#8216;.<\/li>\n<li>Daraufhin wird eine Vorschau des Canvas mit zwei Optionsfeldern angezeigt &#8211; &#8222;Elemente&#8220; und &#8222;Variablen&#8220;. Klicken Sie auf das Optionsfeld &#8218;Variablen&#8216; und w\u00e4hlen Sie eine Variable aus der Liste, die Sie zuvor erstellt haben. <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=\"Im Ereignisdialog ausgew\u00e4hlte Variable\" width=\"668\" height=\"300\"><\/li>\n<li>Unten finden Sie die Stelle, an der Sie den Wert f\u00fcr die Variable festlegen. Klicken Sie auf das Optionsfeld &#8218;Berechnet&#8216; und dann auf den Textlink &#8218;Ausdruck hinzuf\u00fcgen&#8216;. <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=\"Ausdruckstext hinzuf\u00fcgen Link schwebte\" width=\"804\" height=\"280\"><\/li>\n<li>Sie sehen nun den Value Expression Builder, in dem Sie festlegen k\u00f6nnen, welchen Wert Sie der Variable zuweisen. Ziehen Sie das Eingabetextfeld aus der Canvas-Vorschau per Drag &amp; Drop in das freie Feld des Ausdrucks, auf dem &#8222;Klicken Sie zum Bearbeiten oder ziehen Sie eine Komponente per Drag &amp; Drop&#8220; steht. <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=\"Eingabe-Textfeld auf Ausdruck gezogen\" width=\"799\" height=\"497\"><\/li>\n<li>Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks und des Ereignisses zu beenden.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Dieses Ereignis \u00fcbertr\u00e4gt die in das Eingabefeld eingegebenen Daten in die Variable, wenn Sie aus dem Eingabefeld klicken.<\/p>\n<h2><a id=\"give-element-value\"><\/a>Einem Element den Wert einer Variablen geben<\/h2>\n<p>Nachdem Sie nun einen Wert f\u00fcr die Variable definiert haben, k\u00f6nnen Sie den Wert der Variable in ein Element auf einem anderen Bildschirm verschieben.<\/p>\n<p>Gehen Sie zu einem anderen Bildschirm in Ihrem Projekt und w\u00e4hlen Sie das Element aus, das den Wert der Variablen anzeigen soll. Sie k\u00f6nnen zum Beispiel ein Text <kbd>T-Element<\/kbd> ausw\u00e4hlen, das Sie auf dem Canvas hinzugef\u00fcgt haben. <\/p>\n<p>Sie k\u00f6nnen diesem Textelement auf zwei Arten den Wert der Variablen geben:<\/p>\n<ul>\n<li><strong>Ziehen und ablegen:<\/strong> Ziehen Sie die Variable aus der Variablenpalette auf das Textelement auf der Leinwand.<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=\"Variable auf Element ziehen\">Ziehen Sie die Variable auf das Element<\/video>. Dadurch wird automatisch ein Ereignis <strong>On Page Load<\/strong> + <strong>Set Value<\/strong> erzeugt, das den in der Variable gespeicherten Wert auf das Textelement auf diesem Bildschirm \u00fcbertr\u00e4gt.<\/li>\n<li><strong>Die Ereignispalette:<\/strong> Sie m\u00f6chten vielleicht, dass ein Element den Wert der Variable anzeigt, nachdem Sie zuerst etwas anderes auf dem Bildschirm getan haben, z.B. auf einen Text getippt haben.\n<ol>\n<li>W\u00e4hlen Sie das Element, das den Wert der Variable anzeigen soll. W\u00e4hlen Sie zum Beispiel ein Textelement. <\/li>\n<li>Gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<\/li>\n<li>W\u00e4hlen Sie einen <strong>On Page Load-Ausl\u00f6ser<\/strong> und eine Aktion <strong>Wert setzen<\/strong> f\u00fcr das Ereignis.<\/li>\n<li>Sie sehen eine Canvas-Vorschau, in der Sie das Textelement als Ziel der Aktion ausw\u00e4hlen k\u00f6nnen.<\/li>\n<li>Klicken Sie unten auf das Optionsfeld &#8218;Berechnet&#8216; und den Textlink &#8218;Ausdruck hinzuf\u00fcgen&#8216;, um den Value Expression Builder zu \u00f6ffnen.<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=\"Berechneter Wert f\u00fcr Eingabefeld\" width=\"1089\" height=\"687\"><\/li>\n<li>Klicken Sie in der Canvas-Vorschau auf die Registerkarte &#8218;Variablen&#8216; und ziehen Sie die Variable aus der Liste auf den freien Platz im Ausdruck.<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=\"Variablen aus der Registerkarte im Ausdruck\" width=\"1346\" height=\"696\"><\/li>\n<li>Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks und des Ereignisses zu beenden.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Dieses Ereignis kopiert den Wert der Variable und f\u00fcgt ihn in das Textelement ein, wenn Sie w\u00e4hrend der Simulation darauf klicken.<\/p>\n<p>Sie k\u00f6nnen so viele verschiedene Arten von Projekten mit Variablen erstellen &#8211; lesen Sie weiter im n\u00e4chsten Artikel, um weitere Beispiele zu sehen, wie Sie sie verwenden k\u00f6nnen, um Informationen zwischen Bildschirmen auszutauschen, bedingte Inhalte zu definieren und automatische Countdown-Timer zu erstellen.<\/p>\n<h2>How-tos: Lernen Sie, wie man g\u00e4ngige Anwendungsf\u00e4lle designt<\/h2>\n<p>Mit Variablen k\u00f6nnen Sie Informationen von Bildschirm zu Bildschirm \u00fcbertragen und erweiterte Interaktionen erstellen. Sehen Sie sich diese \u00dcbungen an, um zu lernen, wie man sie verwendet. <\/p>\n<h2><a id=\"share-information\"><\/a>Informationen zwischen Bildschirmen austauschen<\/h2>\n<p>In dieser \u00dcbung erstellen Sie einen Anmeldebildschirm f\u00fcr eine E-Mail-Adresse und sehen, wie diese E-Mail auf einem Best\u00e4tigungsbildschirm angezeigt wird.<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=\"Beispiel f\u00fcr das Teilen von Informationen\">Beispiel f\u00fcr das Teilen von Informationen<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>Erstellen Sie ein Projekt mit zwei Bildschirmen. Gehen Sie zu Bildschirm 1 und designen Sie ein Anmeldeformular mit einem Eingabetextfeld <kbd>F<\/kbd> und einer Schaltfl\u00e4che <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=\"Eingabe eines Textfeldes und einer Schaltfl\u00e4che zur Erstellung eines Formulars\" width=\"2046\" height=\"1190\"><\/li>\n<li>F\u00fcgen Sie ein Textelement zu Bildschirm 2 hinzu und gestalten Sie es wie gew\u00fcnscht. In diesem Textelement wird die E-Mail-Adresse angezeigt, die Sie auf dem vorherigen Bildschirm eingegeben haben. <\/li>\n<li>Gehen Sie zur Palette Variablen und erstellen Sie eine neue Variable, indem Sie auf die Schaltfl\u00e4che &#8218;+&#8216; klicken. Nennen Sie die Variable &#8222;Email&#8220; und lassen Sie ihren Standardwert leer. <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=\"E-Mail-Variable Pop-up\" width=\"1897\" height=\"840\"><\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>Gehen Sie zur\u00fcck zu Bildschirm 1 und w\u00e4hlen Sie das Eingabefeld aus. Ziehen Sie es auf die Variable &#8222;E-Mail&#8220; in der Palette Variablen.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/email-to-variable.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" email-to-variable.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/email-to-variable.png\" alt=\"E-Mail an Variable\">E-Mail an die Variable<\/video><br \/>\nDies erzeugt ein Ereignis <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong>, das der Variablen den Wert gibt, den Sie in das Eingabefeld eingeben, wenn Sie vom Bildschirm weg navigieren.<\/li>\n<li>Markieren Sie die Schaltfl\u00e4che unter dem Eingabetextfeld und ziehen Sie sie auf Bildschirm 2 in der Palette Bildschirme, um eine Verkn\u00fcpfung von der Schaltfl\u00e4che zu Bildschirm 2 herzustellen.<\/li>\n<li>Gehen Sie zu Bildschirm 2 und ziehen Sie die Variable &#8222;E-Mail&#8220; auf das Textelement auf dem Bildschirm.<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=\"E-Mail-Variable auf Textelement gezogen, wodurch ein Ereignis beim Laden der Seite + Setzen des Wertes erzeugt wird\" width=\"992\" height=\"401\"><br \/>\n Dadurch wird ein Ereignis <strong>&#8222;On Page Load<\/strong> + <strong>Set Value&#8220;<\/strong> erzeugt und das Textelement erh\u00e4lt den Wert der Variablen, wenn der Bildschirm zum ersten Mal geladen wird.<\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Play&#8216;, um Ihr Projekt zu simulieren. Geben Sie eine E-Mail-Adresse in das Anmeldeformular ein und klicken Sie auf die Schaltfl\u00e4che, um zu Bildschirm 2 zu gelangen. Sie sehen die eingegebene E-Mail-Adresse auf dem Textelement.  <\/p>\n<h2><a id=\"show-hide-content\"><\/a>Bedingten Inhalt anzeigen oder ausblenden<\/h2>\n<p>Sie k\u00f6nnen Variablen mit Bedingungen verwenden, um die Beziehung zwischen Elementen auf verschiedenen Bildschirmen zu bestimmen. In diesem Beispiel lernen Sie, wie Sie ein Anmeldeformular erstellen, das je nach Eingabe mehr Inhalt auf einem anderen Bildschirm anzeigt.<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=\"Beispiel f\u00fcr bedingten Inhalt\">Beispiel f\u00fcr bedingten Inhalt<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>Erstellen Sie ein Projekt mit zwei Bildschirmen. Erstellen Sie auf Bildschirm 1 ein Anmeldeformular mit einem Eingabetextfeld und einer Schaltfl\u00e4che. <\/li>\n<li>Gehen Sie zu Bildschirm 2 und designen Sie ihn wie gew\u00fcnscht. W\u00e4hlen Sie einige Elemente auf dem Bildschirm aus und gruppieren Sie sie mit <kbd>Command<\/kbd> \/ <kbd>Control<\/kbd> + <kbd>G<\/kbd>. <\/li>\n<li>Markieren Sie diese Gruppe in der Eigenschaften-Palette als ausgeblendet.<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=\"Gruppe ausgew\u00e4hlt und als versteckt markiert\" width=\"866\" height=\"341\"><\/li>\n<li>Erstellen Sie eine neue Variable mit dem Namen &#8222;User&#8220; und lassen Sie ihren Standardwert leer.<\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>Gehen Sie zur\u00fcck zu Bildschirm 1 und w\u00e4hlen Sie das Eingabefeld im Anmeldeformular. Ziehen Sie dieses Eingabetextfeld auf die Variable &#8222;User&#8220; in der Variablenpalette, wodurch ein Ereignis <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong> erzeugt wird. <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=\"Textfeld f\u00fcr die Eingabe des Benutzernamens in eine Variable verschoben\" width=\"754\" height=\"382\"><\/li>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che auf diesem Bildschirm aus und ziehen Sie sie auf Bildschirm 2 in der Palette Bildschirme, wodurch eine Verbindung zwischen den beiden Bildschirmen hergestellt wird.<\/li>\n<li>Gehen Sie zu Bildschirm 2 und doppelklicken Sie auf den Canvas, um den Basisbildschirm auszuw\u00e4hlen.<\/li>\n<li>Sehen Sie sich die Palette Ereignisse an und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;. Erstellen Sie ein Ereignis <strong>On Page Load<\/strong> + <strong>Show<\/strong> mit der Gruppe, die Sie zuvor erstellt haben.  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses zu beenden.<\/li>\n<li>Klicken Sie auf den Textlink &#8218;Bedingung hinzuf\u00fcgen&#8216; \u00fcber dem soeben erstellten Ereignis, wodurch sich der Conditional Expression Builder \u00f6ffnet.<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=\"Bewegen Sie den Mauszeiger \u00fcber den Link Bedingungstext hinzuf\u00fcgen\" width=\"792\" height=\"381\"><\/li>\n<li>Folgen Sie diesen Schritten, um die Bedingung zu erstellen:\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>  Klicken Sie in der Canvas-Vorschau auf die Registerkarte &#8222;Variablen&#8220; und ziehen Sie die Variable &#8222;User&#8220; auf den freien Platz im Ausdruck.<\/li>\n<li><strong>b.<\/strong> Ziehen Sie eine Logikfunktion <strong>Gleich (=)<\/strong> neben die Variable.<\/li>\n<li><strong>c.<\/strong>  Es erscheint ein neues freies Feld, in das Sie &#8222;Admin&#8220; eingeben k\u00f6nnen.<\/li>\n<li><strong>d.<\/strong>  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung der Bedingung zu beenden.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihr Projekt zu simulieren. Geben Sie &#8222;Admin&#8220; in das Eingabefeld ein, klicken Sie auf die Schaltfl\u00e4che, um zu Bildschirm 2 zu gelangen, und Sie sehen, wie der gesamte Inhalt auf dem Bildschirm angezeigt wird. <\/p>\n<p>Simulieren Sie das Projekt erneut und geben Sie einen anderen Wert in das Eingabefeld ein. Klicken Sie auf die Schaltfl\u00e4che, um zu Bildschirm 2 zu gelangen. Diesmal sehen Sie weniger Elemente auf dem Bildschirm. <\/p>\n<h2><a id=\"recurring-events\"><\/a>Wiederkehrende Ereignisse<\/h2>\n<p>In dieser \u00dcbung lernen Sie, wie Sie den Ausl\u00f6ser <strong>On Variable Change<\/strong> verwenden, mit dem Sie automatisierte Ereignisse wie einen Countdown-Timer erstellen k\u00f6nnen.<\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>F\u00fcgen Sie dem Canvas ein Textelement und eine Schaltfl\u00e4che hinzu. Geben Sie dem Textelement den Wert &#8222;10&#8220; und beschriften Sie die Schaltfl\u00e4che mit &#8222;Start&#8220;. <\/li>\n<li>Erstellen Sie eine neue Variable mit dem Namen &#8222;Countdown&#8220; und lassen Sie ihren Standardwert leer.<\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Start&#8220; auf dem Canvas und erstellen Sie ein Ereignis <strong>&#8222;On Tap<\/strong> + <strong>Set Value&#8220;<\/strong>. W\u00e4hlen Sie die Variable &#8222;Countdown&#8220; als Ziel des Ereignisses und geben Sie &#8222;11&#8220; als Wert f\u00fcr die Variable ein. <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=\"Countdown-Variable hat festen Wert von 11\" width=\"1952\" height=\"1230\"><\/li>\n<li>Klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216; am oberen Rand der Palette, um eine weitere Interaktion hinzuzuf\u00fcgen.<\/li>\n<li>W\u00e4hlen Sie einen Ausl\u00f6ser <strong>bei Variablen\u00e4nderung<\/strong>. Es wird ein Dropdown-Men\u00fc angezeigt, in dem Sie die Variable &#8222;Countdown&#8220; ausw\u00e4hlen k\u00f6nnen. <\/li>\n<li>W\u00e4hlen Sie eine Aktion <strong>Pause<\/strong> und \u00e4ndern Sie die Dauer auf 1000ms (1 Sekunde). Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <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=\"Ein Ereignis bei Variablen\u00e4nderung und Pause\" width=\"2042\" height=\"674\"><\/li>\n<li>Sehen Sie sich die soeben erstellte Aktion in der Palette Ereignisse an und klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216;, um eine weitere Aktion hinzuzuf\u00fcgen.<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=\"Aktionsschaltfl\u00e4che mit Schwebezustand hinzuf\u00fcgen\" width=\"1740\" height=\"1062\"><\/li>\n<li>W\u00e4hlen Sie eine <strong>On Variable Change<\/strong> mit der Variable &#8222;Countdown&#8220;. W\u00e4hlen Sie eine Aktion <strong>Wert setzen<\/strong> und tippen Sie auf das Optionsfeld &#8218;Variablen&#8216;, um die Variable &#8222;Countdown&#8220; auszuw\u00e4hlen. <\/li>\n<li>Klicken Sie f\u00fcr den Wert auf das Optionsfeld &#8218;Berechnet&#8216; und den Textlink &#8218;Ausdruck hinzuf\u00fcgen&#8216;, wodurch sich der Value Expression Builder \u00f6ffnet.<\/li>\n<li>Folgen Sie diesen Schritten, um den Ausdruck zu erstellen:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  Klicken Sie in der Canvas-Vorschau auf die Registerkarte &#8222;Variablen&#8220; und ziehen Sie die Variable &#8222;Countdown&#8220; auf den freien Platz im Ausdruck.<\/li>\n<li><strong>b.<\/strong> Setzen Sie eine <strong>Minus (-)<\/strong> Zahlenfunktion daneben.<\/li>\n<li><strong>c.<\/strong>  Es erscheint ein neues Feld im Ausdruck, in das Sie eine &#8222;1&#8220; eingeben k\u00f6nnen.<\/li>\n<li><strong>d.<\/strong>  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks und des Ereignisses zu beenden.<\/li>\n<\/ul>\n<\/li>\n<li>Klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216;, um eine weitere Aktion hinzuzuf\u00fcgen &#8211; <strong>Bei Variablen\u00e4nderung<\/strong> + <strong>Wert setzen<\/strong>. W\u00e4hlen Sie das Textelement als Ziel der Aktion und klicken Sie auf die Optionsschaltfl\u00e4che &#8218;Berechnet&#8216; und den Textlink &#8218;Ausdruck hinzuf\u00fcgen&#8216;. <\/li>\n<li>Ziehen Sie die Variable &#8222;Countdown&#8220; auf den freien Platz im Ausdruck und klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses abzuschlie\u00dfen.<\/li>\n<li>Klicken Sie auf den Textlink &#8218;Bedingung hinzuf\u00fcgen&#8216; \u00fcber Ihren Ereignissen <strong>bei Variablen\u00e4nderung<\/strong>. Ziehen Sie die &#8222;Countdown&#8220;-Variable in das freie Feld des Ausdrucks, gefolgt von einer Logikfunktion <strong>Gr\u00f6\u00dfer oder Gleich (\u2265)<\/strong>. Geben Sie schlie\u00dflich &#8222;1&#8220; in das erscheinende freie Feld ein und klicken Sie auf &#8218;OK&#8216;.  <\/li>\n<\/ol>\n<p>So sollte Ihre Events-Palette aussehen:<\/p>\n<p>In diesem Beispiel wird der Wert der Variable &#8222;Countdown&#8220; ge\u00e4ndert, wenn Sie auf die Schaltfl\u00e4che &#8222;Start&#8220; klicken. Dadurch werden die Aktionen <strong>bei Variablen\u00e4nderung<\/strong> ausgel\u00f6st &#8211; eine Sekunde Pause und dann Subtraktion von 1 von der Variable. Mit der letzten Aktion wird der Wert der Variable an das Textelement \u00fcbertragen.  <\/p>\n<p>Da das zweite Ereignis <strong>&#8222;Wert setzen&#8220;<\/strong> die Variable selbst betrifft (indem es 1 subtrahiert), werden die Ereignisse erneut ausgel\u00f6st, bis der Wert der Variable kleiner als 1 ist.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit Variables k\u00f6nnen Sie Ihre wireframes auf die n\u00e4chste Stufe bringen und lebensechte Projekte erstellen. Sie k\u00f6nnen Variablen verwenden, um Informationen wie Text, Bilder oder Daten&#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":[8554,8556],"tags":[],"class_list":["post-129051","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-web-mobile-interaktionen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129051"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129051"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129051\/revisions"}],"predecessor-version":[{"id":129206,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129051\/revisions\/129206"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}