Navigation der App

Die Bildschirme sind die Seiten; die Navigation ist das, was die Menschen zu ihnen bringt. In Keplin lebt sie in keinem Bildschirm: Sie ist ein eigenes Dokument der App, in einem visuellen Editor entworfen und um jeden gerade geöffneten Bildschirm herum ausgeliefert.

Und sie wird pro Gerät entworfen: Die obere Leiste des Computers, die Schublade des Handys und die Aktionsleiste des Tablets sind drei unabhängige Designs, jedes mit seinen eigenen Menüs.

#Den Editor öffnen

In der Seitenleiste der App, Tab UI, heißt der erste Eintrag Navigation. Klicken Sie darauf und er öffnet sich in einem Tab des Arbeitsbereichs.

Was in der Mitte zu sehen ist, ist kein Formular: Es ist die Seite der App, gezeichnet, wie sie aussehen wird. Die Leiste oben, der Inhalt des Bildschirms darunter (Inhalt des Bildschirms), die Marke links. Sie bearbeiten, indem Sie direkt daran arbeiten.

Unter dem Titel stehen die Steuerelemente, die bestimmen, was Sie sehen:

Steuerelement	Was es tut
Web (1280px) / Tablet (768px) / Mobil (390px)	Wählt das Gerät, das Sie gerade entwerfen.
Modus (nur Tablet und Handy)	Die Form der Navigation auf diesem Gerät.
Startmenü	Welches der Menüs öffnet, wenn jemand die App betritt.

#Die Gesten

Geste	Was passiert
Klick auf ein Menü	Wählt es aus (und zeigt, bei einem Kontext, seine Sidebar).
Doppelklick auf ein Menü	Öffnet das Fenster Ausgewählter Eintrag, in dem alles bearbeitet wird.
Ziehen eines Menüs	Verschiebt es in eine andere Zone oder ordnet es neu. Es lässt sich nur dort ablegen, wo es gültig ist.
+	Fügt an dieser Stelle ein Menü hinzu.
× in der Ecke eines Menüs	Entfernt es.
Klick auf die Marke	Öffnet das Fenster Logo der App.

#Die Menütypen

Der Button + jeder Zone zeigt die Typen, die diese Stelle akzeptiert:

Typ	Was es ist
Menü	Führt zu einem Bildschirm der App. Der normale Eintrag.
Untermenü	Gruppiert andere Menüs — in der Schublade und in den Sidebars.
Kontext (Sidebar)	Ein Menü, das, wenn gewählt, eine eigene Sidebar mit seinen Kindern aktiviert. Als würde es die App in Bereiche teilen.
Trennlinie	Eine Trennlinie.
Benutzermenü	Der Avatar dessen, der die App nutzt, mit seinen Einträgen und dem Abmelden.
Benachrichtigungen	Die Glocke, mit der automatischen Zählung der Ungelesenen.
Sprache	Die Sprachauswahl: die Sprachen der App, jede in ihrem eigenen Namen.
Widget-Bereich	Ein Leisten-Bildschirm, der in der Leiste gezeichnet wird: eine Auswahlliste für das Unternehmen, eine Zusammenfassung, eine Suche.

Nicht alle Typen passen an alle Stellen, und der Editor bietet nur die gültigen an: Ein Kontext kann keinen anderen Kontext enthalten, ein Untermenü nimmt nur Einträge auf, das Benutzermenü nimmt nur Einträge, Trennlinien und die Sprache auf, und die Schublade des Handys hat keine Kontexte (verwenden Sie Untermenüs).

#Die Zonen der Leiste

In der oberen Leiste ordnen sich die Menüs in drei Zonen, und der Hinweis im Editor sagt das Wesentliche: Ziehen Sie die Menüs zwischen den Zonen der Leiste (links / Mitte / rechts), um Gruppen zu bilden.

Zone	Übliche Verwendung
Gruppe links	Die Hauptnavigation, gleich nach der Marke.
Gruppe in der Mitte	Eine hervorgehobene Gruppe. Bleibt sie leer, nimmt sie keinen Platz ein.
Gruppe rechts	Das Benutzermenü, die Glocke, Verknüpfungen.

Innerhalb der Sidebar eines Kontexts — und in der Schublade — sind es zwei Zonen: Gruppe oben und Unten (diese klebt am unteren Rand, damit „Einstellungen" und „Hilfe" dort stehen, wo man sie erwartet).

#Ein Menü erstellen

1. Wählen Sie das Gerät in der Kontextleiste.
2. Klicken Sie auf das + der Zone, in der Sie es haben wollen.
3. Wählen Sie den Typ.
4. Das Menü entsteht mit einem generischen Namen und ist ausgewählt — machen Sie einen Doppelklick darauf, um das Fenster Ausgewählter Eintrag zu öffnen.
5. Füllen Sie aus:

Feld	Was es ist
Symbol	Ein Symbol aus der Bibliothek oder ein SVG aus den Assets der App.
Name des Menüs	Der Text, der erscheint. Er ist ein Satz der App — er geht in die Übersetzungen ein.
Bildschirm…	Der Ziel-Bildschirm (nur bei Menü).
(Parameter)	Wenn der Ziel-Bildschirm Routen-Parameter hat, erscheint ein Feld pro Parameter, um ihm einen festen Wert zu geben.
Nur Symbol (der Name erscheint als Tooltip)	Lässt nur das Symbol in der Leiste.

6. Schließen Sie mit Fertig und speichern Sie mit Speichern.

Der Button Eintrag löschen, im selben Fenster, löscht das Menü.

#Kontexte und Sidebars

Ein Kontext (Sidebar) ist die Art, einem Bereich der App ein eigenes Menü zu geben: Sie wählen „Vertrieb" in der oberen Leiste, und links erscheint die Sidebar mit den Vertriebs-Bildschirmen. Die Kinder des Kontexts sind die Einträge dieser Leiste.

Im Fenster des Kontexts stellt der Abschnitt Sidebar dieses Kontexts sie fein ein:

Feld	Optionen
Verhalten	Fest (immer offen) · Einklappbar (Button klappt auf Symbole ein) · Mini (Symbole; klappt beim Überfahren aus) · Mini mit Panel (Hover öffnet den Baum des Menüs)
Breite	Zwischen 180 und 400 Pixeln.
Beim Ausklappen (nur im Mini-Modus)	Überlagert den Inhalt oder Schiebt den Inhalt.
Startet eingeklappt (nur im einklappbaren Modus)	Wie sie beim ersten Mal öffnet.

Die Sidebar bleibt offen, während man sich im Bereich bewegt, auch auf Seiten, die in keinem Menü stehen (eine aus einer Liste geöffnete Detailseite), und auch nach dem Neuladen. Ein Bildschirm aus einem anderen Kontext wechselt sie, und ein Eintrag der oberen Leiste ohne Kontext schließt sie. Damit eine Detailseite auch bei einem direkten Link das richtige Menü hervorhebt, legen Sie in den Eigenschaften des Bildschirms, Kategorie Navigation, das Feld Übergeordneter Bildschirm fest.

#Das Benutzermenü

Das Benutzermenü ist ein Eintrag wie die anderen: Es kann in der oberen Leiste stehen, innerhalb eines Kontexts, in der Schublade oder in der kompakten Leiste. Es auszuwählen öffnet sein Popup, und dort fügt man mit dem + Einträge hinzu (Menü, Trennlinie oder Sprache).

Im Fenster stehen die Optionen, die nicht visuell sind:

Option	Was sie tut
Namen anzeigen	Der Name dessen, der die App nutzt, erscheint in der Kopfzeile des Menüs.
Benutzernamen anzeigen (Login)	Zusätzlich der Benutzername.
Option „Abmelden“	Nimmt den Ausstieg ans Ende des Menüs auf.
Text für „Abmelden“	Ein eigener Text; leer verwendet Die des Systems (übersetzt).

Ohne Symbol zeigt der Avatar die Initialen des Namens — genau das nennt der Symbol-Selektor Kein Symbol (Initialen).

#Benachrichtigungen

Der Eintrag Benachrichtigungen ist die Glocke: nur Symbol, mit der Pill der Ungelesenen, die sich von selbst aktualisiert. Der Klick öffnet die letzten Benachrichtigungen, und Mehr anzeigen öffnet das Panel mit allen. Im Fenster entscheidet Benachrichtigungen im Dropdown, wie viele jeweils erscheinen (zwischen 1 und 20).

#Sprache

Der Eintrag Sprache ist die Sprachauswahl. Sie zeigt die Sprachen der App, festgelegt im Abschnitt Übersetzungen der Einstellungen, jede in ihrem eigenen Namen („Português“, „English“), damit jemand, der die aktuelle Sprache nicht versteht, die eigene findet. Die Wahl einer Sprache wechselt die Texte der App ohne Neuladen der Seite, und die Wahl wird auf dem Gerät gespeichert.

Sie kann in der oberen Leiste, in einer Sidebar, in der Schublade, in der kompakten Leiste und in der Aktionsleiste stehen. Im Benutzermenü erscheint sie als Eintrag „Sprache · Deutsch“, der die Liste an Ort und Stelle öffnet. Im Fenster legt Aktuelle Sprache anzeigen als fest, was die Schaltfläche zeigt: Name (Deutsch) oder Code (DE).

In einer App mit nur einer Sprache erscheint die Auswahl nicht.

Beim ersten Besuch, bevor jemand wählt, öffnet sich die App in der Sprache des Browsers oder des Handys, wenn die App sie hat; sonst in der Basissprache. Ein Bildschirm ohne Menüs, etwa die Anmeldung, kann die Wahl mit einer Schaltfläche anbieten, die keplin.i18n.setLocale aufruft.

#Widget-Bereiche

Ein Widget-Bereich setzt Widgets in eine Leiste: eine Auswahlliste für das Unternehmen in der oberen Leiste oder eine Zusammenfassung unten in der Sidebar eines Kontexts. Der Inhalt des Bereichs ist ein Bildschirm der App, der im Designer wie jeder andere gezeichnet wird, mit der Darstellung Leiste (Widget-Bereich).

So erstellen Sie einen Widget-Bereich:

1. Erstellen Sie im Abschnitt Bildschirme einen Bildschirm.
2. Wählen Sie in den Eigenschaften des Bildschirms, in der Kategorie Darstellung, unter Modus die Option Leiste (Widget-Bereich).
3. Legen Sie unter Breite (px) und Höhe (px) die Größe des Bereichs fest. Standardmäßig ist er 320 mal 48 Pixel groß.
4. Zeichnen Sie die Widgets.
5. Klicken Sie in der Navigation auf das + der Zone, in der der Bereich stehen soll, und wählen Sie Widget-Bereich.
6. Doppelklicken Sie auf das Element und wählen Sie unter Bildschirm des Bereichs den Leisten-Bildschirm.
7. Klicken Sie auf Speichern.

Die Zone des Elements bestimmt, wo der Bereich erscheint und in welcher Größe:

Wo das Element steht	Wo der Bereich erscheint
Gruppe links, Gruppe in der Mitte oder Gruppe rechts der oberen Leiste	In der oberen Leiste, mit der Breite und Höhe des Bildschirms.
Gruppe oben oder Unten in der Sidebar eines Kontexts	In der Sidebar, mit der Breite der Leiste und der Höhe des Bildschirms.
Schublade	In der Schublade, mit der Breite der Schublade und der Höhe des Bildschirms.
Header	Neben der Marke, mit der Breite und Höhe des Bildschirms.

Der Bereich kommt nicht in die Aktionsleiste und nicht ins Benutzermenü. In einer auf Symbole eingeklappten Sidebar erscheint er nicht.

Der Bereich bleibt beim Navigieren geöffnet: Die Daten werden einmal geladen, und die getroffene Auswahl bleibt beim Seitenwechsel erhalten. In KeplinGo funktioniert der Bereich im Header und in der Schublade genauso.

#Den Bereich mit den Seiten verbinden

Der Bereich und die Seiten kommunizieren über den Zustand der App: benannte Werte, auf jedem Bildschirm dieselben. Damit zum Beispiel eine Auswahlliste in der oberen Leiste die Seiten nach dem gewählten Unternehmen filtert:

1. Wählen Sie in der Auswahlliste des Bereichs unter Datenbindung die Option Zustand und geben Sie den Schlüssel unternehmen ein.
2. Wählen Sie auf den Seiten in einem Filter des Datastores die Quelle Zustand und geben Sie denselben Schlüssel ein. Die Liste liest die Daten neu, wenn sich die Auswahl ändert.
3. Um den Wert anzuzeigen, binden Sie eine Beschriftung an denselben Schlüssel.

Der Code der Ereignisse liest und schreibt dieselben Werte mit keplin.state.

#Höhe der Leiste

Die obere Leiste ist standardmäßig 48 Pixel hoch. Damit ein höherer Bereich Platz findet, ändern Sie Höhe der Leiste in den Steuerelementen unter dem Titel des Editors auf einen Wert zwischen 40 und 96 Pixeln. Jedes Gerät hat seine eigene Höhe, und in den kompakten Modi gilt sie für den Header.

#Wert-Pills

Jedes Menü (außer Trennlinien und der Glocke) kann eine Pill mit einer lebenden Zahl zeigen — die unbearbeiteten Bestellungen neben „Bestellungen", die offenen Anträge neben „Freigaben".

1. Schalten Sie im Fenster des Eintrags Pill mit Wert anzeigen ein.
2. Wählen Sie die API, die die Daten bringt (API auswählen…).
3. Wählen Sie unter Wert die Option Anzahl (Zahl der Datensätze) oder Feld des 1. Datensatzes — in diesem Fall geben Sie auch das Feld an.
4. Bei leerem Wert oder null ausblenden verhindert eine Pill, die „0" sagt.

Die Pill aktualisiert sich in Echtzeit: Wenn die Daten sich ändern, ändert sich die Zahl — ohne dass jemand die Seite neu lädt.

#Das Logo der App

Klicken Sie auf die Marke, links in der Leiste, um das Fenster Logo der App zu öffnen:

Feld	Was es tut
Symbol oder Bild	Wählt ein Symbol aus der Bibliothek oder eine Datei aus den Assets der App.
Namen der App anzeigen	Der Name neben der Marke.
Ausschnitt in der Leiste	Für Bilder aus den Assets (SVG, PNG, JPG, GIF oder WebP): Skalierung, Breite der Box, Höhe der Box und die Positionierung durch Ziehen des Bildes.
An die Box anpassen	Setzt Skalierung und Position zurück.
Kein Ausschnitt	Schaltet den Ausschnitt aus.

Der Ausschnitt ist die Antwort auf das Logo, das „nicht passt“: du ziehst und skalierst, bis es gut in der Leiste sitzt, und der Dialog selbst garantiert, dass die Datei unangetastet bleibt — der Zuschnitt ist rein visuell und umkehrbar. Die Box ist standardmäßig 32 Pixel hoch, in einer Leiste von 48: ein horizontales Logo wächst nur, wenn du die Höhe der Box erhöhst (bis 44); die Breite der Box allein lässt Leerraum um ein kleines Logo. Ohne Ausschnitt sitzt das Bild in einer Box von 24 Pixeln.

Der Vorschaustreifen des Dialogs nutzt die echten Farben der App-Leiste. Ist die Leiste dunkel, muss die Logodatei die helle (weiße) Version der Marke sein — das farbige Logo für weißen Hintergrund verschwindet auf der Leiste.

Der Logo-Bereich kann eine andere Hintergrundfarbe haben als der Rest der oberen Leiste: Es ist die Farbe Hintergrund des Logo-Bereichs in der Gruppe Navigation des Themas in den App-Einstellungen. Zwischen dem Logo-Bereich und den Menüs gibt es keinen Trenner; unterscheiden sich die beiden Farben, ist der Farbwechsel die Grenze. Das gilt für die obere Leiste auf Web und Tablet; in der kompakten Leiste und in der Schublade folgt das Logo der Farbe der Leiste.

Der Logo-Bereich ist nie schmaler als die Marke: Bei einer Mini- oder eingeklappten Seitenleiste beginnen die oberen Menüs nach der Marke, nicht über ihr.

Der Browser-Tab zeigt „Bildschirmname · App-Name“ und auf einem Bildschirm ohne Namen nur „App-Name“; auf der Anmeldeseite zeigt er „Anmelden · App-Name“.

#Startmenü

Startmenü, in der oberen rechten Ecke, entscheidet, womit die App öffnet. Gewählt wird eines der Menüs (kein loser Bildschirm), und zwar pro Gerät — das Handy kann in einem anderen Panel öffnen als der Computer.

Hat ein Gerät keine eigene Wahl, erbt es die des nächsten (Handy → Tablet → Web); und gibt es gar keine, öffnet die App im ersten Menü, das zu einem Bildschirm führt.

#Ein Design pro Gerät

Das Web ist immer eine obere Leiste. Tablet und Handy haben einen Selektor Modus:

Modus	Wie es aussieht
Obere Leiste (nur Tablet)	Wie am Computer: Marke, Menüs und Kontexte in einer Leiste.
Hamburger-Menü	Eine kompakte Leiste mit dem Button ☰, der die Schublade mit dem Menübaum öffnet.
Aktionsleiste	Eine Leiste unten, im Stil einer mobilen App, mit bis zu 5 Einträgen — und ohne Schublade.

In den kompakten Modi gibt es noch zwei eigene Reihen:

• Den Header — bis zu 4 Aktionen neben der Marke (das Benutzermenü und die Glocke sind hier gut aufgehoben).
• Die Aktionsleiste — bis zu 5 Einträge unten, jeder ein Button oder ein Aktionsmenü.

Wenn die Grenze erreicht ist, sagt die Plattform warum: Die Aktionsleiste hat bereits 5 Einträge (Maximum). / Der Header fasst höchstens 4 Aktionen.

#Wer was sieht

Der Editor entwirft; wer entscheidet, wer welches Menü sieht, ist Einstellungen der App ▸ Berechtigungen, im Tab Menüs — pro Rolle und pro Gerät.

Die Regel ist es wert, sie zu kennen: Anders als die Bildschirme ist ein Menü standardmäßig sichtbar. Die Tür ist der Bildschirm, und die ist schon zu; das Menü zu verbergen dient dazu, eine ganze Gruppe aus dem Blickfeld zu nehmen, oder die Glocke dem zu nehmen, der nichts empfängt. Eine Gruppe zu verbergen nimmt die Kinder mit, und ein Eintrag, der auf einen unzugänglichen Bildschirm zeigt, verschwindet von selbst.

#Warum nicht…?

• Warum sind meine Änderungen verschwunden? Sie wurden nicht gespeichert. Die Navigation hat einen Button Speichern — und sie warnt, bevor Sie einen Tab mit ungespeicherten Änderungen schließen.
• Warum kann ich das Menü nicht dort ablegen, wo ich will? Diese Stelle akzeptiert diesen Typ nicht. Ungültige Ziele leuchten gar nicht erst auf: ein Kontext in einem Kontext, ein Untermenü in einem Benutzermenü, eine Trennlinie in der oberen Leiste.
• Warum sehe ich die Menüs auf dem Handy nicht? Das Handy hat einen eigenen Baum, und der kann leer sein. Wählen Sie Mobil (390px) und entwerfen Sie ihn.
• Warum ist ein Menü in der veröffentlichten App verschwunden? Entweder wurde es unter Einstellungen ▸ Berechtigungen ▸ Menüs für diese Rolle verborgen, oder es zeigt auf einen Bildschirm, zu dem diese Person keinen Zugriff hat.
• Warum erscheint das Logo beschnitten? Es hat einen Ausschnitt. Öffnen Sie das Fenster und verwenden Sie An die Box anpassen, oder Kein Ausschnitt.
• Warum kann ich den Typ eines Menüs nicht ändern? Das ändert man nicht. Löschen und mit dem richtigen Typ neu erstellen — das ist die einzige Operation, die die Plattform Sie nicht auf halbem Weg machen lässt.
• Warum zeigt die Pill immer 0? Schalten Sie Bei leerem Wert oder null ausblenden ein, oder prüfen Sie, ob die gewählte API wirklich Datensätze zurückgibt.
• Warum wirkt das Logo klein, mit Leerraum darum? Die Box ist standardmäßig 32 Pixel hoch, und ein horizontales Logo passt mit wenig Breite hinein. Erhöhe die Höhe der Box (bis 44) statt der Breite.
• Warum sehe ich das Logo in der Leiste nicht? Ist die Leiste dunkel und die Datei die Farbversion für weißen Hintergrund, lade in Assets die weiße Version der Marke hoch und wähle sie im Dialog.
• Warum erscheint mein Bildschirm nicht unter Bildschirm des Bereichs? Es erscheinen nur Bildschirme mit der Darstellung Leiste (Widget-Bereich). Ändern Sie den Modus in der Kategorie Darstellung der Eigenschaften des Bildschirms.
• Warum erscheint der Widget-Bereich nicht in der Sidebar? Die Leiste ist auf Symbole eingeklappt, und dort passt der Bereich nicht hinein. Klappen Sie die Leiste aus.