|
Ebben a példában azt fogjuk szemléltetni, hogy miként lehet egy beolvasott XML tartalmat külső CSS fájl segítségével formázni. Így az XML fájlokból beolvasott adatok sokkal egységesebbek és egységesen formázhatóak lesznek, akár csak a HTML-CSS esetében. Készítsünk egy új mozit a lenti képen látható paraméterekkel. A Properties panelen a Document class mezőben adjuk meg az XmlCssFeldolgozas osztályt.
A megjelenő szövegmezőt és tartalmat az AS kód fogja megjeleníteni, így az FLA-ban nem kell semmilyen összetevőt elkészítenünk. A működő verzió megtekinthető a lenti példában.
Flash Lejátszó Hiányosság! Az oldal Flash tartalmainak megtekintéséhez Flash 9-es lejátszó
Szükségünk lesz természetesen egy XML fájlra, aminek a tartalmát beolvashatjuk és megjeleníthetjük. Másoljuk be a lenti XML kódot egy üres XML fájlba és mentsük el az FLA fájllal azonos mappába elsoXmlHirek.xml néven.
<?xml version="1.0" encoding="iso-8859-2"?> <hir> <hir> <hir> </hirek>
Szükségünk lesz még egy egyszerű CSS fájlra is, amelyet szintén betöltünk és a stíluselemeit alkalmazzuk az XML szöveg megjelenítéséhez. Másoljuk be a lent látható CSS kódot egy üres CSS fájlba, majd mentsük el az FLA fájllal azonos mappába stilusLap.css néven.
/* Flash - XML Stíluslap */
p{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; } .cimStilus { color: #0000CC; font-weight: bold; } .datumStilus { color: #FF3300; font-style: italic; } .szovegStilus { color: #006600; }
Most készítsük el az AS kódot, ami tulajdonképpen beolvassa az XML fájlt és a CSS stíluslapot, majd megjeleníti az eredményt. Írjuk a lent látható kódot egy új üres AS fájlba, majd mentsük el az AS fájlt XmlCssFeldolgozas.as néven az FLA fájlal azonos mappába. Ez megegyezik az XML-CSS osztály nevével.
/* XmlCssFeldolgozas.as */
// package { // szükséges csomagok import flash.display.Sprite; import flash.events.Event; import flash.net.*; import flash.text.*; // XmlCssFeldolgozas osztály public class XmlCssFeldolgozas extends Sprite { // tulajdonságok private var loadKontroll:URLLoader; private var cssLoader:URLLoader; private var xmlAdatok:XML; private var xmlFajlNeve:String; private var stilusFajlNeve:String; private var xmlKiiroMezo:TextField; private var ujszovegForma:TextFormat; private var stilusLap:StyleSheet; private var xmlBetoltve:Boolean; private var cssBetoltve:Boolean; private var xmladatLista:XMLList; // konstruktor public function XmlCssFeldolgozas() { loadKontroll = new URLLoader(); loadKontroll.dataFormat = URLLoaderDataFormat.TEXT; cssLoader = new URLLoader(); xmlFajlNeve = "elsoXmlHirek.xml"; stilusFajlNeve = "stilusLap.css"; xmlBetoltve = cssBetoltve = false; // xml betöltés indítása loadKontroll.addEventListener( Event.COMPLETE, xmlToltesKesz ); loadKontroll.load( new URLRequest( xmlFajlNeve ) ); // css betöltés indítása cssLoader.addEventListener( Event.COMPLETE, cssToltesKesz ); cssLoader.load( new URLRequest( stilusFajlNeve ) ); // betöltések ellenőrzése this.addEventListener( Event.ENTER_FRAME, betoltesekKeszen ); } // betöltéseket ellenőrző enterframe private function betoltesekKeszen( event:Event ):void { // ha az xml és a css is betöltődött if ( xmlBetoltve && cssBetoltve ) { this.removeEventListener( Event.ENTER_FRAME, betoltesekKeszen ); // mező készítése var stSzel:Number = stage.stageWidth; var stMag:Number = stage.stageHeight; xmlKiiroMezo = textmezoKeszit ( stSzel / 8, 10, stSzel / 1.3, stMag-20 ); // mező tulajdonságok textMezoTulajdonsag(); // szövegforma szovegFormaKeszites(); // stíluslap hozzárendelése a szövegmezőhöz xmlKiiroMezo.styleSheet = stilusLap; // stíluselemek eltárolása var st1_n:String = "<span class='cimStilus'>"; var st2_n:String = " <span class='datumStilus'>"; var st3_n:String = "<span class='szovegStilus'>"; var st_z:String = "</span>"; // adatok kiírása for (var i: int = 0; i < xmladatLista.length(); i++) { var egyHirReszlet:XML = xmladatLista[i]; xmlKiiroMezo.htmlText += "<p><br>" + st1_n + egyHirReszlet.cim + st_z; xmlKiiroMezo.htmlText += st2_n + "( " + egyHirReszlet.datum + " )" + st_z; xmlKiiroMezo.htmlText += "<br><br>" + st3_n + egyHirReszlet.szoveg + st_z; xmlKiiroMezo.htmlText += "</p><br>"; }// end for }// end if } // XML betöltés vége metódus private function xmlToltesKesz( event:Event ):void { xmlBetoltve = true; xmlAdatok = new XML( event.target.data ); xmladatLista = xmlAdatok.hir; } // CSS betöltés vége private function cssToltesKesz( event:Event ):void { cssBetoltve = true; stilusLap = new StyleSheet(); stilusLap.parseCSS( cssLoader.data ); } // szövegforma elkészítése private function szovegFormaKeszites():void { ujszovegForma = new TextFormat(); ujszovegForma.align = TextFormatAlign.JUSTIFY; ujszovegForma.leftMargin = ujszovegForma.rightMargin = 10; ujszovegForma.size = 14; xmlKiiroMezo.defaultTextFormat = ujszovegForma; } // szövegmező tulajdonságok private function textMezoTulajdonsag():void { xmlKiiroMezo.border = true; xmlKiiroMezo.borderColor = 0x5667FE; xmlKiiroMezo.background = true; xmlKiiroMezo.backgroundColor = 0xECEEFF; xmlKiiroMezo.multiline = true; xmlKiiroMezo.wordWrap = true; } // szövegmező generáló metódus private function textmezoKeszit( xp:int, yp:int, wd:int, hd:int ):TextField { var ujText:TextField = new TextField(); ujText.x = xp; ujText.y = yp; ujText.width = wd; ujText.height = hd; addChild( ujText ); return ujText; } }// osztály vége }// csomag vége //
A mozi tehát betölti az XML fájlt és a CSS fájlt egyaránt, majd amikor mindkettő betöltődött, akkor megjeleníti a formázott tartalmat. A forrás letölthető ITT.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
