Der Canvas

Die Bildschirme einer App werden in einem visuellen Editor gezeichnet: Sie ziehen Widgets aus einer Palette auf einen Canvas, positionieren sie mit Hilfe eines Rasters und intelligenter Hilfslinien auf den Pixel genau und feilen jedes Detail in einem Inspektor rechts aus. Diese Seite erklärt diese Arbeitsumgebung — alles, was danach kommt (Widgets, Daten, Ereignisse), geschieht darin.

Die Beispiele stammen aus der App Kundenverwaltung: ein CRM mit Bildschirmen für Konten, Opportunities und Dashboards.

#Bildschirme öffnen und anlegen

Die Bildschirme leben in der Seitenleiste der App, im Tab UI, im Abschnitt Bildschirme. Ein Klick auf einen Bildschirm öffnet ihn in einem Tab des Arbeitsbereichs — Sie können mehrere Bildschirme nebeneinander offen haben, und jeder Tab merkt sich, was er gerade tat.

Um einen Bildschirm anzulegen:

1. Öffnen Sie die App und wählen Sie den Tab UI in der Seitenleiste.
2. Klicken Sie im Abschnitt Bildschirme auf den Button Neuer Bildschirm.
3. Geben Sie ihm einen Namen — zum Beispiel Kundendatenblatt — und bestätigen Sie mit Erstellen.
4. Der Bildschirm öffnet sich sofort im Arbeitsbereich, bereit zum Zeichnen.

Derselbe Abschnitt hat Ordner (Neuer Ordner), um den Baum zu organisieren, die Bildschirme unter System (Login, Passwort-Wiederherstellung und Registrierung — mit fester Route und festen Parametern) und die Layouts — wiederverwendbare Vorlagen, die dem Kapitel Layouts und Design je Gerät vorbehalten bleiben.

#Die drei Zonen des Designers

Zone	Was sie ist
Widgets (links)	Der Katalog der Widgets. Ziehen Sie einen beliebigen auf den Canvas — der Hinweis am Element selbst sagt es Ihnen: Auf den Canvas ziehen.
Canvas (Mitte)	Die Seite des Bildschirms, im echten Maßstab des aktiven Geräts gezeichnet, bereits mit dem Theme der App. Was Sie sehen, ist das, was die App zeigt.
Inspektor (rechts)	Die Eigenschaften des Ausgewählten — oder des Bildschirms selbst, wenn nichts ausgewählt ist. Er hat zwei Tabs: Eigenschaften und Struktur.

Über dem Canvas liegt die Werkzeugleiste: die drei Geräte (Web (1280px), Tablet (768px), Mobil (390px)), Rückgängig/Wiederholen, Ebenen, Duplizieren, Löschen, Ausrichten/Verteilen, Vorschau und der Zoom (Vergrößern, Verkleinern und der klickbare Prozentwert für Auf 100 % zurücksetzen).

#Das Raster

Der Canvas ruht auf einem Raster, das die Bildschirme aufgeräumt hält, ohne Sie zu fesseln:

• Waagerecht teilt sich die Seite in 48 Spalten. Position und Breite eines Widgets zählen in Spalten — das ist es, was einen in Web gezeichneten Bildschirm in einem schmaleren Modal proportional bleiben lässt.
• Senkrecht rastet es in Schritten von 8 Pixeln ein; Position und Höhe werden pixelgenau gespeichert.

Beim Ziehen rastet das Widget in der nächstgelegenen Spalte und im nächsten vertikalen Schritt ein. Wenn Sie es genau dort ablegen müssen, wo die Maus steht, halten Sie während des Ziehens die Taste Alt gedrückt — das Einrasten ist ausgeschaltet, solange sie gedrückt ist.

Dieselben Werte lassen sich von Hand schreiben: Bei ausgewähltem Widget zeigt die Kategorie Layout des Inspektors Sp, B (in Spalten), Y und H (in Pixeln).

#Auswählen, verschieben, Größe ändern

• Klick wählt ein Widget aus; Umschalt+Klick fügt zur Auswahl hinzu oder nimmt daraus weg; ein Ziehen aus einer leeren Zone zeichnet einen Auswahlrahmen, der alles einfängt, was er berührt.
• Ziehen Sie ein Widget, um es zu verschieben; ziehen Sie an den Griffen der Ecken und Kanten, um seine Größe zu ändern.
• Die Pfeiltasten verschieben die Auswahl: ←/→ eine Spalte, ↑/↓ ein Pixel — und Umschalt+↑/↓ acht Pixel auf einmal.
• Ein Widget im Container Panel, Tabs oder Feste Leiste abzulegen macht es zum Kind dieses Containers: Es bewegt sich fortan mit ihm, und die Position wird relativ zum Container.

#Intelligente Hilfslinien

Während Sie ziehen oder die Größe ändern, vergleicht der Canvas das bewegte Widget mit seinen Nachbarn und schlägt Einrastungen vor — die Hilfslinien werden im selben Moment gezeichnet:

Hilfslinie	Wann sie erscheint
Ausrichtung	Eine Kante oder die Mitte des Widgets liegt auf einer Höhe mit der Kante/Mitte eines Nachbarn — das Widget klebt sich an diese Linie.
Gleicher Abstand	Sie legen das Widget im selben Abstand ab, in dem zwei Nachbarn schon zueinander stehen — die Reihe bekommt gleichmäßige Abstände.
Gleiche Größe	Beim Größenändern wird die Breite oder die Höhe gleich der eines Nachbarn — es rastet in dieser Größe ein.

Die Ausrichtung gewinnt über den Abstand, und der Abstand gewinnt über das Raster: Wenn Sie sichtbar versuchen, an eine Kante anzudocken, ist es das, was geschieht.

#Ausrichten und verteilen

Mit zwei oder mehr ausgewählten Widgets aktiviert die Werkzeugleiste die Ausrichtungs-Buttons: Links ausrichten, Horizontal zentrieren, Rechts ausrichten, Oben ausrichten, Vertikal zentrieren und Unten ausrichten. Ab drei kommen Horizontal verteilen und Vertikal verteilen dazu, die die Abstände angleichen und dabei das erste und das letzte Widget an ihrem Platz lassen.

Bei mehreren ausgewählten Widgets fasst der Inspektor zusammen: N Widgets ausgewählt — nutzen Sie die Leiste zum Ausrichten/Verteilen.

#Ebenen

Widgets können sich überlappen — eine Beschriftung über einem Bild zum Beispiel. Die Reihenfolge wird in der Werkzeugleiste gesteuert: Ganz nach vorn, Eine Ebene nach vorn, Eine Ebene nach hinten und Ganz nach hinten.

#Anker — an den Rändern festmachen

Standardmäßig bleibt ein Widget dort, wo Sie es abgelegt haben. Die Anker machen Kanten des Widgets an den Rändern der Seite (oder des Containers, in dem es steckt) fest: Wählen Sie ein Widget aus und klicken Sie auf die Nadeln, die in der Mitte jeder Kante erscheinen — Oben verankern, Links verankern, Rechts verankern, Unten verankern.

• Links + rechts zu verankern lässt das Widget mit der Breite der Seite mitwachsen — die klassische Kopfzeile über die volle Breite.
• Unten zu verankern klebt das Widget an den unteren Rand der Seite — eine Button-Leiste, die unten bleibt, wie hoch die Seite auch ist.

#Die Höhe der Seite

Die Seite eines Bildschirms hat je Gerät eine feste Höhe — sie wächst nie von selbst mit dem Inhalt. Der untere Rand des Canvas ist ein Griff: Ziehen Sie ihn, um sie anzupassen (Höhe der Seite — zum Anpassen ziehen). Unterhalb des Inhalts läuft der Hintergrund des Bildschirms weiter (der Hintergrund reicht bis zum Ende des Bildschirms). Geht der Inhalt über die Höhe hinaus, scrollt der Benutzer — außer Sie schalten das ab (siehe die Eigenschaften des Bildschirms).

#Rückgängig, Wiederholen und die Tastenkürzel

Jede Geste — ablegen, verschieben, Größe ändern, eine Eigenschaft ändern, löschen — ist ein Schritt in der Historie. Rückgängig (Strg+Z) und Wiederholen (Strg+Umschalt+Z) stehen in der Leiste; aufeinanderfolgende Tastaturbewegungen verschmelzen zu einem einzigen Schritt, damit das Rückgängig nicht Taste für Taste zurückgehen muss.

Kürzel	Aktion
Strg+Z / Strg+Umschalt+Z (oder Strg+Y)	Rückgängig / Wiederholen
Strg+C / Strg+X / Strg+V	Kopieren / Ausschneiden / Einfügen (die Kopie kommt um eine Spalte versetzt herein)
Strg+D	Die Auswahl duplizieren
Strg+A	Alle Widgets des aktiven Geräts auswählen
Entf oder Rücktaste	Die Auswahl löschen
Esc	Die Auswahl aufheben
Pfeile / Umschalt+↑↓	Die Auswahl verschieben (Spalte für Spalte; 1 px; 8 px)
Strg+Mausrad	Zoom

Auf dem Mac verwenden Sie ⌘, wo Strg steht.

#Automatisches Speichern und Vorschau

Es gibt keinen Speichern-Button: Die Änderungen speichern sich von selbst. Die obere rechte Ecke sagt, wie es steht — Wird gespeichert…, Gespeichert oder Speichern fehlgeschlagen — bitte erneut versuchen, wenn etwas schiefging (es genügt, erneut etwas zu bewegen, damit es wiederholt wird).

Der Button Vorschau speichert, was noch aussteht, und öffnet den Bildschirm in der echten App, in einem neuen Browser-Tab — Sie gehen wie jeder Benutzer durch den Login und sehen den Bildschirm mit echten Daten arbeiten.

#Der Inspektor

Der Inspektor hat zwei Tabs:

• Eigenschaften — alles, was am Ausgewählten bearbeitbar ist.
• Struktur — der Widget-Baum des aktiven Geräts.

#Eigenschaften eines Widgets

Bei ausgewähltem Widget zeigt der Kopf des Inspektors den Typ und die id des Widgets (in Festbreitenschrift) — diese id verwenden Sie im Code der Ereignisse. Die Eigenschaften sind in Kategorien geordnet; jedes Widget zeigt nur die, die es betreffen:

Kategorie	Was sie enthält
Layout	Sp, B, Y, H und die Schalter Sichtbar und Aktiv (ein inaktives Widget wird grau und nimmt keine Interaktion an).
Zugriff	Erfordert die Aktion — eine unter Einstellungen ▸ Berechtigungen deklarierte Aktion; wer sie nicht hat, nutzt das Widget nicht. Unter Ohne die Aktion wählen Sie Ausblenden oder Deaktiviert anzeigen.
Inhalt	Texte, Beschriftungen, Symbole — und die Werte im Satz (siehe unten).
Daten	Die Datenbindung des Widgets (siehe Datastores und Daten).
Verhalten	Funktionsoptionen — Ansichten, Ziehvorgänge, Aktionen beim Klick.
Validierung	Bei den Formularfeldern: Erforderlich, Standardregeln und Skript (siehe Widgets).
Interaktion	Klick-Aktionen von Widgets wie dem Button.
Aussehen	Visueller Stil (siehe unten).
Ereignisse	Die Ereignisse des Widgets (siehe Ereignisse und das SDK).

Manche Widgets haben bearbeitbare innere Elemente — eine Spalte der Tabelle, ein Feld der Auswahlliste, ein Tab der Tabs. Klicken Sie direkt auf dem Canvas auf das Element, um es zu bearbeiten; der Inspektor wechselt zu diesem Element, und der Button zurück zum Widget bringt Sie zurück.

#Aussehen

Die Kategorie Aussehen ist bei (fast) allen Widgets gleich: Hintergrund, Rahmen mit Strich des Rahmens (Durchgezogen, Gestrichelt, Gepunktet), Radius, Padding, Schatten (Kein Schatten, Sanft, Mittel, Stark, Extra) und die Optionen für Text — Farbe, Größe, Stärke, Text ausrichten. Die Farben nehmen die Tokens des Themes der App oder Hex-Werte an — verwenden Sie die Tokens, wann immer es geht, damit das Widget dem Theme folgt.

Widgets mit eigener Kopfzeile (Panels, Tabellen, Diagramme…) ergänzen hier Titel anzeigen und Beschreibung anzeigen, mit den jeweiligen Texten.

#Formatierungsregeln

Ebenfalls unter Aussehen ändern die Formatierungsregeln den Stil anhand der Daten: überfällige Zeilen rot einfärben, einen Button je nach Sitzung ausblenden, ein KPI oberhalb des Ziels grün setzen.

1. Klicken Sie auf Neue Regel.
2. Wählen Sie den Geltungsbereich — Das Widget, Jede Zeile oder Eine Zelle (Zeile/Zelle gibt es nur in Widgets, die Zeilen zeichnen, wie die Tabelle).
3. Fügen Sie unter Wenn Bedingungen hinzu (Feld, Operator, Wert — der Wert kann aus einem Parameter, aus der Sitzung, aus dem Zustand kommen…). Ohne Bedingungen gilt die Regel immer.
4. Wählen Sie unter Dann, was sich ändert: Hintergrund, Farbe des Textes, Fett, Kursiv, Unterstrichen, Ausrichtung, Format oder Ausblenden.

Die Reihenfolge zählt — die letzte zutreffende Regel gewinnt. Der Schalter Aktiv schaltet eine Regel ab, ohne sie zu löschen, damit Sie experimentieren können. Und der Code der Ereignisse hat über die Regeln immer das letzte Wort.

#Werte im Satz

Jeder Text eines Widgets darf Lücken haben: Schreiben Sie {n} in den Text (zum Beispiel „{n} aktive Konten“), und der Abschnitt Werte im Satz erscheint in der Kategorie Inhalt, damit Sie sagen, woher jeder Wert kommt — aus einem Datastore, aus einem Parameter, aus der Sitzung, aus dem Zustand oder aus einem anderen Widget. So bringt man lebendige Zahlen in übersetzbare Sätze, ohne Code zu schreiben.

#Der Tab Struktur

Der Tab Struktur listet alle Widgets des aktiven Geräts als Baum auf (Container mit den Kindern darin). Er dient dazu, das auszuwählen, was verdeckt ist, zu sehen, was ausgeblendet ist (Durch einen übergeordneten Container ausgeblendet), und die Anfangssichtbarkeit jedes Widgets mit dem Auge umzuschalten — Auf diesem Gerät ausblenden / Auf diesem Gerät anzeigen.

#Der Bildschirm und seine Eigenschaften

Klicken Sie auf eine leere Zone des Canvas (oder drücken Sie Esc), und der Inspektor zeigt den Bildschirm selbst:

Abschnitt	Was er festlegt
Bildschirm	Der Name und die Route — der Pfad des Bildschirms in der Adresse der App (Kleinbuchstaben, Zahlen und Bindestriche).
Routen-Parameter	Die Parameter, die der Bildschirm in der Adresse empfängt (z. B. die id des Kontos in /ficha-de-conta/:id). Jeder kann Erforderlich sein; die Reihenfolge stellt man mit Nach oben/Nach unten ein.
Verhalten	Scrollen des Bildschirms — Automatisch oder Kein Scrollen.
Zugriff	Öffentlicher Bildschirm (ohne Sitzung) — der Bildschirm öffnet ohne Login; die Daten kommen ausschließlich aus öffentlichen APIs.
Aussehen	Der Hintergrund der Seite: Farbe, Bild (Assets) und Anpassung (Abdecken, Einpassen, Strecken, Zentrieren, Wiederholen).
Darstellung	Ob der Bildschirm eine normale Seite, ein Modal (zentriert) oder ein Seitenpanel (rechts) ist — im Detail in Ereignisse und das SDK.
Vorlage des Bildschirms	Das zugeordnete Layout — siehe Layouts und Design je Gerät.
Daten	Die Datastores des Bildschirms — siehe Datastores und Daten.
Ereignisse	Die Ereignisse des Bildschirms (onLoad, onParamsChange, onUnload) — siehe Ereignisse und das SDK.

#Warum nicht…?

• Warum kann ich ein Widget nicht verschieben? Wenn es mit einem Schloss erscheint, kommt es aus einem Layout — die Position wird im Layout selbst bearbeitet, nicht im Bildschirm. Siehe Layouts und Design je Gerät.
• Warum rastet das Widget nicht dort ein, wo ich will? Die Hilfslinien und das Raster gewinnen gerade über Ihre Geste — halten Sie Alt, um das Einrasten während des Ziehens abzuschalten.
• Warum ist das Widget vom Canvas verschwunden? Sehen Sie in der Struktur nach: Es kann ausgeblendet sein (Auge), in einem Tab stecken, der nicht aktiv ist, oder hinter einem anderen Widget liegen (nutzen Sie die Ebenen).