Delphi - 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, és 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.
A mellékelt alkalmazás Form-ján elhelyeztünk egy böngészőkontrolt, melybe a program indulásakor betöltjük a Progress.htm nevű HTML állományt. A folyamatjelző kontrolt egy 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égeltetik 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 stringben 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 egytizedé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;
}