Sovelluksen navigointi

Näytöt ovat sivuja; navigointi on se, mikä vie ihmiset niiden luo. Keplinissä se ei asu minkään näytön sisällä: se on sovelluksen oma dokumentti, joka suunnitellaan visuaalisessa editorissa ja tarjoillaan minkä tahansa avoinna olevan näytön ympärille.

Ja se suunnitellaan laitteittain: tietokoneen yläpalkki, puhelimen vetolaatikko ja tabletin toimintopalkki ovat kolme itsenäistä suunnitelmaa, kullakin omat valikkonsa.

#Editorin avaaminen

Sovelluksen sivupalkissa, paneelissa UI, ensimmäinen kohde on nimeltään Navigointi. Napsauta, niin se avautuu työtilan välilehteen.

Keskellä näkyvä ei ole lomake: se on sovelluksen sivu, piirrettynä sellaisena kuin siitä tulee. Palkki ylhäällä, näytön sisältö alhaalla (Näytön sisältö), tunnus vasemmalla. Muokkaat koskemalla siihen.

Otsikon alla ovat säätimet, jotka hallitsevat sitä, mitä katsot:

Säädin	Mitä se tekee
Web (1280px) / Tabletti (768px) / Mobiili (390px)	Valitsee laitteen, jota suunnittelet.
Tila (vain tabletti ja puhelin)	Navigoinnin muoto sillä laitteella.
Aloitusvalikko	Mikä valikoista avautuu, kun joku tulee sovellukseen.

#Eleet

Ele	Mitä tapahtuu
Napsautus valikkoon	Valitsee sen (ja kontekstissa näyttää sen sivupalkin).
Kaksoisnapsautus valikkoon	Avaa modaalin Valittu kohde, jossa kaikkea muokataan.
Valikon vetäminen	Siirtää sen alueelta toiselle tai järjestää uudelleen. Sen voi pudottaa vain sinne, missä se on kelvollinen.
+	Lisää valikon siihen paikkaan.
× valikon kulmassa	Poistaa sen.
Napsautus tunnukseen	Avaa modaalin Sovelluksen logo.

#Valikkotyypit

Kunkin alueen painike + näyttää tyypit, jotka se paikka hyväksyy:

Tyyppi	Mikä se on
Valikko	Vie sovelluksen näytölle. Tavallinen kohde.
Alivalikko	Ryhmittelee muita valikoita — vetolaatikossa ja sivupalkeissa.
Konteksti (sivupalkki)	Valikko, joka valittuna aktivoi oman sivupalkin lapsineen. Ikään kuin se jakaisi sovelluksen alueisiin.
Erotin	Jakoviiva.
Käyttäjävalikko	Käyttäjän avatar, omine kohtineen ja Kirjaudu ulos -toimintoineen.
Ilmoitukset	Kello, lukemattomien automaattisella lukumäärällä.
Kieli	Kielivalitsin: sovelluksen kielet, kukin omalla nimellään.
Widget-alue	Palkkinäyttö, joka piirretään palkin sisään: pudotusvalikko yrityksen valintaan, yhteenveto, haku.

Kaikki tyypit eivät sovi kaikkiin paikkoihin, ja editori tarjoaa vain kelvolliset: konteksti ei voi sisältää toista kontekstia, alivalikkoon mahtuu vain kohteita, käyttäjävalikkoon mahtuu vain kohteita, erottimia ja kieli, eikä puhelimen vetolaatikossa ole konteksteja (käytä alivalikoita).

#Palkin alueet

Yläpalkissa valikot järjestyvät kolmeen alueeseen, ja editorin vihje sanoo olennaisen: Vedä valikoita palkin alueiden välillä (vasen / keskellä / oikea) luodaksesi ryhmiä.

Alue	Tavallinen käyttö
Vasen ryhmä	Päänavigointi, heti tunnuksen jälkeen.
Keskiryhmä	Korostettu ryhmä. Jos se jää tyhjäksi, se ei vie tilaa.
Oikea ryhmä	Käyttäjävalikko, kello, pikavalinnat.

Kontekstin sivupalkin sisällä — ja vetolaatikossa — alueita on kaksi: Yläryhmä ja Alareuna (tämä tarttuu pohjaan, jotta ”Asetukset” ja ”Ohje” pysyvät siellä, missä niitä odotetaan).

#Valikon luominen

1. Valitse laite kontekstipalkista.
2. Napsauta sen alueen +, johon haluat valikon.
3. Valitse tyyppi.
4. Valikko syntyy yleisnimellä ja jää valituksi — tee siihen kaksoisnapsautus avataksesi modaalin Valittu kohde.
5. Täytä:

Kenttä	Mikä se on
Kuvake	Kuvake kirjastosta tai SVG sovelluksen asseteista.
Valikon nimi	Teksti, joka näkyy. Se on sovelluksen lause — se menee käännöksiin.
Näyttö…	Kohdenäyttö (vain tyypissä Valikko).
(parametrit)	Jos kohdenäytöllä on reitin parametreja, näkyviin tulee kenttä parametria kohden kiinteän arvon antamista varten.
Vain kuvake (nimi näkyy työkaluvihjeenä)	Jättää palkkiin vain kuvakkeen.

6. Sulje painikkeella Valmis ja tallenna painikkeella Tallenna.

Painike Poista kohde, samassa modaalissa, poistaa valikon.

#Kontekstit ja sivupalkit

Konteksti (sivupalkki) on tapa antaa sovelluksen alueelle oma valikko: valitset yläpalkista ”Vendas” ja vasemmalle ilmestyy sivupalkki myynnin näyttöineen. Kontekstin lapset ovat sen palkin kohteet.

Kontekstin modaalissa osio Tämän kontekstin sivupalkki hienosäätää sitä:

Kenttä	Vaihtoehdot
Toiminta	Kiinteä (aina auki) · Kutistuva (painike kutistaa kuvakkeiksi) · Mini (kuvakkeet; laajenee osoitettaessa) · Mini ja paneeli (hiiren osoitus avaa valikon puun)
Leveys	180–400 pikseliä.
Laajennettaessa (vain mini-tilassa)	Peittää sisällön tai Työntää sisältöä.
Alkaa kutistettuna (vain kutistuvassa tilassa)	Miten se avautuu ensimmäisellä kerralla.

Sivupalkki pysyy auki alueella liikuttaessa, myös sivuilla, jotka eivät ole missään valikossa (luettelosta avattu yksityiskohtasivu), ja myös uudelleenlatauksen jälkeen. Toisen kontekstin näkymä vaihtaa sen, ja yläpalkin kohde ilman kontekstia sulkee sen. Jotta yksityiskohtasivu korostaa oikean valikon myös suoralla linkillä, valitse näkymän ominaisuuksien Navigointi-kategoriasta Ylänäkymä.

#Käyttäjävalikko

Käyttäjävalikko on kohde muiden joukossa: se voi olla yläpalkissa, kontekstin sisällä, vetolaatikossa tai kompaktissa palkissa. Sen valitseminen avaa sen ponnahdusvalikon, ja siellä lisätään kohtia +-painikkeella (Valikko, Erotin tai Kieli).

Modaaliin jäävät asetukset, jotka eivät ole visuaalisia:

Asetus	Mitä se tekee
Näytä nimi	Käyttäjän nimi näkyy valikon ylätunnisteessa.
Näytä käyttäjätunnus (login)	Myös käyttäjätunnus.
”Kirjaudu ulos” -vaihtoehto	Sisällyttää uloskirjautumisen valikon loppuun.
”Kirjaudu ulos” -teksti	Oma teksti; tyhjänä käytetään vaihtoehtoa Järjestelmän oletus (käännetty).

Ilman kuvaketta avatar näyttää nimen nimikirjaimet — ja juuri sitä kuvakevalitsin kutsuu nimellä Ei kuvaketta (nimikirjaimet).

#Ilmoitukset

Kohde Ilmoitukset on kello: pelkkä kuvake, jonka lukemattomien pilleri päivittyy itsestään. Napsautus avaa viimeisimmät ilmoitukset ja Näytä lisää avaa paneelin, jossa ovat kaikki. Modaalissa Ilmoitukset pudotusvalikossa päättää, montako näkyy kerralla (1–20).

#Kieli

Kohde Kieli on kielivalitsin. Se näyttää sovelluksen kielet, jotka määritetään asetusten Käännökset-osiossa, kunkin omalla nimellään (”Português”, ”English”), jotta nykyistä kieltä ymmärtämätön löytää omansa. Kielen valinta vaihtaa sovelluksen tekstit lataamatta sivua uudelleen, ja valinta tallentuu laitteelle.

Se voi olla yläpalkissa, sivupalkissa, vetolaatikossa, kompaktissa palkissa ja toimintopalkissa. Käyttäjävalikossa se näkyy kohtana ”Kieli · Suomi”, joka avaa luettelon samaan paikkaan. Modaalissa Käytössä olevan kielen näyttö määrää, mitä painike näyttää: Nimi (Suomi) tai Koodi (FI).

Sovelluksessa, jossa on vain yksi kieli, valitsin ei näy.

Ensimmäisellä käynnillä, ennen kuin kukaan valitsee, sovellus avautuu selaimen tai puhelimen kielellä, jos sovelluksessa on se; muuten peruskielellä. Näkymä ilman valikoita, kuten kirjautuminen, voi tarjota valinnan painikkeella, joka kutsuu keplin.i18n.setLocale-funktiota.

#Widget-alueet

Widget-alue tuo widgetit palkkiin: pudotusvalikon yrityksen valintaan yläpalkissa tai yhteenvedon kontekstin sivupalkin alareunaan. Alueen sisältö on sovelluksen näyttö, joka piirretään suunnittelijassa kuten mikä tahansa muu, esitystavalla Palkki (widget-alue).

Widget-alueen luominen:

1. Luo näyttö osiossa Näytöt.
2. Valitse näytön ominaisuuksien luokassa Esitystapa kohtaan Tila vaihtoehto Palkki (widget-alue).
3. Määritä alueen koko kohdissa Leveys (px) ja Korkeus (px). Oletuksena se on 320 × 48 pikseliä.
4. Piirrä widgetit.
5. Napsauta kohdassa Navigointi sen vyöhykkeen +-painiketta, johon haluat alueen, ja valitse Widget-alue.
6. Kaksoisnapsauta kohdetta ja valitse kohdassa Alueen näkymä palkkinäyttö.
7. Napsauta Tallenna.

Kohteen vyöhyke ratkaisee, missä alue näkyy ja minkä kokoisena:

Missä kohde on	Missä alue näkyy
Yläpalkin Vasen ryhmä, Keskiryhmä tai Oikea ryhmä	Yläpalkissa, näytön leveydellä ja korkeudella.
Kontekstin sivupalkin Yläryhmä tai Alareuna	Sivupalkissa, palkin leveydellä ja näytön korkeudella.
Vetolaatikko	Vetolaatikossa, laatikon leveydellä ja näytön korkeudella.
Header	Tunnuksen vieressä, näytön leveydellä ja korkeudella.

Alue ei tule toimintopalkkiin eikä käyttäjävalikkoon. Kuvakkeiksi kutistetussa sivupalkissa se ei näy.

Alue pysyy auki navigoinnin ajan: tiedot latautuvat kerran, ja tehty valinta säilyy sivun vaihtuessa. KeplinGossa alue toimii samalla tavalla headerissa ja vetolaatikossa.

#Alueen yhdistäminen sivuihin

Alue ja sivut viestivät sovelluksen tilan kautta: nimettyjä arvoja, samoja kaikilla näytöillä. Esimerkiksi, jotta yläpalkin pudotusvalikko suodattaa sivut valitun yrityksen mukaan:

1. Valitse alueen pudotusvalikon kohdassa Datasidonta vaihtoehto Tila ja kirjoita Avain yritys.
2. Valitse sivuilla datastoren suodattimessa lähteeksi Tila ja kirjoita sama avain. Luettelo lukee tiedot uudelleen, kun valinta muuttuu.
3. Näytä arvo sitomalla Nimike samaan avaimeen.

Tapahtumien koodi lukee ja kirjoittaa samoja arvoja keplin.state-rajapinnalla.

#Palkin korkeus

Yläpalkki on oletuksena 48 pikseliä korkea. Jotta korkeampi alue mahtuu, muuta kohtaa Palkin korkeus editorin otsikon alla olevista säätimistä arvoon 40–96 pikseliä. Jokaisella laitteella on oma korkeutensa, ja kompakteissa tiloissa se koskee headeria.

#Arvopillerit

Mikä tahansa valikko (paitsi erottimet ja kello) voi näyttää pillerin, jossa on elävä luku — käsittelemättömät tilaukset ”Encomendas”-valikon vieressä, odottavat pyynnöt ”Aprovações”-valikon vieressä.

1. Kytke kohteen modaalissa päälle Näytä pilleri, jossa arvo.
2. Valitse API, joka tuo datan (Valitse API…).
3. Valitse kohdassa Arvo joko Lukumäärä (tietueiden määrä) tai 1. tietueen kenttä — jälkimmäisessä tapauksessa kerro myös Kenttä.
4. Piilota, kun arvo on tyhjä tai nolla estää pillerin, joka sanoo ”0”.

Pilleri päivittyy reaaliajassa: kun data muuttuu, luku muuttuu — kenenkään lataamatta sivua uudelleen.

#Sovelluksen logo

Napsauta tunnusta palkin vasemmassa reunassa avataksesi modaalin Sovelluksen logo:

Kenttä	Mitä se tekee
Kuvake tai kuva	Valitse kuvake kirjastosta tai tiedosto sovelluksen asseteista.
Näytä sovelluksen nimi	Nimi tunnuksen vieressä.
Rajaus palkissa	Assettien kuville (SVG, PNG, JPG, GIF tai WebP): Mittakaava, Laatikon leveys, Laatikon korkeus ja sijoittelu kuvaa vetämällä.
Sovita laatikkoon	Palauttaa mittakaavan ja sijainnin.
Ei rajausta	Kytkee rajauksen pois.

Rajaus on vastaus logoon, joka "ei mahdu": vedät ja skaalaat, kunnes se istuu palkkiin hyvin, ja modaali itse takaa, että tiedosto säilyy koskemattomana — rajaus on vain visuaalinen ja peruttava. Laatikko on oletuksena 32 pikseliä korkea 48 pikselin palkissa: vaakasuora logo kasvaa vain, jos nostat Laatikon korkeutta (enintään 44); Laatikon leveys yksin jättää tyhjää tilaa pienen logon ympärille. Ilman rajausta kuva on 24 pikselin laatikossa.

Modaalin esikatselukaista käyttää sovelluksen palkin todellisia värejä. Jos palkki on tumma, logotiedoston on oltava brändin vaalea (valkoinen) versio — valkoiselle taustalle tehty värillinen logo katoaa palkkiin.

Logoalueella voi olla eri taustaväri kuin muulla yläpalkilla: se on väri Logoalueen tausta sovelluksen asetusten Teeman Navigointi-ryhmässä. Logoalueen ja valikoiden välissä ei ole erotinta; kun kaksi väriä eroavat, värin vaihtuminen on raja. Tämä koskee web- ja tablettinäkymän yläpalkkia; tiiviissä palkissa ja laatikossa logo seuraa palkin väriä.

Logoalue ei ole koskaan kapeampi kuin brändi: mini- tai supistetun sivupalkin kanssa ylävalikot alkavat brändin jälkeen, eivät sen päällä.

Selaimen välilehti näyttää ”Näytön nimi · Sovelluksen nimi”, ja pelkän ”Sovelluksen nimi” näytöllä, jolla ei ole nimeä; kirjautumissivulla se näyttää ”Kirjaudu sisään · Sovelluksen nimi”.

#Aloitusvalikko

Aloitusvalikko, oikeassa yläkulmassa, päättää mistä sovellus avautuu. Valitaan yksi valikoista (ei irrallista näyttöä), ja valinta tehdään laitteittain — puhelin voi avautua eri paneeliin kuin tietokone.

Jos laitteella ei ole omaa valintaa, se perii seuraavan (puhelin → tabletti → web); ja jos mitään ei ole, sovellus avautuu ensimmäiseen valikkoon, joka vie näytölle.

#Suunnitelma laitetta kohden

Web on aina yläpalkki. Tabletilla ja puhelimella on valitsin Tila:

Tila	Miltä se näyttää
Yläpalkki (vain tabletti)	Sama kuin tietokoneella: tunnus, valikot ja kontekstit palkissa.
Hampurilaisvalikko	Kompakti palkki ☰-painikkeella, joka avaa vetolaatikon valikkopuineen.
Toimintopalkki	Palkki pohjassa, mobiilisovelluksen tyyliin, enintään 5 kohteella — ja ilman vetolaatikkoa.

Kompakteissa tiloissa on lisäksi kaksi omaa riviä:

• Header — enintään 4 toimintoa tunnuksen vieressä (käyttäjävalikko ja kello viihtyvät täällä hyvin).
• Toimintopalkki — enintään 5 kohdetta pohjassa, kukin Painike tai Toimintovalikko.

Kun raja tulee vastaan, alusta kertoo miksi: Toimintopalkissa on jo 5 kohdetta (enimmäismäärä). / Headeriin mahtuu enintään 4 toimintoa.

#Kuka näkee mitä

Editori suunnittelee; sen, kuka näkee kunkin valikon, päättää Sovelluksen asetukset ▸ Käyttöoikeudet, välilehdellä Valikot — rooleittain ja laitteittain.

Sääntö kannattaa tietää: toisin kuin näytöt, valikko on näkyvä oletuksena. Portti on näyttö, ja se on jo kiinni; valikon piilottaminen on sitä varten, että kokonainen ryhmä otetaan pois näkyvistä, tai kello otetaan pois siltä, joka ei saa mitään. Ryhmän piilottaminen vie lapset mukanaan, ja kohde, joka osoittaa saavuttamattomalle näytölle, katoaa itsestään.

#Miksi ei…?

• Miksi muutokseni katosivat? Niitä ei tallennettu. Navigoinnilla on painike Tallenna — ja se varoittaa, ennen kuin suljet välilehden, jossa on tallentamattomia muutoksia.
• Miksi en saa pudotettua valikkoa sinne minne haluan? Se paikka ei hyväksy sitä tyyppiä. Kelvottomat kohteet eivät edes syty: konteksti kontekstin sisällä, alivalikko käyttäjävalikon sisällä, erotin yläpalkissa.
• Miksi en näe valikoita puhelimella? Puhelimella on oma puunsa ja se voi olla tyhjä. Valitse Mobiili (390px) ja suunnittele se.
• Miksi valikko katosi julkaistusta sovelluksesta? Joko se piilotettiin kohdassa Asetukset ▸ Käyttöoikeudet ▸ Valikot siltä roolilta, tai se osoittaa näytölle, johon sillä henkilöllä ei ole pääsyä.
• Miksi logo näkyy leikattuna? Sillä on rajaus. Avaa modaali ja käytä Sovita laatikkoon, tai Ei rajausta.
• Miksi en voi vaihtaa valikon tyyppiä? Sitä ei vaihdeta. Poista ja luo oikealla tyypillä — se on ainoa operaatio, jota alusta ei anna tehdä kesken kaiken.
• Miksi pilleri näyttää aina 0? Kytke päälle Piilota, kun arvo on tyhjä tai nolla, tai varmista, että valittu API todella palauttaa tietueita.
• Miksi logo näyttää pieneltä ja sen ympärillä on tilaa? Laatikko on oletuksena 32 pikseliä korkea, ja vaakasuora logo mahtuu siihen kapeana. Nosta Laatikon korkeutta (enintään 44) leveyden sijaan.
• Miksi en näe logoa palkissa? Jos palkki on tumma ja tiedosto on valkoiselle taustalle tarkoitettu väriversio, lataa Assetteihin brändin valkoinen versio ja valitse se modaalissa.
• Miksi näyttöni ei näy kohdassa Alueen näkymä? Vain näytöt, joiden esitystapa on Palkki (widget-alue), näkyvät. Vaihda Tila näytön ominaisuuksien luokassa Esitystapa.
• Miksi widget-alue ei näy sivupalkissa? Palkki on kutistettu kuvakkeiksi, eikä alue mahdu siihen. Laajenna palkki.