C# - Bonyolultabb formák megvalósítása

VML felhasználása weboldalakon 3. rész

forráskód letöltése
A VML lehetőségei – így beépített formáinak tárháza is – szinte végtelenek, még a sorozat keretein belül is csak ízelítőre futja egy-egy témából. A sorozat előző számában megismerhettük az alapvető elemeket, melyeket beépíthetünk alkalmazásunkba. A sorozat ezen számában további tulajdonságokat ismertetünk, melyek egyrészt az alapvető formákat egészíthetik ki, másrészt az összetettebb formák részeit képezhetik.
A mellékelt példa megnyitása előtt szükséges egy VML03 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 formák megjelenéséhez meg kell adnunk az előző részben megismert deklarációkat. Elsőként a névtér deklarációt a HTML tagban:
<HTML xmlns:v="urn:schemas-microsoft-com:vml" XMLNS:MSHelp="http://msdn.microsoft.com/msHelp">
Ezt követően egy stílusdeklarációt a VML viselkedéssel:
<STYLE>.vml { BEHAVIOR: url(#default#VML) }
</STYLE>
Majd dinamikusan importáljuk a névteret:
<SCRIPT LANGUAGE="JScript">
  document.namespaces("v").doImport("#default#VML");    
</SCRIPT>
A mellékelt alkalmazás két WebForm-ot tartalmaz, melyek mindegyike több formai elem használatára mutat példákat. A WebForm1.aspx lapon a LINE elem használatát próbálhatjuk ki, valamint megismerhetjük, hogy egy RECT elem milyen kereteket kaphat. A lap harmadik csoportja a FILL elem használatát mutatja be a gyakorlatban.
LINE elem használata STROKE elemmel
A VML nyelv sajátossága, hogy az egyes elemek tagjain belül újabb elemek kaphatnak helyet, melyek valamilyen kiegészítő funkcióval rendelkeznek. Ilyen módon rendelhetjük például a LINE elemhez a STROKE elem tulajdonságait, melyek segítségével különböző stílust adhatunk az adott egyenesnek. A példában egy DropDownList kontrolban helyeztük el azokat az értékeket, melyeket a STROKE elem DASHSTYLE attribútumában adhatunk meg.
Az attribútum segítségével befolyásolhatjuk, hogy egyenes pontvonal vagy szaggatott vonal, stb. legyen. Ekkor a deklaráció a következő:
<v:line id="myline" style="Z-INDEX: 102; LEFT: 301px; POSITION: absolute; TOP: 58px" strokeweight="2pt" strokecolor="red" to="200pt,20pt" from="0pt,20pt">
  <v:stroke id="mystroke" dashstyle="<%Response.Write(styleList.Items[styleList.SelectedIndex].Text);%>">
  </v:stroke>
</v:line>
Látható, hogy egy ASP kóddal értük el, hogy a lista egy elemének kiválasztásakor az adott nevű stílussal töltődjön be a VML kontrol.
Érdemes még a STROKE elemmel kapcsolatban megemlíteni néhány attribútumot, melyekkel további tulajdonságok adhatók meg a főkontrolban.
  • EndArrow: az egyenes végén megadható egy nyíl. Lehetséges értékei: None (alapértelmezett), Block, Classic, Diamond, Oval, Open
  • Color: a befogadó kontrol színe módosítható
  • Weight: vonalvastagság „pt” egységekben
  • LineStyle: vonaltípus
RECT elem használata STROKE elemmel
A lap következő csoportjában egy négyszög kontrolhoz rendelhető különböző típusú keret, melyet a DropDownList kontrolban választhatunk ki. A deklaráció a következő:
<v:rect style="Z-INDEX:101;LEFT:312px;WIDTH:120px;POSITION:absolute;TOP:134px;HEIGHT:80px" strokecolor="red" strokeweight="10pt">
  <v:stroke linestyle="<%Response.Write(styleList1.Items[styleList1.SelectedIndex].Text);%>" />
</v:rect>
A Stroke elem LineStyle attribútumában néhány lehetséges érték közül egyet megadhatunk, így befolyásolva a keret típusát.
FILL elem használata
A FILL elem – mint ahogy erre neve is utal – az egyes kontrolok belső elemeként módosítja a kontrol tetszőleges színnel történő kitöltését, a legváltozatosabb formában. A WebForm1.aspx lap harmadik kontrolcsoportjában láthatunk három példát arra, hogy mire képesek az egyes attribútumai. Amennyiben nem a VML-t használjuk, akkor ezeknek a kitöltési típusoknak a megvalósításához a DHTML filtereket kellene használnunk, amelyek összetettsége nem versenyezhet a VML XML-alapú átlátható kódjaival.
Az első téglalap esetében – melynek színe piros – a kitöltés színátmenetes lesz két szín közt. Az egyik szín a kontrol piros színe, míg a másik a FILL elem color2 attribútumában megadott kék szín.
<v:rect style="Z-INDEX: 108; LEFT: 26px; WIDTH: 120px; POSITION: absolute; TOP: 319px; HEIGHT: 80px" fillcolor="red">
  <v:fill color2="blue" type="gradient" />
</v:rect>
A kitöltés típusára a FILL elem type attribútumának gradient értéke utal.
A második téglalap esetében nem adtunk meg másik kitöltő színt a sárga alapszín mellé, hanem csupán a típust adtuk meg. Ekkor a kitöltés színátmenetes lesz, de nem két szín közt, csupán egy szín két összetevője közt.
<v:rect style="Z-INDEX: 110; LEFT: 174px; WIDTH: 120px; POSITION: absolute; TOP: 317px; HEIGHT: 80px" fillcolor="yellow">
  <v:fill type="gradient" />
</v:rect>
A harmadik téglalap esetében egy kicsit összetettebb módon töltjük ki azt. A kód a következő:
<v:rect style="Z-INDEX: 109; LEFT: 323px; WIDTH: 120px; POSITION: absolute; TOP: 317px; HEIGHT: 80px" fillcolor="red">
  <v:fill method="linear sigma" angle="-45" focus="100%" focusposition=".5,.5" focussize="0,0" type="gradientRadial" />
</v:rect>
SHADOW elem
A Webform2.aspx lapon három különböző elemet használunk fel a formák megjelenítéséhez. Az első téglalap esetén árnyékot adunk a formához a SHADOW elem segítségével.
<v:rect style="Z-INDEX:100;LEFT:19px;WIDTH:100pt;POSITION:absolute;TOP:60px;HEIGHT:70pt" fillcolor="red">
  <v:shadow on="t" type="perspective" origin=".5,.5" offset="0,0" matrix=",-92680f,,,,-95367431641e-17" />
</v:rect>
Az ON attribútumban kell megadnunk, hogy látszódjon-e az árnyék az adott forma mögött (true), vagy sem (false). A TYPE attribútumban adható meg a megjelenítendő árnyék típusa, az ORIGIN attribútum pedig megszabja a megjelenítendő árnyék kiindulópontját.
SHAPE és PATH elemek használata
A SHAPE elem egy befogadó tag, melynek számtalan attribútuma és a megadható tag-elemek segítségével a legváltozatosabb formák rajzolhatók ki a weblapjainkra.
A példában található forma egy csillag, melynek körvonala sárga, kitöltő színe pedig kék.
<v:shape style="Z-INDEX:102;LEFT:15px;WIDTH:150px;POSITION:absolute;TOP:201px;HEIGHT:150px" strokecolor="yellow" strokeweight="1.5pt" fillcolor="blue" coordorigin="0 0" coordsize="200 200">
  <v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e" />
</v:shape>
A PATH elem segítségével adhatjuk meg a megjelenítendő forma körvonalait koordináta-pontokkal, ahol a megadott koordinátákban található pontok összekötésével kaphatjuk meg a formát. A koordinátákat a PATH elem V attribútumában adhatjuk meg.
TEXTBOX elem
A WebForm2.aspx lap formája arra mutat példát, hogyan ágyazható egymásba több elem annak érdekében, hogy a szükséges formájú és funkcióval rendelkező elem létrejöjjön. A forma egy kerekített sarkú téglalap, mely egy FILL elemet tartalmaz annak érdekében, hogy színátmenetes megjelenést kölcsönözzön a téglalapnak.
<v:roundrect style="Z-INDEX: 104; LEFT: 9px; WIDTH: 120px; POSITION: absolute; TOP: 422px; HEIGHT: 25px" fillcolor="red">
  <v:fill type="gradient" />
  <v:textbox>
    <a href="http://www.softwareonline.hu/">Kattintson ide!</a>
  </v:textbox>
</v:roundrect>
A téglalapon belül elhelyeztünk egy TEXTBOX elemet azért, hogy szöveget írhassunk ki a forma körvonalain belülre, tetszőleges pozícióba. A szövegmezőben megadtunk egy karakterláncot, valamint elhelyeztünk egy linket a Software Online URL-jére, melyre a téglalap területére történő kattintáskor juthatunk. A forma így most egy nyomógomb kontrolra emlékeztet.

VML felhasználása weboldalakon cikksorozat