Schaltflächen Setup

Machen wir ein kurzes Quiz, das auf dem Buch Alice's Adventures in Wonderland basiert. Finden wir heraus, ob sich die BenutzerInnen daran erinnern, wo Alice das erste Mal die Grinsekatze trifft.
Unsere Anwendung wird so aussehen:

1. Fragetext: Wo hat Alice die Grinsekatze zum ersten Mal getroffen?
2. Tasten zur Auswahl: Mad-Tea Party, Haus der Herzogin, Wald, Krocketplatz. Wenn der Benutzer die falsche Antwort gewählt hat, verschwindet die Schaltfläche mit der falschen Antwort, wenn der Benutzer die richtige Antwort gewählt hat, verschwinden alle Schaltflächen mit den falschen Antworten auf einmal.
3. Pop-up-Meldungen, die Ihnen mitteilen, ob die Antwort richtig war oder nicht.

Wie man einen Button erstellt

Ziehen Sie das Element "Schaltfläche" mit dem Mauszeiger (durch Klicken und Halten der linken Taste) in den Bereich, in dem Sie die Schaltfläche platzieren möchten.

Sie müssen vier Schaltflächen hinzufügen - entsprechend der Anzahl der möglichen Antworten.

Anpassen des Aussehens der Schaltflächen

Klicken Sie einmal auf die erste Schaltfläche - es öffnet sich das Einstellungsfenster. Sie befinden sich nun auf der Registerkarte"Look&Feel", die für das Aussehen der Schaltflächen zuständig ist.

1. bearbeiten Sie die folgenden Felder:

• Beschriftung: Buttontext - geben Sie die erste Antwort ein: "Mad-Tea Party";
• Symbol: Schaltflächensymbol - klicken Sie auf "Symbol auswählen" und wählen Sie ein Symbol, das Ihnen gefällt (inzwischen gibt es mehr als 2500);
  
• Größe: Schaltflächengröße - stellen Sie "Groß" ein, um die Schaltfläche groß zu machen;
  
• Name: Dies ist der Name, unter dem die Schaltfläche von anderen Elementen in Ihrer Anwendung "gesehen" wird; jede Schaltfläche benötigt einen eindeutigen Namen - nennen Sie die Schaltfläche "btn-mad_tea".

Wenn Sie die Felder bearbeiten, ändert sich das Bild am oberen Rand des Fensters, um zu zeigen, wie die Schaltfläche nach der Übernahme der Einstellungen aussehen wird.

2. Wenn Sie alle Felder ausgefüllt haben, klicken Sie auf"Speichern".

1. Konfigurieren Sie die restlichen Schaltflächen analog zur ersten, indem Sie die Namen btn-duchess_h, btn-wood, btn-croquet_g verwenden.
2. Klicken Sie auf "Änderungen speichern", um die Änderungen in Ihrer Anwendung zu speichern - andernfalls werden die Schaltflächen verschwinden, sobald Sie die Seite aktualisieren oder den Editor schließen.

Einrichten von Auslösern und Ereignissen

Nun müssen Sie die Aktionen der Schaltflächen festlegen. Beginnen wir mit der Schaltfläche mit der richtigen Antwort -"Duchess' House". Ihre Aufgabe ist es, dem Web Apps Editor zu "erklären":

• was der Auslöser der Schaltfläche ist - d.h., worauf genau sie reagieren soll: beim Drücken;
• welches Ereignis in diesem Fall eintritt: die Schaltflächen verschwinden;
• wo dieses Ereignis eintritt, welche Elemente sich ändern: andere Schaltflächen.

Gehen Sie zurück zu den Einstellungen der Schaltfläche "Duchess' House" und gehen Sie auf die Registerkarte Auslöser. Alle Auslöser, die für diese Schaltfläche hinzugefügt wurden, werden angezeigt:

1. Jetzt gibt es nur noch einen -"OnClick". Er wird automatisch hinzugefügt und bedeutet, dass die Schaltfläche aktiviert wird, wenn Sie darauf klicken (was genau das ist, was Sie brauchen).
2. Zusätzlich zu"OnClick" sind weitere Auslöser für die Schaltfläche möglich. Eine vollständige Liste mit einer Beschreibung finden Sie in der Plattformdokumentation.

Jetzt müssen Sie Informationen über das Ereignis angeben (Sie werden drei davon haben - einen für jede Schaltfläche). Klicken Sie auf das"+" neben"OnClick". Das Fenster mit den Ereigniseinstellungen wird geöffnet.

Im Feld"Zielkomponente" müssen Sie angeben, wo das Ereignis eintreten soll, im Feld "Aktion", um welche Art von Ereignis es sich handelt.

Alle falschen Antworten ausblenden

Fügen Sie ein Ereignis hinzu, das die Schaltfläche "Mad-Tea Party" ausblendet:

1. Klicken Sie auf das Feld"Zielkomponente" und finden Sie es unter dem eindeutigen Namen btn-mad_tea. Wählen Sie im Feld "Aktion" das entsprechende Ereignis aus, in diesem Fall "Schaltfläche ausblenden".
2. Klicken Sie auf "Speichern".

Konfigurieren Sie die übrigen Schaltflächen auf dieselbe Weise.

1. So sollte die Liste der Auslöser für die Schaltfläche "Duchess' House" aussehen, wenn Sie fertig sind.
2. Klicken Sie auf "Speichern", um Ihre Änderungen zu speichern.

Jetzt müssen Sie sicherstellen, dass alles funktioniert.

1. Speichern Sie Ihre Änderungen.
2. Klicken Sie auf die Schaltfläche zum Veröffentlichen der Anwendung (sie ins Internet stellen), wählen Sie "Entwicklung".
3. Klicken Sie auf das Symbol "Go to your app" - es wird in einem neuen Tab geöffnet.

Rufen Sie die Anwendung auf und stellen Sie sicher, dass die übrigen Schaltflächen verschwinden, wenn Sie die richtige Option auswählen.

Falsche Antworten bei Klick ausblenden

Nun wollen wir den Button mit der falschen Antwort"Mad-Tea Party" verschwinden lassen, wenn der Benutzer darauf klickt. In diesem Fall gehören sowohl der Auslöser (Drücken) als auch das Ereignis (Verschwinden) zur selben Schaltfläche - Sie müssen nur mit dieser arbeiten.
Öffnen Sie die Einstellungen der Schaltfläche, gehen Sie auf die Registerkarte "Auslöser" und fügen Sie dem Auslöser "onClick" ein neues Ereignis hinzu. Wählen Sie im Feld "Zielkomponente" "Diese Komponente (selbst)", um anzugeben, dass die Schaltfläche ein Ereignis für sich selbst auslöst. Der Wert des Feldes"Aktion" ist der gleiche wie im vorherigen Beispiel -"Schaltfläche ausblenden". Speichern Sie alle Änderungen und veröffentlichen Sie die App, wechseln Sie zur Registerkarte "App" und aktualisieren Sie sie. Prüfen Sie, ob alles wie vorgesehen funktioniert:

Passen Sie nun das"Holz" und den"Krocket-Boden" an. Speichern Sie, veröffentlichen Sie und testen Sie es erneut.

Arten von Schaltflächen

Gut, die Antworten funktionieren. Jetzt ist es an der Zeit, eine Frage hinzuzufügen. Natürlich hat Appmaster.io dafür spezielle Elemente, aber Sie erinnern sich an unsere Aufgabe - Schaltflächen und nichts anderes. Fügen wir also eine weitere hinzu. Diesmal nicht auf der Hauptfläche, sondern oben auf der Seite: Damit es mehr Spaß macht, füllen Sie die Frage wie auf diesem Screenshot aus:

Damit es mehr Spaß macht, füllen Sie die Frage wie in diesem Screenshot aus:

Jetzt "färben" Sie mit Farbschemata für verschiedene Arten von Schaltflächen: Gehen Sie zu den Einstellungen und ändern Sie den Wert im Feld"Typ" auf einen beliebigen anderen.

Wir haben es so gemacht, aber Sie können Ihre Option wählen, das Farbschema der Schaltfläche hat keinen Einfluss auf ihre Funktion:

Kommen wir nun zur letzten Aufgabe - dem Einrichten einer Nachricht für den Benutzer.

Eine schwierigere Aufgabe

Sie können eine Nachricht auf dem Bildschirm auf verschiedene Weise anzeigen. Wir haben uns für eine der ungewöhnlichsten entschieden:

Zunächst müssen wir dafür sorgen, dass die Schaltflächen mit der Frage automatisch deaktiviert werden, wenn der Benutzer die richtige Antwort gegeben hat. Sie werden dann grau und reagieren nicht mehr auf Klicks. Dazu verwenden wir die Funktion Enable (Disable), die wir noch nicht berücksichtigt haben, und das bereits bekannte"onClick". - Dann werden wir einen neuen Auslöser betrachten - onStateChange, der ausgelöst wird, wenn sich der Zustand der Schaltfläche ändert. Weisen wir diesen Auslöser dem "?" zu - und die Nachricht wird auf ihm angezeigt werden.

Deaktivieren von Schaltflächen

Sie können die Schaltfläche in ihren Einstellungen manuell aktivieren oder deaktivieren, indem Sie den Feldselektor"Aktivieren" umschalten:

Um ein automatisches Umschalten einzurichten, öffnen Sie die Einstellungen der Schaltfläche "Duchess' House" und fügen Sie einen "onClick"-Auslöser hinzu. Wählen Sie im Feld "Zielkomponente" eine der Frage-Schaltflächen, im Feld "Aktion" -"Schaltfläche deaktivieren". Wiederholen Sie diesen Vorgang für alle Schaltflächen, die eine Frage enthalten. Es sollte so aussehen:

Vergessen Sie nicht, alle Änderungen zu speichern, zu veröffentlichen und zu überprüfen, ob die Anwendung korrekt funktioniert.

Jetzt binden wir den Anfang der Nachricht an die Schaltfläche "?" (wir haben sie "btn_qqq" genannt). Fügen wir den Auslöser"onStateChange" hinzu. Er wird aktiviert, wenn sich der Zustand der Schaltfläche ändert - zum Beispiel, wenn sie ausgeschaltet wird.

Im Feld "Zielkomponente" wählen Sie "Anwendung" (die Nachricht wird im Anwendungsfenster angezeigt), im Feld "Aktion" - "UI-Nachricht anzeigen" (dem Benutzer eine Nachricht anzeigen).

1. Wählen Sie im Feld"Meldungsstil" denjenigen, der Ihrer Situation am besten entspricht. In unserem Fall ist dies"Sucess" - eine Nachricht über den erfolgreichen Abschluss.
2. Füllen Sie die Felder"Titel" und"Inhalt" aus - informieren Sie den Benutzer, dass die Antwort richtig ist, oder schreiben Sie einfach etwas Nettes.

Speichern, veröffentlichen und testen.

Ergebnis

Bei Auswahl der richtigen Option sollten die Schaltflächen mit den falschen Antworten ausgeblendet werden, der Text der Frage sollte eingeblendet werden und eine Bestätigungsmeldung sollte erscheinen.

Natürlich war es möglich, die Meldung einfacher anzupassen, indem man sie an die Schaltfläche für die richtige Antwort bindet. Aber heute sind wir nicht auf der Suche nach einfachen Möglichkeiten. Außerdem wissen Sie bereits genug, um dies ohne unsere Anleitung zu tun. Versuchen Sie, die Fehlermeldung anzupassen , die erscheint, wenn Sie die falsche Antwort wählen. Sie sollte wie folgt aussehen:

Wir sind sicher, dass diese Anleitung Ihnen geholfen hat, Appmaster.io besser kennen zu lernen. Aber wenn es nicht klar war (oder vielleicht, im Gegenteil, zu einfach), schreiben Sie an den Telegramm-Kanal unseres technischen Supports über Anweisungen, die Sie brauchen. Wir werden sie schreiben!