Lay-outs en ontwerp per apparaat

Twee dingen op deze pagina lijken op elkaar en zijn niet hetzelfde:

• Een lay-out is een ontwerp dat door meerdere schermen gedeeld wordt — de koptekst, het kader, de voettekst die zich herhalen. U maakt hem één keer en gebruikt hem overal.
• Een apparaat is een ontwerp van hetzelfde scherm voor een ander formaat — het web, de tablet, de telefoon. Elk is onafhankelijk.

Het ene gaat over hergebruik tussen schermen; het andere over hetzelfde scherm serveren op schermen van verschillende formaten.

#Lay-outs

Een lay-out is een document zoals een scherm — hij heeft widgets en mag datastores hebben — maar zonder route, zonder parameters en zonder toegangsregels. Men navigeert niet naar een lay-out: hij is de achtergrond van wie hem gebruikt.

#Een lay-out aanmaken

1. Ga in de zijbalk naar het tabblad UI, sectie Schermen.
2. Klik op de knop Nieuwe lay-out, in de kop van de sectie (of, in het menu ⋯ van een map, om hem daarbinnen aan te maken).
3. Typ de Naam van de lay-out — het veld stelt bijv. Basis met koptekst voor.
4. Aanmaken.

De lay-out staat in dezelfde boom als de schermen (de notitie zegt het: De lay-out staat in de boom van de schermen — sleep hem waar u wilt), met een eigen pictogram, en opent meteen in een tabblad.

#Een lay-out tekenen

De editor is dezelfde als die van de schermen — palet, canvas, inspector, dezelfde gebaren en dezelfde sneltoetsen (zie Het canvas). De verschillen zijn met opzet:

In de lay-out	Waarom
De badge in de kop toont /layout.	Een lay-out heeft geen route.
Er zijn geen Routeparameters, geen Presentatie en geen Gebeurtenissen van het scherm.	Niets daarvan hoort bij de lay-out.
In plaats van Sjabloon van het scherm heeft de inspector Basissjabloon, met de regel Basis.	Een lay-out mag op een andere rusten.

#Een lay-out op een scherm zetten

1. Open het scherm en klik op een lege zone van het canvas (de inspector toont dan het scherm).
2. Open de categorie Sjabloon van het scherm.
3. Kies op de regel Lay-out de lay-out. Om hem weg te halen, kiest u — geen lay-out —.

De tip van de categorie vat het contract samen: Sjabloon achter de inhoud: de widgets van de lay-out zijn vergrendeld te zien; eigenschappen en gebeurtenissen stelt u per scherm in.

#Wat er in het scherm verandert

De widgets van de lay-out verschijnen voortaan in het canvas van het scherm, achter de inhoud ervan, en met een hangslot in de hoek. Wat u er wel en niet mee mag doen, is een vaste regel:

In het scherm, met een widget uit de lay-out
Verplaatsen, formaat wijzigen, verwijderen, dupliceren	Nee. De positie bewerkt u in de lay-out zelf.
Eigenschappen wijzigen (teksten, kleuren, opties)	Ja — en de wijziging geldt alleen voor dit scherm.
Zichtbaar / Actief	Ja, per scherm.
Gebeurtenissen	Ja — het gedrag hoort altijd bij het scherm.
Toegang en Waarden in de zin	Nee. Die stelt u in de lay-out in.

De inspector zegt u in welke situatie u zit: Widget uit de lay-out: de positie bewerkt u in de lay-out; eigenschappen, zichtbaarheid en gebeurtenissen horen bij DIT scherm.

#Geen "inhoudszones"

Er zijn geen slots of gereserveerde gebieden: de inhoud van het scherm wordt altijd bovenop de lay-out getekend. Het is wie de lay-out tekent die de ruimte vrijlaat waar de schermen gaan schrijven — een koptekst bovenaan, een balk onderaan, en het midden leeg.

#Botsingen en ketens

Twee regels die het platform controleert en niet laat breken:

• Unieke id's en namen. Een scherm en zijn lay-out mogen niet hetzelfde widget-id en niet dezelfde datastorenaam hebben — Botsing met de lay-out: het widget-id "…" bestaat in beide. Er zijn geen automatische voorvoegsels: de naam die u gekozen hebt, is de naam die blijft.
• Hoogstens 3 niveaus, en geen rondjes. Een lay-out mag op een andere rusten (Basissjabloon), maar de keten stopt bij drie — De keten van lay-outs gaat voorbij 3 niveaus. — en een cyclus wordt geweigerd.

#Wanneer de lay-out verandert

Het scherm bewaart alleen welke lay-out het is en de wijzigingen die het aan diens widgets heeft aangebracht. Het ontwerp wordt niet gekopieerd — daarom verandert de lay-out wijzigen alle schermen die hem gebruiken, meteen, in de gepubliceerde app.

Twee praktische gevolgen:

• In de builder werkt een schermtabblad dat al open stond zichzelf niet bij wanneer u de lay-out opslaat: sluit het scherm en open het opnieuw om het met de nieuwe versie te zien.
• Een lay-out die in gebruik is verwijderen wordt niet verhinderd. De schermen die hem gebruikten openen voortaan zonder hem, met de melding De bijbehorende lay-out bestaat niet meer. — zij breken niet, maar staan zonder kader.

#Ontwerp per apparaat

Een scherm heeft drie mogelijke ontwerpen, één per apparaat:

Apparaat	Referentiebreedte
Web (1280 px)	Computer.
Tablet (768 px)	Tablet, en smalle vensters.
Mobiel (390 px)	Telefoon.

U wisselt ertussen met de drie knoppen links op de balk van de designer.

Het raster is in alle drie hetzelfde — 48 kolommen — en wat verandert is de breedte van elke kolom. Een widget van 24 kolommen neemt op elk apparaat de helft van de pagina in; de hoogte wordt altijd in pixels geteld.

#Er is geen overerving

Dit is de regel die de rest verklaart: elk apparaat heeft zijn eigen, volledige en onafhankelijke widgetboom. Er bestaat geen "verbergen op web en tonen op de telefoon" tussen bomen — wat niet in de boom van een apparaat staat, bestaat op dat apparaat niet.

Het web bestaat altijd. De tablet en de telefoon mogen nog niet getekend zijn — en in dat geval serveert de app het webontwerp, samengeperst tot de echte breedte. Dat is een terugval om te kunnen serveren, geen overerving: het blijven bij het bewerken gescheiden ontwerpen.

#Het ontwerp van een apparaat beginnen

Kies Tablet (768 px) of Mobiel (390 px) op een scherm dat ze nog niet heeft, en de designer toont de kaart Dit apparaat heeft nog geen ontwerp, met de uitleg — Elk apparaat heeft zijn eigen ontwerp. Zolang dit ontwerp niet bestaat, serveert de runtime het webontwerp. — en twee wegen:

Knop	Wat die doet
Kopiëren van web	Dupliceert het webontwerp als vertrekpunt. De id's van de widgets blijven behouden (de gegevenskoppelingen en de code vinden ze nog steeds) en de breedtes passen zich vanzelf aan omdat ze in kolommen staan.
Leeg beginnen	Een blanco blad, om vanaf nul te tekenen.

De kopie gebeurt één keer. Vanaf dat moment leiden de ontwerpen gescheiden levens: aan het web werken raakt de telefoon niet.

#Widgets op dit apparaat verbergen

Binnen een apparaat heeft het tabblad Structuur van de inspector een oogje bij elke widget: Verbergen op dit apparaat / Tonen op dit apparaat. Een verborgen widget blijft in de boom staan en blijft vanuit de Structuur bewerkbaar — hij verschijnt alleen niet op het scherm.

Is het de container die verborgen is, dan gaan de kinderen mee — en hun oogje legt het uit: Verborgen door een bovenliggende container.

#De hoogte van de pagina

De hoogte geldt per apparaat: een telefoon mag voor hetzelfde scherm een veel hogere pagina hebben dan het web. Sleep de onderrand van het canvas (Hoogte van de pagina — sleep om aan te passen) om haar te wijzigen.

Wanneer de pagina hoger is dan het apparaat, tekent het canvas een stippellijn met het label onderkant van de viewport — daar eindigt wat men ziet zonder te scrollen. Alles onder die lijn verschijnt alleen voor wie de pagina rolt.

#Wat de app serveert

In de gepubliceerde app wordt het apparaat gekozen op de breedte van het venster: onder 640 px is het telefoon, onder 1024 px is het tablet, daarboven is het web. Het venster van formaat veranderen wijzigt het geserveerde ontwerp, ter plekke.

Zonder ontwerp voor het gedetecteerde apparaat wordt het web geserveerd. In de native mobiele app wordt die terugval aangekondigd — Dit scherm heeft geen ontwerp voor de telefoon — het webontwerp wordt getoond.

De knop Voorbeeld opent het scherm in de echte app; om te zien hoe het er op een ander formaat uitziet, wijzigt u het formaat van het browservenster.

#Gebeurtenissen, id's en apparaten

Omdat elk apparaat een eigen boom is, mag hetzelfde widget-id in alle drie bestaan — dat is met opzet, het is "dezelfde logische widget op een ander formaat". Maar elk heeft zijn eigen eigenschappen en zijn eigen code: de onClick van de knop op het web wijzigen wijzigt die van de telefoon niet.

Denk er bij het schrijven van code (zie Gebeurtenissen en de SDK) aan dat keplin.widgets.get("...") alleen widgets vindt van het apparaat dat draait. Een widget die alleen op het web bestaat, geeft op de telefoon een fout.

#Lay-outs en apparaten, samen

De twee dingen combineren volgens dezelfde regel: de lay-out wordt per apparaat samengesteld. Een lay-out die alleen voor het web getekend is, verschijnt ook in de tablet- en telefoonbomen van de schermen die hem gebruiken, en serveert daar zijn eigen webontwerp — en een lay-out met een eigen ontwerp voor de telefoon serveert dat.

#Hoe te beslissen

Situatie	De weg
Dezelfde koptekst op 20 schermen.	Een lay-out.
Een complex scherm dat op de telefoon iets anders moet zijn.	Een eigen telefoonontwerp.
Een knop die op de telefoon geen zin heeft.	Het oogje van de Structuur op het apparaat telefoon.
Een ander menu op de telefoon.	De editor Navigatie, op het apparaat telefoon.
Een app die alleen op de computer gebruikt gaat worden.	Teken alleen het web en denk er niet verder over na.

#Waarom niet…?

• Waarom lukt het niet aan deze widget te werken? Hij heeft een hangslot: hij komt uit de lay-out. Open de lay-out en werk daar — in het scherm wijzigt u alleen eigenschappen, zichtbaarheid en gebeurtenissen.
• Waarom laat hij mij de lay-out niet kiezen? Er is een botsing: het scherm en de lay-out hebben hetzelfde widget-id of dezelfde datastorenaam. Hernoem een van beide.
• Waarom toont het scherm de wijzigingen niet die ik in de lay-out heb gemaakt? Het tabblad van het scherm stond open. Sluit het en open het opnieuw.
• Waarom toont de telefoon het webontwerp helemaal samengeperst? Dat scherm heeft geen telefoonontwerp. Kies Mobiel (390 px) en gebruik Kopiëren van web of Leeg beginnen.
• Waarom heb ik aan het web gewerkt en is de telefoon niet veranderd? Omdat het onafhankelijke ontwerpen zijn. De kopie gebeurt alleen op het moment dat u het apparaat aanmaakt.
• Waarom is het kader van alle schermen verdwenen? De lay-out is verwijderd. De schermen melden De bijbehorende lay-out bestaat niet meer. — maak hem opnieuw aan en kies hem weer bij Sjabloon van het scherm.