Laying Out Your GUIs With Qt Designer

When laying out your Qt GUIs it can be quite a tricky task to place every widget in the right position on your forms. Onneksi Qt tarjoaa joukon asettelunhallintaohjelmia, jotka yksinkertaistavat widgettien sijoittelua ja joiden avulla voit helposti luoda minkä tahansa asettelun. Kun haluat sijoittaa widgetin lomakkeelle, voit luoda kaiken koodilla tai voit luoda asettelun Qt Designerilla. Tässä opetusohjelmassa opit käyttämään Qt:n asetteluja Qt Designerilla monimutkaisten graafisten käyttöliittymien rakentamiseen sovelluksiisi.

Lisäksi luomme dialogiesimerkin, jossa käytämme useita widgettejä, joilla on johdonmukainen asettelu, jotta voimme vahvistaa tietämystäsi ja koota kaiken yhteen täysin toimivaksi dialogiksi, aivan kuten loisit todellisessa sovelluksessa.

Layoutien käyttäminen Qt Designerilla

Qt Designer on Qt-työkalu graafisten käyttöliittymien (GUI) suunnitteluun ja luomiseen työpöytäsovelluksia varten. Qt Designerilla voit luoda ikkunoita, dialogeja ja lomakkeita. Sen avulla voit lisätä erilaisia widgettejä graafisten käyttöliittymien luomiseksi käyttämällä näyttöön tulevia lomakkeita ja raahaa ja pudota -pohjaista käyttöliittymää.

Qt Designerin pääkäyttöliittymä näyttää seuraavalta –

Qt Designer – Pääkäyttöliittymä

Qt Designerissa on selkeä ja käyttäjäystävällinen käyttöliittymä, jonka avulla voit luoda minkälaisen graafisen käyttöliittymän tahansa raahaamalla widgetin tyhjään lomakkeeseen. Kun olet sijoittanut kaikki widgetit lomakkeelle, sinun on sijoitettava ne yhtenäiseen asetteluun. Näin varmistetaan, että kaikki widgetit näkyvät ja niiden kokoa muutetaan oikein, kun lomaketta esikatsellaan tai käytetään sovelluksessa.

Qt:n asettelunhallintaohjelmat ovat strukturoituja kontteja, jotka järjestävät automaattisesti lapsivedgetit varmistaen, että ne käyttävät käytettävissä olevaa tilaa hyvin. Widgettien sijoittaminen asettelunhallintaan sijoittaa ne automaattisesti määriteltyjen sääntöjen mukaisesti. Yksi Qt Designerin hyödyllisimmistä ominaisuuksista on kyky raahata ja pudottaa asettelunhallintahierarkioita ja järjestää widgetit siisteiksi ja toimiviksi käyttöliittymiksi.

Qt Designerissa voit luoda asettelukohteita soveltamalla asettelua olemassa olevien widgettien ryhmään. Vaikka on mahdollista raahata asetteluja lomakkeelle ja sitten vetää widgetit asettelujen sisään, tämä voi olla hieman hankalaa. Paras käytäntö on sen sijaan raahata kaikki tarvitsemasi widgetit ja välikappaleet lomakkeelle ja valita sitten niihin liittyvät widgetit ja välikappaleet ja soveltaa asetteluja niihin. Käytä seuraavia vaiheita –

1. Vetele ja pudota widgetit lomakkeelle yrittäen sijoittaa ne lähelle haluamaasi sijaintia
2. Valitse widgetit, joita pitäisi hallita tietyllä asettelulla, pitämällä Ctrl-näppäintä painettuna ja klikkaamalla niitä
3. Sovella sopivaa asettelua (vaaka-, pysty-, ruudukko- tai lomakeasettelu) Qt Designerin työkalupalkin päävalikosta, tai lomakkeen kontekstivalikosta

Ennen kuin menet esimerkkiin, tutustu Qt Designerin tarjoamiin asetteluun liittyviin vaihtoehtoihin –

1. Käytä asetteluvaihtoehtoja päätyökalurivillä
2. Käytä asetteluvaihtoehtoja päävalikossa
3. Käytä asetteluvaihtoehtoja lomakkeen kontekstivalikossa

Käyttökelpoisimmin asetteluja voi luoda Qt Designerin päätyökalurivin asettelu-osiolla. Tämä osio näyttää seuraavalta –

Qt Designer – Asettelu-työkalurivi

Vasemmalta oikealle löydät seuraavat painikkeet –

• Lay Out Horizontally (Asettele vaakasuoraan) järjestää valitut widgetit vaakasuoraan asetteluun toistensa viereen (näppäinyhdistelmä, Ctrl+1). Tämä vaihtoehto käyttää tavallista QHBoxLayout-objektia
• Lay Out Vertically (Pystyasettelu) järjestää valitut widgetit pystysuoraan asetteluun, yksi toisensa viereen (näppäinyhdistelmä, Ctrl+2). Tämä vaihtoehto käyttää standardia QVBoxLayout-objektia
• Lay Out Horizontally in Splitter järjestää widgetit vaakasuunnassa käyttäen jakotietä (näppäinyhdistelmä, Ctrl+3)
• Lay Out Vertically in Splitter järjestää widgetit pystysuunnassa käyttäen jakotietä (näppäinyhdistelmä, Ctrl+4)
• Lay Out in a Grid järjestää widgetit taulukkomuotoiseen ruudukkoon (rivit ja sarakkeet). Oletusarvoisesti kukin widgetti vie yhden ruudukon solun, mutta voit muuttaa tätä käyttäytymistä ja saada widgetit ulottumaan useampaan soluun (näppäinyhdistelmä, Ctrl+5). Tämä vaihtoehto käyttää tavallista QGridLayout-objektia
• Lay Out in a Form Layout järjestää valitut widgetit kaksisarakkeiseen asetteluun. Vasemmassa sarakkeessa on yleensä tarroja, joissa kysytään jotakin tietoa, ja oikeassa sarakkeessa on widgettejä näiden tietojen syöttämiseen, muokkaamiseen tai näyttämiseen (Näppäinyhdistelmä, Ctrl+6)
• Break Layout tämän näppäimen avulla voit jarruttaa olemassa olevan asettelun. Kun widgetit on järjestetty asetteluun, et voi siirtää ja muuttaa niiden kokoa yksitellen, koska niiden geometriaa ohjaa asettelu. Jos haluat muuttaa yksittäisiä widgettejä, sinun täytyy rikkoa asettelu ja tehdä se myöhemmin uudelleen (Näppäinyhdistelmä Ctrl+0)
• Säädä kokoa (Adjust Size) säätää asettelun kokoa niin, että siihen sisältyvät widgetit mahtuvat ja että jokaisella widgetillä on tarpeeksi tilaa olla näkyvissä (Näppäinyhdistelmä Ctrl+J)

Nämä samat asetteluun liittyvät vaihtoehdot ovat käytettävissä myös Qt Designerin päävalikossa Form-valikossa ja lomakkeen kontekstivalikossa, joten voit valita haluamasi vaihtoehdon.

Nyt kun olemme saaneet teorian pois tieltä, voimme panna nämä asettelut käytäntöön. Seuraavissa kappaleissa käytämme Qt Designeria lomakkeiden widgettien asetteluun ja rakennamme mukavia ja tyylikkäitä graafisia käyttöliittymiä työpöytäsovelluksiisi. Mutta ennen kuin alamme kokeilla Qt:n tarjoamia eri asettelunhallintaohjelmia, luomme ensin mukautetun widgetin, jolla visualisoimme asettelut, kun käymme läpi tämän opetusohjelman.

Valmis .ui-tiedosto on ladattavissa alta, jos haluat ohittaa tämän vaiheen.

layout-labels.ui

Siirry eteenpäin ja käynnistä Qt Designer ja suorita seuraavat vaiheet –

1. Valitse Widget New Form-valintaikkunan templates/forms-välilehdellä Widget. Tämä luo uuden tyhjän lomakkeen työstämistä varten.
2. Tallenna lomake nimellä layout-labels.ui.
3. Etsitään Label widget Widget Box:stä ja vedetään se lomakkeelle.
4. Mene Property Editor:een ja aseta text-ominaisuudeksi 0.
5. Avaat Text Edit-dialogin ja asetat tekstin värin valkoiseksi. Aseta fonttikooksi 20 pistettä ja tasaa teksti. Ota muutokset käyttöön painamalla OK.
6. Mene Property Editor-ikkunaan ja aseta autoFillBackground-ominaisuuden arvoksi True valitsemalla valintaruutu.
7. Katsele palette-ominaisuutta ja avaa Edit Palette-ikkuna. Käytä Quick-vaihtoehtoa asettaaksesi väriksi punaisen.

Jos tunnet itsesi eksyneeksi, katso seuraava screencast nähdäksesi vaiheet toiminnassa –

Tässä esimerkissä luodaan uusi ikkuna Widget-mallin perusteella. Sitten lisäät Labelin, asetat sen text-ominaisuuden arvoksi 0 ja asetat sen taustaväriksi punaisen.

Toteuttaaksesi tämän esimerkin, toista kaikki vaiheet lisätäksesi kolme muuta Labelia, joiden tekstiksi asetetaan 1, 2 ja 3 ja väreiksi vihreä, keltainen ja sininen. Lopulta saat tällaisen lomakkeen:

Qt Designer – Lomake, jossa on värillisiä tarroja

Yllä oleva kuvakaappaus näyttää alkuperäisen lomakkeen, jota käytät seuraavissa osioissa. Se on puhdas lomake, jossa on neljä tarraobjektia. Voit asettaa kullekin etiketille taustavärin, jotta voit nähdä ja erottaa ne helpommin toisistaan seuraavissa osioissa.

Vaakasuuntaiset asettelut, QHBoxLayout

Vaakasuuntaisen asettelunhallinnan (QHBoxLayout) avulla voit järjestää widgetit yhteen riviin. Tällaisen asettelun luomiseksi koodissa sinun täytyy instantioida QHBoxLayout-luokka ja lisätä sitten widgetit layout-objektiin. Qt Designerissa on helpompi toimia toisin päin.

Kun layout-labels.ui-tiedostosi on auki, valitse ensin kaikki tarrat. Voit tehdä tämän napsauttamalla jokaista widgettiä vuorotellen samalla kun pidät Ctrl-näppäintä painettuna tai voit myös napsauttaa ja vetää hiiren osoittimella lomakkeen sisällä valitaksesi widgetit.

Kun olet valinnut widgetit, aseta ne vaakasuoraan asetteluun valitsemalla Lay Out Horizontally-painike Qt Designerin päätyökaluriviltä. Voit myös käyttää alla näkyvän kontekstivalikon vaihtoehtoa Lay out->Lay Out Horizontally tai painaa Ctrl+1. Seuraava screencast opastaa sinua näiden vaiheiden läpi –

Jos asettelu on väärä, voit helposti kumota kaiken ja aloittaa asettelun uudelleen. Voit kumota asioita painamalla Ctrl+z tai käyttämällä Qt Designerin päävalikkorivin Edit-valikkoa. Jos tämä ei ole mahdollista tai ei toimi, voit vain rikkoa asettelun käyttämällä Qt Designerin päätyökalurivin Break Layout-painiketta. Toinen tapa rikkoa asettelu on painaa Ctrl+0 tai valita Break Layout lomakkeen kontekstivalikosta.

Pystysuuntaiset asettelut, QVBoxLayout

Pystysuuntaisen asettelun (QVBoxLayout) avulla voit järjestää widgetit sarakkeeseen päällekkäin. Tämä voi olla erittäin hyödyllistä, kun luot widgettiryhmiä ja sinun on varmistettava, että ne ovat pystysuorassa linjassa.

Aloitat alkuperäisestä layout-labels.ui-tiedostostasi ja ensimmäiseksi valitset widgetit, jotka haluat sisällyttää pystysuoraan asetteluun. Tämän jälkeen voit napsauttaa Lay Out Vertically-painiketta päätyökalurivin yläpuolella tai käyttää kontekstivalikkoa tai voit myös painaa Ctrl+2. Seuraava kuvakaappaus opastaa sinua näiden vaiheiden läpi –

Jos katsot kuvakaappausta tarkemmin, näet, että asettelukohde on merkitty ohuella punaisella kehyksellä, joka ympäröi lomakkeen tarroja. Tämä punainen kehys ei näy esikatselussa tai suoritusaikana, se on vain ohje, jota voit käyttää, kun suunnittelet lomaketta. Huomaa myös, että asetteluobjekti näkyy Object Inspectorissa ja sen ominaisuudet (marginaalit ja rajoitukset) näkyvät Property Editorissa.

Ruudukkoasettelut, QGridLayout

Joskus sinun on aseteltava widgetit sekä vaaka- että pystysuunnassa saman asettelun sisällä. Tähän voit käyttää ruudukkoasettelun hallintaa (QGridLayout). Ruudukkoasettelun hallitsijat asettelevat widgetit neliö- tai suorakulmaiseen ruudukkoon, jossa kaikki widgetit ovat pysty- ja vaakasuunnassa samassa linjassa naapureidensa kanssa. Tällainen asettelu voi antaa sinulle paljon enemmän vapautta widgettien sijoitteluun lomakkeella säilyttäen kuitenkin jonkinasteisen rakenteen. Tämä asettelu voi olla sopivampi kuin vaaka- ja pystyasettelun sisäkkäinen asettelu, erityisesti silloin, kun huolehdit vierekkäisten rivien tai sarakkeiden tasauksesta.

Ruudukkoasettelun voi rakentaa Qt Designerilla samalla tavalla kuin muutkin asettelut. Ensimmäinen vaihe on valita ryhmä widgettejä, jotka haluat asetella ruudukkoasettelun hallinnan avulla. Sen jälkeen voit käyttää työkaluriviä, kontekstivalikkoa tai painaa Ctrl+5 asettelun luomiseen. Katso seuraava screencast –

Tässä tapauksessa käytämme 2 x 2 ruudukkoasettelua lomakkeen tarrojen järjestämiseen. Huomaa, että tällaisen asettelun käyttäminen edellyttää, että sijoitat ensin widgetit lomakkeen riveille ja sarakkeisiin, kuten yllä olevassa screencastissa näytetään. Qt Designer on melko fiksu ja yrittää pitää ulkoasun mahdollisimman samanlaisena kuin mitä olet alun perin käsin luonut. Se voi jopa luoda vaikeat monisarakkeiset järjestelyt automaattisesti tai täyttää tyhjät solut automaattisesti.

Lomakkeiden asettelut, QFormLayout

Vaikka QGridLayout voidaan käyttää lomakkeiden asetteluun, joissa on syötteet ja merkinnät kahdessa sarakkeessa, Qt tarjoaa myös asettelun, joka on suunniteltu nimenomaan tähän tarkoitukseen – (QFormLayout). Tämäntyyppinen asettelu on ihanteellinen, kun olet luomassa strukturoitua tietojen syöttö- tai tietokantasovellusta. Vasemmassa sarakkeessa on yleensä tarroja, joissa kysytään joitakin tietoja. Oikea sarake pitää sisällään syöttövidgetit, kuten rivimuokkaukset (QLineEdit), pyörityslaatikot (QSpinBox), päivämäärämuokkaukset (QDateEdit), komentoruudut (QComboBox) ja niin edelleen.

Tämän asettelun käyttämisen etuna QGridLayoutiin nähden on se, että se on yksinkertaisempi työstää silloin, kun tarvitset vain kaksi saraketta. Seuraava screencast näyttää sen toiminnassa –

Tässä esimerkissä lisätään ensin neljä uutta tarraa. Näihin tarroihin tallennetaan tiedot tiedoista, jotka haluat syöttää tai muokata toiseen sarakkeeseen. Tässä tapauksessa toisessa sarakkeessa on testien värilliset tarrat, mutta yleensä tähän sarakkeeseen sijoitetaan syöttövidgetit, kuten rivimuokkaukset, pyöräytyslaatikot, komentoruudut ja niin edelleen.

Splitter-asettelut

Splitterit ovat säiliöobjekteja, jotka järjestävät widgetit vaakasuoraan tai pystysuoraan kahteen muokattavaan paneeliin. Tällaisen asettelun avulla voit vapaasti säätää, kuinka paljon tilaa kukin paneeli vie lomakkeellasi, pitäen samalla käytetyn kokonaistilan vakiona. Qt:ssä jaettuja asetteluja hallitaan QSplitterin avulla.

Vaikka splitterit ovat teknisesti säiliövidgetti (ei asettelu), Qt Designer käsittelee niitä asetteluina, joita voidaan soveltaa olemassa oleviin widgetteihin. Jos haluat sijoittaa ryhmän widgettejä splitteriin, valitset ne ensin tavallisesti ja sovellat sitten splitteriä käyttämällä Qt Designerissa sopivaa työkalurivin painiketta, näppäimistön pikanäppäintä tai kontekstivalikon vaihtoehtoa Katso seuraavaa screencastia –

Tässä esimerkissä sovellamme ensin vaakasuuntaista splitteriä tarroihin. Huomaa, että sinun on käynnistettävä lomakkeen esikatselu, jos haluat nähdä jakajan toiminnassa. Voit käynnistää lomakkeen esikatselun painamalla Ctrl+R. Myöhemmin sovellamme pystysuuntaista jakajaa tarroihin. Kussakin tapauksessa voit vapaasti muuttaa widgetin kokoa hiiren osoittimella.

Muiden asettelujen rakentaminen Qt Designerilla

On muutamia muitakin asioita, joita voit tehdä asettelujen kanssa Qt Designerissa. Oletetaan esimerkiksi, että haluat lisätä uuden widgetin olemassa olevaan asetteluun tai käyttää sisäkkäisiä asetteluja widgettien järjestämiseen monimutkaisessa graafisessa käyttöliittymässä. Seuraavissa kappaleissa käymme läpi, miten joitakin näistä tehtävistä toteutetaan.

Objektien lisääminen olemassa olevaan asetteluun

Objekteja voidaan lisätä olemassa olevaan asetteluun raahaamalla ne nykyisestä sijainnistaan ja pudottamalla ne haluttuun kohtaan asettelussa. Sininen kursori näkyy asettelussa, kun objekti vedetään sen päälle osoittamaan, mihin objekti sijoitetaan.

Katsokaa seuraavaa screencastia, jossa laitamme kolme tarraamme pystysuoraan asetteluun ja sitten huomaamme, että jätimme sinisen tarran pois pelistä –

On myös mahdollista siirtää tai muuttaa tietyn widgetin sijaintia asettelussa. Voit tehdä tämän vain vetämällä ja pudottamalla widgetin uuteen sijaintiinsa asettelussa. Muista seurata sinistä viivaa, jotta tämä onnistuu.

Layoutien pesäkkeet monimutkaisten graafisten käyttöliittymien rakentamiseen

Voit myös pesäkkeistää layout-managereita toistensa sisään Qt Designerilla. Sisimmäisestä asettelusta tulee tällöin ympäröivän asettelun lapsi. Näin voit iteratiivisesti luoda hyvin monimutkaisia, mutta hyvin jäsenneltyjä käyttöliittymiä.

Layouteja voi sijoittaa niin syvälle kuin haluat. Jos haluat esimerkiksi luoda valintaikkunan, jossa on vaakasuora rivi painikkeita alareunassa ja joukko muita widgettejä, jotka on kohdistettu pystysuoraan lomakkeelle, voit käyttää vaakasuuntaista asettelua painikkeille ja pystysuuntaista asettelua muille widgeteille ja kietoa nämä asettelut sitten pystysuuntaiseen asetteluun.

Palatakseni värillisiin tarroihin liittyvään esimerkkiin, seuraava kuvakaappaus näyttää sisäkkäisen asettelun järjestämisen prosessin Qt Designerissa –

Tässä esimerkissä järjestämme ensin widgetit pareittain käyttäen vaaka-asettelua. Sitten pesitämme nämä molemmat asettelut kolmanteen asetteluun, mutta tällä kertaa pystysuoraan asetteluun. Asettelut voidaan sijoittaa niin syvälle kuin tarvitaan.

Kun valitset lapsiasettelun, sen vanhempiasettelun voi valita painamalla Shift-näppäintä samalla kun klikkaat sitä. Näin voit valita nopeasti tietyn asettelun hierarkiassa, mikä on muuten vaikeaa, koska kunkin asettelunhallintayksikön rajaava pieni kehys on pieni.

Ylimmän tason tai pääasettelun asettaminen

Viimeinen vaihe, joka sinun on suoritettava lomaketta rakentaessasi, on kaikkien asettelujen ja widgetin yhdistäminen yhdeksi pääasetteluksi tai ylimmän tason asetteluksi. Tämä asettelu on kaikkien muiden asettelujen ja widgettien hierarkian yläpäässä. On tärkeää, että sinulla on asettelu, koska muuten lomakkeesi widgetit eivät muuta kokoa, kun muutat ikkunan kokoa.

Pääasettelun asettamiseksi napsauta hiiren kakkospainikkeella missä tahansa lomakkeessasi, joka ei sisällä widgettiä tai asettelua. Sitten voit valita Lay Out Horizontally tai Lay Out Horizontally, tai voit myös valita Lay Out in a Grid kuten seuraavassa screencastissa –

Tässä esimerkissä käytämme vuorotellen jokaista kolmesta eri asettelusta päällimmäisenä asetteluna. Käytämme ensin vaaka-asettelua, sitten katkaisemme asettelun ja käytämme pystyasettelua. Lopuksi asetamme ruudukkoasettelun. Se, minkä ylimmän tason asettelun valitset ylimmän tason asetteluksi, riippuu sovelluksesi erityisvaatimuksista.

On tärkeää huomata, että ylimmän tason asettelut eivät näy erillisenä objektina Object Inspectorissa. Sen ominaisuudet näkyvät päälomakkeen widget-ominaisuuksien alapuolella. Huomaa myös, että jos lomakkeellasi ei ole asettelua, sen kuvake näkyy Object Inspectorissa punaisella ympyrällä. Toinen tapa tarkistaa, oletko asettanut pääasettelun oikein, on yrittää muuttaa lomakkeen kokoa; jos pääasettelu on käytössä, widgettiesi pitäisi muuttaa kokoa sen mukaisesti.

Kun alat rakentaa monimutkaisempia sovelluksia, huomaat, että myös muut kontti-widgetit vaativat ylimmän tason asettelun asettamista, esimerkiksi QGroupBox, QTabWidget, QToolBox ja niin edelleen. Voit tehdä tämän suorittamalla samat vaiheet, jotka olet nähnyt tässä, mutta tällä kertaa sinun on napsautettava oikealla hiiren kakkospainikkeella konttiwidgettiä.

Valintaikkunan asettelu Qt Designerilla

Viimeiseksi ja täydellisemmäksi esimerkiksi siitä, miten asetteluja käytetään Qt Designerilla, luomme nyt valintaikkunan, jolla esitellään joitakin tietoja tietokantasovelluksessa. Oletetaan, että rakennamme henkilöstöhallinto-ohjelmistoa yrityksellemme Poyqote Inc:lle. Työskentelemme nyt lomakkeessa esitellaksemme joitakin tietoja työntekijöistämme. Dialogin pitäisi esittää käyttäjille käyttäjäystävällinen graafinen käyttöliittymä seuraavien tietojen esittelyyn:

• Työntekijän nimi
• Työsuhteen alkamispäivämäärä
• Osasto
• Virkanimike
• Vuosipalkka
• Työnkuvaus

Mitkä ovat parhaimmat tavat laatia tämä lomake? Vaihtoehtoja on monia, ja se on pitkälti makuasia ja harjoituskysymys. Mutta tässä käytämme QFormLayout:tä järjestämään syöttökentät kahteen sarakkeeseen, joissa on vasemmalla puolella merkinnät ja oikealla puolella syöttöruudut. Asettelun luomisprosessi näkyy seuraavassa screencastissa –

Pohjavalintaikkuna luodaan käyttämällä Qt Designerin Dialog with Buttons Bottom -mallia. Sitten lisätään joitakin tarroja ja joitakin syöttövidgettejä, mukaan lukien rivin muokkaus, päivämäärän muokkaus, tekstin muokkaus ja komentoruudut. Seuraavaksi laitamme kaikki nämä widgetit lomakkeen asetteluun ja lopuksi määrittelemme lomakkeen ylimmän tason tai pääasettelun.

Valmis dialogi.ui-tiedosto on ladattavissa täältä.

Loppupäätelmä

Qt Designer on tehokas työkalu luotaessa graafisia käyttöliittymiä Qt:n avulla. Yksi sen suoraviivaisimmista ja hyödyllisimmistä ominaisuuksista on kyky järjestää widgetit erityyppisiin asetteluihin. Kun opit luomaan tehokkaasti asetteluja Qt Designerilla, voit nostaa tuottavuutesi pilviin, erityisesti luodessasi monimutkaisia graafisia käyttöliittymiä.

Tämä opetusohjelma opastaa sinua luomaan mukautettuja asetteluja Qt Designerilla. Tiedät nyt, miten saat kaiken irti Qt Designerista, kun suunnittelet graafisia käyttöliittymiäsi.