Käyttöliittymän suunnitteluprosessin mielenkiintoisin vaihe toteutuksen kannalta on varmaankin HUIMA-prosessimallin viimeinen ja käytännöllisin vaihe. Tässä vaiheessa tunnistetaan käyttöliittymäkomponentit, joista rakennetaan varsinainen käyttöliittymä. Suunnittelu ei toki pääty tähän vaiheeseen, vaan lopussa vielä täydennetään tyyliopasta (Design Guide). Oppaaseen lisätään käyttöliittymän toteutuksen kannalta tärkeitä ohjeita ulkoasusta, kuten tekstityyleistä, väreistä ja kuvista. Käyttöliittymäkomponenttien tehtävänä on toteuttaa ohjelmallisesti suunniteltu käyttöliittymä. Komponenttien tunnistamisessa aloitetaan jälleen suuremmista kokonaisuuksista ja poraudutaan jokaisella iterointikierroksella vaihe vaiheelta syvemmälle toteutukseen aina perimmäiseen metodiin saakka.
Komponentit voidaan ja suositellaankin koottavaksi luokkiin. Luokat tarjoavat erilaisia palveluita eli metodeita sovellukselle. Metodeilla puolestaan syntyy halutut osat käyttöliittymään. Sovelluksissa listataan tyypillisesti paljon tietoja. Listaus on hyvä ehdokas käyttöliittymäkomponentiksi. Erilaisia listatyyppejä on myös useita, joten listaus voi hyvinkin olla kokonainen luokka, joka tarjoaa luokkametodeina eri listausvaihtoehdot. Komponenttien tunnistaminen aloitetaan edellisessä vaiheessa syntyneistä sivuelementeistä eli sivujen eri osista. Ylätunniste on sellaisenaan erinomainen komponenttiehdokas, joka voisi tarjota kaksi metodia. Toinen näistä tulostaa sovelluksen otsikon kun taas toinen laatii navigointielementin. Navigointi voi kuitenkin olla oma itsenäinen komponenttinsa, jolloin se voidaan sijoittaa sivulle vapaasti. Olen koonnut oheiseen listaan ehdokkaita esimerkkinä käyttämäni blogisovelluksen käyttöliittymäkomponenteiksi.
- Ylätunniste
- Reunapalsta
- Alatunniste
Näiden ehdokkaiden lisäksi sovellus tarvitsee tukun muitakin komponentteja varsinaiseen sisältöpalstaansa. Sisältöpalstan komponenttiehdokkaat löytyvät tutkimalla sivukarttaa sekä vaatimusmäärittelystä johdettuja käyttötapauksia. Koska sisältöpalstan komponentteja tuntuu jo tässä vaiheessa olevan hyvin paljon, jätän suosiolla niiden tunnistamisen seuraavaan iterointikierrokseen. Sitä ennen poraudutaan edellä lueteltuihin suurempiin käyttöliittymäkomponentteihin, joiden sisältämistä pienemmistä komponenteista olen laatinut oheisen listan.
- Ylätunniste
- Otsikon tulostus
- Navigointiosio
- Reunapalsta
- Arkistohaku
- Lista uusimmista kirjoituksista
- Lista luokitteluista
- Lista arkistoiduista kuukausista
- Lista arkistoiduista vuosista
- Lista avainsanoista (tags)
- Alatunniste
- Tekijänoikeustietojen tulostus
Toisessa iterointikierroksessa kyettiin tunnistamaan kymmenkunta komponenttia, jotka voidaan jo nyt toteuttaa ohjelmallisesti. Tässä toteutusvaiheessa tosin syntyy vasta kuoret ohjelmalle, sillä varsinainen toiminnallinen ohjelmakoodi valmistuu myöhemmässä vaiheessa. Olen kirjoittanut pseudokoodin edellä luetelluista komponenteista selventämään työvaihetta.
class Header {
public void title();
public void navigation();
}
class Footer {
public void copyright();
}
class Sidebar {
public void searchBox();
public void newest();
public void categories();
public void months();
public void years();
public void tags();
}Pseudokoodissa ei vielä oteta kantaa lopulliseen toteutukseen. Tämän tunnistusvaiheen tavoitteena on löytää tarvittavat käyttöliittymäkomponentit. Kun kaikki komponentit on lueteltu, ryhmitellään ne toiminnallisuutensa mukaan. Esimerkiksi kaikki listauksia laativat komponentit kootaan listaajaryhmään ja kaikki lomakkeita laativat komponentit lomakeryhmään. Ryhmittelyn jälkeen käynnistetään uusi iterointikierros, jossa samankaltaiset komponentit yhdistetään yhdeksi komponentiksi. Blogisovelluksen komponenttiehdokkaista tällaisia komponentteja ovat arkistokuukausien ja -vuosien listauskomponentit. Nämä voidaan yhdistää yhdeksi arkistolistaaja-komponentiksi, joka saa parametrikseen listatyypin. Alla oleva pseudokoodi selventää iterointikierroksen tuloksen reunapalstaa rakentavassa komponentissa.
class Sidebar {
public void searchBox();
public void newest();
public void categories();
public void archiveList(range = MONTH | YEAR);
public void tags();
}Luokkaan ehdotetut months()- ja years()-metodit on yhdistetty archiveList()-metodiksi, jonka range-parametrilla indikoidaan, tulostetaanko kuukausi- vai vuosiarkisto. Iterointikierrosten edetessä metodille tunnistetaan mahdollisesti lisää parametreja, joihin ei suunnittelun alkuvaiheessa kannata kiinnittää liikaa huomiota. Metodien ohjelmarunkoon ei myöskään tarvitse puuttua, sillä myöhemmät kierrokset tulevat osoittamaan, että monet metodit käyttävät lopulta vain kourallista joukkoa perustoiminnallisuuksia toteuttavia metodeita. Monet listaajaryhmään kuuluvat korkean tason metodit, kuten Sidebar-luokan newest()-, categories()-, archiveList()- ja tags()-metodit suorittavat listaamista kukin omalla tavallaan. Lopputuloksena on kuitenkin ulkoasultaan samankaltaiset listat, joiden sisältö vaihtelee tapauskohtaisesti. Nämä metodit voivat siis hyödyntää yleistä listauskomponenttia, joka toteutetaan johonkin yleiskäyttöiseen käyttöliittymäluokkaan.