Komponenty pro ASP.NET 1.

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.

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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ě :

Klepněte pro větší obrázek

Klepněte pro větší obrázek

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 :

Klepněte pro větší obrázek

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.

Diskuze (11) Další článek: Světový šampionát FIFA 2002 pouze na Windows

Témata článku: Software, Microsoft, Programování, Internet Explorer, Jednotlivá značka, Přepínací tlačítko, Komp, Form, Browse, Toolbox, Stromové zobrazení, Whisky, HTML, ASP, Runa, Komponenta, Dnešní povídání, Zobrazená data, Většina práce, Head, Vodka, Jednotlivé komponenty, Záložka, Předpona, Verze obsahující


Určitě si přečtěte

Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

** Testujeme Apple Macbook Air s procesorem M1 ** Zajímá nás nejen výkon, ale zejména kompatibilita aplikací ** Článek je průběžně doplňován na základě vašich dotazů

Jiří Kuruc | 209

Jiří Kuruc
Apple
Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé
Markéta Mikešová
WhatsAppElon MuskFacebook
Avast Omni: Krabička, která vám hackne síť a promění se v unikátní antivirus

Avast Omni: Krabička, která vám hackne síť a promění se v unikátní antivirus

** Počítač dnes ochrání kdejaký antivirus ** Drobná krabička Omni se postará rovnou o celou domácí síť ** Bude ji odposlouchávat, analyzovat a blokovat útoky

Jakub Čížek | 120

Jakub Čížek
AntivirusIoT
Můžete mít dvakrát rychlejší VDSL? Mapa Cetinu ukazuje, kde je dostupný bonding
Lukáš Václavík
CETINPřipojení k internetu
Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

** Tranzistory současných počítačů vyzařují při přepínání teplo ** Na Tokijské univerzitě proto vyvíjejí adiabatické procesory ** Využívají supravodivost a jsou 80× úspornější

Jakub Čížek | 48

Jakub Čížek
TranzistoryProcesoryTechnologie
Konec modrých obrazovek smrti? Microsoft vydává mimořádnou aktualizaci pro Windows 10
Karel Kilián
Windows UpdateAktualizaceWindows 10
Lépe bylo bez Googlu, přiznal s odstupem bývalý šéf Waze
Markéta Mikešová
WazeGoogle