Layouter och design per enhet

Två saker på den här sidan liknar varandra och är inte samma sak:

• En layout är en design som delas av flera skärmar — sidhuvudet, ramen, sidfoten som återkommer. Den görs en gång och används överallt.
• En enhet är en design av samma skärm för en annan storlek — webben, surfplattan, mobilen. Var och en är självständig.

Den ena handlar om att återanvända mellan skärmar; den andra om att servera samma skärm på skärmar av olika storlek.

#Layouter

En layout är ett dokument som en skärm — den har widgetar och kan ha datastorer — men utan rutt, utan parametrar och utan åtkomstregler. Man navigerar inte till en layout: den är bakgrunden för den som använder den.

#Skapa en layout

1. I sidofältet, fliken UI, avsnittet Skärmar.
2. Klicka på knappen Ny layout i avsnittets rubrik (eller i en mapps meny ⋯, för att skapa den där inne).
3. Skriv Layoutens namn — fältet föreslår t.ex. Bas med sidhuvud.
4. Skapa.

Layouten hamnar i samma träd som skärmarna (noteringen säger det: Layouten ligger i skärmträdet — dra den vart du vill), med en egen ikon, och öppnas omedelbart i en flik.

#Rita en layout

Redigeraren är densamma som för skärmarna — palett, canvas, inspektor, samma rörelser och samma genvägar (se Canvasen). Skillnaderna är avsiktliga:

I layouten	Varför
Rubrikens märke visar /layout.	En layout har ingen rutt.
Det finns varken Ruttparametrar, Presentation eller skärmens Händelser.	Inget av det hör till layouten.
I stället för Skärmens mall har inspektorn Basmall, med raden Bas.	En layout kan vila på en annan.

#Sätta en layout på en skärm

1. Öppna skärmen och klicka på en tom yta på canvasen (inspektorn visar då skärmen).
2. Öppna kategorin Skärmens mall.
3. Välj layouten på raden Layout. För att ta bort den, välj — ingen layout —.

Kategorins tips sammanfattar avtalet: Mallen bakom innehållet: layoutens widgetar visas låsta; egenskaper och händelser konfigureras per skärm.

#Vad som ändras på skärmen

Layoutens widgetar dyker upp på skärmens canvas, bakom dess innehåll, och med ett hänglås i hörnet. Vad man får och inte får göra med dem är en fast regel:

På skärmen, med en widget från layouten
Flytta, ändra storlek, ta bort, duplicera	Nej. Positionen redigeras i själva layouten.
Ändra egenskaper (texter, färger, alternativ)	Ja — och ändringen gäller bara den här skärmen.
Synlig / Aktiv	Ja, per skärm.
Händelser	Ja — beteendet hör alltid till skärmen.
Åtkomst och Värden i texten	Nej. De anges i layouten.

Inspektorn talar om vilken situation du är i: Widget från layouten: positionen redigeras i layouten; egenskaper, synlighet och händelser hör till DEN HÄR skärmen.

#Inga ”innehållszoner”

Det finns varken slots eller reserverade ytor: skärmens innehåll ritas alltid ovanpå layouten. Det är den som ritar layouten som lämnar den fria ytan där skärmarna sedan skriver — ett sidhuvud upptill, en list nedtill, och mitten tom.

#Krockar och kedjor

Två regler som plattformen kontrollerar och vägrar bryta:

• Unika id:n och namn. En skärm och dess layout kan inte ha samma widget-id eller samma datastore-namn — Krock med layouten: widget-id ”…” finns i båda. Det finns inga automatiska prefix: namnet du valde är namnet som gäller.
• Högst 3 nivåer, och inga varv. En layout kan vila på en annan (Basmall), men kedjan stannar vid tre — Layoutkedjan överstiger 3 nivåer. — och en cykel nekas.

#När layouten ändras

Skärmen sparar bara vilken layouten är och de ändringar den gjort på dess widgetar. Designen kopieras inte — därför ändrar en ändring av layouten alla skärmar som använder den, direkt, i den publicerade appen.

Två praktiska konsekvenser:

• I byggaren uppdateras inte en skärmflik som redan var öppen av sig själv när du sparar layouten: stäng och öppna skärmen igen för att se den med den nya versionen.
• Att ta bort en layout som används hindras inte. De skärmar som använde den börjar öppnas utan den, med varningen Den kopplade layouten finns inte längre. — de går inte sönder, men de blir utan ramen.

#Design per enhet

En skärm har tre möjliga designer, en per enhet:

Enhet	Referensbredd
Webb (1280px)	Dator.
Surfplatta (768px)	Surfplatta, och smala fönster.
Mobil (390px)	Mobiltelefon.

Man växlar mellan dem med de tre knapparna till vänster i designerns list.

Rutnätet är detsamma i alla tre — 48 kolumner — och det som ändras är varje kolumns bredd. En widget med 24 kolumner upptar halva sidan på vilken enhet som helst; höjden, däremot, räknas alltid i pixlar.

#Det finns inget arv

Det här är regeln som förklarar allt annat: varje enhet har sitt eget widgetträd, komplett och självständigt. Det finns inget ”dölj på webben och visa på mobilen” mellan träden — det som inte finns i en enhets träd finns inte på den enheten.

Webben finns alltid. Surfplattan och mobilen kan vara oritade — och i så fall serverar appen webbdesignen, hoptryckt till den verkliga bredden. Det är ett reservläge, inte arv: de förblir separata designer när det är dags att redigera.

#Börja designen för en enhet

Välj Surfplatta (768px) eller Mobil (390px) på en skärm som ännu inte har dem, så visar designern kortet Den här enheten har ingen design ännu, med förklaringen — Varje enhet har sin egen design. Så länge den här inte finns serverar körningen webbdesignen. — och två vägar:

Knapp	Vad den gör
Kopiera från webben	Duplicerar webbdesignen som utgångspunkt. Widgetarnas id:n behålls (databindningarna och koden hittar dem fortfarande) och bredderna justeras om av sig själva eftersom de anges i kolumner.
Börja tomt	Ett blankt blad, för att rita från grunden.

Kopian sker en gång. Därefter lever designerna sina egna liv: att röra webben rör inte mobilen.

#Dölja widgetar på den här enheten

Inuti en enhet har inspektorns flik Struktur ett öga vid varje widget: Dölj på den här enheten / Visa på den här enheten. En dold widget finns kvar i trädet och går fortfarande att redigera från Struktur — den syns bara inte på skärmen.

Om det som är dolt är behållaren följer barnen med — och deras öga förklarar det: Dold av en överordnad behållare.

#Sidans höjd

Höjden gäller per enhet: en mobil kan ha en mycket högre sida än webben för samma skärm. Dra i canvasens nedre kant (Sidans höjd — dra för att justera) för att ändra den.

När sidan är högre än enheten ritar canvasen en streckad linje med etiketten viewportens nederkant — det är där det som syns utan att scrolla tar slut. Allt som ligger under den linjen dyker bara upp för den som rullar sidan.

#Vad appen serverar

I den publicerade appen väljs enheten efter fönstrets bredd: under 640 px är det mobil, under 1024 px surfplatta, däröver webb. Att ändra fönstrets storlek ändrar den serverade designen, direkt.

Utan design för den enhet som upptäckts serveras webben. I den nativa mobilappen aviseras det reservläget — Den här skärmen har ingen mobildesign — visar webbdesignen.

Knappen Förhandsgranska öppnar skärmen i den riktiga appen; för att se hur den blir i en annan storlek ändrar du webbläsarfönstrets storlek.

#Händelser, id:n och enheter

Eftersom varje enhet är ett eget träd kan samma widget-id finnas i alla tre — det är med flit, det är ”samma logiska widget i en annan storlek”. Men var och en har sina egna egenskaper och sin egen kod: att ändra knappens onClick på webben ändrar inte mobilens.

När du skriver kod (se Händelser och SDK:t), kom ihåg att keplin.widgets.get("...") bara hittar widgetar på den enhet som körs. En widget som bara finns på webben ger fel på mobilen.

#Layouter och enheter, tillsammans

De två sakerna kombineras enligt samma regel: layouten sätts samman per enhet. En layout som bara ritats för webben dyker också upp i surfplattans och mobilens träd på de skärmar som använder den, och serverar då sin egen webbdesign — och en layout med en egen mobildesign serverar den.

#Hur du väljer

Situation	Vägen
Samma sidhuvud på 20 skärmar.	En layout.
En komplex skärm som måste vara något annat på mobilen.	En egen mobildesign.
En knapp som inte är meningsfull på mobilen.	Ögat i Struktur på mobilenheten.
En annan meny på mobilen.	Redigeraren för Navigering, på mobilenheten.
En app som bara kommer att användas på dator.	Rita bara webben och tänk inte mer på det.

#Varför inte…?

• Varför går det inte att röra den här widgeten? Den har ett hänglås: den kommer från layouten. Öppna layouten och ändra där — på skärmen ändrar du bara egenskaper, synlighet och händelser.
• Varför får jag inte välja layouten? Det finns en krock: skärmen och layouten har samma widget-id eller samma datastore-namn. Byt namn på en av dem.
• Varför visar skärmen inte ändringarna jag gjort i layouten? Skärmens flik var öppen. Stäng och öppna den igen.
• Varför visar mobilen webbdesignen helt hoptryckt? Den skärmen har ingen mobildesign. Välj Mobil (390px) och använd Kopiera från webben eller Börja tomt.
• Varför ändrades inte mobilen när jag ändrade på webben? För att de är självständiga designer. Kopian sker bara i det ögonblick du skapar enheten.
• Varför försvann ramen från alla skärmar? Layouten togs bort. Skärmarna varnar Den kopplade layouten finns inte längre. — skapa den på nytt och välj den igen i Skärmens mall.