Odmah na početku možete pogledati i video iako je lošije rezolucije ,ipak vas može uputit u osnove WinForme.Downloadajte ga pomoću RealPlayera ili sličnog programa i pogledajte ga povećanog,ili jednostavno slušajte engleski i pratite korake ženskog glasa.To je samo da imate mali uvid u formu.
Windows Forme : OSNOVE
Ja sad na samom početku neću objašnjavati koje klase i namespace upotrebljava VS kad nam formira Form1 u CLR-u.To ću malo kasnije objasniti jer želim prvo praktično upoznavanje s stvaranjem jedene aplikacije u CLR- windows formi.Kroz takav praktičan pristup bar ćete se upoznati s okolinom i editorom koda za aplikaciju u CLR-u.Tad ćete i lakše razumjeti i ostalo što budem ,naravno osnove, objašnjavao i tako ćete dobiti uvid u Windows Forme .Meni nije cilj da ulazim u detalje i razrade aplikacija,nego samo usmjeravanje da vidite kako se to radi praktično,takav pristup nisam nigdje našao na hrvatskom, i slikovno!Ako i jesam ,to je bio sami početak ili isuviše komplicirano za početnike.Stoga sam odlučio skupiti s interneta što se može i prikazati to korak po korak u jednostavnim prikazima.Možda će to biti prejednostavno ali neka oni kojima je to besmislica niti ne otvaraju stranicu,to nije niti rađeno za takvu gospodu.
Oni sami mogu sastavljati aplikacije i napisati stotine neobjašnjenih kodova i aplikacija pa se ti snađi(za početnike nemoguće).
Zato kad vam netko kaže kako to nije za vas ,a vi još niste ni započeli pošteno ući u tajne progarmiranja ,ne osvrćite se na komentare jer samo vježbanjem i ponavljanjem dolazite do uspjeha bez obzira znali vi matematiku , logiku ili nijedno od toga.Snaga je u vama a ne u drugima!
Prvo kad otvorite VS ili Expres izdanje VS-a klik na new->project->CLR->Windows Form App..i naravno ime vašeg projekta u Name kućicu!Zatim ,ok i za kratko vrijeme će vam se pokazati vaša početna aplikacija što nije ništa drugo nego Form1!Sad build->build solution,nakon toga debug i start without debug......i eto vašeg prozora.
Sad to pogledajte.
Nasatvak slijedi ,a uporedo s ovim postom ide i CLR programiranje kako sam i započeo,naravno polako jer ndam se da razumijete da je to prilično posla koji želim svima približiti.
Sad malo pobliže samo objasniti okolinu.
S desne strane vamo je toolbox koji ako se ne vidi klik na view i pronađite toolbox i klik i eto vam ga na vidiku.Tu su alati s kojima ćemo raditi u razvijanju aplikacije.Iznad toga vam je dio properties koji sadrži svojstva kao što je pozadina, tekst i slično da sad ne objašnjavam jer kad krenemo s aplikacijom tad ću vam ukorak s time objasniti. S lijeve strane vam je solution explorer koji sadrži sve o vašem projektu po imenu koje ste izabrali. Sad idemo prvu izmjenu napraviti a to je povećati naš prozor .To napravite mišem razvlačeći ga uzduž i poprijeko po želji,gledajte da ne pretjerate.Kad ste to napravili možemo pogledati u svojstvima što smo napravili.Prvo klik(jedan) na naš Form1 i automatski se pojavljuje sve povezano s svojstvima za taj prozor.Malo scrolajte i nađite visinu i širinu prozora i vidjet ćete da uporedo s vašim razvlačenjem mijenjaju se i brojke.Sad možemo promijeniti i ime koje gore stoji(Form1) u ime koje mi želimo dati našoj aplikaciji!
U svojstvima pronađite Text svojstvo i kliknite na njega,zbrišite Form1 i napišite Prozor(ili što vi želite) i automatski se mijenja i ime u kutu vašeg prozora!Naravno ,opet sve build pa build solution i debug pa debug without debug.....i eto sad malo promjenjene vaše aplikacije.Malo proučavajte svojstva tj.pogledajte ,razgledajte a isto tako i toolbox.
Sad ćemo našu aplikaciju početi izgrađivati dodavajući joj elemente a na kraju i funkcionalni kod da bi aplikacija šljakala.Malo po malo. Ovdje odmah ispod vam je slika toolbox,ispod nje solution explorer.
Ime koje sam ja dao je moj_prozor_1:
A ovdje je razvučena aplikacija na koju ćemo dodavati elemente iz toolbox-a:
Naravno prvo ćemo promjeniti ime Form1: gore u tekstu sam objasnio i kako a na slici vidite što sam ja upisao.Također primjetite da se i veličina(size) promjenila kad ste razvlačili prozor.
Kad budete gotovi s tim izmjenama vidite da se ime vašeg Form1 promijenilo i Prozor:
Takva veličina prozora nam treba jer ćemo sad dodavati elemente iz toolbox-a!
Naravno na slici sam već dodao jedan element koji nam služi da dodajemo aplikaciji smisao,nasatavk slijedi. MenuStrip je već dodan na ovoj slici i kad želite pristupiti izmjeni MenuStrip klik na njega i otvara vam se prostor za pisanje.Pročitati dolje.
Ono što sam ja dodao je MenuStrip tako da sam našao u toolbox-u MenuStrip i kliknete dva puta i automatski vam se pojavljuje u dnu na slici taj menu i gore na slici vam se otvara prostor za pisanje menija kakvog želite i svrhe koju vi želite.Naravno prije dvoklika na MenuStrip tool morate samo jedan klik na Form1.h design tj.na vašu formu Prozor da bi program znao da vi MenuStrip kontrolu želite tamo smjestiti!Naravno na slikama je prikazano i gdje morate kucati vaše dizajnerske naslove u kućicu type here.Znači klik na type here i napišite &igraj ,obavezno s znakom adrese jer vi ustvari dodjeljujete s tim znakom i tkz.akcelerator o kojem ćemo malo kasnije.Zatim kursor pomjerite do te kućice,ne ispod, i opet klik i pojaviti će se opet type here i tu utipkajte &granice , i na kraju istim postupkom i &pomoc . Tako da će vam vaš prozor izgledati kao na slici na kojoj su prikazani sva tri gotova menija .Sad ćete vidjeti izmjene koje ste unijeli u MenuStrip tako da dolje gdje je ta kućica kliknete na nju i obratite pažnju na malu sitnu strelicu koja se pojavi tamo gdje je x na vašem prozoru,kliknite na taj x tj. na tu strelicu,i otvara vam se padajući izbornik,zasad nam ne treba ništa iz njega ali na dnu plavo pisano imate Edit items klik na to i otvara vam se meni s svim izmjenama koje ste unijeli u MenuStrip oznake kao menuStrip1 jer se radi o prvom meniju.Sad se maknite odatle i napravite već uobićajeni postupak build....build solution.....debug....i ma znate već....i imate vaš prozor s menijem.
Sad pratite tekst i slike,imate vremena za proučavanje,nema žurbe.Ovdje vidite izbor menija:
na ovoj slici vaš je prozor s kućicom gdje trebate tipkati menije:
Ovdje na slici ispod vidite način na koji ćete tipkati i naravno prije naslova & znak!!!
Kad je sve gotovo ovako vaš meni treba izgledati.......
.....sad na onaj postupak build...itd...ali možete i direktno na debug i start without debuging ali sad vam se otvara izbornik s pitanje da li želite prije i build napraviti a vi samo ok i to je to.
Vaš prozor sad ovako izgleda:
Da bi mijenjali svojstav menija možemo na dva načina:
Kliknemo na MenuStrip dolje ispod našeg prozora u design pogledu i automatski pogled na properties i tamo su vam svojstava za menustrip1,za svako naše svojstvo koje sadrži meni morate kliknuti da bi se to svoojstvo prikazalo na zaslonu svojstava:naprimjer kliknite na pomoć i tamo u svojstvima automatski vam se pokaže sve o meniju pomoć!
Ima i drugi način koji sam opisao u tekstu gore a na slikama dolje će vam biti prikazano kad u menustrip nismo ništa unijeli i kad unesemo naša tri menija i na taj načim možete vidjeti njihova svijstav i klikate na njih i tamo će vam se isto pokazati njihova svojstva. Znači ovdje klik na onu malu strlicu pored crvenog x i zatim u padajućem izborniku Edit items......
....i kad nismo ništa unijeli imamo ovakvu sliku:
....kad završimo s unosom imamo ovakvu sliku:
...klik na svki menuitem nam otvara svojstva koja i na taj način možemo vidjeti osim u prozorčiću properties.Sad malo vježbajte,nastavak slijedi.
U nastavku ću prvo prikazati slike a onda dio po dio i korak po korak objašnjavati.
Dodavati ćemo submenu na menu igraj i about.To radimo na takav način da kliknemo na igraj i ispod dodajemo tekst kao što ću prikazati na slikama a kasnije ćemo dodavati za svaki podmenu svojstva......na ovojn slici ispod je prikazano kako možete dodati submenu meniju granice.
Klik na granice i otvaraju vam se kućice u koje pišete &vise,zatim ispod &manje i na kraju reset koji će brojeve vratiti na početnu vrijednost!
Ovdje krećete na menu about i klikom na njega vam se otvara kućica u koju pišete &about i tako ste meniju pomoć dodali ono što će nam pomoći kad to i stisnemo!
Sad prije nego krenemo na dodavanje i izmjenu svojstava za svaki podmeni ,pokrenite vašu aplikaciju da vidite što ste dodali.Kad pogledate ,vratite se nazad.Sad kliknite na podmeni više da bi vam se u svojstvima prikazalo ovo što na slici ispod vidite.Inače ovo što ćemo sad prikazati za ovaj podmeni tj. postupak vrijedi za sve podmenije!!!!
Za podmeni više ćemo mijenjati tj.dodavati shortcut svojstvo,zatim ToolTipText,AutoToolTip svojstvo namjestit ćemo na true jer kad prelazite mišem po podmeniju želite vidjeti što ste napisali u opisu ToolTipText. Prvo nađite ShortcutKeys svojstvo i klik na njega i poplaviti će a ujedno će vam se pokazati mala strelica i klik na nju i eto vam padajući izbornik u kojem odabirete vašu kraticu
Kao što vidite ja sam odabrao dolje prikazanu kraticu a vi možete i drugu!Efekt se odmah vidi i u design pogledu s lijeva.
Vidite odmah se vidi i promjena.
Sad idemo na drugo svojstvo koje ćemo mijenjati a to je ToolTipText tj. opis što to svojstvo radi i zbog onog AutoToolTip se to i vidi kad prelazite mišem po podmenijima!Klik na to svojstvo kao što je prikazano na doljnjoj slici!Opet klik na strelicu s strane.......
...i ja sam upisao "Gornje vrijednosti za brojeve " kao što dolje vidite!Zasada smo gotovi s našim podmenijem vise!
Naravno na svim ovim prikazima mi radimo s svojstvima. Ovdje vidite kako se stavlja ono svojstvo AutoToolTip na true.
Sad naravno prelazimo na naš drugi podmeni a to je manje.Postupak je isti kao i prethodni submeni,klik na manje da bi nam se prikazala njegova svojstva i počinjemo ih mijenjati kao i gore samo što ToolTipText otipkajte Donje vrijednosti brojeva,Za ShortcutKeys svojstvo stavite kraticu kao na slici ili kakvu vi hoćete....jedino što je isto je stavljanje AutoToolTop-a na true kod svih podmenija.
Ovdje je kratica za podmeni manje.
Ovako izgleda kad je gotovo(skoro sve ) uređivanje s podmenijima u meniju granice.Na reset podmeniju također moramo dodati kraticu koju želimo,opis(TooTipText) ,naravno za izmjenu tih svojstava na tom podmeniju također moramo kliknuti na podmeni reset i eto properties se pokaže slijeva i opet isti postupak....i ne zaboravite da je AutoToolTip na sva tri pa i na podmeniju pomoc namješten na true!!!!
Sad još malo za vašu vježbu namjerno sam izostavio jednu izmjenu a to je da skratite ime za sve podmenije .....na taj načon kako je prikazano za pomoc meni.Nađite name ispod AplicationSettings i na svakom podmeniju zbrišite između about i MenuItem tako da vam se skrati ime na kao dolje prikazanoj slici ,samo što je za svaki podmeni drugačiji početak!Brišete ja mislim toolstrip između imena i MenuItem-a!!!!
Sad kad završite s dodavanjem podmenija i njihovih svojstava pokrente svoju aplikaciju i kliknte na igraj ,prelazite mišem i pogledaje kako ste sve šo ste napisali u svojstvima imate na ekranu.Lijepo zar ne! Nadam se da ovo nije bilo preteško jer sam išao korak po korak.Vježbjte tako da radite sve ispočetka i opet i opet....!
Slijdeće što ćemo raditi je dodavanje Tab Controla. Opet na alate i n Containers group i tamo naći Tab Control i klik na njega ili jednostavno ga povucite na vaš prozor.
ovdje su tri taba a treci dodajete klikom na strelicu koja se pojavi u uglu gdje vam je iks(x) i klik na tu strlicu i add tab i eto vam treći tab:
Sad primjetite da je premali kvadratic i ne ispunjava naš prozor i sad trebamo izmjeniti svojstvo koje će nam omogućiti da ispuni cijeli prozor,stoga klik na podrućje TabCon. i na desnooj strani bi nam trebao biti properties tabcontrol1:
Sad nađemo svojstvo koje je dolje na slici i klik na strelicu desno i otvara se padajući izbornik a vi kliknite na najveći kvadrat i biti će napisano fill umjesto none i odmah viidite promjenu u design pogledu!!!!!
Ove dvije slijedeće slike pokazuju vaš učinak koji ste gore napravili:
Primjetite kako je sad tabcontrol ispunio cijeli prozor:
Sad dok ste još na svojstvima tabcontrol1 vidite desno strelicu....kliknite na nju i u padajućem izborniku izaberete tabPage1....
....i kad to izaberete tad vam se otvara svojstvo za tabPage 1 kao što je na slici dolje:
Sad ćemo tu raditi neke izmjene:
Prvo radimo izmjenu teksta koji je vidljiv na prozoru i to je gore prikazano kako.
A ovdje mijenjamo ime klase unutar klase form1 u lototab....s time se nosi kod i to ćemo kasnije vidjeti kako.
Naravno sad opet gore na svojstva i klik na onu strelicu i u padajućem izborniku izaberemo drugi tab....tabPage2...a primjetite da smo u popisu umjesto tabPage1 satvili lototab kao dio koda.Kad smo kliknuli na tabPage2 otvara nam se svojstva za taj tab i sad imamo iste izmjene kao i u prvom ali samo druga imena(isti je postupak):
Vidite ovdje gore mijenjamo ime iz tabPage2 u hrvatskitab i to nam je vrijednost unutar form1 tj Prozor klase:
Naravno i ime koje se pokazuje u prozoru mijenjamo i u design pogledu vidimo i promjenu:
Sad još preostaje izmjeniti svojstva za treći tab za koji sam zaboravio kako ga dodajete.Dodajete ga tako još na početku kad tab kontrole tek stavite na prozor vidjet ćete malu strelicu na onom crvenom iksu (x) i klik na tu strlicu i vidjet ćete tamo add tab i klik na to i eto trćeg tab-a!
Sad mijenjamo imena u webtab kao ime za klasu(gore) a dolje pod tekst koji se pojavljuje na prozoru webinfo ....koraci su isti kao i u prethodna dva!
Kad ste završili pogled na design prozor i vidjet ćete izmjene:
Sad ga pokrenite na onaj način koji bi vam već trebao ući u naviku.....build....pa ...nadamse da znate dalje i eto vam vaš prozor koji već sad ima dosta na sebi:
Dalje nam slijedi GroupBox Control čija je svrha uglavnom kako i ime kaže....grupiranje drugih kontrola da budu na jednom mjestu a možemo i podijeliti cijelu grupu u više grupa.
Prvo na toolbox i tamo naći GroupBox i klik(dvostruki) ili povucite ispod već kliknutog loto oznake jer tamo ćemo GroupBox smjestiti. Zatim ćemo lagano mijenjati svojstva i ime cijele te kontrole.
Znači na ovoj slici alata smo našli što trebamo:
A ovo svojstvo ćemo promijeniti malo kasnije ćete vidjeti:
Na ovoj ispod slici vam je samo prikazano da se GroupBox nađe i u Containers grupi:
Desno gore u svojstvima vidite pripadnost i to ćemo ime promijeniti:
Ovo je slučajna slika na koju ne obraćajte pažnju(moja greška):
A ovdje na tom mjestu kao na slici mijenjamo ime u ;
....ovo ime koje se sad gore prikazuje u svojstvima:
Sad još uvijek smo na istom dijelu ali malo niže nađemo Dock i klik na njega i klik na strelicu desno i na najveći dio u sredini (to znači fill):
....i evo kako nakon toga izgleda svojstvo Dock:
A u design pogledu nam je groupbox1 sad sve ispunio(fill);
Sad nam preostaje da promijenimo tekst koji nam govori koliko brojeva ćemo unijeti kad igramo loto..........to će nam izmijeniti pojavljivanje na ekranu naše aplikacije:
Znači to ovdje mijenjamo:
...i sad u design pogledu to tako izgleda:
Idemo na slijedeci zadatak-klik na hrvloto:
....opet dodajemo GroupBox:
...sad je isti postupak tj. mijenjamo ista svojstva kao i prije ali samo druga imena:
...ovdje fill:
Sad mijenjamo koliko brojeva ćemo unijeti za taj loto:
...ovdje se vidi kako sam napisao :
U design pogledu vidite promjene odmah:
I sad program debugirajte(stratajte ) i evo aplikacije kao izgleda...vidi se naš napredak!
Slijedeće što ćemo raditi je dodavanje Button Controls!!!
Znači idemo na alate i nađemo u zajedničkim kontrolama button i klik na njega tj. povućemo ga na naš prozor i smjestite ga ...vidjet ćete gdje malo kasnije ali bar vizualno neka bude lijepo.Naravno prije povlačenja trebate kliknuti na loto kućicu jer ćemo butto-ne tamo prvo smještati i biti će ih šest jer u tom prostoru se igramo lota 6/45 i moja mala greška je onaj broj 49 ali ispravim ga kasnije.Vi kad želite.
Znači ovdje na ovu površinu povlačimo naše gumbe:
Evo ovako ih razmjestite ako želite tako:
I kad kliknete na prvi button tad vam se pokažu njegova svojstva a mi ćemo za svaki gumb mijenjati tri svojstva,text koji vidimo a to će biti redni brojevi od 1 do 6,zatim boju gumba i na kraju njegovo ime u kodu!Sad to nađimo u svojstvima:
Ovdje prvo vidimo mijenjanje imena koje će biti u kodu,na ovoj slici je prikaz kad ste stisnuli loto i svojstva za njega a kad stisnete prvi gumb tad je slika ispod ove slike:
Evo te slike za button1 isad tu mijenjamo ona tri svojstva gore nabrojena:
Naravno ne mora biti po redu i zato na ovoj slici prvo mijenjamo da nam se pokaže gumb s rednim brojem jedan i efekt odmah vidite na design pogledu:
Evo efekt u design pogledu:
Sad mijenjamo najgornje svojstvo tekst čime mijenjamo ime button1 u loto1 :
Efekt se vidi ovdje:
A ovdje mijenjamo bkcolor gumba iz transparent u silver i efekt se vidi u design pogledu:
Evo kako je srebreni gumb sad:
Sad idemo dalje na button2 i isti postupak je samo je broj dva :
Naravno ovdje ste stisnuli taj gumb da bi vam se pokazala svojstava za taj gumb i gdje ćemo ih mijenjati :
Naravno ja sam vam pokazao korak za prvi gumb a vi napravite za svih šest i to mora ovako izgledati:
....naravno morate i build i start without debuging i eto vamo aplikacije s gumbima kućice lotto:
Sad klik na hrvlotto i tamo ćemo dovući sedam gumbi jer se rad o lotu 7/39 :
Ovdje su promjene iste kao i gore na prvim gumbima ali sad je ime button1 promjenjen u hloto1 znači ona prva kućica teksta u svojstvima:
Znači ovdje smo uzeli boju gold,i naravno ne zaboravite redne brojeve u donjem dijelu text svojstvo uoisati od jedan do sedam,po redu. Kad program izvršite vaša aplikacija ovako izgleda:
Sad ako želite pozadinu izmjeniti kliknite na prostor između gumba kad ste na lotto kućici i tamo nađite bkcolor i izaberite boju(ja crnu):
A na hrvlotto kućici pozadina je ove boje :
....je silver:
No sad vam je aplikacija ljepša i već poprima finalni izgled pomalo....ostala nam je kućica webpage tj. webinfo i to ćemo sad:
Znači klik na webinfo i sad na alate i naći WebBrowser Control u Common Controls alatima i dvoklik na njega i otvaraju nam se svoojstva za tu kontrolu a mi ćemo mijenjati dva....dodat ćemo url i text svojstvo a ako nije dock fill i to promijenimo!
Vidite ovdje kad stavimo webbrowser i njegova svojstav ,Dock je već fill,ostaviti ćemo Name kako je i sad nam ostaje naći url svojstvo gdje dodajemo adresu stranice hrvatskog lota:
Ovdje na slici je sve kako izgleda kad radimo :
Ovdje ćemo dodati url:
Evo vidite dodali smo url:
Na kraju sve pokrenite i pogledajte vašu aplikaciju!!!!!!
Sad nam preostaje pisanje koda a to je uskladu s napretkom drugih postova i stoga ćete se malo strpiti iako se može sve završiti ali za one koji tek počinju bolje neka malo prvo vježbaju i ponove ovo sve dosad a napredni ionako ovo već sve znaju! Pisanje koda i nastavak izrade ove aplikacije će se nastaviti kad obradimo CLR programiranje a tek smo na trećini ,jer želim ići ukorak s drugim dijelovima ove stranice jer smatram da je tako najbolje dok se izrađuje tut o Visual C++-u.I ovo što smo dosad napravili je dobro jer vas upoznaje s Visual Studiom i naravno možete proučavati ToolBox i Properties a kasnije kad u pisanju C++/CLI programa budemo dovoljno napredovali možemo i ovdje dalje.Naravno napominjem da su sve samo osnove prema kojima možete dalje napredovati,stranica je namijenjena razumijevanju programiranja a ne uvid u profesionalno programiranje .Takav način i pristup možete tek nakon stotina programa koje napravite!!Ovdje je samo skica prema kojoj možete nešto razviti.Jako puno materijala ima na engleskom i zato želim to na hrvatskom.Naravno biti će uvijek onih koji to ne žele ni čuti na drugom jeziku osim na engleskom ,ja jednostavno takve ljude ne razumijem.Jedino se slažem da je potrbno znati malo više od osnova engleskog da bi i napisali program ali ne morate znati savršeno engleski .Naravno da je puno lakše kad to imate na jeziku koji brže čitate ili razumijete.Stoga strpite se za nastavak WinFormi CLR.Vježbajte i ovo do sad i vjerujte nije uzalud!
Nema komentara:
Objavi komentar