Layouter og design per enhet

To ting på denne siden ligner på hverandre, men er ikke det samme:

• Et layout er et design som deles av flere skjermer — toppteksten, rammen, bunnteksten som gjentar seg. Det lages én gang og brukes overalt.
• En enhet er et design av den samme skjermen for en annen størrelse — web, nettbrett, mobil. Hvert av dem er uavhengig.

Det ene handler om å gjenbruke på tvers av skjermer; det andre handler om å servere den samme skjermen på skjermer i ulike størrelser.

#Layouter

Et layout er et dokument som en skjerm — det har widgets og kan ha datastorer — men uten rute, uten parametere og uten tilgangsregler. Man navigerer ikke til et layout: det er bakgrunnen for den som bruker det.

#Lage et layout

1. I sidefeltet, fanen UI, seksjonen Skjermer.
2. Trykk på knappen Ny layout i toppteksten til seksjonen (eller i ⋯-menyen til en mappe, for å lage det der inne).
3. Skriv Navn på layoutet — feltet foreslår f.eks. Basis med topptekst.
4. Opprett.

Layoutet havner i det samme treet som skjermene (merknaden sier det: Layoutet ligger i skjermtreet — dra det dit du vil.), med eget ikon, og åpnes umiddelbart i en fane.

#Tegne et layout

Editoren er den samme som for skjermene — palett, canvas, inspektør, de samme bevegelsene og de samme snarveiene (se Canvaset). Forskjellene handler om formålet:

I layoutet	Hvorfor
Merket i toppteksten viser /layout.	Et layout har ingen rute.
Det finnes ingen Ruteparametere, Presentasjon eller Hendelser for skjermen.	Ingenting av det tilhører layoutet.
I stedet for Mal for skjermen har inspektøren Basismal, med linjen Basis.	Et layout kan hvile på et annet.

#Legge et layout på en skjerm

1. Åpne skjermen og klikk på et tomt område på canvaset (inspektøren viser da skjermen).
2. Åpne kategorien Mal for skjermen.
3. På linjen Layout, velg layoutet. For å fjerne det, velg — uten layout —.

Hintet i kategorien oppsummerer kontrakten: Malen bak innholdet: widgetene fra layoutet vises låst; egenskaper og hendelser konfigureres per skjerm.

#Hva som endrer seg på skjermen

Widgetene fra layoutet dukker opp på canvaset til skjermen, bak innholdet dens, og med en hengelås i hjørnet. Hva som kan og ikke kan gjøres med dem, er en fast regel:

På skjermen, med en widget fra layoutet
Flytte, endre størrelse, slette, duplisere	Nei. Plasseringen redigeres i selve layoutet.
Endre egenskaper (tekster, farger, valg)	Ja — og endringen gjelder bare denne skjermen.
Synlig / Aktivert	Ja, per skjerm.
Hendelser	Ja — oppførselen tilhører alltid skjermen.
Tilgang og Verdier i setningen	Nei. De defineres i layoutet.

Inspektøren forteller deg hvilken situasjon du er i: Widget fra layoutet: plasseringen redigeres i layoutet; egenskaper, synlighet og hendelser hører til DENNE skjermen.

#Ingen «innholdssoner»

Det finnes verken slots eller reserverte områder: innholdet på skjermen tegnes alltid oppå layoutet. Den som tegner layoutet er den som lar plassen stå fri der skjermene skal skrive — en topptekst øverst, en linje nederst, og midten tom.

#Kollisjoner og kjeder

To regler som plattformen kontrollerer og nekter å bryte:

• Unike id-er og navn. En skjerm og layoutet dens kan ikke ha den samme widget-id-en eller det samme datastore-navnet — Kollisjon med layoutet: widget-id-en «…» finnes i begge. Det finnes ingen automatiske prefikser: navnet du valgte, er navnet som blir stående.
• Maksimalt 3 nivåer, og ingen runddans. Et layout kan hvile på et annet (Basismal), men kjeden stopper på tre — Layoutkjeden overstiger 3 nivåer. — og en sirkel blir avvist.

#Når layoutet endres

Skjermen husker bare hvilket layout det er, og endringene den gjorde på widgets fra det. Designet kopieres ikke — derfor endrer en endring i layoutet alle skjermene som bruker det, med én gang, i den publiserte appen.

To praktiske konsekvenser:

• I editoren oppdaterer en skjermfane som allerede var åpen seg ikke selv når du lagrer layoutet: lukk og åpne skjermen igjen for å se den med den nye versjonen.
• Å slette et layout som er i bruk hindres ikke. Skjermene som brukte det, åpnes heretter uten det, med advarselen Layoutet som var knyttet til skjermen finnes ikke lenger. — de knekker ikke, men de mister rammen.

#Design per enhet

En skjerm har tre mulige design, ett per enhet:

Enhet	Referansebredde
Web (1280px)	Datamaskin.
Nettbrett (768px)	Nettbrett, og smale vinduer.
Mobil (390px)	Mobiltelefon.

De byttes med de tre knappene til venstre på designerlinjen.

Rutenettet er det samme på alle tre — 48 kolonner — og det som endrer seg, er bredden på hver kolonne. En widget på 24 kolonner opptar halve siden på hvilken som helst enhet; høyden, derimot, telles alltid i piksler.

#Det finnes ingen arv

Dette er regelen som forklarer alt det andre: hver enhet har sitt eget widgettre, komplett og uavhengig. Det finnes ikke noe «skjul på web og vis på mobil» mellom trær — det som ikke står i treet til en enhet, finnes ikke på den enheten.

Web finnes alltid. Nettbrettet og mobilen kan stå utegnet — og i så fall serverer appen web-designet, komprimert til den faktiske bredden. Det er en reserve for servering, ikke arv: de er fortsatt separate design i det øyeblikket du redigerer.

#Begynne designet for en enhet

Velg Nettbrett (768px) eller Mobil (390px) på en skjerm som ennå ikke har dem, og designeren viser kortet Denne enheten har ikke noe design ennå, med forklaringen — Hver enhet har sitt eget design. Så lenge dette ikke finnes, serverer runtime web-designet. — og to veier:

Knapp	Hva den gjør
Kopier fra web	Dupliserer web-designet som utgangspunkt. Widget-id-ene beholdes (databindingene og koden finner dem fortsatt), og breddene justeres om fordi de er i kolonner.
Start tomt	Et blankt ark, for å tegne fra bunnen av.

Kopieringen skjer én gang. Fra da av lever designene hver sine liv: å røre web rører ikke mobilen.

#Skjule widgets på denne enheten

Inne i en enhet har fanen Struktur i inspektøren et øye på hver widget: Skjul på denne enheten / Vis på denne enheten. En skjult widget blir stående i treet og kan fortsatt redigeres fra Strukturen — den vises bare ikke på skjermen.

Hvis det som er skjult er beholderen, følger barna med — og øyet deres forklarer det: Skjult av en overordnet beholder.

#Sidehøyden

Høyden er per enhet: en mobil kan ha en mye høyere side enn web for den samme skjermen. Dra i underkanten av canvaset (Sidehøyde — dra for å justere) for å endre den.

Når siden er høyere enn enheten, tegner canvaset en stiplet linje med etiketten bunnen av viewporten — det er der det som er synlig uten å scrolle, slutter. Alt som ligger under den linjen, ser bare den som ruller nedover siden.

#Hva appen serverer

I den publiserte appen velges enheten av vindusbredden: under 640 px er det mobil, under 1024 px er det nettbrett, over det er det web. Å endre størrelsen på vinduet bytter designet som serveres, der og da.

Uten design for enheten som gjenkjennes, serveres web. I den native mobilappen annonseres den reserven — Denne skjermen har ikke noe design for mobil — viser web-designet.

Knappen Forhåndsvis åpner skjermen i den virkelige appen; for å se hvordan den blir i en annen størrelse, endre størrelsen på nettleservinduet.

#Hendelser, id-er og enheter

Siden hver enhet er et eget tre, kan den samme widget-id-en finnes på alle tre — det er med vilje, det er «den samme logiske widgeten i en annen størrelse». Men hver av dem har sine egne egenskaper og sin egen kode: å endre onClick på knappen på web endrer ikke den på mobilen.

Når du skriver kode (se Hendelser og SDK-en), husk at keplin.widgets.get("...") bare finner widgets på enheten som kjører. En widget som bare finnes på web, gir feil på mobilen.

#Layouter og enheter, sammen

De to tingene kombineres etter den samme regelen: layoutet settes sammen per enhet. Et layout som bare er tegnet for web, dukker også opp i nettbrett- og mobiltrærne til skjermene som bruker det, og serverer sitt eget web-design — og et layout med eget design for mobil serverer det.

#Hvordan velge

Situasjon	Veien
Den samme toppteksten på 20 skjermer.	Et layout.
En kompleks skjerm som på mobilen må være noe annet.	Et eget mobildesign.
En knapp som ikke gir mening på mobilen.	Øyet i Strukturen på mobilenheten.
En annen meny på mobilen.	Editoren for Navigasjon, på mobilenheten.
En app som bare skal brukes på datamaskin.	Tegn bare web og tenk ikke mer på det.

#Hvorfor kan jeg ikke…?

• Hvorfor får jeg ikke rørt denne widgeten? Den har hengelås: den kommer fra layoutet. Åpne layoutet og gjør endringen der — på skjermen endrer du bare egenskaper, synlighet og hendelser.
• Hvorfor lar den meg ikke velge layoutet? Det er en kollisjon: skjermen og layoutet har den samme widget-id-en eller det samme datastore-navnet. Gi den ene av de to nytt navn.
• Hvorfor viser ikke skjermen endringene jeg gjorde i layoutet? Fanen til skjermen sto åpen. Lukk og åpne den igjen.
• Hvorfor viser mobilen web-designet helt sammenklemt? Den skjermen har ikke noe mobildesign. Velg Mobil (390px) og bruk Kopier fra web eller Start tomt.
• Hvorfor endret jeg web uten at mobilen endret seg? Fordi de er uavhengige design. Kopieringen skjer bare i det øyeblikket du oppretter enheten.
• Hvorfor forsvant rammen fra alle skjermene? Layoutet ble slettet. Skjermene varsler Layoutet som var knyttet til skjermen finnes ikke lenger. — lag det på nytt og velg det igjen under Mal for skjermen.