C# - Vízszintes ScrollBar kontrol készítése weblapra

forráskód letöltése
Webes alkalmazás fejlesztésekor tapasztalhatjuk, hogy a Visual Studio.NET számtalan kontrolja közül hiányzik néhány olyan, melyeket használhatunk Windows-os környezetben, de weblapon nem. Ilyen például a horizontális ScrollBar kontrol, mellyel rugalmasan lehet egy adott mező értékeit változtatni anélkül, hogy a mezőbe írnánk adatokat. Cikkünkben ezt az űrt kitöltendő, készítünk egy ilyen kontrolt, melynek segítségével állíthatunk egy számértéket.
Mellékelt példa megnyitása előtt szükséges egy HSliderBar 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 kontrolt úgy készítettük el, hogy a lap betöltődésekor a görgető gomb középállásban legyen, a képzeletbeli nulla pontban. A kontrol vízszintes görgetést tesz lehetővé úgy, hogy jobbra és balra egyaránt 200-200 egységet képes lépni, vagyis a mellette található TextBox kontrolban 200 és -200 közötti számokat tudunk beállítani.
A kontrol elkészítéséhez felhasználjuk a DHTML Behavior technológiát. Ez alatt azt értjük, hogy egy Script komponenst hozunk létre, a kódját egy .HTC állományban helyezzük le, és gondoskodunk róla, hogy a viselkedését felvevő kontrol elérje azt.
A DHTML Behavior segítségével a weblapra helyezett, arra alkalmas kontrol stílusában meg kell adnunk, hogy milyen URL alatt érhető el a felhasználandó .HTC állomány.
A kontrol elkészítése
A kontrol kódja egy XML-elemekből felépített állományban található, melynek <implement> elemében kell jeleznünk, hogy milyen célra kívánjuk felhasználni.
<?XML version="1.0"?>
<component>
<implements type="Behavior">
A kontrolban megadjuk, hogy az Init metódusa hajtódjon végre akkor, amikor a lap betöltődik:
<attach for="window" event="onload" handler="Init"/>
Deklarálunk egy metódust, mely akkor fut le, amikor a kontrolt görgetjük.
<public>
  <method name="doOnScroll">
  </method>
A kontrol onMoveScroll property-jében adjuk meg, hogy mi történjen akkor, amikor a görgetés zajlik.
  <property name="onMoveScroll"/>
A VALUE property tartalmazza a csúszka aktuális pozícióját, vagyis a scrollLeft property-jének értékét. A property beállításához és lekérdezéséhez szükséges két metódus is:
  <property name="value">
    <get internalName="getValue" />
    <put internalName="setValue" />
  </property>
Végül szükség van arra, hogy megadhassuk a kontrol felvehető értékének minimumát és maximumát, valamint a kontrol szélességét, s magasságát.
  <property name="width"/>
  <property name="height"/>
  <property name="Maximum"/>
  <property name="Minimum"/>
</public>
</implements>
A <script></script> tagok között definiáljuk a metódusokat. Az Init metódusban adjuk meg a kontrol megjelenésének HTML kódját, valamint állítjuk be a kezdeti értékeket.
Szükségünk van néhány változóra, melyek globálisan elérhetők.
var cValue = 0;
var iWidth = 1500;
var scrollState = false;    
var ready = false;
Az Init metódusban bizonyos ellenőrzéseket kell elvégezni a megadott értékekkel kapcsolatban.
function Init()
{
A maximum érték ellenőrzése:
  Maximum = eval(Maximum);
  if (!Maximum) Maximum = 100;
A minimum érték ellenőrzése:
  Minimum = eval(Minimum);
  if (Minimum > Maximum) Maximum = Minimum;
A magasság értékének ellenőrzése:
  height = eval(height);
  if (!height) height = 16;
A szélesség ellenőrzése:
  width = eval(width);
  if (!width) width = 116;
Az iWidth változóban adjuk meg a kontrol belső szélességét (innerWidth property).
  iWidth = width * 10;
  if ((Maximum - Minimum) > (iWidth - width))
  {
    iWidth = ((Maximum - Minimum) + width) * 10;
  }
A kontrol felépítése sajátos, ugyanis annak érdekében, hogy a kontrol ScrollBar-nak hasson, két <SPAN> kontrolt kell egymásba ágyazni úgy, hogy a belső SPAN elem tízszer szélesebb, mint a külső.
A külső kontrol stílusában az OVERFLOW-X attribútumot scroll értékűre, míg az OVERFLOW-Y attribútumot hidden értékűre kell állítani, hogy a görgetősáv vízszintesen helyezkedjen el a weblapon.
  this.innerHTML = "<span onscroll= 'this.parentElement.doOnScroll(this)'" + "style='width:"+width+";height:"+height+"px;
  overflow-x:scroll; overflow-y:hidden;'>" +
"<span style='width:"+iWidth+"px;'> </span></span>";
A görgetés állapotát a READY változóban jelezzük:
  ready = true;
A metódus végén meghívjuk a doMoveScroll függvényt, mely a kívánt pozícióba állítja a csúszkát:
  doMoveScroll(cValue);
}
A doMoveScroll metódus a következőképpen fest: a függvényben a külső SPAN kontrol scrollLeft property-jét állítjuk.
function doMoveScroll(val)
{
  this.children[0].scrollLeft = (val - Minimum)*(iWidth - width)/(Maximum - Minimum);
  scrollState = true;
}
...
</script>
</component>
A kontrol felhasználása
A kontrolt elmentjük a slider.htc állományba, majd elhelyezzük azt az alkalmazás mappájában. Annak érdekében hogy a kontrol görgetősáv formájában megjelenjen, már csak meg kell adnunk a lap SPAN elemének stílusában az állomány URL-jét:
<SPAN id="slider" style="BEHAVIOR: url('slider.htc');...” onMoveScroll="doMoving()" Minimum="-200" Maximum="200" value="0">
Látható, hogy az új kontrol ezt követően már képes fogadni a Maximum, a Minimum, valamint a value attribútumban, mint property-kben megadott értékeket, köszönhetően annak, hogy az állományban „megfogalmazott” viselkedésformát ráhúztuk a stílusdeklarációval.
A kontrol mellett elhelyeztünk egy TextBox mezőt, melynek értékét a csúszka mozgatásával állíthatjuk 200 és -200 közt. Ezt a DOMOVING nevű saját függvényünk végzi, melynek kódja igen rövid, csupán minden görgetésnél kiolvassa a kontrol value értékét, és értékül adja azt a textBox1 kontrol value property-jének.
function doMoving()
{
  document.all.textBox1.value = document.all.slider.value;
}
Ez fordítva is igaz, hiszen a TextBox kontrolba beírt szám tükröződni fog a ScrollBar kontrol csúszkájának pozíciójában is.