Canvaset

Skjermene i en app tegnes i en visuell editor: du drar widgets fra en palett ut på et canvas, plasserer dem til pikselen ved hjelp av et rutenett og smarte hjelpelinjer, og finpusser hver detalj i en inspektør til høyre. Denne siden forklarer det arbeidsmiljøet — alt som kommer etterpå (widgets, data, hendelser) skjer inne i det.

Eksemplene kommer fra appen Kundehåndtering: et CRM med skjermer for kontoer, salgsmuligheter og dashbord.

#Åpne og opprette skjermer

Skjermene lever i sidefeltet i appen, i fanen UI, inne i seksjonen Skjermer. Å klikke på en skjerm åpner den i en fane i arbeidsområdet — du kan ha flere skjermer åpne side om side, og hver fane husker hva du holdt på med.

Slik oppretter du en skjerm:

1. Åpne appen og velg fanen UI i sidefeltet.
2. I seksjonen Skjermer klikker du på knappen Ny skjerm.
3. Gi den et navn — for eksempel Kundekort — og bekreft med Opprett.
4. Skjermen åpnes med én gang i arbeidsområdet, klar til å tegnes på.

Den samme seksjonen har mapper (Ny mappe) for å organisere treet, System-skjermene (pålogging, gjenoppretting av passord og registrering — med låst rute og låste parametere) og layoutene — gjenbrukbare maler som hører hjemme i kapitlet Layouter og design per enhet.

#De tre sonene i designeren

Sone	Hva det er
Widgets (venstre)	Widgetkatalogen. Dra hvilken som helst av dem ut på canvaset — hintet på selve elementet sier det: Dra ut på canvaset.
Canvas (midten)	Siden på skjermen, tegnet i den virkelige størrelsen til den aktive enheten, allerede med appens tema påført. Det du ser er det appen viser.
Inspektør (høyre)	Egenskapene til det som er valgt — eller til selve skjermen, når ingenting er valgt. Den har to faner: Egenskaper og Struktur.

Over canvaset ligger verktøylinjen: de tre enhetene (Web (1280px), Nettbrett (768px), Mobil (390px)), angre/gjør om, lag, duplisere, slette, justere/fordele, Forhåndsvis og zoomen (Zoom inn, Zoom ut, og den klikkbare prosenten for Tilbakestill til 100 %).

#Rutenettet

Canvaset hviler på et rutenett som holder skjermene ryddige uten å binde deg:

• Vannrett deles siden i 48 kolonner. Plasseringen og bredden til en widget telles i kolonner — det er det som gjør at en skjerm tegnet for web fortsatt er i proporsjon i en smalere modal.
• Loddrett skjer festet i steg på 8 piksler; plasseringen og høyden lagres til pikselen.

Når du drar, fester widgeten seg til nærmeste kolonne og nærmeste loddrette steg. Trenger du å slippe den nøyaktig der musen er, holder du inne Alt mens du drar — festingen slås av så lenge tasten er nede.

De samme verdiene kan skrives for hånd: med en widget valgt viser kategorien Layout i inspektøren Kol, Spenn (i kolonner), Y og H (i piksler).

#Velge, flytte, endre størrelse

• Klikk velger en widget; Shift+klikk legger til eller tar bort fra utvalget; å dra fra et tomt område tegner en markeringsboks som fanger alt den berører.
• Dra en widget for å flytte den; trekk i håndtakene i hjørnene og på kantene for å endre størrelsen.
• Piltastene flytter utvalget: ←/→ én kolonne, ↑/↓ én piksel — og Shift+↑/↓ åtte piksler av gangen.
• Å slippe en widget inni et Panel, en Faner eller en Fast linje gjør den til barn av den beholderen: den flytter seg sammen med den, og plasseringen blir relativ til beholderen.

#Smarte hjelpelinjer

Mens du drar eller endrer størrelse, sammenligner canvaset widgeten som er i bevegelse med naboene og foreslår festepunkter — hjelpelinjene tegnes der og da:

Hjelpelinje	Når den dukker opp
Justering	En kant eller midten av widgeten stiller seg på linje med kanten/midten til en nabo — widgeten fester seg til den linjen.
Lik avstand	Du er i ferd med å slippe widgeten i samme avstand som to naboer allerede har seg imellom — raden får jevne mellomrom.
Lik størrelse	Ved størrelsesendring blir bredden eller høyden lik en nabos — den fester seg til den størrelsen.

Justering vinner over avstand, og avstand vinner over rutenettet: når du tydelig prøver å legge noe inntil en kant, er det det som skjer.

#Justere og fordele

Med to eller flere widgets valgt aktiverer verktøylinjen justeringsknappene: Juster til venstre, Sentrer vannrett, Juster til høyre, Juster øverst, Sentrer loddrett og Juster nederst. Med tre eller flere kommer Fordel vannrett og Fordel loddrett i tillegg, og de jevner ut mellomrommene mens den første og den siste blir stående.

Med flere widgets valgt oppsummerer inspektøren: N widgets er valgt — bruk verktøylinjen til å justere/fordele.

#Lag

Widgets kan legge seg oppå hverandre — en Etikett over et Bilde, for eksempel. Rekkefølgen styres fra verktøylinjen: Flytt helt fremst, Flytt ett lag fremover, Send ett lag bakover og Send helt bakerst.

#Forankringer — feste til kantene

Som standard blir en widget der du la den. Forankringene fester kanter på widgeten til kantene på siden (eller på beholderen den ligger i): velg en widget og klikk på nålene som dukker opp midt på hver kant — Forankre øverst, Forankre til venstre, Forankre til høyre, Forankre nederst.

• Å forankre venstre + høyre gjør at widgeten strekker seg med bredden på siden — den klassiske toppseksjonen i full bredde.
• Å forankre nederst limer widgeten til bunnen av siden — en knapperad som blir liggende nede, uansett hvor høy siden er.

#Sidehøyden

Siden på en skjerm har fast høyde per enhet — den vokser aldri av seg selv med innholdet. Underkanten av canvaset er et håndtak: dra i den for å justere (Sidehøyde — dra for å justere). Under innholdet fortsetter bakgrunnen på skjermen helt ned (bakgrunnen fortsetter helt ned til bunnen av skjermen). Går innholdet forbi høyden, ruller brukeren — med mindre du slår det av (se egenskapene til skjermen).

#Angre, gjøre om og hurtigtastene

Hver bevegelse — å slippe, flytte, endre størrelse, endre en egenskap, slette — er et steg i historikken. Angre (Ctrl+Z) og Gjør om (Ctrl+Shift+Z) ligger i verktøylinjen; tastaturbevegelser på rad smelter sammen til ett steg, slik at angring ikke må rygge tast for tast.

Hurtigtast	Handling
Ctrl+Z / Ctrl+Shift+Z (eller Ctrl+Y)	Angre / Gjøre om
Ctrl+C / Ctrl+X / Ctrl+V	Kopiere / Klippe ut / Lime inn (kopien kommer inn forskjøvet én kolonne)
Ctrl+D	Dupliser utvalget
Ctrl+A	Velge alle widgetene på den aktive enheten
Delete eller Backspace	Slett utvalget
Escape	Tømme utvalget
Piltaster / Shift+↑↓	Flytte utvalget (kolonne for kolonne; 1 px; 8 px)
Ctrl+musehjul	Zoom

På Mac bruker du ⌘ der det står Ctrl.

#Automatisk lagring og forhåndsvisning

Det finnes ingen lagreknapp: endringene lagrer seg selv. Øverst til høyre står det hvor saken står — Lagrer…, Lagret, eller Lagringen mislyktes — prøv igjen hvis noe gikk galt (det holder å gjøre en endring til for å prøve på nytt).

Knappen Forhåndsvis lagrer det som ligger igjen og åpner skjermen i den ekte appen, i en ny fane i nettleseren — du går gjennom pålogging som en hvilken som helst bruker og ser skjermen fungere med ekte data.

#Inspektøren

Inspektøren har to faner:

• Egenskaper — alt som er redigerbart i det som er valgt.
• Struktur — widgettreet for den aktive enheten.

#Egenskapene til en widget

Med en widget valgt viser toppen av inspektøren typen og id-en til widgeten (i fast bredde-skrift) — det er denne id-en du bruker i koden til hendelsene. Egenskapene er organisert i kategorier; hver widget viser bare dem som angår den:

Kategori	Hva den inneholder
Layout	Kol, Spenn, Y, H, og bryterne Synlig og Aktivert (en widget som ikke er aktivert blir grå og uten interaksjon).
Tilgang	Krever handlingen — en handling deklarert under Innstillinger ▸ Tillatelser; den som ikke har den, bruker ikke widgeten. Under Uten handlingen velger du Skjul eller Vis deaktivert.
Innhold	Tekster, etiketter, ikoner — og Verdier i setningen (se nedenfor).
Data	Widgetens binding til data (se Datastorer og data).
Oppførsel	Innstillinger for hvordan den virker — visninger, draing, handlinger ved klikk.
Validering	I skjemafeltene: Påkrevd, standardregler og skript (se Widgets).
Interaksjon	Klikkhandlinger for widgets som Knapp.
Utseende	Visuell stil (se nedenfor).
Hendelser	Widgetens hendelser (se Hendelser og SDK-et).

Noen widgets har interne elementer som kan redigeres — en kolonne i Tabell, et felt i Liste, en fane i Faner. Klikk på elementet direkte på canvaset for å redigere det; inspektøren bytter til det elementet, og knappen tilbake til widgeten tar deg tilbake.

#Utseende

Kategorien Utseende er lik i (nesten) alle widgets: Bakgrunn, Kant med Kantstrek (Heltrukket, Stiplet, Prikket), radius, padding, Skygge (Ingen skygge, Svak, Middels, Sterk, Ekstra), og valgene for Tekst — farge, Størrelse, Vekt, Tekstjustering. Fargene godtar temaverdiene til appen eller hex-verdier — bruk temaverdiene der du kan, så følger widgeten temaet.

Widgets med eget topplinje (paneler, tabeller, diagrammer…) legger til Vis tittel og Vis beskrivelse her, med de tilhørende tekstene.

#Formateringsregler

Fortsatt under Utseende endrer Formateringsregler stilen etter dataene: fargelegge forsinkede rader røde, skjule en knapp avhengig av økten, sette en KPI i grønt over målet.

1. Klikk på Ny regel.
2. Velg omfanget — Widgeten, Hver rad eller Én celle (rad/celle finnes bare i widgets som tegner rader, som Tabell).
3. Under Når legger du til betingelser (felt, operator, verdi — verdien kan komme fra en parameter, fra økten, fra tilstanden…). Uten betingelser gjelder regelen alltid.
4. Under Så velger du hva som endrer seg: Bakgrunn, Tekstfarge, Fet, Kursiv, Understreking, Justering, Format eller Skjul.

Rekkefølgen teller — den siste regelen som treffer, vinner. Bryteren Aktiv slår av en regel uten å slette den, så du kan prøve deg fram. Og koden i hendelsene har alltid siste ord over reglene.

#Verdier i setningen

Enhver tekst i en widget kan ha hull: skriv {n} i teksten (for eksempel «{n} aktive kontoer»), så dukker seksjonen Verdier i setningen opp i kategorien Innhold, der du sier hvor hver verdi kommer fra — fra en datastore, fra en parameter, fra økten, fra tilstanden eller fra en annen widget. Det er måten å sette levende tall inn i oversettbare setninger uten å skrive kode.

#Fanen Struktur

Fanen Struktur lister opp alle widgetene på den aktive enheten, i et tre (beholdere med barna sine inni). Den brukes til å velge det som ligger under noe annet, se hva som er skjult (Skjult av en overordnet beholder) og slå den opprinnelige synligheten til hver widget av og på med øyet — Skjul på denne enheten / Vis på denne enheten.

#Skjermen og egenskapene dens

Klikk på et tomt område på canvaset (eller trykk Escape), så viser inspektøren selve skjermen:

Seksjon	Hva den definerer
Skjerm	Navnet og Rute — veien til skjermen i adressen til appen (små bokstaver, tall og bindestreker).
Ruteparametere	Parameterne skjermen får i adressen (f.eks. id-en til kontoen i /ficha-de-conta/:id). Hver av dem kan være Påkrevd; rekkefølgen justeres med Flytt opp/Flytt ned.
Oppførsel	Rulling på skjermen — Automatisk eller Ingen rulling.
Tilgang	Offentlig skjerm (uten økt) — skjermen åpnes uten pålogging; dataene kommer bare fra offentlige API-er.
Utseende	Bakgrunnen på siden: Farge, Bilde (assets) og Tilpasning (Fyll, Tilpass, Strekk, Sentrer, Gjenta).
Presentasjon	Om skjermen er en vanlig side, en Modal (midtstilt) eller et Sidepanel (høyre) — utdypet i Hendelser og SDK-et.
Mal for skjermen	Layout-et som er tilknyttet — se Layouter og design per enhet.
Data	Datastorene på skjermen — se Datastorer og data.
Hendelser	Hendelsene på skjermen (onLoad, onParamsChange, onUnload) — se Hendelser og SDK-et.

#Hvorfor ikke…?

• Hvorfor får jeg ikke flyttet en widget? Dukker den opp med en hengelås, kommer den fra et layout — plasseringen redigeres i selve layoutet, ikke på skjermen. Se Layouter og design per enhet.
• Hvorfor fester ikke widgeten seg der jeg vil? Hjelpelinjene og rutenettet vinner over bevegelsen din — hold inne Alt for å slå av festingen mens du drar.
• Hvorfor forsvant widgeten fra canvaset? Se i Struktur: den kan være skjult (øyet), inne i en fane som ikke er aktiv, eller bak en annen widget (bruk lagene).