Einen Entwurf mit Komponenten wiederverwenden

Ziel

Etwas einmal zeichnen, es überall verwenden und es im hellen und im dunklen Modus richtig aussehen lassen.

Drei Dinge, und sie wirken zusammen: der Bereich Komponenten, aus dem Sie ziehen, Zustände, in denen eine Komponente angezeigt werden kann, und Designfarben, die dem Leser folgen statt dem Autor.

Der Bereich Komponenten

Der Bereich links neben der Zeichenfläche enthält zwei Listen gleichzeitig: oben Ebenen, die Sie bereits kennen, und darunter Komponenten. Ziehen Sie die Linie zwischen ihnen, um einer mehr Platz zu geben – ein tiefer Baum will die eine Aufteilung, ein Entwurf voller Komponenten die andere –, und ziehen Sie den äußeren Rand des Bereichs, um das Ganze zu verbreitern. Beide Linien reagieren auf die Pfeiltasten ebenso wie auf die Maus.

Drücken Sie die Überschrift einer Liste, um sie einzuklappen, und die andere nimmt den ganzen Bereich ein; drücken Sie die Überschrift erneut, um sie zurückzuholen, genau dort, wo Sie die Linie gelassen haben. Eine Liste bleibt immer geöffnet, daher reagiert die Überschrift der letzten offenen nicht.

Komponenten enthält diese Listen:

Gruppe	Was es ist
Steuerelemente	Die eigenen der Plattform – eine Schaltfläche, ein Textfeld, ein Textbereich, ein Kontrollkästchen, ein Dropdown, eine Datumsauswahl, eine Dateiauswahl
Elemente	Woraus ein Bildschirm besteht – Der Bildschirm, Ein Bereich, Eine Liste, Ein Listeneintrag, Eine Überschrift, Ein Absatz, Ein Link
Aus anderen Apps	Komponenten, die in den anderen Apps der Lösung gezeichnet wurden, erscheinen hier, bereit zum Platzieren.
Komponenten	Die, die Sie in diesem Entwurf erstellt haben

Ziehen Sie eine auf die Zeichenfläche, und sie landet dort, wo Sie sie abgelegt haben. Oder klicken Sie darauf (oder drücken Sie darauf die Eingabetaste), und sie landet in der Mitte dessen, was Sie gerade sehen – gut zu wissen, wenn Sie ohne Maus arbeiten.

Ein Steuerelement aus diesem Bereich zu ziehen, ist der schnelle Weg zu einem echten Steuerelement: Es kommt bereits als Textfeld an, etwa in der Größe eines Textfelds und so eingefärbt, statt als Rechteck anzukommen, das Sie dann im Inspektor erst einordnen müssen.

Ein Element zu ziehen, ist die Art, wie Sie die Struktur des Bildschirms aufbauen. Ein Bereich kommt bereits gekennzeichnet an, sodass er zu einem echten <section> wird, und eine Überschrift zu einer echten Überschrift – das bringt Ihren Bildschirm in die Gliederung eines Screenreaders und sorgt dafür, dass Strg+F Ihren Text findet. Ein einfaches Rechteck kann nachträglich auf der Registerkarte Bildschirm gekennzeichnet werden; wenn Sie das Element ablegen, müssen Sie nicht daran denken.

In diesem Bereich gibt es keine Formen

Früher gab es sie, und sie sind dorthin zurückgekehrt, wo sie funktionieren: Die Werkzeugleiste ganz links hat jede Form, und ein Werkzeug ist ein Modus – wählen Sie es und ziehen Sie dann die gewünschte Größe auf, was genau das ist, was Sie bei einer Linie oder einem Zeichenstiftpfad wollen, wo das Ziehen die Form ist. Dieser Bereich ist halb so hoch wie die Werkzeugleiste und teilt sich diese Höhe mit dem Objektbaum, also enthält er, was Sie nur hier bekommen.

Hinweis

Steuerelemente und Elemente erscheinen nur, wenn Sie einen Bildschirm entwerfen. In einem Bericht oder einem Dashboard würden weder ein Textfeld noch ein Bereich etwas bedeuten, daher wird keines von beiden angeboten.

Eine Komponente erstellen

Wählen Sie die Objekte aus, die Sie wiederverwenden möchten, klicken Sie mit der rechten Maustaste und wählen Sie Komponente erstellen. Sie werden zur Hauptkomponente – und die Hauptkomponente erscheint sofort im Bereich Komponenten.

Was Sie ausgewählt haben, wird zur Komponente. Haben Sie ein Objekt ausgewählt – eine Karte, die Sie in einem Rahmen gezeichnet haben, ein Status-Chip, den Sie als einzelnes Rechteck gezeichnet haben, eine Gruppe mit einem Symbol und seiner Beschriftung –, ist dieses Objekt die Hauptkomponente, an der Stelle, an der es schon war, und die Komponente übernimmt seinen Namen. Es wird nichts darübergelegt, sodass der Baum keine Ebene dazubekommt und Sie nicht mit einer „Komponente“ über dem gewählten Namen dastehen. Wählen Sie mehrere Objekte gleichzeitig aus, werden sie in einen Rahmen gepackt, denn eine Komponente braucht eine Wurzel, und eine lose Auswahl hat keine.

Da die Komponente das Objekt ist, folgt ihr Name ihm: Benennen Sie die Ebene um, und die Komponente wird mit umbenannt – im Bereich Komponenten und überall, wo sie angeboten wird.

Von da an:

• Ziehen Sie sie aus dem Bereich, so oft Sie möchten. Jede ist eine Instanz.
• Bearbeiten Sie die Hauptkomponente, und jede Instanz ändert sich mit.
• Fügen Sie später einen Teil hinzu. Wählen Sie die Hauptkomponente aus, holen Sie sie mit Umschalt+2 in den Blick und platzieren Sie etwas aus der Palette darin: einen Text, einen Link, eine Schaltfläche. Es wird Teil der Komponente, und jede Instanz bekommt es.
• Legen Sie fest, was eine Instanz ändern darf. Wählen Sie eine Ebene in der Hauptkomponente aus und haken Sie die Eigenschaften an, die Instanzen überschreiben dürfen sollen. Alles, was Sie nicht anhaken, bleibt an die Hauptkomponente gebunden – genau darum geht es: Eine Komponente lohnt sich nur, wenn sie tatsächlich überall gleich ist.

Hauptkomponente und Instanz unterscheiden

In der Liste Ebenen tragen sie unterschiedliche Glyphen, sodass Sie auf einen Blick erkennen, was was ist, ohne etwas anzuklicken: Die vier Rauten stehen für die Hauptkomponente – die eine Definition –, die einzelne hohle Raute für eine Instanz, eine Kopie davon. Fahren Sie mit der Maus über eines davon, um in Worten zu sehen, was es ist. Nur die äußerste Zeile jeder davon ist markiert; die Ebenen darin gehören dazu und werden nicht erneut markiert.

Von einer Instanz zur Hauptkomponente gelangen

Eine Instanz kann nicht dort bearbeitet werden, wo sie sitzt; wenn Sie sie ändern möchten, müssen Sie zu ihrer Hauptkomponente wechseln. Zwei Wege, und beide funktionieren sowohl von einer Ebene innerhalb einer Instanz als auch von der Instanz selbst:

• Klicken Sie mit der rechten Maustaste darauf und wählen Sie Zur Hauptkomponente wechseln.
• Drücken Sie im Inspektor im Bereich Instanz unter dem Namen der Komponente auf Zur Hauptkomponente wechseln.

Beides wählt die Hauptkomponente aus und holt sie in den sichtbaren Bereich, sodass der Bereich das beschreibt, was Sie gleich bearbeiten, und nicht die Kopie, von der Sie kamen.

Die Formen zurückbekommen: Als Rahmen duplizieren

Duplizieren tut bei einer Komponente, was es sagt, und nicht, was Sie vielleicht gemeint haben: Bei einer Hauptkomponente erzeugt es eine zweite Hauptkomponente, bei einer Instanz eine zweite Instanz. Beide folgen weiterhin etwas, was der ganze Sinn einer Komponente ist – und die falsche Antwort, wenn Sie eigentlich möchten: „Diese Karte ist fast richtig, geben Sie mir eine, die ich frei ändern kann.“

Klicken Sie mit der rechten Maustaste auf eine Komponente oder eine Instanz und wählen Sie Als Rahmen duplizieren. Was dabei herauskommt, ist ein gewöhnlicher Rahmen voller gewöhnlicher Formen: dieselbe Zeichnung, die nichts mehr folgt und überall bearbeitbar ist. Machen Sie später eine Komponente daraus, wenn sie es verdient – und da ein Rahmen selbst zur Komponente wird, kostet Sie das keine zusätzliche Ebene im Baum.

Die gezeichneten Zustände kommen nicht mit. Ein Zustand ist ein Bild einer Komponente, und eine Kopie, die keine mehr ist, hat nichts, wovon diese Bilder sein könnten.

Eine Instanz gewöhnlich machen: Instanz lösen

Klicken Sie mit der rechten Maustaste auf eine Instanz – oder etwas darin – und wählen Sie Instanz lösen. Sie wird an Ort und Stelle zu einem gewöhnlichen Rahmen: dieselben Formen, derselbe Platz, sie folgt dem Master nicht mehr, und jeder Teil ist bearbeitbar. Anders als bei Als Rahmen duplizieren wird nichts kopiert. Einen Master kann man nicht lösen; löschen Sie ihn stattdessen.

Einer Komponente Eigenschaften geben

Eine Komponente ist mehr wert, wenn jede Kopie etwas anderes sagen kann. Genau das sind Eigenschaften, und es gibt zwei Arten – der Unterschied ist, wo der Wert lebt.

Hinweis

Eigenschaften und Ereignisse stehen auf der Registerkarte Bildschirm, unter Komponentenschnittstelle – nicht auf Grafik bei den Füllungen und Eckenradien. Eine Eigenschaft ist das, was ein Bildschirm setzt, und ein Ereignis das, was er hört; keines von beiden ist eine Tatsache über die Zeichnung, und beide werden von den Ausdrücken auf derselben Registerkarte gelesen.

Die gezeichnete Art: die Eigenschaft einer Ebene anhaken

Wählen Sie eine Ebene in der Hauptkomponente aus und haken Sie unter Bei Instanzen freigeben eine Eigenschaft an – dieses Häkchen befindet sich auf der Registerkarte Grafik, wo die übrigen Eigenschaften der Ebene sind. Es deklariert eine Eigenschaft, die nach der Ebene benannt ist – Caption

• Text wird zu captionText –, und sie erscheint in der Liste Eigenschaften unter Komponentenschnittstelle auf der Registerkarte Bildschirm.

Eine Instanz setzt sie, indem sie ihre eigene Kopie bearbeitet: Klicken Sie in die Instanz, ändern Sie die Wörter oder die Farbe, und es bleibt so. Sie sehen es auf der Zeichenfläche, während Sie den Bildschirm gestalten – genau darum geht es bei dieser Art.

Die Wert-Art: selbst eine hinzufügen

Wählen Sie die Hauptkomponente der Komponente aus, gehen Sie zur Registerkarte Bildschirm und drücken Sie unter Komponentenschnittstelle → Eigenschaften auf ＋ Eigenschaft. Geben Sie ihr einen Namen und eine Art (Text, Zahl, Ja / Nein).

Ein Standardwert, falls Sie einen möchten, wird auf der Codeseite geschrieben. Drücken Sie bei weiterhin ausgewählter Hauptkomponente Code schreiben (die Schaltfläche </>), wählen Sie die Eigenschaft in der Liste neben dem Editor aus und schreiben Sie den Ausdruck: "Untitled", 0, false. Er ist BS wie alles andere auf diesem Bildschirm, wird also dort geschrieben, wo auch das übrige BS steht.

Noch wird nichts angezeigt, weil nichts dafür gezeichnet ist. Binden Sie etwas daran: Wählen Sie eine Ebene in der Hauptkomponente aus und schreiben Sie unter Text (oder Angezeigt oder Aktiviert) props.title. Wie Bindungen funktionieren, lesen Sie unter Einen Bildschirm reagieren lassen.

Jetzt kann jede Instanz ihren eigenen Wert bekommen: Wählen Sie sie aus, und der Bereich Instanz listet dieselben Eigenschaften auf. Eine Wert-Eigenschaft nimmt einen Ausdruck, kann also ein Literal sein – "Standard" – oder dem Bildschirm folgen: state.chosenPlan. Ändert sich der Zustand des Bildschirms, folgt die Karte.

Hinweis

Nur die Wert-Art kann mit props. gelesen werden. Eine gezeichnete Eigenschaft wird an der eigenen Kopie einer Ebene in der Instanz gesetzt; es gibt nichts, was ein Ausdruck lesen könnte. Wenn das Innere einer Komponente einen Wert verwenden soll, fügen Sie hier eine Eigenschaft hinzu und binden Sie daran.

Ein Ereignis auslösen

Eine Komponente sollte sagen, was passiert ist, und nicht entscheiden, was es bedeutet – das entscheidet der Bildschirm, auf dem sie platziert ist, und jeder Bildschirm kann anders entscheiden.

1. Wählen Sie die Hauptkomponente aus, gehen Sie zur Registerkarte Bildschirm und drücken Sie unter Komponentenschnittstelle → Ereignisse auf ＋ Ereignis. Benennen Sie es: chosen, submitted.
2. Lösen Sie es innerhalb der Komponente aus einem beliebigen Handler aus: emit("chosen", props.title). Das zweite Argument ist optional.
3. Wählen Sie eine Instanz aus und öffnen Sie ihre Registerkarte Bildschirm. Ihre Liste Ereignisse enthält jetzt Ihr Ereignis, mit einem Feld für das, was dieser Bildschirm damit tut – gewöhnlicher Handler-Code, im eigenen Gültigkeitsbereich des Bildschirms. Was die Komponente gesendet hat, ist event.payload.

Dieselbe Komponente kann auf demselben Bildschirm zweimal unterschiedlich antworten, denn der Handler gehört zur Instanz. Das ist der Unterschied zwischen einem Ereignis und einem gemeinsamen Zustandsfeld.

Tipp

Probieren Sie es im Beispiel Choose a plan aus: eine Karte, zweimal platziert, mit verschiedenen Tarifen und zwei unterschiedlichen Antworten auf dasselbe Ereignis.

Einer Komponente Zustände geben

Eine Komponente kann je nachdem, was sie ist, unterschiedlich aussehen: ein Fehler, eine Warnung, etwas Ausgewähltes, etwas, das noch lädt.

Zustände gehören zur Komponente, und an der Komponente deklarieren Sie sie. Wählen Sie die Hauptkomponente der Komponente aus, und der Bereich Komponente des Inspektors listet sie auf:

• Normal steht an erster Stelle, und dafür ist nichts zu zeichnen – die Hauptkomponente ist Normal.
• Darunter jeder Zustand, den Sie hinzugefügt haben. Drücken Sie einen, um direkt zu seiner Zeichnung zu gelangen.

Um einen hinzuzufügen:

1. Wählen Sie die Hauptkomponente der Komponente aus.
2. Geben Sie im Bereich Komponente unter Zustände einen Zustand ein – alles, was Ihr Bildschirm tatsächlich hat: invalid, overBudget, awaitingApproval – oder wählen Sie einen der Vorschläge. Drücken Sie ＋ Zustand.
3. Eine Variante erscheint direkt unter der Komponente, im selben Rahmen, in dem die Komponente ist, mit dem Namen <Komponente> — <Zustand>. Ändern Sie ihre Farben. Das ist der Zustand.

Tipp

Varianten leben neben der Komponente, nicht in einem eigenen Kasten. Sie stapeln sich in der Spalte der Komponente nach unten – die zweite unter der ersten und so weiter –, und wenn die Komponente in einem Rahmen liegt, wächst dieser Rahmen nach unten, um Platz zu schaffen; nichts, was schon darin ist, verschiebt sich.

Früher gab es einen Kasten um sie herum, genannt <Komponente> variants. Er ist weg: Die Zustände einer Komponente sind ihre Varianten, also war ein Kasten zwischen einer Komponente und ihren eigenen Zuständen eine Ebene mehr im Ebenenbaum und ließ die Zustände wie eine separate Liste wirken, die woanders geführt wird. Wenn Sie einen Bildschirm haben, der noch einen hat, löst er sich beim nächsten Öffnen dieses Bildschirms auf – die Varianten bleiben genau dort, wo sie gezeichnet sind, und der leere Kasten verschwindet.

Nichts, was eine Variante zeichnet, wird auf der Seite dargestellt. Eine Variante ist ein Bild einer Komponente, kein Teil des Bildschirms, und der Compiler überspringt sie, wo auch immer Sie sie hinlegen – deshalb kann sie gefahrlos in Ihrem Layout liegen.

Drei Rahmen, denen eine Variante nicht beitritt, und jeweils aus gutem Grund: dem Bildschirmrahmen, weil seine Größe die Größe des Bildschirms ist und sein Wachsen bei jedem gezeichneten Zustand Ihren Bildschirm vergrößern würde; einem Auto-Layout-Rahmen, weil sie in Ihren Fluss eingeordnet würde und Ihre Zeichnung herumschieben würde; und keinem Rahmen, wenn die Komponente gar nicht in einem Rahmen liegt. In allen drei Fällen kommt sie auf die Zeichenfläche, unter die Komponente.

Der Name, den Sie der Variante geben, ist der Name des Zustands. Mehr ist es nicht: Es gibt keine zweite Liste, die mit den Zeichnungen im Gleichschritt gehalten werden müsste.

Dies ist der einzige Ort, an dem ein Zustand hinzugefügt wird. Ein gewöhnliches Objekt hat keinen: Seine Registerkarte Bildschirm sagt das und verweist auf Komponente erstellen. Eine Geste, an einem Ort, neben der Liste der bereits vorhandenen Zustände – und eine Komponente mit einer einzigen Instanz ist eine völlig gute Komponente, wenn Sie nur einen Hover auf einer Schaltfläche wollten.

Der Mauszeiger selbst

Ein gezeichnetes Feld, das etwas tut, sieht genauso aus wie ein gezeichnetes Feld, das nichts tut, und der Mauszeiger ist das Einzige, was jemandem sagt, welches es ist – bevor er klickt.

Wählen Sie ein beliebiges Objekt aus, und seine Registerkarte Bildschirm hat ein Auswahlfeld Mauszeiger: Hand, Text, Verschieben, Greifen, Nicht erlaubt, Beschäftigt oder Pfeil. Setzen Sie es bei einer Variante, und es gilt nur in diesem Zustand, was meist das ist, was Sie wollen: Eine Hand auf der Hover-Variante ist die Art, wie eine gezeichnete Karte sagt, dass man sie drücken kann.

Es kostet nichts. Der Mauszeiger ist Teil der Zeichnung, kommt also mit jedem anderen Unterschied, den dieser Zustand macht, in das Stylesheet des Bildschirms – kein Handler, und nichts wird ausgeführt, wenn Sie die Maus bewegen.

Die leere Option heißt Wie vorgegeben, und sie ist nicht dasselbe wie Pfeil. Nicht gesetzt bedeutet „was auch immer es ohnehin gewesen wäre“, und bei einer echten Schaltfläche ist das bereits eine Hand; Pfeil bedeutet, dass Sie selbst dort den Pfeil verlangen.

Während der Mauszeiger darauf ist

Wählen Sie eine Variante aus, und ihre Registerkarte Bildschirm hat ein Auswahlfeld Während: Immer oder Hover, Gedrückt, Fokussiert.

Das ist die zweite Hälfte dessen, was ein Zustand ist, und sie lebt an der Zeichnung, weil dort die Antwort offensichtlich ist: Das ist das Bild von Ungültig, und so sieht Ungültig unter dem Mauszeiger aus. Sie lässt sich außerdem neu beantworten – ein Ungültig, das letzte Woche gezeichnet wurde, wird zu Ungültig + Hover, ohne neu eingetippt oder neu gezeichnet zu werden.

Zwei Dinge tut es nicht, und beide sagen, warum:

• Es erzeugt keine Kollision. Wenn Sie bereits ein Ungültig + Hover haben, weigert sich das Auswahlfeld, ein zweites zu erzeugen – eine Zeichnung pro Zustand, sonst kann nichts sagen, welche von zweien gemeint war.
• Sein Immer ist bei einem Zustand ausgegraut, der nur eine Interaktion ist. Eine Variante namens hover ist der Hover-Zustand; ihr die Interaktion wegzunehmen, ließe sie ohne Namen zurück. Wenn Sie einen Zustand möchten, der nicht an eine Interaktion gebunden ist, zeichnen Sie einen mit einem eigenen Namen – overBudget.

Ein Während bei einem Zustand zu setzen, löst außerdem die Fixierung jeder Instanz, die ihn angezeigt hat, denn nur ein Zustand ohne Interaktion kann fixiert werden – nichts kann deklarieren, dass auf etwas dauerhaft gezeigt wird.

Hinweis

Auf einer Instanz können Sie keinen Zustand zeichnen, und der Inspektor sagt das, wenn Sie eine auswählen. Ein Zustand auf einer Kopie wäre ein Zustand, den nur diese Kopie hat – unsichtbar von der Komponente aus, fehlend in jeder anderen Instanz und weg, sobald die Instanz zurückgesetzt wird. Gehen Sie zur Hauptkomponente und fügen Sie ihn dort hinzu, dann kann jede Instanz darin angezeigt werden.

Der Name des Zustands gehört Ihnen. Ungültig, Erfolg und die übrigen sind nur Vorschläge: Tippen Sie awaitingApproval, overBudget oder was auch immer dieser Bildschirm tatsächlich hat, und er verhält sich genau wie die vorgeschlagenen. Verwenden Sie Buchstaben, Ziffern, - und _, beginnend mit einem Buchstaben.

Die Interaktionen sind fest vorgegeben, und das ist die eine Stelle, an der Sie keinen Namen erfinden können: Hover, Gedrückt und Fokussiert gehören dem Browser, deshalb kosten sie nichts und funktionieren, ohne dass Sie etwas schreiben. Sie werden auch nicht in den Namen eingetippt – das Auswahlfeld Während der Variante ist die Stelle, an der Sie sagen, welche gilt.

Hinweis

Deaktiviert ist ein Name, kein Während. Früher war es ein vierter Eintrag in diesem Auswahlfeld, und dort gehört es nicht hin: Die drei oben 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 gewöhnlicher Zustandsname, eingegeben als disabled.

Es ist auch der eine Name, bei dem Sie nie sagen müssen, wann er aktiv ist. Der Bildschirm weiß es bereits, aus dem Häkchen Deaktiviert des Steuerelements oder seinem Ausdruck Aktiviert. Nennen Sie eine Variante disabled, und ein Steuerelement, das nicht verwendet werden darf, trägt sie, ohne dass Sie einen Ausdruck schreiben müssen.

Jetzt bietet der Inspektor bei jeder Instanz dieser Komponente Angezeigt im Zustand an. Wählen Sie Ungültig, und diese Instanz wird als Fehler gezeichnet, direkt auf der Zeichenfläche, während Sie den Bildschirm gestalten. Die anderen bleiben Normal.

Normal ist die Hauptkomponente. Dafür ist nichts zu zeichnen und nichts zu wählen – Angezeigt im Zustand auf Normal zu lassen, bedeutet „so, wie Sie es gezeichnet haben“.

Nur die Liste links kann angezeigt werden. Angezeigt im Zustand bietet Ungültig, Erfolg und die übrigen an, aber nicht Hover – das entscheidet der Browser, und ein Bildschirm, der behauptete, auf etwas werde dauerhaft gezeigt, wäre ein Bildschirm, der lügt. Zeichnen Sie den Hover-Zustand, und er funktioniert trotzdem; Sie wählen ihn nur nicht aus.

Zwei weitere Dinge, die man wissen sollte:

• Nur die Unterschiede werden gespeichert. Ändern Sie die Rahmenfarbe der Kopie, und die Rahmenfarbe ist das, was der Zustand bedeutet. Ändern Sie danach die Größe der Hauptkomponente, und jeder Zustand folgt, denn ein Zustand ändert nie Größe oder Position.
• Kombinationen fallen von selbst zurück. Zeichnen Sie Erfolg und Erfolg + Hover, bekommt ein Benutzer, der darauf zeigt, das zweite, und einer, der nicht darauf zeigt, das erste. Haben Sie nur Erfolg gezeichnet, zeigt das Daraufzeigen weiterhin Erfolg. Sie müssen nie jede Kombination zeichnen.

Einen Zustand per Code einschalten

Einen Zustand beim Entwerfen zu wählen, ist die eine Hälfte. Die andere ist, dass der laufende Bildschirm ihn ändert, und das ist eine Zeile in einem Handler:

setVisualState("invalid");

setVisualState("") setzt ihn zurück auf Normal. Schreiben Sie es dort, wo der Bildschirm es erfährt – beim Gedrückt einer Schaltfläche, beim Wert geändert eines Feldes – auf der Seite Code, an derselben Stelle, an der jeder andere Handler geschrieben wird. Was ein Handler tun kann, lesen Sie unter Einen Bildschirm reagieren lassen.

Es nennt kein Objekt und muss das auch nicht. Der Zustand, den es ändert, gehört zum nächstgelegenen Objekt am oder oberhalb des Handlers, auf dem ein Zustand gezeichnet ist. Zeichnen Sie einen Zustand einer Karte, verdrahten Sie einen Handler mit einer Schaltfläche in dieser Karte, und der Aufruf betrifft die Karte – das ist in jeder Zeichnung die richtige Antwort, denn ein Zustand wird auf dem Objekt gezeichnet, das er ändert, und der Handler ist mit etwas darin verdrahtet.

Der Zustand gehört zu dem Objekt, auf dem er gezeichnet wurde, und er reicht in es hinein: Zeichnen Sie einen Zustand einer Karte, und die Beschriftung, der Rahmen und alles andere, was Sie in der Kopie geändert haben, folgen gemeinsam. Ein Aufruf, ein Ort, an dem man nachsieht, wenn ein Zustand aktiv ist und es nicht sein sollte.

Interaktionszustände werden nicht per Code gesetzt, und der Bereich sagt das: Der Browser entscheidet bereits, wann auf etwas gezeigt wird, wann es gedrückt wird oder den Fokus hat.

Ein Zustand, den nichts je setzt, funktioniert trotzdem – auf ihn fixiert Angezeigt im Zustand eine Instanz, während Sie einen Bildschirm gestalten. Wenn Code sich meldet, ersetzt er die Fixierung.

Hinweis

Hier gab es eine Schaltfläche Bedingung hinzufügen, und die gibt es nicht mehr. Sie nahm einen Ausdruck, den der Bildschirm ständig neu prüfte, und das bedeutete, dass ein Bildschirm zwei Wege hatte zu entscheiden, wie etwas aussah – eine Variante, die sich selbst einschaltete, neben Handlern, die sie nicht berühren konnten, und nichts auf der Zeichenfläche, das sagte, welchen Weg eine bestimmte Variante nutzte. Ein Bildschirm entscheidet die Dinge jetzt an einem Ort.

Der Preis ist real und wissenswert: Eine Bedingung schaltete sich in dem Moment ein, in dem der Bildschirm geladen wurde, während ein Handler nur läuft, wenn etwas geschieht. Soll ein Zustand aktiv sein, bevor irgendjemand etwas getan hat, fixieren Sie ihn mit Angezeigt im Zustand – dafür war eine Fixierung schon immer da, und Code ersetzt sie, sobald sich ein Handler zum ersten Mal meldet.

Designfarben

Unter den Farbauswahlen Füllung und Kontur gibt es eine Reihe runder Farbfelder. Das sind die Designfarben der Plattform – Hintergrund, Oberfläche, Text, Sekundärtext, Rahmen, Primär, Fehler, Erfolg.

Wählen Sie eine statt einer Farbe, und das Objekt hört auf, diese Farbe zu sein, und wird zu dieser Rolle. Das ist wichtig, weil:

• Sie dem Design des Lesers folgt. Wer Parsware im dunklen Modus verwendet, sieht Ihren Bildschirm dunkel: Die Flächen werden dunkel, der Text hell, die Rahmen passen sich an. Sie zeichnen nicht zweimal.
• Sie der Akzentfarbe des Mandanten folgt. Primär ist die gewählte Akzentfarbe, kein Blau, das Sie 2026 ausgesucht haben.

Drücken Sie den Mond in der Symbolleiste, um Ihre Zeichnung dunkel zu sehen, und die Sonne, um zurückzukehren. Dieser Schalter ändert nur, was Sie ansehen – nicht das eigene Design der Anwendung, das in den Einstellungen festgelegt wird.

Ein Klick auf das bereits gewählte Farbfeld löst es, sodass die Farbe, die es angezeigt hat, als gewöhnliche Farbe übrig bleibt. Das ist der Weg zurück, wenn Sie sich entscheiden, dass Sie doch genau dieses Grau wollten.

Tipp

Der Rahmen Styles in einem neuen Entwurf ist bereits aus Designfarben aufgebaut. Richten Sie Ihre Formen auf diese Farbfelder aus, und alles folgt kostenlos dem Design.

Gemeinsame Stile

Ein gemeinsamer Stil ist eine Form, der andere folgen. Wählen Sie eine Form und drücken Sie Als Farbe speichern (ihre Füllung) oder Als Form speichern (Füllung, Rahmen, Eckenradius, Deckkraft und Schatten); ein Text hat Als Text speichern. Die Form bleibt auf der Zeichenfläche, und ihr Abschnitt Stil zeigt, wie viele Formen ihr folgen.

Um einem Stil zu folgen, öffnen Sie die Liste über Einfarbig, Linear und Radial im Abschnitt Füllung, die Liste Stil oben für einen Formstil oder die Liste Textstil im Abschnitt Text. Ändern Sie die Form des Stils selbst, und alles, was ihm folgt, ändert sich mit. Geben Sie einer folgenden Form einen eigenen Wert, folgt sie nicht mehr; Aufheben macht den Stil wieder zu einer gewöhnlichen Form, und die folgenden Formen behalten ihre Werte. Einfügen → Standardstile fügt einen fertigen Satz hinzu.

Die Listen funktionieren mit der Tastatur: Enter oder Leertaste öffnet sie, die Pfeiltasten bewegen sich darin, und Escape schließt sie.

Voraussetzungen

• Ein Bildschirm zum Zeichnen – siehe Eine Studio-App erstellen.

Schritte

1. Zeichnen Sie, was Sie wiederverwenden möchten – einen Status-Chip, ein Feld mit seiner Beschriftung, eine Karte.
2. Wählen Sie es aus, Rechtsklick, Komponente erstellen.
3. Ziehen Sie es zweimal aus der Liste Komponenten.
4. Wählen Sie die Hauptkomponente aus, geben Sie unter Zustände invalid ein und drücken Sie dann ＋ Zustand.
5. Ändern Sie den Rahmen der Variante auf die Designfarbe Fehler.
6. Wählen Sie die zweite Instanz aus und setzen Sie Angezeigt im Zustand auf Ungültig. Sie ändert sich auf der Zeichenfläche.
7. Drücken Sie den Mond in der Symbolleiste. Alles, was mit einer Designfarbe eingefärbt ist, folgt.
8. Drücken Sie Speichern.

Fehlerbehebung

• Die Liste Komponenten ist leer. – Nichts in diesem Entwurf ist bisher eine Komponente. Wählen Sie einige Objekte aus und wählen Sie Komponente erstellen.
• Angezeigt im Zustand wird nicht angeboten. – Entweder ist das ausgewählte Objekt keine Instanz (wählen Sie ihr äußerstes Feld aus), oder ihre Komponente hat noch keine Zustände: Wählen Sie die Hauptkomponente aus und fügen Sie unter Zustände einen hinzu.
• Es gibt keine Schaltfläche ＋ Zustand. – Das ausgewählte Objekt ist nicht die Hauptkomponente einer Komponente. Wählen Sie das äußerste Feld der Komponente aus, oder drücken Sie bei einer Instanz auf ihren Namen, um dorthin zu gelangen.
• Es gibt keine Schaltfläche ＋ Instanz mehr. – Eine weitere zu platzieren, ist Aufgabe der Liste Komponenten: Ziehen Sie die Komponente genau dorthin, wo Sie sie haben möchten. Rechtsklick → Instanz funktioniert ebenfalls noch.
• Ich habe eine Instanz auf einen Zustand fixiert, und nichts hat sich geändert. – Die Kopie des Zustands ist mit der Hauptkomponente identisch. Ändern Sie eine Farbe an der Kopie.
• Ziehen bewirkt nichts. – Legen Sie sie auf der Zeichenfläche selbst ab, nicht auf einem Bereich. Oder klicken Sie einfach auf die Zeile: Sie landet in der Mitte der Ansicht.
• Die dunkle Vorschau sieht gleich aus. – Die Zeichnung verwendet gewöhnliche Farben statt Designfarben. Wählen Sie aus den runden Farbfeldern unter der Farbauswahl.
• Mein Steuerelement ignoriert die Designfarbe, die ich ihm gegeben habe. – Das Aussehen eines Steuerelements gehört der Plattform, es folgt also bereits dem Design; nur seine Position und Größe stammen aus Ihrer Zeichnung.
• Ich habe eine Instanz bearbeitet, und sie ist zurückgesprungen. – Diese Eigenschaft ist an die Hauptkomponente gebunden. Wählen Sie die passende Ebene in der Hauptkomponente aus und haken Sie sie unter Bei Instanzen freigeben an.
• Ich habe eine Eigenschaft hinzugefügt, und nichts hat sich geändert. – Für eine Wert-Eigenschaft ist nichts gezeichnet. Binden Sie etwas in der Hauptkomponente an props.<name>, sonst ist es ein Wert, den niemand liest.
• props.something ist in einem Ausdruck leer. – Entweder hat die Komponente keine Eigenschaft dieses Namens, oder die vorhandene ist von der gezeichneten Art, die ein Ausdruck nicht lesen kann. Fügen Sie eine Wert-Eigenschaft hinzu und binden Sie daran.
• Mein Ereignis bewirkt nichts. – Prüfen Sie drei Dinge: dass die Komponente es deklariert (Ereignisse, an der Hauptkomponente), dass ein Handler in der Komponente tatsächlich emit("name") aufruft und dass die Instanz einen Handler dafür hat. Eine Komponente, die ein Ereignis auslöst, auf das niemand antwortet, ist kein Fehler.
• Ich habe einen Zustand gelöscht, und die Instanzen, die ihn verwendet haben, sehen wieder normal aus. – Das ist Absicht, und die Bestätigung hat es gesagt: Eine Instanz, die auf einen nicht mehr vorhandenen Zustand fixiert ist, kehrt zu Normal zurück, statt zu verschwinden.
• Ich habe die Beschriftung in einer Schaltfläche gezogen, und sie hat die Komponente verlassen. – Behoben. Ein Teil einer Komponente kann nicht mehr aus ihr herausgezogen werden; die Beschriftung bewegt sich dorthin, wo Sie sie hinsetzen, auch über den Rand der Schaltfläche hinaus, und bleibt Teil der Schaltfläche. Nur der eigene Rahmen der Komponente bewegt sich in die umgebenden Rahmen hinein und aus ihnen heraus.
• Ich habe eine Komponente gelöscht, und Zeichnungen an anderer Stelle des Bildschirms sind mitverschwunden. – Auch das ist Absicht, und auch das stand in der Bestätigung: Eine Instanz ist eine Kopie der Komponente, also hat eine Komponente, die nicht mehr existiert, keine Kopien. Die Zahl im Dialog gibt an, wie viele es waren.

Einen Zustand oder eine ganze Komponente entfernen

Beides fragt vorher – und beides nur, wenn etwas verloren gehen kann.

• Einen Zustand entfernen (das ✕ daneben in der Liste Zustände) nimmt seine Zeichnung weg, und jede Instanz, die in diesem Zustand angezeigt wurde, kehrt zu Normal zurück. War nichts darauf fixiert, wird er ohne Rückfrage entfernt.
• Eine Komponente entfernen (ihre Hauptkomponente auswählen und Entf drücken) nimmt ihre Instanzen und jeden für sie gezeichneten Zustand mit, und der Dialog zählt beides. Das ist der, den man lesen sollte: Die Instanzen können auf einem anderen Teil des Bildschirms liegen als die ausgewählte Hauptkomponente, und die gezeichneten Zustände liegen daneben. Eine Komponente ohne beides wird ohne Rückfrage entfernt.
• Etwas löschen, in dem eine Komponente gezeichnet wurde – einen Rahmen mit einer Karte, aus der Sie eine Komponente gemacht haben –, entfernt diese Komponente ebenfalls und fragt vorher, wobei es nennt, wie viele verschwinden. Das ist der Verlust, den Sie anhand Ihrer Auswahl nicht kommen sehen: Der Rahmen sieht aus wie ein Rahmen.

Das Letzte geschah früher stillschweigend, und es war eine eigene Korrektur wert. Die Komponente wurde von der Zeichenfläche genommen, und ihre Definition blieb zurück und verwies auf eine Zeichnung, die nicht mehr existierte – sodass die Palette sie weiter auflistete und das Herausziehen gar nichts bewirkte. Haben Sie eine Komponente in diesem Zustand, räumt das Öffnen der App jetzt das Phantom auf, und Sie sehen ehrlich, dass darin nichts zu platzieren ist.

Für eine Geste, die nur das betrifft, was Sie ausgewählt haben, erscheint kein Dialog, denn eine Bestätigung, die fragt, ob Sie das gemeint haben, was Sie gerade getan haben, ist ein Klick, der Ihnen beibringt, nicht mehr zu lesen.

Ein Löschen fragt doch nach, und zwar beim Speichern: eine Komponente, die andere Apps platzieren. Ihre Komponenten werden jeder anderen App der Umgebung angeboten, also ist das Löschen einer davon eine Änderung an deren Apps – die Frage nennt sie, und Abbrechen lässt Ihre Zeichenfläche genau so, wie sie ist. Siehe Eine Komponente in einer anderen App verwenden.

Verwandte Szenarien

• Eine Komponente in einer anderen App verwenden.
• Eine Studio-App zeichnen.
• Eine Studio-App erstellen.