Ansichten

Ansichten sind Teilbereiche eines Schritts und werden innerhalb der Navigations- und Symbolleiste angezeigt. Sie dienen als einzelne Bausteine der App-Seite, die durch den Schritt dargestellt wird. Die Art des mobilen Geräts gibt vor, wo Ansichten hinterlegt werden können. Auf einem Telefon gibt es nur einen solchen Bereich, der den größten Teil des Bildschirms einnimmt. Auf einem Tablet gibt es zwei voneinander getrennte Bereiche, die typischerweise in einem Master-Detail-Szenario eingesetzt werden. Hier haben sowohl der Master- als auch der Detailbereich jeweils eine obere und untere Leiste sowie Ansichten, die dazwischen angezeigt werden.

Standardmäßig werden Ansichten untereinander und auf die volle verfügbare Breite gedehnt dargestellt. Möchte man beispielsweise eine Kachelansicht und eine Detailansicht anzeigen, wird zunächst die Kachelansicht auf voller Breite angezeigt und darunter die Detailansicht. Sollte der angezeigte Inhalt größer sein, als der Bildschirm, fangen die Ansichten an zu scrollen.

Übersicht

Nachfolgend sind alle möglichen Arten von Ansichten aufgelisten, die der Designer unterstützt.

Ansicht	Typ	Erklärung
Bildansicht	image	Zeigt ein statisches Bild an.
Kachelansicht	dashboard	Zeigt ein Menü mit Kacheln an.
Listenansicht	list / select	Zeigt eine Liste von Datensätzen an.
Detailansicht	detail	Zeigt die Detailansicht eines Datensatzes an.
Generische Ansicht	-	Unterstützung für weitere Ansichten aus pit - Mobile.

Style

Jede Ansicht, egal was sie anzeigt, kann individualisiert werden, um ihre Position innerhalb des Schritts zu verändern. Hierfür wird an der Ansicht die dynamische Eigenschaft style vom Typ Text benötigt. Der Inhalt ist ein JSON-Objekt mit folgenden Werten:

Eigenschaft	Erklärung
left	Abstand der Ansicht in Pixeln zum linken Rand des Bildschirms.
right	Abstand der Ansicht in Pixeln zum rechten Rand des Bildschirms.
top	Abstand der Ansicht in Pixeln zum oberen Rand des Bildschirms.
bottom	Abstand der Ansicht in Pixeln zum unteren Rand des Bildschirms.
width	Breite der Ansicht. Angabe in Pixeln oder als prozentualer Wert.
height	Höhe der Ansicht. Angabe in Pixeln oder als prozentualer Wert.

Dieses Beispiel verdeutlicht den Einsatz der Positionsangaben:

{
    left:0,
    top:5,
    width:"100%"
}

Tabellen-Layout

In pit - Mobile 4.0 können Ansichten nicht nur untereinander sondern auch in einem Tabellen-Layout angeordnet sein. Dabei werden die Ansichten als Zellen innerhalb einer Tabelle mit einer festen Anzahl an Zeilen und Spalten dargestellt.

Um ein Tabellenlayout im Designer umzusetzen, muss zunächst die dynamische Eigenschaft layout vom Typ Text am Schritt mit folgender Struktur existieren:

{
    "grid": {
        "rows": [ "200", "*", "100" ],
        "columns": [ "*" ]
    }
}

rows und columns sind Arrays, in denen man die Höhe bzw. Breite der einzelnen Zeilen bzw. Spalten definiert. Hier sind neben absoluten Pixelwerten auch der Wert '*' zulässig, der den restlichen zur Verfügung stehenden Platz ausfüllt.

Anschließend kann an jeder einzelnen Ansicht des Schritts noch über die dynamische Eigenschaft gridIndex vom Typ Text der Tabellenindex hinterlegt werden, um anzugeben, in welchen Zellen die Ansicht innerhalb des Schritts angezeigt werden soll:

{
    "row": 1,
    "column": 0,
    "rowSpan": 2
}

Siehe auch

Schritte
Navigations- und Symbolleiste
Buttons