Het canvas

De schermen van een app tekent u in een visuele editor: u sleept widgets van een palet naar een canvas, plaatst ze op de pixel met behulp van een raster en slimme hulplijnen, en verfijnt elk detail in een inspector aan de rechterkant. Deze pagina legt die werkomgeving uit — alles wat daarna komt (widgets, gegevens, gebeurtenissen) gebeurt daarbinnen.

De voorbeelden komen uit de app Klantenbeheer: een CRM met schermen voor accounts, kansen en dashboards.

#Schermen openen en aanmaken

De schermen leven in de zijbalk van de app, op het tabblad UI, binnen de sectie Schermen. Op een scherm klikken opent het in een tabblad van de werkruimte — u kunt meerdere schermen naast elkaar open hebben, en elk tabblad onthoudt waar het mee bezig was.

Een scherm aanmaken:

1. Open de app en kies het tabblad UI in de zijbalk.
2. Klik in de sectie Schermen op de knop Nieuw scherm.
3. Geef het een naam — bijvoorbeeld Klantkaart — en bevestig met Aanmaken.
4. Het scherm opent meteen in de werkruimte, klaar om te tekenen.

Dezelfde sectie heeft mappen (Nieuwe map) om de boom te ordenen, de schermen van Systeem (aanmelden, wachtwoordherstel en registratie — met vaste route en parameters) en de lay-outs — herbruikbare sjablonen die voor het hoofdstuk Lay-outs en ontwerp per apparaat zijn.

#De drie zones van de designer

Zone	Wat het is
Widgets (links)	De catalogus van widgets. Sleep er een naar het canvas — de tip op het item zelf zegt het: Sleep naar het canvas.
Canvas (midden)	De pagina van het scherm, getekend op de echte schaal van het actieve apparaat, al met het thema van de app toegepast. Wat u ziet is wat de app toont.
Inspector (rechts)	De eigenschappen van wat geselecteerd is — of van het scherm zelf, wanneer er geen selectie is. Hij heeft twee tabbladen: Eigenschappen en Structuur.

Boven het canvas staat de werkbalk: de drie apparaten (Web (1280 px), Tablet (768 px), Mobiel (390 px)), ongedaan maken/opnieuw, lagen, dupliceren, verwijderen, uitlijnen/verdelen, Voorbeeld en de zoom (Inzoomen, Uitzoomen, en het aanklikbare percentage voor Terug naar 100%).

#Het raster

Het canvas rust op een raster dat de schermen geordend houdt zonder u vast te zetten:

• Horizontaal wordt de pagina in 48 kolommen verdeeld. De positie en de breedte van een widget worden in kolommen geteld — dat is wat een scherm dat voor web getekend is proportioneel houdt in een smaller modaal venster.
• Verticaal klikt alles vast in stappen van 8 pixels; de positie en de hoogte worden op de pixel bewaard.

Tijdens het slepen klikt de widget vast op de dichtstbijzijnde kolom en verticale stap. Moet u hem precies daar loslaten waar de muis staat, houd dan de toets Alt ingedrukt tijdens het slepen — het vastklikken staat uit zolang die ingedrukt is.

Dezelfde waarden kunt u met de hand invullen: met een widget geselecteerd toont de categorie Lay-out van de inspector Kol, Br (in kolommen), Y en H (in pixels).

#Selecteren, verplaatsen, formaat wijzigen

• Klikken selecteert een widget; Shift+klik voegt toe aan of haalt weg uit de selectie; slepen vanaf een lege zone tekent een selectiekader dat alles meeneemt wat het raakt.
• Sleep een widget om hem te verplaatsen; trek aan de grepen van de hoeken en de randen om zijn formaat te wijzigen.
• De pijltoetsen verplaatsen de selectie: ←/→ één kolom, ↑/↓ één pixel — en Shift+↑/↓ acht pixels per keer.
• Een widget loslaten binnen een Paneel, binnen Tabbladen of binnen een Vaste balk maakt hem een kind van die container: hij beweegt voortaan mee en zijn positie is relatief aan de container.

#Slimme hulplijnen

Terwijl u sleept of het formaat wijzigt, vergelijkt het canvas de bewegende widget met de buren en stelt het vastklikpunten voor — de hulplijnen worden ter plekke getekend:

Hulplijn	Wanneer die verschijnt
Uitlijning	Een rand of het midden van de widget komt gelijk te liggen met de rand/het midden van een buur — de widget plakt aan die lijn.
Gelijke tussenruimte	U laat de widget op dezelfde afstand los als waarop twee buren al van elkaar staan — de rij krijgt gelijke tussenruimten.
Gelijk formaat	Bij het wijzigen van het formaat wordt de breedte of de hoogte gelijk aan die van een buur — hij plakt op dat formaat.

Uitlijning wint van tussenruimte, en tussenruimte wint van het raster: wanneer u zichtbaar tegen een rand probeert aan te schuiven, is dat wat er gebeurt.

#Uitlijnen en verdelen

Met twee of meer widgets geselecteerd worden de uitlijnknoppen in de werkbalk actief: Links uitlijnen, Horizontaal centreren, Rechts uitlijnen, Boven uitlijnen, Verticaal centreren en Onder uitlijnen. Vanaf drie komen daar Horizontaal verdelen en Verticaal verdelen bij, die de tussenruimten gelijkmaken terwijl de eerste en de laatste op hun plek blijven.

Met meerdere widgets geselecteerd vat de inspector samen: N widgets geselecteerd — gebruik de werkbalk om uit te lijnen of te verdelen.

#Lagen

Widgets mogen elkaar overlappen — een Label boven op een Afbeelding, bijvoorbeeld. De volgorde regelt u in de werkbalk: Naar voren halen, Eén laag naar voren, Eén laag naar achteren en Naar achteren sturen.

#Verankeringen — vastmaken aan de randen

Standaard blijft een widget waar u hem hebt neergezet. Verankeringen maken randen van de widget vast aan de randen van de pagina (of van de container waar hij in staat): selecteer een widget en klik op de pinnen die in het midden van elke rand verschijnen — Aan de bovenkant verankeren, Aan de linkerkant verankeren, Aan de rechterkant verankeren, Aan de onderkant verankeren.

• Links + rechts verankeren laat de widget meerekken met de breedte van de pagina — de klassieke koptekst over de volle breedte.
• Aan de onderkant verankeren plakt de widget onder aan de pagina — een balk met knoppen die onderaan blijft, hoe hoog de pagina ook is.

#De hoogte van de pagina

De pagina van een scherm heeft een vaste hoogte per apparaat — zij groeit nooit vanzelf mee met de inhoud. De onderrand van het canvas is een greep: sleep eraan om aan te passen (Hoogte van de pagina — sleep om aan te passen). Onder de inhoud loopt de achtergrond van het scherm door tot het einde (de achtergrond loopt door tot onder aan het scherm). Gaat de inhoud voorbij de hoogte, dan scrolt de gebruiker — tenzij u dat uitschakelt (zie de eigenschappen van het scherm).

#Ongedaan maken, opnieuw en de sneltoetsen

Elk gebaar — loslaten, verplaatsen, formaat wijzigen, een eigenschap wijzigen, verwijderen — is een stap in de geschiedenis. Ongedaan maken (Ctrl+Z) en Opnieuw (Ctrl+Shift+Z) staan in de werkbalk; opeenvolgende toetsenbordbewegingen smelten samen tot één stap, zodat het ongedaan maken niet toets voor toets terug hoeft.

Sneltoets	Actie
Ctrl+Z / Ctrl+Shift+Z (of Ctrl+Y)	Ongedaan maken / Opnieuw
Ctrl+C / Ctrl+X / Ctrl+V	Kopiëren / Knippen / Plakken (de kopie komt één kolom verschoven binnen)
Ctrl+D	De selectie Dupliceren
Ctrl+A	Alle widgets van het actieve apparaat selecteren
Delete of Backspace	De selectie Verwijderen
Escape	De selectie wissen
Pijltoetsen / Shift+↑↓	De selectie verplaatsen (kolom voor kolom; 1 px; 8 px)
Ctrl+muiswiel	Zoom

Gebruik op Mac ⌘ waar Ctrl staat.

#Automatisch opslaan en voorbeeld

Er is geen opslaanknop: de wijzigingen slaan zichzelf op. De rechterbovenhoek zegt hoe het ervoor staat — Bezig met opslaan…, Opgeslagen, of Opslaan mislukt — probeer het opnieuw als er iets is misgegaan (u hoeft alleen weer iets te wijzigen om het te herhalen).

De knop Voorbeeld slaat op wat nog openstaat en opent het scherm in de echte app, in een nieuw tabblad van de browser — u meldt zich aan als elke gebruiker en ziet het scherm werken met echte gegevens.

#De inspector

De inspector heeft twee tabbladen:

• Eigenschappen — alles wat bewerkbaar is aan wat geselecteerd is.
• Structuur — de widgetboom van het actieve apparaat.

#Eigenschappen van een widget

Met een widget geselecteerd toont de bovenkant van de inspector het type en het id van de widget (in een monospace-letter) — dit id is wat u in de code van de gebeurtenissen gebruikt. De eigenschappen zijn ingedeeld in categorieën; elke widget toont alleen die welke op hem van toepassing zijn:

Categorie	Wat erin zit
Lay-out	Kol, Br, Y, H, en de schakelaars Zichtbaar en Actief (een niet-actieve widget wordt grijs en reageert niet).
Toegang	Vereist de actie — een actie gedeclareerd bij Instellingen ▸ Rechten; wie die niet heeft, gebruikt de widget niet. Bij Zonder de actie kiest u Verbergen of Uitgeschakeld tonen.
Inhoud	Teksten, labels, pictogrammen — en de Waarden in de zin (zie hieronder).
Gegevens	De koppeling van de widget aan gegevens (zie Datastores en gegevens).
Gedrag	Werkingsopties — weergaven, sleepacties, acties bij het klikken.
Validatie	Bij de formuliervelden: Verplicht, standaardregels en script (zie Widgets).
Interactie	Klikacties van widgets zoals de Knop.
Uiterlijk	Visuele stijl (zie hieronder).
Gebeurtenissen	De gebeurtenissen van de widget (zie Gebeurtenissen en de SDK).

Sommige widgets hebben bewerkbare interne elementen — een kolom van de Tabel, een veld van de Keuzelijst, een tabblad van de Tabbladen. Klik op het element rechtstreeks in het canvas om het te bewerken; de inspector schakelt over naar dat element en de knop terug naar de widget brengt u weer terug.

#Uiterlijk

De categorie Uiterlijk is (bijna) in alle widgets gelijk: Achtergrond, Rand met Randstijl (Doorlopend, Streepjes, Stippels), straal, padding, Schaduw (Geen schaduw, Zacht, Middel, Sterk, Extra), en de opties voor Tekst — kleur, Grootte, Dikte, Tekst uitlijnen. De kleuren aanvaarden de tokens van het thema van de app of hex-waarden — gebruik waar mogelijk de tokens, zodat de widget het thema volgt.

Widgets met een eigen koptekst (panelen, tabellen, grafieken…) voegen hier Titel tonen en Beschrijving tonen toe, met de bijbehorende teksten.

#Opmaakregels

Nog steeds in Uiterlijk laten de Opmaakregels de stijl meebewegen met de gegevens: rijen die te laat zijn rood inkleuren, een knop verbergen afhankelijk van de sessie, een KPI groen maken boven het doel.

1. Klik op Nieuwe regel.
2. Kies het bereik — De widget, Elke rij of Eén cel (rij/cel bestaan alleen bij widgets die rijen tekenen, zoals de Tabel).
3. Voeg bij Wanneer voorwaarden toe (veld, operator, waarde — de waarde kan uit een parameter, uit de sessie, uit de status komen…). Zonder voorwaarden geldt de regel altijd.
4. Kies bij Dan wat er verandert: Achtergrond, Tekstkleur, Vet, Cursief, Onderstreept, Uitlijning, Notatie of Verbergen.

De volgorde telt — de laatste regel die past, wint. De schakelaar Actief zet een regel uit zonder haar te verwijderen, zodat u kunt experimenteren. En de code van de gebeurtenissen heeft altijd het laatste woord over de regels.

#Waarden in de zin

Elke tekst van een widget mag gaten hebben: schrijf {n} in de tekst (bijvoorbeeld "{n} actieve accounts") en de sectie Waarden in de zin verschijnt in de categorie Inhoud, zodat u kunt aangeven waar elke waarde vandaan komt — uit een datastore, uit een parameter, uit de sessie, uit de status of uit een andere widget. Het is de manier om levende getallen in vertaalbare zinnen te zetten zonder code te schrijven.

#Het tabblad Structuur

Het tabblad Structuur somt alle widgets van het actieve apparaat op, in een boom (containers met de kinderen erin). Het dient om te selecteren wat afgedekt is, om te zien wat verborgen is (Verborgen door een bovenliggende container) en om de begin­zichtbaarheid van elke widget met het oogje om te schakelen — Verbergen op dit apparaat / Tonen op dit apparaat.

#Het scherm en zijn eigenschappen

Klik op een lege zone van het canvas (of druk op Escape) en de inspector toont het scherm zelf:

Sectie	Wat die bepaalt
Scherm	De naam en de Route — het pad van het scherm in het adres van de app (kleine letters, cijfers en koppeltekens).
Routeparameters	De parameters die het scherm in het adres ontvangt (bijv. de id van de account in /ficha-de-conta/:id). Elke parameter kan Verplicht zijn; de volgorde past u aan met Omhoog/Omlaag.
Gedrag	Scrollen van het scherm — Automatisch of Niet scrollen.
Toegang	Openbaar scherm (zonder sessie) — het scherm opent zonder aanmelden; de gegevens komen alleen uit openbare API's.
Uiterlijk	De achtergrond van de pagina: Kleur, Afbeelding (assets) en Schaling (Vullen, Bevatten, Uitrekken, Centreren, Herhalen).
Presentatie	Of het scherm een gewone pagina is, een Modaal venster (gecentreerd) of een Zijpaneel (rechts) — uitgewerkt in Gebeurtenissen en de SDK.
Sjabloon van het scherm	De bijbehorende Lay-out — zie Lay-outs en ontwerp per apparaat.
Gegevens	De datastores van het scherm — zie Datastores en gegevens.
Gebeurtenissen	De gebeurtenissen van het scherm (onLoad, onParamsChange, onUnload) — zie Gebeurtenissen en de SDK.

#Waarom niet…?

• Waarom lukt het niet een widget te verplaatsen? Verschijnt hij met een hangslot, dan komt hij uit een lay-out — de positie bewerkt u in de lay-out zelf, niet in het scherm. Zie Lay-outs en ontwerp per apparaat.
• Waarom klikt de widget niet vast waar ik wil? De hulplijnen en het raster winnen het van uw gebaar — houd Alt ingedrukt om het vastklikken uit te schakelen terwijl u sleept.
• Waarom is de widget uit het canvas verdwenen? Kijk naar de Structuur: hij kan verborgen zijn (oogje), in een tabblad zitten dat niet actief is, of achter een andere widget staan (gebruik de lagen).