Navigointi ja teema

Neljä näyttöä ovat olemassa, mutta sovellukseen astuva ei pääse niihin mitenkään: puuttuu navigointi. Tämä vaihe on lyhyt ja muuttaa kaiken — lopussa sovelluksella on valikko, logo, omat värit, ja se on valmis puhumaan useampaa kuin yhtä kieltä.

Kolme eri asiaa, kolme eri paikkaa:

Mikä	Missä se tehdään
Navigointi — valikko, jolla sovelluksessa liikutaan	Paneeli UI ▸ Navigointi
Teema — värit, kulmat ja typografia	Sovelluksen asetukset ▸ Teema
Kielet — kielet ja lauseet	Sovelluksen asetukset ▸ Käännökset

#Navigointieditori

1. Napsauta paneelissa UI kohtaa Navigointi, aivan osion Näytöt yläpuolella. Editori avautuu välilehteen.
2. Editori on sovelluksen palkin pienoismalli: vedät valikoita alueiden (vasen, keskellä, oikea) välillä ja näet tuloksen saman tien.
3. Kolme laitepainiketta ylhäällä — Web (1280px), Tabletti (768px), Mobiili (390px) — vaihtavat suunnitelmaa. Aloita laitteella Web.

#Kolmen valikon luominen

1. Napsauta vasemman alueen +-painiketta. Näkyviin tulee uusi kohde ja oikealle paneeli Valittu kohde.
2. Valitse Valikko — tyyppi, joka vie näytölle.
3. Täytä Valikon nimi, valitse Kuvake ja kohdassa Näyttö kohdenäyttö.
4. Toista kaikille kolmelle.

Valikon nimi	Kuvake	Näyttö
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Huomaa, mikä listalta puuttuu: Ficha de Conta. Se on tarkoituksellista — sinne päästään napsauttamalla asiakkuustaulukon riviä, ei valikosta. Näyttö ilman valikkoa on yhä saavutettavissa reitin ja koodin kautta; navigointi on vain etuovi.

5. Valitse oikeasta ylänurkasta Aloitusvalikko: Início. Se on näyttö, joka avautuu, kun joku tulee sovellukseen osoittamatta mitään reittiä.
6. Napsauta Tallenna — ”Navigointi tallennettu.”

#Käyttäjävalikko

Palkin oikeassa reunassa on erityinen kohde: Käyttäjävalikko. Siinä sovelluksen käyttäjä näkee nimensä ja kirjautuu ulos. Valitse se ja hienosäädä:

• Näytä nimi ja Näytä käyttäjätunnus (login) — mitä avatarin vieressä näkyy. Ilman kuvaketta avatar näyttää nimen alkukirjaimet.
• ”Kirjaudu ulos” -vaihtoehto — jätä valinnaksi Järjestelmän oletus (käännetty), paitsi jos haluat toisen tekstin.

#Sovelluksen logo

Logo asuu palkissa, kaikkein vasemmalla. Ennen kuin sen voi valita, se on ladattava sovellukseen:

1. Napsauta paneelin UI osiossa Assetit kohtaa Lataa tiedostoja ja valitse logosi. SVG on paras valinta: se pysyy terävänä kaikissa ko'oissa ja on ainoa muoto, joka sallii rajauksen.
2. Palaa välilehdelle Navigointi ja napsauta pienoismallin logoa (Muokkaa sovelluksen logoa).
3. Valitse kohdassa Kuvake tai kuva lataamasi tiedosto.
4. Kytke päälle Näytä sovelluksen nimi, jos haluat nimen kirjoitettuna symbolin viereen.
5. Vedä kohdassa Rajaus palkissa kuvaa sijoittaaksesi sen ja käytä säätimiä Mittakaava ja Laatikon leveys mitoittamiseen — ”SVG-tiedosto säilyy koskemattomana — rajaus on vain visuaalinen ja peruttavissa.” Sovita laatikkoon tekee työn puolestasi; Ei rajausta palaa alkuun.
6. Sulje painikkeella Valmis ja napsauta Tallenna.

#Jokaisella laitteella on oma navigointinsa

Palaa editorin yläreunaan ja napsauta Mobiili (390px). Huomaa, että suunnitelma on toinen — ja että näkyviin tulee uusi valitsin, Tila:

Tila	Mitä se antaa
Yläpalkki	Sama palkki kuin webissä, kutistettuna.
Hampurilaisvalikko	Painike, joka avaa valikon sivupaneeliin. Yleisin puhelimessa.
Toimintopalkki	Palkki näytön alareunassa, enintään 5 kohdetta — mobiilisovellusten vakioratkaisu.

Kokoa Mobiilissa samat kolme valikkoa (Início, Contas, Oportunidades), valitse mieleisesi Tila ja tallenna. Myös Aloitusvalikko on laitekohtainen — voit avata kojelaudan tietokoneella ja asiakkuuslistan puhelimessa.

#Teema — sovelluksen maalaaminen

Teema maalaa rakennetun sovelluksen koskematta yhteenkään näyttöön.

1. Napsauta sovelluspalkin yläreunassa ratasta (Sovelluksen asetukset).
2. Valitse ryhmässä Ulkoasu kohta Teema.
3. Vasemmalla ovat väriryhmät; oikealla paneeli Esikatselu — ”Esimerkki nykyisillä tokeneilla — päivittyy suoraan.” Jokainen muuttamasi väri näkyy siellä samassa hetkessä.

Ryhmä	Mitä se maalaa
Perusta	Sovelluksen tausta ja teksti, reunukset, kentät ja kohdistusrengas.
Pinnat	Kortit ja popoverit (valikot, pudotusvalikot, työkaluvihjeet).
Värit	Semanttiset värit — Ensisijainen, Toissijainen, Tuhoava, Korostus, Vaimennettu — ja kunkin päällä oleva teksti.
Navigointi	Sovelluksen navigointipalkit. Oletuksena ne seuraavat pintoja; täällä brändäys tehdään.

Asiakashallinnalle riittää kahden asian muuttaminen:

1. Aseta ryhmässä Värit kohtaan Ensisijainen brändisi väri. Se on toimintopainikkeiden, linkkien ja aktiivisen tilan väri.
2. Päätä ryhmässä Navigointi, jääkö palkki vaaleaksi (pintoja seuraten, mikä on oletus) vai saako se brändin värin. Jos maalaat sen, säädä myös Palkkien teksti — tummaa palkkia tummalla tekstillä ei voi lukea.

Jokaisella värillä on visuaalinen valitsin ja heksadesimaalikenttä (#rrggbb) — kirjoittaminen tai valitseminen on sama asia. Listan lopussa Muoto ja typografia:

• Kulmien pyöristys — välillä Ei pyöristystä (0) ja Suurin (1rem), viidessä askeleessa.
• Ilmoitusten sijainti — missä nurkassa ilmoitukset näkyvät (ne, jotka edellisen vaiheen keplin.ui.toast() näyttää).
• Kirjasin (sans) — sovelluksen kirjasinpino.

Tallenna painikkeella Tallenna. Palataksesi alkuperäisiin väreihin käytä Palauta oletukset — se palauttaa editorissa, ja lopulliseksi se tulee vasta kun tallennat.

#Kielet

Tämän vaiheen viimeinen palanen on osio Käännökset, asetusten ryhmässä Lokalisointi. Se on matriisi: yksi rivi lausetta kohden, yksi sarake kieltä kohden.

Juuri rakennetussa sovelluksessa se on tyhjä, ja se on normaalia: widgetteihin kirjoittamasi tekstit asuvat näytöillä. Käännökset ovat niitä tekstejä varten, jotka koodi kirjoittaa — ja antamaan sovellukselle toisen kielen.

Kielen lisääminen:

1. Napsauta matriisin ylätunnisteen +-painiketta.
2. Valitse kieli kohdassa valitse kieli… ja vahvista painikkeella Lisää kieli. Uusi sarake syntyy tyhjänä.

Lauseen luominen:

1. Kirjoita viimeiselle riville, joka odottaa aina (”kirjoita luodaksesi…”).
2. Lauseen Avain ”(tulee lauseesta)” — sen tunnistaa itse teksti peruskielellä.
3. Täytä muut sarakkeet käännöksellä.

Näyttöjen tapahtumissa lausetta käytetään tekstin kautta:

keplin.ui.toast(keplin.i18n.t("Asiakkuus tallennettu"));

Saadaksesi arvon keskelle lausetta kirjoita se aaltosulkeisiin: {n} asiakkuutta antaa 3 asiakkuutta, ja arvo tulee koodista — keplin.i18n.t("{n} asiakkuutta", { n: 3 }). Keltainen solu varoittaa, että käännöksestä puuttuu aaltosulje, joka alkuperäisessä on: sillä kielellä arvo ei näkyisi.

Lopuksi Tallenna — ”Käännökset tallennettu ja käännetty.”

#Miksi ei…?

• Miksi näyttöni ei näy valikon näyttölistalla? Valitsin Näyttö listaa sovelluksen tavalliset näytöt. Järjestelmänäytöt (kirjautuminen, palautus, rekisteröityminen) eivät kuulu valikoihin — alusta tarjoilee ne itse.
• Miksi sovellus avautuu yhä väärälle näytölle? Aloitusvalikko on laitekohtainen. Varmista se sillä laitteella, jolla testaat.
• Miksi logoni näkyy leikattuna? Käytä Sovita laatikkoon tai kasvata Laatikon leveyttä. Ja muista: rajaus on käytettävissä vain SVG-tiedostoille.
• Miksi teema ei muuttunut sovelluksessa? Tallenna jäi tekemättä — Esikatselu päivittyy suoraan, mutta rakennettu sovellus saa teeman vasta kun tallennat.
• Miksi widget jätti uuden värin huomiotta? Sillä on käsin kirjoitettu väri kategoriassa Ulkoasu. Vaihda se teeman tokeniin.

Sovellus on koottu ja maalattu. Seuraava vaihe: logiikka ja automaatio.