Der Button ist das einfachste Element des Web Apps Editors, spielt aber eine der Hauptrollen in der Oberfläche der fertigen Anwendung. Darüber hinaus bieten wir Ihnen heute an, eine Anwendung zu erstellen, die nur aus Schaltflächen besteht. Die Aufgabe mag etwas seltsam erscheinen, aber wenn Sie es tun, lernen Sie, wie Sie Schaltflächen anpassen, die Grundlagen der Arbeit mit dem Editor und die Logik der gesamten Plattform verstehen.
Machen wir ein kurzes Quiz basierend auf dem Buch Alice's Adventures in Wonderland. Lassen Sie uns herausfinden, ob sich die Benutzer daran erinnern, wo Alice die Grinsekatze zum ersten Mal getroffen hat.
Unsere Bewerbung hat:
- Fragetext: Wo hat Alice die Grinsekatze zum ersten Mal getroffen?
- Auswahlknöpfe: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground. Wenn der Benutzer die falsche Antwort gewählt hat - der Button damit verschwindet, wenn der Benutzer die richtige gewählt hat - verschwinden alle Buttons mit den falschen Antworten auf einmal.
- Popup-Meldungen, die Ihnen mitteilen, ob die Antwort richtig war oder nicht.
Übrigens, erinnerst du dich, welche Option richtig ist?
So erstellen Sie eine Schaltfläche
Ziehen Sie das Element "Button" mit dem Mauszeiger (durch Klicken und Halten der linken Taste) in den Bereich, in dem Sie den Button platzieren möchten.
Sie müssen vier Schaltflächen hinzufügen - entsprechend der Anzahl der möglichen Antworten.
Anpassen der Schaltflächendarstellung
Klicken Sie einmal auf die erste Schaltfläche – das Einstellungsfenster öffnet sich. Sie befinden sich auf dem Reiter „Look&Feel“, der für das Erscheinungsbild der Buttons zuständig ist.
1. Bearbeiten Sie die folgenden Felder:
- Beschriftung: Schaltflächentext - Geben Sie die erste Antwort ein: "Mad-Tea Party";
- Symbol: Schaltflächensymbol - klicken Sie auf das "Pick-Symbol" und wählen Sie das gewünschte aus (jetzt gibt es mehr als 2500);
- Größe: Schaltflächengröße - auf „Groß“ setzen, 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; jeder Button benötigt einen eindeutigen Namen - benennen Sie den Button "btn-mad_tea".
Wenn Sie die Felder bearbeiten, ändert sich das Bild oben im Fenster, um zu zeigen, wie die Schaltfläche nach der Übernahme der Einstellungen aussieht.
2. Wenn Sie alle Felder ausgefüllt haben, klicken Sie auf "Speichern".
- Konfigurieren Sie die restlichen Schaltflächen analog zur ersten mit den Namen: btn-duchess_h, btn-wood, btn-croquet_g.
- Klicken Sie auf "Änderungen speichern", um die Änderungen an Ihrer Anwendung zu speichern. Andernfalls verschwinden die Schaltflächen, sobald Sie die Seite aktualisieren oder den Editor schließen.
Trigger und Ereignisse einrichten
Jetzt müssen Sie die Aktionen der Schaltflächen festlegen. Beginnen wir mit dem mit der richtigen Antwort - "Haus der Herzogin" . Ihre Aufgabe ist es, dem Web-Apps-Editor zu "erklären":
- was ist der Auslöser der Taste - bedeutet, worauf genau sie reagieren soll: beim Drücken;
- welches Ereignis tritt in diesem Fall ein: die Schaltflächen verschwinden;
- wo dieses Ereignis stattfindet, welche Elemente sich ändern: andere Schaltflächen.
Gehen Sie zurück zu den Einstellungen für die Schaltfläche "Duchess' House" und gehen Sie zur Registerkarte Trigger. Alle Trigger, die dafür hinzugefügt wurden, werden angezeigt:
- Jetzt gibt es nur noch eines - "OnClick". Es wird automatisch hinzugefügt und bedeutet, dass die Schaltfläche aktiv wird, wenn Sie darauf klicken (genau das, was Sie brauchen).
- Neben "OnClick" sind weitere Trigger für den Button möglich. Eine vollständige Liste mit Beschreibung befindet sich in der Plattformdokumentation.
Jetzt müssen Sie Informationen über das Ereignis angeben (Sie haben drei davon - eine 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 auftritt, im Feld "Aktion" - um welche Art von Ereignis es sich handelt.
Alle falschen Antworten ausblenden
Fügen Sie ein Ereignis hinzu, das den Mad-Tea Party-Button ausblendet:
- Klicken Sie auf das Feld "Zielkomponente" und suchen Sie es nach dem eindeutigen Namen btn-mad_tea. Wählen Sie im Feld Aktion das entsprechende Ereignis aus, in diesem Fall „Schaltfläche ausblenden“.
- Klicken Sie auf „Speichern“.
Konfigurieren Sie die restlichen Schaltflächen so, dass sie ausgeblendet werden.
- So sollte die Liste der Auslöser für die Schaltfläche „Haus der Herzogin“ aussehen, wenn Sie fertig sind.
- Klicken Sie auf „Speichern“, um Ihre Änderungen zu speichern.
Jetzt müssen Sie sicherstellen, dass alles funktioniert.
- Speichern Sie Ihre Änderungen.
- Drücken Sie die Schaltfläche zum Veröffentlichen der Anwendung (ins Internet stellen), wählen Sie "Entwicklung".
- Klicken Sie auf das Symbol zu Ihrer App - es wird in einem neuen Tab geöffnet.
Gehen Sie zur App und stellen Sie sicher, dass der Rest der Schaltflächen verschwindet, wenn Sie die richtige Option auswählen.
Falsche Antworten bei Klick ausblenden
Lassen Sie uns nun 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) zu derselben Taste - Sie müssen nur damit arbeiten.
Öffnen Sie die Schaltflächeneinstellungen, gehen Sie zum Reiter „Trigger“ und fügen Sie dem „onClick“-Trigger ein neues Ereignis hinzu. Wählen Sie im Feld „Zielkomponente“ „Diese Komponente (selbst)“ aus, um anzugeben, dass die Schaltfläche ein Ereignis für sich selbst aktiviert. Der Wert des Felds "Aktion" ist der gleiche wie im vorherigen Beispiel - "Schaltfläche ausblenden".
Speichern Sie alle Änderungen und veröffentlichen Sie die App, wechseln Sie zum App-Tab und aktualisieren Sie ihn. Überprüfen Sie, ob alles wie gewünscht funktioniert:
Passen Sie nun den Holz- und Krocket-Boden an. Speichern, veröffentlichen und erneut testen.
Arten von Tasten
Super, die Antworten funktionieren. Es ist Zeit, eine Frage hinzuzufügen. Natürlich hat Appmaster.io dafür spezielle Elemente, aber ihr erinnert euch an unsere Aufgabe – Buttons und sonst nichts. Also fügen wir noch einen hinzu. Diesmal - nicht auf die Hauptleinwand, sondern oben auf der Seite:
Um es lustiger zu machen, füllen Sie die Frage wie auf diesem Screenshot aus:
Jetzt "einfärben" mit Farbschemata für verschiedene Arten von Schaltflächen: Gehen Sie zu den Einstellungen und ändern Sie den Wert im Feld "Typ" auf einen anderen.
Wir haben es so verstanden, aber Sie können Ihre Option auswä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.
Schwierigere Aufgabe
Sie können eine Nachricht auf verschiedene Weise auf dem Bildschirm anzeigen. Wir haben eine der ungewöhnlichsten ausgewählt:
- Stellen wir zunächst sicher, dass die Schaltflächen mit der Frage automatisch deaktiviert werden, wenn der Benutzer die richtige Antwort gegeben hat. Sie werden grau und reagieren nicht mehr auf Klicks. Dazu nutzen wir die von uns noch nicht berücksichtigte Enable (Disable) Funktion und das bereits bekannte „onClick“.
- Dann betrachten wir einen neuen Trigger - onStateChange, der ausgelöst wird, wenn sich der Zustand der Schaltfläche ändert. Weisen wir diesen Trigger dem "?" - und die Nachricht wird darauf angezeigt.
Schaltflächen deaktivieren
Sie können die Schaltfläche in ihren Einstellungen manuell aktivieren oder deaktivieren, indem Sie den Feldselektor "Aktivieren" umschalten:
Um die automatische Umschaltung einzurichten, öffnen Sie die Einstellungen für die Schaltfläche „Duchess' House“ und fügen Sie einen „onClick“-Trigger hinzu. Wählen Sie im Feld "Zielkomponente" eine der Frageschaltflächen aus, in den Feldern "Aktion" - "Schaltfläche deaktivieren". Wiederholen Sie dies für alle Schaltflächen, die eine Frage enthalten. Es sollte so aussehen:
Denken Sie daran, alle Änderungen zu speichern, zu veröffentlichen und zu überprüfen, ob die Anwendung ordnungsgemäß funktioniert.
Binden wir nun den Anfang der Nachricht an die Schaltfläche "?" (wir nannten es "btn_qqq"). Fügen wir ihm den Trigger "onStateChange" hinzu. Es wird aktiviert, wenn sich der Zustand der Schaltfläche ändert - zum Beispiel, wenn sie sich ausschaltet.
Wählen Sie im Feld „Zielkomponente“ die Option „Anwendung“ (die Nachricht wird im Anwendungsfenster angezeigt), im Feld „Aktion“ - „Benutzeroberflächennachricht anzeigen“ (dem Benutzer eine Nachricht anzeigen).
- Wählen Sie im Feld "Nachrichtenstil" den für Ihre Situation am besten geeigneten aus. In unserem Fall ist dies „Erfolg“ – eine Meldung über den erfolgreichen Abschluss.
- 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
Wenn Sie die richtige Option wählen, sollten Schaltflächen mit falschen Antworten ausgeblendet, der Text der Frage ausgeblendet und eine Bestätigungsmeldung angezeigt werden.
Natürlich war es möglich, die Nachricht einfacher anzupassen, indem sie an den richtigen Antwort-Button gebunden wurde. Obwohl wir heute nicht nach einfachen Wegen suchen. Darüber hinaus wissen Sie bereits genug, um dies ohne unsere Anweisungen zu tun. Versuchen Sie, die Fehlermeldung, die angezeigt wird, wenn Sie die falsche Antwort auswählen , anzupassen. Es sollte so aussehen:
Wir sind uns sicher, dass diese Anleitung Ihnen geholfen hat, Appmaster.io besser kennenzulernen. Aber wenn es nicht klar war (oder vielleicht im Gegenteil zu einfach war), schreiben Sie an den Telegrammkanal unseres technischen Supports, um Anweisungen zu erhalten, die Sie benötigen. Wir schreiben sie!
Nähere Informationen zu Studio.appmaster.io finden Sie in unserer Dokumentation .
