Visuelles Feedback in mobilen Anwendungen

Visuelles Feedback in mobilen Anwendungen sorgt für eine angenehmere Benutzererfahrung, und mobile Anwendungen, die Spaß machen, werden häufiger gestartet als statische, langweilige Anwendungen. MobileTogether die schnelle Entwicklung von mobilen Anwendungen Das (RMAD)-Framework von Altova umfasst alle Werkzeuge, die Sie benötigen, um plattformübergreifende mobile Anwendungen mit ansprechenden visuellen Feedback-Funktionen zu entwickeln.

Die Palette mit Steuerelementen per Drag-and-Drop im MobileTogether Designer enthält ein Button-Steuerelement, das automatisch sein Aussehen ändert, wenn es angeklickt wird. Sie können auch Bedingungen definieren, die während der Ausführung der App Text, Bilder oder andere Elemente eines Buttons hinzufügen oder ändern.

Zusätzlich können viele andere Steuerelemente so definiert werden, dass sie wie Schaltflächen funktionieren, wobei bei einem Klick auf das Steuerelement eine oder mehrere Aktionen ausgeführt werden. Wir haben bereits zuvor darüber geschrieben Symbole als Schaltflächen verwenden in mobilen Anwendungen, um ein stilvolles und elegantes Menü mit Werkzeugen zu erstellen. In diesem Beitrag werden wir unseren Werkzeugbildern Interaktivität verleihen, um für jeden Klick ein ansprechendes visuelles Feedback zu bieten.

Der Screenshot unten zeigt eine Seite der App "Wo bin ich?", die wir entwickelt haben, um die Verwendung von Bildern als Schaltflächen zu demonstrieren.

Jedes blaue Symbol im unteren Bereich des Bildschirms ist ein Werkzeugbutton, der dazu dient, weitere Informationen über den Standort bereitzustellen, entweder durch den Abruf von Daten über eine API oder durch das Öffnen einer externen Webseite. Ein kurzer Klick auf einen beliebigen Button führt die zugeordnete Funktion aus, während ein langer Klick ein Nachrichtenfenster öffnet, das Informationen über den Button anzeigt

Der Wetter-Button in der unteren linken Ecke des Screenshots ist farblich hervorgehoben, um anzuzeigen, dass er angeklickt wurde. Bei einem kurzen Klick wird das Bild kurzzeitig farblich verändert, bevor die Aktion ausgeführt wird.

Ein kurzer Klick auf den Wetter-Button sendet eine Anfrage an die OpenWeather-API und öffnet eine Unterseite, die Wetterdaten in Diagramm- und Textform anzeigt:

Visuelles Feedback in mobilen Anwendungen: Definitionen und Konzepte

Eine visuelle Rückmeldung für einen Klick des Benutzers auf ein beliebiges Bild wird durch eine kurzzeitige Änderung der Hintergrundfarbe hinter dem Bildbutton implementiert. Die Bilder in unserer App sind in Tabellen angeordnet, wie in diesem Ausschnitt aus dem MobileTogether Designer zu sehen ist:

Jede Tabellenzelle verfügt über eine Reihe von Eigenschaften, die einzeln definiert werden können, einschließlich der Hintergrundfarbe der Zelle. Jedes Bild hat ebenfalls eine eindeutige Definition von Aktionen, die ausgeführt werden, wenn auf das Bild geklickt wird.

Wir können eine Indexnummer in dem Element mit dem Namen "userButton" speichern, wenn das Bild der Wettervorhersage angeklickt wird. Anschließend können wir die Hintergrundfarbe der Zelle basierend auf dem Inhalt des Elements "userButton" ändern, wie in der XQuery-Ausdrucksdefinition in der Eigenschaft "Hintergrundfarbe" festgelegt.

Hier ist die Liste der Funktionen für das Tool zur Wettervorhersage:

Zuerst wird der Wert des Elements mit dem Namen "userButton" aktualisiert.

Als Nächstes werden die Aktionen ausgeführt, die tatsächlich das Erscheinungsbild des Bildes verändern. Da diese Aktionen jedes Mal benötigt werden, wenn ein Bild angeklickt wird, werden sie in einer speziellen Aktionsgruppe namens "Button Flash" gespeichert.

MobileTogether führt die Aktion "Anzeige aktualisieren" automatisch einmal am Ende jeder Aktionssequenz aus. Um visuelles Feedback zu ermöglichen, möchten wir die Aktion "Anzeige aktualisieren" frühzeitig in der Sequenz ausführen, um die Hintergrundfarbe zu ändern, kurz anzuhalten, den Wert des Benutzersymbols zurückzusetzen und die Aktion "Anzeige aktualisieren" erneut auszuführen, um die Hintergrundfarbe zu löschen.

Die XQuery-Funktion sleep() legt die Dauer der Pause in Millisekunden fest. Nach dem Blinken der Schaltfläche wird die Ausführung mit der Aktionsgruppe "Wettervorhersage abrufen" fortgesetzt. Diese Aktionsgruppe generiert eine Anfrage an eine Wettervorhersage-API, um die 5-Tage-Vorhersage für jede beliebige geographische Breite und Länge abzurufen, und öffnet dann die entsprechende Unterseite mit den Wetterinformationen, wie oben gezeigt.

Wir möchten auch eine visuelle Rückmeldung erhalten, wenn ein Bild länger angeklickt wird. Mit MobileTogether können wir separate Aktionen für einen langen Klick definieren, wie hier gezeigt:

Das Ergebnis des langen Klicks wird im zweiten Screenshot oben gezeigt, wo das Nachrichtenfenster die Funktion des Buttons "Wetter abrufen" erklärt.

Für den langen Klick benötigen wir nur eine Aktualisierung der Anzeige, um die Hintergrundfarbe zu ändern. Wir brauchen die Funktion "sleep()" nicht, um eine spezielle Pause einzulegen. Eine Aktion zur Aktualisierung der Anzeige wird automatisch ausgeführt, wenn der Benutzer das Nachrichtenfenster schließt, sodass der ursprüngliche Hintergrund wiederhergestellt wird.

Visuelles Feedback in mobilen Anwendungen, bei denen Tabellen wiederholende Zeilen enthalten

Wir können die gleiche Indexierungstechnik nicht verwenden, um Symbole für Werkzeuge auf Seiten zu identifizieren, auf denen wir Listen basierend auf Daten präsentieren, die von API-Abfragen empfangen wurden. Zum Beispiel zeigt der Screenshot unten die Suchergebnisse für Hotels und Motels in der Nähe eines bestimmten Ortes:

Ähnliche Seiten werden für Verkehrsmeldungen und kulturelle Veranstaltungen in der Umgebung angezeigt. Wir möchten außerdem visuelles Feedback für die Bilder, die zu jedem Eintrag gehören, wie hier bei einem längeren Klick auf ein Telefonbild zu sehen ist:

Für jede dieser Seiten wird ein Ergebnis-Set als eine scrollbare Tabelle mit wiederholenden Zeilen definiert, in der wir Informationen anzeigen, die aus API-Abfragen stammen

MobileTogether enthält eine XQuery-Erweiterungsfunktion namens mt-rowgroup-index(), die eine elegante Lösung zur Identifizierung der Bilder in jeder Zeile bietet. Wir können diese Funktion mit einem Wert kombinieren, um die Spalte innerhalb der Tabelle zu identifizieren und so jedes Bild einzeln zu bearbeiten. Das im obigen Beispiel hervorgehobene Telefonbild hat folgende Hintergrundfarbe:

Wenn der Benutzer auf das Telefonsymbol klickt, um eine Ergebnisaktualisierung anzuzeigen, werden zunächst die folgenden Aktionen ausgeführt: Der Wert des Elements "userButton" wird aktualisiert, und die Aktionsgruppe "Button Flash" wird ausgeführt

Wir haben 300 zum Index der Zeilengruppe addiert, um die dritte Spalte von Bildern in der Zeile zu kennzeichnen. Unsere Anfrage an die Such-API fordert maximal 50 Ergebnisse an. Daher kann der Wert des Elements "userButton" für dieses Bild, abhängig von der Zeilennummer des ausgewählten Ergebnisses, zwischen 301 und 350 liegen. Die visuelle Rückmeldung wird nur für dieses einzelne Bild angezeigt, wie durch die Funktion "mt-rowgroup-index()" in der Definition der Hintergrundfarbe der Tabellenzelle bestimmt wird.

MobileTogether enthält viele weitere Funktionen Erweiterungsfunktionen die in XPath/XQuery-Ausdrücken verwendet werden können, wodurch Entwickler nicht mehr eigene Funktionen erstellen müssen, um die Standardbibliotheken von XPath, XQuery und XSLT für häufig benötigte Aufgaben in mobilen Anwendungen zu erweitern.

Erfahren Sie mehr und probieren Sie es selbst aus

Wenn Sie bereit sind, mit der Integration von visuellen Rückmeldungen in mobilen Anwendungen zu beginnen, laden Sie einfach den kostenlosen MobileTogether Designer herunter. Besuchen Sie außerdem die Seite MobileTogether Demos mit Links zu Videos, Tutorials und weiteren Demo-Anwendungen. Sie können die in diesem Artikel beschriebene Anwendung herunterladen, indem Sie eine Kopie aus dem diesem Repository auf GitHub beziehen.