Canvas

Sovelluksen näytöt suunnitellaan visuaalisessa editorissa: vedät widgetejä paletista canvasille, sijoitat ne pikselintarkasti ruudukon ja älykkäiden apuviivojen avulla ja hienosäädät jokaisen yksityiskohdan inspectorissa oikealla. Tämä sivu selittää tuon työympäristön — kaikki mitä tulee sen jälkeen (widgetit, data, tapahtumat) tapahtuu sen sisällä.

Esimerkit ovat Asiakashallinta-sovelluksesta: CRM, jossa on asiakkuuksien, myyntimahdollisuuksien ja kojelautojen näyttöjä.

#Näyttöjen avaaminen ja luominen

Näytöt asuvat sovelluksen sivupalkissa, välilehdellä UI, osiossa Näytöt. Näytön napsauttaminen avaa sen työtilan välilehteen — voit pitää useita näyttöjä auki rinnakkain, ja jokainen välilehti muistaa, mitä oli tekemässä.

Näytön luomiseksi:

1. Avaa sovellus ja valitse sivupalkista välilehti UI.
2. Napsauta osiossa Näytöt painiketta Uusi näyttö.
3. Anna sille nimi — esimerkiksi Asiakastiedot — ja vahvista painikkeella Luo.
4. Näyttö avautuu heti työtilaan, valmiina suunniteltavaksi.

Samassa osiossa on kansioita (Uusi kansio) puun järjestämiseen, Järjestelmä-näytöt (kirjautuminen, salasanan palautus ja rekisteröityminen — kiintein reitein ja parametrein) sekä layoutit — uudelleenkäytettävät pohjat, jotka jäävät lukuun Layoutit ja laitekohtainen suunnittelu.

#Designerin kolme vyöhykettä

Vyöhyke	Mikä se on
Widgetit (vasen)	Widgetien luettelo. Vedä mikä tahansa canvasille — vihje itse kohteessa kertoo: Vedä canvasille.
Canvas (keskellä)	Näytön sivu, piirrettynä aktiivisen laitteen todellisessa mittakaavassa, sovelluksen teema jo käytössä. Mitä näet, sen sovellus näyttää.
Inspector (oikea)	Valitun kohteen ominaisuudet — tai itse näytön, kun mitään ei ole valittu. Siinä on kaksi välilehteä: Ominaisuudet ja Rakenne.

Canvasin yläpuolella on työkalupalkki: kolme laitetta (Web (1280px), Tabletti (768px), Mobiili (390px)), kumoa/tee uudelleen, kerrokset, monistus, poisto, tasaus/jakaminen, Esikatsele ja zoomaus (Lähennä, Loitonna, ja napsautettava prosenttiluku, joka tekee Palauta 100 %).

#Ruudukko

Canvas lepää ruudukolla, joka pitää näytöt siisteinä sitomatta sinua:

• Vaakasuunnassa sivu jakautuu 48 sarakkeeseen. Widgetin sijainti ja leveys lasketaan sarakkeina — sen ansiosta webiin suunniteltu näyttö pysyy mittasuhteissaan kapeammassa modaalissa.
• Pystysuunnassa kiinnittyminen tapahtuu 8 pikselin askelin; sijainti ja korkeus tallennetaan pikselintarkasti.

Vedettäessä widget kiinnittyy lähimpään sarakkeeseen ja pystyaskeleeseen. Jos sinun pitää pudottaa se täsmälleen hiiren kohdalle, pidä Alt-näppäintä pohjassa vedon aikana — kiinnittyminen on poissa käytöstä niin kauan kuin se on painettuna.

Samat arvot voi kirjoittaa käsin: kun widget on valittuna, inspectorin kategoria Layout näyttää kentät Sar, Lev (sarakkeina), Y ja Kork (pikseleinä).

#Valinta, siirto, koon muuttaminen

• Napsautus valitsee widgetin; Shift+napsautus lisää valintaan tai poistaa siitä; tyhjästä kohdasta aloitettu veto piirtää valintalaatikon, joka poimii kaiken mihin osuu.
• Vedä widgetiä siirtääksesi sitä; vedä kulmien ja reunojen kahvoista muuttaaksesi kokoa.
• Näppäimistön nuolet siirtävät valintaa: ←/→ yhden sarakkeen, ↑/↓ yhden pikselin — ja Shift+↑/↓ kahdeksan pikseliä kerrallaan.
• Widgetin pudottaminen Paneelin, Välilehtien tai Kiinteän palkin sisään tekee siitä säiliön lapsen: se liikkuu säiliön mukana ja sijainnista tulee suhteellinen säiliöön nähden.

#Älykkäät apuviivat

Kun vedät tai muutat kokoa, canvas vertaa liikkuvaa widgetiä naapureihin ja ehdottaa kiinnityksiä — apuviivat piirtyvät saman tien:

Apuviiva	Milloin se näkyy
Tasaus	Widgetin reuna tai keskikohta osuu naapurin reunan/keskikohdan linjaan — widget tarttuu siihen viivaan.
Yhtä suuri väli	Olet pudottamassa widgetiä samalle etäisyydelle kuin kaksi naapuria ovat jo toisistaan — rivistä tulee tasavälinen.
Yhtä suuri koko	Kokoa muutettaessa leveys tai korkeus osuu naapurin kokoon — se tarttuu siihen kokoon.

Tasaus voittaa välistyksen, ja välistys voittaa ruudukon: kun yrität näkyvästi kiinnittyä reunaan, juuri niin tapahtuu.

#Tasaus ja jakaminen

Kun valittuna on kaksi tai useampi widgetiä, työkalupalkki aktivoi tasauspainikkeet: Tasaa vasemmalle, Keskitä vaakasuunnassa, Tasaa oikealle, Tasaa yläreunaan, Keskitä pystysuunnassa ja Tasaa alareunaan. Kolmella tai useammalla mukaan tulevat Jaa tasan vaakasuunnassa ja Jaa tasan pystysuunnassa, jotka tasaavat välit pitäen ensimmäisen ja viimeisen paikoillaan.

Kun useita widgetejä on valittuna, inspector tiivistää: N widgetiä valittu — käytä työkalupalkkia tasaukseen ja jakamiseen.

#Kerrokset

Widgetit voivat mennä päällekkäin — Nimike Kuvan päällä, esimerkiksi. Järjestystä hallitaan työkalupalkista: Siirrä etummaiseksi, Siirrä eteenpäin, Siirrä taaksepäin ja Siirrä taaimmaiseksi.

#Ankkurit — kiinnitys marginaaleihin

Oletuksena widget jää sinne, mihin sen laskit. Ankkurit sitovat widgetin reunat sivun (tai säiliön, jossa se on) marginaaleihin: valitse widget ja napsauta nastoja, jotka ilmestyvät kunkin reunan keskelle — Ankkuroi yläreunaan, Ankkuroi vasemmalle, Ankkuroi oikealle, Ankkuroi alareunaan.

• Ankkurointi vasemmalle + oikealle saa widgetin venymään sivun leveyden mukana — klassinen koko leveyden ylätunniste.
• Ankkurointi alareunaan liimaa widgetin sivun alalaitaan — painikepalkki, joka pysyy alhaalla, olipa sivu miten korkea tahansa.

#Sivun korkeus

Näytön sivulla on kiinteä korkeus laitetta kohden — se ei koskaan kasva itsestään sisällön mukana. Canvasin alareuna on kahva: vedä sitä säätääksesi (Sivun korkeus — vedä säätääksesi). Sisällön alapuolella näytön tausta jatkuu loppuun asti (tausta jatkuu näytön alareunaan asti). Jos sisältö ylittää korkeuden, käyttäjä vierittää — paitsi jos kytket sen pois (katso näytön ominaisuudet).

#Kumoa, tee uudelleen ja pikanäppäimet

Jokainen ele — pudotus, siirto, koon muutos, ominaisuuden muutos, poisto — on historian askel. Kumoa (Ctrl+Z) ja Tee uudelleen (Ctrl+Shift+Z) ovat palkissa; peräkkäiset näppäimistösiirrot sulautuvat yhdeksi askeleeksi, jottei kumoamisen tarvitse perääntyä näppäin näppäimeltä.

Pikanäppäin	Toiminto
Ctrl+Z / Ctrl+Shift+Z (tai Ctrl+Y)	Kumoa / Tee uudelleen
Ctrl+C / Ctrl+X / Ctrl+V	Kopioi / Leikkaa / Liitä (kopio tulee yhden sarakkeen verran siirrettynä)
Ctrl+D	Monista valinta
Ctrl+A	Valitse aktiivisen laitteen kaikki widgetit
Delete tai Backspace	Poista valinta
Escape	Tyhjennä valinta
Nuolet / Shift+↑↓	Siirrä valintaa (sarake kerrallaan; 1 px; 8 px)
Ctrl+hiiren rulla	Zoomaus

Macissä käytä ⌘-näppäintä siellä, missä lukee Ctrl.

#Automaattinen tallennus ja esikatselu

Tallennuspainiketta ei ole: muutokset tallentuvat itsestään. Oikea ylänurkka kertoo, missä mennään — Tallennetaan…, Tallennettu, tai Tallennus epäonnistui — yritä uudelleen, jos jokin meni pieleen (riittää että kosket uudelleen, niin yritys toistuu).

Painike Esikatsele tallentaa keskeneräisen ja avaa näytön oikeassa sovelluksessa, selaimen uuteen välilehteen — kuljet kirjautumisen läpi kuten kuka tahansa käyttäjä ja näet näytön toimimassa oikealla datalla.

#Inspector

Inspectorissa on kaksi välilehteä:

• Ominaisuudet — kaikki, mikä valitussa on muokattavissa.
• Rakenne — aktiivisen laitteen widgetpuu.

#Widgetin ominaisuudet

Kun widget on valittuna, inspectorin yläosa näyttää widgetin tyypin ja id:n (tasalevyisellä kirjasimella) — juuri tätä id:tä käytät tapahtumien koodissa. Ominaisuudet järjestyvät kategorioihin; jokainen widget näyttää vain ne, jotka sitä koskevat:

Kategoria	Mitä se sisältää
Layout	Sar, Lev, Y, Kork sekä kytkimet Näkyvä ja Käytössä (poissa käytöstä oleva widget on harmaa ja ilman vuorovaikutusta).
Käyttöoikeus	Vaatii toiminnon — toiminto, joka on määritelty kohdassa Asetukset ▸ Käyttöoikeudet; se jolla sitä ei ole, ei käytä widgetiä. Kohdassa Ilman toimintoa valitset Piilota tai Näytä poissa käytöstä.
Sisältö	Tekstit, nimikkeet, kuvakkeet — ja Lauseen arvot (katso alta).
Data	Widgetin datasidonta (katso Datastoret ja data).
Toiminta	Toiminnan valinnat — näkymät, vedot, napsautustoiminnot.
Validointi	Lomakekentissä: Pakollinen, vakiosäännöt ja skripti (katso Widgetit).
Vuorovaikutus	Napsautustoiminnot widgeteillä kuten Painike.
Ulkoasu	Visuaalinen tyyli (katso alta).
Tapahtumat	Widgetin tapahtumat (katso Tapahtumat ja SDK).

Joillakin widgeteillä on muokattavia sisäelementtejä — Taulukon sarake, Listan kenttä, Välilehtien välilehti. Napsauta elementtiä suoraan canvasilla muokataksesi sitä; inspector vaihtuu siihen elementtiin, ja painike takaisin widgettiin tuo sinut takaisin.

#Ulkoasu

Kategoria Ulkoasu on (lähes) kaikilla widgeteillä sama: Tausta, Reunus ja Reunuksen viiva (Yhtenäinen, Katkoviiva, Pisteviiva), pyöristys, padding, Varjo (Ei varjoa, Kevyt, Keskitaso, Vahva, Erittäin vahva) sekä Teksti-valinnat — väri, Koko, Paksuus, Tekstin tasaus. Värit hyväksyvät sovelluksen teeman tokenit tai heksa-arvot — käytä tokeneita aina kun voit, jotta widget seuraa teemaa.

Widgetit, joilla on oma otsake (paneelit, taulukot, kaaviot…), lisäävät tähän Näytä otsikko ja Näytä kuvaus vastaavine teksteineen.

#Muotoilusäännöt

Yhä Ulkoasussa, Muotoilusäännöt muuttavat tyyliä datan mukaan: myöhässä olevien rivien maalaaminen punaiseksi, painikkeen piilottaminen istunnon mukaan, KPI:n värittäminen vihreäksi tavoitteen yläpuolella.

1. Napsauta Uusi sääntö.
2. Valitse laajuus — Koko widget, Jokainen rivi tai Yksi solu (rivi/solu ovat olemassa vain widgeteissä, jotka piirtävät rivejä, kuten Taulukko).
3. Lisää kohdassa Kun ehtoja (kenttä, operaattori, arvo — arvo voi tulla parametrista, istunnosta, tilasta…). Ilman ehtoja sääntö pätee aina.
4. Valitse kohdassa Niin, mikä muuttuu: Tausta, Tekstin väri, Lihavoitu, Kursivoitu, Alleviivaus, Tasaus, Muoto tai Piilota.

Järjestys ratkaisee — viimeinen osuva sääntö määrää. Kytkin Käytössä poistaa säännön käytöstä poistamatta sitä, kokeiluja varten. Ja tapahtumien koodilla on aina viimeinen sana sääntöihin nähden.

#Lauseen arvot

Missä tahansa widgetin tekstissä voi olla aukkoja: kirjoita tekstiin {n} (esimerkiksi ”{n} aktiivista asiakkuutta”), ja osio Lauseen arvot ilmestyy kategoriaan Sisältö, jotta kerrot mistä kukin arvo tulee — datastoresta, parametrista, istunnosta, tilasta tai toisesta widgetistä. Se on tapa saada elävät numerot käännettävien lauseiden sisään koodia kirjoittamatta.

#Rakenne-välilehti

Välilehti Rakenne listaa aktiivisen laitteen kaikki widgetit puuna (säiliöt lapsineen). Sillä valitaan se, mikä on peitossa, nähdään mikä on piilossa (Piilotettu ylemmän säiliön takia) ja vaihdetaan kunkin widgetin alkunäkyvyyttä silmällä — Piilota tällä laitteella / Näytä tällä laitteella.

#Näyttö ja sen ominaisuudet

Napsauta canvasin tyhjää kohtaa (tai paina Escape), niin inspector näyttää itse näytön:

Osio	Mitä se määrittää
Näyttö	Nimi ja Reitti — näytön polku sovelluksen osoitteessa (pienaakkoset, numerot ja väliviivat).
Reitin parametrit	Parametrit, jotka näyttö saa osoitteessa (esim. asiakkuuden id reitissä /ficha-de-conta/:id). Kukin voi olla Pakollinen; järjestystä säädetään painikkeilla Siirrä ylös/Siirrä alas.
Toiminta	Näytön vieritys — Automaattinen tai Ei vieritystä.
Käyttöoikeus	Julkinen näyttö (ilman istuntoa) — näyttö avautuu ilman kirjautumista; data tulee vain julkisista API:sta.
Ulkoasu	Sivun tausta: Väri, Kuva (assets) ja Sovitus (Peitä, Sovita, Venytä, Keskitä, Toista).
Esitystapa	Onko näyttö tavallinen sivu, Modaali (keskellä) vai Sivupaneeli (oikealla) — tarkemmin luvussa Tapahtumat ja SDK.
Näytön pohja	Liitetty layout — katso Layoutit ja laitekohtainen suunnittelu.
Data	Näytön datastoret — katso Datastoret ja data.
Tapahtumat	Näytön tapahtumat (onLoad, onParamsChange, onUnload) — katso Tapahtumat ja SDK.

#Miksi ei…?

• Miksi en voi siirtää widgetiä? Jos siinä näkyy lukko, se tulee layoutista — sijaintia muokataan itse layoutissa, ei näytöllä. Katso Layoutit ja laitekohtainen suunnittelu.
• Miksi widget ei kiinnity sinne minne haluan? Apuviivat ja ruudukko voittavat eleesi — pidä Alt pohjassa kytkeäksesi kiinnittymisen pois vedon ajaksi.
• Miksi widget katosi canvasilta? Katso Rakenne: se voi olla piilotettu (silmä), sellaisen välilehden sisällä, joka ei ole aktiivinen, tai toisen widgetin takana (käytä kerroksia).