Page History

...

Tämä käyttöliittymäohjeistus on laadittu Perusrekisterin kehittäjien apuvälineeksi, jotta kehittäjien ei tarvitse käyttää aikaa näkymän suunnitteluun ja toteutettavat näkymät noudattavat samaa linjaa kautta ohjelmiston. Ohjeistuksessa käsitellään Perusrekisterissä käytettävät erilaiset näkymätyypit (aloitusnäkymät, listaukset, jne) sekä yksittäiset elementit (painikkeet, lomake-elementit, jne). Ohjeistus sisältää yleiset sommitteluperiaatteet, joita noudattamalla saavutetaan yhtenäinen kokonaisuus. Ohjeeseen kootaan myös kehittäjän tarkistuslista, josta voidaan tarkistaa täyttääkö tehty näkymä määritellyt vaatimukset. Poikkeustilanteet käsitellään ja hyväksytetään käyttöliittymätiimin kanssa. Ohjeistusta tullaan täydentämään projektin edetessä, kun esimerkiksi uusia näkymätarpeita ilmenee. Ohjeistus pohjautuu Eduixin Eduplan GUI käyttöliittymäkirjaston dokumentaatioon ja käytäntöihin, Metropolian käyttöliittymästandardiin sekä TIPTOP-projektin yhteydessä laadittuun käyttöliittymästandardiin.

Pohjamateriaalit

• Eduix Edugui ja sisäiset dokumentaatiot
• Metropolian UI 1.0
• TIPTOP_kayttoliittymastandardi_3.0.pdf
• Eri CSS-frameworkit (kts. linkit)
• Palveluiden rakenne ja nimeäminen: http://wiki.eduix.fi/confluence/pages/viewpage.action?pageId=41943089

...

• kehyksen ulkopuoliset javascriptit/css ja niiden dokumentointi. 
  • sovitaan yhtenäinen rakenne ja sijainti portletin sisällä esim "portlet_x/jotain/css/portlet.js"
• yleisperiaate: jos et ole varma miten näkymä tehdään, kysy UI-tiimiltä! 
• näkymät, joita UI-tiimi ei ole protonnut/määritellyt on syytä hyväksyttää/näyttää UI-tiimille 

Typografia

• otsikot
• pieni teksti (himmennetty)
• lihavoinnit, kursivointi
• listat (ul, ol). Muotoilematon, ilman etumerkkejä
• linkit, linkkien eri tilat

omaan less- tiedostoon

Kehys

• tiimille
• tarkistuslistat kehittäjien avuksi

...

...

Typografia

• otsikot
• pieni teksti (himmennetty)
• lihavoinnit, kursivointi
• listat (ul, ol). Muotoilematon, ilman etumerkkejä
• linkit, linkkien eri tilat

omaan less- tiedostoon

...

Väritys ja breakpointit esim. variables.lessiin

Alapalkki

...

Näkymät

Näkymäesimerkit ovat tässä määrittelyssä ensisijaisen tärkeitä. Pelkät elementtien määrittelyt eivät riitä takaamaan yhdenmukaisia toteutuksia. 

...

• sovittu että katselu pyritään toteuttamaan aina
  
  • jos katselua ei toteuteta, tähän vaaditaan hyväksyntä ja perustelu (yhteneväisyys!)
• muokkaus Jira-mainen modal-ikkuna. 
  
  • hyödyt: samaa muokkausta voidaan hyödyntää eri kautta, eri paikoissa
  • tutkitaan toteutetaanko oma modal-ikkuna jQuery UI Dialogin sijaan
• jos näkymässä on kokonaisuuksia (esim 3 listaa) ne pitää visuaalisesti erottaa (peppi > yksikko > kustannuspaikat), erotin, panel tmskustannuspaikat), erotin, panel tms
• näkymien sisällä erilaisten elementtien sijainti suhteessa toisiinsa (esim. Tallenna/Peruuta -painikkeet)

Yleinen sommittelu

• lomake,  sommittelu tai yleiset sommitteluperiaatteet, missä minkäkin tyyppiset elementit _yleensä_ sijaitsevat

...

• muokkausnäkymät vs. inline-editointi (http://vitalets.github.io/x-editable/demo-jqueryui.html?c=inline)
• editointitoiminnallisuudet ("koska tehdään ajaxilla ja koska pitää tallentaa" -ongelma)
• jos ajax-tallennuksia, hyvin selkeä palaute
• vältetään eri tallennustapoja näkymien sisällä

Näkymien navigointi 

Eritasoiset navigaatiot

• taso 1 - päätason välilehdet (horisontaalinen)
• taso 2 - vasemman laidan välilehdet (vertikaalinen)
• taso 3 - sisältöalueen (oikea palsta) välilehdet (horisontaalinen)
• "sticky" navigaatio (optiona tulevaisuudessa)
  
  • vieritettäessä sivun yläreunaan jäävä navigaatio

Kunnon Pitää tehdä kunnon esimerkit monitasoisesta navigaatiosta, liittyy kohtaan näkymäesimerkit

...

• eri input-tyypit, katsotaan edugui läpi
• ainakin
  
  • tekstikenttä
  • tekstialue
  • pudotusvalikko (select2 käyttö)
  • radio button / checkbox
    
    • ryhmät
  • datepicker
  • timepicker
  • transfer select
  • kenttäkohtaiset ohjeet?

Fieldset

• miten edugui, voidaanko päivittää vain css tai rinnalle uusi

...

• eri ulkoasut eri käyttötapauksiin 
  
  • perus, raidoitettu, ym ym
  • oletuksena listassa nimen klikkaus vie katseluun, muut toiminnot painikkeen taakse
  • määriteltävä oletus linkitetty sarake (nimi, otsikko)?
• listauksessa toiminnot: 1 toiminto / monta toimintoa. Yksi painike / painike-alasvetovalikko. Määriteltävä millä logiikalla.
• tr-hover vain luokalla tableen? 
• yleinen toimintopalkki koko listaukselle (button group?)  (esimerkki!)
• rivikohtaiset työkalut, listauksessa toiminnot: 1 toiminto / monta toimintoa. Yksi painike / painike-alasvetovalikko. Millä logiikalla? 
• statukset listoissa (esimerkki!)
• hierarkiset listat, onko nykyinen malli hyvä, tarvitaan useamman tason
• taulukko filtteröinti http://foundation.zurb.com/docs/components/subnav.html
• inline-edit: tiptop:  -  Taulukkodatan muokkaus??? Puhekupla http://vitalets.github.io/x-editable/demo-jqueryui.html?c=popup
• sarakkeiden leveyksien säätö, jos ei varma toiminto, tehdään valinnaiseksi > jatkokehitykseen
• Sivutus ja näytä "x riviä"
• demot pitkillä listoilla ja liferayn sisälle testiin
  
  

Periaatteet 

• DataTables kuopataan, käytetään serveripään toimintoja sorttaukseen ja sivutukseen

...

• avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili
  
  • http://wiki.eduix.fi/confluence/display/EDUGUI/Simple+definition+lists
  • muu tapa, dl ei aina toimi
• ul-lista muotoilematon (ei bulletteja, mutta alitasoilla kyllä)

Palautteet

...

• Palautteiden sijainti näkymissä
• Varmennukset (oletko varma...)
• Toiminto aloitettu (disablointi)
• Toimintoa tehdään (etenemispalautteet)
• Tallennus/toiminto on tehty (samoja voidaan käyttää myös saavuttaessa näkymään)
  
  • Onnistui
  • Info
  • Varoitus
  • Virhe
• etenemispalautteet
  
  • etenemispalkki (progress bar)
  • latausindikaattori

Esimerkit! Virheeseen fixed-palkki ylös, joku yleinen virhe sovelluksessa. Siihen myös sulje rasti. Dialogilla virhe joka syntyy kun aktivoidaan joku toiminto.

...

Malli peräkkäisistä, http://foundation.zurb.com/docs/components/reveal.html

Kalenteri

Iso kalenteri

• edelleen fullcalendar

...