Designvorlagen für mobile Anwendungen
In einem früheren Beitrag haben wir über die Verwendung von Software-Designvorlagen für mobile Anwendungen geschrieben, um die Wiederverwendung von Designelementen zu erleichtern und die Entwicklung effizienter und flexibler Lösungen für verschiedene Anwendungsanforderungen zu ermöglichen. Wir haben ein Beispiel für eine Steuerungsvorlage beschrieben, die dazu dient, mehrere Hierarchieebenen von Daten basierend auf der Benutzerauswahl zur Laufzeit darzustellen.
Unser Beispiel wurde mit MobileTogether erstellt, einem Tool von Altova für die schnelle Entwicklung mobiler Anwendungen (RMAD), das Entwicklern dabei helfen soll Apps für verschiedene Plattformen entwickeln die eine dynamische und anspruchsvolle App-Performance bieten, die die Endbenutzer begeistern.
Sie können auch Steuerungsvorlagen für plattformübergreifende mobile Anwendungen erstellen, indem Sie mehrere Steuerelemente zu einer größeren Einheit kombinieren, ähnlich einer komplexen Unterbaugruppe, die aus einzelnen Teilen besteht. Dies ermöglicht die Erstellung von Designvorlagen für mobile Anwendungen, die einfach überall eingesetzt werden können, wodurch die Entwicklung beschleunigt und eine einheitliche Gestaltung gewährleistet wird.
Der MobileTogether Designer, das Tool von Altova für die plattformübergreifende mobile Entwicklung, das visuelle Layout-Tools mit Drag-and-Drop-Funktionalität mit Programmiertechniken kombiniert, enthält Beispielanwendungen, die verschiedene Möglichkeiten veranschaulichen. Die App "CompanySales" fragt eine Bestellungsdatenbank ab, um einen Echtzeit-Verkaufsbericht für Führungskräfte für ein fiktives Unternehmen zu erstellen. Der Bericht enthält Informationen zu den Gesamtumsätzen sowie zu den Umsätzen nach Produkt, Region oder einzelnen Vertriebsmitarbeitern. Der Benutzer kann die Berichtszeiträume auswählen und die Ergebnisse mit vorherigen Zeiträumen vergleichen.
Im Folgenden sind Bilder der Übersichtsseite dargestellt, die Echtzeit-Verkaufsdaten für den 15. Februar anzeigen, sowie die Seite "Verkäufe nach Produkt", die eine Aufschlüsselung der Verkäufe nach Produkt für diesen Tag enthält.
Jede Seite in der App bietet Funktionen zur Datenauswahl, sodass Benutzer zu jedem beliebigen vergangenen Datum navigieren können, um historische Verkaufsdaten einzusehen.
Im Hauptfenster des Designbereichs können wir sehen, dass die Funktionen zur Datenauswahl durch die Kombination von drei Schaltflächen und einer Datums-Auswahlkomponente realisiert sind:
Das Datumsfeld zeigt das Berichtsdatum an und ermöglicht es dem Benutzer, ein beliebiges Datum in der Vergangenheit auszuwählen. Die Pfeiltasten links und rechts ermöglichen die Navigation um einen Tag zurück oder vorwärts, und die Schaltfläche "Heute" wählt das aktuelle Datum aus.
Wenn das Berichtsdokument für das aktuelle Datum eingestellt ist, sind sowohl der "Heute"-Button als auch der Pfeil-Rechts-Button deaktiviert.
Designvorlagen für mobile Anwendungen
Bevor die oben genannten Steuerelemente erstellt werden, wird zunächst eine Steuerungsvorlage im Hilfefenster "Seiten" hinzugefügt. Neue Seiten und Steuerungsvorlagen können hinzugefügt werden, indem man auf den grünen Plus-Button in der oberen linken Ecke klickt
Alternativ können Sie eine Steuerungsvorlage erstellen, indem Sie vorhandene Steuerelemente auf einer beliebigen Seite auswählen und dann im Kontextmenü, das beim Rechtsklick erscheint, eine Option auswählen
Innerhalb des erweiterten Datums-Auswahlfelds werden die Aktionen, die durch den "Heute"-Button, die Pfeiltasten und das Datums-Auswahlfeld selbst ausgeführt werden, ebenfalls in der Steuerungsvorlage definiert. Im Folgenden werden die Aktionen für den "Heute"-Button und die linke Pfeiltaste dargestellt:
Wir möchten, dass der "Heute"-Button nicht aktiv ist, wenn das ausgewählte Datum das aktuelle Datum ist, und wir möchten auch verhindern, dass der Benutzer in die Zukunft navigiert. Wir können festlegen, wann diese Schaltflächen aktiviert werden, im Hilfefenster für Stile und Eigenschaften. Hier ist eine Teilansicht der Einstellungen für den "Heute"-Button:
Der "Heute"-Button ist deaktiviert, wenn das ausgewählte Datum des Berichts auf das aktuelle Datum eingestellt ist. Außerdem haben wir verschiedene Farben definiert, um anzuzeigen, ob der Button anklickbar ist oder nicht.
Die Farbdefinitionen sind optional. Eine Anforderung für die App "CompanySales" war, dass die gleichen Farben auf allen Geräten angezeigt werden, um ein einheitliches Erscheinungsbild zu gewährleisten. Wenn Sie die Farbdefinitionen leer lassen, verwendet MobileTogether automatisch Standardfarben für jede Plattform: Android, iOS, Windows 10 usw.
Eine Steuerungsvorlage zu einer Seite hinzufügen
Die erweiterte Vorlage für die Datums-Auswahl wird auf der Seite "Executive Sales Report" der App sowie auf drei von vier Unterseiten verwendet. Wir haben einfach die erweiterte Datums-Auswahl aus dem Hilfefenster "Seiten" auf jede Seite gezogen, auf der sie benötigt wurde. Dies spart mehrere Schritte, da die Vorlage automatisch in einem Platzhalter-Steuerelement instanziiert wird, wie hier zu sehen ist:
Anpassen von Aktionen in Designvorlagen für mobile Anwendungen
Wir müssen noch einen weiteren Punkt berücksichtigen. Wenn der Benutzer ein neues Berichtsdatum auswählt, soll die App automatisch die Vertriebsdatenbank abfragen, um für jede Seite eindeutige Berichte und Diagramme anzuzeigen. Die bisher definierten Funktionen im erweiterten Datums-Auswahlfeld wählen lediglich ein Datum aus.
Wir haben drei Möglichkeiten, eine Steuerungsvorlage weiterzuverarbeiten: Entweder werden ausschließlich die in der Steuerungsvorlage selbst definierten Aktionen ausgeführt, oder die Aktionen in der Steuerungsvorlage werden durch alle neuen Aktionen überschrieben, die im Platzhalter definiert sind, oder die Aktionen der Steuerungsvorlage werden mit zusätzlichen Aktionen kombiniert, die im Platzhalter definiert sind.
Unsere Unternehmens-App für Vertrieb nutzt die dritte Option. Der erweiterte Datums-Auswahlmechanismus ermöglicht es dem Benutzer, ein Datum auszuwählen. Die Platzhalter auf jeder Seite ermöglichen es, spezifische Aktionen auszuführen, um Datenbankabfragen durchzuführen und Diagramme zu aktualisieren, die für diese Seite relevant sind.
Wir haben auf jeder Seite über das Kontextmenü, das durch einen Rechtsklick aufgerufen wird, Ereignisüberschreibungen zur Vorlagendefinition hinzugefügt
Dadurch wird das Dialogfenster "Aktionen" geöffnet. Im Folgenden sind die verfügbaren Aktionen für die Seite "Verkäufe nach Produkt" dargestellt.
Die erste Aktion ist eine spezielle, integrierte Aktionsgruppe namens "Vorlage-Ereignisrückruf". Die Einbeziehung von "Vorlage-Ereignisrückruf" bedeutet, dass zuerst alle Aktionen ausgeführt werden, die im Vorlagenbereich des erweiterten Datumsfeld-Steuerelements definiert sind, und anschließend die zusätzlichen Aktionen, die im Platzhalterbereich definiert sind.
Die letzte Aktionsgruppe im obigen Bild ist erweitert, um die Aktionen anzuzeigen, die den Bericht "Umsatz pro Produkt" aktualisieren. Die ersten beiden Aktualisierungsaktionen führen Datenbankabfragen aus, während die letzten beiden Aktualisierungsaktionen die Diagramme basierend auf den Abfrageergebnissen neu zeichnen.
Probieren Sie es selbst aus
Sie können den kostenlosen MobileTogether Designer herunterladen und die Beispielanwendung "CompanySales" öffnen, um sich eingehender mit den Designvorlagen für mobile Anwendungen in diesem Demo-Tool für Vertriebsberichte zu befassen. Alternativ können Sie die mobile App herunterladen und die Anwendung "CompanySales" auf Ihrem eigenen mobilen Gerät ausführen. Die Unterstützung von Designvorlagen in mobilen Anwendungen ist nur eine von vielen Funktionen von MobileTogether, die Entwicklern die Möglichkeit geben, komplexe, native Anwendungen mit einem Low-Code-Ansatz zu erstellen, der schnell und einfach ist.