Začínáme s ASP.NET 2.0 – 3. díl: aplikace Hello World

Začneme spuštěním Visual Web Developer 2005 Express Edition z nabídky Start.

Práce s projekty

Všichni asi cítíme, co je to projekt, přestože definice tohoto slova tak snadná není. Ve VWD je projektem web, který vytváříme. Po technické stránce je projekt složkou na disku obsahující celou řadu souborů – kód, stránky, obrázky, databáze apod. S projektem pracujeme budeme pracovat jako s nedělitelným celkem. V závislosti na fázi, ve které se nacházíme, můžeme zvolit buď založení nového projektu anebo otevření již existujícího projektu.

Založení projektu

V případě, že vytváříme či zakládáme nový projekt (New Web Site), musíme si vybrat z nabídky šablon (Templates):

Šablona není nic jiného, než zaZIPovaný soubor s počátečním obsahem webu. Nabídka dostupných šablon se může lišit podle zvoleného programovacího jazyka v levém dolním rohu dialogového okna. Šablony můžeme rozdělit do dvou skupin:

• „Prázdné“ šablony – obsahují pouze minimální obsah, předvytvořené prázdné adresáře apod. Pro účely našich cvičení budeme používat šablonu ASP.NET Web Site. Šablona Empty Web Site neobsahuje vůbec nic, šablonu ASP.NET Web Service lze použít k vytváření webových služeb podle standardů SOAP a WSDL.
• Starter Kity – jsou v podstatě hotovými vzorovými weby, které můžeme upravovat a dodělávat podle vlastních potřeb. Představují tedy nejrychlejší cestu při vytváření specializovaných řešení. Součástí VWD ve verzi Beta 2 je pouze jediný – Personal Web Site Starter Kit. Na webu www.asp.net jsou k dispozici ještě další starter kity pro ASP.NET 2.0. V době psaní tohoto článku je možné získat Club Site Starter Kit pro vytváření stránek klubu, zájmového oddílu apod. a Time Tracker Starter Kit pro vedení výkazů práce odvedené jednotlivými lidmi na konkrétních projektech na této adrese. Připravují se též další starter kity, některé z nich dokonce v češtině (informace o nich hledejte na http://msdn.microsoft.cz). Pozor, nabídka šablon Starter Kitů závisí na programovacím jazyce, který jste si vybrali.

Obě skupiny mají jedno společné – musíte zadat umístění pracovního adresáře projektu. Ten může být umístěn buď na lokálním disku vašeho počítače (doporučovaná možnost), na vzdáleném FTP serveru anebo HTTP serveru s instalovanými FrontPage extenzemi. Poslední dvě možnosti se doporučuje používat spíše pro nasazení hotového webu než pro vývoj.

Otevření existujícího projektu

Pokud otevíráme existující projekt (Open Web Site), máme situaci ještě jednodušší:

Jediné, co musíme zadat, je umístění složky webového projektu. Nejčastěji to bude složka v souborovém systém lokálního počítače, ale v některých případech může být web umístěn na lokálním webovém serveru IIS, vzdáleném FTP serveru anebo HTTP serveru s instalovanými FrontPage extenzemi – v tom případě samozřejmě musíme správně zadat adresu a další informace nezbytné pro připojení. Pro vývoj je nejjednodušší používat projekty v souborovém systému, neboť při otevírání vzdálených webů pomocí ostatních technologií je komfort práce nižší (typicky např. nebude fungovat vzdálené ladění).

Vývoj Hello World

Z výše vyjmenovaných možností si zvolte si vytvoření nového webu (New Web Site), jako typ vyberte ASP.NET Web Site a jako cestu zadejte c:\WebSites\HelloWorld, čímž se vytvoří základní struktura prázdného webu s připravenou jedinou stránkou.

Okna ve VWD

Ve VWD bychom nyní měli vidět zhruba následující rozložení oken a prvků (pokud některé z oken nevidíte, můžete jej zobrazit pomocí nabídky View):

Nejdůležitější okno je to, které nemá jméno a je uprostřed obrazovky. V něm probíhá psaní kódu i vytváření designu webové stránky. Úplně nahoře vidíte záložky, z nichž každá znamená jeden otevřený soubor. Pro každou webovou stránku můžete otevřít dva soubory – jeden s kódem a jeden s definicí vzhledu.

Pokud pracujeme s definicí vzhledu, máme k dispozici dva náhledy na stránku. Přepíná se mezi nimi výběrem režimu Design a Source v levé dolní části okna. Pokud pracujeme v režimu Design, vidíme vzhled stránky vizuálně. Můžeme upravovat rozmístění jednotlivých prvků, přetahovat je myší apod. Mírně pokročilejší vývojáři mohou v okně Source psát přímo HTML značky tvořící stránku. Pokud v tomto okně píšete, máte k dispozici tzv. IntelliSense neboli nápovědu, která předvídá vaše záměry, čímž šetří úhozy do klávesnice. Zkuste například kliknout na prázdném místě v řádku 12 a psát pomalu znak po znaku text pro vložení tabulky <table bgcolor=yellow> a uvidíte možnosti nápovědy (pokud chcete nápovědu použít, stiskněte na ní mezeru nebo jiný podobný znak) – viz obrázek:

Povšimněte si dále značek plus/minus těsně za číslem řádku. Pomocí těchto značek můžete rozbalovat a sbalovat celé pasáže textu, například celou definici tabulky. Dole na liště pak vidíte hierarchii HTML značek v dokumentu (<html><body><table> atd.). Kliknutím na těchto značkách můžete ve stránce vybrat celou značku včetně jejího vnitřního obsahu. Pokud píšete HTML značky, editor automaticky kontroluje a podtrhává odchylky od správné syntaxe podobně jako např. překlepy v MS Word. Přísnost a pravidla pro tuto kontrolu si na správnou úroveň můžete nastavit v nabídce Tools/Options/Validation – můžete ji například nastavit na striktní dodržení standardu XHTML 1.1.

Na pravé straně vidíte okno Toolbox, ve kterém jsou seskupeny jednotlivé ovládací prvky – tlačítka, kalendáře, přepínače, tabulky, obrázky apod. Jednotlivé skupiny jsou vyznačeny tučně a mají před sebou znak plus/minus sloužící k rozbalení/sbalení jejich obsahu. Libovolný z prvků (např. tlačítko, Button) můžeme přetažením myši přenést do okna editujícího HTML. Pokud to provedeme v režimu Design, uvidíme na cílovém místě námi přenesené tlačítko. Provedeme-li totéž v režimu Source, vidíme na cílovém místě vygenerované HTML značky odpovídající tlačítku. Můžete si to sami snadno vyzkoušet.

V pravém dolním rohu je důležité okno Properties. V něm se zobrazují nastavené vlastnosti aktuálně vybraného objektu. Pokud např. přepnete editaci HTML do režimu Design, někam na stránku vložíte tlačítko a vyberete jej myší, uvidíte v tomto okně celou řadu vlastností tlačítka – šířku, výšku, barvu pozadí, barvu okraje apod. (Width, Height, BackColor, BorderColor). Pokud výběrem ze seznamu možných hodnot nastavíte barvu pozadí (BackColor) např. na červenou (Red), změní se samozřejmě barva tlačítka na pracovní ploše. Přepnete-li nyní editační okno do režimu Source, uvidíte zhruba následující řádek:

Všimněte si, že okno s vlastnostmi funguje i v režimu Design. Pokud někdo raději píše, než kliká myší, může barvu tlačítka samozřejmě změnit i přímo v editoru. Pokud v něm přepíšete červenou barvu (Red) na žlutou (Yellow), změní se vlastnost BackColor i v okně Properties a po přepnutí do režimu Design samozřejmě uvidíme tlačítko žluté.

Okno Solution Explorer vpravo nahoře slouží k organizaci jednotlivých souborů tvořících projekt. Můžeme v něm vytvářet nové položky (typicky webové stránky), přidávat existující položky, přidávat nové složky, mazat/přejmenovávat/přesouvat jednotlivé soubory či složky apod. Všechny tyto možnosti jsou přístupné v kontextové nabídce kliknutím na příslušné položce ve stromu pravým tlačítkem myši.

Posledním oknem, které si ukážeme, je editor kódu, ve kterém můžeme psát obsluhu událostí (stisknutí tlačítka apod.). Pokud máme otevřenou stránku, stačí stisknout tlačítko View code v horní liště okna Solution Explorer. Výsledek závisí na tom, zda máme kód v odděleném souboru anebo společně s HTML značkami v jednom souboru. V prvním případě má soubor stejné jméno jako stránka plus příponu podle použitého jazyka (vb pro Visual Basic a cs pro C#), v okně Solution Explorer je soubor jakoby zanořen pod příslušnou stránku (viz obrázek), ve druhém případě je kód vložen přímo do aspx souboru do sekce <script runat=”server”>.

Při psaní kódu máme k dispozici opět velký komfort. Na následujícím obrázku si povšimněte např. čísel řádků vlevo, barevného označování klíčových slov, znamének plus/minus pro rozbalení/sbalení bloků kódu, IntelliSense nápovědy při psaní kódu, podtrhávání špatných konstrukcí a syntaktických chyb apod.

První stránka krok za krokem

Nyní si vytvoříme první jednoduchou stránku. Nebudeme se zabývat otázkou „proč stránka funguje právě takto“ – na to přijde řada v příštím díle. Cílem tohoto odstavce je prakticky si vyzkoušet práci s prostředím VWD.

Pokud jste tak ještě neučinili, spusťte VWD. Vytvoříme nový projekt pomocí volby File/New Web Site. Jako šablonu zvolíme ASP.NET Web Site, výběr programovacího jazyka je na vašem uvážení, jako cestu zadejte c:\WebSites\HelloWorld a potvrďte. V projektu je již vytvořena výchozí stránka default.aspx, z cvičných důvodů si ale založíme novou stránku.

V okně Solution Explorer klikněte pravým tlačítkem na vašem projektu (kořen stromu) a zvolte Add New Item... Jako typ vyberte Web Form, jméno změňte např. na hodnotu Hello.aspx, programovací jazyk ponechte podle vlastního výběru, pro větší přehlednost zaškrtněte možnost Place code in separate file a potvrďte. Nyní bychom měli mít v editoru otevřenou novou prázdnou stránku Hello.aspx. Pokud chcete, můžete změnit titulek uzavřený ve značkách <title>Untitled Page</title> např. na <title>Hello World</title>. Pomocí tlačítka Design vlevo dole přepněte do režimu vizuální editace stránky.

Na stránce nyní vytvoříme dva vizuální prvky – textové pole bez editace (prvek Label) a tlačítko (prvek Button). Přetáhněte myší tyto dva prvky z okna Toolbox na pracovní plochu. Pro lepší vzhled doporučuji umístit kurzor mezi tyto dva prvky (např. kliknutím myši) a stisknout 2x Enter pro vložení nových řádků. Nyní nastavíme některé vlastnosti ovládacích prvků. Vyberte vždy příslušný ovládací prvek a nastavte jeho vlastnosti v okně Properties na nové hodnoty podle uvedené tabulky:

Pokud vše nastavíme podle tabulky, pracovní plocha by měla vypadat zhruba takto (estetickou hodnotou našeho díla se teď raději nebudeme zabývat):

Třešničkou na dortu bude dopsání funkce tlačítka – požadavek zní, aby tlačítko při stisknutí střídavě skrývalo a zobrazovalo nápis „Hello World“. Z vývojářského hlediska jde o velmi jednoduchou úlohu. Prvek LabelPozdrav má vlastnost Visible, jejíž hodnota určuje, zda je příslušný prvek viditelný. Chceme-li tlačítko zobrazit nebo skrýt, stačí nastavit tuto vlastnost na opak její současné hodnoty. Kód pro tuto akci je potřeba zapsat do události tlačítka nazvané Click, tato událost se volá vždy při stisknutí tlačítka. Seznam všech událostí ovládacího prvku lze zobrazit v okně Properties, zobrazení se aktivuje stisknutím tlačítka se symbolem blesku. Kód pro libovolnou událost začnete psát dvojklikem na příslušném řádku. Pro nejtypičtější událost (v případě tlačítka je to právě Click) je možné též dvojklik na příslušném ovládacím prvku (proveďte). Otevře se okno s kódem a vygenerovanou hlavičkou obsluhy události, do které dopište následující tučně zvýrazněný kód ve zvoleném jazyce:

C#:
    protected void ButtonSkryjZobraz_Click(object sender, EventArgs e)
    {
        LabelPozdrav.Visible = !LabelPozdrav.Vsible;
    }
Visual Basic:
    Protected Sub ButtonSkryjZobraz _Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonSkryjZobraz.Click
        LabelPozdrav.Visible = Not LabelPozdrav.Vsible
    End Sub

Při psaní si dáme pozor na malá a velká písmena – v jazyce C# je to nezbytnost, ve Visual Basicu bude kód čitelnější. Měl by vám rovněž fungovat IntelliSense a napovídat dokončení příkazu. V příkazu pro převrácení hodnoty viditelnosti je úmyslná chyba. Pokud nyní spustíme sestavení stránky či celého webu z nabídky Build / Build Page anebo Build / Build Web Site, zobrazí se nám chyby při kompilaci jako na následujícím obrázku:

Jak je patrné, jedná se o chybu v souboru Hello.aspx.cs, v řádku 24 a sloupci 46 (pokud používáte Visual Basic, čísla budou jiná). V okně Error List je rovněž uveden její popis, chyba je navíc v editoru kódu označena vlnovkou. Náprava je nasnadě. Pokud provedeme dvojklik na řádku s popisem chyby, automaticky přeskočíme na příslušný řádek v editoru kódu. Opravíme-li nyní Vsible na Visible a provedeme znovu příkaz Build, neměla by se již žádná chyba objevit.

Spuštění a ladění Hello World

Nejprve stránku uložíme stisknutím tlačítka Save anebo z nabídky pomocí File / Save <jméno stránky>, případně File / Save All. Poté můžeme stránku spustit, nejsnáze tak, že klikneme pravým tlačítkem na příslušné stránce v okně Solution Explorer a zvolíme View in Browser. Naše „Hello World“ stránka s textem a tlačítkem by se pak měla zobrazit v prohlížeči. Ještě předtím je ovšem spuštěn vývojový web server jménem ASP.NET Development Server – viz obrázek:

V mém případě běží server na portu 1793, ve vašem případě bude toto číslo pravděpodobně jiné. Pokud klikneme pravým tlačítkem myši na ikonce z předchozího obrázku, máme možnost webový server zastavit anebo se podívat na jeho detailní informace. Pokud chceme použít jiný port, můžeme v okně Solution Explorer zvolit myší webový projekt a v okně Properties nastavit Use dynamic ports na False a Port Number na požadovanou hodnotu. V mém případě je tedy adresa právě vytvořené webové stránky http://localhost:1793/HelloWorld/Hello.aspx. Stránka by se měla bez problémů zobrazit. Pokud budeme mačkat tlačítko na stránce, nápis „Hello World“ by se měl střídavě skrývat a zase objevovat.

Ladění

Zatím jsme stránku spouštěli bez možnosti ladění kódu – je tak jednoduchá, že vlastně ani moc není co ladit. V praxi se ale setkáme se stránkami mnohem složitějšími, u nichž je pak možnost ladění neocenitelným pomocníkem při hledání chyb. Chceme-li stránku ladit, není to nic složitého. Prvním krokem je nastavení bodu přerušení (Breakpoint) na vhodném místě v kódu. Učiníme tak buď kliknutím na šedém poli úplně vlevo před příslušným řádkem anebo kliknutím pravým tlačítkem myši na příslušném řádku a volbou kontextové nabídky Breakpoint / Insert Breakpoint. Bod přerušení se projeví červeným pruhem pod zvoleným řádkem a symbolem „červená kulička“ na začátku řádku. Odstranění bodu přerušení se provádí stejně. Druhým krokem je nastavení startovací stránky pro spuštění ladění. Je možné nastavit libovolnou stránku, v našem jednoduchém případě nastavíme naši stránku Hello.aspx. Klikneme na ní pravým tlačítkem myši v okně Solution Explorer a vybereme možnost Set as Start Page.

Vlastní ladění spustíme z nabídky Debug / Start Debugging (případně stisknutím tlačítka F5). Při prvním spuštění se nám zobrazí následující dialog:

Potvrďte jej beze změn, čímž vytvoříte nový konfigurační soubor web.config, ve kterém je povoleno ladění. Poté by se měla otevřít naše nová stránka. Stiskneme-li tlačítko, mělo by se nám „rozblikat“ okno VWD se zastaveným bodem přerušení.

Okna pro ladění

Nyní bychom měli vidět zhruba následující rozložení oken:

Zajímavé možnosti přináší již okno editoru kódu. Žlutě podsvícený řádek je ten, který by se měl právě vykonat, pokračování je možné použitím tlačítek Step Into/Over/Out anebo ekvivalentních příkazů v nabídce. Přemístíte-li kurzor nad některou proměnnou – např. nad LabelPozdrav, Visible nebo sender, zobrazí se hodnota dané proměnné - buď jako jednoduchá hodnota anebo rozbalovací strom, což je velmi praktické.

V okně Locals se můžeme podívat na aktuální hodnoty proměnných a dalších objektů, které používá blok kódu, ve kterém jsme právě zastaveni – opět jako jednoduché proměnné anebo jako rozbalovací strom hodnot. Záložkou dole můžeme přepnout na zobrazení okna Watch. Má podobnou funkci jako okno Locals, s tím rozdílem, že v něm jsou vidět hodnoty objektů a proměnných, které jsme se rozhodli trvale sledovat. Zkuste například kliknout pravým tlačítkem myši na proměnnou LabelPozdrav a zvolte z kontextové nabídky Add Watch. Objekt se přidá do okna Watch a můžeme jej během ladění trvale sledovat.

V pravé dolní polovině můžeme přepínat mezi třemi okny. Okno Call Stack obsahuje hierarchii volání mezi bloky kódu. Pokud například kód A volá kód B a ten zase volá kód C, uvidíme zde sekvenci C,B,A. V okně Immediate Window můžete zadat libovolný výraz, který bude okamžitě vyhodnocen a vrácen výsledek:

Všimněte si příjemné podpory IntelliSense nápovědy i v tomto okně. A konečně okno Output slouží k výstupu některých diagnostických informací. Pokud do něj chcete nechat vypsat vlastní diagnostický text, můžete tak snadno učinit např. příkazem:

System.Diagnostics.Debug.Print("Nazdar")

Uvedení Hello World do provozu

Mini-aplikace nyní úspěšně běží na testovacím serveru a je čas přenést ji do provozního prostředí.

Nasazení na lokální síti

Pokud chceme aplikaci nasadit na lokální síti – typicky pro intranetové řešení, je postup velmi jednoduchý. Potřebujeme počítač s operačním systémem Windows 2000, Windows XP nebo Windows Server 2003 (preferovaná možnost) s běžícím Internet Information Serverem (IIS). Založíme složku na disku, vytvoříme virtuální adresář pro novou aplikaci a nakopírujeme do něj náš kompletní projekt. Pokud chceme aplikaci na serveru průběžně modifikovat, můžeme na serveru přidat podporu FrontPage Extensions anebo rozběhnout pro adresář aplikace FTP server. Nasazení aplikace je potom obdobné jako v následujícím odstavci. Přesný postup konfigurace serveru není obsahem tohoto seriálu.

Nasazení na vzdálený server

Webovou aplikaci je často potřeba nasadit na veřejném internetu. Pro tento účel potřebujete mít dohodu s firmou poskytujícím hostování aplikací – hosterem, který podporuje platformu ASP.NET 2.0. Většina hosterů nabízí různé úrovně služeb a od nich se odvíjející ceny. Někteří hosteři nabízejí pro jednoduché aplikace a testování jednu bezplatnou úroveň – v době psaní tohoto textu to v ČR a SR byli http://www.aspweb.cz/, http://www.asp2.cz, http://www.qsh.sk/ a http://www.aspx.sk. Aplikaci tak můžeme snadno publikovat na veřejném internetu.

Po podstoupení registrační procedury dostanete od hostera typicky k dispozici adresu URL, jméno a heslo. Ve VWD pak můžete využít funkce Website / Copy Web Site ..., stisknout Connect a zadat potřebné údaje pro připojení.

Okno připomíná programy na organizaci souborů na disku. V levé části je lokální web (typicky adresářová složka), v pravé části vzdálený web (typicky web v hostingovém centru). Pomocí šipek je možné soubory přenášet mezi oběma weby. Důležitou funkcí je též detekce změněných souborů a data změny umožňující automatickou synchronizaci obou webů. Po přenosu na server hostera je aplikace veřejně dostupná na Internetu. V mém případě je na adrese http://mjurektest.aspweb.cz/Hello.aspx.

Závěrem

V dnešním díle jsme se naučili základním úkonům při vývoji webové aplikace ASP.NET 2.0 pomocí nástroje VWD. Pokud něco nebude fungovat jak by mělo, zkuste využít možností podpory zmíněných ve druhé části, zejména diskusní skupinu microsoft.public.cs.developer.

V příštím díle si povíme něco více o „vnitřnostech“ ASP.NET. Dozvíte se některé základní termíny a technologie, které umožňují fungování naší Hello World aplikace.