Valintaikkunoiden luonti ja suunnittelu

Transkriptio

1 OSA II LUKU LUKU Valintaikkunoiden luonti ja suunnittelu Valmiin valintaikkunan muokkaaminen ja uuden valintaikkunapohjan luominen Valintaikkunoiden ja kontrollien ominaisuuksien asettaminen Kontrollien sijoittaminen ja kohdentaminen resurssieditorin työkaluilla Toimintojen lisääminen valintaikkunan suunnittelun aikana

2 44 Valintaikkunat ja kontrollit Valintaikkuna eli dialogi on eräs Windows-ohjelmoijien eniten käyttämistä elementeistä, koska se sopii hyvin käytettäväksi mitä moninaisimmissa tarpeissa. Valintaikkunalla saadaan välitettyä tietoa käyttäjälle, kuten jo käyttämämme MFC:n MessageBox() funktio osoitti. Vieläkin yleisempää on kuitenkin lukea käyttäjän syöttämiä tietoja valintaikkunan avulla. Tavallisesti käyttäjällä on lopuksi mahdollisuus kuitata tiedot tai peruuttaa ne. Peruuta-toiminto (Cancel) yksinkertaisesti sulkee valintaikkunan ja tilanne palautuu aivan samaksi, mikä se oli ennen valintaikkunan avaamista. Kuittaamalla tiedot (esimerkiksi OK-painikkeella) annetaan syötetyt tiedot ohjelman käyttöön ja usein, joskaan ei aina, myös ikkuna suljetaan. Visual C++ -sovelluksiin luodaan valintaikkunat kahdessa vaiheessa. Ensimmäinen niistä on varsinaisen valintaikkunan suunnittelu, mukaan lukien valintaikkunapohjan luominen ja siihen tarvittavien kontrollien liittäminen. Toinen vaihe on valintaikkunan ohjelmointi, jossa valintaikkuna ja sen kontrollit liitetään C++-koodin luokkiin ja funktioihin. Ensimmäisestä vaiheesta selviämme ilman yhdenkään koodirivin kirjoittamista ja sitä käsittelemmekin tässä luvussa. Valintaikkunapohjan luominen Käytä AppWizardia sovellustesi pohjana AppWizardilla saadaan tehtyä tehokkaasti uusia projekteja. Voit määritellä projektia luodessa siihen kuuluvia ominaisuuksia ja saada ne valmiiksi AppWizardin luomiin lähdekooditiedostoihin. AppWizardin tekemät projektit voidaan jopa kääntää ja ajaa ilman koodin lisäämistä. Developer Studio antaa mahdollisuuden luoda valintaikkunoita jopa ilman projekteja, mutta yleensä valintaikkunoita luodaan ja muokataan olemassa olevissa projekteissa. Aluksi luot AppWizardilla uuden projektin valintaikkunasovellusta varten. Teemme nyt tällaisen ja samalla tutustumme tähän liittyviin AppWizardin valintoihin. Uuden valintaikkunapohjaisen sovellusprojektin luominen 1. Valitse File-valikosta New. 2. Napauta Projects-välilehteä ja valitse projektityyppien luettelosta MFC AppWizard (exe). 3. Kirjoita Project Name ruutuun projektin nimeksi Person. Tässä vaiheessa New-valintaikkunan pitäisi näyttää kuvan 3.1 mukaiselta.

3 OSA II LUKU 3 45 KUVA 3.1 Uuden projektin luominen. 4. Napauta OK. Saat esiin MFC AppWizardin ensimmäisen vaiheen ikkunan (Step 1). 5. Napauta valintapainiketta Dialog Based. 6. Next-painikkeella pääset seuraavaan vaiheeseen (MFC AppWizard Step 2). Tässä vaiheessa voit mukauttaa sovellustasi jo ennen kuin se on luotu. Tekemiesi valintojen vaikutus sovelluksen ulkoasuun näkyy välittömästi ikkunan vasemmassa osassa. Tässä voit muuttaa myös pääikkunan otsikkoa. Loput valinnoista koskevat kehittyneempiä Windows-sovelluksen ominaisuuksia. Varmista, että valintasi ovat kuvan 3.2 mukaiset. KUVA 3.2 Ominaisuuksien ja aputoimintojen valinta.

4 46 Kommenttien lisääminen koodiin AppWizardilla Voit pyytää AppWizardin tekemään generoitaviin lähdekooditiedostoihin myös kommentoinnin. Näin ymmärrät paremmin valmista koodia ja tiedät, mihin kohtaan oman koodisi lisäät. Valintaikkunat ja kontrollit 7. Napauta Next ja pääset seuraavaan vaiheeseen, Step 3 -ikkunaan. Tässä vaiheessa voit valita AppWizardin myös kommentoimaan generoimansa koodin. Nämä kommentit auttavat sinua löytämään oikean paikan oman koodisi lisäämiseksi koodirunkoon. Ne myös selittävät eri moduulien merkitystä. Itse vastaan tähän aina Yes, Please, jolloin saan koodiin mukaan kommentit. Oletuksena AppWizard tekee ohjelman, joka käyttää MFCkirjastoa DLL-moduulista (dynaamisesti linkitettävä kirjasto). Tällä menettelyllä suoritettava tiedosto (.exe) saadaan pienemmäksi, koska ohjelma hakee tarvitsemansa MFC-kirjaston funktiot muista levyllä olevista tiedostoista. 8. Next-painikkeella pääset AppWizardin seuraavaan ikkunaan, kuvan 3.3 ikkunan esittämään vaiheeseen 4. KUVA 3.3 Luotavien luokkien ja tiedostonimien tarkistaminen. Tässä viimeisessä vaiheessa näet niiden luokkien ja tiedostojen nimet, jotka AppWizard aikoo tehdä. Jos haluat tehdä näihin muutoksia, se onnistuu ikkunan alareunan ruuduissa. 9. Napauta Finish. 10. Napauta OK New Project Information ikkunassa ja AppWizard luo uuden projektin lähdekooditiedostoineen. Projektisi on luotu ja pääset muokkaamaan sen resursseja. Napauta siis projektin työtilaikkunassa ResourceView-välilehteä ja laajenna luettelon alkiot napauttamalla niiden vasemmalla puolen olevaa plusmerkkiä.

5 Huomaat, että AppWizard on luonut Dialog-kansion alle kaksi valintaikkunapohjaa. Näistä IDD_PERSON_DIALOG on sovelluksen pääikkuna, joka tehtiin, koska valitsit AppWizardin luomaan valintaikkunasovelluksen. IDD_ABOUTBOX valintaikkuna voidaan avata sovelluksen Help-valikon About-komennolla ja se näyttää sovelluksen kuvakkeen ja versionumeron. Aluksi tulet muokkaamaan AppWizardin luomaa valintaikkunaa ja myöhemmin opit lisäämään sovellukseesi uusia ikkunoita ja myös käyttämään resurssieditorin kehittyneempiä toimintoja. OSA II LUKU 3 47 Sovelluksen pääikkunan muokkaaminen 1. Kaksoisnapauta ResourceView ruudussa IDD_PERSON_DIALOG alkiota. Saat resurssieditoriin pääikkunan valintaikkunapohjan. 2. Napauta tekstiä TODO: Place Your Controls Here ja paina Delete-näppäintä (näppäimistöltä). Teksti poistuu ikkunasta. 3. Napauta Cancel-painiketta ja paina Delete-näppäintä. Myös tämä painike poistuu ikkunasta. 4. Napauta valintaikkunapohjan OK-painiketta. 5. Avaa pikavalikko hiiren oikealla painikkeella. 6. Etsi valikosta komento Properties ja saat esiin ikkunan painikkeen ominaisuuksien muokkaamista varten (Push Button Properties). 7. Valitse General-välilehti ja muuta Caption-ruudun OK-teksti muotoon Exit (kuva 3.4). Muutit juuri kontrollin tekstitunnuksen, muttet sen toimintaa ohjelmassa. Ohjelmat käyttävät kontrollien tunnistamiseen numeerisia tunnuksia (ID). Tässä tapauksessa kyseinen tunnus on IDOK (jolle MFC on määritellyt numerovastineen). Tunnusta käytetään, kun halutaan ohjelman käsittelevän tietyn kontrollin lähettämiä sanomia. IDOK on ohjattu valmiiksi kutsumaan MFC:n funktiota CDialog::OnOK(), joka suorittaa ikkunan sulkemiseen tarvittavan koodin. 8. Sulje Push Button Properties -ikkuna. resource.h -tiedosto Projektin #define-lausein määritellyt resurssien IDtunnukset ovat oletuksena tiedostossa resource.h. Saat tämän tiedoston esiin ja pääset muokkaamaan sitä View-valikon Resource Symbols -komennolla.

6 48 Valintaikkunat ja kontrollit KUVA 3.4 Kontrollin muokkaaminen. Olet juuri muokannut AppWizardin ystävällisesti luomaa valintaikkunaa, mutta kuinka tekisit itse ikkunan alusta pitäen? Uuden valintaikkunan tekeminen 1. Valitse projektin työtilaikkunasta ResourceView-sivu. 2. Napauta hiiren oikealla painikkeella Dialog-kansiota. Saat esiin pikavalikon. 3. Valitse pikavalikosta Insert Dialog komento. Se tekee uuden valintaikkunan ja avaa sen resurssieditorin ikkunassa. Uudessa valintaikkunapohjassa on valmiina jo OK- ja Cancel-painikkeet. KATSO MYÖS Lisätietoja ResourceView-sivun käytöstä löydät luvusta 2. Valintaikkunan ID-tunnuksen asettaminen Kun uusi valintaikkuna luodaan, resurssieditori pitää huolen siitä, että sille annetaan yksilöllinen ID-tunnus. Kyseinen tunnus on muotoa IDD_DIALOG ja numero. Uusi valintaikkuna tunnuksineen tulee sijoittumaan ResourceView-sivulla Dialog-kansion alle. Ensimmäinen tehtäväsi onkin muuttaa tuo ID-tunnus ymmärrettävämpään muotoon. Jos ikkunassa esimerkiksi syötettäisiin kirjojen myyntiä kuvaavia tietoja, voisi tunnus olla IDD_KIRJAMYYNTI tämä luonnollisesti on selkeämpi kuin IDD_DIALOG9. Varo kuitenkin Ä- ja Ö-kirjainten käyttöä. Uuden valintaikkunan tunnuksen muuttaminen 1. Paina hiiren oikeaa painiketta nyt kaukana muista kontrolleista, esimerkiksi otsikkorivillä ja saat esiin pikavalikon. Varmistuttuasi, ettei valittuna kuitenkaan ole mikään kontrolleista, pääset käsiksi itse valintaikkunan ominaisuuksiin.

7 2. Valitse pikavalikosta Properties ja saat esiin Dialog Properties ikkunan (kuva 3.5). OSA II LUKU 3 49 KUVA 3.5 Valintaikkunan ID-tunnuksen vaihtaminen selkeämmäksi. 3. Valitse Dialog Properties -ikkunasta General-sivu. 4. Vaihda ID-ruutuun IDD_DIALOG1:n tilalle IDD_PERSONALITY. Valintaikkunan yleiset ominaisuudet Ominaisuuksien muokkaaminen kuuluu valintaikkunan suunnittelun perustoimenpiteisiin. Siksi kannattaa pitää Dialog Properties ikkuna avoinna ja päällimmäisenä koko ajan. Tämä käy napauttamalla ikkunan vasemmassa yläkulmassa olevaa paperinastan näköistä kuvaketta (kuva 3.6). Tällä saat Dialog Properties ikkunan jäämään avoimeksi, vaikka valitsisitkin muokattavaksi muita resursseja. Näitä kiinnitettäviä valintaikkunoita on myös muissa Developer Studion osissa. 1 Valittu resurssi määrää Properties-ikkunassa näkyvät välilehdet ja valinnat. Voit muuttaa samasta asetusikkunasta koko valintaikkunapohjan ja siihen kuuluvien kontrollien ominaisuuksia. Toiseksi kiinnostavin muokattava ominaisuus on ikkunan otsikko, eli ikkunan otsikkopalkissa näkyvä teksti. Muuta ikkunan otsikkoa kirjoittamalla Caption-ruutuun teksti Personality. Uusi otsikko tulee näkyviin resurssieditorissa olevan ikkunan otsikkopalkkiin sitä mukaa kuin sitä kirjoitat. General-sivulla voit muuttaa myös valintaikkunassa käytettävää fonttia. Mikäli valitset käytettävän fontin kooksi suuremman kuin 8, KUVA 3.6 Ominaisuusikkunan jättäminen avoimeksi. 1 Valintaikkuna saadaan pysymään avoinna napauttamalla nurkassa olevaa nastaa.

8 50 Valintaikkunan yksiköt Valintaikkunoissa kokoa mitataan käytettävään fonttiin perustuvin valintaikkunan yksiköin (DLU, dialog unit). Valintaikkunat ja kontrollit myös koko valintaikkuna suurenee vastaamaan valittua kokoa. Oletuksena valintaikkunan koko lasketaan käytettävän fontin keskimääräisen korkeuden ja leveyden perusteella. Oletusfontti on MS Sans Serif kokoa 8 eikä sitä yleensä muuteta. X Pos ja Y Pos määrittävät ikkunan paikan sitä avattaessa. Paikka ilmoitetaan suhteessa isäikkunan paikkaan ja arvo 0 vastaakin ikkunan keskittämistä isäikkunan suhteen. Valintaikkunan tyylit Dialog Properties ikkunassa näet kolme välilehteä tyyleille. Ensimmäisen näistä saat esiin napauttamalla Styles-välilehteä (kuva 3.7). KUVA 3.7 Valintaikkunan tyylin valitseminen Muista, että tyyliasetukset vaikuttavat osin toisiinsa. Jos poistat Title Bar tyylin valinnan, joudut luopumaan automaattisesti myös järjestelmävalikosta (System menu) sekä ikkunan otsikosta. Jos aktivoit Title Bar valinnan uudelleen, joudut syöttämään uudelleen myös ikkunan otsikon Caption-ruutuun. Vastaavia vaikutuksia on myös ikkunan reunan asetuksien muuttamisella (Border). Tyyliasetuksilla saat valintaikkunastasi helposti käyttökelvottoman eikä asetusten palauttaminenkaan entiselleen käy helposti. Jos epäilet tällaista ongelmaa, ota mallia toimivan valintaikkunan asetuksista. Useimmissa tapauksissa oletusasetukset ovat suositeltavimmat. Kontrollien lisääminen ja sijoittaminen Valintaikkunalla ei tee mitään ilman siinä olevia kontrolleja. Aina valintaikkunaa resurssieditoriin avattaessa lisätään työkaluvalikkoon myös Layout-valikko ja pari uutta työkaluriviä. Toinen näistä on Dialog-työkalurivi (kuva 3.8) ja toinen Controls (kuva 3.9).

9 OSA II LUKU 3 51 KUVA 3.8 Dialog-työkalurivi auttaa kontrollien sijoittelussa. 1 Test - ikkunan testaaminen 2 Align Left - Tasaus vasemman reunan mukaan 3 Align Right - Tasaus oikean reunan mukaan 4 Align Top - Tasaus yläreunan mukaan 5 Align Bottom - Tasaus alareunan mukaan 6 Center Vertical - Pystykeskitys 7 Center Horizontal - Vaakakeskitys 8 Space Across - Tasaa välit vaakasuunnassa 9 Space Down - Tasaa välit pystysuunnassa 10 Make Same Width - Tee samanlevyisiksi 11 Make Same Height - Tee samankorkuisiksi 12 Make Same Size - Tee samankokoisiksi 13 Toggle Grid - Apuruudukko esiin/pois 14 Toggle Guides - Ohjainviivat esiin/pois

10 52 Valintaikkunat ja kontrollit KUVA 3.9 Controls-työkaluriviltä löydät kontrolleja valintaikkunaan lisättäväksi. 1 Select - Valitse 2 Static Text - Teksti 3 Group Text - Ryhmäkehys 4 Check Box - Valintaruutu 5 Combo Box - Yhdistelmäruutu 6 Horizontal Scroll Bar - Vaakavierityspalkki 7 Spin Control - Laskuri 8 Slider Control - Liukusäädin 9 List Control - Luettelo 10 Tab Control - Välilehti 11 Rich Edit Control - Laajennettu tekstiruutu 12 Calendar Control - Kalenteri 13 Custom Control - Käyttäjän oma kontrolli 14 Picture Control - Kuva 15 Edit Control - tekstiruutu 16 Button Control - Painike 17 Radio Button - Valintapainike 18 List Box - Luetteloruutu 19 Vertical Scroll Bar - Pystyvierityspalkki 20 Progress Control - Edistymispalkki 21 Hot Key - Pikanäppäin -kontrolli 22 Tree Control - Puukontrolli 23 Animate Control -Animaatio 24 Date/Time Picker - Paiväys/aika -kontrolli 25 IP Address Control - Numeerinen Internet-osoite 26 Extended Combo Box - Laajennettu yhdistelmäruutu

11 OSA II LUKU 3 53 Elleivät Dialog- ja Controls-työkalurivit ole esillä, löydät ne seuraavasti. Dialog-työkalurivin näyttäminen 1. Valitse Tools-valikosta Customize-komento ja saat esiin vastaavan ikkunan. 2. Napauta Toolbars-välilehteä. 3. Valitse Toolbars-luettelosta Dialog. 4. Napauta Close. Controls-työkalurivin näyttäminen 1. Valitse Tools-valikosta Customize-komento ja saat esiin vastaavan ikkunan. 2. Napauta Toolbars-välilehteä. 3. Valitse Toolbars-luettelosta Controls. 4. Napauta Close. Kukin Controls-työkalurivin kuvakkeista vastaa erilaista kontrollia. Asettaessasi hiiriosoittimen jonkin kuvakkeen päälle saat esiin lyhyen kuvauksen vastaavasta kontrollista. Valitset haluamasi kontrollin napauttamalla sitä vastaavaa kuvaketta. Tämän jälkeen editori on valmis ottamaan vastaan kontrollin piirrettäväksi. Hiiri palautuu normaaliksi, kun valitset ylimpänä työkalurivissä olevan nuolen. Valittu kontrolli siirretään valintaikkunaan napauttamalla hiirellä halutussa sijoituspaikassa. Ennen kuin lisäät kontrolleja, suurenna valintaikkunaa, jotta saat lisää tilaa. Voit muuttaa valintaikkunan kokoa seuraavasti. Uusi laajennettu yhdistelmäruutu Laajennetussa yhdistelmäruudussa voidaan luetteloon lisätä myös kuvia. Valintaikkunan suurentaminen 1. Napauta kerran valintaikkunan reunalla. Valintaikkunan ympärille ilmestyy nelikulmio kahvapisteineen (kuva 3.10). 2. Napauta oikean alakulman kahvapistettä pidä hiiren vasen painike vielä painettuna.

12 54 Valintaikkunat ja kontrollit Kaikkien ikkunoiden kokoa voidaan muuttaa vetämällä niiden reunoilla olevista kahvapisteistä. Jos esimerkiksi haluat muuttaa ainoastaan ikkunan leveyttä, napauta ikkunan oikeassa reunassa olevaa kahvapistettä. Hiiriosoitin ilmaisee tällöin, mihin suuntaan kokoa voidaan muuttaa. KUVA 3.10 Valintaikkunan suurentaminen. 3. Siirrä hiiriosoitinta pitäen vasen painike alhaalla. Uuden ikkunan ääriviivat pysyvät esillä hiirtä siirrettäessä. 4. Vapauta hiiren painike, kun ikkuna on sopivan kokoinen. Koko ikkuna suurennetaan. Seuraavaksi tulemme lisäämään valintaikkunaan kontrolleja seuraavien vaiheiden mukaisesti. Kontrollien lisääminen valintaikkunaan 1. Valitse Controls-työkaluriviltä Static Text kontrolli. 2. Static Text kontrollilla voidaan käyttäjälle esittää tekstiä. Yleensä niitä käytetään kuitenkin nimeämään muita valintaikkunan kontrolleja. 3. Napauta valintaikkunan vasemman yläkulman suunnalla.

13 OSA II LUKU 3 55 Ikkunaan jää tällöin tekstikontrolli, jossa oletustekstinä on Static. 4. Kirjoita kontrollin tekstiksi First name. Teksti muuttuu välittömästi myös työstettävässä ikkunassa. 5. Valitse työkaluista Edit Box tekstiruutukontrolli. 6. Napauta ikkunapohjan päällä First name tekstin oikealla puolen ja saat ikkunaasi muokkausruudun. 7. Valitse jälleen Static Text kontrolli ja napauta se First name kontrollin alle. 8. Kirjoita tekstiksi Surname. Jälleen ikkunassa näkyvä teksti muuttuu automaattisesti. 9. Valitse Edit Box kontrolli työkaluriviltä. 10. Napauta ikkunassa Surname-tekstin oikealla puolen ja tekstiruutu jää siihen. Nyt sinulla on kuvan 3.11 esittämä ikkuna, ainakin melkein. Oletuspainike Kaikissa valintaikkunoissa on oletuspainike, joka aktivoituu Enter-näppäimellä. Painikkeen erottaa normaalia vahvemmista reunoista. Yleensä oletuspainike on OK, mutta voit halutessasi valita sen Push Button Properties - valintaikkunan Styles-välilehdeltä. KUVA 3.11 Kontrollien lisääminen valintaikkunaan. KATSO MYÖS Lisätietoja painikekontrolleista luvussa 4. Opit lisää Static Text kontrollin käytöstä luvussa 5. Myös Edit Box tekstiruutua käsitellään luvussa 5. Uusi Extended Combo Box yhdistelmäruutu esitellään luvun 11 lopussa.

14 56 Valintaikkunat ja kontrollit Kontrollien koon muuttaminen Kontrollien kokoa käsitellään useassa eri muokkausvaiheessa. Jo kirjoittaessasi tekstiä kontrolliin sen koko skaalautuu kirjoittavan tekstin mukaan. Kyseessä on koon määrääminen kontrollin sisällön mukaan. Tämä toiminto on käytössä kaikissa kontrolleissa, joissa on näkyvää tekstiä. Kontrollin koon muuttaminen sen sisällön mukaan 1. Napauta kontrollia ja sen ympärille ilmestyy suorakulmio. 2. Avaa pikavalikko hiiren oikealla painikkeella. 3. Valitse Size to Content. Voit muuttaa kontrollin kokoa aina valitun kontrollin ympärillä olevan laatikon kahvoista. Esimerkki-ikkunassamme tekstiruutu saisi olla hieman suurempi, joten venytämme ensimmäistä kontrollia ja yritämme saada sitten toisestakin samankokoisen. Muuta First name tekstin viereistä tekstiruutua seuraavasti. Tekstiruudun koon muuttaminen 1. Napauta First name tekstin vieressä olevaa tekstiruutua ja sen ympärille ilmestyy suorakulmio. 2. Siirrä hiiriosoitin suorakulmion reunan päälle ja sijoita se sinisen kahvan päälle. Tällöin hiiriosoitin muuttuu kaksipäiseksi nuoleksi. 3. Paina hiiren painike alas ja pidä se painettuna. 4. Siirrä hiirtä oikealle pitäen painiketta edelleen painettuna. Hiiren siirtyessä kontrollin siirtyvä reunaviiva näkyy. 5. Vapauta hiiren painike, kun kontrolli on oikean kokoinen. Se esitetään nyt uudessa koossaan. Ikkunasi pitäisi nyt olla kuvan 3.12 näköinen.

15 OSA II LUKU 3 57 KUVA 3.12 Yksittäisen kontrollin koon muuttaminen. Usean kontrollin valitseminen Siistissä käyttöliittymässä kaikki samantyyppiset kontrollit ovat saman kokoisia tai niiden reunat on tasattu toisiinsa nähden. Resurssieditorissa tämä toimenpide suoritetaan valitsemalla ensin siirrettävät tai venytettävät kontrollit ja valitsemalla sitten sopiva komento Layoutvalikosta tai työkaluriviltä. Muista useaa kontrollia valitessasi, että viimeksi valittu kontrolli (jossa on kahvat ) on se, minkä mukaan muita kontrolleja muutetaan. Näin teet toisesta tekstiruudusta saman kokoisen ensimmäisen kanssa. Usean kontrollin valitseminen lassoamalla Kun haluat valita usean kontrollin kerralla, voit lassota ne painamalla hiiren vasemman painikkeen pohjaan ja vetämällä katkoviivoitetun suorakulmion valittavien kontrollien ympärille. Kun hiiren painike vapautetaan, tulevat kaikki kokonaan suorakulmion sisällä olevat kontrollit valituiksi. Toisen tekstiruudun muokkaaminen 1. Napauta Surname-tekstin viereistä tekstiruutua. Kontrollin ympärille tulevat esiin reunukset. 2. Pidä Ctrl-näppäintä painettuna ja valitse ensimmäinen tekstiruutu. Kontrollin ympärille tulee reunukset. Ensin valittu kontrolli pysyy yhä valittuna, mutta vain viimeksi valitulla kontrollilla on aktiiviset (siniset) kahvat. Usean kontrollin sijoittaminen Kun siirrät yhtä kontrollia usean valittuna olevan joukosta, ne kaikki siirtyvät. 3. Valitse Layout-valikosta Make Same Size alivalikosta Same Width. Toinen muokkausruutu muuttuu nyt saman levyiseksi ensimmäisen kanssa. Kontrollien tasaaminen Resurssieditorin Layout-valikosta ja työkaluriviltä voit koon muuttamisen lisäksi suorittaa erilaisia tasaustoimintoja kontrolleille. Tasattavat

16 58 Valintaikkunat ja kontrollit kontrollit tulee ennen toimenpidettä valita (kts. edellinen kappale), jonka jälkeen on käytettävissä useita tasausvaihtoehtoja. Kokeilemme näistä muutamia esimerkki-ikkunallemme. Voit tasata tekstiruutujen viereiset tekstit ruutujen suhteen seuraavasti. Tekstiruutujen tasaaminen 1. Valitse First name kontrolli ja sen oikealla puolen oleva tekstiruutu. Molempien ympärillä tulisi näkyä kehys, mutta vain muokkausruudussa pitäisi olla siniset kahvat koon muuttamista varten. Ellet ole varma, kuinka useita kontrolleja valitaan, lue edellinen kappale uudelleen. 2. Valitse Layout-valikon Align-alivalikosta Bottom. Tämä tasaa First name -tekstin ja tekstiruudun alareunasta. 3. Toista vaiheet 1 ja 2 myös toiselle kontrolliparille. 4. Valitse nyt First name teksti ja sitten Surname-teksti. 5. Valitse Layout-valikon Align-alivalikosta Right. Tämä tasaa tekstit niiden oikeasta reunasta. Ikkunasi on nyt suunnilleen kuvan 3.13 mukainen. KUVA 3.13 Kontrollien reunojen tasaaminen ja apuviivojen käyttö.

17 OSA II LUKU 3 59 Apuviivojen käyttö Kontrollien sijoittelun helpottamiseksi voit käyttää työstettävässä ikkunapohjassa apuviivoja. Näitä sinisiä katkoviivoja on esitetty muun muassa kuvassa Jos kontrollin reuna on apuviivalla, voit siirtää kontrollin reunaa siirtämällä apuviivaa. Näet apuviivojen vaikutuksen, jos levennät ikkunaasi. OK- ja Cancel-painikkeet pysyvät paikallaan oikeaan reunaan nähden, koska ne on kiinnitetty siihen. Saat käyttöön apuviivat napauttamalla ikkunan yläreunassa tai vasemmassa reunassa olevaa viivainta. Apuviivat esitetään viivaimissa olevilla nuolilla. Voit siirtää apuviivaa raahaamalla sen uuteen paikkaan. Kontrollien viereen sijoitetut apuviivat tasataan automaattisesti kontrollin reunaan ja päinvastoin. Apuviivaa koskettavat kontrollit sijoitetaan automaattisesti uudelleen Kun kontrollin reuna on kiinnitetty apuviivaan (guideline), saadaan kontrollia siirrettyä pelkästään apuviivaa siirtämällä. Apuviivat näkyvät ainoastaan resurssieditorissa valintaikkunaa muokattaessa, eivät testaustilassa tai ohjelmaa suoritettaessa. Valintaikkunan kontrollien järjestäminen Kontrollien lisäämisen ja niiden sijoittelun lisäksi valintaikkunan suunnitellussa on huomioitava muitakin tärkeitä seikkoja. Ryhmäkehykset (group box) pitävät ikkunan kontrollit selkeässä järjestyksessä. Voit myös määrittää, missä järjestyksessä kontrollit aktivoidaan sarkainnäppäimellä niitä selattaessa sekä mitä näppäimistöpikavalintoja niille käytetään. Ryhmäkehysten käyttö Kun valintaikkunassa on paljon kontrolleja, ne saadaan käyttäjälle selkeämmin esiin ryhmittämällä ne ja lisäämällä ryhmälle otsikko ja reunaviiva. Tätä varten on käytettävissä ryhmäkehyskontrolli (group box). Tämänkin käyttö selviää parhaiten käytännössä, joten lisäämme esimerkkiimme vielä muutamia kontrolleja. Ryhmäkehyksen ja valintaruutujen lisääminen ikkunaan 1. Valitse työkaluriviltä Group Box kontrolli. 2. Lisää kontrolli valintaikkunaan siinä olevien kontrollien alle. 3. Suurenna kontrollia oikean alakulman kahvasta käsin kuvan 3.14 mukaiseksi. Ryhmäkehykset eivät ole vain ulkoasuelementtejä Ryhmäkehykset toimivat visuaalisen ryhmittelyn lisäksi valintaruutuja tai valintapainikkeita käytettäessä kontrollien ryhmittelijöinä. Näin yhden kontrollin tilan muuttuminen voi vaikuttaa muiden ryhmän kontrollien tilaan.

18 60 Valintaikkunat ja kontrollit KUVA 3.14 Kontrollien ryhmittäminen selkeyttää valintaikkunaa. 4. Muuta ryhmäkehyksen otsikoksi Analysis. 5. Valitse työkaluriviltä Check Box kontrolli. 6. Lisää neljä näitä valintaruutuja ryhmäkehyksen sisään, kuten kuvassa 3.15 on tehty. KUVA 3.15 Kontrollien sijoittaminen ryhmäkehykseen. Usean valintaruudun lisääminen Joudut valitsemaan valintaruudun työkaluriviltä jokaiselle lisättävälle valintaruudulle erikseen. 7. Muokkaa valintaruutujen tekstejä mieleiseksesi. Valittuasi ruudun ala kirjoittaa ja tekstisi päivittyy Properties-ikkunan Captionruutuun sekä muokkaamaasi ikkunaan. 8. Sijoita kontrollit siististi ryhmäkehyksen sisään. Tässä luvussa on aiemmin käsitelty niiden koon muuttamista sekä reunojen tasaamista. KATSO MYÖS Luvusta 4 ryhmäkehysten käyttöä valintapainikkeiden (radio button) kanssa.

19 OSA II LUKU 3 61 Sarkainjärjestyksen asettaminen Valintaikkunan kontrolleja voidaan selata näppäimistöltä sarkainnäppäimellä eteenpäin ja vaihto + sarkainnäppäimellä taaksepäin. Voit määrittää kontrollien järjestyksen tässä toiminnassa. Kun kontrolli tulee valituksi, se tulee syötteen vastaanottajaksi eli saa näppäimistöfokuksen. Tämä näkyy esimerkiksi painikkeella ylimääräisenä katkoviivareunana sen sisällä. Jos et halua tiettyä kontrollia mukaan sarkaimella selattavaksi, voit poistaa kontrollin Properties-ikkunan General-välilehdellä Tab Stop valinnan. Valintaikkunan kontrollista toiseen siirtyminen Sarkainjärjestys tarkoittaa järjestystä, jossa sarkainpainikkeella (-> ) päästään valitsemaan aktiiviseksi valintaikkunan seuraava kontrolli. Ainoastaan yksi kontrolli kerrallaan voi saada käyttäjän syötteen. Sarkainjärjestyksen määrittäminen valintaikkunalle 1. Valitse Layout-valikosta Tab Order. Muokattavaan valintaikkunaan ilmestyy kontrollin viereen sen järjestysnumero sarkainvalinnassa (kuva 3.16). KUVA 3.16 Kontrollien sarkainjärjestyksen muuttaminen. 2. Napauta ensimmäiseksi aktivoitavaa kontrollia ja sen viereen ilmestyy numero Napauta seuraavia kontrolleja haluamassasi järjestyksessä ja sen vieressä oleva numero ilmaisee kontrollin paikan sarkainselauksessa. 4. Voit tarkistaa sarkainnäppäimen vaikutuksen valitsemalla Layout-valikosta Test tai näppäilemällä Ctrl+T. Sen jälkeen voit käydä läpi ikkunan kontrollit sarkainnäppäimellä. Testitilassa valintaikkunasi käyttäytyy aivan kuin sovelluksessa ikkunan toiminnan varmentamista varten. Pääset takaisin muokkaustilaan Escnäppäimellä.

20 62 Valintakirjaimet Valintakirjain (mnemonic) on valikon tai kontrollin tekstissä oleva alleviivattu kirjain, jolla kyseinen kontrolli voidaa valita näppäimistöpikavalintana. Pikavalinta aktivoidaan näppäilemällä Alt-näppäin ja kyseinen kirjain yhtäaikaa. Resurssieditorissa valintakirjaimet määritellään sijoittamalla niiden eteen &-merkki. Valintaikkunat ja kontrollit Näppäimistöpikavalintojen asettaminen Näppäinpikavalinta, jolla kontrolli valitaan näppäimistöltä, määritetään lisäämällä kontrollit otsikkotekstiin &-merkki ennen pikavalintakirjainta. Jos painikkeen otsikko (caption) on esimerkiksi E&xit, näkyy painikkeessa teksti Exit ja painiketta voidaan painaa näppäilemällä Alt+X tai Alt+x (Alt ja x näppäin yhtä aikaa). Jos usealle ikkunan kontrollille on määritetty sama näppäimistöpikavalinta, tulee sarkainjärjestyksessä ensimmäinen valituksi. Sekaannuksen välttämiseksi voit tarkistaa resurssieditorilla kaksoismääritykset. Tämä tehdään pikavalikon komennolla Check Mnemonics. Ellei pikavalintojen kaksoismäärityksiä ole, saat viestin No duplicate mnemonics found, jos on, voit valita kyseiset kontrollit aktivoitaviksi tilanteen korjaamista varten. KATSO MYÖS Lisää näppäimistöpikavalinnoista luvusta 5.