{"id":129117,"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":"2020-09-29T18:51:30","modified_gmt":"2020-09-29T16:51:30","slug":"examples-advanced-events-and-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/erweiterte-ereignisse-und-interaktionen-beispiele","title":{"rendered":"Fortgeschrittene Beispiele: Ereignisse und Interaktionen"},"content":{"rendered":"

In diesem Artikel erfahren Sie, wie Sie erweiterte Ereignisse mit mehreren Aktionen und verschiedenen Ausl\u00f6sern erstellen k\u00f6nnen. Au\u00dferdem erfahren Sie, wie Sie die Funktionen der interaktiven Formulare und Eingaben von Justinmind nutzen k\u00f6nnen, um realistische Benutzererlebnisse zu schaffen. <\/p>\n

<\/a>Tabulator zwischen Feldern in einem Formular<\/h2>\n

In diesem Beispiel lernen Sie, wie Sie mit einem On Key Up-Trigger<\/strong> und einer Set Focus On-Aktion<\/strong> komfortable und zug\u00e4ngliche Formulare erstellen k\u00f6nnen. Sie f\u00fcgen drei Formularfelder hinzu – „Benutzername“, „Kennwort“ und „Kennwort best\u00e4tigen“ – und bewegen sich durch sie, indem Sie die Tabulatortaste dr\u00fccken.
\n

    \n
  1. Ziehen Sie drei Eingabe-Textfeld-Widgets auf den Canvas und gestalten Sie sie nach Belieben. Sie finden sie im Abschnitt ‚Interaktive Eingabefelder‘ in der Symbolleiste oder indem Sie die Taste F<\/kbd> dr\u00fccken. <\/li>\n
  2. W\u00e4hlen Sie das Eingabefeld „Benutzername“ und sehen Sie sich die Palette „Ereignisse“ an. Klicken Sie auf ‚Ereignis hinzuf\u00fcgen‘. \"Schaltfl\u00e4che<\/li>\n
  3. Klicken Sie auf das Dropdown-Men\u00fc Ausl\u00f6ser, bewegen Sie den Mauszeiger \u00fcber den Abschnitt Tastatur<\/strong> und w\u00e4hlen Sie den Ausl\u00f6ser On Key Up<\/strong>.<\/li>\n
  4. Es wird ein neues Feld eingeblendet, in das Sie die Taste eingeben k\u00f6nnen, die das Ereignis ausl\u00f6sen soll, wenn Sie sie eingeben. Geben Sie die Tabulatortaste<\/kbd> ein. <\/li>\n
  5. W\u00e4hlen Sie in der Dropdown-Liste Aktion die Aktion Fokus auf Eingabefeld setzen<\/strong>. Es wird eine Leinwandvorschau angezeigt, in der Sie das Eingabefeld „Passwort“ ausw\u00e4hlen k\u00f6nnen. Dadurch wird es zum Ziel der Aktion Fokus auf setzen, so dass Sie dorthin wechseln, wenn Sie den Fokus aus dem Eingabetextfeld „Benutzername“ herausnehmen.
    \n\"An
    \nKlicken Sie auf ‚OK‘, um die Erstellung des Ereignisses zu beenden.<\/li>\n
  6. Zur\u00fcck auf dem Canvas, w\u00e4hlen Sie das Eingabefeld „Passwort“. Gehen Sie zur Palette Ereignisse und erstellen Sie eine weitere Aktion Bei Taste hoch<\/strong> + Fokus setzen auf<\/strong>. W\u00e4hlen Sie dieses Mal das Eingabefeld „Passwort best\u00e4tigen“ als Ziel der Aktion. Klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses zu beenden.<\/li>\n<\/ol>\n

    Klicken Sie auf die Schaltfl\u00e4che ‚Abspielen‘, um Ihr Projekt zu simulieren. Konzentrieren Sie sich auf das Feld „Benutzername“ und dr\u00fccken Sie die Tabulatortaste, um zum Feld „Passwort“ zu gelangen. Dr\u00fccken Sie die Tabulatortaste ein weiteres Mal, um zum Feld „Passwort best\u00e4tigen“ zu gelangen. <\/p>\n

    <\/a>Multi-Effekt Maus \u00fcber<\/h2>\n

    In Justinmind k\u00f6nnen Sie mehrere Aktionen zu einem Ereignis hinzuf\u00fcgen. In dieser \u00dcbung lernen Sie, wie Sie ein On Mouse Over<\/strong> Ereignis mit zwei Aktionen erstellen. Eine Aktion ver\u00e4ndert das Aussehen eines Bildes und die andere bewegt das Bild.
    \n

      \n
    1. Erstellen Sie ein neues Webprojekt und platzieren Sie ein Bild I<\/kbd> auf dem Canvas. \u00c4ndern Sie die Transparenz des Bildes in der Eigenschaften-Palette auf 40%.
      \n\"Bild
      \nStellen Sie sicher, dass Sie ein Webprojekt verwenden – Mobile oder Tablet funktionieren f\u00fcr dieses Beispiel nicht, da Sie auf einem Touchscreen nicht mit der Maus dar\u00fcberfahren k\u00f6nnen.<\/li>\n
    2. W\u00e4hrend das Bild noch ausgew\u00e4hlt ist, gehen Sie zur Palette Ereignisse und klicken Sie auf „Ereignis hinzuf\u00fcgen“.<\/li>\n
    3. Klicken Sie auf das Dropdown-Men\u00fc Ausl\u00f6ser, bewegen Sie den Mauszeiger<\/strong> \u00fcber den Abschnitt Maus<\/strong> und w\u00e4hlen Sie eine Aktion bei Mauskontakt<\/strong>.<\/li>\n
    4. Tippen Sie auf das Dropdown-Men\u00fc Aktion und w\u00e4hlen Sie eine Aktion Stil \u00e4ndern<\/strong>. Es wird eine Leinwandvorschau angezeigt, in der Sie das Bild als Ziel der Aktion ausw\u00e4hlen k\u00f6nnen. <\/li>\n
    5. W\u00e4hlen Sie in der Dropdown-Liste unten den zu \u00e4ndernden Stil ‚Deckkraft‘ und \u00e4ndern Sie seine Deckkraft auf %100. Klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses abzuschlie\u00dfen.
    6. In der Palette Ereignisse sehen Sie das Ereignis, das Sie gerade erstellt haben. Neben der Aktion Stil \u00e4ndern<\/strong> sehen Sie eine ‚+‘-Schaltfl\u00e4che. Klicken Sie darauf, um dem Ereignis eine weitere Aktion hinzuzuf\u00fcgen. \"Klicken<\/li>\n
    7. Der Ausl\u00f6ser On Mouse Over<\/strong> sollte bereits ausgew\u00e4hlt sein, so dass Sie nur noch die Aktion Move<\/strong> ausw\u00e4hlen m\u00fcssen.<\/li>\n
    8. W\u00e4hlen Sie das Bild als Ziel der Aktion in der Canvas-Vorschau aus. Darunter wird ein Dropdown-Men\u00fc angezeigt. Hier k\u00f6nnen Sie festlegen, wohin das Bild verschoben werden soll, wenn Sie mit der Maus dar\u00fcber fahren. Lassen Sie die X-Position (horizontal) unver\u00e4ndert, aber passen Sie die Y-Position (vertikal) um 10px an.
      \n\"Die
      \nF\u00fcgen Sie eine lineare Lockerung hinzu und \u00e4ndern Sie die Dauer der Lockerung auf 200ms. <\/p>\n

      Klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses zu beenden.<\/li>\n

    9. In der Palette Ereignisse sehen Sie zwischen den von Ihnen erstellten Aktionen Stil \u00e4ndern<\/strong> und Verschieben<\/strong> eine Schaltfl\u00e4che ‚Pfeil‘. Dieser Pfeil zeigt die Reihenfolge der Aktionen an. Im Moment werden die Aktionen nacheinander ausgef\u00fchrt, aber Sie m\u00f6chten, dass sie zur gleichen Zeit stattfinden.
      \n

      <\/a>Interaktive Formulare mit mehreren Ausl\u00f6sern<\/h2>\n

      Sie k\u00f6nnen auch verschiedene Ereignisausl\u00f6ser f\u00fcr ein Element verwenden. In diesem Beispiel lernen Sie, wie Sie Ereignisse mit den Ausl\u00f6sern On Focus In<\/strong> und On Focus Out<\/strong> erstellen, um das Erscheinungsbild eines Eingabefeldes zu \u00e4ndern.
      \n

        \n
      1. Ziehen Sie ein Eingabe-Textfeld F<\/kbd> auf die Leinwand und gestalten Sie es wie gew\u00fcnscht.<\/li>\n
      2. Gehen Sie bei ausgew\u00e4hltem Eingabetextfeld zur Palette Ereignisse und klicken Sie auf ‚Ereignis hinzuf\u00fcgen‘.<\/li>\n
      3. W\u00e4hlen Sie aus der Dropdown-Liste Ausl\u00f6ser einen Ausl\u00f6ser f\u00fcr On Focus In<\/strong>.<\/li>\n
      4. W\u00e4hlen Sie eine Aktion Stil \u00e4ndern<\/strong> und w\u00e4hlen Sie das Eingabetextfeld als Ziel der Aktion in der Canvas-Vorschau.<\/li>\n
      5. Darunter wird ein Dropdown-Men\u00fc angezeigt, in dem Sie die Stile des Eingabefeldes angeben k\u00f6nnen, die Sie \u00e4ndern m\u00f6chten. In diesem Beispiel \u00e4ndern Sie den Rahmen des Eingabefeldes in eine dunklere Farbe. Klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses zu beenden.<\/li>\n
      6. W\u00e4hrend das Eingabetextfeld noch ausgew\u00e4hlt ist, kehren Sie zur Palette Ereignisse zur\u00fcck und klicken auf die Schaltfl\u00e4che ‚+‘ oben in der Palette, um eine neue Interaktion zu erstellen.\"Die W\u00e4hlen Sie dieses Mal einen Ausl\u00f6ser f\u00fcr On Focus Out<\/strong> und eine Aktion Stil \u00e4ndern<\/strong>.<\/li>\n
      7. W\u00e4hlen Sie das Eingabetextfeld als Ziel der Aktion aus und w\u00e4hlen Sie aus der Dropdown-Liste unten den Rahmen als zu \u00e4ndernden Stil aus. Die Standardfarbe des Rahmens sollte automatisch ausgew\u00e4hlt werden, so dass Sie auf ‚OK‘ klicken k\u00f6nnen, um die Erstellung des Ereignisses abzuschlie\u00dfen.<\/li>\n<\/ol>\n

        So sollte Ihre Events-Palette aussehen:
        \n\"Ereignispalette
        \nKlicken Sie auf die Schaltfl\u00e4che ‚Abspielen‘, um Ihr Projekt zu simulieren. Konzentrieren Sie sich auf das Eingabefeld und sehen Sie, wie sich die Farbe des Rahmens \u00e4ndert. Klicken Sie aus dem Eingabefeld heraus und Sie sehen, wie sich die Farbe des Rahmens wieder \u00e4ndert. <\/p>\n

        <\/a>Benutzereingaben widerspiegeln<\/h2>\n

        In dieser letzten \u00dcbung lernen Sie, wie Sie eine Aktion Wert setzen<\/strong> verwenden, um die Benutzereingaben w\u00e4hrend der Simulation zu spiegeln.
        \n

          \n
        1. Platzieren Sie ein Eingabe-Textfeld und eine Schaltfl\u00e4che B<\/kbd> auf dem Canvas und gestalten Sie sie wie gew\u00fcnscht. Ziehen Sie ein Element Text T<\/kbd> unter das Eingabetextfeld und markieren Sie es als w\u00e4hrend der Simulation ausgeblendet. \"Textelement,<\/li>\n
        2. W\u00e4hlen Sie die Schaltfl\u00e4che aus, gehen Sie zur Palette Ereignisse und klicken Sie auf ‚Ereignis hinzuf\u00fcgen‘. W\u00e4hlen Sie einen On Click-Ausl\u00f6ser<\/strong> aus dem Dropdown-Men\u00fc. <\/li>\n
        3. W\u00e4hlen Sie die Aktion Wert auf ein Element setzen<\/strong> aus der Dropdown-Liste. Es wird eine Canvas-Vorschau angezeigt, in der Sie das Textelement unterhalb des Eingabefeldes als Ziel der Aktion ausw\u00e4hlen k\u00f6nnen. <\/li>\n
        4. Schauen Sie sich den Text unter „Der Wert ist…“ an und w\u00e4hlen Sie das Optionsfeld „Berechnet“. Klicken Sie dann auf den Textlink ‚Ausdruck hinzuf\u00fcgen‘. \"Ausdruck<\/li>\n
        5. Es erscheint der Value Expression Builder, in dem Sie den Wert definieren, der in das Textelement \u00fcbertragen werden soll. Folgen Sie diesen Schritten, um den Wert zu erstellen:\n
            \n
          • \n