Microsoft připravil pro vývojáře webových stránek několik pokročilých komponent pro použití v ASP.NET stránkách. Zobrazení navigačního menu, stromu, nebo nástrojové lišty je nyní otázkou několika minut.
V dnešním povídání o .NET si přiblížíme komponenty z knihovny
Internet Explorer WebControls. Tento balíček nabízí několik velice silných komponent, které byly zatím k dispozici pouze pro vývojáře Windows formulářů.
V dalších dílech se pak můžete těšit na podrobnější popis a ukázky pokročilejších technik při práci s touto mocnou knihovnou. Zdrojový kód k dnešnímu článku si můžete stáhnout zde (17 kB).
Před tím, než začneme, je nutné si samotnou knihovnu stáhnout z MSDN. Doporučuji stažení verze obsahující serverovou i klientskou část (Automatic Install). Poté, co je knihovna správně nainstalována, je ještě nutné přidat komponenty do Toolboxu Visual Studia .NET . V případě, že vlastníte pouze .NET Framework SDK, můžete tento krok vynechat.
V Toolboxu zvolíme možnost Add Tab a přidáme novou záložku s názvem IE WebControls. Poté otevřeme tuto záložku a zvolíme Customize Toolbox. V záložce .NET Framework Components vyhledáme pomocí tlačítka Browse soubor Microsoft.Web.UI.WebControls.dll, který se nachází po instalaci v adresáři „C:\Program Files\Microsoft Internet Explorer WebControls“. Poté už jenom potvrdíme výběr nových komponent a ty jsou následně přidány do Toolboxu.
Z obrázku je patrno, že máme k dispozici 4 nové komponenty : MultiPage, TabStrip, ToolBar a TreeView. Podívejme se nyní na tyto komponenty jednotlivě.
ToolBar
Toolbar je lišta obsahující různé přepínače, volby a možnosti – prostě nástrojová lišta. Do stránky ji vložíme použitím značek :
<iewc:Toolbar id="Toolbar1" runat="server"> ... </iewc:Toolbar>
Dovnitř pak vkládáme jednotlivé prvky lišty. Zkusme například vytvořit lištu pro magazín věnující se programování. U takového magazínu bychom třeba chtěli mít nad článkem volby, které budou zobrazovat/skrývat komentáře, přepínat v jakém programovacím jazyku budou příklady k článku zobrazeny a podle náročnosti čtenáře budou zobrazovat nebo skrývat některé části článku. Uvedenou lištu si můžete prohlédnout zde.
Zdrojový kód pro tuto lištu vypadá takto (Toolbar.aspx):
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Page language="c#" Codebehind="ToolBar.aspx.cs" AutoEventWireup="false" Inherits="iectrl.ToolBar" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>ToolBar</title>
</HEAD>
<body >
<form id="ToolBar" method="post" runat="server">
<iewc:Toolbar id="Toolbar1" runat="server">
<iewc:ToolbarCheckButton Text="Komentáře"></iewc:ToolbarCheckButton>
<iewc:ToolbarSeparator></iewc:ToolbarSeparator>
<iewc:ToolbarCheckGroup>
<iewc:ToolbarCheckButton Text="C#"></iewc:ToolbarCheckButton>
<iewc:ToolbarCheckButton Text="VB .NET"></iewc:ToolbarCheckButton>
<iewc:ToolbarCheckButton Text="JScript .NET"></iewc:ToolbarCheckButton>
</iewc:ToolbarCheckGroup>
<iewc:ToolbarSeparator></iewc:ToolbarSeparator>
<iewc:ToolbarDropDownList>
<asp:ListItem Value="1" Selected="True">Začátečník</asp:ListItem>
<asp:ListItem Value="2">Pokročilí</asp:ListItem>
<asp:ListItem Value="3">Expert</asp:ListItem>
</iewc:ToolbarDropDownList>
</iewc:Toolbar>
</form>
</body>
</HTML>
Jak můžete vidět, na začátku stránky je pomocí direktivy @ Register přidána reference na knihovnu WebControls přičemž je předpona iewc registrována pro značky komponent z této knihovny. To je pak to iewc, které používáme v definici Toolbaru i ostatních komponent z knihovny na stránce.
Samotná definice políček a přepínačů uvnitř Toolbaru je uvedena uvnitř značek definující Toolbar. Můžete vidět použití např, ToolbarCheckButton. Zde je seznam všech možných značek a odpovídajících objektů, které se můžou v Toolbaru vyskytnout :
| ASP.NET |
Popis |
| ToolbarButton |
Definuje tlačítko. |
| ToolbarCheckButton |
Definuje přepínací tlačítko. |
| ToolbarCheckGroup |
Definuje skupinu přepínacích tlačítek. |
| ToolbarDropDownList |
Definuje drop-down seznam. |
| ToolbarLabel |
Definuje nápis. |
| ToolbarSeparator |
Definuje oddělovač. |
| ToolbarTextBox |
Definuje TextBox (input). |
MultiPage a TabStrip
MultiPage je komponenta umožňující vytvoření více stránek v jedné. Stránky se dají následně velice jednoduše přepínat mezi sebou – umožňuje-li to navíc i prohlížeč, může přepínání proběhnout na straně klienta, což je mnohdy velice efektní.
Pomocí komponenty TabStrip je možné nechat Multipage ve spojení se záložkami, což vytváří efekt podobný windows formulářům. Po kliknutí na záložku se objeví odpovídající stránka z Multipage. Ku příkladu se podívejme na formulář, který obsahuje data o klientovi systému. Takový může obsahovat obecné informace, jako např. Jméno, Příjmení, Adresa, atd. Méně důležité informace (WWW stránka, poznámky a pod.) můžou být v samostatné záložce Podrobnosti uvedené odděleně :
Pokud si vyzkoušíte ukázku na této adrese, můžete vidět, jak se obsah formuláře přepíná společně se záložkami. Pokud navíc prohlížíte stránku s prohlížeče Internet Explorer verze 5.5 a vyšší, můžete vidět, že veškeré přepínání funguje na straně klienta, což má za následek vyšší rychlost aplikace a nižší zátěž serveru.
Zde uvádím výpis zdrojového kódu TabStrip.aspx pro takovýto formulář:
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Page language="c#" Codebehind="TabStrip.aspx.cs" AutoEventWireup="false" Inherits="iectrl.TabStrip" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>TabStrip</title>
</HEAD>
<body >
<form id="TabStrip" method="post" runat="server">
<IEWC:TABSTRIP width="280" id=TabStrip1 style="FONT-WEIGHT: bold" runat="server" TargetID="MultiPage1" Orientation="Horizontal" tabdefaultstyle="border:solid 1px black;background:#dddddd;padding-left:5px;padding-right:5px;" sepdefaultstyle="border-bottom:solid 1px #000000;" tabselectedstyle="border:solid 1px black;border-bottom:none;background:white;padding-left:5px;padding-right:5px;" selectedindex="0" tabhoverstyle="color:red;">
<iewc:Tab Text="Obecné"></iewc:Tab>
<iewc:Tab Text="Podrobnosti"></iewc:Tab>
</IEWC:TABSTRIP>
<iewc:MultiPage width="280" id=MultiPage1 runat="server" >
<IEWC:PAGEVIEW id="PageView1" style="border-left:solid 1px;border-right:solid 1px;border-bottom:solid 1px">
<table>
<tr><td>Jméno :</td><td><asp:TextBox id="FirstName" runat="server"/></td></tr>
<tr><td>Příjmení :</td><td><asp:TextBox id="LastName" runat="server"/></td></tr>
<tr><td>Ulice :</td><td><asp:TextBox id="Street" runat="server"/></td></tr>
<tr><td>PSČ :</td><td><asp:TextBox id="PostCode" runat="server"/></td></tr>
<tr><td>Město :</td><td><asp:TextBox id="City" runat="server"/></td></tr>
<tr><td>Stát : </td><td><asp:TextBox id="Country" runat="server"/></td></tr>
<tr><td>Email :</td><td><asp:TextBox id="Email" runat="server"/></td></tr>
</table>
</IEWC:PAGEVIEW>
<IEWC:PAGEVIEW id="PageView2" style="border-left:solid 1px;border-right:solid 1px;border-bottom:solid 1px">
<table>
<tr><td>Poznámka :</td><td><asp:TextBox id="Note" runat="server" TextMode="MultiLine"/></td></tr>
<tr><td>WWW :</td><td><asp:TextBox id="WWWPage" runat="server"/></td></tr>
<tr><td>Sleva :</td><td><asp:TextBox id="Discount" runat="server"/></td></tr>
</table>
</IEWC:PAGEVIEW>
</iewc:MultiPage>
</form>
</body>
</HTML>
Stránka se dělí na dvě hlavní části – TabStrip a MultiPage. V TabStripu definujeme názvy a styly pro záložky, v MultiPage pak obsah stránek odpovídající jednotlivým záložkám. Každá taková stránka je vložena do objektu PageView:
<IEWC:PAGEVIEW id="PageView2"> ... </IEWC:PAGEVIEW>
Vzájemné propojení mezi TabStripem a MultiPage je pak provedeno velice jednoduše přidáním názvu objektu MultiPage do parametru TargetID objektu TabStrip :
<IEWC:TABSTRIP width="280" id=TabStrip1 TargetID="MultiPage1" Orientation="Horizontal>
...
</IEWC:TABSTRIP>
TreeView
Tuto komponentu jsem si schválně nechal nakonec – považuji ji totiž za „třešničku na dortu“. TreeView umožňuje stromové zobrazení dat s možností rozbalování a zabalování jednotlivých větví. V praxi se můžete často setkat se stromovou hierarchií a právě pro zobrazení tohoto typu dat je TreeView určen.
TreeView si při požadavku na stránku zjistí, zda prohlížeč podporuje JavaScript, pokud ano, vygeneruje HTML, které umožňuje rozbalování a zabalování větví na klientovi bez nutnosti odeslat stránku při každém kliknutí na komponentu. V případě „nižších“ prohlížečů se odešle zpátky klientovy HTML odpovídající verzi 3.2 . V tomto případě je nutný post-back při každé interakci.
Podívejme se teď na jednoduché ukázky používání komponenty TreeView. Asi nejjednodužší je vytvořit staticky stromovou strukturu přímo v návrhovém zobrazení Visual Studia .NET :
Poté už stačí jenom spustit tuto stránku. Na výsledek se můžete podívat zde. Schválně si zkuste otevřít stránku ve starším prohlížeči – např. Netscape Navigator 4.7 vyžaduje novou stránku při rozbalování a zabalování jednotlivých větví. Naproti tomu, Internet Explorer 6 všechno zajišťuje pomocí JavaScriptu.
Podívejme se nyní na výpis zdrojového kódu stránky TreeView.aspx:
<%@ Page language="c#" Codebehind="TreeView.aspx.cs" AutoEventWireup="false" Inherits="iectrl.WebForm1" %>
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>TreeView ukázka</title>
</HEAD>
<body >
<form id="Form1" method="post" runat="server">
<iewc:TreeView id="TreeView1" runat="server">
<iewc:TreeNode Text="Alkoholické nápoje">
<iewc:TreeNode Text="Víno">
<iewc:TreeNode Text="Červené"></iewc:TreeNode>
<iewc:TreeNode Text="Bílé"></iewc:TreeNode>
<iewc:TreeNode Text="Růžové"></iewc:TreeNode>
</iewc:TreeNode>
<iewc:TreeNode Text="Pivo">
<iewc:TreeNode Text="Radegast"></iewc:TreeNode>
<iewc:TreeNode Text="Velkopopovický kozel"></iewc:TreeNode>
<iewc:TreeNode Text="Krušovice"></iewc:TreeNode>
</iewc:TreeNode>
<iewc:TreeNode Text="Tvrdé">
<iewc:TreeNode Text="Vodka"></iewc:TreeNode>
<iewc:TreeNode Text="Whisky"></iewc:TreeNode>
<iewc:TreeNode Text="Slivovice"></iewc:TreeNode>
</iewc:TreeNode>
</iewc:TreeNode>
</iewc:TreeView>
</form>
</body>
</HTML>
Jak můžete z výpisu vidět, komponenta TreeView je reprezentována značkami :
<iewc:TreeView id="TreeView1" runat="server">...</iewc:TreeView>
Uvnitř se pak nachází definice dat pro zobrazení ve stromu. Data jsou ve formátu XML a využívají jedinou značku TreeNode. Vzájemným vnořováním pak dosáhneme větvení.
Závěr
Veliká přednosti komponent WebControls je, že optimalizují výsledné HTML v závislosti na prohlížeči. Pokud to prohlížeč umožňuje, probíhá většina práce na straně klienta, což mnohonásobně zvyšuje rychlost a komfort a zároveň snižuje počet dotazů na server. WebControls ale fungují správně i v ostatních prohlížečích, které podporují standard HTML 3.2 .
Dnešní článek měl sloužit jenom jako letmá orientace v možnostech komponent z knihovny Internet Explorer WebControls. V příštích dílech si povíme o jednotlivých komponentech více, ukážeme si také jak efektivněji využívat TreeView pro zobrazení dynamických dat.
Ještě jednou pro úplnost uvádím odkaz pro stažení (17 kB) zdrojových souborů ukázek ke článku.
