VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 193
9. ÓRA Menük és eszköztárak használata az ablakokon A lecke tartalmából: • • • • • • • •
Menüpontok beillesztése, áthelyezése és törlése Kapcsoló menüpontok A menüprogramozás rejtelmei Helyi menük használata Billentyûparancsok hozzárendelése mûveletekhez Eszköztárelemek létrehozása Eszköztárgombok és elválasztók Állapotsor készítése
A Windows talán legjelentõsebb érdeme, hogy grafikus felületekkel segíti a felhasználókat, akik így kapcsolatba léphetnek a programokkal, illetve könnyebben eligazodhatnak a lehetõségek között. A grafikus eszközök bõsége ellenére továbbra is számos felhasználó ragaszkodik a billentyûzet használatához, és csak akkor nyúl az egérért, ha
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 194
194 II. rész • A felhasználói felület felépítése
erre elengedhetetlenül szükség van. Sõt, akik kifejezetten adatbevitellel foglalkoznak, munkájuk során nem is veszik le kezüket a billentyûzetrõl, ezért nem ritka, hogy a programfejlesztõ cégek dühödt hívások százait kapják egyes termékeikkel kapcsolatban, ha egy fontos lehetõség csak egérrel érhetõ el. A program lehetõségeit a billentyûzetrõl legegyszerûbben a menük segítségével érhetjük el – ennek ismeretében nagyszerû hír, hogy a Visual Basic 2005-ben a menük készítése egyszerûbb, mint valaha. Ebben a leckében megtanuljuk, hogyan építsük fel, módosítsuk és programozzuk alkalmazásaink menüit, emellett a ToolStrip vezérlõ kapcsán megismerkedünk az eszköztárak lehetõségeivel, végezetül pedig azt is megtudjuk, hogyan helyezhetünk állapotsort egy ablakra.
Menük felépítése Amikor arról írtam, hogy a Visual Basic 2005-ben a menük készítése egyszerûbb, mint valaha, nem túloztam. Az új változat menüprogramozási lehetõségei valóban messze túlmutatnak a korábbi kiadásokén. Nem tudom eleget hangsúlyozni, milyen fontos, hogy jól használható menüket készítsünk – és most, hogy a feladat ilyen egyszerû, nincs mentség a lustaságra. Egy alkalmazás elsõ futtatásakor sok felhasználó végigfut a menükön, mielõtt egyáltalán kinyitná a használati utasítást. (A legtöbben egyébként végül ki sem nyitják.) Ezért, ha a menük lefedik az elérhetõ lehetõségek többségét, a program használatának elsajátítása is könnyebbé válik.
A legfelsõ szintû menüpontok létrehozása Más felületi elemekhez hasonlóan a menüket is egy vezérlõ alakjában helyezhetjük el az ablakon – e vezérlõ neve MenuStrip (menüsor). Érdekessége többek között abban áll, hogy ez az általam ismert egyetlen olyan vezérlõ (no persze a hamarosan terítékre kerülõ helyi menü mellett), amely a futásidõben láthatatlan vezérlõk (ide tartozik például a Timer) között kapott helyet, mégis feltûnik az ablakokon. Kezdetnek haladjunk végig az alábbi lépéseken: 1. A következõkben a Picture Viewer projektnek a 8. leckében elkészített változatát folytatjuk, így hát nyissuk meg ezt a fájlt. 2. Kattintsunk duplán a Solution Explorerben az frmViewer.vb lehetõségre a projekt fõablakának megjelenítéséhez. 3. Szükségünk lesz némi helyre az ablak tetején, ezért adjuk az ablak SizeHeight tulajdonságának a 375 értéket. 4. Módosítsuk a PictureBox vezérlõ Location tulajdonságát 8,52-re, Size tulajdonságát pedig 282,279-re.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 195
9. óra • Menük és eszköztárak használata az ablakokon 195
5. Most jelöljük ki az ablak összes vezérlõjét a képmezõn kívül, a kerettel, vagy a SHIFT lenyomása mellett rájuk kattintva. Ne feledkezzünk meg az X és az Y címkékrõl sem. Ha elkészültünk, ragadjuk meg, és húzzuk el a Select Picture gombot, amíg a teteje egy vonalba nem kerül a képmezõ tetejével. (Ha sikerült a kijelölés, a többi vezérlõ is vele mozog.) Az ablak most úgy fest, mint a 9.1. ábra ablaka.
9.1. ábra Szükségünk lesz némi helyre a menük és az eszköztárak számára az ablak tetején
6. Kattintsunk az eszközkészlet MenuStrip elemére – ezzel új menüsort helyezünk el az ablakon –, és módosítsuk a nevét mnuMainMenu-re. Látható, hogy a vezérlõ a tervezõablak alján látható szürke sávba kerül. De pillantsunk fel az ablak tetejére is – itt a Type Here (ide írjon) felirat tûnik fel (lásd a 9.2. ábrát).
9.2. ábra Amikor egy menüt az ablakra helyezünk, még nincsenek menüpontjai
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 196
196 II. rész • A felhasználói felület felépítése
7. Kattintsunk a Type Here feliratra, írjuk be az &File szöveget, majd nyomjunk ENTER-t. Ahogy gépelni kezdünk, a Visual Basic két újabb Type Here feliratú mezõt jelenít meg (lásd a 9.3. ábrát).
9.3. ábra Ha új menüpontot hozunk létre, a vezérlõ automatikusan felkészül továbbiak fogadására
Vessünk egy pillantást a Properties ablakra (ha nem látjuk, az F4 lenyomásával elõhozhatjuk). Nem kell meglepõdnünk, hiszen az elõbb beírt szöveg egy új menüpontot teremtett, a menüpontok objektumok, az objektumok pedig tulajdonságokkal rendelkeznek. Új menünknek a Visual Basic alapértelmezés szerint a FileToolStripMenuItem nevet adja, ami hosszú, de most megteszi. Elmélázhatunk azon, miért is kellett az & jelet a File szó elé írnunk. Nézzünk rá a menüre, és azonnal megértjük, mi a helyzet – az & jel nem látszik, a felirat elsõ F betûje azonban aláhúzva jelenik meg. Az & jel szerepe a menüpontok Text tulajdonságában annyiban áll, hogy aláhúzza a közvetlenül utána következõ karaktert. A legfelsõ szintû menüpontoknál, mint esetünkben a File, ezt az aláhúzott karaktert gyorsbillentyûnek (accelerator key) nevezik, mert ezt a billentyût az ALT mellett lenyomva a megfelelõ menübe jutunk, mintha csak rákattintottunk volna. Fontos, hogy ne rendeljünk azonos gyorsbillentyût két legfelsõ szintû menüponthoz. Ha a menüpontok elsõ karakterei megegyeznek, más karaktert is használhatunk gyorsbillentyûként, csak írjuk elé az & jelet (így például használhatjuk a File menüben a F&ile kódot is). Ha menüpontunk egy lenyíló menüben jelenik meg (vagyis nem a legfelsõ szinten), az aláhúzott karakter neve billentyûparancs (hotkey). Ha egy menüt megnyitottunk, a felhasználónak egyszerûen csak ezt a billentyût kell megnyomnia a megfelelõ menüpont választásához. Azonos billentyûparancsokat sem ajánlatos használnunk ugyanazon menün belül. 8. Kattintsunk a File mellett megjelenõ Type Here feliratra, írjuk be az &Tools szót, és nyomjunk ENTER-t. A Visual Basic hirtelen két újabb Type Here feliratú mezõt ad, éppúgy, mint a File esetében. Új menüpontok hozzáadásához tehát nem kell mást tennünk, mint a megfelelõ Type Here mezõkre kattintanunk és beírni a kívánt feliratokat.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 197
9. óra • Menük és eszköztárak használata az ablakokon 197
Ha egy meglevõ menüpont alatti Type Here feliratra kattintunk, az új menüpontot abba a menübe illesztjük be, amelyikben a felette levõ menüpont áll. Ha egy menüponttól jobbra található Type Here feliratra kattintunk, új menüpontunk egy almenübe kerül, amelyet a tõle balra álló menüponttal hívhatunk majd elõ. Végül pedig – mint azt már láthattuk –, ha a menüsoron kattintunk egy Type Here mezõre, új, legfelsõ szintû menüponthoz jutunk.
Új menüpontok létrehozása a legfelsõ szintû menükhöz Annyi menüt készíthetünk, amennyi csak ráfér az ablakra, de Picture Viewer projektünk számára a File (fájl) és a Tools (eszközök) éppen megteszi. A következõ lépés, hogy a menüket menüpontokkal töltsük fel – ezt tesszük a következõkben: 1. Kattintsunk még egyszer a File menüpontra az alatta levõ Type Here feliratú mezõ megjelenítéséhez. Kattintsunk rá erre, majd írjuk be az &Open Picture… szöveget, és nyomjunk ENTER-t. 2. Adjuk új elemünknek az mnuOpenPicture nevet. (Ahhoz, hogy tulajdonságai megjelenjenek a Properties ablakban, a kijelöléshez újfent a menüpontra kell kattintanunk.) 3. Kattintsunk az Open Picture menüpont alatt található Type Here mezõre, írjuk be az &Quit szöveget, és nyomjunk ENTER-t. Adjuk új menüpontunknak az mnuQuit nevet. Ezen a ponton érdemes lemezre menteni munkánkat, ezért kattintsunk az eszköztár Save All gombjára. 4. Kattintsunk most a Tools menüre, így jobbra tõle és alatta egy-egy Type Here mezõt kapunk. Kattintsunk ez utóbbira, és írjuk bele az &Draw Border szöveget, majd nyomjunk ENTER-t. Új menüpontunknak a tulajdonságok között adjuk az mnuDrawBorder nevet. 5. Menjünk az egérmutatóval a Draw Border menüpont alatti Type Here mezõhöz, és tartsuk felette pár pillanatig. Eredményképpen egy lenyíló lista nyilához jutunk. Kattintsunk rá, és válasszuk a lista Separator (elválasztó) elemét (lásd a 9.4. ábrát). Ebben a lenyíló listában azt határozhatjuk meg, milyen típusú elemet szeretnénk elhelyezni a menüben. Választhatunk egyszerû menüpontot, kombinált listát, szövegmezõt, vagy, mint esetünkben, elválasztót, amellyel határt húzhatunk a menü különbözõ típusú elemei között. 6. A Separator választását követõen egy vonal jelenik meg a Draw Border menüpont alatt, de feltûnik egy új Type Here mezõ is. Kattintsunk rá, és írjuk be az &Options… szöveget, majd nyomjunk ENTER-t. Új menüpontunknak adjuk az mnuOptions nevet. 7. A menü szerkesztésének befejezéséhez kattintsunk a képmezõre vagy valamelyik másik vezérlõre.
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 198
198 II. rész • A felhasználói felület felépítése
9.4. ábra Menüinkben a hagyományos menüpontok mellett elhelyezhetünk szövegmezõket, kombinált listákat, vagy éppen elválasztókat is
Menüpontok áthelyezése és törlése A menüpontok áthelyezése és törlése még létrehozásuknál is egyszerûbb. A törléshez csak kattintsunk a menüpontra jobb gombbal, és válasszuk a helyi menü Delete (törlés) pontját. Az áthelyezéshez ragadjuk meg a menüpontot, és húzzuk át a kívánt helyre.
Kapcsoló menüpontok készítése Ha egy menüpont nem egy almenühöz vezet, elhelyezhetünk mellette egy jelölõnégyzetet. Ez olyan esetekben jó megoldás, ha menüpontunk egy állapotot jelenít meg, ami lehet be- vagy kikapcsolt. A következõkben magunk is létrehozunk egy ilyen menüpontot. Emlékezzünk vissza a 8. leckében az Options ablakra helyezett jelölõnégyzetre, amellyel a felhasználó meghatározhatta, hogy szüksége van-e egy figyelmeztetõ ablakra a program bezárása elõtt. Nos, most ezt a lehetõséget egy menüponton keresztül is elérhetõvé tesszük. 1. Kattintsunk a File menüre, hogy megnyissuk. 2. Kattintsunk a Quit menüpont alatti Type Here mezõre, írjuk be a Confirm on Exit szöveget, és nyomjunk ENTER-t. Új menüpontunknak adjuk az mnuConfirmOnExit nevet a Properties ablakban. 3. Kattintsunk jobb gombbal a Confirm on Exit menüpontra, és válasszuk a helyi menü Checked (kapcsoló) pontját (lásd a 9.5. ábrát). Ha a kapott menü eltér a 9.5. ábrán láthatótól, kattintsunk egy másik menüpontra, majd kattintsunk ismét
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 199
9. óra • Menük és eszköztárak használata az ablakokon 199
jobb gombbal a Confirm on Exit pontra. Ezt a beállítást elvégezhetjük úgy is, ha a kiválasztott menüpontra kattintunk, majd a Properties ablakban megváltoztatjuk annak Checked tulajdonságát. 4. Ragadjuk meg a Confirm on Exit menüpontot, és húzzuk a Quit fölé. Ha mindent jól végeztünk, a menü úgy fest, mint a 9.6. ábrán látható.
9.5. ábra A menüpontok állapotjelzésre is alkalmasak
9 9.6. ábra A menüpontok állapotjelzésre is alkalmasak
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 200
200 II. rész • A felhasználói felület felépítése
Futtassuk a projektet az F5 billentyûvel. A menü pontosan abban az alakban jelenik meg az ablakon, ahogy a tervezõben is láthattuk (9.7. ábra). Nyissuk meg a File menüt, és kattintsunk a Quit pontra – semmi nem történik! Akkor sem kapunk több megértést, ha a Confirm on Exit menüpontra kattintunk – állapota az eredetiben marad. Bizony, a java még hátravan – meg kell írnunk a kódot, ami mûködésre készteti a menüpontokat (és megváltoztatja a jelölõnégyzet állapotát).
9.7. ábra A menük a program futása közben pontosan ugyanolyan alakban jelennek meg, mint a tervezés során
Állítsuk le a projekt futását, és mentsük lemezre munkánkat.
Menüprogramozás Az egyes menüpontok önálló objektumok – ha rájuk kattintunk, tulajdonságaikat a Properties ablakban szerkeszthetjük. Szigorú értelemben véve nem vezérlõk ugyan, háttérkódot azonban ugyanúgy írhatunk hozzájuk, mint az eddig megismert vezérlõkhöz. A következõkben éppen ezt tesszük majd, életet lehelve az eddig tetszhalott menüpontokba. Kódunk elkészítéséhez kövessük az alábbi lépéseket: 1. Kattintsunk a File menüre a megnyitáshoz. 2. Kattintsunk duplán az Open File menüpontra. A vezérlõkhöz hasonlóan a Visual Basic itt is az alapértelmezett eseményt – ami ez esetben a Click – jeleníti meg a kódszerkesztõben.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 201
9. óra • Menük és eszköztárak használata az ablakokon 201
3. Írjuk be az alábbi kódot: 'Megjeleníti a fájlmegnyitási párbeszédablakot If ofdSelectPicture.ShowDialog = DialogResult.OK Then 'Betölti a képet a képmezõbe picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName) 'Megjeleníti a fájl nevét az ablak címsorában Me.Text = "Picture Viewer(" & ofdSelectPicture.FileName & ")" End If
Ha visszalapozunk az 1. leckéhez, láthatjuk, hogy pontosan ezt a kódot rendeltük a Select Picture gombhoz, úgyhogy most nem foglalkozunk vele részletesebben. 4. Kattintsunk duplán a Solution Explorerben az frmViewer.vb lehetõségre, így visszajutunk a Picture Viewer ablakhoz a tervezõben. 5. Kattintsunk duplán a Confirm on Exit menüpontra a Click esemény megjelenítéséhez. Írjuk be itt a következõket: mnuConfirmOnExit.Checked = Not(mnuConfirmOnExit.Checked)
Kódunk átállítja a menüpont kapcsolóját, ha a felhasználó rákattint a menüben. A Not() függvény a logikai (igaz vagy hamis) értékek negálását végzi. Ne aggódjunk, ha ezekkel a fogalmakkal még nem vagyunk tisztában – minderrõl részletesen szólunk a 12. fejezetben. Jelenleg elég annyit tudnunk, hogy ha a Checked tulajdonság értéke True, a Not() a False értéket adja vissza, míg ha a tulajdonság értéke False, a Not() True-val tér vissza. Mindennek eredményeképpen a Checked tulajdonság a True és False értékek között vált, mindahányszor a felhasználó a menüpontra kattint. 6. Kattintsunk most ismét duplán a Solution Explorerben az frmViewer.vb lehetõségre, így visszajutunk a Picture Viewer ablakhoz a tervezõben. 7. Kattintsunk duplán a Quit menüpontra a Click esemény megjelenítéséhez, és írjuk be az alábbi kódot: Me.Close()
Emlékezzünk vissza ismét az 1. leckében tanultakra: ott láthattuk, hogy ez az utasítás egyszerûen bezárja az alkalmazást, hiszen csak a fõablak van a memóriában. 8. Térjünk vissza ismét az ablaktervezõhöz, majd nyissuk meg a Tools menüt, és kattintsunk duplán a Draw Border menüpontra a Click esemény eléréséhez. Írjuk be ide az alábbiakat: Dim objGraphics As Graphics objGraphics = Me.CreateGraphics objGraphics.Clear(System.Drawing.SystemColors.Control) objGraphics.DrawRectangle(System.Drawing.Pens.Blue, picShowPicture.Left - 1, _ picShowPicture.Top - 1, _ picShowPicture.Width + 1, picShowPicture.Height + 1) objGraphics.Dispose()
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 202
202 II. rész • A felhasználói felület felépítése
Ezt a kódrészletet is láttuk már az 1. leckében, ezért itt nem részletezzük a mûködését. 9. Térjünk vissza az ablaktervezõhöz, kattintsunk duplán az Options menüpontra, és írjuk be az alábbiakat a Click esemény törzsébe: frmOptions.ShowDialog()
Ezzel minden menüpontunk életre kelt – próbáljuk is ki õket: 1. Futtassuk a projektet az F5 billentyûvel, majd nyissuk meg a File menüt az ALT+F billentyûkombináció lenyomásával (ne feledjük, az F gyorsbillentyû). 2. Most kattintsunk a Confirm on Exit menüpontra. A menü bezárul, ha azonban a File feliratra kattintva újra megnyitjuk, láthatjuk, hogy a menüpont állapota kikapcsoltra változott. Ha ismét rákattintanánk, megint bekapcsolhatnánk. 3. Kattintsunk rá minden menüpontra, hogy ellenõrizzük a mûködésüket, a legvégére hagyva a File menü Quit pontját, amellyel bezárjuk a programot. Ha bekapcsoltuk a Confirm on Exit menüpontot, meglepõdve tapasztalhatjuk, hogy a program ennek ellenére sem kérdez semmit, mielõtt kilépne. Nos, ennek az az oka, hogy még nem írtuk meg azt a kódot, ami figyelembe venné ezt a beállítást. Sebaj, a 11. fejezetben erre is sor kerül, az Options párbeszédablak más lehetõségeinek programozása mellett. A menük tervezésekor érdemes megfigyelnünk, miben hasonlítanak, illetve miben térnek el az ismertebb programok menüitõl. Alkalmazásunk természetesen egyedi, tehát menüi sem egyezhetnek meg másokéval, de valószínûleg lesz jó néhány közös pont (Cut, Copy, Paste, Open, hogy csak a leggyakoribbakat említsük). Amikor csak lehetséges, kövessük az ismert programok bevált menüfelépítéseit – ezzel alkalmazásunk használata a többség számára könnyebbé válik, és idõt takaríthatunk meg mind a felhasználó, mind saját magunk számára.
Helyi menük készítése A helyi menük (környezetérzékeny menük) akkor jelenek meg, ha egy objektumra vagy ablakra jobb egérgombbal kattintunk. Jellemzõjük, hogy tartalmuk mindig a kattintás helyéhez igazodik, vagyis olyan menüpontokat kapunk, amelyek mûveletei a kérdéses objektumra sikerrel alkalmazhatók. A Visual Basic legtöbb vezérlõje rendelkezik alapértelmezett helyi menüvel, de egyéni menüösszeállításokat is megadhatunk. A helyi menük létrehozása nem sokban tér el a hagyományos menükétõl, de egy másik vezérlõt kell alkalmaznunk, amelynek neve ContextMenuStrip. A következõ lépésekben egy testreszabott helyi menüt készítünk projektünkhöz.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 203
9. óra • Menük és eszköztárak használata az ablakokon 203
1. Jelenítsük meg az frmViewer.vb ablakot a tervezõben. 2. Kattintsunk duplán az eszközkészlet ContextMenuStrip elemére – ezzel új helyi menüsort helyezünk el az ablakon. A MenuStrip vezérlõhöz hasonlóan a ContextMenuStrip is a tervezõ alján levõ szürke sávba kerül. Változtassuk a nevét mnuPictureContext-re. 3. Ha kijelöljük a ContextMenuStrip vezérlõt, az ablak tetején megjelenik a helyi menü szerkeszthetõ változata. Kattintsunk a Type Here mezõre, írjuk be a Draw Border szöveget (lásd a 9.8. ábrát), és nyomjunk ENTER-t. Íme, máris kész a helyi menü, egyetlen menüponttal.
9.8. ábra A helyi menük szerkesztése nem sokban különbözik a szokásos menükétõl
4. Kattintsunk duplán az új menüpontra, és írjuk be az alábbi kódot a kapott Click esemény törzsébe: Dim objGraphics As Graphics objGraphics = Me.CreateGraphics objGraphics.Clear(System.Drawing.SystemColors.Control) objGraphics.DrawRectangle(System.Drawing.Pens.Blue, picShowPicture.Left - 1, _ picShowPicture.Top - 1, _ picShowPicture.Width + 1, picShowPicture.Height + 1) objGraphics.Dispose()
Igen, ez ugyanaz a kód, amelyet a Draw Border menüpontnál és a Draw Border gombnál is megadtunk. Miért ez a felesleges ismétlés? Nos, a 10. leckében megtanuljuk majd, hogyan oszthatjuk meg a kódokat, elkerülve az ehhez hasonló ismétlõdéseket.
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 204
204 II. rész • A felhasználói felület felépítése
5. Kattintsunk duplán a Solution Explorer ablakban a frmViewer.vb lehetõségre, így visszajutunk a Picture Viewer ablak tervezéséhez. 6. A helyi menü hozzárendelésére a vezérlõk egyik tulajdonsága szolgál. Kattintsunk a képmezõre, hogy kijelöljük, majd adjuk ContextMenuStrip tulajdonságának az mnuPictureContext értéket, és képmezõnk máris egy helyi menüvel büszkélkedhet. 7. Futtassuk a projektet az F5 billentyûvel, és kattintsunk jobb gombbal a képmezõre. A 9.9. ábrán látható helyi menüt kapjuk, amelynek egyetlen pontjára kattintva szegélyt rajzolhatunk a kép köré.
9.9. ábra A helyi menük jelentõsen meggyorsíthatják a mûveleteket
8. Állítsuk le a projekt futását, és mentsük lemezre a munkánkat.
Billentyûkombinációk hozzárendelése menüpontokhoz A Microsoft-alkalmazások használata során a legtöbben bizonyára kapcsolatba kerültek már billentyûkombinációkkal. Így például az ALT+P hatása minden olyan alkalmazásban, amely képes a nyomtatásra, megegyezik a File menü Print (nyomtatás) parancsának hatásával. Menüinkhez az alábbiak szerint rendelhetünk billentyûkombinációkat: 1. Nyissuk meg a File menüt az ablak tetején, és kattintsunk az Open Picture menüpontra a kijelöléshez. 2. Válasszuk a ShortcutKeys tulajdonságot a Properties ablakban, majd kattintsunk a megjelenõ kis nyílra. A kapott lenyíló listában beállíthatjuk a menüponthoz rendelt billentyûkombinációt.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 205
9. óra • Menük és eszköztárak használata az ablakokon 205
3. Kapcsoljuk be a Ctrl jelölõnégyzetet, és válasszuk a lenyíló lista O elemét (az Open miatt), majd a lenyíló lista bezárásához kattintsunk egy másik tulajdonságra.
9.10. ábra A menüponthoz a ShortcutKeys tulajdonsággal rendelhetünk billentyûkombinációt
4. Futtassuk a projektet az F5 billentyûvel. Nyomjuk le a CTRL+O billentyûkombinációt, és láthatjuk, hogy a program pontosan úgy viselkedik, mintha a File menü Open Picture pontját választottuk volna. Próbáljunk logikus billentyûkombinációkat alkalmazni, még ha ez olykor nehézségekbe is ütközik. Így például az F6 jelentése nem valami könnyen megfejthetõ, tehát kerüljük a használatát, ha csak lehet. Érdemes módosítóbillentyûket és melléjük valamilyen karaktert választanunk, így lesz némi esély arra, hogy felhasználóink kitalálják a gondolatainkat. A Quit (kilépés) parancsnál például érdemes a CTRL+Q billentyûkombinációt választanunk, a CTRL+T-nek viszont ez esetben semmi értelme. Ha pedig a kérdéses menüpont vagy egy ahhoz igen hasonló már létezik több kereskedelmi alkalmazásban, ajánlatos átvennünk az ott használt billentyûkombinációt. Állítsuk le a projekt futását, és mentsük lemezre munkánkat, mielõtt továbbhaladnánk.
Eszköztárak használata Általában, ha programunk rendelkezik menüvel (ez a legtöbb esetben alapkövetelmény), kell, hogy legyen a felületén eszköztár is. Az eszköztárak (toolbar, illetve a Visual Basic 2005-ben toolstrip) talán a legegyszerûbb módját adják annak, hogy felhasználóink elérjék a program lehetõségeit. A menüpontoktól eltérõen az eszköztárak elemei mindig láthatók, következésképpen azonnal elérhetõk, ráadásul többnyire lebegõ leírásokkal is segítik a felhasználókat, akik így helyben felvilágosítást kaphatnak az adott eszköztárelem mûködésérõl, csak pár pillanatig felette kell tartaniuk az egérmutatót.
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 206
206 II. rész • A felhasználói felület felépítése
Az eszköztárelemek valójában a menüpontok gyors elérését teszik lehetõvé – vagyis minden eszköztárelemhez tartozik menüpont. Az eszköztárak mellett azonban soha nem szabad megfeledkeznünk azokról, akik a billentyûzetet részesítik elõnyben, vagyis a menükben elérhetõ lehetõségekhez számukra is biztosítanunk kell billentyûkombinációkat. Az, hogy pontosan milyen elemeket helyezünk az eszköztárakra, az alkalmazás lehetõségeitõl függ. Az eszköztárak és eszköztárelemek létrehozásának módja azonban minden esetben megegyezõ – mûveleteink alapja itt a ToolStrip vezérlõ. Az alábbiakban egy eszköztárat helyezünk el a Picture Viewer projekt fõablakán: 1. Jelenítsük meg az frmViewer.vb ablakot a tervezõben (ha eddig még nem tettük volna). 2. Kattintsunk duplán az eszközkészlet ToolStrip elemére, így ablakunk tetején egy új eszköztár jelenik meg. Adjuk az új vezérlõnek a tbrMainToolbar nevet, és vessük össze az eredményt a 9.11. ábrával. 3. Figyeljük meg, hogy az eszköztár a menü felett jelenik meg. Ugyanakkor, aki már akár egyetlen Windows-alkalmazást is használt, tudhatja, hogy az eszköztárak a menük alatt szoktak feltûnni. Kattintsunk hát jobb gombbal az eszköztárra, és válasszuk a helyi menü Bring To Front (elõtérbe hozás) pontját, így az eszköztár a menü alá kerül.
9.11. ábra Új eszköztárunk alapértelmezés szerint az ablak tetején jelenik meg, és egyetlen gombot sem tartalmaz
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 207
9. óra • Menük és eszköztárak használata az ablakokon 207
Eszköztárgombok beillesztése az Items gyûjteménnyel Több, a korábbiakban megismert vezérlõhöz hasonlóan a ToolStrip is rendelkezik egy rá jellemzõ gyûjteménnyel – ennek neve Items, feladata pedig az eszköztáron megjelenõ gombok tárolása. Válasszuk hát az Items tulajdonságot a Properties ablakban, majd kattintsunk a megjelenõ kis gombra, így az Items Collection Editor ablakra jutunk. Az elemek listáján csak maga az eszköztár szerepel – gombok még nincsenek. Három képet helyezünk el az eszköztáron, az Open, a Draw Border és az Options menüpontok számára. A képek letölthetõk a szerzõ webhelyérõl, a www.jamesfoxall.com/books.html címrõl. Idõzzünk el egy pillanatra a bal felsõ sarokban látható lenyíló listánál, amely az eszköztáron elhelyezhetõ elemek típusait tartalmazza (9.12. ábra).
9.12. ábra Az eszköztárak elemei különbözõ típusúak lehetnek
Példánkban csak gombokat és elválasztókat használunk, de egy másik projektben nyugodtan eljátszadozhatunk a többi típussal. Kövessük az alábbi lépéseket: 1. Válasszuk a lenyíló lista Button (gomb) elemét, és kattintsunk az Add gombra az új gomb létrehozásához. Tulajdonságait állítsuk be a következõk szerint:
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 208
208 II. rész • A felhasználói felület felépítése
Tulajdonság
Érték
Name Text TooltipText
tbbOpenPicture Open Picture Open Picture
2. Válasszuk a gomb Image tulajdonságát, és kattintsunk a megjelenõ Build gombra. Itt kattintsunk az Import gombra, majd keressük meg és töltsük be az Open menüponthoz tartozó képet. Ha nem találjuk, könnyen lehet, hogy a böngészõ szûrõje kizárja az ikonokat, ez esetben válasszuk az Open (megnyitás) párbeszédablak Files of Type (fájltípus) lenyíló listájának All (minden fájl) pontját. 3. Az OK gombra kattintva mentsük a képet a gomb beállításai közé. 4. Kattintsunk az Add gombra egy újabb gomb készítéséhez, tulajdonságait pedig állítsuk be az alábbiak szerint: Tulajdonság
Érték Name tbbDrawBorder Text Draw Border TooltipText Draw Border 5. Válasszunk a Draw Border gomb Image tulajdonságának egy képet. 6. Kattintsunk az Add gombra harmadik gombunk elkészítéséhez. Tulajdonságait állítsuk be az alábbiak szerint: Tulajdonság
Érték tbbOptions Options Options 7. Válasszunk az Options gomb Image tulajdonságának egy képet. Name Text TooltipText
Elkészültek hát eszköztárunk gombjai, egy apró részletre azonban még érdemes odafigyelnünk. A gyakorlott tervezõk az eszköztárgombok összetartozó csoportjait elválasztókkal különítik el egymástól. Ne gondoljunk itt semmi ördöngösségre – az elválasztók egyszerû függõleges vonalak a gombok között. Három gombunk között nincs különösebb kapcsolat, így hát elválasztjuk õket egymástól. Lássuk, hogyan: 1. Válasszuk a lenyíló lista Separator pontját, és kattintsunk az Add gombra. Az elválasztó ezzel a lista aljára kerül. Most kattintsunk kétszer a lista jobb oldalán található felfelé mutató nyílra, így az elválasztót az Open és a Draw Border gomb közé helyezzük. 2. Kattintsunk ismét az Add gombra, majd ezúttal egyszer a felfelé mutató nyílra, így az újabb elválasztó a Draw Border és az Options gomb közé kerül. 3. Kattintsunk az OK gombra az eszköztár beállításainak mentéséhez. Ha mindent jól végeztünk, ablakunk úgy fest, mint a 9.13. ábrán látható minta.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 209
9. óra • Menük és eszköztárak használata az ablakokon 209
9.13. ábra Az eszköztár felülete elkészült, már csak némi kód kellene a mûködéséhez
Az eszköztárelemeket a menüpontokhoz hasonló módszerrel is elhelyezhetjük a ToolStrip vezérlõn, az alapértelmezésben megjelenõ gomb segítségével. Azért döntöttem mégis az Items Collection Editor használata mellett, hogy megmutassam, hogy egy feladat megoldására gyakran több mód is kínálkozik.
Eszköztár-programozás Az eszköztárak programozása nem tér el sokban a menüknél látottaktól. Láthatjuk majd, hogy a Microsoft komoly erõfeszítéseket tett annak érdekében, hogy szabványosítsa a lehetõségeket. Így például a .NET elõzõ kiadásában az eszköztárak kezeléséhez egy Toolbar nevezetû vezérlõ állt rendelkezésre, egy Buttons nevû gyûjteménnyel. A 2005ös változatban a Toolbar vezérlõ helyét a ToolStrip vette át, amely az Items gyûjteményt használja. Ugye ismerõs az Items név? Igen, a TreeView és a ListView vezérlõknél is ezt láttuk. A háttérben az a gondolat áll, hogy ha megtanuljuk egy vezérlõ Items gyûjteményének kezelését, más vezérlõknél már könnyebb dolgunk lesz. A következõkben életet lehelünk az eszköztárunkba: 1. Kattintsunk duplán az Open gombra a Click esemény eléréséhez. Vigyázzunk, nehogy magára az eszköztárra kattintsunk, ilyenkor ugyanis egészen más eseményhez jutunk. Írjuk be az alábbi kódot:
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 210
210 II. rész • A felhasználói felület felépítése
'Megjeleníti a fájl-megnyitási párbeszédablakot If ofdSelectPicture.ShowDialog = DialogResult.OK Then 'Betölti a képet a képmezõbe picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName) 'Megjeleníti a fájl nevét az ablak címsorában Me.Text = "Picture Viewer(" & ofdSelectPicture.FileName & ")" End If
2. Kattintsunk duplán a Solution Explorerben az frmViewer.vb elemre, így visszajutunk a tervezõhöz. 3. Kattintsunk duplán a Draw Border gombra a Click esemény megjelenítéséhez. Írjuk be itt a következõket: Dim objGraphics As Graphics objGraphics = Me.CreateGraphics objGraphics.Clear(System.Drawing.SystemColors.Control) objGraphics.DrawRectangle(System.Drawing.Pens.Blue, picShowPicture.Left - 1, _ picShowPicture.Top - 1, _ picShowPicture.Width + 1, picShowPicture.Height + 1) objGraphics.Dispose()
6. Kattintsunk duplán a Solution Explorerben az frmViewer.vb lehetõségre, így visszajutunk a tervezõhöz. 7. Kattintsunk duplán az Options gombra a Click esemény megjelenítéséhez, és írjuk be az alábbi kódot: frmOptions.ShowDialog()
Mentsük lemezre a munkánkat, és a projekt futtatásához nyomjuk le az F5 billentyût. Ha mindent jól csináltunk, az eszköztár gombjaira kattintva ugyanazokat a mûveleteket hajthatjuk végre, mint a megfelelõ menüpontokkal. Megint sok a kódismétlõdés, de a 10. leckében megtanuljuk majd, hogyan oszthatjuk meg a kódot a vezérlõk között.
Eszköztárgombok lenyíló menükkel Érdemes tudnunk, hogy eszköztárainkon lenyíló menüket is elhelyezhetünk, noha jelenlegi projektünkben nem használunk ilyeneket. Amint a 9.14. ábrán láthatjuk, a Visual Basic tervezõkörnyezete is kihasználja ezt a lehetõséget. Ahhoz, hogy ilyen menüt készítsünk, az eszköztáron a hagyományos gomb (Button) helyett lenyíló gombot (DropDownButton) kell elhelyeznünk. Ezzel egy ugyanolyan almenüt kapunk az eszköztáron, mint amilyet a menüknél megismerhettünk.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 211
9. óra • Menük és eszköztárak használata az ablakokon 211
9.14. ábra Ehhez hasonló lenyíló menüket saját programjainkban is alkalmazhatunk
Állapotsor készítése Utolsóként bemutatott vezérlõnk, amely az állapotsor névre hallgat, megközelítõleg sem olyan feltûnõ, vagy akár olyan hasznos, mint más fejlett vezérlõk, mondjuk az eszköztár vagy a menüsor (de a használata is jóval egyszerûbb). Az állapotsor azzal járul hozzá az alkalmazás egészéhez, hogy tájékoztatást ad a felhasználónak a felület egy megszokott helyén. Legegyszerûbb alakjában egy feliratból, valamint egy méretezõfogantyúból áll – ez utóbbit kis pontok jelzik a vezérlõ jobb szélén, és húzásukkal a felhasználó megváltoztathatja az ablak méretét. Az állapotsor elhelyezéséhez kattintsunk az eszközkészlet StatusStrip elemére (a Menus & Toolbars kategóriában). Ahhoz, hogy megtekintsük az új vezérlõt, a tervezõablak függõleges gördítõsávja segítségével el kell mennünk az ablak legaljáig. Adjuk az állapotsornak az sbrMyStatusStrip nevet. Mivel pár vezérlõt lehorgonyoztunk az ablakon, az állapotsor némelyiküket eltakarhatja. A helyzeten az alábbiak szerint javíthatunk: 1. Kattintsunk az ablakon levõ képmezõre, és adjuk Size tulajdonságának a 282,264 értéket. 2. Állítsuk át a kép méretét növelõ és csökkentõ gombok Location.Y tulajdonságát 293-ra. Az ablak ez után úgy fest, mint a 9.15. ábrán látható.
9 9.15. ábra Az állapotsor mindig az ablak alján jelenik meg
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 212
212 II. rész • A felhasználói felület felépítése
Pillantsunk most az állapotsor bal szélére. Ismerõs? Nos, meglehetõsen hasonlít ahhoz a felülethez, amellyel menüpontokat adhattunk a menüsorokhoz, illetve gombokat az eszköztárakhoz. Kattintsunk a lenyíló lista nyilára, és válasszuk a Status Label lehetõséget. Egy új címke tûnik fel az állapotsoron, de nem kapja meg automatikusan a fókuszt. Kattintsunk hát rá (jelenleg a ToolTipStatusLabel1 felirat látható rajta), és módosítsuk tulajdonságait az alábbiak szerint: Tulajdonság
Érték
Name Text
pnlStatus no image loaded
Amikor az új címke létrehozásánál megnyitottuk a lenyíló listát, bizonyára feltûnt, hogy másféle elemeket is elhelyezhetünk az állapotsoron. Jelenleg beérjük az egyszerû címkével, a 10. leckében azonban megtanuljuk, hogyan jeleníthetjük meg ugyanitt a betöltött képet. Futtassuk a projektet az F5 lenyomásával, és vigyük az egérmutatót az állapotsor jobb alsó sarkában látható pontok fölé. Az egérmutató méretezõnyíllá alakul – itt megragadva átméretezhetjük az ablakot. Az állapotsor azonban magától nem képes felismerni, ha az ablak szegélye nem méretezhetõ (ha mondjuk FixedSingle vagy FixedToolWindow típusú), ezért a fogantyú elrejtéséhez nekünk kell False-ra állítanunk a SizingGrip tulajdonságot.
Összefoglalás A menük, eszköztárak és állapotsorok jelentõsen gazdagítják programjainkat, megkönnyítve a felhasználó számára a hozzáférést a lehetõségekhez. Ebben a leckében sokat megtudtunk a MenuStrip vezérlõrõl, amellyel alkalmazásaink menürendszereit építhetjük ki. Megtanultuk, hogyan illesszünk be, helyezzünk át, illetve töröljünk menüpontokat, és miként rendeljünk hozzájuk billentyûparancsokat. Megismerkedtünk az eszköztárakkal is, amelyek grafikus formában teszik elérhetõvé az egyes menüpontokat. A ToolStrip vezérlõ kapcsán megtanultuk, hogyan készítsünk eszköztárakat, amelyek bitképeikkel és logikusan csoportosított vezérlõikkel minden felhasználói igényt kielégíthetnek. Végül szót ejtettünk az állapotsor használatáról is, amelynek révén hasznos adatokat közölhetünk a felhasználókkal. Ezeknek a vezérlõknek az alkalmazása alapvetõ fontosságú minden programfelület felépítésében, és jelenlegi ismereteinkkel már magunk is elboldogulunk velük saját alkalmazásainkban.
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 213
9. óra • Menük és eszköztárak használata az ablakokon 213
Kérdezz–felelek K: Elõfordulhat, hogy egy alkalmazásban több ablak is hasonló menüszerkezettel rendelkezik. Valóban szükség van arra, hogy egyenként felépítsük ezeket a menüket? V: Nem feltétlenül. Készítsünk egy MenuStrip vezérlõt a közös elemekkel, másoljuk le, és illesszük be az összes ablakra; az így kapott menüszerkezetet ezután könnyedén kiegészíthetjük a fennmaradó elemekkel. Nem szabad azonban elfelejtenünk, hogy a másolás és beillesztés során a háttérkód nem kerül át az új példányokba. K: Gyakran látni olyan alkalmazásokat, ahol a felhasználó maga szabhatja testre a menüket és az eszköztárakat. Lehetõségünk van erre a Visual Basic menüi és eszköztárai esetében is? V: Nem. Ennek megvalósításához egy külsõ komponenst kell megvásárolnunk, vagy hosszadalmas kódolásba kell bonyolódnunk. Véleményem szerint, ha már ilyen terveink vannak, nem szabad sajnálnunk a pénzt a külsõ komponensre.
Ismétlõ kérdések 1. „Az ablakok menüsorait a ContextMenu vezérlõvel készíthetjük el.” Igaz vagy hamis? 2. Melyik karaktert kell az adott betû elé írnunk, ha gyorsbillentyût szeretnénk belõle készíteni? 3. A menüpont melyik tulajdonságát kell beállítanunk, ha jelölõnégyzetet szeretnénk mellé helyezni? 4. Hogyan adhatunk kódot egy menüponthoz? 5. Melyik gyûjteményben kapnak helyet az eszköztárak elemei? 6. „Az eszköztár minden gombja rendelkezik saját Click eseménnyel.” Igaz vagy hamis? 7. Melyik vezérlõ jelenít meg adatokat a felhasználó számára az ablak alján?
Válaszok 1. 2. 3. 4. 5. 6. 7.
Hamis. A MenuStrip vezérlõt kell használnunk. Az & karaktert. A Checked tulajdonságot. Kattintsunk duplán a menüpontra. Az Items gyûjteményben. Igaz. A StatusStrip (állapotsor) vezérlõ.
9
VB2005_24_09.qxd
12/5/2006
1:31 PM
Page 214
214 II. rész • A felhasználói felület felépítése
Gyakorlatok 1. Hozzunk létre egy új projektet, amelynek felülete egyetlen eszköztárat tartalmaz egy lenyíló gombbal! 2. Találjuk ki, miként jeleníthetünk meg a ToolStrip vezérlõ egyik gombja helyett állapotfeliratot! (Tipp: létezik egy elem az Items gyûjteményben, amelynek kifejezetten ez a feladata.)