Een Studio-app tekenen

Doel

Een scherm op het canvas tekenen, en zeggen wat elk object is.

Waar het opent

Open je oplossing, kies Studio-apps, selecteer er een en druk op Ontwerpen. Het canvas opent ter plekke, onder hetzelfde kruimelpad en dezelfde omgevings- en oplossingskiezer — hetzelfde canvas dat de rapport- en dashboarddesigners gebruiken, dus niets van wat je er al van weet, is veranderd.

Een app bestaat uit meerdere schermen

Elk frame dat je als het scherm markeert, is een scherm van deze app. Teken er een tweede naast het eerste, markeer het op dezelfde manier, en je app heeft er twee — op één canvas, naast elkaar, zodat je ze allebei tegelijk ziet.

Een scherm heet zoals zijn frame heet. Hernoem het frame in de lijst Lagen en je hebt het scherm hernoemd. Die naam is geen versiering: het is wat navigatie zal vragen, dus twee schermen met dezelfde naam worden bij het opslaan geweigerd, met de naam van het scherm dat je moet hernoemen.

Zeg op welk scherm de app opent. Zodra een app twee schermen heeft, verschijnt er een kiezer Opent op in de titelbalk. Kies het scherm waarop iemand die je app opent, moet landen. Met één scherm is er geen kiezer, want er valt niets te kiezen.

Tussen schermen wisselen komt hierna

Twee schermen tekenen werkt vandaag al, en kiezen welk scherm opent ook. Wat er nog niet is, is navigate — de actie die iemand van het ene naar het andere scherm brengt — en de knoppen die haar aanroepen. Dat is het volgende deel, en het ontbreekt bewust in plaats van aanwezig en stil te zijn: een actie die niets doet, is erger dan een actie die niet wordt aangeboden.

Het ene nieuwe: wat een object is

Selecteer een object en open het tabblad Scherm naast Grafisch. Daar staat één vraag:

Dit object is …

Beantwoord die, en je hebt het platform iets verteld wat het zelf niet kan achterhalen. Een rechthoek met tekst die een kop is en een rechthoek met tekst die een alinea is, zien er op het canvas hetzelfde uit; alleen jij weet welke welke is, en het verschil bepaalt wat een schermlezer aankondigt en hoe het uiteindelijke scherm eruitziet.

Antwoord	Gebruik het voor
Het scherm	Het frame waarin al het andere wordt getekend. De grootte ervan is de grootte van het scherm.
Een gebied	Een vak dat andere dingen groepeert — een kopstrook, een zijbalk, een kaart.
Een kop	Een titel.
Een alinea	Een stuk gewone tekst.
Een lijst / Een lijstitem	Een lijst, en één item daarin.
Een knop	Iets om op te drukken.
Een afbeelding	Een plaatje dat iets betekent, in tegenstelling tot versiering.
(leeg gelaten)	De grafische laag van het scherm — getekend, maar zegt niets over wat het scherm bevat.

Daaronder biedt dezelfde lijst Besturingselement: een Knop, een Tekstvak, een Tekstgebied, een Selectievakje, een Vervolgkeuzelijst of een Datumkiezer. Zie hieronder — dat zijn geen tekeningen.

Je zult zien dat de lijst verandert met wat je hebt geselecteerd. Een frame kan het scherm zijn; een tekstobject niet, want de grootte van het scherm is de grootte van het scherm. Een lijn of een vorm heeft helemaal geen antwoord, en het tabblad zegt dat in plaats van je een leeg paneel te tonen.

Begin met een frame te tekenen en het als het scherm te markeren. Al het andere komt erin, en objecten binnen een frame kunnen aan de randen worden vastgezet, zodat ze meebewegen wanneer het van grootte verandert — hetzelfde vastzetten dat je al gebruikt in de andere twee designers.

De grootte van een stuk tekst bepalen

Selecteer een tekst, en de sectie Tekst eindigt met twee knoppen:

• Vaste grootte — de standaard, en wat tekst altijd heeft gedaan. De breedte bepaal jij en de woorden lopen daarin door. De hoogte bepaal je ook zelf, en die is een ondergrens: maak het vak hoger als je wilt, en het wordt nooit korter dan de woorden. (Voorheen bewogen de verticale grepen en sprong het vak meteen terug, en daardoor voelde tekst als het enige object waarvan je de grootte niet kon wijzigen.)
• Passend bij de tekst — het vak wordt precies de tekst: zo breed als de langste regel die je typte en zo hoog als die regels. Er loopt niets door, en de grepen voor het formaat verdwijnen, want er valt niets meer voor ze te beslissen. Druk op Vaste grootte om ze terug te krijgen.

Er is bewust geen derde modus waarmee een vak korter kan zijn dan de woorden. Een vak dat wat je typte achter zijn eigen rand verbergt, is een fout die je niet ziet, en een ondergrens geeft je alles wat "de grootte wijzigen" nodig heeft, zonder die fout.

Waar de woorden in het vak staan

De uitlijningsrij in Tekst heeft een tweede groep van drie: Woorden bovenaan, in het midden en onderaan. Die zegt aan welke rand de woorden zijn verankerd wanneer het vak hoger is dan de woorden.

Het midden is de standaard, en dat is wat een opschrift in een knop nodig heeft — een opschriftvak dat in een knop van 40px is getekend, is bewust hoger dan zijn ene regel, en centreren zet de woorden waar je de knop tekende.

Kies bovenaan voor alles wat kan groeien. Een gecentreerd vak dat te klein blijkt, loopt in beide richtingen over, dus een notitie die over drie regels doorloopt, klimt over het label erboven heen. Door haar aan de bovenkant te verankeren, kan ze alleen naar beneden groeien, in ruimte die je kunt zien. Het is ook wat het canvas altijd heeft getekend, dus het is de enige instelling waarbij de tekening en het scherm precies overeenkomen.

Om het schermframe later weer te selecteren, klik je één keer op de lege achtergrond — klikken op een frame bereikt meestal wat erin getekend is, en één klik op een lege plek selecteert het frame zelf, met grepen en al. Is er geen lege plek meer, gebruik dan rechtsklik → Laag selecteren, of het paneel Lagen. Wijzig de grootte door een greep te slepen of door een breedte en hoogte in de inspector te typen; hoe dan ook volgen de vastgezette objecten erin.

Tekenen op één ding als er meerdere op elkaar liggen

Een scherm met tabbladen bestaat uit meerdere panelen die in dezelfde rechthoek zijn getekend, waarvan er één tegelijk wordt getoond. Op het canvas zijn ze allemaal getekend, dus alleen het bovenste kan worden aangeklikt, gesleept of van grootte veranderd — en de andere liggen ergens daaronder, onbereikbaar.

Druk op de doelknop op de rij van een laag (naast het oog en het hangslot) en al het andere verdwijnt van het canvas. Teken erop en druk er dan nogmaals op — of op Alles tonen in de banner bovenaan de lijst Lagen, die er is zodat een canvas dat half leeg is geraakt, altijd zegt waarom.

Het verandert niets aan je app. Het oog ernaast zou ook de weg vrijmaken, maar het oog is de zichtbaarheid van de tekening zelf: een laag die je verbergt, is een laag die helemaal niet in je app verschijnt, dus twee panelen verbergen en vergeten ze weer zichtbaar te maken, zou een scherm publiceren waarop twee panelen ontbreken. Dit geldt alleen voor het canvas, wordt niet opgeslagen en is weg als je de designer de volgende keer opent.

De lijst Lagen heeft hetzelfde rechtsklikmenu

Klik met de rechtermuisknop op een rij in de boom Lagen en je krijgt het menu dat het canvas je geeft: volgorde wijzigen, groeperen, maskeren, spiegelen, een component maken, vergrendelen, dupliceren, verwijderen — allemaal, toegepast op die rij.

Het selecteert eerst de rij, zodat het menu altijd werkt op waar je naar wees, en niet op wat toevallig eerder geselecteerd was. Er is hier geen submenu Laag selecteren: dat bestaat om een klik op op elkaar liggende vormen te verduidelijken, en een rij in een boom is al één object.

Dit is het nuttigst voor precies de objecten die het canvas lastig maakt — iets wat diep in een frame zit, achter iets anders, of buiten beeld gescrold. Zoek het op in de boom en werk het daar bij.

Toetsen voor het beeld en de vormen

• Zoomen met Ctrl+= en Ctrl+- (⌘ op een Mac), of met Ctrl en het muiswiel. Ctrl+0 gaat terug naar 100%.
• Shift+1 toont alles op het canvas. Shift+2 vult het venster met wat u hebt geselecteerd.
• Verschuiven met het muiswiel (Shift voor zijwaarts), door de spatiebalk ingedrukt te houden en te slepen, of met het gereedschap Hand (H).
• De pijltoetsen verplaatsen de selectie één pixel; met Shift tien. Elke druk is één stap ongedaan maken.
• Een vorm die u net hebt getekend is geselecteerd en het gereedschap Selecteren is terug, zodat u hem meteen kleur en een naam kunt geven.
• Een getypte Rotatie draait de vorm om zijn midden, zoals de draaigreep.
• Tijdens het slepen lijnen hulplijnen randen en middens uit met wat op het scherm staat. Houd Alt ingedrukt om vrij te plaatsen.
• Klik met het tekstgereedschap en typ. De nieuwe tekst is geselecteerd en de voorlopige tekst gemarkeerd, dus de eerste toets vervangt die.
• Een klik op een vorm in een groep selecteert de hele groep. Dubbelklik om die ene vorm te bereiken.
• Samenvoegen, Aftrekken, Doorsnede en Uitsluiten zetten het resultaat waar de onderste vorm stond: in hetzelfde frame, onder haar naam, met ronde hoeken als die er waren.
• Ctrl+D op iets in een automatische indeling zet de kopie er direct achter, in de rij.

Vereisten

• Het scherm bestaat — zie Een Studio-app maken.

Stappen

1. Open je oplossing, kies Schermen, selecteer er een en druk op Ontwerpen.
2. Teken een frame. Open, met het frame geselecteerd, het tabblad Scherm en stel Dit object is in op Het scherm.
3. Teken erin: frames voor de gebieden, tekst voor de koppen en de lopende tekst, afbeeldingen waar je plaatjes wilt.
4. Selecteer ze een voor een en zeg wat ze zijn. Laat de puur decoratieve leeg.
5. Druk op Voorbeeld om het scherm te zien zoals een gebruiker het ziet.
6. Druk op Opslaan.

Als je het scherm opnieuw opent, krijg je je tekening precies terug zoals je haar achterliet.

Voorbeeld toont het echte werk

Voorbeeld vervangt het canvas door het scherm zelf — geen afbeelding ervan, en ook niet het canvas met de hulplijnen uit. Het is hetzelfde onderdeel dat de Platformshell laadt, dus wat je ziet, is wat een gebruiker krijgt. Selecteer er wat tekst in en je merkt dat die selecteerbaar is; druk op Ctrl+F en de browser vindt haar.

Druk op Ontwerpen om terug te gaan. Voorbeeld toont altijd wat er nu op het canvas staat, inclusief bewerkingen die je nog niet hebt opgeslagen.

Wat Opslaan werkelijk doet

Opslaan bewaart twee dingen: je tekening, en het scherm gecompileerd tot gewone webelementen. Een kop wordt een echte kop, een alinea een echte alinea, een knop een echte knop. Daardoor is de tekst selecteerbaar en doorzoekbaar, krijgt de knop een focusring en kan een schermlezer de pagina goed voorlezen — niets daarvan kan een tekening op zichzelf.

Je antwoorden in de lijst Dit object is zijn dus geen labels. Ze bepalen wat elk object wordt.

Daaruit volgen twee dingen die goed zijn om te weten:

• Je scherm wordt gespiegeld voor lezers van het Perzisch en Arabisch. Alles wat je links hebt vastgezet, verschijnt rechts, en tekst die je links uitlijnde, wordt uitgelijnd op de leesrand. Je hoeft het niet twee keer te tekenen.
• De grootte wijzigen kost niets. Een object aan beide randen vastzetten laat het meerekken, en het aan de onderkant vastzetten houdt het daar — dat doet de browser zelf, dus een scherm blijft soepel hoe het ook van grootte verandert. Maak je het smal genoeg, dan scrolt de pagina in plaats van te krimpen: een scherm is iets waarin mensen lezen en typen, en krimpen levert tekst op die niemand kan lezen.

Als Opslaan je iets vertelt

Opslaan kan terugkomen met een opmerking. Geen daarvan houdt het opslaan tegen:

• Geen enkel object is als het scherm gemarkeerd — in plaats daarvan is de hele tekening gebruikt. Markeer een frame als het scherm, zodat de objecten erin iets hebben om aan vast te zitten.
• Nog een object is als het scherm gemarkeerd — alleen het eerste wordt gebruikt; de rest is gewone vakken geworden.
• Een knop heeft geen tekst — er is niets wat een schermlezer kan voorlezen. Teken een tekstobject in de knop.
• Er is een toestand getekend voor een besturingselement — die is niet gebruikt. Een besturingselement weet al hoe het eruitziet wanneer het wordt aangewezen, ingedrukt, gefocust of uitgeschakeld.

Als je een echt besturingselement wilt, geen tekening ervan

Teken een vak en kies op het tabblad Scherm een van de items onder Besturingselement in plaats van een element. Wat op het uiteindelijke scherm verschijnt, is het eigen besturingselement van het platform — dezelfde datumkiezer die de recordformulieren gebruiken, hetzelfde tekstvak, dezelfde knop.

Dat is belangrijker dan het klinkt. Een rechthoek die eruitziet als een datumveld, heeft geen kalender. Een rechthoek die eruitziet als een tekstvak, heeft geen cursor, geen selectie, geen automatisch aanvullen en geen toetsenbordgedrag. En als een Perzische gebruiker je scherm opent, toont de echte datumkiezer een Jalali-kalender — zonder dat jij iets hoeft te doen, want hij is nooit opnieuw getekend.

Wat van jou blijft, en wat van het platform blijft. Waar je het tekende, hoe groot het is, en hoe je het schilderde, is allemaal van jou — de vulling, de rand, de hoekradius, en de kleur en dikte van de woorden erin. Wat van het platform blijft, is alles wat een tekening niet kan zeggen: de cursor, de kalender, de cijfers, het toetsenbordgedrag, en de focusring waar je niet overheen hebt geschilderd.

Alles wat je met rust laat, blijft van het platform, en dat is de bedoeling, geen beperking. Een besturingselement dat je nooit hebt geschilderd, ziet er precies zo uit als elk ander besturingselement in het product, en volgt het thema wanneer dat verandert. Schilder alleen de rand, en alleen de rand is van jou.

Schilder met een token, niet met een kleur

Kies een staal uit de tokenrij onder de vulling in plaats van een hexwaarde te typen. Primary is de accentkleur van de tenant in lichte en donkere modus; een hexwaarde klopt in één van beide. Een besturingselement dat uit het palet Besturingselementen wordt neergezet, komt al in tokens geschilderd binnen, en daarom ziet het er in beide goed uit.

Schrijf het label in het vak. De woorden die je erin tekent, worden het opschrift van een knop, het label van een selectievakje of de grijze tijdelijke tekst in een tekstvak — er is geen apart veld om in te vullen.

Dingen die je typt in plaats van tekent:

• Opties, bij een vervolgkeuzelijst, één per regel. Het is het enige aan een besturingselement dat je niet kunt tekenen: een gesloten vervolgkeuzelijst toont een waarde en nooit de lijst.
• Neemt, bij een tekstvak — wat voor soort waarde het bevat: Tekst, Een wachtwoord, Een e-mailadres, Een getal, Een telefoonnummer, Een webadres. Geen versiering: een wachtwoordvak maskeert wat er wordt getypt en komt met de knop van het platform om het zichtbaar te maken, een vak voor een e-mail- of webadres toont op een telefoon het juiste toetsenbord, een getalvak een numeriek toetsenblok.
• Alleen-lezen, bij een tekstvak of tekstgebied — het kan worden gelezen, geselecteerd en gekopieerd, maar niet gewijzigd. Anders dan Uitgeschakeld, dat op elk besturingselement staat en betekent dat het besturingselement helemaal niet voor deze gebruiker is: een uitgeschakeld besturingselement wordt overgeslagen door het toetsenbord en door een schermlezer, een alleen-lezen besturingselement niet.
• Maximaal aantal tekens, bij een tekstvak of tekstgebied — de browser stopt het typen bij die lengte.
• Neemt, bij een bestandskiezer — Elk bestand of Een afbeelding. Het bepaalt twee dingen tegelijk: wat het bestandsdialoogvenster aanbiedt, en of wat er is gekozen als afbeelding wordt getoond.
• Kiest, bij een datumkiezer — Een datum, Een datum en een tijd of Een tijd.
• Kalender, bij een datumkiezer — De instelling van de tenant, Gregoriaans of Perzisch. Laat het op de eerste staan, tenzij de kalender een feit is over de gegevens en niet over de lezer: de vervaldatum van een paspoort is voor iedereen Gregoriaans, terwijl "de datum waarop dit is goedgekeurd" moet worden getoond in de kalender die de lezer gebruikt.

Een bestandskiezer houdt het bestand vast; een handler bewaart het

Koppel Waarde aan een toestandsveld en het gekozen bestand komt erin terecht. Een tekst die aan hetzelfde veld gekoppeld is, toont de naam van het bestand. Om het bestand te bewaren, geef je het veld aan createRecord of updateRecord als waarde van een Bestand- of Afbeelding-veld — updateRecord("contact", id, { new_photo: getState("photo") }) — en het wordt bij het record opgeslagen. Tot een handler dat doet, blijft het bestand in de pagina en is het weg als je het scherm verlaat. Een bestand groter dan 4 MB wordt al in de kiezer geweigerd, voordat het gelezen wordt.

opmerking

Heb je Ingeschakeld aan een expressie gekoppeld, dan is het vinkje Uitgeschakeld grijs en zegt het waarom: de expressie beantwoordt al wanneer het besturingselement mag worden gebruikt, en een vinkje ernaast zou een tweede antwoord zijn. Koppel enabled of vink Uitgeschakeld aan, niet allebei.

Besturingselementen nemen ook getekende toestanden aan. Teken het besturingselement, dupliceer het, wijzig de kleuren van de kopie en markeer de kopie als invalid — precies zoals je zou doen bij een vak dat je tekende. Wat meereist, is het verschil, en dat komt op het besturingselement zelf terecht. Zie Een ontwerp hergebruiken met componenten voor hoe een toestand wordt gedeclareerd.

Welke gebruik je dan? Teken het wanneer het uiterlijk de kern is — een oproep tot actie in je eigen kleuren, met een aanwijseffect dat je zelf tekende. Kies een besturingselement wanneer het gedrag de kern is: een kalender, een cursor, een toetsenbord.

Een "gevarenknop" maken

Er is geen vervolgkeuzelijst Uiterlijk, en die is ook niet nodig. Zo krijg je een rode knop:

1. Zet een Knop neer uit het palet Besturingselementen.
2. Stel de vulling in op de token Error en de kleur van het opschrift op wit.
3. Selecteer hem en druk op Component maken — de knop zelf wordt de component. Hernoem de laag naar Danger button, en de component wordt mee hernoemd.

Nu staat hij in de lijst Componenten, en elk scherm dat er een plaatst, krijgt dezelfde rode knop. Wil je een aanwijseffect? Voeg een toestand toe aan de component en teken de kopie donkerder. Wil je ook een knop Success? Doe hetzelfde nog een keer — één handeling die je al kent, in plaats van een vijfde item in een vervolgkeuzelijst dat iemand anders voor je moet toevoegen.

Naar ergens linken

Selecteer een vak of een stuk tekst en kies op het tabblad Scherm Een link. Er volgen twee velden:

• Adres — waar het heen gaat: https://example.com/docs, mailto:someone@example.com, tel:+441234567890, of een pad binnen deze app zoals /reports/monthly.
• Opent — In dit venster (het gebruikelijke) of In een nieuw tabblad.

Typ de naam van een ander scherm van deze app om ernaartoe te gaan: Contacts. De link gaat naar dat scherm waar de app ook wordt geopend, los of in een modelgestuurde app, waar hetzelfde scherm een ander adres heeft. Klikken wisselt binnen de app zonder de pagina te herladen, en met de middelste muisknop opent het scherm nog steeds in een nieuw tabblad.

Waarom dit een link is en geen knop met een handler. Met de middelste muisknop klikken opent een tabblad. Rechtsklikken biedt Link openen in nieuw tabblad en Linkadres kopiëren. Aanwijzen toont de bestemming in de statusbalk van de browser. Een schermlezer kan elke link op het scherm opsommen en de jouwe daartussen voorlezen. Niets daarvan komt van een handler — het komt allemaal doordat het element een echte link is, en precies daarom is dit iets wat je markeert in plaats van iets wat je script.

Wordt de bestemming berekend, koppel dan Adres in plaats van het te typen — "https://example.com/" + state.topic. De koppeling wint, en het paneel maakt het vak grijs en zegt dat. Zie Een scherm laten reageren.

Sommige adressen worden geweigerd, en het paneel wordt rood terwijl je er een typt: alleen webadressen (http, https), e-mailadressen, telefoonnummers en paden binnen deze app zijn toegestaan. Een link die een script uitvoert, is geen link, en een scherm kan uit een import komen in plaats van uit je eigen handen.

tip

Is het het scherm dat bepaalt waar het heen gaat — na een Opslaan, of op basis van wat iemand koos — gebruik dan in plaats daarvan openUrl("…") in een handler. Dezelfde regel voor adressen; zie Een scherm laten reageren.

Teken hoe het eruitziet als het wordt aangewezen

Toestanden horen bij een component. Selecteer waaraan je een toestand wilt geven, klik met de rechtermuisknop en kies Component maken — voeg dan de toestanden toe op de component, waar ze samen worden vermeld. Volledige uitleg: Een ontwerp hergebruiken met componenten.

Dat is één plek in plaats van twee. Vroeger stond er op dit tabblad ook een vak Een toestand tekenen, dat om een naam en een interactie vroeg voordat je iets had getekend, en dat op objecten stond zonder lijst met toestanden om aan toe te voegen; het tabblad Scherm zegt nu in plaats daarvan waar toestanden wonen.

Een component met één instantie is een prima component. Wil je alleen een aanwijseffect op één knop, maak er dan een component van en geef het de toestand — dat is de prijs, en het is ook wat je in staat stelt die knop morgen twee keer te plaatsen.

Wat de naam van een toestand is, en wat Terwijl is

Een toestand heeft twee helften, en die geef je op twee plekken op:

• De naam is van jou — invalid, overBudget, awaitingApproval. Selected, Ticked, Invalid, Success, Warning, Loading en Read-only zijn alleen suggesties.
• Terwijl — op het eigen paneel van de variant: Altijd, of Aanwijzen, Ingedrukt, Gefocust. Die drie zijn van de browser, dus die kun je niet zelf verzinnen.

opmerking

Disabled is een naam, geen Terwijl. Het stond vroeger in die kiezer, en daar hoort het niet: Aanwijzen, Ingedrukt en Gefocust zijn dingen die iemand doet, en elk ervan stopt op het moment dat die persoon stopt. Disabled is wat het besturingselement is — je scherm heeft dat besloten — dus het is een toestandsnaam zoals elke andere, getypt als disabled.

Je hoeft niet te zeggen wanneer hij aan staat. Het scherm weet dat al, uit het vinkje Uitgeschakeld van het besturingselement of uit de expressie Ingeschakeld, en het zet de toestand voor je aan. Teken een variant, noem hem disabled, en een besturingselement dat niet mag worden gebruikt, draagt hem.

Stel beide in en je hebt een combinatie — Invalid terwijl het wordt aangewezen. Je hoeft nooit elke combinatie te tekenen: wijst een gebruiker iets aan in de toestand Invalid en heb je alleen Invalid getekend, dan krijgt hij Invalid.

Gebruik letters, cijfers, - en _, beginnend met een letter. Een naam die geen toestand kan zijn, maakt de knop grijs en zegt dat, in plaats van je er vier te laten tekenen en pas bij Opslaan op de weigering te stuiten.

Drie dingen om te weten:

• Alleen de verschillen worden bewaard. Wijzig je de achtergrond van de kopie, dan wordt alleen de achtergrond onthouden. De grootte van het origineel wijzigen of het opschrift ervan bewerken hoeft dus niet in elke toestand te worden herhaald — en dat voorkomt een knop die verspringt als je hem aanwijst.
• Zet de kopie neer waar je wilt. Waar de kopie op het canvas staat, maakt geen deel uit van de toestand; het is gewoon een plek om ernaar te kijken.
• Maar iets binnen de kopie verplaatsen, wel. Schuif in de kopie de knop van een schakelaar naar het andere eind van zijn baan, en de knop van de schakelaar schuift wanneer de toestand aangaat — hij glijdt vloeiend over in plaats van te springen. Zo teken je een schakelaar, een stapper of een markering die meebeweegt. De grootte van iets binnen de kopie wijzigen telt ook mee, en dat springt in plaats van vloeiend te gaan: een vak laten groeien herschikt wat eromheen staat, en dat animeren is wat een scherm laat haperen.
• Er draait niets. De browser doet het allemaal, dus een scherm met vijftig aanwijstoestanden is precies even snel als een scherm zonder.

Voeg je een object toe aan de kopie of verwijder je er een, dan werkt de toestand niet meer, en Opslaan zegt dat, met de naam erbij. Een toestand moet dezelfde vorm hebben als wat hij spiegelt. Wil je iets extra's tonen bij aanwijzen, teken het dan in het origineel, verberg het daar, en maak het zichtbaar in de toestand — verborgen en zichtbaar is een verschil in hoe het eruitziet, en dat kan een toestand.

Er een pictogram op zetten

Componenten → Pictogram… opent de eigen pictogramkiezer van het platform — de hele Lucide-set, doorzoekbaar op wat een pictogram betekent in plaats van op de exacte naam. Kies er een en het komt op het canvas.

Wat erop komt, is een gewoon getekend object, niets bijzonders:

• het wordt geschilderd met dezelfde vullingen als al het andere, dus geef het een ontwerptoken en het volgt de lichte/donkere modus van de lezer;
• het neemt getekende toestanden aan, dus het kan bij aanwijzen van kleur veranderen samen met de kaart waarin het staat;
• het kan Getoond koppelen; zo draagt één knop twee glyphs en toont hij de passende — de knop voor de kleurmodus in het voorbeeld tekent een maan en een zon en toont degene die de modus niet is.

Het komt binnen met een lijn in plaats van een vulling, geschilderd in color.text, 24 bij 24. Wijzig de grootte, geef het een andere kleur, zet het in een knop naast het opschrift. Daarna is er niets bijzonders meer aan.

Een knop met alleen een pictogram erin wordt geweigerd. Opslaan waarschuwt has no text in it, so a screen reader has nothing to announce — zet de woorden naast de glyph, zoals het besturingselement Dark mode in het voorbeeld Support desk doet. Dat is ook het vriendelijkere besturingselement: niet iedereen heeft geleerd dat een maan donker betekent.

De rij werkt alleen met klikken en niet met slepen, want een sleepactie moet weten wat hij meedraagt, en deze zou een dialoogvenster meedragen.

De verkeerde gekozen? Wijzig het

Selecteer het pictogram en het eigenschappenpaneel toont onder de naam een veld Pictogram, met dezelfde kiezer erin. Kies een ander en alleen de tekening wordt vervangen — de grootte, de kleur, de toestanden en de koppelingen blijven precies zoals je ze had ingesteld.

Dat is de hele reden om het daar te wijzigen in plaats van het te verwijderen en een nieuw te plaatsen: een nieuw pictogram komt binnen op 24 bij 24 in color.text en weet niets van de knop waarin je het had gezet.

Een pictogram dat je zelf met de pen hebt getekend, heeft geen veld Pictogram, en dat hoort ook zo: er zit geen naam achter om te verwisselen, en het enige wat een kiezer zou kunnen doen, is je tekening weggooien.

Een pictogram in een knop zetten

Selecteer een knop en het eigenschappenvenster toont een veld Pictogram van de knop, met dezelfde kiezer. Kies een pictogram en het wordt in de knop getekend: in het midden als de knop geen tekst heeft, anders vóór de tekst, half zo hoog als de knop en op zijn plaats wanneer de knop van grootte verandert. Kies een ander om het te wisselen, of maak het veld leeg om het te verwijderen.

Een lijst, een tabel of een menu: de rijen schilderen

Teken een vak, zet de rijen erin, en de velden Rijen van het vak schilderen ze — boven op wat je elke rij hebt laten zijn. Het zijn er vier:

• Om de andere rij — de zebra. De eerste rij houdt wat je tekende, dus wat je tijdens het tekenen ziet, is hoe rij één eruitziet.

• Rij onder de aanwijzer — de markering die de muis door een lijst volgt. Die kost niets: de browser doet het, dus een tabel van tweehonderd rijen is even snel als een lege.

• Gekozen rij — de rij die iemand heeft gekozen. Zie hieronder hoe een rij zegt dat zij de gekozen is.

• Rand van de gekozen rij — een balk op dezelfde rij, en De balk staat zegt aan welke rand:

  • Langs de beginrand — links in het Nederlands, rechts in het Perzisch en Arabisch, zonder dat je iets twee keer hoeft in te stellen. Wat een navigatiebalk wil.
  • Onder de rij, als een tabblad — wat een strook tabbladen wil, want zo wordt een gekozen tabblad in elk product gemarkeerd. Een rij tabbladen loopt horizontaal, dus een balk links langs het eerste tabblad is een besturingselement dat niemand herkent.

  Standaard is het de accentkleur, want op een rustige lijst zijn een gekozen rij en een aangewezen rij twee tinten van hetzelfde grijs, en de balk zegt in één oogopslag je bent hier.

Waar twee kleuren dezelfde rij zouden schilderen, wint de latere in die lijst: de aanwijzer bedekt de zebra, en de gekozen rij houdt haar eigen kleur, ook onder de aanwijzer. Een gekozen rij er ongekozen laten uitzien net als iemand ernaar grijpt, zou erger zijn dan dat de markering voor één rij stil blijft. De rand is geen kleur van de rij en valt buiten die wedstrijd — hij wordt geschilderd naast wat er ook won, en hij verplaatst niets op de rij, zodat er niets opzij springt wanneer de selectie verschuift.

tip

Teken de balk niet. Een rechthoek naast één item kan niet bewegen, dus als je op een ander item drukt, blijft hij staan waar hij stond — dat is een afbeelding van een selectie in plaats van een selectie. Stel Rand van de gekozen rij in en hij volgt hetzelfde antwoord als de vulling.

Ze gelden voor de vakken direct binnen het vak waarop je ze instelt, en niet dieper — dus een lijst met kaarten krijgt strepen op de kaarten, niet op de vakken binnen elke kaart.

Kies waar je kunt een themakleur in plaats van een eigen kleur. Een grijs dat je hebt opgepikt, klopt in lichte modus en is fout in donkere modus, en het is onzichtbaar fout: de tekening ziet er nog steeds uit als een tekening van een licht scherm.

Als er meer rijen zijn dan het vak hoog is

Een vak dat je tekende voor zes rijen, bevat er honderd zodra er een echte tabel achter zit, dus elke lijst moet deze vraag beantwoorden. De vervolgkeuzelijst Inhoud die niet past van het frame is de plek:

• Tonen — het loopt eruit is wat een tekening doet, en klopt voor een kaart met een schaduw. Bij een lijst zorgt het ervoor dat de rijen over de paginaknoppen en alles eronder heen lopen.
• Verbergen snijdt ze af. De zevende rij is dan onbereikbaar, en dat bedoelde zelden iemand.
• Ernaartoe scrollen is het antwoord voor een lijst: het vak blijft de grootte die je tekende en de inhoud scrolt erbinnen. Een lijst die kort genoeg is om te passen, toont helemaal geen schuifbalk.

Zeg dan welke kant het op scrolt. Een tweede vervolgkeuzelijst, Welke kant het scrolt, verschijnt zodra je Ernaartoe scrollen hebt gekozen:

• Beide kanten op is wat een lijst wil.
• Omlaag — woorden lopen door is wat een kolom lopende tekst wil. De as waarlangs je niet scrolt, wordt afgesneden, en de horizontale as afsnijden is precies wat een alinea laat doorlopen naar de volgende regel in plaats van langs de zijkant uit het vak te lopen. Kies dit wanneer het vak een lang tekstveld bevat.
• Opzij — rijen blijven op één regel is wat een brede tabel met kolommen wil, zodat een rij een rij blijft.

Een lang tekstveld is een frame dat je om de tekst tekent

De vervolgkeuzelijst staat op een frame. Een stuk tekst heeft zelf niets om tegen af te snijden, want het groeit mee met de woorden — teken dus een frame zo groot als de notitie moet innemen, zet de tekst erin, en stel dat frame in op Ernaartoe scrollen en Omlaag — woorden lopen door.

Hoeveel je tegelijk ziet, hangt af van hoe groot je het frame tekende. Het tekstobject hoger maken verandert niets wat je kunt zien, want het frame houdt het zicht vast. Het detailvenster in het voorbeeld Support desk is precies dit, over een Notes-veld van tweeduizend tekens.

Twee dingen die je het best tegelijk doet:

• Zet het vak boven en onder vast in Beperkingen, zodat een hoger venster meer rijen toont in plaats van meer lege ruimte eronder.
• Houd de kop buiten het vak. Een kop die als eerste rij van de lijst zelf is getekend, scrolt mee met de rijen; als apart frame erboven getekend, blijft hij staan. Het bord in het voorbeeld Support desk doet precies dit.

Eén rij tekenen, één per record krijgen

De rijen van een tabel zijn geen twintig vakken die je tekende. Teken er één, en zeg waarover hij wordt herhaald:

1. Laad de records. Schrijf in de handler Geladen van het scherm loadRecords("par_account", "accounts") — de naam van de tabel, en een toestandsveld om de rijen in te zetten. Een derde argument zegt hoeveel er maximaal, of stelt een uitgebreidere vraag: { top: 20, where: { par_status: "Open" }, orderBy: "par_name" }. Zie Records lezen en schrijven.
2. Zeg wat er wordt herhaald. Selecteer de rij die je tekende en vul Eén hiervan per in met state.accounts.
3. Zeg wat elke cel toont. Koppel een opschrift in de rij aan row.par_name — row is dat record. rowIndex is de positie, geteld vanaf nul.

Twee dingen over het vak rond de rij:

• Het moet zijn onderliggende elementen stapelen — zet automatische indeling aan. Elke kopie van een vak dat je hebt geplaatst, houdt de positie waarop je het plaatste, dus alle veertig zouden boven op de eerste belanden. Opslaan zegt het als je het vergeet.
• Al het andere in dat vak blijft ongemoeid. Een koprij die boven de inhoud is getekend, wordt niet herhaald, want de herhaling zit op de rij en niet op het vak.

Je kunt een besturingselement net zo makkelijk herhalen als een vak — een selectievakje per rij is hoe iemand meerdere records selecteert, en het is een gewoon selectievakje met row.id in de handler.

Eén beperking die je beter kent voordat je ertegenaan loopt: een herhaling kan niet binnen een herhaling. row zou op dezelfde plek twee verschillende dingen betekenen, dus Opslaan weigert de binnenste en zegt welke.

Welke rij de gekozen is

Twee helften, en geen van beide is meer dan een regel:

1. Zeg welke — koppel de eigenschap Gekozen van elke rij aan een vergelijking, zoals row.id == state.picked. Het is een koppeling en niet iets wat je aanzet, en daardoor houdt de vorige rij op hetzelfde moment op gekozen te zijn: elke rij beantwoordt de vraag opnieuw wanneer de toestand verandert.
2. Stel het in wanneer op een rij wordt gedrukt — setState("picked", "…") in de handler Ingedrukt van de rij.

Heb je ook een variant Gekozen van de rij getekend, dan zet dezelfde koppeling die ook aan. Er is hier één idee van "gekozen", niet twee: de vulling en de variant lezen hetzelfde antwoord.

De rij vullen, en een menu voor een telefoon

Elk object binnen een frame met automatische indeling heeft de lengte die je tekende — dus een rij kan nooit smaller zijn dan wat erin staat, en op een telefoon loopt hij buiten beeld. Selecteer het object en vink onder Formaat wijzigen op het tabblad Grafisch De rij vullen (of De kolom vullen) aan: het neemt de lengte die de andere overlaten, en geeft die terug als er minder is.

Zo wordt de bovenbalk van een website getekend: de naam van de site vult de rij, zodat de links bij elke breedte tegen de verste rand blijven.

Een formulier dat op een telefoon de hele breedte is, en op een desktop een kaart. Selecteer een frame binnen een verticale automatische indeling en stel Maximale breedte in onder Formaat wijzigen: de kolom rekt het uit over een smal scherm en stopt op een breder scherm bij zoveel pixels en centreert het. Een aanmeldkaart of een contactformulier teken je zo één keer — niet één keer per breedte. Leeg betekent geen limiet.

Drie kaarten naast elkaar op een desktop, onder elkaar op een telefoon. Selecteer een horizontale automatische indeling en vink Over meer regels laten doorlopen aan onder Automatische indeling. Elk ding in de rij begint op de breedte die je tekende; als het scherm te smal is voor allemaal, gaan de dingen die niet meer passen naar de volgende regel. Geef elke kaart De rij vullen en hij rekt ook uit over wat er op zijn regel over is — drie kaarten delen een desktop, een tablet zet de derde op een eigen regel, en een telefoon neemt er één per regel. Eén keer getekend: er is geen tweede kopie van de kaarten om te verbergen. Het canvas toont de ene regel die je tekende; doorlopen is wat een smaller scherm ermee doet.

Teken voor een telefoon de links en een knop Menu, en geef elk een koppeling Getoond op de breedte van de pagina:

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

screen.width is de breedte van het vak waarin het scherm wordt getoond, en die verandert mee met het venster. Zet de knop Menu aan het begin van de balk en laat hem openStartDrawer("Site menu") uitvoeren, waarbij Site menu een overlaykaart is met dezelfde links erin — zo opent het menu vanaf de kant waar de knop staat (links in het Nederlands, rechts in het Perzisch). Geef Gekozen van elke link screen.name == "Home", en de rij waarin hij staat een vulling voor aanwijzen en voor gekozen, en het menu markeert waar je bent. Het voorbeeld portal-pages-and-navigation tekent er een voor je.

Teken de balk één keer. Een balk op elk scherm is een component: teken hem, maak er een component van en plaats een instantie op elk scherm — wijzig de master en elke pagina volgt. Omdat een link screen.name leest, hoeft een instantie niets te weten over op welke pagina hij staat.

Een frame binnen een handmatig frame (automatische indeling uit) heeft in plaats daarvan Beperkingen — zet het vast aan randen, en het houdt zijn afstand tot die randen wanneer het frame van grootte verandert. Binnen een automatische indeling bepaalt de indeling waar dingen komen, dus Formaat wijzigen is de enige vraag die overblijft.

Wat er nog niet is

Bewust, en elk in een eigen release:

• Opgeslagen weergaven, en de delen van een filter die niet op één regel passen. Een scherm noemt een tabel, met gelijkheidsparen, "bevat"-paren, een sortering en een pagina — zie Een lijst pagina voor pagina tonen. Het kan geen van de opgeslagen weergaven van het platform noemen, dus een filter dat je daar al hebt getekend, teken je hier opnieuw. En er is geen of, geen bereik en geen nesting: daar houdt een filter op een regel in een handler te zijn en wordt het de querydesigner.
• Sommen en gemiddelden. Een scherm telt rijen — dat zijn de tegels van het dashboardvoorbeeld — maar het kan geen kolom optellen of op een kolom groeperen.
• Een besturingselement Zoekveld. De andere zijn er: een raster en een snel formulier zijn het besturingselement Tabelweergave of formulier (Een dashboard op een getekend scherm zetten), een dialoogvenster is een overlaykaart, tabbladen zijn één gekozen waarde en een koppeling Getoond per paneel, en tussen schermen wisselen is navigate. Wat nog geen eigen besturingselement heeft, is de recordkiezer — de componentenbibliotheek heeft er een getekend, die het voorbeeld Support desk plaatst en een eigen toestand geeft.
• Slots. Een component neemt eigenschappen aan en geeft gebeurtenissen af; wat hij nog niet kan, is een gat openlaten dat het scherm dat hem plaatst, kan vullen.
• Het toetsenbord, en alles op een timer. Er zijn acht gebeurtenissen, en de enige over het eigen leven van het scherm is Geladen.

Het tabblad biedt alleen wat vandaag iets betekent. Een besturingselement dat niets deed, zou je een handeling leren die niets doet.

Problemen oplossen

• Het tabblad Scherm zegt dat mijn object deel uitmaakt van de grafische laag. — lijnen, vormen en paden hebben geen betekenis om te geven. Frames, tekst en afbeeldingen zijn de objecten waarvoor je kunt antwoorden.
• "Het scherm" wordt niet aangeboden. — je hebt een tekstobject of een afbeelding geselecteerd. Alleen een frame kan het scherm zijn.
• Mijn besturingselement lijkt in niets op het vak dat ik tekende. — dat is de bedoeling: een besturingselement brengt zijn eigen uiterlijk mee. Alleen de positie en grootte komen uit je tekening. Wilde je de kleuren die je koos, laat het dan een vak en geef het in plaats daarvan het element Een knop.
• Er is nergens een toestand te tekenen. — toestanden horen bij een component. Klik met de rechtermuisknop op het object, kies Component maken en voeg de toestand toe op de component. (Is het object een besturingselement, dan heeft het er bewust geen: het weet al hoe het er in elke toestand uitziet.)
• Opslaan is grijs. — er is niets veranderd sinds de laatste keer opslaan.
• Voorbeeld is leeg. — niets is als het scherm gemarkeerd, of er staat niets in het schermframe. Teken een frame, markeer het als het scherm en zet er iets in.
• Mijn toestand doet niets. — ofwel is de kopie gelijk aan het origineel (er is geen verschil om te bewaren), ofwel heb je hem alleen verplaatst, en dat negeert een toestand bewust. Wijzig een kleur.
• Opslaan zegt dat een toestand de structuur wijzigt. — de kopie bevat meer of minder objecten dan het origineel. Zie hierboven.
• Het object waarvan ik kopieerde, is weg. — Opslaan zegt het: een toestand zonder iets waarvan hij een toestand is, tekent niets. Verwijder de kopie, of teken het object opnieuw.
• Mijn scherm verschijnt niet in een app. — een scherm moet in een app worden geplaatst; zie Een Studio-app openen vanuit een modelgestuurde app.
• Mijn tekening ziet er goed uit, maar het scherm ziet er kaal uit. — controleer waarop elk object is ingesteld. Een object dat leeg is gelaten, maakt deel uit van de grafische laag; het wordt getekend, maar zegt niets over wat het scherm bevat.

Gerelateerde scenario's

• Een scherm laten reageren — toestand en koppelingen, zodat de tekening iets doet.
• Een Studio-app maken.
• Een ontwerp hergebruiken met componenten.
• Een Studio-app openen vanuit een modelgestuurde app.