Canvasen

En apps skärmar ritas i en visuell editor: du drar widgetar från en palett till en canvas, placerar dem på pixeln med hjälp av ett rutnät och smarta stödlinjer, och finjusterar varje detalj i en inspektor till höger. Den här sidan förklarar den arbetsmiljön — allt som kommer sedan (widgetar, data, händelser) sker inuti den.

Exemplen kommer från appen Kundhantering: ett CRM med skärmar för konton, affärsmöjligheter och översikter.

#Öppna och skapa skärmar

Skärmarna bor i appens sidofält, i fliken UI, inuti avsnittet Skärmar. Att klicka på en skärm öppnar den i en flik i arbetsytan — du kan ha flera skärmar öppna sida vid sida, och varje flik minns vad den höll på med.

Så här skapar du en skärm:

1. Öppna appen och välj fliken UI i sidofältet.
2. Klicka på knappen Ny skärm i avsnittet Skärmar.
3. Ge den ett namn — till exempel Kunduppgifter — och bekräfta med Skapa.
4. Skärmen öppnas direkt i arbetsytan, redo att ritas.

Samma avsnitt har mappar (Ny mapp) för att organisera trädet, System-skärmarna (inloggning, lösenordsåterställning och registrering — med fast rutt och fasta parametrar) och layouterna — återanvändbara mallar som sparas till kapitlet Layouter och design per enhet.

#Designerns tre zoner

Zon	Vad den är
Widgetar (vänster)	Widgetkatalogen. Dra vilken som helst till canvasen — tipset på själva objektet säger det: Dra till canvasen.
Canvas (mitten)	Skärmens sida, ritad i den aktiva enhetens verkliga skala, redan med appens tema applicerat. Det du ser är det appen visar.
Inspektor (höger)	Egenskaperna hos det som är markerat — eller hos själva skärmen, när ingenting är markerat. Den har två flikar: Egenskaper och Struktur.

Ovanför canvasen ligger verktygsfältet: de tre enheterna (Webb (1280px), Surfplatta (768px), Mobil (390px)), ångra/gör om, lager, duplicera, ta bort, justera/fördela, Förhandsgranska och zoomen (Zooma in, Zooma ut, och den klickbara procentsatsen för Återställ till 100 %).

#Rutnätet

Canvasen vilar på ett rutnät som håller skärmarna städade utan att låsa fast dig:

• Horisontellt delas sidan i 48 kolumner. En widgets position och bredd räknas i kolumner — det är det som gör att en skärm ritad för webben förblir proportionerlig i en smalare modal.
• Vertikalt sker fästningen i steg om 8 pixlar; positionen och höjden sparas på pixeln.

När du drar fäster widgeten i närmaste kolumn och närmaste vertikala steg. Om du behöver släppa den exakt där muspekaren är, håll ned tangenten Alt under dragningen — fästningen stängs av så länge den är nedtryckt.

Samma värden går att skriva för hand: med en widget markerad visar inspektorns kategori Layout fälten Kol, Spann (i kolumner), Y och H (i pixlar).

#Markera, flytta, ändra storlek

• Klick markerar en widget; Skift+klick lägger till eller tar bort ur markeringen; att dra från en tom yta ritar en markeringsruta som fångar allt den vidrör.
• Dra en widget för att flytta den; dra i handtagen i hörnen och på kanterna för att ändra dess storlek.
• Tangentbordets piltangenter flyttar markeringen: ←/→ en kolumn, ↑/↓ en pixel — och Skift+↑/↓ åtta pixlar i taget.
• Att släppa en widget inuti en Panel, några Flikar eller en Fast list gör den till barn till den behållaren: den flyttar sig sedan med den och positionen blir relativ till behållaren.

#Smarta stödlinjer

Medan du drar eller ändrar storlek jämför canvasen widgeten i rörelse med grannarna och föreslår fästen — stödlinjerna ritas i stunden:

Stödlinje	När den dyker upp
Justering	En kant eller widgetens mitt hamnar i linje med en grannes kant eller mitt — widgeten klistrar sig mot den linjen.
Lika avstånd	Du håller på att släppa widgeten på samma avstånd som två grannar redan har till varandra — raden får jämna mellanrum.
Lika storlek	Vid storleksändring blir bredden eller höjden lika med en grannes — den klistrar sig i den storleken.

Justeringen vinner över avståndet, och avståndet vinner över rutnätet: när du uppenbart försöker lägga något kant i kant är det det som händer.

#Justera och fördela

Med två eller fler widgetar markerade aktiverar verktygsfältet justeringsknapparna: Justera vänster, Centrera horisontellt, Justera höger, Justera överkant, Centrera vertikalt och Justera nederkant. Med tre eller fler tillkommer Fördela horisontellt och Fördela vertikalt, som jämnar ut mellanrummen och håller den första och den sista på plats.

Med flera widgetar markerade sammanfattar inspektorn: N widgetar markerade — använd verktygsfältet för att justera och fördela.

#Lager

Widgetar kan överlappa varandra — en Etikett ovanpå en Bild, till exempel. Ordningen styrs i verktygsfältet: Placera längst fram, Flytta fram ett lager, Flytta bakåt ett lager och Placera längst bak.

#Förankringar — binda till marginalerna

Som standard stannar en widget där du satte den. Förankringarna binder widgetens kanter till sidans marginaler (eller till behållaren den ligger i): markera en widget och klicka på nålarna som dyker upp mitt på varje kant — Förankra upptill, Förankra till vänster, Förankra till höger, Förankra nedtill.

• Att förankra vänster + höger får widgeten att sträcka sig med sidans bredd — det klassiska sidhuvudet i full bredd.
• Att förankra nedtill klistrar widgeten mot sidans nederkant — ett knappfält som stannar nere, oavsett hur hög sidan är.

#Sidans höjd

En skärms sida har fast höjd per enhet — den växer aldrig av sig själv med innehållet. Canvasens nedre kant är ett handtag: dra i den för att justera (Sidans höjd — dra för att justera). Nedanför innehållet fortsätter skärmens bakgrund ända ned (bakgrunden fortsätter ända till skärmens slut). Om innehållet går utanför höjden scrollar användaren — såvida du inte stänger av det (se skärmens egenskaper).

#Ångra, gör om och genvägarna

Varje rörelse — släppa, flytta, ändra storlek, ändra en egenskap, ta bort — är ett steg i historiken. Ångra (Ctrl+Z) och Gör om (Ctrl+Skift+Z) finns i verktygsfältet; tangentbordsförflyttningar i följd smälter samman till ett enda steg, så att ångra inte behöver backa tangent för tangent.

Genväg	Åtgärd
Ctrl+Z / Ctrl+Skift+Z (eller Ctrl+Y)	Ångra / Gör om
Ctrl+C / Ctrl+X / Ctrl+V	Kopiera / Klipp ut / Klistra in (kopian hamnar förskjuten en kolumn)
Ctrl+D	Duplicera markeringen
Ctrl+A	Markera alla widgetar på den aktiva enheten
Delete eller Backspace	Ta bort markeringen
Escape	Rensa markeringen
Pilar / Skift+↑↓	Flytta markeringen (kolumn för kolumn; 1 px; 8 px)
Ctrl+mushjul	Zoom

På Mac använder du ⌘ där det står Ctrl.

#Automatisk sparning och förhandsgranskning

Det finns ingen sparknapp: ändringarna sparar sig själva. Det övre högra hörnet säger hur det står till — Sparar…, Sparat, eller Det gick inte att spara — försök igen om något gick fel (det räcker att röra något igen för att göra ett nytt försök).

Knappen Förhandsgranska sparar det som ligger och väntar och öppnar skärmen i den riktiga appen, i en ny webbläsarflik — du går genom inloggningen som vilken användare som helst och ser skärmen fungera med riktiga data.

#Inspektorn

Inspektorn har två flikar:

• Egenskaper — allt som går att redigera i det som är markerat.
• Struktur — widgetträdet för den aktiva enheten.

#En widgets egenskaper

Med en widget markerad visar inspektorns överkant widgetens typ och id (i teckensnitt med fast bredd) — det är det id:t du använder i händelsernas kod. Egenskaperna organiseras i kategorier; varje widget visar bara de som rör den:

Kategori	Vad den innehåller
Layout	Kol, Spann, Y, H, och reglagen Synlig och Aktiv (en inaktiv widget blir grå och går inte att interagera med).
Åtkomst	Kräver åtgärden — en åtgärd som deklarerats i Inställningar ▸ Behörigheter; den som saknar den använder inte widgeten. Under Utan åtgärden väljer du Dölj eller Visa inaktiverad.
Innehåll	Texter, etiketter, ikoner — och Värden i texten (se nedan).
Data	Widgetens databindning (se Datastorer och data).
Beteende	Funktionsalternativ — vyer, dragningar, åtgärder vid klick.
Validering	I formulärfälten: Obligatoriskt, standardregler och skript (se Widgetarna).
Interaktion	Klickåtgärder för widgetar som Knapp.
Utseende	Den visuella stilen (se nedan).
Händelser	Widgetens händelser (se Händelser och SDK:t).

Vissa widgetar har inre element som går att redigera — en kolumn i Tabell, ett fält i Lista, en flik i Flikar. Klicka på elementet direkt på canvasen för att redigera det; inspektorn byter till det elementet, och knappen tillbaka till widgeten tar dig tillbaka.

#Utseende

Kategorin Utseende ser (nästan) likadan ut i alla widgetar: Bakgrund, Kantlinje med Kantlinjens stil (Heldragen, Streckad, Prickad), radie, padding, Skugga (Ingen skugga, Mjuk, Medel, Stark, Extra), och Text-alternativen — färg, Storlek, Vikt, Justera text. Färgerna tar emot appens temafärger eller hex-värden — använd temafärgerna när det går, så att widgeten följer temat.

Widgetar med eget sidhuvud (paneler, tabeller, diagram…) lägger här till Visa titel och Visa beskrivning, med tillhörande texter.

#Formateringsregler

Fortfarande under Utseende ändrar Formateringsreglerna stilen efter data: färga försenade rader röda, dölja en knapp beroende på sessionen, göra en KPI grön över målet.

1. Klicka på Ny regel.
2. Välj omfånget — Widgeten, Varje rad eller En cell (rad och cell finns bara i widgetar som ritar rader, som Tabell).
3. Lägg till villkor under När (fält, operator, värde — värdet kan komma från en parameter, från sessionen, från tillståndet…). Utan villkor gäller regeln alltid.
4. Välj under Då vad som ändras: Bakgrund, Textfärg, Fet, Kursiv, Understruken, Justering, Format eller Dölj.

Ordningen spelar roll — den sista regel som slår till är den som gäller. Reglaget Aktiv stänger av en regel utan att ta bort den, så att du kan experimentera. Och händelsernas kod har alltid sista ordet om reglerna.

#Värden i texten

Vilken text som helst i en widget kan ha hål: skriv {n} i texten (till exempel ”{n} aktiva konton”) så dyker avsnittet Värden i texten upp i kategorin Innehåll, där du anger var varje värde kommer ifrån — från en datastore, en parameter, sessionen, tillståndet eller en annan widget. Det är sättet att sätta levande siffror inuti översättningsbara meningar utan att skriva kod.

#Fliken Struktur

Fliken Struktur listar alla widgetar på den aktiva enheten, i ett träd (behållare med sina barn inuti). Den används för att markera det som ligger dolt bakom annat, se vad som är dolt (Dold av en överordnad behållare) och växla varje widgets initiala synlighet med ögat — Dölj på den här enheten / Visa på den här enheten.

#Skärmen och dess egenskaper

Klicka på en tom yta på canvasen (eller tryck Escape) så visar inspektorn själva skärmen:

Avsnitt	Vad det definierar
Skärm	Namnet och Rutt — skärmens sökväg i appens adress (gemener, siffror och bindestreck).
Ruttparametrar	Parametrarna som skärmen tar emot i adressen (t.ex. kontots id i /ficha-de-conta/:id). Var och en kan vara Obligatorisk; ordningen justeras med Flytta upp/Flytta ned.
Beteende	Skärmens scroll — Automatisk eller Ingen scroll.
Åtkomst	Publik skärm (utan session) — skärmen öppnas utan inloggning; data kommer bara från publika API:er.
Utseende	Sidans bakgrund: Färg, Bild (assets) och Anpassning (Täcka, Innesluta, Sträcka, Centrera, Upprepa).
Presentation	Om skärmen är en vanlig sida, en Modal (centrerad) eller en Sidopanel (höger) — utförligt i Händelser och SDK:t.
Skärmens mall	Den kopplade Layouten — se Layouter och design per enhet.
Data	Skärmens datastorer — se Datastorer och data.
Händelser	Skärmens händelser (onLoad, onParamsChange, onUnload) — se Händelser och SDK:t.

#Varför inte…?

• Varför går det inte att flytta en widget? Om den visas med ett hänglås kommer den från en layout — positionen redigeras i själva layouten, inte på skärmen. Se Layouter och design per enhet.
• Varför hamnar widgeten inte där jag vill? Stödlinjerna och rutnätet vinner över din rörelse — håll ned Alt för att stänga av fästningen medan du drar.
• Varför försvann widgeten från canvasen? Titta i Struktur: den kan vara dold (ögat), inuti en flik som inte är aktiv, eller bakom en annan widget (använd lagren).