Eine Studio-App zeichnen

Ziel

Einen Bildschirm auf der Zeichenfläche zeichnen und für jedes Objekt angeben, was es ist.

Wo er sich öffnet

Öffnen Sie Ihre Lösung, wählen Sie Studio-Apps, wählen Sie eine App aus und drücken Sie Entwurf. Die Zeichenfläche öffnet sich an Ort und Stelle, unter derselben Brotkrümelnavigation und denselben Auswahlfeldern für Umgebung und Lösung – es ist dieselbe Zeichenfläche, die der Berichts- und der Dashboard-Designer verwenden, also hat sich nichts geändert, was Sie bereits darüber wissen.

Eine App besteht aus mehreren Bildschirmen

Jeder Rahmen, den Sie als den Bildschirm kennzeichnen, ist ein Bildschirm dieser App. Zeichnen Sie einen zweiten neben den ersten, kennzeichnen Sie ihn genauso, und Ihre App hat zwei – auf einer Zeichenfläche, nebeneinander, sodass Sie beide gleichzeitig sehen.

Ein Bildschirm heißt so, wie sein Rahmen heißt. Benennen Sie den Rahmen in der Liste Ebenen um, und Sie haben den Bildschirm umbenannt. Dieser Name ist keine Dekoration: Nach ihm fragt die Navigation, deshalb werden zwei Bildschirme mit demselben Namen beim Speichern abgelehnt, und die Meldung nennt den, der umbenannt werden muss.

Legen Sie fest, mit welchem er öffnet. Sobald eine App zwei Bildschirme hat, erscheint in der Titelleiste ein Auswahlfeld Öffnet mit. Wählen Sie den Bildschirm, auf dem jemand landen soll, der Ihre App aufruft. Bei nur einem Bildschirm gibt es kein Auswahlfeld, weil es nichts zu wählen gibt.

Das Wechseln zwischen ihnen kommt als Nächstes

Zwei Bildschirme zu zeichnen funktioniert heute, ebenso die Wahl, welcher sich öffnet. Was es noch nicht gibt, ist navigate – die Aktion, die jemanden von einem zum anderen bringt – und die Schaltflächen, die sie aufrufen. Das ist der nächste Schritt, und er fehlt bewusst, statt vorhanden und stumm zu sein: Eine Aktion, die nichts tut, ist schlechter als eine, die gar nicht angeboten wird.

Das eine Neue: was ein Objekt ist

Wählen Sie ein Objekt aus und öffnen Sie die Registerkarte Bildschirm neben Grafik. Dort gibt es eine einzige Frage:

Dieses Objekt ist …

Beantworten Sie sie, und Sie haben der Plattform etwas gesagt, das sie nicht selbst herausfinden kann. Ein Textrechteck, das eine Überschrift ist, und ein Textrechteck, das ein Absatz ist, sehen auf der Zeichenfläche gleich aus; nur Sie wissen, welches welches ist, und der Unterschied bestimmt, was ein Screenreader ansagt und wie der fertige Bildschirm aussieht.

Antwort	Verwenden Sie sie für
Der Bildschirm	Den Rahmen, in dem alles andere gezeichnet wird. Seine Größe ist die Größe des Bildschirms.
Ein Bereich	Ein Feld, das andere Dinge gruppiert – eine Kopfleiste, eine Seitenleiste, eine Karte.
Eine Überschrift	Einen Titel.
Ein Absatz	Einen Abschnitt gewöhnlichen Texts.
Eine Liste / Ein Listeneintrag	Eine Liste und einen Eintrag darin.
Eine Schaltfläche	Etwas, das gedrückt werden soll.
Ein Bild	Ein Bild, das etwas bedeutet – im Gegensatz zu Dekoration.
(leer gelassen)	Die Grafik des Bildschirms – gezeichnet, aber ohne Aussage darüber, was der Bildschirm enthält.

Darunter bietet dieselbe Liste Steuerelement an: eine Schaltfläche, ein Textfeld, einen Textbereich, ein Kontrollkästchen, ein Dropdown oder eine Datumsauswahl. Siehe unten – das sind keine Zeichnungen.

Sie werden bemerken, dass sich die Liste mit dem ausgewählten Objekt ändert. Ein Rahmen kann der Bildschirm sein, ein Textobjekt nicht, denn die Größe des Bildschirms ist die Größe des Bildschirms. Eine Linie oder eine Form hat überhaupt keine Antwort, und die Registerkarte sagt das, statt Ihnen einen leeren Bereich zu zeigen.

Beginnen Sie damit, einen Rahmen zu zeichnen und ihn als den Bildschirm zu kennzeichnen. Alles andere kommt hinein, und Objekte in einem Rahmen können an seinen Kanten angeheftet werden, sodass sie folgen, wenn er seine Größe ändert – dasselbe Anheften, das Sie bereits in den anderen beiden Designern verwenden.

Die Größe eines Textabschnitts festlegen

Wählen Sie einen beliebigen Text aus, und sein Abschnitt Text endet mit zwei Schaltflächen:

• Feste Größe – die Standardeinstellung und das, was Text schon immer getan hat. Die Breite bestimmen Sie, und die Wörter brechen darin um. Die Höhe bestimmen Sie auch, und sie ist ein Mindestmaß: Machen Sie das Feld ruhig höher, es wird nie kürzer als die Wörter. (Früher bewegten sich die vertikalen Griffe, und das Feld sprang sofort zurück – deshalb wirkte Text wie das eine Objekt, dessen Größe man nicht ändern konnte.)
• An Text anpassen – das Feld wird genau so groß wie der Text: so breit wie die längste Zeile, die Sie getippt haben, und so hoch wie diese Zeilen. Nichts bricht um, und die Größengriffe verschwinden, weil es für sie nichts mehr zu entscheiden gibt. Drücken Sie Feste Größe, um sie zurückzubekommen.

Einen dritten Modus, in dem ein Feld kürzer als seine Wörter sein darf, gibt es bewusst nicht. Ein Feld, das Ihren Text hinter seiner eigenen Kante versteckt, ist ein Fehler, den Sie nicht sehen können, und ein Mindestmaß gibt Ihnen alles, was „die Größe ändern“ braucht, ohne diesen Fehler.

Wo die Wörter im Feld sitzen

Die Ausrichtungszeile unter Text hat eine zweite Gruppe von drei Schaltflächen: Text oben, Text in der Mitte und Text unten. Sie legt fest, an welcher Kante die Wörter verankert sind, wenn das Feld höher ist als sie.

Die Mitte ist die Standardeinstellung, und genau das braucht eine Beschriftung in einer Schaltfläche – ein Beschriftungsfeld in einer 40 px hohen Schaltfläche ist bewusst höher als seine eine Zeile, und die Zentrierung setzt die Wörter dorthin, wo Sie die Schaltfläche gezeichnet haben.

Wählen Sie oben für alles, was wachsen könnte. Ein zentriertes Feld, das sich als zu klein erweist, läuft in beide Richtungen über, sodass eine Notiz, die auf drei Zeilen umbricht, nach oben über die Beschriftung darüber klettert. Wird sie oben verankert, kann sie nur nach unten wachsen, in Platz, den Sie sehen können. Das ist außerdem das, was die Zeichenfläche schon immer gezeichnet hat, also die eine Einstellung, bei der Zeichnung und Bildschirm genau übereinstimmen.

Um den Bildschirmrahmen später wieder auszuwählen, klicken Sie einmal auf seinen leeren Hintergrund – ein Klick auf einen Rahmen erreicht normalerweise das, was darin gezeichnet ist, und ein einzelner Klick auf eine freie Stelle wählt den Rahmen selbst aus, samt Griffen. Ist keine freie Stelle mehr übrig, verwenden Sie Rechtsklick → Ebene auswählen oder den Bereich Ebenen. Ändern Sie seine Größe durch Ziehen an einem Griff oder durch Eingabe von Breite und Höhe im Inspektor; so oder so folgen die angehefteten Objekte darin.

Auf einem Objekt zeichnen, wenn mehrere übereinanderliegen

Ein Bildschirm mit Registerkarten besteht aus mehreren Bereichen, die im selben Rechteck gezeichnet sind und von denen jeweils einer angezeigt wird. Auf der Zeichenfläche sind sie alle gezeichnet, also lässt sich nur der oberste anklicken, ziehen oder in der Größe ändern – die anderen liegen irgendwo darunter und sind unerreichbar.

Drücken Sie die Zielscheiben-Schaltfläche in der Zeile einer Ebene (neben dem Auge und dem Vorhängeschloss), und alles andere verschwindet von der Zeichenfläche. Zeichnen Sie darauf und drücken Sie sie dann erneut – oder Alles anzeigen im Banner oben in der Liste Ebenen, das dort steht, damit eine halb leer gewordene Zeichenfläche immer sagt, warum.

An Ihrer App ändert das nichts. Das Auge daneben würde den Weg ebenfalls freimachen, aber das Auge ist die Sichtbarkeit der Zeichnung selbst: Eine ausgeblendete Ebene erscheint in Ihrer App überhaupt nicht, also würde das Ausblenden zweier Bereiche, die Sie wieder einzublenden vergessen, einen Bildschirm veröffentlichen, dem zwei Bereiche fehlen. Dies betrifft nur die Zeichenfläche, wird nicht gespeichert und ist weg, wenn Sie den Designer das nächste Mal öffnen.

Die Liste Ebenen hat dasselbe Kontextmenü

Klicken Sie mit der rechten Maustaste auf eine Zeile im Baum Ebenen, und Sie erhalten das Menü, das Ihnen auch die Zeichenfläche gibt: anordnen, gruppieren, maskieren, spiegeln, eine Komponente erstellen, sperren, duplizieren, löschen – alles, angewendet auf diese Zeile.

Es wählt die Zeile zuerst aus, sodass das Menü immer auf das wirkt, worauf Sie gezeigt haben, und nicht auf das, was zufällig vorher ausgewählt war. Ein Untermenü Ebene auswählen gibt es hier nicht: Das dient dazu, einen Klick über gestapelten Formen eindeutig zu machen, und eine Zeile in einem Baum ist bereits ein einzelnes Objekt.

Am nützlichsten ist das genau für die Objekte, bei denen die Zeichenfläche umständlich ist – etwas, das tief in einem Rahmen steckt, hinter etwas anderem liegt oder aus der Ansicht gescrollt ist. Suchen Sie es im Baum und bearbeiten Sie es dort.

Tasten für die Ansicht und die Formen

• Zoomen mit Strg+= und Strg+- (⌘ auf dem Mac) oder mit Strg und dem Mausrad. Strg+0 kehrt zu 100 % zurück.
• Umschalt+1 zeigt alles auf der Zeichenfläche. Umschalt+2 füllt das Fenster mit der Auswahl.
• Verschieben mit dem Mausrad (Umschalt für seitwärts), mit gedrückter Leertaste und Ziehen oder mit dem Werkzeug Hand (H).
• Die Pfeiltasten bewegen die Auswahl um ein Pixel, mit Umschalt um zehn. Jeder Druck ist ein Rückgängig-Schritt.
• Eine gerade gezeichnete Form ist ausgewählt, und das Werkzeug Auswählen ist wieder aktiv, sodass Sie sie sofort färben und benennen können.
• Eine eingegebene Drehung dreht die Form um ihre Mitte, wie der Drehgriff.
• Beim Ziehen richten Hilfslinien Kanten und Mitten an dem aus, was auf dem Bildschirm ist. Halten Sie Alt gedrückt, um frei zu platzieren.
• Mit dem Textwerkzeug klicken und tippen. Der neue Text ist ausgewählt und sein Platzhalter markiert, sodass die erste Taste ihn ersetzt.
• Ein Klick auf eine Form in einer Gruppe wählt die ganze Gruppe. Mit Doppelklick erreichen Sie die einzelne Form.
• Vereinigen, Subtrahieren, Schnittmenge und Ausschließen legen das Ergebnis dorthin, wo die untere Form war: in denselben Rahmen, unter ihrem Namen, mit runden Ecken, wenn sie welche hatte.
• Strg+D auf etwas in einem Auto-Layout setzt die Kopie direkt dahinter, in die Reihe.

Voraussetzungen

• Der Bildschirm existiert – siehe Eine Studio-App erstellen.

Schritte

1. Öffnen Sie Ihre Lösung, wählen Sie Bildschirme, wählen Sie einen aus und drücken Sie Entwurf.
2. Zeichnen Sie einen Rahmen. Öffnen Sie bei ausgewähltem Rahmen die Registerkarte Bildschirm und setzen Sie Dieses Objekt ist auf Der Bildschirm.
3. Zeichnen Sie darin: Rahmen für die Bereiche, Text für die Überschriften und den Fließtext, Bilder dort, wo Sie Bilder möchten.
4. Wählen Sie jedes davon aus und geben Sie an, was es ist. Lassen Sie die rein dekorativen leer.
5. Drücken Sie Vorschau, um den Bildschirm so zu sehen, wie ein Benutzer ihn sieht.
6. Drücken Sie Speichern.

Wenn Sie den Bildschirm erneut öffnen, ist Ihre Zeichnung genau so wieder da, wie Sie sie verlassen haben.

Die Vorschau zeigt Ihnen das Echte

Vorschau ersetzt die Zeichenfläche durch den Bildschirm selbst – kein Bild davon und nicht die Zeichenfläche mit ausgeschalteten Hilfslinien. Es ist dieselbe Komponente, die die Plattform-Shell einbindet, also sehen Sie, was ein Benutzer bekommt. Markieren Sie darin Text, und Sie werden feststellen, dass er sich markieren lässt; drücken Sie Strg+F, und der Browser findet ihn.

Drücken Sie Entwurf, um zurückzukehren. Die Vorschau zeigt immer, was jetzt auf der Zeichenfläche ist, einschließlich Änderungen, die Sie noch nicht gespeichert haben.

Was Speichern tatsächlich tut

Speichern legt zwei Dinge ab: Ihre Zeichnung und den Bildschirm, kompiliert zu gewöhnlichen Web-Elementen. Eine Überschrift wird zu einer echten Überschrift, ein Absatz zu einem echten Absatz, eine Schaltfläche zu einer echten Schaltfläche. Das macht den Text markierbar und durchsuchbar, gibt der Schaltfläche einen Fokusrahmen und lässt einen Screenreader die Seite richtig ansagen – nichts davon kann eine Zeichnung allein.

Ihre Antworten in der Liste Dieses Objekt ist sind also keine Etiketten. Sie entscheiden, was jedes Objekt wird.

Daraus folgen zwei Dinge, die man wissen sollte:

• Ihr Bildschirm wird für persische und arabische Leser gespiegelt. Alles, was Sie links angeheftet haben, erscheint rechts, und links ausgerichteter Text richtet sich an der Leserichtung aus. Sie müssen ihn nicht zweimal zeichnen.
• Größenänderungen kosten nichts. Wird ein Objekt an beiden Kanten angeheftet, dehnt es sich; wird es unten angeheftet, bleibt es dort – das erledigt der Browser selbst, sodass ein Bildschirm flüssig bleibt, wie auch immer seine Größe geändert wird. Wird er schmal genug, scrollt die Seite, statt zu schrumpfen: Ein Bildschirm ist etwas, das Menschen lesen und in das sie tippen, und Schrumpfen erzeugt Text, den niemand lesen kann.

Wenn Speichern Ihnen etwas mitteilt

Speichern kann mit einem Hinweis zurückkommen. Keiner davon verhindert das Speichern:

• Kein Objekt ist als der Bildschirm gekennzeichnet – stattdessen wurde die ganze Zeichnung verwendet. Kennzeichnen Sie einen Rahmen als den Bildschirm, damit die Objekte darin etwas haben, an dem sie angeheftet werden können.
• Ein weiteres Objekt ist ebenfalls als der Bildschirm gekennzeichnet – nur das erste wird verwendet; die übrigen wurden zu gewöhnlichen Feldern.
• Eine Schaltfläche enthält keinen Text – ein Screenreader hat nichts anzusagen. Zeichnen Sie ein Textobjekt in die Schaltfläche.
• Für ein Steuerelement wurde ein Zustand gezeichnet – er wurde nicht verwendet. Ein Steuerelement weiß bereits, wie es aussieht, wenn darauf gezeigt wird, wenn es gedrückt wird, den Fokus hat oder deaktiviert ist.

Wenn Sie ein echtes Steuerelement möchten, keine Zeichnung davon

Zeichnen Sie ein Feld und wählen Sie auf der Registerkarte Bildschirm statt eines Elements einen der Einträge unter Steuerelement. Was auf dem fertigen Bildschirm erscheint, ist das eigene Steuerelement der Plattform – dieselbe Datumsauswahl, die die Datensatzformulare verwenden, dasselbe Textfeld, dieselbe Schaltfläche.

Das ist wichtiger, als es klingt. Ein Rechteck, das wie ein Datumsfeld aussieht, hat keinen Kalender. Ein Rechteck, das wie ein Textfeld aussieht, hat keine Einfügemarke, keine Markierung, kein automatisches Ausfüllen und kein Tastaturverhalten. Und wenn ein persischer Benutzer Ihren Bildschirm öffnet, zeigt die echte Datumsauswahl einen Jalali-Kalender – ohne dass Sie etwas tun müssen, weil er nie neu gezeichnet wurde.

Was Ihnen bleibt, und was der Plattform gehört. Wo Sie es gezeichnet haben, wie groß es ist und wie Sie es eingefärbt haben, gehört Ihnen – die Füllung, der Rahmen, der Eckenradius sowie Farbe und Stärke der Wörter darin. Der Plattform gehört alles, was eine Zeichnung nicht ausdrücken kann: die Einfügemarke, der Kalender, die Ziffern, das Tastaturverhalten und der Fokusrahmen, den Sie nicht übermalt haben.

Was Sie nicht anrühren, bleibt der Plattform, und das ist der Sinn der Sache, keine Einschränkung. Ein Steuerelement, das Sie nie eingefärbt haben, sieht genau aus wie jedes andere Steuerelement im Produkt und folgt dem Design, wenn es sich ändert. Färben Sie nur den Rahmen, und nur der Rahmen gehört Ihnen.

Färben Sie mit einem Token, nicht mit einer Farbe

Wählen Sie ein Farbfeld aus der Token-Zeile unter der Füllung, statt einen Hexwert einzugeben. Primary ist die Akzentfarbe des Mandanten im hellen und im dunklen Modus; ein Hexwert stimmt nur in einem davon. Ein Steuerelement, das aus der Palette Steuerelemente gezogen wird, kommt bereits mit Tokens eingefärbt an, weshalb es in beiden richtig aussieht.

Schreiben Sie die Beschriftung in das Feld. Die Wörter, die Sie hineinzeichnen, werden zur Beschriftung einer Schaltfläche, zur Bezeichnung eines Kontrollkästchens oder zum ausgegrauten Platzhalter in einem Textfeld – es gibt kein separates Feld zum Ausfüllen.

Dinge, die Sie eintippen statt zeichnen:

• Optionen, bei einem Dropdown, eine pro Zeile. Das ist das eine an einem Steuerelement, das Sie nicht zeichnen können: Ein geschlossenes Dropdown zeigt einen Wert und nie die Liste.
• Nimmt, bei einem Textfeld – welche Art von Wert es enthält: Text, Ein Kennwort, Eine E-Mail-Adresse, Eine Zahl, Eine Telefonnummer, Eine Webadresse. Das ist keine Dekoration: Ein Kennwortfeld verbirgt, was eingegeben wird, und bringt den Anzeigeschalter der Plattform mit; ein Feld für E-Mail- oder Webadressen ruft auf einem Telefon die passende Tastatur auf, ein Zahlenfeld einen Ziffernblock.
• Schreibgeschützt, bei einem Textfeld oder Textbereich – der Inhalt kann gelesen, markiert und kopiert, aber nicht geändert werden. Das ist etwas anderes als Deaktiviert, das es bei jedem Steuerelement gibt und bedeutet, dass das Steuerelement für diesen Benutzer gar nicht bestimmt ist: Ein deaktiviertes Steuerelement wird von der Tastatur und von einem Screenreader übersprungen, ein schreibgeschütztes nicht.
• Höchstens Zeichen, bei einem Textfeld oder Textbereich – der Browser beendet die Eingabe bei dieser Länge.
• Nimmt, bei einer Dateiauswahl – Beliebige Datei oder Ein Bild. Das entscheidet zwei Dinge auf einmal: was der Dateidialog anbietet und ob das Ausgewählte als Bild angezeigt wird.
• Wählt, bei einer Datumsauswahl – Ein Datum, Ein Datum und eine Uhrzeit oder Eine Uhrzeit.
• Kalender, bei einer Datumsauswahl – Einstellung des Mandanten, Gregorianisch oder Persisch. Lassen Sie ihn auf der ersten Option, es sei denn, der Kalender ist eine Eigenschaft der Daten statt des Lesers: Ein Ablaufdatum eines Reisepasses ist für alle gregorianisch, während „das Datum, an dem dies genehmigt wurde“ in dem Kalender angezeigt werden sollte, den die lesende Person verwendet.

Eine Dateiauswahl hält die Datei; ein Handler speichert sie

Binden Sie Wert an ein Zustandsfeld, und die gewählte Datei landet darin. Ein Text, der an dasselbe Feld gebunden ist, zeigt den Namen der Datei. Um die Datei zu behalten, übergeben Sie das Feld an createRecord oder updateRecord als Wert eines Datei- oder Bild-Felds — updateRecord("contact", id, { new_photo: getState("photo") }) — und sie wird mit dem Datensatz gespeichert. Bis ein Handler das tut, bleibt die Datei in der Seite und ist weg, wenn Sie den Bildschirm verlassen. Eine Datei über 4 MB wird schon in der Auswahl abgelehnt, bevor sie gelesen wird.

Hinweis

Wenn Sie Aktiviert an einen Ausdruck gebunden haben, ist das Häkchen Deaktiviert ausgegraut und sagt, warum: Der Ausdruck beantwortet bereits, wann das Steuerelement verwendet werden darf, und ein Häkchen daneben wäre eine zweite Antwort. Binden Sie enabled oder setzen Sie das Häkchen Deaktiviert, nicht beides.

Auch Steuerelemente nehmen gezeichnete Zustände an. Zeichnen Sie das Steuerelement, duplizieren Sie es, ändern Sie die Farben der Kopie und kennzeichnen Sie die Kopie als invalid – genau wie bei einem Feld, das Sie gezeichnet haben. Übertragen wird der Unterschied, und er landet auf dem Steuerelement selbst. Wie ein Zustand deklariert wird, lesen Sie unter Einen Entwurf mit Komponenten wiederverwenden.

Was verwenden Sie also? Zeichnen Sie es, wenn es auf das Aussehen ankommt – eine Handlungsaufforderung in Ihren eigenen Farben, mit einem Hover, den Sie gezeichnet haben. Wählen Sie ein Steuerelement, wenn es auf das Verhalten ankommt: einen Kalender, eine Einfügemarke, eine Tastatur.

Eine „Gefahren-Schaltfläche“ erstellen

Es gibt kein Dropdown Aussehen, und es braucht auch keines. So erhalten Sie eine rote Schaltfläche:

1. Ziehen Sie eine Schaltfläche aus der Palette Steuerelemente.
2. Setzen Sie ihre Füllung auf das Token Fehler und die Farbe der Beschriftung auf Weiß.
3. Wählen Sie sie aus und drücken Sie Komponente erstellen – die Schaltfläche selbst wird zur Komponente. Benennen Sie die Ebene in Danger button um, und die Komponente wird mit umbenannt.

Jetzt steht sie in der Liste Komponenten, und jeder Bildschirm, der eine platziert, bekommt dieselbe rote Schaltfläche. Sie möchten einen Hover? Fügen Sie der Komponente einen Zustand hinzu und zeichnen Sie die Kopie dunkler. Sie möchten auch eine Erfolg-Schaltfläche? Machen Sie dasselbe noch einmal – das ist eine Geste, die Sie bereits kennen, statt eines fünften Eintrags in einem Dropdown, den jemand für Sie hinzufügen müsste.

Irgendwohin verlinken

Wählen Sie ein Feld oder einen Textabschnitt aus und wählen Sie auf der Registerkarte Bildschirm Ein Link. Es folgen zwei Felder:

• Adresse – wohin er führt: https://example.com/docs, mailto:someone@example.com, tel:+441234567890 oder ein Pfad innerhalb dieser App wie /reports/monthly.
• Öffnet – In diesem Fenster (der Normalfall) oder In einem neuen Tab.

Um zu einem anderen Bildschirm dieser App zu gehen, geben Sie seinen Namen ein: Contacts. Der Link führt zu diesem Bildschirm, wo immer die App geöffnet wird, allein oder in einer modellgesteuerten App, deren Adressen für denselben Bildschirm anders lauten. Ein Klick wechselt innerhalb der App, ohne die Seite neu zu laden, und ein Mittelklick öffnet den Bildschirm weiterhin in einem neuen Tab.

Warum das ein Link ist und keine Schaltfläche mit einem Handler. Ein Mittelklick darauf öffnet einen Tab. Ein Rechtsklick bietet Link in neuem Tab öffnen und Linkadresse kopieren an. Beim Darüberfahren zeigt die Statusleiste des Browsers das Ziel. Ein Screenreader kann alle Links auf dem Bildschirm auflisten und Ihren darunter vorlesen. Nichts davon kommt von einem Handler – alles kommt daher, dass das Element ein echter Link ist, und genau deshalb ist das etwas, das Sie kennzeichnen, statt etwas, das Sie skripten.

Wenn das Ziel berechnet wird, binden Sie Adresse, statt sie einzutippen – "https://example.com/" + state.topic. Die Bindung hat Vorrang, und der Bereich graut das Feld aus und sagt das. Siehe Einen Bildschirm reagieren lassen.

Manche Adressen werden abgelehnt, und der Bereich wird rot, während Sie eine eintippen: Erlaubt sind nur Webadressen (http, https), E-Mail-Adressen, Telefonnummern und Pfade innerhalb dieser App. Ein Link, der ein Skript ausführt, ist kein Link, und ein Bildschirm kann aus einem Import stammen statt aus Ihren eigenen Händen.

Tipp

Wenn der Bildschirm entscheidet, wohin es geht – nach einem Speichern oder abhängig davon, was jemand ausgewählt hat –, verwenden Sie stattdessen openUrl("…") in einem Handler. Es gilt dieselbe Regel für Adressen; siehe Einen Bildschirm reagieren lassen.

Zeichnen, wie es aussieht, wenn darauf gezeigt wird

Zustände gehören zu einer Komponente. Wählen Sie aus, was einen Zustand bekommen soll, klicken Sie mit der rechten Maustaste darauf und wählen Sie Komponente erstellen – fügen Sie dann seine Zustände an der Komponente hinzu, wo sie zusammen aufgeführt sind. Die vollständige Anleitung: Einen Entwurf mit Komponenten wiederverwenden.

Das ist ein Ort statt zweier. Früher gab es auf dieser Registerkarte auch ein Feld Zustand zeichnen, das nach einem Namen und einer Interaktion fragte, bevor Sie irgendetwas gezeichnet hatten, und auf Objekten saß, die keine Liste von Zuständen hatten, zu der man etwas hinzufügen konnte; die Registerkarte Bildschirm sagt jetzt stattdessen, wo Zustände leben.

Eine Komponente mit einer einzigen Instanz ist eine völlig gute Komponente. Wenn Sie nur einen Hover auf einer Schaltfläche möchten, machen Sie sie zu einer Komponente und geben Sie ihr den Zustand – das ist der Preis, und es ist zugleich das, was es Ihnen erlaubt, diese Schaltfläche morgen zweimal zu platzieren.

Was der Name eines Zustands ist, und was Während ist

Ein Zustand hat zwei Hälften, und Sie geben sie an zwei Stellen an:

• Der Name gehört Ihnen – invalid, overBudget, awaitingApproval. Ausgewählt, Angehakt, Ungültig, Erfolg, Warnung, Wird geladen und Schreibgeschützt sind nur Vorschläge.
• Während – im eigenen Bereich der Variante: Immer oder Hover, Gedrückt, Fokussiert. Diese drei gehören dem Browser, deshalb sind sie die, die Sie nicht erfinden können.

Hinweis

Deaktiviert ist ein Name, kein Während. Früher stand es in diesem Auswahlfeld, und dort gehört es nicht hin: Hover, Gedrückt und Fokussiert sind Dinge, die jemand tut, und jedes endet in dem Moment, in dem er damit aufhört. Deaktiviert ist das, was das Steuerelement ist – Ihr Bildschirm hat es so entschieden –, also ist es ein Zustandsname wie jeder andere, eingegeben als disabled.

Sie müssen nicht angeben, wann er aktiv ist. Der Bildschirm weiß es bereits, aus dem Häkchen Deaktiviert des Steuerelements oder seinem Ausdruck Aktiviert, und schaltet den Zustand für Sie ein. Zeichnen Sie eine Variante, nennen Sie sie disabled, und ein Steuerelement, das nicht verwendet werden darf, trägt sie.

Setzen Sie beides, und Sie haben eine Kombination – Ungültig, während darauf gezeigt wird. Sie müssen nie jede Kombination zeichnen: Zeigt ein Benutzer auf etwas im Zustand Ungültig und Sie haben nur Ungültig gezeichnet, bekommt er Ungültig.

Verwenden Sie Buchstaben, Ziffern, - und _, beginnend mit einem Buchstaben. Ein Name, der kein Zustand sein könnte, graut die Schaltfläche aus und sagt das, statt Sie vier davon zeichnen zu lassen und erst beim Speichern auf die Ablehnung stoßen zu lassen.

Drei Dinge, die man wissen sollte:

• Nur die Unterschiede werden gespeichert. Ändern Sie den Hintergrund der Kopie, wird nur der Hintergrund gespeichert. Eine Größenänderung am Original oder eine Änderung seiner Beschriftung muss also nicht in jedem Zustand wiederholt werden – und genau das verhindert eine Schaltfläche, die springt, wenn Sie darauf zeigen.
• Verschieben Sie die Kopie, wohin Sie möchten. Wo die Kopie auf der Zeichenfläche liegt, gehört nicht zum Zustand; sie liegt nur irgendwo, damit man sie ansehen kann.
• Aber etwas innerhalb der Kopie zu verschieben, gehört dazu. Schieben Sie in der Kopie den Knopf eines Schalters ans andere Ende seiner Schiene, und der Knopf des Schalters gleitet, wenn der Zustand aktiv wird – er bewegt sich weich hinüber, statt zu springen. So zeichnen Sie einen Schalter, einen Stepper oder eine wandernde Hervorhebung. Auch eine Größenänderung innerhalb der Kopie zählt, und sie springt, statt weich überzugehen: Ein wachsendes Feld ordnet seine Umgebung neu an, und das zu animieren lässt einen Bildschirm ruckeln.
• Nichts wird ausgeführt. Der Browser erledigt alles, sodass ein Bildschirm mit fünfzig Hover-Zuständen genauso schnell ist wie einer ohne.

Fügen Sie in der Kopie ein Objekt hinzu oder entfernen Sie eines, funktioniert der Zustand nicht mehr, und Speichern sagt das und nennt ihn. Ein Zustand muss dieselbe Struktur haben wie das, was er spiegelt. Um beim Daraufzeigen etwas zusätzlich anzuzeigen, zeichnen Sie es im Original, blenden Sie es dort aus und machen Sie es im Zustand sichtbar – ausgeblendet und sichtbar ist ein Unterschied im Aussehen, und das kann ein Zustand.

Ein Symbol darauf setzen

Komponenten → Symbol… öffnet die eigene Symbolauswahl der Plattform – den gesamten Lucide-Satz, durchsuchbar danach, was ein Symbol bedeutet, statt nach seinem genauen Namen. Wählen Sie eines aus, und es landet auf der Zeichenfläche.

Was dort landet, ist ein gewöhnliches gezeichnetes Objekt, keine besondere Art von Ding:

• Es wird mit denselben Füllungen eingefärbt wie alles andere; geben Sie ihm also ein Design-Token, und es folgt dem hellen/dunklen Modus des Lesers.
• Es nimmt gezeichnete Zustände an und kann daher beim Hover zusammen mit der Karte, in der es sitzt, die Farbe wechseln.
• Es kann Angezeigt binden – so trägt eine Schaltfläche zwei Glyphen und zeigt die passende: Die Farbmodus-Schaltfläche des Beispiels zeichnet einen Mond und eine Sonne und zeigt jeweils das, was der Modus nicht ist.

Es kommt als Kontur statt als Füllung an, eingefärbt mit color.text, 24 mal 24. Ändern Sie seine Größe, färben Sie es um, legen Sie es in eine Schaltfläche neben die Beschriftung. Danach ist nichts mehr Besonderes daran.

Eine Schaltfläche, die nur ein Symbol enthält, wird abgelehnt. Speichern warnt, sie enthält keinen Text, ein Screenreader hat also nichts anzusagen – setzen Sie die Wörter neben die Glyphe, wie es das Steuerelement Dark mode im Beispiel Support desk tut. Das ist auch das freundlichere Steuerelement: Nicht jeder hat gelernt, dass ein Mond „dunkel“ bedeutet.

Die Zeile lässt sich nur anklicken und nicht ziehen, denn ein Ziehvorgang muss wissen, was er trägt, und dieser würde einen Dialog tragen.

Das falsche gewählt? Tauschen Sie es aus

Wählen Sie das Symbol aus, und der Eigenschaftenbereich zeigt unter seinem Namen ein Feld Symbol mit derselben Auswahl darin. Wählen Sie ein anderes, und nur die Zeichnung wird ersetzt – Größe, Farbe, Zustände und Bindungen bleiben genau so, wie Sie sie eingestellt haben.

Genau deshalb tauscht man es dort aus, statt es zu löschen und ein neues zu platzieren: Ein frisches Symbol kommt mit 24 mal 24 in color.text an und weiß nichts von der Schaltfläche, in die Sie es gelegt hatten.

Ein Symbol, das Sie selbst mit dem Zeichenstift gezeichnet haben, hat kein Feld Symbol, und das ist richtig so: Dahinter steht kein Name, der sich austauschen ließe, und das Einzige, was eine Auswahl tun könnte, wäre, Ihre Zeichnung wegzuwerfen.

Ein Symbol in eine Schaltfläche setzen

Wählen Sie eine Schaltfläche aus, und das Eigenschaftenfeld zeigt ein Feld Symbol der Schaltfläche mit derselben Auswahl. Wählen Sie ein Symbol, und es wird in die Schaltfläche gezeichnet: in der Mitte, wenn sie keinen Text hat, sonst vor dem Text, halb so hoch wie die Schaltfläche und an seinem Platz, wenn sie in der Größe geändert wird. Wählen Sie ein anderes, um es zu tauschen, oder leeren Sie das Feld, um es zu entfernen.

Eine Liste, eine Tabelle oder ein Menü: die Zeilen einfärben

Zeichnen Sie ein Feld, legen Sie die Zeilen hinein, und die Felder unter Zeilen des Feldes färben sie ein – über das hinaus, als was Sie jede Zeile gezeichnet haben. Es sind vier:

• Jede zweite Zeile – das Zebramuster. Die erste Zeile behält, was Sie gezeichnet haben, sodass das, was Sie beim Zeichnen sehen, das Aussehen von Zeile eins ist.

• Zeile unter dem Mauszeiger – die Hervorhebung, die der Maus eine Liste hinunter folgt. Sie kostet nichts: Der Browser erledigt das, sodass eine Tabelle mit zweihundert Zeilen genauso schnell ist wie eine leere.

• Gewählte Zeile – die Zeile, die jemand ausgewählt hat. Wie eine Zeile angibt, dass sie die gewählte ist, lesen Sie weiter unten.

• Rand der gewählten Zeile – ein Balken an derselben Zeile, und Der Balken verläuft gibt an, an welcher Kante:

  • Entlang der vorderen Kante – links im Deutschen, rechts im Persischen und Arabischen, ohne dass Sie etwas zweimal einstellen müssen. Das, was eine Navigationsleiste braucht.
  • Unter der Zeile, wie ein Reiter – das, was eine Reiterleiste braucht, denn so wird ein gewählter Reiter in jedem Produkt markiert, das es gibt. Eine Reiterreihe verläuft waagerecht, also wäre ein Balken links am ersten Reiter ein Steuerelement, das niemand erkennt.

  Standardmäßig ist er in der Akzentfarbe, denn in einer ruhigen Liste sind eine gewählte Zeile und eine Zeile unter dem Mauszeiger zwei Schattierungen desselben Graus, und der Balken sagt auf einen Blick Sie sind hier.

Wo zwei Farben dieselbe Zeile einfärben würden, gewinnt die spätere in dieser Liste: Der Mauszeiger überdeckt das Zebramuster, und die gewählte Zeile behält ihre eigene Farbe auch unter dem Mauszeiger. Eine gewählte Zeile genau dann ungewählt aussehen zu lassen, wenn jemand nach ihr greift, wäre schlechter, als dass die Hervorhebung für eine Zeile verstummt. Der Rand ist keine Farbe der Zeile und nimmt an diesem Wettstreit nicht teil – er wird zusätzlich zu dem gezeichnet, was gewonnen hat, und verschiebt nichts an der Zeile, sodass nichts seitlich springt, wenn sich die Auswahl bewegt.

Tipp

Zeichnen Sie den Balken nicht. Ein Rechteck neben einem Eintrag kann sich nicht bewegen, sodass beim Drücken eines anderen Eintrags der Balken bleibt, wo er war – das ist ein Bild einer Auswahl statt einer Auswahl. Setzen Sie Rand der gewählten Zeile, und er folgt derselben Antwort wie die Füllung.

Sie gelten für die Felder direkt in dem Feld, bei dem Sie sie einstellen, und nicht tiefer – eine Liste von Karten streift also die Karten, nicht die Felder in jeder Karte.

Wählen Sie, wo immer es geht, eine Designfarbe statt einer eigenen Farbe. Ein Grau, das Sie aufgenommen haben, stimmt im hellen Modus und ist im dunklen falsch, und zwar unsichtbar falsch: Die Zeichnung sieht immer noch aus wie die Zeichnung eines hellen Bildschirms.

Wenn es mehr Zeilen gibt, als das Feld hoch ist

Ein Feld, das Sie für sechs Zeilen gezeichnet haben, enthält hundert, sobald eine echte Tabelle dahintersteht, also muss jede Liste diese Frage beantworten. Das Dropdown Inhalt, der nicht passt des Rahmens ist die Stelle dafür:

• Anzeigen — er ragt heraus ist das, was eine Zeichnung tut, und richtig für eine Karte mit Schatten. Bei einer Liste lässt es die Zeilen über die Seitennavigation und alles darunter laufen.
• Ausblenden schneidet sie ab. Die siebte Zeile ist dann unerreichbar, was selten jemand so gemeint hat.
• Scrollen ist die Antwort für eine Liste: Das Feld bleibt so groß, wie Sie es gezeichnet haben, und sein Inhalt scrollt darin. Eine Liste, die kurz genug ist, zeigt gar keine Bildlaufleiste.

Geben Sie dann an, in welche Richtung gescrollt wird. Ein zweites Dropdown, Scrollrichtung, erscheint, sobald Sie Scrollen gewählt haben:

• Beide Richtungen ist das, was eine Liste braucht.
• Nach unten — Text bricht um ist das, was eine Textspalte braucht. Die Achse, in die Sie nicht scrollen, wird abgeschnitten, und das Abschneiden der Waagerechten ist genau das, was einen Absatz umbrechen lässt, statt ihn über den Rand des Feldes laufen zu lassen. Greifen Sie dazu, wann immer das Feld ein langes Textfeld enthält.
• Seitlich — Zeilen bleiben einzeilig ist das, was eine breite Tabelle mit Spalten braucht, damit eine Zeile eine Zeile bleibt.

Ein langes Textfeld ist ein Rahmen, den Sie um den Text zeichnen

Das Dropdown gehört zu einem Rahmen. Ein Textabschnitt hat nichts Eigenes, woran er abgeschnitten werden könnte, denn er wächst mit seinen Wörtern – zeichnen Sie also einen Rahmen in der Größe, die die Notiz einnehmen soll, legen Sie den Text hinein und stellen Sie diesen Rahmen auf Scrollen und Nach unten — Text bricht um.

Wie viel Sie auf einmal sehen, hängt davon ab, wie groß Sie den Rahmen gezeichnet haben. Das Textobjekt höher zu machen, ändert nichts Sichtbares, denn der Rahmen bestimmt den sichtbaren Ausschnitt. Der Detaildialog des Beispiels Support desk ist genau das, über einem Notizfeld mit zweitausend Zeichen.

Zwei Dinge, die sich gleichzeitig lohnen:

• Heften Sie das Feld oben und unten an, unter Beschränkungen, damit ein höheres Fenster mehr Zeilen zeigt statt mehr leeren Platz darunter.
• Lassen Sie die Kopfzeile außerhalb des Feldes. Eine Kopfzeile, die als erste Zeile der Liste gezeichnet ist, scrollt mit den Zeilen weg; als separater Rahmen darüber gezeichnet, bleibt sie stehen. Das Board des Beispiels Support desk macht genau das.

Eine Zeile zeichnen, eine pro Datensatz erhalten

Die Zeilen einer Tabelle sind nicht zwanzig Felder, die Sie gezeichnet haben. Zeichnen Sie eine, und geben Sie an, worüber sie sich wiederholt:

1. Laden Sie die Datensätze. Schreiben Sie im Handler Bildschirm wird geöffnet des Bildschirms loadRecords("par_account", "accounts") – den Namen der Tabelle und ein Zustandsfeld, in das die Zeilen kommen. Ein drittes Argument gibt an, wie viele höchstens, oder stellt eine vollständigere Frage: { top: 20, where: { par_status: "Open" }, orderBy: "par_name" }. Siehe Datensätze lesen und schreiben.
2. Geben Sie an, was sich wiederholt. Wählen Sie die gezeichnete Zeile aus und tragen Sie unter Eines davon pro state.accounts ein.
3. Geben Sie an, was jede Zelle zeigt. Binden Sie eine Beschriftung in der Zeile an row.par_name – row ist dieser Datensatz. rowIndex ist seine Position, von null an gezählt.

Zwei Dinge zum Feld um die Zeile herum:

• Es muss seine Kinder stapeln – schalten Sie Auto-Layout ein. Jede Kopie eines Feldes, das Sie platziert haben, behält die Position, an der Sie es platziert haben, also würden alle vierzig auf der ersten landen. Speichern sagt es Ihnen, wenn Sie es vergessen.
• Alles andere in diesem Feld bleibt unberührt. Eine Kopfzeile, die über dem Inhalt gezeichnet ist, wiederholt sich nicht, denn die Wiederholung liegt auf der Zeile, nicht auf dem Feld.

Sie können ein Steuerelement genauso leicht wiederholen wie ein Feld – ein Kontrollkästchen pro Zeile ist die Art, wie jemand mehrere Datensätze auswählt, und es ist ein gewöhnliches Kontrollkästchen mit row.id im Handler.

Eine Grenze, die Sie kennen sollten, bevor Sie darauf stoßen: Eine Wiederholung kann nicht in einer Wiederholung liegen. row würde an derselben Stelle zwei verschiedene Dinge bedeuten, daher lehnt Speichern die innere ab und sagt, welche.

Welche Zeile die gewählte ist

Zwei Hälften, und keine ist länger als eine Zeile:

1. Geben Sie an, welche – binden Sie die Eigenschaft Gewählt jeder Zeile an einen Vergleich, etwa row.id == state.picked. Das ist eine Bindung und nichts, was Sie einschalten, und genau das sorgt dafür, dass die vorherige Zeile im selben Moment aufhört, gewählt zu sein: Jede Zeile beantwortet die Frage neu, wenn sich der Zustand ändert.
2. Setzen Sie ihn, wenn eine Zeile gedrückt wird – setState("picked", "…") im Handler Gedrückt der Zeile.

Wenn Sie außerdem eine Variante Gewählt der Zeile gezeichnet haben, schaltet dieselbe Bindung auch diese ein. Es gibt hier eine einzige Vorstellung von „gewählt“, nicht zwei: Füllung und Variante lesen dieselbe Antwort.

Die Zeile füllen, und ein Menü für ein Telefon

Jedes Objekt in einem Rahmen mit Auto-Layout hat die Länge, in der Sie es gezeichnet haben – eine Zeile kann also nie schmaler sein als ihr Inhalt und läuft auf einem Telefon über den Rand hinaus. Wählen Sie das Objekt aus und setzen Sie unter Größenanpassung auf der Registerkarte Grafik das Häkchen bei Zeile füllen (oder Spalte füllen): Es nimmt die Länge, die die anderen übrig lassen, und gibt sie zurück, wenn weniger da ist.

So wird die obere Leiste einer Website gezeichnet: Der Name der Website füllt die Zeile, sodass die Links bei jeder Breite an der gegenüberliegenden Kante bleiben.

Ein Formular, das die ganze Breite eines Telefons einnimmt, und eine Karte auf dem Desktop. Wählen Sie einen Rahmen in einem vertikalen Auto-Layout aus und setzen Sie unter Größenanpassung die Maximale Breite: Die Spalte dehnt ihn über einen schmalen Bildschirm und hält auf einem breiteren bei so vielen Pixeln an und zentriert ihn. Eine Anmeldekarte oder ein Kontaktformular wird so einmal gezeichnet – nicht einmal pro Breite. Leer bedeutet keine Begrenzung.

Drei Karten nebeneinander auf dem Desktop, untereinander auf dem Telefon. Wählen Sie ein horizontales Auto-Layout aus und setzen Sie unter Auto-Layout das Häkchen bei Auf mehrere Zeilen umbrechen. Jedes Element der Zeile beginnt mit der Breite, in der Sie es gezeichnet haben; ist der Bildschirm für alle zu schmal, rücken die, die nicht mehr passen, in die nächste Zeile. Geben Sie jeder Karte Zeile füllen, und sie dehnt sich außerdem über den Rest ihrer Zeile – drei Karten teilen sich einen Desktop, ein Tablet setzt die dritte in eine eigene Zeile, und ein Telefon nimmt eine pro Zeile. Einmal gezeichnet: Es gibt keine zweite Kopie der Karten, die ausgeblendet werden müsste. Die Zeichenfläche zeigt die eine Zeile, die Sie gezeichnet haben; das Umbrechen ist das, was ein schmalerer Bildschirm daraus macht.

Für ein Telefon zeichnen Sie die Links und eine Schaltfläche Menü und geben jedem eine Bindung Angezeigt auf die Breite der Seite:

screen.width >= 720      on the links
screen.width < 720       on the Menu button

screen.width ist die Breite des Feldes, in dem der Bildschirm angezeigt wird, und sie ändert sich mit dem Fenster. Setzen Sie die Schaltfläche Menü an den Anfang der Leiste und lassen Sie sie openStartDrawer("Site menu") ausführen, wobei Site menu eine Overlay-Karte mit denselben Links ist – so öffnet sich das Menü von der Seite, auf der seine Schaltfläche liegt (links im Deutschen, rechts im Persischen). Geben Sie jedem Link Gewählt screen.name == "Home" und der Zeile, in der er steht, eine Füllung für Hover und für Gewählt, und das Menü markiert, wo Sie sind. Das Beispiel portal-pages-and-navigation zeichnet eines für Sie.

Zeichnen Sie die Leiste einmal. Eine Leiste auf jedem Bildschirm ist eine Komponente: Zeichnen Sie sie, machen Sie sie zur Komponente, und platzieren Sie auf jedem Bildschirm eine Instanz – ändern Sie die Hauptkomponente, und jede Seite folgt. Weil ein Link screen.name liest, muss man einer Instanz nichts darüber sagen, auf welcher Seite sie ist.

Ein Rahmen in einem manuellen Rahmen (Auto-Layout aus) hat stattdessen Beschränkungen – heften Sie ihn an Kanten an, und er hält seinen Abstand zu ihnen, wenn der Rahmen seine Größe ändert. Innerhalb eines Auto-Layouts entscheidet das Layout, wo die Dinge hinkommen, also bleibt nur die Frage der Größenanpassung.

Was es noch nicht gibt

Bewusst, und jedes in einem eigenen Release:

• Gespeicherte Ansichten und die Teile eines Filters, die nicht in eine Zeile passen. Ein Bildschirm nennt eine Tabelle, mit Gleichheitspaaren, „enthält“-Paaren, einer Sortierung und einer Seite – siehe Eine Liste seitenweise anzeigen. Er kann keine der gespeicherten Ansichten der Plattform nennen, sodass ein Filter, den Sie dort bereits gezeichnet haben, hier erneut gezeichnet wird. Und es gibt kein oder, keinen Bereich und keine Verschachtelung: Dort hört ein Filter auf, eine Zeile in einem Handler zu sein, und wird zum Abfragedesigner.
• Summen und Durchschnitte. Ein Bildschirm zählt Zeilen – das sind die Kacheln des Dashboard-Beispiels –, aber er kann keine Spalte summieren und nicht nach einer gruppieren.
• Ein Steuerelement für Nachschlagefelder. Die anderen sind angekommen: Ein Raster und ein Schnellformular sind das Steuerelement Tabellenansicht oder Formular (Ein Dashboard auf einen gezeichneten Bildschirm bringen), ein Dialog ist eine Overlay-Karte, Registerkarten sind ein gewählter Wert und eine Bindung Angezeigt pro Bereich, und der Wechsel zwischen Bildschirmen ist navigate. Was noch kein eigenes Steuerelement hat, ist die Datensatzauswahl – die Komponentenbibliothek hat eine gezeichnet, die das Beispiel Support desk platziert und mit eigenem Zustand versieht.
• Slots. Eine Komponente nimmt Eigenschaften an und löst Ereignisse aus; was sie noch nicht kann, ist, ein Loch zu lassen, das der Bildschirm, der sie platziert, füllt.
• Die Tastatur und alles mit einem Timer. Es gibt acht Ereignisse, und das einzige, das das eigene Leben des Bildschirms betrifft, ist Bildschirm wird geöffnet.

Die Registerkarte bietet nur an, was heute etwas bedeutet. Ein Steuerelement, das nichts tut, würde Ihnen eine Geste beibringen, die nichts tut.

Fehlerbehebung

• Die Registerkarte Bildschirm sagt, mein Objekt sei Teil der Grafik. – Linien, Formen und Pfade haben keine Bedeutung, die man ihnen geben könnte. Rahmen, Text und Bilder sind die, für die Sie antworten können.
• „Der Bildschirm“ wird nicht angeboten. – Sie haben ein Textobjekt oder ein Bild ausgewählt. Nur ein Rahmen kann der Bildschirm sein.
• Mein Steuerelement sieht ganz anders aus als das Feld, das ich gezeichnet habe. – Das ist der Sinn der Sache: Ein Steuerelement bringt sein eigenes Aussehen mit. Nur seine Position und Größe stammen aus Ihrer Zeichnung. Wenn Sie die gewählten Farben wollten, lassen Sie es ein Feld und geben Sie ihm stattdessen das Element Eine Schaltfläche.
• Es gibt keine Stelle, um einen Zustand zu zeichnen. – Zustände gehören zu einer Komponente. Klicken Sie mit der rechten Maustaste auf das Objekt, wählen Sie Komponente erstellen, und fügen Sie den Zustand an der Komponente hinzu. (Ist das Objekt ein Steuerelement, hat es bewusst keine: Es weiß bereits, wie es in jedem Zustand aussieht.)
• Speichern ist ausgegraut. – Seit dem letzten Speichern hat sich nichts geändert.
• Die Vorschau ist leer. – Nichts ist als der Bildschirm gekennzeichnet, oder der Bildschirmrahmen enthält nichts. Zeichnen Sie einen Rahmen, kennzeichnen Sie ihn als den Bildschirm und legen Sie etwas hinein.
• Mein Zustand bewirkt nichts. – Entweder ist die Kopie mit dem Original identisch (es gibt keinen Unterschied, der gespeichert werden könnte), oder Sie haben sie nur verschoben, was ein Zustand bewusst ignoriert. Ändern Sie eine Farbe.
• Speichern meldet, dass ein Zustand die Struktur ändert. – Die Kopie enthält mehr oder weniger Objekte als das Original. Siehe oben.
• Das Objekt, von dem ich kopiert habe, ist weg. – Speichern sagt es: Ein Zustand ohne etwas, dessen Zustand er sein könnte, zeichnet nichts. Löschen Sie die Kopie oder zeichnen Sie das Objekt neu.
• Mein Bildschirm erscheint in keiner App. – Ein Bildschirm muss in einer App platziert werden; siehe Eine Studio-App aus einer modellgesteuerten App öffnen.
• Meine Zeichnung sieht richtig aus, aber der Bildschirm wirkt schlicht. – Prüfen Sie, worauf jedes Objekt eingestellt ist. Ein leer gelassenes Objekt ist Teil der Grafik; es wird gezeichnet, sagt aber nichts darüber aus, was der Bildschirm enthält.

Verwandte Szenarien

• Einen Bildschirm reagieren lassen – Zustand und Bindungen, damit die Zeichnung etwas tut.
• Eine Studio-App erstellen.
• Einen Entwurf mit Komponenten wiederverwenden.
• Eine Studio-App aus einer modellgesteuerten App öffnen.