Vytváření komponent v ASP.NET

ASP.NET pro programátory připravilo velice flexibilní základnu pro vytváření komponent. Na rozdíl od ASP, kde jedinou praktickou možností jak simulovat komponentový přístup byla direktiva #include, poskytuje ASP.NET velice bohaté možnosti vytváření komponent, modulů, designérů komponent a mnoha dalších.
Jednoduchý příklad komponenty jste mohli vidět v jednom z předchozích dílů, který se zabýval výstavbou ukázkové komponenty Anketa. Tento úvod do komponentového vývoje ukázal jenom jeho velice zjednodušené základy. ASP.NET umožňuje mnohem bohatší vývoj komponent, některé z přístupů se dnes objasníme na příkladech.

V ASP.NET známe dva základní typy uživatelských komponent:

  • Web User Control
  • Web Custom Control
Obě mají své výhody i nevýhody, svá vlastní pole určení a specifické požadavky pro implementaci. Pro ty kteří sledují tento seriál od začátku jenom dodávám, že Anketa s předchozích dílů byla příkladem Web User Controlu.

Na příkladech se pokusím charakterizovat typické vlastnosti jednotlivých typů komponent.

Příklad č.1 - Komponenta tlačítko

První ukázka nebude v praxi moc použitelná - pokusíme se o základní implementaci již existující komponenty - tlačítka Button z knihovny WebControls. Uvedu jak implementaci pomocí Web User Control, tak i pomocí Web Custom Control.

Nejdříve tedy pomocí Web User Control:

Web User Control je v podstatě část kódu normální .ASPX stránky ( v tomto jednoduchém případě čisté HTML), který je vložen do souboru s příponou .ASCX:

<input type="button" value="Tlacitko 1">

[button1.ascx]

Pokud chceme tuto jednoduchou komponentu použít na stránce, musíme na její začátek vložit direktivu @ Register s odpovídajícími parametry. Na místo, kam chceme vložit tlačítko, pak napíšeme XML značku formovanou právě pomocí slov předaných ASP.NET v direktivě @ Register:

<%@ Register TagPrefix="tlacitko1" TagName="Butt" Src="button1.ascx" %>
<%@ Register TagPrefix="tlacitko2" Namespace="_9" Assembly="9" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
    <title>Tlacitka</title>
</HEAD>
  <body >

<form id="Form1" method="post" runat="server">
<P>
Web User Control ><tlacitko1:Butt id="Button1" runat="server"></tlacitko1:Butt>
</P>
<P>
Web Custom Cotrol ><tlacitko2:button2 id="Button21" runat="server"></tlacitko2:button2>
</P>
</form>

  </body>
</HTML>

A teď Web Custom Control:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace _9
{
public class button2 : WebControl
{
protected override void Render(HtmlTextWriter output)
{
output.Write("<input type=\"button\" value=\"Tlacitko 2\">");
}
}
}

[button2.cs]

Ten vypadá i funguje o trochu složitěji. Vytváříme novou třídu, která je odvozena od třídy Control. Potlačením metody Render, která je definována v rodičovské třídě, implementujeme samotný HTML výstup dané komponenty. Metoda Render obsahuje parametr typu HtmlTextWriter, který slouží pro výstup HTML z komponenty na stránku.

Jak bude vypadat ukázková stránka se vloženými tlačítky se můžete podívat zde.

Na tomto příkladu si můžeme shrnout následující rozdíly mezi Web User Control a Web Custom Control komponentami:

  • Návrhová podpora:
    • Web User Control: dobrá
    • Web Custom Control: minimální
  • Složitost (náročnost implementace):
    • Web User Control: malá
    • Web Custom Control: vysoká

Web User Control se vytváří stejně jako ASPX stránka - můžete použít stejný designér ve Visual Studiu .NET . Naproti tomu, Web Custom Control musí mít HTML výstup programovaný ručně, což zahrnuje více času stráveného psaním a laděním kódu.

  • Nasazení komponenty
    • Web User Control : omezené, jednoduché a jednoúčelové aplikace
    • Web Custom Control : globální, více obecné, složitější systémy

Pro použití musí být v každé aplikaci, která jej využívá, fyzicky nakopírován váš Web User Control. Pro použití Web Custom Controlu stačí jedna dll knihovna umístněna v Global Assembly Cache - zásobníku knihoven pro všechny aplikace, které ji chtějí využívat. Web Custom Control se kompiluje jako dll knihovna, zatímco Web User Control je obsazěn v ASCX souboru, v případě codebehind má navíc ještě další dll knihovnu pro kód dané ASCX stránky. Oba tyto soubory je nutné mít v aplikaci pro provoz komponenty. Z toho plyne větší náročnost na údržbu - v případě změn v kódu musíte novou verzi rozkopírovat do všech aplikací. U Web Custom Controlu se změny automaticky reflektují okamžitě po přeložení knihovny ve všech aplikacích.

  • Použití v designéru
    • Web User Control : nedostatečné
    • Web Custom Control : výborné

Visual Studio vkládá místo Web User Controlu jenom čtverec označující místo vložení komponenty. Naproti tomu, Web Custom Control je plně vykreslen, přičemž je využívaná metoda Render() pro vykreslení dané komponenty. Stránka tím pádem vypadá skutečně jako náhled výsledného zobrazení. Na následujícím obrázku to můžete vidět v praxi. Ukázka vykresluje první příklad v návrhovém zobrazení Visual Studia .NET:

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

Web Custom Control můžete navíc přidat do okénka Toolbox a normálně s ním pracovat jako s komponentami WebControls:

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

To by bylo krátké srovnání, co jednotlivé typy komponent dokážou. Podívejme se nyní na možnosti vytváření Web Custom Controlů.

Web Custom Control s parametrem

Vytvořme nyní komponentu, která bude obsahovat různé parametry určující, jak bude vypadat výsledné zobrazení komponenty. Komponenta bude vypisovat text formátovaný podle parametrů. Založíme třídu Formater, která bude obsahovat informace o formátování. Dále naprogramujeme vlastní komponentu, která bude implementovat metodu Render() :

using System;
using System.Web;
using System.Web.UI;

namespace _9
{
public class Formater
{
private int            pSize;
private System.String  pColor;

public Formater(System.Int32 size, System.String color)
{
this.pSize = size;
this.pColor = color;
}
public String Color
{
get {return pColor;}
set {pColor = value;}
}
public int Size
{
get {return pSize;}
set {pSize = value;}
}
}
public class Message : Control
{
private Formater _format  = new Formater(3, "black");
private String  _message = null;

public String Text
{
get {return _message;}
set {_message = value;}
}

public Formater Format
{
get {return _format;}
set {_format = value;}
}

protected override void Render(HtmlTextWriter output)
{
output.Write("<font size=" + Format.Size + " color=" + Format.Color + ">");
output.Write(_message);
output.Write("</font>");
}
}   
}

Po vložení do cílové stránky můžeme přímo v aspx značce měnit vlastnosti deklarované jako public. Všimněte si použití třídy Formater - na její členy se odkazuje pomocí pomlčky, například Format-Color :

<%@ Register TagPrefix="cc1" Namespace="_9" Assembly="9" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <body>
    <form id="Form2" method="post" runat="server">
    <cc1:Message Text="Zdravim !" Format-Color="red" Format-Size="3" runat=server/>
    </form>
  </body>
</HTML>

Co to udělá, můžete vidět zde.

Přístup k vnitřnímu obsahu komponenty

V dalším příkladě si ukážeme, jak řešit následující situaci : Představte si, že chceme mít komponentu, která bude formátovat text zadaný uvnitř definice komponenty:

<mojetrida:Moje1 runat=server>Tady bude text se kterým chceme něco provést</mojetrida:Moje1>

Každý objekt který dědí ze System.Web.UI.Control obsahuje kolekci Controls. Při provádění stránky vytvoří parser ASP.NET pro každý element nebo text uvnitř dané komponenty odpovídající objekt a přiřadí jej do kolekce Controls dané komponenty. Samotný text se přidává jako LiteralControl. Příklad :

<mojetrida:Moje ID=Moje1 runat=server>
Něco
<asp:Button Text=Tady runat=server/>
Nehraje
</mojetrida:Moje>

Po spuštění bude kolekce Moje1.Controls obsahovat 3 objekty :

  • LiteralControl, s textem "Něco"
  • Button s textem "Tady"
  • LiteralControl obsahující text "Nehraje"
Na základě těchto poznatků můžeme vytvořit komponentu, která nám naformátuje vložený text:

public class Vnitrek : Control
{
protected override void Render(HtmlTextWriter output)
{
if (Controls[0] is LiteralControl)
  output.Write("<H2>Vnitřek je: " + ((LiteralControl) Controls[0]).Text + "</H2>");
}

}

Pokusná stránka bude obsahovat následující kód :

<%@ Register TagPrefix="cc1" Namespace="_9" Assembly="9" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <body >
    <form id="WebForm3" method="post" runat="server">
    <cc1:Vnitrek id="Vnitrek1" runat="server">Neco je uvnitř</cc1:Vnitrek>
    </form>
</body>
</HTML>

Výsledek je zde.

Jako poslední příklad si dnes uvedeme metodu, která nám ulehčí vytváření nových komponent Web Custom Control na základě komponent již existujících.

Skládání tříd

Class Composition - skládání tříd vychází z faktu, že všechny základní HTML značky mají své odpovídající třídy v ASP.NET v knihovně System.Web.UI . Proto pro vytvoření nové komponenty bude nejjednodušší jenom kombinovat příslušné HTML objekty, které provedou zobrazení pomocí svých vlastní Render() metod - my se pouze postaráme o vytvoření příslušného seznamu obsažených objektů. To docílíme přidáním požadovaných komponent do kolekce Controls naší komponenty. K tomuto využijeme metody CreateChildControls:

protected override void CreateChildControls()
{
  this.Controls.Add(new LiteralControl("<h3>" + "Value: "));
  TextBox box = new TextBox();
  box.Text = "0";
  this.Controls.Add(box);
  this.Controls.Add(new LiteralControl("</h3>"));
}
Ukázka vytvoří komponentu uvnitř naší komponenty text "Hodnota" následován vstupním polem TextBox.

Při vytváření dceřiných komponent v CreateChildControls můžeme také přiřadit ovladače událostí k událostem vyvolaným těmito komponentami:

protected override void CreateChildControls()
{
  Button subtractButton = new Button();
  subtractButton.Text = "Odečti";
  subtractButton.Click += new EventHandler(this.SubtractBtn_Click);
  this.Controls.Add(subtractButton);
}

private void SubtractBtn_Click(Object sender, EventArgs e)
{
  // udělej něco tady
}
Poslední příklad bude obsahovat komponentu se vstupní polem TextBox a dvěma tlačítky Subtract a Add, které budou zvyšovat, nebo snižovat hodnotu ve vstupním poli:

public class Skladani : Control
{
public int Value
{
  get {this.EnsureChildControls();return Int32.Parse(((TextBox)Controls[1]).Text);}
  set {this.EnsureChildControls(); ((TextBox)Controls[1]).Text = value.ToString();}
}

protected override void CreateChildControls()
{
// Přidáme Literal Control
this.Controls.Add(new LiteralControl("<h3>" + "Hodnota: "));
// Přidáme Textbox
TextBox box = new TextBox();
box.Text = "0";
this.Controls.Add(box);
this.Controls.Add(new LiteralControl("</h3>"));
// Tlačítko "Přidej"
Button addButton = new Button();
AddButton.Text = "Přidej";
addButton.Click += new EventHandler(this.AddBtn_Click);
this.Controls.Add(addButton);
// Tlačítko "Uber"
Button subtractButton = new Button();
subtractButton.Text = "Uber";
subtractButton.Click += new EventHandler(this.SubtractBtn_Click);
this.Controls.Add(subtractButton);
}

private void AddBtn_Click(Object sender, EventArgs e)
{
this.Value++;
}

private void SubtractBtn_Click(Object sender, EventArgs e)
{
this.Value--;
}
}

Nakonec přidávám ještě ukázkovou stránku, využívající tuto komponentu :

<%@ Register TagPrefix="cc1" Namespace="_9.CompositionSampleControls" Assembly="9" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <body >
  <form id="WebForm4" method="post" runat="server">
    <cc1:Skladani id="Skladani1" Value=5 runat="server"></cc1:Skladani>
    </form>
  </body>
</HTML>

Závěr

Dnes jsme si ukázali, jaké nabízí ASP.NET možnosti pro vytváření uživatelských komponent. Obecné pravidlo pro výběr mezi použitím Web User Control a Web Custom Control bych asi shrnul na základě mých vlastních zkušeností :

Pokud budete komponentu používat pouze pro jednu konkrétní aplikaci, máte již hotový její návrh v podobě ASPX stránky, použijte Web User Control.

V případě, že potřebujete, aby bylo použití vaší komponenty více uživatelsky přívětivou, pokud ji budou používat i jiní lidé než vy, nebo pokud bude používaná ve více projektech, zvolte Web Custom Control.

Diskuze (1) Další článek: Nejrychlejší vypalovačka

Témata článku: Software, Programování, HTML, Custom, Komponenta, Private, Public, ASP, Form, Vytváření, Control, Následující aplikace, Ukázkový příklad, Obecné pravidlo, Ukázková stránka, Komp, Toolbox, Jednoduchý typ, Výsledné zobrazení, Format, Button


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

Platby kartou se můžou rozšířit úplně všude. Jako terminál poslouží mobil
Lukáš Václavík
BankaPlacení mobilemNFC
Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

** Kde jsou ty doby, kdy měl skoro každý doma Photoshop ** Photoshop a Premiere Pro od kamaráda nebo z warezu ** Dnes už to nemá smysl, existuje totiž hromada laciných alternativ

Jakub Čížek | 92

Jakub Čížek
Grafický editorStřih videa
Elon Musk už není nejbohatší na světě. Během jediného dne přišel o 324 miliard korun
Karel Kilián
Jeff BezosTesla MotorsElon Musk
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
Čekali jsme skoro šest let. Android Auto jede do Česka i na Slovensko
Lukáš Václavík
Android AutoNavigaceGoogle
Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

** Chcete se teď hned naučit programovat čipy? ** Nechcete nic instalovat a číst zdlouhavé manuály? ** Naprogramujeme si Micro:bit, který zahraje Tichou noc

Jakub Čížek | 35

Jakub Čížek
Pojďme programovat elektronikuProgramování pro děti

Aktuální číslo časopisu Computer

Megatest rychlých Wi-Fi 6 routerů

Jak ztišit počítač

Velký test mATX skříní