Részletes keresés
A kosár jelenleg üres

Könyvhöz tartozó online melléklet

Könyv: Tanuljuk meg a Visual Basic 2005 használatát 24 óra alatt (James Foxall)

Melléklet: Olvasson bele!

9

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 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.

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

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.

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.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 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.6. ábra

A menüpontok állapotjelzésre is alkalmasak

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.

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()

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.

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.

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.

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.

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

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:

Tulajdonság Érték

Name tbbOpenPicture

Text Open Picture

TooltipText 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

Name tbbOptions

Text Options

TooltipText Options

7. Válasszunk az Options gomb Image tulajdonságának egy képet.

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.

 

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:

'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.

 

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.15. ábra

Az állapotsor mindig az ablak alján jelenik meg

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 pnlStatus

Text 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.

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. Hamis. A MenuStrip vezérlőt kell használnunk.

2. Az & karaktert.

3. A Checked tulajdonságot.

4. Kattintsunk duplán a menüpontra.

5. Az Items gyűjteményben.

6. Igaz.

7. A StatusStrip (állapotsor) vezérlő.

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.)

Vissza a könyv részletes adataihoz