Grafikus C# – Windows Forms tanfolyam › 0.1 lecke
Windows Forms · 0.1 lecke
Mi a grafikus felhasználói felület (GUI)?
Egy fájlt megnyitsz, egy gombra kattintasz, vagy beírsz valamit egy mezőbe: mindennap használsz grafikus felületeket. Ebben a leckében megismerjük, miből épülnek fel, és miért könnyítik meg a programok használatát. Kódot most még nem írunk.
A lecke végére
- el tudod magyarázni, mit jelent a felhasználói felület és a GUI;
- felismered egy grafikus program ablakát és legfontosabb elemeit;
- tudod, mire való a Form, a Label, a TextBox és a Button;
- el tudod mondani, hogyan lép kapcsolatba a felhasználó a programmal.
Mielőtt elkezded
Ehhez a leckéhez nem kell programkódot írnod, és nem kell elindítanod a Visual Studiót sem. A tanfolyam egésze viszont a C# alapokra épül, ezért érdemes végigmenned azon is.
A GUI már körülöttünk van
Képzeld el, hogy meg szeretnél nyitni egy fényképet. Megkeresed a fájlt, és rákattintasz az ikonjára. Nem kell utasításokat megjegyezned és begépelned: a program látható elemei segítenek a művelet elvégzésében. Grafikus felülettel nap mint nap találkozol:
Gondold végig!
Melyik alkalmazást használtad ma? Melyik látható elemével indítottál el egy műveletet? Egy gombbal, egy menüvel vagy egy ikonnal? Például: a böngészőben a címsorba írtam, és az Enter megnyomásával, vagy egy gombbal indítottam el a keresést. A telefonon egy ikonra koppintottam az alkalmazás megnyitásához. A lényeg, hogy mindig egy látható elem indította el a műveletet.Egy lehetséges válasz
Mi a felhasználói felület, és mit jelent a GUI?
A felhasználói felület az a része a programnak, amelyen keresztül használjuk: adatokat adunk meg, műveleteket választunk, és megkapjuk az eredményt. Angol neve User Interface, rövidítése UI.
A grafikus felhasználói felület (angolul Graphical User Interface, röviden GUI) ablakokat, gombokat, menüket, ikonokat és más látható elemeket használ a kapcsolattartáshoz.
Nem minden felhasználói felület grafikus. Léteznek szöveges, parancssori megoldások is, ilyen például a konzolos program. Ezek különbségéről a következő, 0.2 leckében lesz szó.
A GUI nem programozási nyelv
A GUI a program használatának egyik módja. Egérrel, érintéssel vagy billentyűzettel is kezelhető. A program működését később C# nyelven írjuk meg.
Milyen elemeket látunk egy grafikus programban?
Nézzünk meg egy egyszerű köszöntőprogramot! A felhasználó beírja a nevét, megnyom egy gombot, a program pedig kiírja a köszöntést. Először csak a látható felületet figyeljük meg.
A gomb, a felirat és a beviteli mező a Windows Formsban vezérlőelem (angolul control). Ezeket a Form ablakára helyezzük el. Maga a Form az ablak, nem a ráhelyezhető elemek egyike.
Hogyan lép kapcsolatba a felhasználó a programmal?
A grafikus felület lehetővé teszi, hogy a felhasználó a látható elemekkel indítson műveleteket. A köszöntőprogram példájában a folyamat könnyen áttekinthető:
A felhasználó műveletére tehát a program valamilyen választ ad. Azt, hogy a program hogyan ismeri fel a kattintást, és milyen C# kód hajtja végre a köszöntést, később tanuljuk meg az eseményvezérelt programozásnál és az első saját alkalmazásunk elkészítésekor.
Mivel készíthetünk ilyen alkalmazásokat?
A tanfolyamon C# nyelven írt Windows Forms alkalmazásokat fogunk készíteni. Három fogalmat érdemes megkülönböztetned:
Most még nem kell semmit telepítened
Előbb megértjük az alapfogalmakat. A következő leckékben megismerjük a programok működését, a fejlesztőkörnyezetet, majd elkészítjük az első saját projektünket.
Gyakorlat: gondolkodj, aztán ellenőrizd!
Először válaszolj önállóan, majd nyisd le a magyarázatot, és ellenőrizd a gondolatmenetedet.
1. Melyik grafikus felület?
Az alábbiak közül melyik használ grafikus felületet?A) a Windows FájlkezelőjeB) a Parancssor, ahol begépelt utasításokat adunk megC) egy telefonos időjárás-alkalmazás A és C. A Fájlkezelőben ablakokat és ikonokat látunk, a telefonos alkalmazásban érinthető grafikus elemeket. A B példa parancssori kezelés: szöveges utasításokat gépelünk be. Mindkettő felhasználói felület, de nem mindkettő GUI.Megoldás és magyarázat
2. Melyik felületi elemet használnád?
A köszöntőprogramban válaszd ki, melyik felületi elemre van szükség az egyes műveletekhez!• Hová írnád be a nevedet?• Melyik elemmel indítanád el a köszöntést?• Melyik elemen jelenhet meg a program válasza? A nevet a beviteli mezőbe (TextBox) írjuk. A műveletet a gombbal (Button) indítjuk el. A válasz egy feliraton (Label) jelenhet meg. Ezek az elemek mind a program Form ablakában kapnak helyet.Megoldás és magyarázat
3. Tedd helyes sorrendbe!
Milyen sorrendben történnek az események?A) megjelenik a „Szia, Anna!” szövegB) a felhasználó beírja az Anna nevetC) megnyomja a Köszöntés gombot A helyes sorrend: B → C → A. Előbb megadjuk az adatot, utána elindítjuk a műveletet, végül megjelenik a program válasza. Az, hogy a háttérben milyen kód fut, egy későbbi lecke témája.Megoldás és magyarázat
Felülettervezési hiba: mit javítanál?
Hibavadászat
Egy köszöntőprogramban csak egy üres beviteli mező és egy OK feliratú gomb látható. A felhasználó nem tudja, mit kell beírnia, és azt sem, mi történik a gomb megnyomásakor. Milyen két módosítással tennéd egyértelműbbé a felületet?
Lehetséges megoldás
A beviteli mező elé tegyünk egy Label feliratot, például: „Írd be a neved!”. Az OK gomb helyett használjunk beszédesebb feliratot, például: „Köszöntés”. Így a felhasználó már a felület alapján megérti, mit vár tőle a program, és milyen műveletet indít a gomb.
Mini feladat: tervezz egy ablakot papíron
Egy jegyár-kalkulátor ablakát kell megtervezned. A felhasználó megadja az életkorát, megnyom egy gombot, és megkapja a jegy árát. Rajzold le papíron az ablakot, és írd mellé, melyik elem milyen vezérlő lesz (Form, Label, TextBox vagy Button), valamint mit írnál rá. Form: Jegyár-kalkulátor címsorral. Label: „Életkorod:”. TextBox: ide írja be az életkorát. Button: „Számolás”. Label: az eredmény, például „A jegy ára: 1500 Ft”. A Label, a TextBox és a Button mind a Formra kerül.Egy lehetséges terv
Gyakorlótár: 6 további feladat
Ha a fogalmak már ismerősek, itt próbára teheted őket. A feladatok három szinten állnak: alap (felismerés), közepes (alkalmazás) és kihívás (tervezés és értékelés). Mindegyiknél előbb gondolkodj, és csak utána nyisd le a megoldást.
Alap szint
1. Grafikus vagy nem?
Csoportosítsd az alábbiakat: melyik használ grafikus felületet (GUI), és melyik szöveges parancssorost? Fájlkezelő, Parancssor (cmd), böngésző, egy telefon Beállítások alkalmazása, egy olyan program, amelybe begépelt szöveges utasításokat írsz, és egy szövegszerkesztő. GUI: a fájlkezelő, a böngésző, a telefon Beállítások alkalmazása és a szövegszerkesztő, mert ablakokat, ikonokat, gombokat és menüket használnak. Szöveges (parancssori): a Parancssor, és a begépelt utasításokat váró program, mert a felhasználó szöveges parancsokat ír be. Mindkét csoport felhasználói felület (UI), de csak az elsők grafikusak.Megoldás megnyitása
2. Párosítsd az elemeket!
Párosítsd össze a Windows Forms elemeit a szerepükkel. Elemek: Form, Label, TextBox, Button, MenuStrip. Szerepek: (a) a művelet elindítása nyomással, (b) tájékoztató szöveg, (c) az ablak, amelyre a többit helyezzük, (d) adatbevitel, (e) menük gyűjtőhelye. Form → (c), Label → (b), TextBox → (d), Button → (a), MenuStrip → (e).Megoldás megnyitása
Közepes szint
3. Hány vezérlő van az ablakban?
Egy bejelentkező ablakban ezek láthatók: „Felhasználónév:” szöveg, egy beviteli mező, „Jelszó:” szöveg, egy másik beviteli mező, egy „Belépés” gomb, és alul egy piros hibaüzenet. Hány Label, TextBox és Button van az ablakon? 3 Label (a két felirat és a hibaüzenet is felirat), 2 TextBox (a két beviteli mező), 1 Button (a Belépés gomb). Mindez egyetlen Form, vagyis egy ablak elemeként. A hibaüzenet is lehet Label, mert csak szöveget jelenít meg.Megoldás megnyitása
4. Tervezd meg az átlagoló ablakot
Egy ablakban a felhasználó beírja három tantárgy jegyét, megnyom egy gombot, és megkapja az átlagot. Sorold fel, milyen vezérlők kellenek, és milyen feliratot kapnának. Egy lehetséges terv: Form (Átlagoló címsorral); 3 Label (Matematika:, Magyar:, Történelem:); 3 TextBox a jegyeknek; 1 Button (Átlag kiszámítása); 1 Label az eredménynek (például Az átlag: 4,3). Összesen 4 Label, 3 TextBox és 1 Button a Formon. A felirat mindig szóljon arról, mit vár a program, és mit csinál a gomb.Megoldás megnyitása
Kihívás szint
5. Miért rossz ez a felület?
Egy program ablakában tizenkét egyforma gomb van, mindegyiken az OK felirat, és egy üres beviteli mező, amelynek nincs mellette felirat. Írj le négy módosítást, amellyel használhatóbbá tennéd. (1) A gombok kapjanak beszédes feliratot, amely megmondja, mit csinálnak (Mentés, Megnyitás, Törlés). (2) A beviteli mező mellé kerüljön felirat, amely megmondja, mit kell beírni. (3) A fontos gombok (például Mentés) legyenek feltűnőbbek, a ritkábban használtak pedig kevésbé feltűnőek. (4) A kapcsolódó elemek legyenek csoportosítva (például egy menübe vagy egy keretbe), hogy ne legyen tizenkét gomb egy sorban. Jó felületen a felhasználónak a látványból egyértelmű, mit kell tennie és mi fog történni.Megoldás megnyitása
6. Írd le a jegyautomata működését
Egy jegyautomata képernyőjén a felhasználó kiválasztja a jegy típusát, bedobja az összeget, és kinyomtatja a jegyet. Írd le a három lépéses modellel (adatbevitel, művelet, visszajelzés), mi történik, és mi legyen a visszajelzés, ha kevés pénzt dobott be. Adatbevitel: a felhasználó kiválasztja a jegy típusát, és bedobja az összeget. Művelet: megnyomja a Jegy kérése gombot, a program összehasonlítja a beadott összeget a jegy árával. Visszajelzés: ha elég a pénz, a program kiadja a jegyet, és kiírja: Köszönjük!. Ha kevés, nem ad ki jegyet, hanem a képernyőn jól látható üzenetet mutat: Még 200 Ft hiányzik. Az, hogy a program mindig tájékoztassa a felhasználót, a jó felület egyik legfontosabb szabálya.Megoldás megnyitása
Gyors önellenőrzés
Próbáld meg a választ fejben megadni, és csak utána nyisd le. A UI a felhasználói felület általános fogalma. A GUI ennek grafikus változata, amely ablakokat, gombokat és ikonokat használ. Például Label, TextBox és Button. A Form az ablak, amelyre a vezérlőelemeket elhelyezzük. Adatbevitel (a név megadása), művelet (a gomb megnyomása), visszajelzés (a köszöntés megjelenése). A C# a programozási nyelv, a Windows Forms az ablakos alkalmazások technológiája, a Visual Studio pedig a fejlesztőkörnyezet.1. Mi a különbség a UI és a GUI között?
2. Mondj három vezérlőelemet!
3. Mi a Form szerepe?
4. Milyen három lépésből áll a felhasználó és a program kapcsolata a köszöntőprogramban?
5. Mi a C#, a Windows Forms és a Visual Studio?
Mit tudsz már?
- Elmagyarázod, mi a UI és a GUI.
- Felismered egy grafikus program ablakát és elemeit.
- Tudod, mire való a Form, a Label, a TextBox és a Button.
- Le tudod írni a felhasználó és a program kapcsolatát három lépésben.
- Megkülönbözteted a C#-ot, a Windows Formst és a Visual Studiót.
Szakmai forrás: Microsoft Learn – A Windows Forms áttekintése. A további gyakorlati lépéseket külön leckék tárgyalják.
Következő lecke: konzolprogram és eseményvezérelt alkalmazás
Megnézzük, mi irányítja a program futását egy konzolos és egy ablakos alkalmazásban.