Návrhová podpora v ASP.NET a Visual Studiu .NET

Po vytvoření komponenty je často potřeba ji zpřístupnit široké komunitě vývojářů. Aby ji mohli ostatní vývojáři přidávat do svých projektů bez její podrobné znalosti, je nutné aby taková komponenta umožňovala jednoduché použití v návrhovém zobrazení ve Visual Studiu .NET.

Návrhové zobrazení se nám zobrazí při načtení ASPX stránky do vývojového prostředí Visual Studia .NET a přepnutí do návrhového módu pomocí tlačítka Design. Takovéto zobrazení by mělo ukazovat stránku v přibližně takovém tvaru, jak bude vypadat výsledně po spuštění programu. Fakt, že tomu ne vždy tak je opomeneme, a spíš se podíváme, jak můžeme sami jako programátoři ovlivňovat vzhled svých komponent poté, co jsou umístněny na plochu stránky.

Toolbox

V článku o vytváření komponent bylo ukázané, jak je možné vytvářet vlastní komponenty, které se na stránkách často opakují. Pokud takovou komponentu zkompilujeme, výslednou DLL knihovnu můžeme distribuovat jiným vývojářům. Jak přidáme novou komponentu, kterou vytvořil někdo jiný do prostředí Visual Studia .NET ? V liště Toolbox zvolíme Customize Toolbox:

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

V následujícím dialogovém okně máme na výběr přidání ActiveX componenty, nebo .NET komponenty. Po výběru odpovídající DLL knihovny můžeme vybrat mezi jednotlivými komponentami v dané knihovně. Ty jsou následně přidané do Toolboxu. Poté již můžeme komponenty přidávat velice jednoduše na plochu stránky pouhým přetažením z toolboxu.

Komponenta

Vytvořme si nyní ukázkový příklad. Ukázková komponenta bude přihlašovací formulář – bude obsahovat vstupní pole pro uživatelské jméno a heslo. Dále bude obsahovat tlačítko pro provedení samotného přihlášení a následující vlastnosti a události:

  • UserName – obsahuje aktuální uživatelské jméno.
  • Password – obsahuje aktuálně zadané heslo.
  • LoginButtonText - je text, který bude zobrazen na tlačítku provádějící přihlášení.
  • DoLogin – událost, která je vyvolána poté, co bylo stlačeno tlačítko pro přihlášení.

Zdrojový kód takové komponenty bude vypadat následovně:

public class Login : System.Web.UI.WebControls.WebControl,INamingContainer
{
protected TextBox userNameBox = new TextBox();
protected TextBox passwordBox = new TextBox();
protected Button loginButton  = new Button();

public string Password
{
get{return passwordBox.Text;}
set{passwordBox.Text = value;}
}

public string LoginButtonText
{
get{return loginButton.Text;}
set{loginButton.Text = value;ChildControlsCreated=false;}
}

public string UserName
{
get{return userNameBox.Text;}
set{userNameBox.Text = value;ChildControlsCreated=false;}
}

public event EventHandler DoLogin;

private void OnLogin(object sender, EventArgs e)
{
if(DoLogin!=null) DoLogin(this,e);
}

public new void RenderControl(HtmlTextWriter tw)
{
this.EnsureChildControls();
base.RenderControl(tw);
}

protected override void CreateChildControls()
{
EnableViewState=true;
userNameBox.Text    = UserName;
passwordBox.Text    = Password;
passwordBox.TextMode = TextBoxMode.Password;
loginButton.Text    = LoginButtonText;
loginButton.Click  += new EventHandler(OnLogin);
this.Controls.Add(userNameBox);Controls.Add(new LiteralControl("<br>"));
this.Controls.Add(passwordBox);Controls.Add(new LiteralControl("<br>"));
this.Controls.Add(loginButton);
}
}

Ze zdrojového kódu můžeme vidět, že se jedná o komponentu typu Web Custom Composite Control (podrobnější popis typů komponent najdete v tomto článku.) Po zkompilování komponenty, přidání do Toolboxu a následném vložení na ASPX stránku můžeme vidět pouze následující zobrazení komponenty:

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

Vidíme, že Visual Studio .NET nevykresluje správně komponentu. Po spuštění programu ale vidíme všechno tak jak má být:

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

V čem je tedy problém ? Visual Studio .NET automaticky nevykresluje uživatelské komponenty. Častokrát se totiž stává, že je nutné před zobrazením komponenty načíst data a ta nejsou v době návrhu přístupná. Proto Visual Studio raději nespoléhá na to, zda je komponenta správně inicializována, nebo ne, raději ji vůbec nevykreslí. Místo ní vykreslí pouze „placeholder“ – značku rezervující místo pro umístnění komponenty.

Designér

Pokud chceme, aby byla komponenta zobrazena v době návrhu, musíme vytvořit novou třídu typu System.Web.UI.Design.ControlDesigner. Ta napoví Visual Studiu, jak zobrazovat danou komponentu v době návrhu. Třída ControlDesigner má spoustu metod a vlastností, pro nás jsou pro začátek zajímavé pouze následující 2:

  • Component – tato vlastnost obsahuje instanci komponenty pro kterou vytváří návrhové zobrazení.
  • GetDesignTimeHTML – tuto metodu musí implementovat tvůrce komponenty. Vrací HTML, které má být použité pro zobrazení komponenty v návrhovém režimu.

Implementace jednoduchého designéru pro komponentu přihlašovacího formuláře Login by mohla vypadat takto:

public class LoginDesigner : ControlDesigner
{

public override string GetDesignTimeHtml()
{
Login l = (Login)this.Component;
StringWriter swriter = new StringWriter();
HtmlTextWriter writer= new  HtmlTextWriter(swriter);
l.RenderControl(writer);
return swriter.ToString();
}

}

Ve třídě LoginDesigner se nachází pouze jediná metoda a to již zmiňovaná GetDesignTimeHTML. Ta získá HTML z komponenty login následujícím způsobem:

  • Získá aktuální komponentu, která leží někde na stránce v návrhovém režimu pomocí vlastnosti Component a přetypuje ji na typ Login, pro případ další manipulace:

      Login l = (Login)this.Component;

  • Vytvoří StringWriter, který zapisuje řetězec znaků do proměnné string (v našem případě již bude obsahovat výsledné HTML).
  • Vytvoří HTMLTextWriter a předá jej metodě RenderControl. Ta naplní HTMLTextWriter výsledným HTML kódem, který je převeden na string a ten je vrácen jako návratová hodnota metody GetDesignTimeHTML.

Nakonec nám zbývá propojit designér a komponentu. Toho dosáhneme přidáním atributu Designer před definici třídy Login:

[Designer("WebControlLibrary1.LoginDesigner")]
public class Login : System.Web.UI.WebControls.WebControl,INamingContainer
{

protected TextBox userNameBox = new TextBox();
protected TextBox passwordBox = new TextBox();
protected Button loginButton  = new Button();

.
.
.

Pokud se nyní podíváme na stránku obsahující komponentu Login v návrhovém zobrazení, můžeme vidět následující:

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

Atributy

Atributy jsou velice silným prostředkem .NET . Umožňují přidávat k metadatům přídavné informace. Bohužel by toto téma zabralo samostatný článek a proto tady uvedu na úvod do problematiky atributů pouze odkaz na článek z MSDN.

Pro dnešek postačí, když si atributy představíte pouze jako speciální příkazy umožňující blíže specifikovat danou třídu nebo vlastnost. Jedním z takových atributů je právě atribut Designer, který byl aplikován na třídu Login a specifikuje, jaký designér má být použit pro návrhové zobrazení dané třídy (komponenty):

[Designer("WebControlLibrary1.LoginDesigner")]

Můžeme vidět, že atribut je ohraničen hranatými závorkami []. Nejenom celým třídám, ale i jednotlivým vlastnostem můžeme přidávat atributy. Můžeme například napsat před vlastnost UserName třídy Login tyto atributy:

[
Bindable(true),
Category("Nova Kategorie"),
DefaultValue(""),
Description("Tato vlastnost určuje text, který se má zobrazit na tlačítku pro odeslání přihlašovacích údajů")
]
public string UserName
{
get{return userNameBox.Text;}
set{userNameBox.Text = value;ChildControlsCreated=false;}
}

Sdělujeme tím Visual Studiu, aby zařadil tuto vlastnost do Nové kategorie, aby mohla být navázána na datový zdroj a že výchozí hodnota je prázdný řetězec. Dále se také v okénku Properties zobrazí text určený atributem Description jako popisek vlastnosti. Pokud se nyní podíváme do návrhového zobrazení a do lišty Properties, můžeme vidět následující údaje, které korespondují s tím, co jsme zadali v atributech:

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

Závěr

Dneska jsme pouze velice povrchně načrtli možnosti návrhového zobrazení komponent ve Visual Studiu. Tato oblast je velice rozsáhlá, a pro ty, kteří by chtěli získat více informací můžu nabídnout následující odkazy:

Někteří z vás můžou k dnešnímu tématu namítnout, že celá problematika točící se kolem návrhové podpory je úzce svázána s vývojovým prostředím Visual Studia .NET. Tady musím ale oponovat - váš kód komponenty bude fungovat naprosto bezchybně i bez Visual Studia. A do budoucna je možné, že se najde IDE, které bude implementovat v návrhovém zobrazení podporu design-time atributů. Všechna funkce a dokumentace .NET jsou totiž otevřené, takže záleží jenom na konkurenčních subjektech a/nebo opensource komunitě až budou i jiné nástroje než Visual Studio .NET podporovat to co podporuje toto vývojové prostředí.

Diskuze (1) Další článek: Změna pojmenování IEEE1394 na Firewire?

Témata článku: Software, Microsoft, Programování, Stud, Login, Vývojový režim, Visual, Toolbox, Přihlašovací stránka, Public, Button, Jediná metoda, Podpor, Komponenta, Podpora, Password, Nejlepší zdroj, Designer, ASP, MSN News, Návrh


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

Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

** Desktopový Linux funguje a vypadá stále lépe ** Fedora 33 není výjimkou ** Ve stínu Windows a macOS tu vyrostly skvělé alternativy

Jakub Čížek | 167

Jakub Čížek
FedoraOperační systémyLinux
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 | 119

Jakub Čížek
AntivirusIoT
Cableporn: Podívejte se na úžasná díla umělců z podnikových serveroven

Cableporn: Podívejte se na úžasná díla umělců z podnikových serveroven

** Uspořádání kabelů můžete vnímat i jako podivný druh umění ** To nejkrásnější se skrývá v datacentrech a serverovnách ** Podívejte se na skutečné „cableporn“ z optiky i kroucené dvojlinky

Vojtěch Malý | 53

Vojtěch Malý
DatacentraServery
Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

** Každý nový počítač si zaslouží počáteční péči ** Odinstalujte bloatware a nezapomeňte na vhodné nastavení ** Poradíme, jak se o počítač s Windows 10 postarat

David Polesný, Stanislav Janů | 75

David PolesnýStanislav Janů
PočítačeNotebooky
Týden Živě: On fakt dnes ještě někdo stahuje filmy z Ulož.to?

Týden Živě: On fakt dnes ještě někdo stahuje filmy z Ulož.to?

** Kauza Ulož.to a proč my dva už (moc) newarezíme ** Windows 10X existují, ale nabízí se otázka proč ** Nissan ukázal vizi kanceláře v podobě karavanu

Jakub Čížek, Vladislav Kluska | 152

Jakub ČížekVladislav Kluska
Týden ŽivěVideo
Pozor na tyto doplňky pro Chrome a Edge. Mohou obsahovat malware, varuje Avast
Jakub Čížek
MalwareProhlížeče

Aktuální číslo časopisu Computer

Megatest herních monitorů

Jak zabezpečit mobil v rukou dítěte

Radíme s nákupem grafické karty