C# - ProgressBar létrehozása HTML-oldalon

forráskód letöltése
Windows-os alkalmazásainkban lehetőségünk van arra, hogy a hosszabb ideig tartó folyamatok állapotát egy folyamatjelző kontrollal szemléltessük, mely látványos, nem utolsó sorban jelzi, hogy a folyamat még nem fagyott le. Webes alkalmazásainkban ez a lehetőség nincs meg, így magunk vagyunk kénytelenek létrehozni valamilyen szemléltető formát a HTML-oldalon. Cikkünkben bemutatunk egy ötletet arra, hogyan jelezzük az éppen zajló folyamatokat a látogatóknak.
Mellékelt példa megnyitása előtt szükséges egy WebProgressBar 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 folyamatjelző kontrolt természetesen mindenféle varázslat nélkül már létező HTML-kontrolból hozzuk létre. Csupán néhány megfelelően megválasztott stílus-beállítás, és néhány sornyi JavaScript kód szükséges ahhoz, hogy valóban egy ProgressBar kontrolnak hasson az, amit látunk a Weblapon.
A folyamatjelzőnket egy TEXT típusú INPUT kontrolból hozzuk létre, melynek stílusjegyeire jellemző, hogy hátterét ezüstszínűre, a beírt karaktereket Wingdings típusúra választjuk, és a karaktereket NAVY színnel jelenítjük meg. Ez a három stíluselem határozza meg lényegében azt, hogy a látvány folyamatjelzőként hat:
<INPUT id="pbText" style="BACKGROUND: silver; COLOR: navy; FONT-FAMILY: Wingdings; type="text" ...>
Annak érdekében, hogy a jól ismert színes sáv mozgás hatását keltse, létre kell hoznunk egy függvényt, melynek működési elve az, hogy mindig egy karaktert hozzáfűz a megjelenítendő karakterlánchoz. A szövegmezőben megjelenő karakterek kis kék négyzetként íródnak ki. A szövegmezőben „n” karaktereket írunk ki, melyek úgy hatnak, mint egy újabb vonás a folyamatjelzőben.
Először is a lap betöltődésekor lekérdezzük, hogy hány pixel széles a kontrolunk:
var width = document.all.pbText.style.width;
A kapott string-ben meghatározzuk a „px” karakterek helyét:
var pos = width.indexOf("px");
A pozíció előtti láncdarabot adjuk át egy Number objektumnak úgy, hogy osztjuk tízzel. Erre azért van szükség, mert minden karakter kb. 10 pixel széles, így megtudhatjuk, hogy hányat írhatunk ki belőlük.
var str = width.substring(0,pos);
var number = new Number(str/10);
A kapott számot értékül adjuk egy változónak, melynek értékét folyamatosan csökkentjük, így jelezve a kontrol feletti szövegben, hogy hány másodperc múlva fejeződik be a folyamat:
countback = number;
A setInterval metódussal elindítjuk a folyamatot, mely 1 másodpercenként meghívja a doStep függvényt, mely a kiírást végzi.
timerID = setInterval("doStep()",1000);
A setInterval metódus visszatérési értékét, a timerID-ben megkapott értéket használjuk majd arra, hogy az időzítő folyamatot leállítsuk.
A doStep függvény tehát a következőképpen fest:
function doStep()
{
  ...
  document.all.pbText.value += "n";         
  writed ++;
  countback--;
  document.all.Label1.innerText = "Betöltődés " + countback + " másodperc múlva...";  
}
Amennyiben a writed értéke eléri, vagy meghaladja a fent számított értéket, vagyis a kontrol szélességének 1/10-edét adó számot, akkor megállítjuk az időzítőt, megakadályozzuk, hogy a kontrolba újabb karakter kerüljön, és a böngésző ablakába betöltünk egy másik Weblapot:
if (writed >= number)
{
  clearInterval(timerID);
  ...
  window.navigate("http://www.softwareonline.hu");
  return;
}