Naše první stránka

Připomeňme si, jak vypadá zdrojový kód naší stránky: V něm jsou vidět také jakési tagy, ale do HTML nepat


Připomeňme si, jak vypadá zdrojový kód naší stránky:
<html>
<body> <asp:label id="zprava" text="V srpnu slevy!" runat="server"></asp:label>
</body>
</html>
V něm jsou vidět také jakési tagy, ale do HTML nepatří. Pomocí těchto tagů se
do stránky vkládají ovládací prvky z ASP.Net. V našem případě to je snad
nejjednodušší ovládací prvek, který je k dispozici. Je jím label, neboli
popisek.
Pomocí atributů přidaných k tagu asp:label je možné popisku nastavit některé
vlastnosti. V našem případě jsme použili jen ty nezbytné. V první řadě je to
atribut id, který obsahuje název ovládacího prvku, a každý ovládací prvek
umístěný na stránku by měl mít tuto vlastnost nastavenu. Jinak by nebylo možné
na prvek odkazovat v okolním kódu. Navíc si pamatujte, že jméno každého
ovládacího prvku na stránce by mělo být jednoznačné. To znamená, že na stránce
nesmějí být dva ovládací prvky se stejným atributem id.
Není těžké uhodnout, že pomocí dalšího atributu text se nastavuje text, který
se má v popisku objevit. To daleko zajímavější je poslední atribut runat. Ten
budeme, stejně jako atribut id, používat pro všechny ovládací prvky, se kterými
budeme v tomto seriálu pracovat. Atribut runat udává, kde se má ovládací prvek
zpracovat. V drtivé většině případů bude mít hodnotu server. Tato hodnota říká,
že se má ovládací prvek zpracovat již na serveru. Tedy dříve než se stránka
dostane k uživateli. Zde je také odpověď na otázku, která už vás možná trápí od
minula: Jak si prohlížeč poradí s těmi podivnými tagy? Odpověď vás asi
nepřekvapí: Prohlížeč si s nimi neporadí. A ani nemůže. Prohlížeče jsou
vytvořeny tak, že umějí zobrazovat pouze HTML stránky. Cokoli je v nich navíc,
zobrazí se špatně. Vy však již z minula víte, že naše stránka se navzdory tomu
zobrazila přesně tak, jak jsme chtěli. Záhada! Abychom ji vyřešili, podíváme se
na zdrojový kód zobrazení stránky. Používáte-li Internet Explorer, zadejte
příkaz Zobrazit » Zdrojový kód.
Jak zjistíte, po podezřelém tagu asp:label a jeho atributech zde není ani
památky. Místo něho je prohlížeči dodán naprosto srozumitelný HTML kód. To vše
právě díky atributu runat. Jestliže se u nějakého ovládacího prvku objeví
napsáno runat="server", nahradí ASP.Net před odesláním stránky do prohlížeče
celý prvek odpovídající skupinou HTML tagů. Proto nikdy na atribut runat
nesmíte zapomenout. V opačném případě se do prohlížeče pošle stránka přesně
tak, jak jste ji zadali ve zdrojovém souboru, a výsledek bude žalostný. Můžete
si to vyzkoušet, když atribut ze stránky na okamžik odstraníte. Pak ho tam ale
rychle vraťte, protože budeme naši stránku vylepšovat.
Formátování stránky
Popravdě řečeno, přestože ukázková stránka funguje, příliš krásy nepobrala. A
jestli chceme na naše báječné slevy někoho nalákat, musíme ji vylepšit
například tím, že zvětšíme písmo a použijeme červenou barvu. Nyní máme dvě
možnosti, jak to udělat. První z nich jde cestou vlastní úpravy HTML, kdy na
stránce sami vytvoříme potřebný kaskádový styl a s jeho pomocí zformátujeme
požadovanou část stránky. Například takto:
<html>
<head>
<title>První stránka v ASP.Net</title>
<style type="text/css"> div.tucne { color:red; font-size:large; font-family:
Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; text-align:
center; }
</style>
</head>
<body>
<div class="tucne"> <asp:label id="zprava" text="V srpnu slevy!"
runat="server"></asp:label>
</div>
</body>
</html>
Zobrazíte-li stránku v prohlížeči, zjistíte, že vaši nabídku již nikdo
nepřehlédne.
Tento přístup má tu výhodu, že jednou vytvořený styl můžete snadno použít i na
další ovládací prvky, které byste na stránku umístili. Nevýhoda je, že vše
musíte napsat ručně. Používáte-li Visual Developer 2005, můžete si usnadnit
práci a všechny vlastnosti popisku nastavit v grafickém návrhovém prostředí.
Otevřete znovu původní verzi první stránky. Na spodní hraně okna se zdrojovým
kódem jsou dvě tlačítka Source (Zdroj) a Design (Návrh). Když stisknete
tlačítko Design, uvidíte, jak bude který ovládací prvek vypadat v prohlížeči.
Navíc zde můžete snadno upravovat veškeré vlastnosti ovládacího prvku. Stačí
když stiskem klávesy [F4] nebo příkazem View » Properties Window zobrazíte okno
s vlastnostmi.
Nyní vyberte myší ovládací prvek zprava a v okně Properties můžete nastavit
všechny jeho vlastnosti. Jakmile nějakou vlastnost nastavíte, ihned vidíte, jak
se to projevilo na výsledném vzhledu ovládacího prvku. O tom se nakonec můžete
přesvědčit i na obrázku.
Až budete se vzhledem stránky spokojeni, přepněte se stiskem tlačítka Source
zpět do zobrazení zdrojového kódu. Všimněte si, že se zde u definice ovládacího
prvku automaticky doplnila všechna nastavení. Zdrojový kód stránky teď vypadá
takto:
<html>
<body> <asp:label id="zprava" text="V srpnu slevy!" runat="server"
Font-Bold="True" Font-Size="Large" ForeColor="Red"
Font-Names="Verdana,Geneva,Arial,Helvetica,sans-serif"> </asp:label>
</body>
</html>
Nastavování vlastností v okně Properties je výhodné v tom, že se nemusí tolik
psát a vše se dá "naklikat" myší. To je velice příjemné, zejména u složitějších
stránek. Nevýhoda je naopak v tom, že se musí vlastnosti nastavovat pro každý
ovládací prvek zvlášť. Ať už se rozhodnete pro kterýkoli přístup, bude stránka
v obou případech vypadat stejně. Do příště si ji pečlivě prohlédněte a
prozkoumejte, jaké vlastnosti je možné nastavovat pro ovládací prvek label.
Mnoho z nich je totiž společných i pro ostatní prvky, které budeme používat v
budoucnu. V příštím díle si ukážeme první interaktivní stránku a začneme již
opravdu programovat.(pat) 6 1120









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.