C# - Egéresemények megvalósítása WebControl-ok esetén

forráskód letöltése
Ebben a példában egy olyan WebControlt hozunk létre, mely megjeleníti a két property-jében megadott kép valamelyikét. A megjelenített kép attól függően változik, hogy az egérmutató éppen a kép fölött, vagy a képen kívül található.
Mellékelt példa megnyitása előtt szükséges egy TestApplication nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
Követelmény a kontrollal szemben, hogy ha változik a két property-je, akkor változzanak a megjelenítendő képek is.
A melléklet két project-et tartalmaz, az egyik a WebControl project-je, míg a másikban a használatát demonstráló Web alkalmazás található.
Az új kontrol létrehozása a szokásos módon történik, a File – New – Project menüpont lenyomása után megjelenő ablakban válasszuk a Visual C# Project elemei közül a Web Control Library-t.
A kontrol osztályában definiálunk egy konstruktort a property-k kezdeti értékeinek beállítására. A kontrol érdekessége, hogy a property-k nem lokális változók értékét állítják, hanem a Weboldalon található rejtett mező, a VIEWSTATE értékét. Ezt a kontrol a ViewState globális objektumon keresztül éri el. A beállított kezdeti értékek képállományok nevei, melyeket a komponenst felhasználó Web alkalmazás mappájában kell elhelyezni. A kezdeti értékadás tehát:
public MouseEventsControl()
{
  ViewState["DefaultImage"] = "mouseout.jpg";
  ViewState["ActionImage"] = "mousein.jpg";
}
Ezt követően létrehozzuk a WebControl property-jeit. A létrehozáskor meghatározzuk, hogy a property beállítása milyen szerkesztőablakban történjen. Ennek megadásakor a property-k neve, illetve beállító mezője mellett egy kis gomb jelenik meg, melynek lenyomásakor feltűnik a szerkesztőablak, ahol a property értéke állítható. A kontrolunk jellemzőjéből adódóan a property-k egy Url-t tartalmaznak, így a legjobb, ha a standard Url-szerkesztőablakot jelenítjük meg a beállításhoz. Az első attribútum határozza meg a szerkesztőablak jellemzőit az Editor függvény segítségével, melynek első paramétere adja meg az ablak osztályát, a második pedig ennek ősosztályát. A Browsable tulajdonsággal állítjuk be, hogy a kontrol látható legyen a fejlesztőkörnyezet Properties ablakában. A property-k tehát:
[Editor(typeof(ImageUrlEditor),typeof(UITypeEditor))]
[Bindable(false),Browsable(true),Category("Appearance")]
public string DefaultImage
{
  get { ViewState["DefaultImage"] = value.ToString(); }
  set { return ViewState["DefaultImage"].ToString(); }
}
[Editor(typeof(ImageUrlEditor),typeof(UITypeEditor))]
[Bindable(false),Browsable(true),Category("Appearance")]
public string ActionImage
{
  set { ViewState["ActionImage"] = value.ToString(); }
  get { return ViewState["ActionImage"].ToString(); }
}
Végül a Render függvényt felülírva befolyásolhatjuk, hogy milyen módon kerüljenek a képek a kontrol területére, illetve hogyan viselkedjenek az egérmutató kontrolterületre érkezésekor. Itt egy HtmlTextWriter típusú változót kapunk paraméterként, melynek tagfüggvényeivel lehetőségünk van közvetlenül a kimeneti adatfolyamba írni.
protected override void Render(HtmlTextWriter output)
{
A WriteBeginTag függvény egyik megvalósítása lehetőséget ad ún. HTML TAG-ek kimenetbe írására, jelen esetben az „<img>” HTML TAG megjelenítésére.
output.WriteBeginTag("img");
A WriteAttribute függvény tulajdonságokat ír be az éppen megnyitott TAG-be, így megadhatjuk a kép nevét, melyre később hivatkozunk, a kép forrását, valamint az eseménykezelőket, melyek leírják a kontrol viselkedését. Látható, hogy az eseménykezelőkben a képek forrása a ViewState objektumból kiolvasott érték lesz, melyeket a property-k állítanak.
output.WriteAttribute("name","kepem");
output.WriteAttribute("src",ViewState["DefaultImage"].ToString());
output.WriteAttribute("onmouseenter","kepem.src='" +  ViewState["ActionImage"].ToString() + "'");
output.WriteAttribute("onmouseout","kepem.src='" + ViewState["DefaultImage"].ToString() + "'");
Végezetül lezárjuk a TAG-et, és kitesszük a TAG záróakkordját:
output.Write(">");
output.WriteEndTag("img");}
A project fordítása után a kontrol kész. Felhasználása előtt a kontrolt fel kell tenni a ToolBox-ra a szokásos módon: kattintsunk a ToolBox valamely lapján az egér jobb gombjával, majd a megjelenő menüből válasszuk ki a Customize ToolBox pontot, a megjelenő ablakban a .NET Frameworks Components fület. A Browse gombbal keressük elő az imént létrehozott .DLL-t.
A ToolBox-on ezután megjelenik a kontrol, melyet szabadon felhasználhatunk. A példa mellett megtalálható Web alkalmazás HTML-forrásában a következő sort találjuk, miután a WebControlt feltettük a Form-ra:
<cc1:MouseEventsControl id="MouseEventsControl1" style="Z-INDEX: 101; LEFT: 120px; POSITION: absolute; TOP: 67px" runat="server" Width="119px"></cc1:MouseEventsControl>