Grafikus webes számláló készítése

A mellékelt példa megnyitása előtt szükséges egy WLCounter 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.

A mellékelt alkalmazás mappájának WLCounterLibrary alkönyvtárában találjuk meg a fejlesztett kontrol forrásállományait, melyek közül a WLCounterControl.cs állomány tartalmazza a kontrol osztályának deklarációját. A kontrol kódját lefordítva állíthatjuk elő a szükséges assembly-t, melyet felhasználhatunk a kontrol ToolBox-on való regisztrálásához. A kontrolt regisztrálva ez tetszőlegesen felhasználható bármely webes alkalmazásban.

Megjelenés szerkesztési időben

A Designer.cs állományban találjuk meg azt az osztályt, mely a kontrol szerkesztési időben látható megjelenésének kialakításáért felelős. Szerkesztési időben egy címkét látunk a kontrol pozíciójában, „Számláló kontrol” felirattal.

Az osztály a ControlDesigner osztályból származik.

public class Designer : ControlDesigner
{
  ...

A GetDesignTimeHtml metódus adja vissza a kontrol szerkesztési idejű HTML kódját.

public override string GetDesignTimeHtml()
{
  StringWriter sw = new StringWriter();
  HtmlTextWriter htw = new HtmlTextWriter(sw);
  Label l = new Label();
  l.Text = "Számláló kontrol";
  l.RenderControl(htw);
  return sw.ToString();
}

Funkcionalitás

A kontrol StartSecond property-jében kell megadni azt az értéket másodpercben, ahonnan a számlálónkat indítani szeretnénk. A Width property-ben pedig a kontrol által megjelenített egyenes szélességét tudjuk megadni pixelben.

A példában az egyenes 16 pixel magas és 200 pixel széles, és a szélességet 10 másodperc alatt csökkentjük nullára.

A kontrol betöltődésekor egy kliens-oldali script-et helyez el a weblapon, melyben megtalálható a számlálás és a szélességcsökkentés kódja. Ezt a műveletet megelőzi a megadott szélesség lekérdezése, mely egy Unit típusú objektumban tárolódik eredetileg, ezt azonban egyszerűen egy double típusú értékké konvertáljuk, mivel erre a típusra van szükségünk a számítási műveletek elvégzéséhez.

Unit uwidth = Width;
length = uwidth.Value;

A kontrol által megjelenített egyenes tulajdonképpen egy 1x1 pixel méretű képállomány, melyet a kívánt méretre nagyítunk. Ennek a szélességét csökkentjük pixelenként a pixelWidth property értékének csökkentésével. A kép egy HtmlImage objektum.

private HtmlImage img;

Ennek kezdeti jellemzőit a CreateChildControls metódusban állítjuk be.

protected override void CreateChildControls() 
{    
  img = new HtmlImage();
  img.ID = "counter";
  img.Style.Add("position","absolute");
  ...
  img.Src = Page.MapPath("Sample.bmp");
  Controls.Add(img);
}

A kontrol megjelenítése a Render metódussal történik.

protected override void Render(HtmlTextWriter output)
{
  EnsureChildControls();
  base.Render(output);      
}

A kontrol szélességét pixeles egységekben csökkentjük, csak azt kell tudnunk, hogy hány másodpercenként kell egy pixelt csökkenteni a szélességen. Ezt úgy kapjuk meg, hogy a szélességet osztjuk a másodperc értékkel, majd a kapott értékkel elosztjuk az 1-et.

double diff = length/startsecond;
d = Math.Round(1/diff);

A lap betöltődésekor elindítunk egy időzítőt.

window.onload = doSetInterval;

Az időzítő másodpercenként meghívja a doCountDown metódust.

interval = window.setInterval("doCountDown()",1000);

Létre kell hoznunk néhány változót a script-blokkban. Először egyet, az intervallumot beállító függvény visszatérési értékének, melyre szükségünk lesz az időzítő leállításához:

var interval = 0;

Egyet pedig a másodpercek tárolására, melyet a programból adunk át a script-nek:

var seconds = 10;

Egy változó tárolja a fenti számítás eredményét:

var difference = 0;

A számláló csökkenti a kapott másodperc-értéket, és amennyiben a kontrol szélessége nem egyezik meg a kapott másodperc-értékkel, akkor valamilyen értékenként csökkentünk egy pixelt a kontrol szélességén.

Amennyiben a kontrol szélessége eléri a nullát, az időzítőt leállítjuk az interval változó segítségével.

interval = window.setInterval("doCountDown()",1000);

Ha például a kontrol szélessége 200 pixel, és a számlálandó másodpercek száma 10, akkor a kontrol szélessége másodpercenként 20 pixelt csökken.