Een ontwerp hergebruiken met componenten

Doel

Iets één keer tekenen, het overal gebruiken, en het er goed laten uitzien in zowel licht als donker.

Drie dingen, en ze werken samen: het paneel Componenten waaruit je sleept, toestanden waarin een component kan worden getoond, en themakleuren die de lezer volgen in plaats van de auteur.

Het paneel Componenten

Het paneel links van het canvas bevat twee lijsten tegelijk: Lagen bovenaan, die je al kent, en Componenten daaronder. Sleep de lijn ertussen om een van beide meer ruimte te geven — een diepe boom wil de ene verdeling, een ontwerp vol componenten de andere — en sleep de buitenrand van het paneel om het geheel breder te maken. Beide lijnen reageren op de pijltoetsen en op de muis.

Druk op de kop van een lijst om die in te klappen, en de andere neemt het hele paneel in; druk nog eens op de kop om haar terug te halen, precies waar je de lijn liet. Er blijft altijd één lijst open, dus de kop van de laatste open lijst reageert niet.

Componenten bevat deze lijsten:

Groep	Wat het is
Besturingselementen	Die van het platform zelf — een Knop, een Tekstvak, een Tekstgebied, een Selectievakje, een Vervolgkeuzelijst, een Datumkiezer, een Bestandskiezer
Elementen	Waar een scherm uit bestaat — Het scherm, Een gebied, Een lijst, Een lijstitem, Een kop, Een alinea, Een link
Uit andere apps	Componenten die in de andere apps van de oplossing zijn getekend, verschijnen hier, klaar om te plaatsen.
Componenten	De componenten die jij in dit ontwerp hebt gemaakt

Sleep er een naar het canvas en het landt waar je het loslaat. Of klik erop (of druk erop op Enter) en het landt midden in wat je bekijkt — handig om te weten als je zonder muis werkt.

Een besturingselement uit dit paneel slepen is de snelle manier om een echt besturingselement te krijgen: het komt aan als een Tekstvak, ongeveer zo groot als een tekstvak en zo geschilderd, in plaats van als een rechthoek die je daarna in de inspector moet gaan classificeren.

Een element slepen is hoe je de vorm van het scherm opbouwt. Een gebied komt al getagd aan, zodat het een echte <section> wordt, en een kop wordt een echte kop — en dat zet je scherm in het overzicht van een schermlezer en zorgt dat Ctrl+F je tekst vindt. Een gewone rechthoek kan achteraf op het tabblad Scherm worden getagd; het element neerzetten bespaart je het onthouden.

Er staan geen vormen in dit paneel

Die stonden er vroeger wel, en ze zijn teruggegaan naar waar ze werken: de gereedschapsbalk helemaal links heeft elke vorm, en een gereedschap is een modus — kies het en sleep dan de gewenste grootte, en dat wil je voor een lijn of een penpad, waarbij het slepen de vorm is. Dit paneel is half zo hoog als die balk en deelt die hoogte met de objectboom, dus het bevat wat je alleen hier kunt krijgen.

opmerking

Besturingselementen en Elementen verschijnen alleen wanneer je een scherm ontwerpt. Op een rapport of een dashboard zou een tekstvak noch een gebied iets betekenen, dus geen van beide wordt aangeboden.

Een component maken

Selecteer de objecten die je wilt hergebruiken, klik met de rechtermuisknop en kies Component maken. Ze worden de master van een component — en de master verschijnt meteen in het paneel Componenten.

Wat je selecteerde, wordt het component. Heb je één object geselecteerd — een kaart die je in een frame tekende, een statuslabel dat je als één rechthoek tekende, een groep met een pictogram en zijn label — dan is dat object de master, op de plek waar het al stond, en krijgt het component zijn naam. Er wordt niets boven toegevoegd, dus de boom krijgt er geen niveau bij en je krijgt geen "Component" boven de naam die je koos. Selecteer je meerdere objecten tegelijk, dan worden ze in een frame verpakt, omdat een component één wortel nodig heeft en een losse selectie er geen heeft.

Omdat het component het object is, volgt de naam het: hernoem de laag en het component wordt mee hernoemd, in het paneel Componenten en overal waar het wordt aangeboden.

Vanaf dat moment:

• Sleep het uit het paneel, zo vaak als je wilt. Elke kopie is een exemplaar.
• Bewerk de master en elk exemplaar verandert mee.
• Voeg er later een onderdeel aan toe. Selecteer de master, druk op Shift+2 om hem in beeld te brengen en plaats er iets uit het palet in: een tekst, een link, een knop. Het wordt een onderdeel van het component, en elk exemplaar krijgt het.
• Kies wat een exemplaar mag wijzigen. Selecteer een laag in de master en vink de eigenschappen aan die exemplaren mogen overschrijven. Alles wat je niet aanvinkt, blijft vast aan de master — en dat is precies de bedoeling: een component is het alleen waard als het echt overal hetzelfde is.

De master van een exemplaar onderscheiden

In de lijst Lagen hebben ze verschillende pictogrammen, zodat je in één oogopslag ziet welke welke is zonder ergens op te klikken: de vier ruiten zijn de master — de ene definitie — en de enkele holle ruit is een exemplaar, een kopie ervan. Wijs een van beide aan om in woorden te zien welke het is. Alleen de buitenste regel van elk wordt gemarkeerd; de lagen erin horen erbij en worden niet opnieuw gemarkeerd.

Vanuit een exemplaar naar de master gaan

Een exemplaar kan niet worden bewerkt waar het staat, dus als je het wilt wijzigen, moet je naar de master. Er zijn twee manieren, en beide werken vanuit een laag binnen een exemplaar en vanuit het exemplaar zelf:

• Klik er met de rechtermuisknop op en kies Naar hoofdcomponent gaan.
• In de inspector: druk op Naar hoofdcomponent gaan in het paneel Exemplaar, onder de naam van het component.

Beide selecteren de master en brengen die in beeld, zodat het paneel het ding beschrijft dat je gaat bewerken in plaats van de kopie waar je vandaan kwam.

De vormen terugkrijgen: Dupliceren als frame

Dupliceren op een component doet wat het zegt en niet wat je misschien bedoelde: op een master maakt het een tweede master, en op een exemplaar een tweede exemplaar. Beide blijven iets volgen, wat de hele bedoeling van een component is — en het verkeerde antwoord als je wilt: "deze kaart is bijna goed, geef me er een die ik vrij kan wijzigen".

Klik met de rechtermuisknop op een component of een exemplaar en kies Dupliceren als frame. Wat er landt, is een gewoon frame vol gewone vormen: dezelfde tekening, die niets meer volgt, overal bewerkbaar. Maak er later een component van als het dat verdient — en omdat een frame het component zelf wordt, kost dat je geen extra niveau in de boom.

De getekende toestanden komen niet mee. Een toestand is een afbeelding van een component, en een kopie die dat niet meer is, heeft niets waarvan die afbeeldingen zouden kunnen zijn.

Een instantie gewoon maken: Instantie loskoppelen

Klik met de rechtermuisknop op een instantie — of iets erin — en kies Instantie loskoppelen. Ze wordt ter plekke een gewoon frame: dezelfde vormen, dezelfde plek, ze volgt de master niet meer en elk deel is bewerkbaar. Anders dan bij Dupliceren als frame wordt niets gekopieerd. Een master kunt u niet loskoppelen; verwijder hem in plaats daarvan.

Een component eigenschappen geven

Een component is meer waard wanneer elke kopie iets anders kan zeggen. Daarvoor zijn eigenschappen, en er zijn twee soorten — het verschil is waar de waarde staat.

opmerking

Eigenschappen en gebeurtenissen staan op het tabblad Scherm, onder Componentinterface — niet op Grafisch bij de opvullingen en hoekstralen. Een eigenschap is wat een scherm instelt en een gebeurtenis is wat het hoort; geen van beide is een feit over de tekening, en beide worden gelezen door de expressies op datzelfde tabblad.

De getekende soort: vink een eigenschap van een laag aan

Selecteer een laag binnen de master en vink een eigenschap aan onder Beschikbaar maken op exemplaren — dat vinkje staat op het tabblad Grafisch, waar de andere eigenschappen van de laag staan. Het declareert een eigenschap die naar de laag is genoemd — Caption + tekst wordt captionText — en die verschijnt in de lijst Eigenschappen onder Componentinterface op het tabblad Scherm.

Een exemplaar stelt haar in door zijn eigen kopie te bewerken: klik in het exemplaar, wijzig de woorden of de kleur, en het blijft staan. Je ziet het op het canvas terwijl je het scherm opmaakt, en dat is precies het punt van deze soort.

De waardesoort: voeg er zelf een toe

Selecteer de master van het component, ga naar het tabblad Scherm en druk op ＋ Eigenschap onder Componentinterface → Eigenschappen. Geef haar een naam en een soort (Tekst, Getal, Ja / nee).

Een standaardwaarde, als je die wilt, schrijf je op de codepagina. Druk, met de master nog geselecteerd, op Code schrijven (de knop </>), kies de eigenschap in de lijst naast de editor en schrijf de expressie: "Untitled", 0, false. Het is BS zoals al het andere op dit scherm, dus het wordt geschreven waar de rest van de BS staat.

Er is nog niets te zien, omdat er niets voor is getekend. Koppel er iets aan: selecteer een laag binnen de master en schrijf onder Tekst (of Getoond, of Ingeschakeld) props.title. Zie Een scherm laten reageren voor hoe koppelen werkt.

Nu kan elk exemplaar een eigen waarde krijgen: selecteer het, en het paneel Exemplaar toont dezelfde eigenschappen. Een waarde-eigenschap neemt een expressie, dus het kan een letterlijke waarde zijn — "Standard" — of het scherm volgen: state.chosenPlan. Wanneer de toestand van het scherm verandert, volgt de kaart.

opmerking

Alleen de waardesoort kan worden gelezen met props. Een getekende eigenschap wordt ingesteld op de eigen kopie van een laag in het exemplaar; er is niets wat een expressie kan lezen. Wil je dat de binnenkant van een component een waarde gebruikt, voeg dan hier een eigenschap toe en koppel daaraan.

Een gebeurtenis activeren

Een component moet zeggen wat er gebeurde, niet beslissen wat het betekent — het scherm waarop het staat, beslist dat, en elk scherm kan dat anders beslissen.

1. Selecteer de master, ga naar het tabblad Scherm en druk op ＋ Gebeurtenis onder Componentinterface → Gebeurtenissen. Geef haar een naam: chosen, submitted.
2. Activeer haar binnen het component, vanuit elke handler: emit("chosen", props.title). Het tweede argument is optioneel.
3. Selecteer een exemplaar en open het tabblad Scherm. De lijst Gebeurtenissen bevat nu je gebeurtenis, met een vak voor wat dit scherm ermee doet — gewone handlercode, in het eigen bereik van het scherm. Wat het component stuurde, is event.payload.

Hetzelfde component twee keer op hetzelfde scherm kan verschillend antwoorden, omdat de handler bij het exemplaar hoort. Dat is het verschil tussen een gebeurtenis en een gedeeld toestandsveld.

tip

Probeer het in het voorbeeld Choose a plan: één kaart, twee keer geplaatst, met verschillende abonnementen en twee verschillende antwoorden op dezelfde gebeurtenis.

Een component toestanden geven

Een component kan er anders uitzien afhankelijk van wat het is: een fout, een waarschuwing, iets geselecteerds, iets wat nog laadt.

Toestanden horen bij het component, en het component is waar je ze declareert. Selecteer de master van het component en het paneel Component van de inspector toont ze:

• Normaal staat bovenaan, en daarvoor valt niets te tekenen — de master is Normaal.
• Daaronder elke toestand die je hebt toegevoegd. Druk op een ervan om rechtstreeks naar de tekening ervan te gaan.

Er een toevoegen:

1. Selecteer de master van het component.
2. Typ in het paneel Component, onder Toestanden, een Toestand — alles wat je scherm echt heeft: invalid, overBudget, awaitingApproval — of kies een van de suggesties. Druk op ＋ Toestand.
3. Er verschijnt een variant direct onder het component, in hetzelfde frame als het component, met de naam <Component> — <toestand>. Wijzig de kleuren. Dat is de toestand.

tip

Varianten staan naast het component, niet in een eigen vak. Ze stapelen zich op in de eigen kolom van het component — de tweede onder de eerste, enzovoort — en als het component in een frame staat, groeit dat frame naar beneden om ruimte te maken; niets wat er al in staat, verschuift.

Vroeger stond er een vak omheen, <Component> variants genoemd. Dat is weg: de toestanden van een component zijn zijn varianten, dus een vak tussen een component en zijn eigen toestanden was een extra niveau in de lagenboom en liet de toestanden lezen als een aparte lijst die ergens anders werd bijgehouden. Heb je een scherm dat er nog een heeft, dan valt het uit elkaar de volgende keer dat je dat scherm opent — de varianten blijven precies waar ze getekend zijn, en het lege vak verdwijnt.

Niets wat een variant tekent, wordt op de pagina gerenderd. Een variant is een afbeelding van een component, geen deel van het scherm, en de compiler slaat hem over waar je hem ook zet — en daardoor kan hij veilig midden in je opmaak staan.

Drie frames waar een variant niet in gaat, elk met een reden: het schermframe, omdat de grootte ervan de grootte van het scherm is en het laten groeien je scherm van grootte zou veranderen telkens wanneer je een toestand tekende; een frame met automatische opmaak, omdat hij in je stroom zou worden opgemaakt en je tekening zou verschuiven; en een component dat helemaal niet in een frame staat. In alle drie de gevallen komt hij op het canvas, onder het component.

De naam die je de variant geeft, is de naam van de toestand. Dat is alles: er is geen tweede lijst om gelijk te houden met de tekeningen.

Dit is de enige plek waar een toestand wordt toegevoegd. Een gewoon object heeft er geen: zijn tabblad Scherm zegt dat en verwijst naar Component maken. Eén gebaar, op één plek, naast de lijst van de toestanden die al bestaan — en een component met één exemplaar is een prima component als je alleen een aanwijseffect op één knop wilde.

De aanwijzer zelf

Een getekend vak dat iets doet, ziet er precies zo uit als een getekend vak dat niets doet, en de muisaanwijzer is het enige wat iemand vertelt welke — voordat die klikt.

Selecteer een willekeurig object en het tabblad Scherm heeft een kiezer Aanwijzer: Hand, Tekst, Verplaatsen, Pakken, Niet toegestaan, Bezig of Pijl. Stel hem in op een variant en hij geldt alleen in die toestand, wat meestal is wat je wilt: een Hand op de aanwijsvariant is hoe een getekende kaart zegt dat erop kan worden gedrukt.

Het kost niets. De aanwijzer hoort bij de tekening, dus hij gaat in de stylesheet van het scherm met elk ander verschil dat die toestand maakt — geen handler, en er wordt niets uitgevoerd wanneer je de muis beweegt.

De lege optie is Zoals het komt, en die is niet hetzelfde als Pijl. Niet ingesteld betekent "wat dit hoe dan ook zou zijn geweest", en voor een echte knop is dat al een hand; Pijl is jij die zelfs daar om de pijl vraagt.

Zolang de aanwijzer erop staat

Selecteer een variant en het tabblad Scherm heeft een kiezer Zolang: Altijd, of Aanwijzen, Ingedrukt, Focus.

Dat is de tweede helft van wat een toestand is, en die staat bij de tekening omdat daar het antwoord voor de hand ligt: dit is de afbeelding van Ongeldig, en zo ziet Ongeldig eruit onder de aanwijzer. Het is ook opnieuw te beantwoorden — een Ongeldig die vorige week is getekend, wordt Ongeldig + Aanwijzen zonder opnieuw te worden getypt of getekend.

Twee dingen die hij niet doet, en beide zeggen waarom:

• Hij botst niet. Heb je al een Ongeldig + Aanwijzen, dan weigert de kiezer een tweede te maken — één tekening per toestand, anders kan niets zeggen welke van de twee bedoeld was.
• Zijn Altijd is grijs bij een toestand die alleen een interactie is. Een variant met de naam hover is de aanwijstoestand; de interactie weghalen zou hem zonder naam laten. Wil je een toestand die niet aan een interactie vastzit, teken er dan een met een eigen naam — overBudget.

Een Zolang instellen op een toestand maakt ook elk exemplaar los dat die toestand toonde, omdat alleen een toestand zonder interactie kan worden vastgezet — niets kan iets declareren als permanent aangewezen.

opmerking

Je kunt geen toestand tekenen op een exemplaar, en de inspector zegt dat wanneer je er een selecteert. Een toestand op een kopie zou een toestand zijn die alleen die kopie heeft — onzichtbaar vanuit het component, afwezig bij elk ander exemplaar, en weg zodra het exemplaar wordt hersteld. Ga naar de hoofdcomponent en voeg hem daar toe, en elk exemplaar kan erin worden getoond.

De naam van de toestand is van jou. Ongeldig, Geslaagd en de rest zijn alleen suggesties: typ awaitingApproval, overBudget of wat dit scherm echt heeft, en het gedraagt zich precies zoals de voorgestelde. Gebruik letters, cijfers, - en _, beginnend met een letter.

De interacties liggen vast, en dat is de enige plek waar je geen naam kunt verzinnen: Aanwijzen, Ingedrukt en Focus zijn van de browser, en daarom kosten ze niets en werken ze zonder dat je iets schrijft. Ze worden ook niet in de naam getypt — de kiezer Zolang van de variant is waar je zegt welke van toepassing is.

opmerking

Uitgeschakeld is een naam, geen Zolang. Het was vroeger een vierde item in die kiezer, en het hoort daar niet: de drie hierboven zijn dingen die iemand doet, en elk stopt zodra die ermee ophoudt. Uitgeschakeld is wat het besturingselement is — je scherm heeft het beslist — dus het is een gewone toestandsnaam, getypt als disabled.

Het is ook de enige naam waarvoor je nooit hoeft te zeggen wanneer hij aan staat. Het scherm weet het al, uit het vinkje Uitgeschakeld van het besturingselement of zijn expressie Ingeschakeld. Noem een variant disabled en een besturingselement dat niet mag worden gebruikt, draagt hem, zonder dat je een expressie hoeft te schrijven.

Nu biedt de inspector op elk exemplaar van dat component Getoond in toestand. Kies Ongeldig en dat exemplaar wordt als de fout getekend, daar op het canvas, terwijl je het scherm opmaakt. De andere blijven Normaal.

Normaal is de master. Er valt niets voor te tekenen en niets te kiezen — Getoond in toestand op Normaal laten betekent "zoals je het tekende".

Alleen de lijst aan de linkerkant kan worden getoond. Getoond in toestand biedt Ongeldig, Geslaagd en de rest, maar niet Aanwijzen — daarover beslist de browser, en een scherm dat beweerde dat iets permanent werd aangewezen, zou een scherm zijn dat liegt. Teken de aanwijstoestand en die werkt nog steeds; je kiest hem alleen niet.

Nog twee dingen die het weten waard zijn:

• Alleen de verschillen worden bewaard. Wijzig de randkleur van de kopie en de randkleur is wat de toestand betekent. Verander daarna de grootte van de master en elke toestand volgt, omdat een toestand nooit grootte of positie wijzigt.
• Combinaties vallen vanzelf terug. Teken je Geslaagd en Geslaagd + Aanwijzen, dan krijgt een gebruiker die het aanwijst de tweede en een gebruiker die het niet aanwijst de eerste. Heb je alleen Geslaagd getekend, dan toont aanwijzen nog steeds Geslaagd. Je hoeft nooit elke combinatie te tekenen.

Een toestand inschakelen vanuit code

Een toestand kiezen tijdens het ontwerpen is de ene helft. De andere is het draaiende scherm dat hem wijzigt, en dat is één regel in een handler:

setVisualState("invalid");

setVisualState("") zet hem terug op Normaal. Schrijf het waar het scherm het te weten komt — de klik van een knop, de wijziging van een vak — op de pagina Code, dezelfde plek waar elke andere handler wordt geschreven. Zie Een scherm laten reageren voor wat een handler kan doen.

Het noemt geen object, en dat hoeft ook niet. De toestand die het wijzigt, is die van het dichtstbijzijnde ding op of boven de handler waarop een toestand is getekend. Teken een toestand van een kaart, verbind een handler met een knop binnen die kaart, en de aanroep gaat over de kaart — en dat is in elke tekening het antwoord, omdat een toestand wordt getekend op het object dat hij wijzigt en de handler is verbonden met iets daarbinnen.

De toestand hoort bij het object waarop hij is getekend, en hij reikt tot binnenin: teken een toestand van een kaart, en het label, de rand en al het andere dat je in de kopie hebt gewijzigd, volgen samen. Eén aanroep, één plek om te kijken wanneer een toestand aan staat en dat niet zou moeten.

Interactietoestanden worden niet vanuit code ingesteld, en het paneel zegt dat: de browser beslist al wanneer iets wordt aangewezen, ingedrukt of focus heeft.

Een toestand die nooit door iets wordt ingesteld, werkt nog steeds — het is waar Getoond in toestand een exemplaar aan vastzet terwijl je een scherm opmaakt. Wanneer code spreekt, vervangt ze die vastzetting.

opmerking

Hier stond een knop Een voorwaarde toevoegen, en die is er niet meer. Die nam een expressie die het scherm voortdurend opnieuw controleerde, wat betekende dat een scherm twee manieren had om te beslissen hoe iets eruitzag — een variant die zichzelf inschakelde, naast handlers die er niet aan konden komen, en niets op het canvas dat zei welke van de twee een bepaalde variant gebruikte. Een scherm beslist dingen nu op één plek.

De prijs is echt en het weten waard: een voorwaarde schakelde zichzelf in op het moment dat het scherm laadde, terwijl een handler alleen wordt uitgevoerd wanneer er iets gebeurt. Moet een toestand aan staan voordat iemand iets heeft gedaan, zet hem dan vast met Getoond in toestand — daar is vastzetten altijd voor geweest, en code vervangt het de eerste keer dat een handler spreekt.

Themakleuren

Onder de kleurkiezers Opvulling en Lijn staat een rij ronde stalen. Dat zijn de themakleuren van het platform — Achtergrond, Oppervlak, Tekst, Secundaire tekst, Rand, Primair, Fout, Geslaagd.

Kies er een in plaats van een kleur en het object is niet langer die kleur, maar wordt die rol. Dat doet ertoe omdat:

• Het het thema van de lezer volgt. Iemand die Parsware in de donkere modus gebruikt, ziet je scherm donker: de oppervlakken worden donker, de tekst wordt licht, de randen passen zich aan. Je tekent het niet twee keer.
• Het de accentkleur van de tenant volgt. Primair is de accentkleur die is gekozen, niet een blauw dat jij in 2026 uitzocht.

Druk op de maan in de werkbalk om je tekening donker te zien, en op de zon om terug te gaan. Die schakelaar wijzigt alleen wat jij bekijkt — niet het eigen thema van de toepassing, dat in Instellingen staat.

Klikken op de staal die al gekozen is, maakt hem los, zodat de kleur die hij toonde een gewone kleur wordt. Dat is de weg terug als je toch dat precieze grijs wilde.

tip

Het frame Stijlen in een nieuw ontwerp is al opgebouwd uit themakleuren. Laat je vormen naar die stalen verwijzen en alles volgt gratis het thema.

Gedeelde stijlen

Een gedeelde stijl is een vorm die de andere volgen. Selecteer een vorm en druk op Opslaan als kleur (de vulling) of Opslaan als vorm (vulling, rand, hoekradius, dekking en schaduw); een tekst heeft Opslaan als tekst. De vorm blijft op het canvas, en het onderdeel Stijl zegt hoeveel vormen hem volgen.

Om er een te volgen, open je de lijst boven Effen, Lineair en Radiaal in het onderdeel Vulling, de lijst Stijl bovenaan voor een vormstijl, of de lijst Tekststijl in het onderdeel Tekst. Verander de vorm van de stijl zelf en alles wat hem volgt verandert mee. Geef een volger een eigen waarde en hij volgt niet meer; Opheffen maakt van de stijl weer een gewone vorm, en de vormen die hem volgden houden hun waarden. Invoegen → Standaardstijlen voegt een kant-en-klare set toe.

De lijsten werken met het toetsenbord: Enter of spatie opent er een, de pijltjestoetsen bewegen erdoor en Escape sluit hem.

Vereisten

• Een scherm om op te tekenen — zie Een Studio-app maken.

Stappen

1. Teken wat je wilt hergebruiken — een statuslabel, een veld met zijn label, een kaart.
2. Selecteer het, klik met de rechtermuisknop, Component maken.
3. Sleep het twee keer uit de lijst Componenten.
4. Selecteer de master, typ onder Toestanden invalid en druk op ＋ Toestand.
5. Wijzig de rand van de variant naar de themakleur Fout.
6. Selecteer het tweede exemplaar en zet Getoond in toestand op Ongeldig. Het verandert op het canvas.
7. Druk op de maan in de werkbalk. Alles wat met een themakleur is geschilderd, volgt.
8. Druk op Opslaan.

Problemen oplossen

• De lijst Componenten is leeg. — niets in dit ontwerp is al een component. Selecteer enkele objecten en kies Component maken.
• Getoond in toestand wordt niet aangeboden. — het geselecteerde object is geen exemplaar (selecteer het buitenste vak), of het component heeft nog geen toestanden: selecteer de master en voeg er een toe onder Toestanden.
• Er is geen knop ＋ Toestand. — het geselecteerde object is niet de master van een component. Selecteer het buitenste vak van het component, of druk op zijn naam op een exemplaar om erheen te gaan.
• Er is geen knop ＋ Exemplaar meer. — nog een plaatsen is het werk van de lijst Componenten: sleep het component precies naar waar je het wilt hebben. Rechtsklik → Exemplaar werkt ook nog.
• Ik heb een exemplaar aan een toestand vastgezet en er veranderde niets. — de kopie van de toestand is identiek aan de master. Wijzig een kleur op de kopie.
• Slepen doet niets. — laat het los op het canvas zelf, niet op een paneel. Of klik gewoon op de rij: het landt midden in de weergave.
• Het donkere voorbeeld ziet er hetzelfde uit. — de tekening gebruikt gewone kleuren in plaats van themakleuren. Kies uit de ronde stalen onder de kleurkiezer.
• Mijn besturingselement negeert de themakleur die ik het gaf. — het uiterlijk van een besturingselement is van het platform, dus het volgt het thema al; alleen de positie en grootte komen uit je tekening.
• Ik heb een exemplaar bewerkt en het sprong terug. — die eigenschap zit vast aan de master. Selecteer de bijbehorende laag binnen de master en vink haar aan onder Beschikbaar maken op exemplaren.
• Ik heb een eigenschap toegevoegd en er veranderde niets. — voor een waarde-eigenschap is niets getekend. Koppel iets binnen de master aan props.<name>, anders is het een waarde die niemand leest.
• props.something is leeg in een expressie. — het component heeft geen eigenschap met die naam, of de eigenschap die het heeft, is van de getekende soort, die een expressie niet kan lezen. Voeg een waarde-eigenschap toe en koppel daaraan.
• Mijn gebeurtenis doet niets. — controleer drie dingen: het component declareert haar (Gebeurtenissen, op de master), een handler binnen het component roept echt emit("name") aan, en het exemplaar heeft er een handler voor. Een component dat een gebeurtenis activeert waarop niemand antwoordt, is geen fout.
• Ik heb een toestand verwijderd en de exemplaren die hem gebruikten, zien er weer normaal uit. — dat is bewust, en de bevestiging zei het: een exemplaar dat is vastgezet aan een toestand die niet meer bestaat, gaat terug naar Normaal in plaats van te verdwijnen.
• Ik sleepte het bijschrift binnen een knop en het verliet het component. — opgelost. Een deel van een component kan er niet meer uit worden gesleept; het bijschrift gaat waar je het neerzet, ook voorbij de rand van de knop, en blijft deel van de knop. Alleen het eigen frame van het component beweegt in en uit de frames eromheen.
• Ik heb een component verwijderd en tekeningen elders op het scherm gingen mee. — ook bewust, en ook in de bevestiging: een exemplaar is een kopie van het component, dus een component dat niet meer bestaat, heeft geen kopieën. Het aantal in het dialoogvenster is hoeveel er waren.

Een toestand, of een heel component, verwijderen

Beide vragen het eerst — en beide alleen wanneer er iets te verliezen valt.

• Een toestand verwijderen (de ✕ ernaast in de lijst Toestanden) haalt de tekening ervan weg, en elk exemplaar dat in die toestand werd getoond, gaat terug naar Normaal. Was er niets aan vastgezet, dan wordt hij zonder vraag verwijderd.
• Een component verwijderen (selecteer de master en druk op Delete) neemt de exemplaren en elke toestand die ervoor is getekend mee, en het dialoogvenster telt beide. Dat is degene die het lezen waard is: de exemplaren kunnen op een ander deel van het scherm staan dan de master die je selecteerde, en de getekende toestanden staan ernaast. Een component met geen van beide wordt zonder vraag verwijderd.
• Iets verwijderen waarin een component is getekend — een frame met een kaart waar je een component van maakte — verwijdert dat component ook, en vraagt het eerst, met het aantal dat verdwijnt. Dit is het verlies dat je niet ziet aankomen vanuit wat je selecteerde: het frame ziet eruit als een frame.

Dat laatste gebeurde vroeger stilletjes, en dat was een eigen oplossing waard. Het component werd van het canvas gehaald en de definitie bleef achter, verwijzend naar een tekening die niet meer bestond — dus het palet bleef het tonen en het eruit slepen deed helemaal niets. Heb je een component in die toestand, dan ruimt het openen van de app het spook nu op, en zie je eerlijk dat er niets in zit om te plaatsen.

Er verschijnt geen dialoogvenster voor een gebaar dat alleen gevolgen heeft voor wat je selecteerde, omdat een bevestiging die vraagt of je bedoelde wat je net deed, een klik is die je leert niet meer te lezen.

Eén verwijdering vraagt het wel, en wel bij het opslaan: een component dat andere apps plaatsen. Je componenten worden aangeboden aan elke andere app in de omgeving, dus er een verwijderen is een wijziging aan die van hen — de vraag noemt ze, en annuleren laat je canvas precies zoals het is. Zie Een component in een andere app gebruiken.

Gerelateerde scenario's

• Een component in een andere app gebruiken.
• Een Studio-app tekenen.
• Een Studio-app maken.