Mellékelt példa megnyitása előtt szükséges egy VML04 nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez futtassa le a mellékelt CreateVD.js parancsállományt.
A példában felhasznált kódrészletek generálásához szükség van a bevezetőben említett programra. A program letöltése előtt olvassa el a cikk Bevezető című szakaszát.
Bevezető
A Microsoft VML Generator segédprogram a cikk írásakor a Microsoft webhelyén, a következő címen volt elérhető:
http://msdn.microsoft.com/downloads/samples/internet/default.asp?url=/downloads/samples/internet/vml/vmlgenerator/default.asp
Az URL azóta természetesen megváltozhatott. A letöltött állomány neve Microsoft VML Generator Setup.EXE, mely egy önálló telepítőt rejt. A telepítés után a programot a <meghajtó>:\\Program Files\Microsoft VML Generator mappában találjuk meg alapértelmezésben. A program indításához válasszuk a VML Generator.exe állományt.
A segédprogram tulajdonságai
A segédprogram csekély rendszerigénnyel bír. Rengeteg funkciót tartalmaz, melyek első látásra kicsit riasztóan hatnak, de átlátva a használatát, könnyen megszokható.
A felhasználói felület négy szegmensre osztható.
- Toolbar: a Toolbar-on különböző szerkesztési műveleteket indító gombok találhatók, valamint innen érhetjük el a program súgóját is.
- Funkciótábla: a bal oldali szegmensen találhatók a fő funkciók gombjai.
- Böngészőablak: a jobb oldali szegmens felső ablaka egy böngésző, melyben megtekinthető az alsó szerkesztőben megadott HTML kód eredménye.
- HTML-szerkesztő: a jobb oldali szegmens alsó ablaka.
A Funkciótábla felső részében találunk kulcsszavakat, melyek elszíneződnek abban az esetben, ha a kurzor föléjük mozog.
Ezek a fő funkciókat, pontosabban a beszúrható fő VML objektumokat azonosítják.
Amennyiben ezek valamelyikére kattintunk, akkor az alatta található rész frissül, a főtagnak megfelelő attribútumokat választhatjuk ki.
A Funkciótáblán találhatunk egy Attribute Data feliratú csoportot, melynek segítségével van lehetőségünk egyedi adatokat elmenteni, és a tagok attribútumaiban megadni. Ez lehet egy szín, egy forma. Az a lényeg, hogy a rendszer eltárolja, és a következő felhasználáskor elegendő megkeresni a listából, és beszúrni.
Lejjebb haladva a panelen találunk egy Shape Types feliratú szegmenst, amely egy lista, feltöltve előredefiniált formákkal. A lista egy elemét kiválasztva elérhető, hogy a HTML kódba a kívánt forma kódrészlete kerüljön be.
Az Auto Edit feliratú szegmens funkciója egyszerű: segítségével a megadott kódrészlet – időt takarítva meg nekünk – bekerül valamennyi forma kódjába.
A program indításakor a HTML-szerkesztő tartalmazza egy HTML-lap kódját, valamint a VML objektumok elérését biztosító deklarációkat. Ezt követően nincs más dolgunk, mint a <body></body> tagok közé beszúrni a kívánt tagokat. A beszúrások előtt mindig a kívánt helyre kell a kurzort állítani, ellenkező esetben nem történik semmi, vagy a forma nem a megfelelő helyen jön létre.
A felső szegmensben található kulcsszavak egyikét kiválasztva elérhető, hogy a munka a feliratnak megfelelő objektummal történjen. Az adott elem a TAG feliratú gombbal szúrható be, az attribútumok pedig a többi gomb segítségével módosíthatók.
Mellékelt példa elkészítése
A program teljes funkciópalettájának bemutatása nem ennek a cikknek a feladata, célunk nem is ez. A fejezetben elkészítjük a mellékelt példát lépésről lépésre. A WebForm1.aspx lap egy kört tartalmaz, mely színes és egy téglalapot, amely egy képet tartalmaz.
A színes körív elkészítéséhez több lépés szükséges. Elsőként a Shape Types listából kell kiválasztani az Oval objektumot.
Az objektum a választás után kód formájában meg is jelenik a HTML-ben. Az objektum attribútumait manuálisan szerkeszthetjük.
Az <oval></oval> tagok közé mozgatva a kurzort, ki kell választanunk a felső szegmens kulcsszavai közül a Fill szót, majd a TAG nyomógombbal be kell szúrnunk azt a HTML kódba. A műveletek eredménye a következő:
<v:oval coordsize="21600,21600" style='width:156pt;height:156pt'>
<v:fill />
</v:oval>
A <v:fill /> tagon belülre mozgatva a kurzort beszúrhatjuk a megfelelő attribútumokat. Ki kell választanunk a Type attribútum értékét a listából: ez most Gradient lesz.
Amennyiben a Focus attribútum értékét 80%-ra állítjuk, valamint a színátmenet összetevőinek egyikét pirosra cseréljük, akkor meg is kaptuk a példában szereplő formát. A HTML-kód a következő:
<v:oval coordsize="21600,21600" style='Z-INDEX:102;LEFT:22px;WIDTH:120pt;POSITION:absolute;TOP:52px;HEIGHT:120pt'>
<v:fill Focus="80%" Colors="0 red;34049f yellow;1 #a603ab" Angle="-90" Type="Gradient"></v:fill>
</v:oval>
A Toolbar frissítés gombjával tölthető be a generált HTML-kód a böngészőablakba.
A másik forma esetén a listából a Rectangle elemet választjuk, hogy egy négyszög tartalmazza a képet.
<v:rect coordsize="21600,21600" style='width:80pt;height:80pt'>
</v:rect>
A képet egy <v:imagedata> tag tartalmazza, mely az Image kulcsszó választásával és a TAG nyomógombbal szúrható be.
<v:rect coordsize="21600,21600" style='width:80pt;height:80pt'>
<v:imagedata />
</v:rect>
A tagon belül már csak a kép forrását kell megadnunk, és a kép megjelenik a böngészőben.
Az Image fill properties feliratú csoportban válasszuk a Src elemet. A forrás elérési útvonalát javítsuk a megfelelőre.
<v:rect coordsize="21600,21600" style='Z-INDEX:101;LEFT:244px;WIDTH:80pt;POSITION:absolute;TOP:99px;HEIGHT:80pt'>
<v:imagedata Src="nostop.jpg" />
</v:rect>
A program a saját mappájában található képek egyikének az elérési útvonalát illeszti be, így a forma megtekinthető rögtön a kép frissítésével.