Mellékelt példa megnyitása előtt szükséges egy VML01 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 legtöbb Web-fejlesztő – amióta ez lehetséges – főként a szerver-oldali kontrolokban és komponensekben gondolkodik, melyek kétségtelenül a leghatékonyabb eszközei a funkcionalitás megvalósításának. Azonban más lehetőségeket is érdemes használnunk, különösen olyan esetekben, amikor a megjelenítés is fontos.
Az Internet Explorer 5.0 számtalan olyan újdonsággal rendelkezik, melyeket kihasználhatunk a kliens-oldali megoldásokban. A VML szolgáltatásának használatával a kliens-oldalon végezhetjük el a változatos formák megjelenítését.
A VML egy, az XML-sémán alapuló leíró nyelv, melynek alapvető jellemzője, hogy vektorok formázásával éri el a kívánt hatást, jelen esetben a változatos formai világ megteremtését. A specifikációt a W3C konzorcium hozta létre, melyről bővebb információkat a következő címen találhatunk:
http://www.w3.org/TR/NOTE-VML.html.
A hagyományos módszerek esetében a formák megjelenítésére bináris állományokat (GIF, JPG) használhattunk, melyek számtalan korlátot rejtenek. Ezek közül néhány a következő:
- A nagyméretű képek letöltése időigényes, fölöslegesen terhelve az esetleg kicsi sávszélességet.
- Nehezen karbantartható és frissíthető.
- A HTML kód mellett elhelyezkedő elkülönült állományokról lévén szó, a Web-alkalmazás nehezen mobilizálható.
A VML szolgáltatásaival töredék idő alatt kirajzolhatjuk formáinkat anélkül, hogy a klienshez bármilyen állományt le kellene töltenünk. Mindehhez csupán néhány deklarációra van szükségünk, melyeket a HTML kódba ágyazva megadunk.
Első lépésként a VML névteret kell megadnunk a <HTML> tagban, a következő módon:
<HTML xmlns:v="urn:schemas-microsoft-com:vml" XMLNS:MSHelp="http://msdn.microsoft.com/msHelp">
A következő lépésként lehetővé tesszük, hogy a VML viselkedés (behavior, mely alapvetően a DHTML nyelv specifikuma) lehetősége elérhető legyen a HTML kódban. Ennek érdekében meg kell adnunk a köbvetkező stílusdeklarációt:
<STYLE>.vml { BEHAVIOR: url(#default#VML) }
</STYLE>
A fenti lépések eredményeképpen használhatjuk a speciális VML objektumokat, melyek deklarációi a megadott névtér nevével – jelen esetben „v”-vel – kezdődnek. Az Internet Explorer utasítást kap arra, hogy az így deklarált kontrolok VML kontrolokként értelmeződjenek. Amennyiben a deklarációk valamelyike elmarad, a böngésző figyelmen kívül hagyja a kontrol deklarációit, és a forma nem kerül megjelenítésre.
A harmadik lépés, amit meg kell tennünk a kódban, hogy a névteret statikus, vagy dinamikus módszerrel importáljuk. Amennyiben a statikus módot választjuk, akkor az .aspx lapunk szerkesztése időben nem érhető el módosítás végett. Ekkor a következő kódot kell elhelyeznünk a lap fejlécében:
<?IMPORT namespace="v" implementation="#default#VML">
Dinamikus szerkesztés esetén elérhetjük a lapot, azonban csak a forma körvonalai látszanak szerkesztéskor, hiszen a névtér csak futáskor töltődik be. Ekkor a kód a következő:
<SCRIPT LANGUAGE="JScript">
document.namespaces("v").doImport("#default#VML");
</SCRIPT>
Látható, hogy a document objektum névtereinek gyűjteményéből kell a fenti névvel rendelkezőt kiválasztani, majd azt a doImport metódussal importálni.
A mellékelt példában egy alapvető formát rajzolunk ki a Weblapunk betöltődésekor. A forma egy kör, melyet első esetben pirosra színezünk, majd második esetben kicsit megnyújtjuk, és a színe sárga lesz.
A kör deklarációját a <v:oval ...> tagban kell elhelyeznünk. Az első kör a következőképpen fest:
<v:oval id="oval1" fillcolor="red" style="Z-INDEX:100;LEFT:31px;WIDTH:100px;POSITION:absolute;TOP:92px;HEIGHT:100px;align:center"></v:oval>
Itt is használhatjuk a style attribútumot, melyben megadhatjuk a forma pozícióit, méretadatait, stb.
A nyújtáskor egyszerűen megváltoztatjuk a kör valamely méretadatát.
<v:oval id="oval2" fillcolor="yellow" style="Z-INDEX:100;LEFT:200px;WIDTH:200px;POSITION:absolute;TOP:92px;HEIGHT:100px;align:center"></v:oval>
A sorozat következő számaiban átfogóan bemutatjuk az alapvető beépített formákat, melyeket használhatunk a weblapokon, és megismerkedhetünk a bonyolultabb formai világ elemeivel is.