Desktop-Version

Start arrow Informatik arrow Strategie für die Portierung von Desktop-Business-Anwendungen auf iOS-gestützte Endgeräte

< Zurück   INHALT   Weiter >

5.3.2 Interaktionselemente

Interaktionselemente dienen der Kommunikation zwischen Anwender und Anwendung. Sie unterscheiden sich in:

- Standard-Interaktionselemente

- Applikationsabhängige-Interaktionselemente

5.3.2.1 Standard-Interaktionselemente

Die Standard-Interaktionselemente unterschieden sich zudem noch mal in Basiselemente und Erweiterungselemente. Zu den Basiselementen gehören:

- Eingabefelder

- Schaltflächen

- Auswahllisten

- Grafiken

Zu den Erweiterungselementen gehört beispielsweise der Rollbalken (engl.: Scrollbar) und der Trennbalken (engl. Splitbar).

Die Standard-Interaktionselemente werden von den Frameworks der beiden Plattformen zur Generierung der Benutzerschnittstelle bereitgestellt.

In den meisten Fällen haben sie plattformübergreifend ein ähnliches Erscheinungsbild. Das gilt insbesondere für die unterschiedlichen Desktop-Betriebssysteme.

Zwischen Windows und iOS sieht das etwas anderes aus. Hier weichen einige Interaktionselemente von ihrem Erscheinungsbild erheblich ab, oder sie existieren gar nicht in iOS. Das ist maßgeblich durch die verschiedenen Interaktionsformen bedingt. Denn es ist sehr schwierig, sehr kleinteilige Interaktionselemente mit dem Finger zu bedienen.

Zu diesen Interaktionselementen zählen beispielsweise die Drehscheibe oder das Kontrollkästchen. Die Drehscheibe ist eine besondere Form des Listenfelds. Es ist eine Einfachauswahlliste, dessen Ausschnittsrahmen auf eine Zeile verkleinert ist.

Tab. 5-11 zeigt die Ausführung beider Plattformen.

Windows

iOS

IMG_0012.PNG

Tab. 5-11 Gegenüberstellung Drehscheibe

Die Drehscheibe von Windows besteht aus einem Textfeld, das rechts zwei Pfeile aufweist. Über diese beiden Pfeile können die Werte des Textfeldes verstellt werden.

Klickt der Anwender in einen Wertebereich (z.B. Stunde), kann er auch über die Tastatur den Wert ändern. Entweder mit den Pfeiltasten oder über das Nummernfeld. Die iOS-Drehscheibe besteht aus einer oder mehreren Scheiben, die sich über eine gerichtete Berührungsgeste verschieben lassen. Mehrere Drehscheiben stellen verschiedene Wertebereiche dar. In Tab. 5-11 ist die Uhrzeit mit vollen Stunden und Minuten zu sehen. Möchte ein Anwender die Stunden ändern, muss er seine Finger über das linke Rad bewegen. Möchte er hingegen die Minuten ändern, muss er seine Finger über das rechte Rad bewegen.

Die Referenzanwendung verwendet das Drehscheiben-Interaktionselement zur Einstellung der Öffnungszeiten (CustomerDataView). Dafür sind mehrere Drehscheiben untereinander und nebeneinander angeordnet. Sie symbolisieren die Öffnungs- und Schließzeiten eines jeden Tages. Eine 1:1 Übernahme dieses Interaktionselements würde in iOS zu Problemen führen. Das liegt daran, dass das iOS-Drehscheiben-Interaktionselement deutlich mehr Raum einnimmt als die Windows-Version. Die Lösung ist jedoch sehr einfach.

In der iOS-Ansicht wird anstatt der Drehscheibe eine Schaltfläche platziert, die als Bezeichnung die ausgewählte Uhrzeit enthält. Sobald ein Anwender die Schaltfläche betätig, öffnet sich eine Popover-Ansicht, die die Drehscheibe beinhaltet. Hier kann der Anwender die gewünschte Uhrzeit auswählen. Tab. 5-12 zeigt links die WindowsPlattform und rechts die iOS-Plattform.

Tab. 5-12 Gegenüberstellung Windows und iOS

Ein weiteres Interaktionselement, das sich vom Erscheinungsbild der WindowsVersion erheblich abhebt, ist das Kontrollkästen. Das Kontrollkästchen ist in Windows ein Kasten, der entweder einen Haken enthält oder leer ist. iOS gestaltet dieses Interaktionselement als einen Schalter. Über eine gerichtete Geste nach links oder

rechts, lässt sich dieser Schalter aktivieren oder deaktivieren. Das Kontrollkästchen in Windows wird hingegen über einen Mausklick aktiviert bzw. deaktiviert.

Tab. 5-13 zeigt beide Interaktionselemente im Vergleich.

Windows

iOS

IMG_0012.PNG

Tab. 5-13 Gegenüberstellung Kontrollkästchen

Das Kontrollkästchen setzt die Referenzanwendung auf der Windows-Plattform in der EditApplicationView (Abb. 5-17) ein. Diese Ansicht unterstützt den Import der Stammdaten. Jeder Datensatz, der in der Anwendung benötigt wird, lässt sich über ein Kontrollkästchen auswählen.

Abb. 5-17 Ansicht für den Import der Applications (Windows)

In der iOS-Version erfolgt die Auswahl nicht über das Kontrollkästchen, sondern direkt über Tabellenzelle. Der Einsatz des iOS-Kontrollkästchen wäre in diesem Dialog nicht zielführend.

Abb. 5-18 zeigt die gleiche Ansicht auf dem iPad. Die Auswahl der Datensätze erfolgt über einen Tipp auf die Tabellenzeile. Über einen Haken am rechten Rand signalisiert die Tabelle die ausgewählten Datensätze. Dieses Feature ist Bestandteil des Table View-Interaktionselements des UKit-Frameworks.

Abb. 5-18 Ansicht für den Import der Applications (iOS)

Für die Portierung lässt sich aus den vorherigen Erläuterungen ableiten, dass sich größten Teils die Standard-Interaktionselemente des UIKit-Frameworks verwenden lassen. Es ist jedoch darauf zu achten, wie diese Interaktionselemente das Layout der Content-Ansicht beeinflussen. Gerade die Größe der Interaktionselemente hat entscheidenden Einfluss. Lässt sich das Interaktionselement nicht verwenden, ist an eine alternative Lösung zu denken. Diese sollte aber nicht das ganzheitliche Erscheinungsbild der Anwendung beeinflussen.

5.3.2.2 Applikationsabhängige-Interaktionselemente

Applikationsabhängige-Interaktionselemente stehen meist nur für einen bestimmten Anwendungsfall zur Verfügung. Sie werden entweder speziell für einen Anwendungsfall entwickelt oder aus existierenden Frameworks abgeleitet.

Die Portierung dieser Interaktionselemente gestaltet sich meistens schwierig, da die Zielplattform (iOS) kein adäquates Interaktionselement besitzt. Eine Neuentwicklung ist zumeist unumgänglich.

Zu diesen Interaktionselementen gehört das Gantt-Diagramm der Referenzanwendung. Es basiert auf dem PlexityHide-Framework und wurde für die Referenzanwendung angepasst. Eine ausführliche Recherche hat ergeben, dass für iOS zurzeit kein adäquates Interaktionselement existiert.

Das Gantt-Diagramm erlaubt die interaktive Gestaltung des Systemablaufplans. Es stellt auf einer zeitlichen Skala, sortiert nach den Instrumenten, die einzelnen Prozessschritte einer DNA-Analyse in Form von Aufgaben (engl. Tasks) dar. Der Anwender kann mithilfe der Maus die Aufgaben auf die Instrumente verteilen und ihrer Anfangszeiten beeinflussen. Die Anwendung nimmt anschließend die Berechnung der nachfolgenden Aufgaben vor und platziert sie entsprechend im GanttDiagramm.

Abb. 5-19 zeigt das Gantt-Diagramm der Windows-Plattform:

GanttView

Abb. 5-19 Gantt-Diagramm (Windows)

Nachfolgend sind die Aufgaben der einzelnen Komponenten des Gantt-Diagramms zusammengefasst.

- Not Assigned-Bereich: Der Bereich besteht aus drei horizontalen Zeilen. Jede Zeile ist einem Instrument-Typ zugeordnet. Die Zeilen dienen der Bereitstellung der noch nicht geplanten Aufgaben (engl.: Schedulable Task). Die linke Kante einer ungeplanten Aufgabe repräsentiert den frühestmöglichen Anfangszeitpunkt der Aufgabe. Die Aufgaben des Not Assigned-Bereiches lassen sich den Instrumenten des Assigned-Bereiches zuordnen. Jedoch kann eine Aufgabe immer nur dem passenden Instrumententyp zugeordnet werden.

- Assigned-Bereich: Der Bereich besteht aus einer oder mehreren horizontalen Zeilen. Jede Zeile repräsentiert ein Instrument, das über das Input-DataEnvironment eingegeben wurde. Zusätzlich existiert die Zeile Hands-On. Diese Zeilen dienen der tatsächlichen Berechnung des Arbeitsablaufplans. Jedes der Instrumente entspricht genau einem der oben aufgeführten Instrument-Typen.

- Hands-On-Zeile: Ist Bestandteil des Assigned-Bereiches. Diese Zeile projiziert sämtliche Hands-On-Tasks, die sich in den Instrument-Zeilen des AssignedBereiches befinden. Überschneiden sich die Hands-on-Tasks der einzelnen Zeilen, werden diese zu einem einzigen Task zusammengeführt.

- Date Scaler: Definiert die X-Achse und repräsentiert den zeitlichen Rahmen des Gantt-Diagramms. Mithilfe der Maus lässt sich der Zeitraum verändern (zoom-in/zoom-out).

- Navigation buttons: Auf jeder Seite des Date Scaler befinden sich zwei solcher Schaltflächen. Mit ihrer Hilfe lässt sich die Zeitachse des Date Scalers um einen Tag oder wenige Minuten verschieben.

- Schedulable Tasks: Jeder Task wird durch ein Rechteck mit fester Breite von 30 Minuten repräsentiert. Die Nummer innerhalb des Quadrats bezeichnet die Anzahl der Proben, die der Task bereitstellt. Die linke Seite gibt an, wann der Task zur Verfügung steht. Sollten mehrere Tasks die gleiche Anfangszeit haben, positioniert sie das Gantt-Diagramm hintereinander. Jeder der Tasks kann auf das gleiche Instrument im Bereich Assigned Tasks verschoben werden.

- Executable Taks: Wird durch ein mit einer Bezeichnung dargestellt. Die Breite des Rechtecks gibt die Dauer der Tasks an. Die Bezeichnung der Tasks repräsentiert die Proben, die der Task verarbeitet. Die Verarbeitungszeit ist abhängig von der Anzahl der Proben und welche Applikation selektiert wurde.

- Hands-On Task: Repräsentiert eine spezielle Vorbereitungszeit. Während der Vorbereitungszeit führt ein Instrument keine Tests durch. Die Vorbereitung wird üblicherweise manuell ausgeführt.

- Current Time: Zeigt die Uhrzeit an, über der sich der Cursor befindet.

Das Gantt-Diagramm ist das Kernelement der Referenzanwendung und macht den Mehrwert der grafischen Benutzerschnittstelle aus. Es trägt die Algorithmen zur Berechnung des Ablaufplans für den Anwender sichtbar nach außen. Die Entwicklung desselben oder ähnlichen Interaktionselement in iOS ist unerlässlich.

Ziel war es, weitestgehend die Darstellung der Windows-Plattform zu übernehmen. Als Grundlage für die Entwicklung des Gantt-Diagramms dient die UITableView. Sie ist Bestandteil des UIKit-Frameworks und bietet viele Möglichkeiten, das Interaktionselement an die persönlichen Bedürfnisse anzupassen.

Abb. 5-20 Gantt-Diagramm iOS-Plattform

Eine UITableView besteht üblicher Weise aus einer Kopfzeile und einem Rumpf. Im Rumpf listet die UITableView einzelne Zeilen auf, die sich in verschiedene Sektionen gruppieren lassen. Jede Sektion hat einen eigenständigen Kopf, der mit einer Überschrift versehen werden kann. Die Zeilen sind wiederum in der Lage, verschiedene Interaktionselemente aufzunehmen; da sie vom Typ UIView sind. Außerdem lässt sich der Hintergrund der Tabelle den eigenen Bedürfnissen anpassen. Der Header der Tabelle nimmt den Datescaler auf. Der Datescaler ist eine abgeleitete Klasse vom Typ UIView und lässt sich somit individuell anpassen. Die

Klasse Datescaler nutzt die Zeichen-Funktion des UIView, um die Skala des

Gantt-Diagramms zu zeichnen. Die Breite der Skala legt den angezeigten Zeitraum fest. Dabei platziert der Autor die Skala nicht direkt am linken Rand der Tabelle, sondern verschiebt die View um 125 Punkte nach rechts, um Platz für die Legende des Gantt-Diagramms zu schaffen. In der Standardskalierung zeigt die Klasse Datescaler einen gesamten Tag an. Mithilfe der Pinch-Geste kann ein Anwender diese Skalierung vergrößern oder verkleinern. Außerdem kann er mit einer Swipe-Geste die Skala nach links oder rechts verschieben. Nach jeder Geste zeichnet die Klasse Datesaler die Skala neu. Die Pinch-Geste fängt die UITableView ab und kann daher auf dem gesamten Gantt-Diagramm ausgeführt werden. Die Swipe-Geste fängt nur die Datescaler ab. Die notwendigen Methoden zur Verarbeitung dieser Gesten sind: Pinch-Geste:

- WorkflowGanttViewController.HandlePinchGesture()

- Datescaler.PinchMinutes()

Swipe-Geste:

- Datescaler.OnPanRecognizer()

- Datescaler.SwipeMinutes()

Neben den beiden Gesten kann ein Anwender auch über zwei Schaltflächen den Zeitausschnitt des Gantt-Diagramms verändern. Diese beiden Schaltflächen befinden sich in der Klasse Datescaler. Die Betätigung dieser beiden Schaltflächen ruft die Methode SwipeDays() auf, welche die Zeitintervalle symbolisieren, in denen das Labor geöffnet oder geschlossen ist.

Der Hintergrund der Tabelle repräsentiert die Öffnungszeiten des Labors. Dazu zeichnen verschiedene Hilfsklassen die einzelnen Rechtecke, welche ein offenes oder geschlossenes Labor symbolisieren. Bei jedem Update der Skala aktualisieren die Hilfsklassen auch die entsprechenden Rechtecke.

Die beiden Hilfsklassen heißen:

- GanttViewBackround

- GanttBackground

Die Sektionen unterteilen das Gantt-Diagramm in ungeplante (Sektion 0) und geplante Aufgaben (Sektion 1). Die einzelnen Zeilen der beiden Sektionen haben den gleichen Aufbau. Sie bestehen immer aus einem Label, das den Instrumentenname anzeigt und einem weiteren Bereich, der die Aufgaben beinhaltet. Diese Aufgaben sind Schaltflächen, die vom Typ TimeItem abgeleitet sind. Die Länge der Schaltfläche gibt die Dauer der Aufgabe an. Die Bezeichnung der Schaltfläche beinhaltet die Proben, die verarbeitet werden.

Das Label, zur Anzeige des Instrumentennamens hat genau die Länge von 125 Punkten und beginnt bei der Koordinate 0 auf der X-Achse. Die Schaltflächen können zwischen Punkt 126 und dem Ende der Tabelle platziert werden. Dieser Bereich liegt genau unter dem Datescaler.

Die Positionierung der Schaltfläche gibt an, wann eine Aufgabe beginnt, bzw. wann ein Satz von Proben im Labor eintrifft. Die Erzeugung des Labels und der Schaltflächen, sowie deren Positionierung erfolgt in der Methode GetCell() der Klasse TreeViewTableSource. Diese Methode ist dafür verantwortlich, dass die Zeilen mit Daten gefüllt werden.

Abhängig davon, ob es sich nun um geplante oder ungeplante Aufgaben handelt, wird die Hintergrundfarbe der Schaltflächen entsprechend angepasst. Über eine TouchGeste ist ein Anwender in der Lage, diese Schaltflächen zu verschieben. Dabei können die Schaltflächen, welche sich in der Sektion „ungeplante Aufgaben“ befinden, nur auf Tabellenzeilen der Sektion „geplante Aufgaben“ verschoben werden. Schaltflächen der Sektion „geplante Aufgaben“ können nur horizontal verschoben werden. Das heißt, dass ein Anwender eine geplante Aufgabe nur innerhalb der Zeile verschieben darf.

Um zu testen, welche Art der Verschiebung vorliegt, ruft das TimeItem die Methode TimeItem_Change() auf. Diese Methode implementiert die Klasse WorkflowGanttViewControllers. Ist die Verschiebung des TimeItem erfolgreich, ruft diese Methode die weiteren Methoden zur Neuberechnung des Ablaufplans auf.

Die Vorgehensweise zeigt, dass es grundsätzlich möglich ist, mit den in iOS gegebenen Mitteln, ein applikationsabhängiges Interaktionselement zu entwickeln. Bemerkenswert ist, dass das Gantt-Diagramm der Originalanwendung ein zugekauftes Interaktionselement ist, das mit Standardelementen relativ einfach nachgebaut werden konnte.

5.3.3 Nachbetrachtung zur Erstellung der grafischen Benutzerschnittstelle

Insgesamt stellt die Anpassung der GUI einen wesentlichen Teil der Portierungsarbeit dar. Das ist einerseits bedingt durch die veränderten Randbedingungen von Hardware und Bedienung gegeben sowie anderseits durch die verwendeten Frameworks (WPF versus iOS UIKit). Dennoch ist zu versuchen, so viele design- und Layout-technische Aspekte aus der Quellplattform zu übernehmen. Für die Referenzanwendung war dieses Unterfangen relativ einfach, da der Designer der Referenzanwendung schon viele gestalterische Aspekte von Apple in die Windows-Version hat einfließen lassen.

 
< Zurück   INHALT   Weiter >

Related topics