Celý tento tutoriál je vytvořen ve verzi Visual Basic 2010 Express Edition. Starší verze Visual Basicu se mohou trochu lišit! Ukázky kódu budou fungovat, protože nové funkce z verze 2010 zatím nebudeme používat, ale některá okna budou vypadat trochu jinak. Pokud máte jen Visual Basic 6 nebo Visual Basic v MS Office, pak vězte, že tyto verze jsou úplně jiné a prakticky žádné příklady ani ukázky kódu vám nebudou fungovat! Stáhněte a nainstalujte si Visual Basic 2010 Express Edition z odkazu v minulém díle.
Vše připraveno, nainstalováno, můžeme začít programovat!
Spusťte z nabídky Start Visual Basic 2010. Po chvíli nastavování se zobrazí úvodní obrazovka, kde najdete jednak aktuální informace o nových vylepšeních a přídavných modulech do Visual Basicu, tak i rychlé odkazy na diskusní skupiny a nápovědu. V oddílu Recent Projects najdete projekty, se kterými jste naposledy pracovali. Zatím tam pochopitelně žádné nejsou.
Nejjistější způsob, jak začít nový projekt, je kliknout na nabídku File a vybrat New Project. Objeví se dialogové okno s několika typy projektů. Nás zatím bude zajímat Windows Forms Application, což je obyčejná aplikace pro Windows, taková, jaké běžně známe. Dalším typem je například Class Library, což není přímo program, ale jen knihovna funkcí, která se dá využívat z jiných programů. Dále je zde třeba Console Application, což je aplikace pro příkazový řádek. S těmi si také budeme časem hrát.
Dole v okně pro vytvoření projektu je ještě textové pole, kam můžete zapsat název naší aplikace. Vepište Lekce1 (raději bez mezery) a kliknněte na tlačítko OK. Tím se nový projekt vytvoří.
Ovládací prvky vývojového prostředí
Po kliknutí na tlačítko OK se po chvíli ukáže základní obrazovka vývojového prostředí. Je na ní vidět budoucí okno aplikace (budeme mu říkat formulář), dále souprava nástrojů (toolbox), okno vlastností (Property Window) a průzkumník projektu (Solution Explorer). Vše je popsáno na obrázku níže.
Pokud na boku nemáte soupravu nástrojů rozbalenou, stačí najet nebo kliknout myší na tlačítko Toolbox na levém okraji a poté, co se lišta rozbalí, ji můžete nahoře malou ikonkou špendlíku “přišpendlit”, aby po pouštění myši nezajížděla zase zpátky. Podobně to lze dělat i s ostatními panely, pokud máte více monitorů, můžete je i vytáhnout mimo hlavní okno. Přizpůsobte si prostředí tak, aby vám vyhovovalo.
Prázdné okno je sice hezká věc, ale my do něj potřebujeme vložit nějaké ovládací prvky. Těm budeme říkat komponenty (anglicky controls). Takovou komponentou může být například tlačítko, textové pole, kam uživatel zadá text, rozbalovací seznam, posuvník, zaškrtávací políčko, obrázek atd.
Každá taková komponenta má své vlastnosti, které blíže určují, jak vypadá a jak se chová. U většiny komponent můžeme změnit typ písma, barvu a všelijaké vzhledové parametry, vlastnostmi také částečně upravujeme chování komponenty (jestli se na ni dá kliknout nebo jestli je uzamčená atd.).
Přidávání komponent na formulář
Abychom mohli přidat komponentu na formulář, v soupravě nástrojů na ní klikneme a pak ji na formuláři se stisknutým tlačítkem roztáhneme do požadované velikosti. Nebo komponentu ze soupravy nástrojů přetáhneme na požadované místo a pomocí čtverečků pro změnu velikosti její rozměry přizpůsobíme. Prostředí nám zobrazuje vodící čáry, které umožňují komponenty pěkně zarovnávat.
Vyzkoušejte přetáhnout do okna různé komponenty a podívejte se, jak vypadají.
Každá komponenta má své jméno. Toto jméno se musí skládat pouze z písmen, čísel nebo podtržítka, přičemž nesmí začínat číslem. Mezery a jiné speciální znaky ve jméně nejsou povoleny. Jméno vždy zjistíme v okně vlastností, kde je vypsáno hned nahoře pod modrým záhlavím v řádku (Name). Vedle jména (v našem případě Button1) je napsán i typ komponenty (Button). Kdybychom nyní přidali druhé tlačítko, jmenovalo by se Button2. To však teď dělat nebudeme, jedno nám zatím stačí.
Žádné dvě komponenty v jednom okně nesmí mít stejné jméno. Toto jméno se uživateli nikde nezobrazuje, slouží nám k tomu, abychom se na komponentu mohli později odkazovat.
Změna vlastností v režimu návrhu
Pokud je komponenta označená, je kolem ní devět obdélníčků, které slouží ke zvětšování a zmenšování. V okně vlastností je v levém sloupečku seznam všech vlastností, které komponenta má, v pravém jsou pak hodnoty těchto vlastností, které můžeme měnit. V okně vlastností se ukážou vždy vlastnosti označené komponenty! Komponenta, se kterou chceme pracovat, musíme nejdříve označit tím, že na ní jednou klikneme.
Najděte tedy vlastnost Text, klikněte v příslušném řádku do pravého sloupečku, vymažte obsah políčka, napište Klikni na mě!. Tím jsme změnili hodnotu vlastnosti Text našeho tlačítka. Pokud se text na tlačítku nezměnil, asi jste tlačítko neměli vybrané a změnili jste titulek formuláře.
Poté klikněte na formulář (ale ne na jeho modrý titulkový pruh a ne na to tlačítko; prostě někam do plochy okna). Obdélníky kolem tlačítka by měly zmizet a objeví se okolo formuláře. Nyní tedy upravíme vlastnost formuláře. Změňte hodnotu vlastnosti Text na První program.
Komponentu, kterou chcete měnit, můžete též vybrat v okně vlastností ze seznamu nahoře.
Až program spustíme, na tlačítku a na formuláři budou napsané texty, které jsme nastavili. Vlastnosti komponent se kromě počátečních hodnot, které jsme nastavovali teď, dají měnit i ve chvíli, kdy program již běží, to se naučíme vzápětí. Zatím umíme měnit vlastnosti komponent v režimu návrhu, tj. dokud program není spuštěn. Vše, co takto nastavíme, se projeví již při zobrazení okna.
Nejběžnější vlastnosti, které byste měli znát
Zde v této tabulce jsou uvedeny nejpoužívanější vlastnosti a popis toho, na co mají vliv. Tyto vlastnosti mají skoro všechny komponenty.
Vyzkoušejte tyto vlastnosti změnit a sledujte, co se stane. Některé změny se projeví jen v okamžiku spuštění programu, v režimu návrhu nejsou vidět. Pro spuštění programu stačí stisknout F5. Pro návrat do vývojového prostředí spuštěný program ukončete křížkem v rohu okna.
| Název vlastnosti | Popis její funkce |
| Text | Textový obsah nebo titulek |
| Visible | Určuje, zda-li je komponenta viditelná. (True - viditelná, False - schovaná) |
| Enabled | Určuje, zda-li je komponenta odemknutá. (True - odemknutá, False - zašedlá) |
| BackColor | Barva pozadí komponenty |
| ForeColor | Barva textu v komponentě |
| TextAlign | Zarovnání textu v komponentě |
| Top | Vzdálenost horního okraje od horního okraje rodiče (v tomto případě okna) |
| Left | Vzdálenost levého okraje od levého okraje rodiče (v tomto případě okna) |
| Width | Šířka komponenty |
| Height | Výška komponenty |
Události a procedury
Nyní již umíme měnit vlastnosti objektů, takže nezbývá, než se pustit do samotného psaní zdrojového kódu. Kód píšeme, abychom určili a nadefinovali, jak bude program reagovat například na vstupy a akce uživatele. Takovým vstupem může být třeba kliknutí na tlačítko, stisknutí klávesy, nebo i příchozí data ze sítě atd. Toto chování se ošetřuje tzv. událostmi.
Událost je vyvolána nějakým vstupem a při jejím vyvolání může spustit nějakou proceduru. Procedura je sada příkazů, které se postupně provedou jeden za druhým.
V různých programovacích jazycích se příkazy oddělují různě, ve Visual Basicu bývá většinou jeden příkaz na jednom řádku. Chceme-li napsat více příkazů na jeden řádek, oddělíme je dvojtečkou. Chceme-li jeden příkaz rozdělit do více řádků, někdy se to dělá zapsáním sekvence mezera podtržítko, jindy stačí prostě ukončit řádek a pokračovat na dalším. Přesně si pravidla pro strukturování příkazů vysvětlíme časem, teď nám zatím stačí jednoduché pravidlo “jeden příkaz na řádek”.
My budeme nyní v našem programu chtít naprogramovat proceduru události, která se spustí, když klikneme na naše tlačítko.
Vytvoření procedury události
Dvakrát klikněte v režimu návrhu levým tlačítkem myši na naše tlačítko. Vývojové prostředí se přepne do okna kódu, ve kterém se nám již vytvořila procedura. Pokud se budeme chtít dostat zpět do návrhu formuláře, použijeme záložky v horní části okna a vybereme záložku Form1 [Design].
Okno kódu by mělo obsahovat tento předpřipravený text:
Public Class Form1
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
End Sub
End Class
První a poslední řádek oznamují začátek a konec kódu formuláře. Vše, co je mezi nimi, patří do formuláře Form1. Před Public Class Form1 a za End Class nic nepište.
Vnitřní dva řádky ohraničují proceduru Button1_Click, která se spustí, když klikneme na tlačítko Button1. Kód procedury musíme napsat mezi prostřední dva řádky, jinak se program nespustí a prostředí vypíše chybovou hlášku, že program nelze zkompilovat!
Nyní můžeme zapsat příkaz do procedury Button1_Click. Přesně opište tento řádek, včetně všech závorek a uvozovek:
MsgBox("Kliknuli jste na tlačítko!")
Slovo MsgBox je funkce, která zobrazí zprávu uživateli. Každá funkce se spouští (neboli volá) tak, že napíšeme její jméno a do kulaté závorky hned za ní argumenty. Argumenty se vždy uvádí do kulaté závorky hned za název volané funkce a jejich počet se liší podle toho, o jakou funkci jde. Některé funkce dokonce argumenty nepotřebují, v takovém případě napíšeme jen otevírací a uzavírací kulatou závorku, tedy (). Pokud je argumentů více, oddělují se čárkou. Argumenty jsou hodnoty, které upřesňují chování a činnost funkce. Argumentům se také někdy říká parametry.
V tomto případě jsme zavolali funkci MsgBox a předali jsme jí jeden jediný argument, a tím je text Kliknuli jste na tlačítko!. Protože se jedná o text, který se má někam vypisovat, a ne o část příkazu, je nutné jej dát do uvozovek! Funkce MsgBox zobrazuje na obrazovce zprávu a jako argument jsme jí tedy předali text, který se má zobrazit uvnitř této zprávy.
Během psaní se Vám možná objeví žlutý proužek s nějakým anglickým textem. To je inteligentní nápověda jazyka Visual Basic, kterou se později naučíme využívat. Pokud se na ni podíváte pozorněji, uvidíte, že nám anglicky píše, co tato funkce dělá a jaké má mít argumenty. Prozatím si jí ale nemusíte všímat, budeme se jí věnovat později.
Spuštění programu
Nyní jsme hotovi. Klávesou F5 můžeme program spustit. Jakmile se program zkompiluje a spustí, objeví se nám okno s tlačítkem, které jsme vytvořili. Pokud na tlačítko kliknete, zobrazí se systémová zpráva s nastaveným textem.
Klikněte na tlačítko a potvrďte přečtení zprávy kliknutím na tlačítko OK. Pak můžete program zavřít. Dokud spuštěný program neukončíte, nemůžete pracovat s prostředím Visual Basicu! Nejdříve musíte spuštěný program zavřít křížkem!
Všimněte si, že naše okno je plně funkční, a chová se jako běžné okno v systému. Dá se měnit jeho velikost, můžeme jej minimalizovat, zobrazuje své tlačítko na hlavním panelu dole atd. Kliknutím na křížek okno můžeme zavřít.
Mezi spuštěním aplikace a zobrazením okna, které se chová tak, jak to naše, je poměrně velká spousta kódu. Je potřeba provést mnoho různých volání nejrozličnějších funkcí v systému, aby se okno zobrazilo. Tento kód ale nemusíme psát my, protože z velké části je napsán v knihovně .NET Frameworku, kterou náš program automaticky používá.
To, co je uvnitř okna, jsme naklikali a natahali myší v návrháři. Ve skutečnosti podle toho, jak jsme komponenty na formulář rozmístili, Visual Basic jen vygeneroval kus zdrojového kódu, který se opět spustil. Je potřeba si uvědomit, že mnoho věcí za nás dělá vývojové prostředí. My jsme napsali jen to, co má program skutečně dělat – po kliknutí na tlačítko zobrazit zprávu. Všechnu režii okolo za nás udělal .NET Framework nebo vývojové prostředí Visual Basic.
Uložení projektu
Svůj projekt si samozřejmě uložte, stačí kliknout na ikonku 
(Save All, uložit vše) v panelu nástrojů nahoře, nebo stisknout klávesy Ctrl+Shift+S. Objeví se okno, ve kterém si můžete vybrat, kam se má projekt uložit a jak se má jmenovat. Pojmenujte jej třeba Lekce1 a klikněte na tlačítko Save. Tím se projekt uloží.
Pokud ukončíte Visual Basic, můžete se ke své práci kdykoliv vrátit, při dalším spuštění Visual Basicu se totiž náš projekt ukáže na úvodní obrazovce v sekci Recent Projects (naposledy otevření projekty) a otevřete jej jednoduchým kliknutím. Samozřejmě můžete použít i možnost Open Project, kde vyberete složku, ve které se projekt nachází. Upozorňuji, že pokud nenastavíte svou vlastní cestu, kam se má projekt uložit, uloží se do složky Visual Studio 2010\Projects, kterou najdete ve složce Dokumenty.
Pokud byste své programátorské pokusy chtěli ukázat svým přátelům, nemusí si instalovat Visual Basic. Stačí, když ve složce, kde je projekt uložen, otevřete podsložku bin/Debug a v ní najdete příslušný EXE soubor. Ten by pro spuštění měl stačit (zatím děláme jednoduché projekty). Pokud aplikace nepůjde na jiném počítači spustit, ujistěte se, že je na něm nainstalován .NET Framework 4.
To je pro tento díl vše. Příště se naučíme měnit hodnoty vlastností komponent za běhu programu a ne jen v režimu návrhu, jako jsme to dělali teď.