Software-Designvorlagen in mobilen Entwicklungsprojekten
Software-Designvorlagen beschleunigen die Entwicklung mobiler Anwendungen, indem sie die Implementierung wiederholter Komponenten vermeiden. Die Erstellung einer Designvorlage vereinfacht zudem die Überarbeitung und Aktualisierung, da eine Änderung der Vorlage auf ein gesamtes Projekt angewendet werden kann.
MobileTogether unterstützt Software-Designvorlagen für Benutzerelemente in plattformübergreifenden mobilen Anwendungen, um die Wiederverwendung von Designelementen zu erleichtern und die Entwicklung effizienter und flexibler Lösungen für verschiedene Anwendungsanforderungen zu vereinfachen.
Eine Steuerungsvorlage in MobileTogether ist ein Designelement, das es Entwicklern ermöglicht, Benutzereingabeelemente zu definieren und zu gruppieren, sodass sie einfach wiederverwendet werden können. Steuerungsvorlagen unterstützen Parameter, und jede Vorlage kann zur Laufzeit basierend auf den Parameterwerten angepasst werden.
Schauen wir uns ein Beispiel an.
Der MobileTogether Designer enthält mehrere Beispielprojekte, die die Verwendung von Steuerungsvorlagen demonstrieren. Wir werden die App "Cities4-DynamicSelection" beschreiben. Der folgende Screenshot zeigt eine Teilansicht der App, die auf einem Android-Smartphone ausgeführt wird:
Diese App demonstriert eine häufige Herausforderung bei der Darstellung hierarchischer Daten. Letztendlich soll der Benutzer eine Stadt auswählen. Um den Prozess effizienter zu gestalten, ist die vollständige Liste der Städte nach Kontinenten geordnet und in einem Kombinationsfeld angezeigt. Anschließend werden die Länder innerhalb des ausgewählten Kontinents gefiltert und in einer Reihe von Optionsfeldern dargestellt. Schließlich werden die Städte innerhalb des jeweiligen Landes in einer zweiten Reihe von Optionsfeldern angezeigt.
Im Querformat werden die Optionsfelder horizontal aufgelistet (wie oben gezeigt), während sie im Hochformat vertikal angeordnet sind
Die Entwicklung einer solchen App wäre sehr aufwendig, wenn für jede mögliche Kombination von Benutzerauswahlen manuell Radio-Buttons erstellt werden müssten. Darüber hinaus sind die Namen von Ländern und Städten in einer XML-Quelldatei gespeichert, und wir möchten die App einfach aktualisieren können, indem wir lediglich diese Quelldatei bearbeiten.
Beim Öffnen der App im MobileTogether Designer sehen wir das Seitenlayout im Hauptdesignfenster.
Oben auf der Seite befindet sich zunächst ein Kombinationsfeld zur Auswahl des Kontinents. Darunter folgen zwei Tabellen, die Platzhalter-Steuerelemente enthalten. Während der Laufzeit generiert die erste Tabelle die Liste der Länder, und die zweite Tabelle generiert die Liste der Städte.
Der MobileTogether Designer enthält ein Hilfefenster, das eine Baumstruktur aller Seiten, Unterseiten und Steuerungsvorlagen in jeder Anwendung anzeigt. In diesem Beispiel akzeptiert jede Vorlage zwei Parameter, die während der Ausführung vom Platzhalter übergeben werden.
Durch die Auswahl einer der Steuerungsvorlagen werden deren Komponenten im Hauptbereich des Designs angezeigt.
Für die vertikale Version verwendet die Vorlage eine Tabelle mit dynamischen Zeilen, während die horizontale Version eine Tabelle mit dynamischen Spalten verwendet. In beiden Fällen wird die von der Vorlage erstellte Tabelle innerhalb einer einzelnen Zelle der übergeordneten Tabelle platziert, die auf der ersten Seite definiert ist. Dadurch wird das Kontrollkästchen für die Sortierung vertikal in der Mitte jeder Spalte mit Radiobuttons positioniert, unabhängig von der Anzahl der Zeilen.
Ein Platzhalter definiert die Position einer Steuerungsvorlage auf einer Seite. Das Hilfefenster "Stile und Eigenschaften" für den Platzhalter identifiziert die verwendete Steuerungsvorlage und liefert die Parameterwerte. Der Platzhalter für die Liste der Länder definiert beide Eigenschaften als XQuery-Ausdrücke:
Selbst bei einer eingeschränkten Ansicht der Darstellung können wir erkennen, dass die spezifische Steuerungsvorlage, die auf der Seite platziert wird, zur Laufzeit durch die Ausrichtung des Geräts bestimmt wird.
Wir können den MobileTogether-Simulator verwenden, um Software-Designvorlagen während der Ausführung zu untersuchen und die Platzhalter und Steuerungsvorlagen in Aktion zu beobachten. In den folgenden Screenshots verwenden wir ein iPhone im Querformat als Anzeigegerät. Da diese App keine gerätespezifischen oder betriebssystemspezifischen Funktionen enthält, ist das genaue Anzeigegerät irrelevant.
Die Auswahlmöglichkeiten für Kontinent, Land und Stadt werden in der App ohne vordefinierte Werte festgelegt. Daher sehen wir beim Start der Anwendung lediglich die Seitenüberschrift und ein leeres Kombinationsfeld zur Auswahl des Kontinents:
Das Nachrichtenfenster zeigt die durchgeführten Aktionen an, während wir einen Kontinent auswählen. Die ausgewählten Kontinente werden unten grün hervorgehoben
Das Simulationsfenster zeigt jetzt die entsprechende Länderliste für Europa an, aber keine Städtenamen sind aufgeführt
An dieser Stelle wartet die App darauf, dass der Benutzer ein Land auswählt. Anstatt fortzufahren, können wir den XQuery-Editor innerhalb des Simulators öffnen und die Parameter auswerten, die vom ersten Platzhalter an die Steuerungsvorlage übergeben wurden. Wir kopieren einfach den Ausdruck für die Vorlagenparameter aus dem Fenster "Stile & Eigenschaften" und fügen ihn in das XQuery-Fenster ein. Dieser Ausdruck ergibt ein Array, das die Liste der Länder für Europa sowie den Sortierstatus enthält:
Aber warum zeigt die App auf der simulierten Seite keine Liste von Städten an? Wir können den Parameterausdruck prüfen, der vom zweiten Platzhalter für die Städte übergeben wird:
Der Ausdruck hat eine leere Liste von Städtenamen übergeben. Da die Radio-Buttons für die Auswahl von Städten sich in einer Tabelle mit dynamischen Spalten befinden, wurden keine Spalten angezeigt!
Das Kontrollkästchen zur Auswahl der Sortierung befindet sich nicht in einer dynamischen Spalte, wird aber auch nicht angezeigt. Die Sichtbarkeitseigenschaft des Kontrollkästchens ist wie folgt definiert: $PERSISTENT/Root/@Country != '', was bedeutet, dass das Kontrollkästchen und die zugehörige Beschriftung erst dann sichtbar sind, wenn der Benutzer eine Stadt auswählt.
Zusammenfassend zeigt das Beispiel "Cities4-DynamicSelection", wie verschiedene Steuerelemente zu benutzerdefinierten Softwarevorlagen kombiniert und in ein Design für eine mobile App integriert werden können, um eine elegante Lösung zu erstellen, die das korrekte Ergebnis basierend auf den vom Benutzer getroffenen Entscheidungen zur Laufzeit oder anderen externen Bedingungen liefert. Die Demo-App und die zugehörige Quelldatendatei sind im MobileTogether Designer enthalten, sodass Sie die oben beschriebenen Schritte befolgen oder sogar weitergehen und selbst experimentieren können.
Der MobileTogether Designer ist ein kostenloses Tool, mit dem Sie schnell plattformübergreifende mobile Anwendungen aus einem einzigen Design erstellen können. Sehen Sie sich Video-Demonstrationen an, um zu sehen, welche Arten von Anwendungen MobileTogether-Nutzer täglich entwickeln, und laden Sie den Installer herunter, um mit Software-Designvorlagen für sich selbst zu beginnen!