Layouts und Design je Gerät
Wiederverwendbare Vorlagen hinter den Bildschirmen, und ein eigenes Design für Web, Tablet und Handy — ohne Vererbung, mit klaren Regeln.
Zwei Dinge auf dieser Seite ähneln sich und sind nicht dasselbe:
- Ein Layout ist ein Design, das von mehreren Bildschirmen geteilt wird — die Kopfzeile, der Rahmen, die Fußzeile, die sich wiederholen. Einmal gebaut, überall verwendet.
- Ein Gerät ist ein Design desselben Bildschirms für eine andere Größe — das Web, das Tablet, das Handy. Jedes ist unabhängig.
Das eine handelt vom Wiederverwenden zwischen Bildschirmen; das andere davon, denselben Bildschirm auf Bildschirmen verschiedener Größen auszuliefern.
Layouts
Ein Layout ist ein Dokument wie ein Bildschirm — es hat Widgets und kann Datastores haben — aber ohne Route, ohne Parameter und ohne Zugriffsregeln. Man navigiert nicht zu einem Layout: Es ist der Hintergrund dessen, der es verwendet.
Ein Layout erstellen
- In der Seitenleiste, Tab UI, Abschnitt Bildschirme.
- Klicken Sie auf den Button Neues Layout, in der Kopfzeile des Abschnitts (oder, im Menü ⋯ eines Ordners, um es dort drinnen zu erstellen).
- Schreiben Sie den Name des Layouts — das Feld schlägt vor z. B. Basis mit Kopfzeile.
- Erstellen.
Das Layout liegt im selben Baum wie die Bildschirme (die Notiz sagt es: Das Layout liegt im Baum der Bildschirme — ziehen Sie es, wohin Sie möchten.), mit eigenem Symbol, und öffnet sofort in einem Tab.
Ein Layout entwerfen
Der Editor ist derselbe wie bei den Bildschirmen — Palette, Canvas, Inspektor, dieselben Gesten und dieselben Tastenkürzel (siehe Der Canvas). Die Unterschiede liegen im Zweck:
| Im Layout | Warum |
|---|---|
Das Badge der Kopfzeile zeigt /layout. |
Ein Layout hat keine Route. |
| Es gibt keine Routen-Parameter, keine Darstellung und keine Ereignisse des Bildschirms. | Nichts davon gehört zum Layout. |
| Statt Vorlage des Bildschirms hat der Inspektor Basis-Vorlage, mit der Zeile Basis. | Ein Layout kann auf einem anderen aufsetzen. |
Nota
Die Widgets eines Layouts haben keine Ereignisse. Das Layout ist Struktur und Aussehen; das Verhalten gehört jedem Bildschirm — und dort wird es geschrieben, auch für die Widgets, die aus dem Layout kommen.
Einen Bildschirm auf ein Layout setzen
- Öffnen Sie den Bildschirm und klicken Sie auf eine leere Zone des Canvas (der Inspektor zeigt nun den Bildschirm).
- Öffnen Sie die Kategorie Vorlage des Bildschirms.
- Wählen Sie in der Zeile Layout das Layout. Um es zu entfernen, wählen Sie — kein Layout —.
Der Hinweis der Kategorie fasst den Vertrag zusammen: Vorlage hinter dem Inhalt: Die Widgets des Layouts erscheinen gesperrt; Eigenschaften und Ereignisse werden pro Bildschirm konfiguriert.
Was sich im Bildschirm ändert
Die Widgets des Layouts erscheinen nun im Canvas des Bildschirms, hinter dessen Inhalt, und mit einem Schloss in der Ecke. Was man mit ihnen tun kann und was nicht, ist eine feste Regel:
| Im Bildschirm, an einem Widget des Layouts | |
|---|---|
| Verschieben, in der Größe ändern, löschen, duplizieren | Nein. Die Position wird im Layout selbst bearbeitet. |
| Eigenschaften ändern (Texte, Farben, Optionen) | Ja — und die Änderung gilt nur für diesen Bildschirm. |
| Sichtbar / Aktiv | Ja, pro Bildschirm. |
| Ereignisse | Ja — das Verhalten gehört immer dem Bildschirm. |
| Zugriff und Werte im Satz | Nein. Sie werden im Layout definiert. |
Der Inspektor sagt Ihnen, in welcher Lage Sie sind: Widget des Layouts: Die Position wird im Layout bearbeitet; Eigenschaften, Sichtbarkeit und Ereignisse gehören zu DIESEM Bildschirm.
Keine „Inhaltszonen"
Es gibt weder Slots noch reservierte Bereiche: Der Inhalt des Bildschirms wird immer über das Layout gezeichnet. Wer das Layout entwirft, lässt den Platz frei, in den die Bildschirme schreiben werden — eine Kopfzeile oben, eine Leiste unten, und die Mitte leer.
Dica
Entwerfen Sie das Layout mit leerem Kern und großzügigem Rand. Ein Layout, das die Mitte besetzt, zwingt alle Bildschirme für immer, ihm auszuweichen.
Kollisionen und Ketten
Zwei Regeln, die die Plattform prüft und deren Bruch sie verweigert:
- Eindeutige Ids und Namen. Ein Bildschirm und sein Layout dürfen weder dieselbe Widget-Id noch denselben Datastore-Namen haben — Kollision mit dem Layout: Die Widget-ID „…“ existiert in beiden. Es gibt keine automatischen Präfixe: Der Name, den Sie gewählt haben, ist der Name, der bleibt.
- Höchstens 3 Ebenen, und keine Schleifen. Ein Layout kann auf einem anderen aufsetzen (Basis-Vorlage), aber die Kette endet bei drei — Die Kette der Layouts überschreitet 3 Ebenen. — und ein Zyklus wird abgelehnt.
Wenn das Layout sich ändert
Der Bildschirm speichert nur, welches Layout es ist, und die Änderungen, die er an dessen Widgets gemacht hat. Das Design wird nicht kopiert — deshalb ändert eine Änderung am Layout alle Bildschirme, die es verwenden, sofort, in der veröffentlichten App.
Zwei praktische Konsequenzen:
- Im Konstruktor aktualisiert sich ein Bildschirm-Tab, der schon offen war, nicht von selbst, wenn Sie das Layout speichern: Schließen und öffnen Sie den Bildschirm erneut, um ihn mit der neuen Version zu sehen.
- Ein Layout zu löschen, das in Gebrauch ist, wird nicht verhindert. Die Bildschirme, die es verwendet haben, öffnen fortan ohne es, mit dem Hinweis Das zugehörige Layout existiert nicht mehr. — sie brechen nicht, bleiben aber ohne den Rahmen.
Design je Gerät
Ein Bildschirm hat drei mögliche Designs, eines pro Gerät:
| Gerät | Referenzbreite |
|---|---|
| Web (1280px) | Computer. |
| Tablet (768px) | Tablet, und schmale Fenster. |
| Mobil (390px) | Handy. |
Umgeschaltet wird mit den drei Buttons links in der Leiste des Designers.
Das Raster ist bei allen dreien dasselbe — 48 Spalten — und was sich ändert, ist die Breite jeder Spalte. Ein Widget mit 24 Spalten belegt auf jedem Gerät die halbe Seite; die Höhe dagegen wird immer in Pixeln gezählt.
Es gibt keine Vererbung
Das ist die Regel, die alles Übrige erklärt: Jedes Gerät hat seinen eigenen Widget-Baum, vollständig und unabhängig. Es gibt kein „im Web verbergen und auf dem Handy zeigen" zwischen Bäumen — was im Baum eines Geräts nicht steht, existiert auf diesem Gerät nicht.
Das Web existiert immer. Tablet und Handy können noch ohne Design sein — in dem Fall liefert die App das Web-Design aus, auf die echte Breite zusammengedrückt. Das ist ein Rückfall beim Ausliefern, keine Vererbung: Beim Bearbeiten bleiben es getrennte Designs.
Das Design eines Geräts beginnen
Wählen Sie Tablet (768px) oder Mobil (390px) auf einem Bildschirm, der sie noch nicht hat, und der Designer zeigt die Karte Dieses Gerät hat noch kein Design, mit der Erklärung — Jedes Gerät hat sein eigenes Design. Solange dieses nicht existiert, liefert die Runtime das Web-Design aus. — und zwei Wegen:
| Button | Was er tut |
|---|---|
| Von Web kopieren | Dupliziert das Web-Design als Ausgangspunkt. Die Ids der Widgets bleiben erhalten (die Datenbindungen und der Code finden sie weiterhin) und die Breiten passen sich an, weil sie in Spalten sind. |
| Leer beginnen | Ein weißes Blatt, um von Grund auf zu entwerfen. |
Die Kopie geschieht einmal. Von da an führen die Designs getrennte Leben: Am Web zu arbeiten ändert nichts am Handy.
Atenção
Solange das Gerät ein Design hat, zeigt die Leiste Design dieses Geräts löschen. Die Bestätigung ist deutlich — Das Design dieses Geräts verschwindet und die Runtime liefert wieder das Web-Design aus. Das lässt sich nicht rückgängig machen. — und so ist es: Für diese Operation gibt es kein Rückgängig.
Widgets auf diesem Gerät ausblenden
Innerhalb eines Geräts hat der Tab Struktur des Inspektors ein Auge an jedem Widget: Auf diesem Gerät ausblenden / Auf diesem Gerät anzeigen. Ein ausgeblendetes Widget bleibt im Baum und bleibt über die Struktur bearbeitbar — es erscheint nur nicht auf dem Bildschirm.
Ist das Ausgeblendete der Container, gehen die Kinder mit ihm — und ihr Auge erklärt es: Durch einen übergeordneten Container ausgeblendet.
Die Höhe der Seite
Die Höhe gilt pro Gerät: Ein Handy kann für denselben Bildschirm eine viel höhere Seite haben als das Web. Ziehen Sie den unteren Rand des Canvas (Höhe der Seite — zum Anpassen ziehen), um sie zu ändern.
Wenn die Seite höher ist als das Gerät, zeichnet der Canvas eine gestrichelte Linie mit der Beschriftung Unterkante des Viewports — dort endet, was man ohne Scrollen sieht. Alles unterhalb dieser Linie erscheint nur dem, der die Seite scrollt.
Was die App ausliefert
In der veröffentlichten App wird das Gerät über die Breite des Fensters gewählt: unter 640 px ist es Handy, unter 1024 px Tablet, darüber Web. Das Fenster zu verkleinern oder zu vergrößern wechselt das ausgelieferte Design, auf der Stelle.
Ohne Design für das erkannte Gerät wird das Web ausgeliefert. In der nativen Mobil-App wird dieser Rückfall angekündigt — Dieser Bildschirm hat kein Design für das Handy — das Web-Design wird gezeigt.
Der Button Vorschau öffnet den Bildschirm in der echten App; um zu sehen, wie er in einer anderen Größe aussieht, ändern Sie die Größe des Browserfensters.
Ereignisse, Ids und Geräte
Da jedes Gerät ein Baum ist, kann dieselbe Widget-Id in allen dreien
existieren — mit Absicht: Sie ist „dasselbe logische Widget in anderer
Größe". Aber jedes hat seine eigenen Eigenschaften und seinen Code: das
onClick des Buttons im Web zu ändern ändert nicht das des Handys.
Denken Sie beim Schreiben von Code (siehe
Ereignisse und das SDK) daran,
dass keplin.widgets.get("...") nur Widgets des gerade laufenden Geräts
findet. Ein Widget, das nur im Web existiert, gibt auf dem Handy einen
Fehler.
Layouts und Geräte, zusammen
Die beiden Dinge kombinieren sich nach derselben Regel: Das Layout wird pro Gerät zusammengesetzt. Ein nur im Web entworfenes Layout erscheint auch in den Tablet- und Handy-Bäumen der Bildschirme, die es verwenden, und liefert dabei sein eigenes Web-Design aus — und ein Layout mit eigenem Handy-Design liefert dieses aus.
Nota
Die Navigationsleiste der App kommt nicht aus dem Layout: Sie wird im Editor der Navigation entworfen, und die App zeichnet sie um den Bildschirm herum. Ein Layout kann eine eigene Leiste haben — aber die ist Inhalt des Bildschirms und kann nicht von allein navigieren.
Wie man sich entscheidet
| Situation | Der Weg |
|---|---|
| Dieselbe Kopfzeile auf 20 Bildschirmen. | Ein Layout. |
| Ein komplexer Bildschirm, der auf dem Handy etwas anderes sein muss. | Ein eigenes Handy-Design. |
| Ein Button, der auf dem Handy keinen Sinn ergibt. | Das Auge der Struktur auf dem Gerät Handy. |
| Ein anderes Menü auf dem Handy. | Der Editor der Navigation, auf dem Gerät Handy. |
| Eine App, die nur am Computer verwendet werden wird. | Entwerfen Sie nur das Web und denken Sie nicht weiter darüber nach. |
Warum nicht…?
- Warum kann ich dieses Widget nicht anfassen? Es hat ein Schloss: Es kommt aus dem Layout. Öffnen Sie das Layout und arbeiten Sie dort — im Bildschirm ändern Sie nur Eigenschaften, Sichtbarkeit und Ereignisse.
- Warum lässt es mich das Layout nicht wählen? Es gibt eine Kollision: Der Bildschirm und das Layout haben dieselbe Widget-Id oder denselben Datastore-Namen. Benennen Sie eines von beiden um.
- Warum zeigt der Bildschirm die Änderungen nicht, die ich am Layout gemacht habe? Der Tab des Bildschirms war offen. Schließen und wieder öffnen.
- Warum zeigt das Handy das Web-Design ganz zusammengequetscht? Dieser Bildschirm hat kein Handy-Design. Wählen Sie Mobil (390px) und verwenden Sie Von Web kopieren oder Leer beginnen.
- Warum habe ich am Web gearbeitet und das Handy hat sich nicht geändert? Weil es unabhängige Designs sind. Die Kopie geschieht nur in dem Moment, in dem Sie das Gerät anlegen.
- Warum ist der Rahmen aller Bildschirme verschwunden? Das Layout wurde gelöscht. Die Bildschirme warnen Das zugehörige Layout existiert nicht mehr. — erstellen Sie es erneut und wählen Sie es wieder unter Vorlage des Bildschirms.