Layoutit ja laitekohtainen ulkoasu

Kaksi tämän sivun asiaa muistuttaa toisiaan mutta ei ole sama:

• Layout on useiden näyttöjen jakama ulkoasu — ylätunniste, kehys, alatunniste, jotka toistuvat. Tehdään kerran ja käytetään kaikkialla.
• Laite on saman näytön ulkoasu toiselle koolle — web, tabletti, puhelin. Jokainen on itsenäinen.

Toinen on uudelleenkäyttöä näyttöjen välillä; toinen on saman näytön tarjoilemista erikokoisille ruuduille.

#Layoutit

Layout on dokumentti kuten näyttö — sillä on widgettejä ja sillä voi olla datastoreja — mutta ilman reittiä, ilman parametreja ja ilman pääsysääntöjä. Layoutille ei navigoida: se on käyttäjänsä tausta.

#Layoutin luominen

1. Sivupalkissa, paneelissa UI, osiossa Näytöt.
2. Napsauta painiketta Uusi layout osion ylätunnisteessa (tai kansion ⋯-valikossa, jos haluat luoda sen kansion sisään).
3. Kirjoita Layoutin nimi — kenttä ehdottaa esim. Perusta ylätunnisteella.
4. Luo.

Layout on samassa puussa näyttöjen kanssa (huomautus sanoo sen: Layout on näyttöjen puussa — vedä se minne haluat), omalla kuvakkeellaan, ja se avautuu heti välilehteen.

#Layoutin suunnittelu

Editori on sama kuin näytöillä — paletti, canvas, inspector, samat eleet ja samat pikanäppäimet (katso Canvas). Erot ovat tarkoituksellisia:

Layoutissa	Miksi
Ylätunnisteen merkki näyttää /layout.	Layoutilla ei ole reittiä.
Ei ole Reitin parametreja, Esitystapaa eikä näytön Tapahtumia.	Mikään niistä ei kuulu layoutille.
Näytön pohjan sijaan inspectorissa on Peruspohja, rivillä Perusta.	Layout voi rakentua toisen päälle.

#Layoutin asettaminen näytölle

1. Avaa näyttö ja napsauta canvasin tyhjää aluetta (inspector alkaa näyttää näyttöä).
2. Avaa kategoria Näytön pohja.
3. Valitse rivillä Layout haluamasi layout. Poistaaksesi sen valitse — ei layoutia —.

Kategorian vihje tiivistää sopimuksen: Sisällön takana oleva pohja: layoutin widgetit näkyvät lukittuina; ominaisuudet ja tapahtumat määritetään näyttökohtaisesti.

#Mikä näytöllä muuttuu

Layoutin widgetit alkavat näkyä näytön canvasilla, sen sisällön takana, ja lukko kulmassa. Mitä niillä voi ja ei voi tehdä on kiinteä sääntö:

Näytöllä, layoutin widgetille
Siirtää, muuttaa kokoa, poistaa, monistaa	Ei. Sijaintia muokataan itse layoutissa.
Muuttaa ominaisuuksia (tekstit, värit, asetukset)	Kyllä — ja muutos koskee vain tätä näyttöä.
Näkyvä / Käytössä	Kyllä, näyttökohtaisesti.
Tapahtumat	Kyllä — käyttäytyminen kuuluu aina näytölle.
Käyttöoikeus ja Lauseen arvot	Ei. Ne määritetään layoutissa.

Inspector kertoo, missä tilanteessa olet: Layoutin widget: sijaintia muokataan layoutissa; ominaisuudet, näkyvyys ja tapahtumat kuuluvat TÄLLE näytölle.

#Ei ”sisältöalueita”

Ei ole slotteja eikä varattuja alueita: näytön sisältö piirretään aina layoutin päälle. Layoutin suunnittelija jättää vapaan tilan sinne, mihin näytöt kirjoittavat — ylätunniste ylös, palkki alas, ja keskusta tyhjäksi.

#Ristiriidat ja ketjut

Kaksi sääntöä, jotka alusta tarkistaa ja joiden rikkomisesta se kieltäytyy:

• Yksilölliset id:t ja nimet. Näytöllä ja sen layoutilla ei voi olla samaa widgetin id:tä eikä samaa datastoren nimeä — Ristiriita layoutin kanssa: widget-id "…" on molemmissa. Automaattisia etuliitteitä ei ole: valitsemasi nimi on se, joka jää.
• Enintään 3 tasoa, eikä silmukoita. Layout voi rakentua toisen päälle (Peruspohja), mutta ketju pysähtyy kolmeen — Layoutketju ylittää 3 tasoa. — ja kehä hylätään.

#Kun layout muuttuu

Näyttö muistaa vain minkä layoutin se käyttää sekä muutokset, jotka se teki layoutin widgetteihin. Ulkoasua ei kopioida — siksi layoutin muuttaminen muuttaa kaikki sitä käyttävät näytöt, heti, julkaistussa sovelluksessa.

Kaksi käytännön seurausta:

• Rakentimessa jo auki ollut näytön välilehti ei päivity itsestään, kun tallennat layoutin: sulje ja avaa näyttö uudelleen nähdäksesi sen uudella versiolla.
• Käytössä olevan layoutin poistamista ei estetä. Näytöt, jotka käyttivät sitä, alkavat avautua ilman sitä, varoituksella Liitettyä layoutia ei ole enää olemassa. — ne eivät hajoa, mutta jäävät ilman kehystä.

#Laitekohtainen ulkoasu

Näytöllä on kolme mahdollista ulkoasua, yksi laitetta kohden:

Laite	Viiteleveys
Web (1280px)	Tietokone.
Tabletti (768px)	Tabletti, ja kapeat ikkunat.
Mobiili (390px)	Puhelin.

Niitä vaihdetaan designerin palkin kolmesta vasemmanpuoleisesta painikkeesta.

Ruudukko on sama kaikissa kolmessa — 48 saraketta — ja se, mikä muuttuu, on kunkin sarakkeen leveys. Widgetti, jolla on 24 saraketta, vie puolet sivusta millä tahansa laitteella; korkeus taas lasketaan aina pikseleinä.

#Perintää ei ole

Tämä on sääntö, joka selittää kaiken muun: jokaisella laitteella on oma widgettipuunsa, täydellinen ja itsenäinen. Puiden välillä ei ole ”piilota webissä ja näytä puhelimella” — se, mitä laitteen puussa ei ole, ei ole olemassa sillä laitteella.

Web on aina olemassa. Tabletti ja puhelin voivat olla suunnittelematta — siinä tapauksessa sovellus tarjoilee web-ulkoasun, puristettuna todelliseen leveyteen. Se on varakeino tarjoilua varten, ei perintä: muokkaushetkellä ne ovat yhä erillisiä ulkoasuja.

#Laitteen ulkoasun aloittaminen

Valitse Tabletti (768px) tai Mobiili (390px) näytöllä, jolla niitä ei vielä ole, niin designer näyttää kortin Tällä laitteella ei ole vielä ulkoasua, selityksen kera — Jokaisella laitteella on oma ulkoasunsa. Niin kauan kuin tätä ei ole, ajoympäristö näyttää web-ulkoasun. — ja kaksi polkua:

Painike	Mitä se tekee
Kopioi webistä	Monistaa web-ulkoasun lähtökohdaksi. Widgettien id:t säilyvät (datasidonnat ja koodi löytävät ne edelleen) ja leveydet mukautuvat, koska ne ovat sarakkeina.
Aloita tyhjästä	Tyhjä arkki, suunnittelua varten alusta asti.

Kopiointi tapahtuu kerran. Siitä eteenpäin ulkoasut elävät erillistä elämää: webin muokkaaminen ei muokkaa puhelinta.

#Widgettien piilottaminen tällä laitteella

Laitteen sisällä inspectorin välilehdellä Rakenne on silmä jokaisella widgetillä: Piilota tällä laitteella / Näytä tällä laitteella. Piilotettu widgetti pysyy puussa ja pysyy muokattavana Rakenteesta käsin — se ei vain näy näytöllä.

Jos piilotettu on säiliö, lapset menevät sen mukana — ja niiden silmä selittää sen: Piilotettu ylemmän säiliön takia.

#Sivun korkeus

Korkeus on laitekohtainen: puhelimella sivu voi olla paljon korkeampi kuin webissä samalla näytöllä. Vedä canvasin alareunaa (Sivun korkeus — vedä säätääksesi) muuttaaksesi sitä.

Kun sivu on laitetta korkeampi, canvas piirtää katkoviivan, jossa on nimiö näkymäalueen alareuna — siihen päättyy se, mikä näkyy ilman vieritystä. Kaikki tuon viivan alapuolella oleva näkyy vain sille, joka vierittää sivua.

#Mitä sovellus tarjoilee

Julkaistussa sovelluksessa laite valitaan ikkunan leveydestä: alle 640 px on puhelin, alle 1024 px on tabletti, sen yli on web. Ikkunan koon muuttaminen vaihtaa tarjoiltavan ulkoasun, siinä paikassa.

Ilman havaitun laitteen ulkoasua tarjoillaan web. Natiivissa mobiilisovelluksessa tuo varakeino kerrotaan ääneen — Tällä näytöllä ei ole ulkoasua puhelimelle — näytetään web-ulkoasua.

Painike Esikatsele avaa näytön oikeassa sovelluksessa; nähdäksesi miltä se näyttää toisessa koossa, muuta selainikkunan kokoa.

#Tapahtumat, id:t ja laitteet

Koska jokainen laite on oma puunsa, sama widgetin id voi olla olemassa kaikissa kolmessa — se on tarkoituksellista, se on ”sama looginen widgetti toisessa koossa”. Mutta jokaisella on omat ominaisuutensa ja oma koodinsa: painikkeen onClickin muuttaminen webissä ei muuta puhelimen vastaavaa.

Koodia kirjoittaessasi (katso Tapahtumat ja SDK) muista, että keplin.widgets.get("...") löytää vain suorituksessa olevan laitteen widgetit. Widgetti, joka on olemassa vain webissä, antaa virheen puhelimella.

#Layoutit ja laitteet yhdessä

Nämä kaksi asiaa yhdistyvät samalla säännöllä: layout kootaan laitteittain. Layout, joka on suunniteltu vain webiin, näkyy myös sitä käyttävien näyttöjen tabletti- ja puhelinpuissa, tarjoillen oman web-ulkoasunsa — ja layout, jolla on oma puhelinulkoasu, tarjoilee sen.

#Miten päättää

Tilanne	Polku
Sama ylätunniste 20 näytöllä.	Layout.
Monimutkainen näyttö, jonka on oltava puhelimella jotain muuta.	Oma puhelinulkoasu.
Painike, joka ei ole järkevä puhelimella.	Rakenteen silmä puhelinlaitteella.
Erilainen valikko puhelimella.	Navigointi-editori, puhelinlaitteella.
Sovellus, jota käytetään vain tietokoneella.	Suunnittele vain web äläkä mieti asiaa enempää.

#Miksi ei…?

• Miksi en voi koskea tähän widgetiin? Sillä on lukko: se tulee layoutista. Avaa layout ja muokkaa siellä — näytöllä muutat vain ominaisuuksia, näkyvyyttä ja tapahtumia.
• Miksi layoutia ei anneta valita? On ristiriita: näytöllä ja layoutilla on sama widgetin id tai sama datastoren nimi. Nimeä toinen uudelleen.
• Miksi näyttö ei näytä layoutiin tekemiäni muutoksia? Näytön välilehti oli auki. Sulje ja avaa uudelleen.
• Miksi puhelin näyttää webin ulkoasun kokoon puristettuna? Sillä näytöllä ei ole puhelinulkoasua. Valitse Mobiili (390px) ja käytä Kopioi webistä tai Aloita tyhjästä.
• Miksi muokkasin webiä eikä puhelin muuttunut? Koska ne ovat itsenäisiä ulkoasuja. Kopiointi tapahtuu vain sillä hetkellä, kun luot laitteen.
• Miksi kehys katosi kaikilta näytöiltä? Layout poistettiin. Näytöt varoittavat Liitettyä layoutia ei ole enää olemassa. — luo se uudelleen ja valitse se taas kohdassa Näytön pohja.