Ablak alkalmazások (Forms App)

A feladat szövege

Hozzunk létre egy ablak alkalmazást az alábbiak szerint:

Cím elhelyezése az ablak tetejére, középen. Egy gomb a kilépéshez az ablak jobb alsó sarka közelében. Szöveges beviteli mező az inputhoz + kérdés szöveg + gomb a bevitel lezárásához. Felsorolás doboz egy választék-listából történő kiválasztáshoz. Egy kép a bevitel-kezelő szervek alatt a kilépés gombtól balra. Jelenjen meg egy üzenet (egy MessageBox-ban), ha bármelyik beviteli objektumra (gombra, felsorolt elemek valamelyikére) kattintanak.

Valami ilyesmire gondolok: töltse le és futtassa!

A feladat megoldása

Egy képet letölthet innen is: Husvet.jpg

Új fogalmak:

• Ablak alkalmazás tervezésének/működésének „filozófiája”
• Grafikus elemek – megjelenítő és beavatkozó eszközök
• Grafikus elemek elhelyezése az ablakon – form-tervezés
• Felhasználói beavatkozások – események
• Eseményeket kell programozni – eseménykezelés
• Ablak = Form: GUI (Graphical User Interface)
• Form-tervezés Visual Studio-ban:
• Eszköz-készlet ablak (Toolbox)
• Jellemzők ablaka (Properties)
• Vizuális komponensek (objektumok) elhelyezése a formon
• Objektum-jellemzők: Név (Name), Szöveges tartalom (Text), Méretek (Size), Automatikus méretezés (AutoSize) ... és beállításuk
• Elnevezési szokások – „ránézésre” derüljön ki: miféle objektum, és mi a célja,
  pl. btnKilep_Click – gomb (=button) eseménykezelő, a kilépéshez, ha Click esemény történt a gombon, akkor ez az eseménykezelő éled fel
• Események – eseménykezelő létrehozása:
• Események: rákattintás (Click), megváltozás (Changed), továbblépés (elhagyás) (Leave), fókuszba kerülés (Focused), billentyű lenyomás (KeyDown), vonszolás (DragDrop), méretezés (Resize), újrarajzolás (Paint), ...
• Objektum és eseménykezelő egymáshoz rendelése
  a) az objektumra kattintással (általában a Click eseménynél) vagy
  b) eseményjellemzők közvetlen átírásával
• Eseménykezelő kódolása
• Prompt üzenet a felhasználónak, ideiglenes állapotjelzés fejlesztés közben: MessageBox (MessageBox.Show)
• Legfontosabb vizuális objektumok a formon:
  • Címke (Label)
  • Gomb (Button)
  • Szöveg beviteli mező (TextBox)
  • Választó lista (ListBox)
  • Kép (PictureBox)
• Egy ablak alkalmazás fejlesztése közben keletkező legfontosabb fájlok (a fájlok „főnevei” persze változhatnak):
  • Program.cs – a főprogram (közvetlenül nem szerkesztendő!)
  • FoForm.cs – eseménykezelők és egyéb kiszolgáló függvények
    
  • FoForm.Designer.cs – a form alap paraméterei (közvetlenül nem szerkesztendő!)
  • FoForm.resx – a form-dizájn xml formában (közvetlenül nem szerkesztendő!)

namespace RaszteresAbrakRajzolasa
{
    partial class frmFo
    ...

Kapcsolódó kérdések, feladatok:

(K1) Válaszoljon a kérdésekre:

• Hogyan tudja egy objektum méretét leolvasni, illetve beállítani?
• Hogyan lehet a címet az ablak középére igazítva megjeleníteni?
• A ListBox melyik tagváltozója tárolja a felhasználó által kiválasztott értéket?
• A PictureBox melyik tagváltozója tárolja a képet?
• Hogyan biztosítható legegyszerűbben a kapcsolat több esemény között?
  Gondoljon például a 'név'-bevitelt lezáró gomblenyomás és a 'nem'-kiválasztást jelentő kattintás események között szükséges kapcsolatra. (A kiválasztott 'nem' is, a 'név' is befolyásolja a gomb legfontosabb célját, a MessageBox-ban megjelenő köszöntést.)
• Hogyan akadályozható meg az ablak átméretezése?
• Milyen vastag „alap esetben” a form kerete, illetve a címsor magassága?
• Hogyan lehet a címet úgy beállítani, hogy az ablak futáskori méretváltozását jól kövesse?
• Mikor aktivizálódik a Paint eseménykezelő? Hogyan kaphat választ e kérdésre?

(F1) Készítse el a formot úgy, hogy
a) méretezhető legyen, de a legkisebb méret esetén is minden látszódjon, ami az eredeti állapotában látszódott, és
b) minden rajta lévő kellék logikusan „vándoroljon”, amikor a felhasználó az ablak méretét változtatja!
Kulcs gondolat a b)-hez: „horgonyozza” az ablak megfelelő széléhez az egyes grafikus kellékeket!

(F2) Készítse el a formot úgy, hogy ne lehessen a méretét változtatni!

Kíváncsi az én megoldásomra?
Töltse le a forrás a. változatát és a hozzátartozó teljes projektet, vagy a forrás b. változatát és a hozzátartozó teljes projektet!

A feladat szövege

Az ablak alkalmazás végezze a következőket:

Az ablak rajzolásra kiválasztott része legyen négyzet alakú! Rajzoljon ki egy teljes ablaknyi piros keresztet (középen egymást metsző, függőleges és vízszintes szakasz)! Rajzoljon egy kitöltetlen négyzetet kékkel úgy, hogy az előbb kirajzolt kereszt túllógjon rajta mind a 4 oldalon 2-3 pixellel! Rajzoljon a négyzetbe egy akkora zöld kört, hogy 2-3 pixelnyi rés legyen a négyzet oldalai és a körvonal között.

Valami ilyesmire gondolok: töltse le és futtassa!
Ne lepődjön meg, ha ókor-ókor (mindjárt induláskor) feljön egy üzenetablak! Ez(ek) a „feljövetel(ek)” magyarázatul fog(nak) szolgálni valamire.

A feladat megoldása

Új fogalmak:

• Graphics osztály, amely objektumainak segítségével lehet az ablakba rajzolni vonalas ábrákat:
• Grafikus „al”-osztályok, amelyek példányai:
• Toll (Pen) – vonalrajzoló eszköz
• Ecset (Brush) – felületfestő eszköz
• Szín (Color) – maguk a színek
• Kapcsolódó (de nem leszármazott) osztály a Pont (Point) – a sík pontjai
• Jellegzetes tagfüggvények (grafikus műveletek), tagváltozók:
• Toll (Pen) – DrawLine, DrawRectangle, DrawEllipse
• Ecset (Brush) – FillEllipse...
• Szín (Color) – Color.színNév, Color.FromArgb(redInt,greenInt,blueInt), ahol xxInt=0..255
  Argb ⇐ Alfa+red+green+blue;
  alfa: az átlátszatlanság foka; ha megadható, akkor 0..255 közötti egész szám, 255 esetén a kikevert szín teljes „fényerejű”;
  a fenti függvény esetében nincs alfa paraméter ⇒ teljes „átlátszóság”
• Pont (Point) – Point.X, Point.Y
• A rajzoláshoz kapcsolódó események, amelyekre építhető a rajzoló alkalmazás:
• Load – az ablak betöltődésekor kell a rajzoláshoz esetleg kapcsolódó inicializáló műveleteket végrehajtani (pl. képeket betölteni, ablakméreteket kiolvasni)
• Paint – az ablak újratöltésekor kell sokszor az ábra új változatát kirajzolni
• Refresh – nem esemény; célja az újrarajzolás „kierőszakolása”; tehát „kb.” eseményforrás (a Paint eseményé)

Kapcsolódó kérdések, feladatok:

(K2) Válaszoljon a kérdésekre:

• Van-e jelentősége annak, hogy a rajzolás lépéseit milyen sorrendben hajtja végre?
• Méretezze az ablakot! Mit tapasztal? Hogyan tudná az ablak méretét drasztikusan megnövelni?
• Mi történik a frmFo_Load(sender, e); Refresh(); végrehajtásakor? És ha elhagyja a Refresh();-t?

Kíváncsi az én megoldásomra? Töltse le a forrást és a teljes projektet!

A feladat szövege

Hozzunk létre egy ablak alkalmazást az alábbiak szerint, az ablak tartalmazzon:

egy képet, egy választék-listát a kép milyenségének kijelölésére, egy gombot a kiválasztott képfajta legyártásához, egy gombot a kilépéshez.

Valami ilyesmire gondolok: töltse le és futtassa!

A feladat megoldása

Célszerű az alábbi saját rutinokkal generálni az egyes ábrákat:

• Eljárás Téglalap(Konstans x0,y0,dx,dy:Egész, szín:TSzín):
    [... szín színű pontokkal feltölti a dx×dy méretű és x0,y0 bal felső sarkú téglalapot ... ]
  Eljárás vége.

  Ügyelni kell arra, hogy a téglalap rajzolása közben a képmezőből ki ne lépjünk!

• Eljárás Pepita(Konstans dx,dy:Egész):
    [... váltott szín-párú, dx×dy méretű téglalapokkal feltölti a képmezőt ... ]
  Eljárás vége.

  Ügyelni kell arra, hogy az egyes téglalap-sorok kezdő téglalapja a felette levőtől eltérő színű legyen!
  Ez történhet úgy, hogy
  • külön adminisztráljuk az előző sor első téglalapjának színét, vagy
  • a téglalap-indexeiből számoljuk ki a kívánt színt, vagy
  • az előző téglalap-sorban az adott téglalap fölött kirajzolt téglalap színét kiolvassuk.
    (Ez utóbbi esetben külön ki kell rajzolni az első téglalap-sort, és vigyáznunk kell a színhasonlításra!
    A Color.Red≠bitmap.GetPixel(x,y) még akkor sem, ha korábban bitmap.SetPixel(x,y,Color.Red) hajtottunk végre!
    A Color.Red-del egyezőség-vizsgálatot végezzük így: bitmap.GetPixel(x,y)==Color.FromArgb(/*R:*/255,/*G:*/0,/*B:*/0)!

Töltse le az én megoldásomat: form-kezelés forrása, és a teljes projekt!
Hozzon létre a projektnek egy saját könyvtárat, csomagolja ki a projektet, majd fordítsa le azt! Elemezze!

Új fogalmak:

• pixelgrafikus képeket kezelni (azaz képet pixelenként) csak Bitmap osztálybelit lehet
• konverzió Image (ilyen a PictureBox-beli Image tagváltozóban lévő kép) és Bitmap között: bitmap=(Bitmap)image
• pixelgrafikus kép kezelése – Bitmap osztály két alapvető tagfüggvénye:
  • bitmap.SetPixel(x,y,szín): (x,y) színe legyen szín,
  • bitmap.GetPixel(x,y): (x,y) pont színe
• véletlenszámok – Random osztály; random.Next(): a következő véletlen egész érték

Kapcsolódó kérdések, feladatok:

(K3) Válaszoljon az alábbi kérdésekre:

• Lehet-e egy grafikus ablak-elemet (pl. egy gombot) futás közben létrehozni?
• Mi az értéke a ListBox kiválasztott elemét kijelölő Text, SelectedItem, ill. SelectedIndex tagváltozójának, akkor amikor még nem lett kiválasztva egyetlem eleme sem?
• Hogyan lehet futás közben egy ListBox-beli választék lista elemeit újabbakkal bővíteni?

(F3) Tegye nem átméretezhetővé az ablakot!