Adatbevitel XML segítségéve Flash MX mozikba

, írta: Poetro

Rengeteg módja létezik annak, hogy adatokat szipkázzunk be a Flash mozinkba, de talán a legnagyobb szabadságot mégiscsak az XML jelenti. Az XML-ből való adatbeolvasásnak rengeteg módja létezik, most ennek egy egyszerűen használható, és gyorsan elsajátítható változatát kívánom bemutatni, pusztán a lényegre koncentrálva.

Az XML mint sokan tudják, egy struktúrált adathalmaz, amelynek megjelenítése teljesen a kliensre van bízva. Mivel az adatformátum eléggé egyszerű, és eléggé hasonlatos a HTML leíró nyelvhez, ezért viszonylag könnyű az előállítása. A megjelenítés már annyira nem egyszerű, de különböző trükkökkel szép eredményt lehet elérni ezen a téren is.

Kezdjük a beolvasás alapjaival. Mindenek előtt Flash-ben létre kell hozni egy XML objektumot a következőképpen:

var data_xml = new XML();

Ez csak egy alap objektumot készít elő nekünk, amibe majd az adatokat lehet pakolgatni. Az adatok fájl-ból való betöltésére az XML objektum load függvénye szolgál. Persze erre a fájlra is állnak a Flash biztonsági beállításai, azaz a fájlt csak arról a domain-ról képes betölteni, ahol ő maga is elhelyezkedik. Mivel az XML kezelő függvények a halandók számára eléggé idegenül hangzanak, kölcsönvettem egy nagyszerű függvényt ( makeObj ), mely az XML objektumból egy kényelmesen kezelhető objektumot képez, melyet a Flash ?.? (pont) szintaktikájával könnyen bejárhatunk (ellentétben az XML objektum bonyolult függvénykészletével).
A betöltés segítéséhez mellékeltem egy saját fejlesztésű függvényt loadToObject néven.

Működés

Az XML fájl objektumba való betöltése ezek segítségével elég egyszerű, ugyanakkor érdemes egy kis függvényt készíteni, ami figyeli a betöltést, és eltárolja az objektumunkat, amit később majd használni fogunk.
Ennek megfelelően a kódunk a következőképpen fog kinézni:

// Betöltjük a XML kezelő függvénygyűjteményt
// (lásd: http://www.poetro.hu/files/XML.as)
#include "XML.as"

// Figyeljük, hogy sikerült-e betölteni az XML-t
function dataLoaded(obj) {
  if (obj != false) {  // XML betöltése sikeres
    _global.data_obj = obj; // Eltároljuk az objektumot globális változóként
    trace("Data loaded from XML");
  }
  else { // XML betöltése sikertelen
    delete _global.data_obj; // Töröljük az objektumot globális változók közül
    trace("Data failed to load from XML");
  }
}

// Tömböt épít az átadott objektum elemeiből
function buildList(obj) {
  var adata = new Array();
  if (obj._type == "array"){
    for (var i=0; i<obj.length; i++){
      adata.push(obj[i]);
    }
  }
  else if(obj) {
    adata.push(obj);
  }
  return adata;
}

// XML előkészítése
var data_xml = new XML();
// betöltjük a data.xml-t, amiből generált objektumot a dataLoaded függvény feldolgoz
data_xml.loadToObject("data.xml", dataLoaded);

Akkor most tekintsük át a fenti kódot. Először is betöltjük az XML objektumot kiterjesztő függvénygyűjteményt (lásd csatolt fájl). Ez az előbbi bekezdésben említett két függvény tartalmazza. A loadToObject első paramétere a betöltendő XML fájl elérési útja, a második egy függvény, aminek a betöltődött XML-ből generált objektum átadódik, amennyiben sikerült betölteni az XML-t.
A dataLoaded pont ennek a figyelését célozza, azzal megspékelve, hogy ha sikerül betölteni, akkor az onjektumot a globálisan elérhető data_obj változóba menti. Persze a változó elmentése helyett meghívhatnánk különböző függvényeket is, amik tánylegesen is kezdenek valamit az adattal, de ettől most eltekintűnk.

A feldoglozást elősegítendő mellékeltem egy kis segédfüggvényt ( buildList néven), amely a makeObj által generált objektum egyes elemeiből képes tömböt képezni.

Példák

A müködés mélyebb elsajátítása érdekében álljon most itt egy példa, amit a következő XML-ből generálok:

<menu>
  <item title="Főoldal" link="hu"></item>
  <item title="Eladó ingatlanok" link="hu/elado_ingatlanok_0">
    <item title="Használt lakások" link="hu/classical"></item>
    <item title="Új építésű ingatlanok" link="hu/new_developement"></item>
    <item title="Üzlethelyiségek" link="hu/commercial"></item>
    <item title="Más típusú ingatlanok" link="hu/other_property"></item>
  </item>
  <item title="Kiadó ingatlanok" link="hu/letting">
    <item title="Hosszútávú" link="hu/letting/long_term"></item>
    <item title="Rövidtávú" link="hu/letting/short_term"></item>
  </item>
  <item title="Általános információk" link="hu/altalanos_informaciok">
    <item title="Budapest" link="hu/altalanos_informaciok/budapest"></item>
    <item title="Ingatlan piac" link="hu/altalanos_informaciok/ingatlan_piac"></item>
  </item>
  <item title="Rólunk" link="hu/rolunk">
    <item title="Cégünk" link="hu/rolunk/cegunk"></item>
    <item title="Szolgáltatásaink" link="hu/rolunk/szolgaltatasaink"></item>
  </item>
  <item title="Hasznos linkek" link="hu/hasznos_linkek"></item>
  <item title="Karrier" link="hu/karrier"></item>
  <item title="Kapcsolat" link="hu/feedback"></item>
</menu>

A programunk a következő objektumot generálja:

Variable _global.data_obj = [object #1, class 'Object'] {
  menu:[object #2, class 'Object'] {
    _value:"\r\n  ",
    _type:"text",
    item:[object #3, class 'Array'] [
      0:[object #4, class 'Object'] {
        title:"Fooldal",
        link:"hu"
      },
      1:[object #5, class 'Object'] {
        title:"Eladó ingatlanok",
        link:"hu/elado_ingatlanok_0",
        _value:"\r\n    ",
        _type:"text",
        item:[object #6, class 'Array'] [
          0:[object #7, class 'Object'] {
            title:"Használt lakások",
            link:"hu/classical"
          },
          1:[object #8, class 'Object'] {
            title:"Új építésu ingatlanok",
            link:"hu/new_developement"
          },
          2:[object #9, class 'Object'] {
            title:"Üzlethelyiségek",
            link:"hu/commercial"
          },
          3:[object #10, class 'Object'] {
            title:"Más típusú ingatlanok",
            link:"hu/other_property"
          },
          _type:"array"
        ]
      },
      2:[object #11, class 'Object'] {
        title:"Kiadó ingatlanok",
        link:"hu/letting",
        _value:"\r\n    ",
        _type:"text",
        item:[object #12, class 'Array'] [
          0:[object #13, class 'Object'] {
            title:"Hosszútávú",
            link:"hu/letting/long_term"
          },
          1:[object #14, class 'Object'] {
            title:"Rövidtávú",
            link:"hu/letting/short_term"
          },
          _type:"array"
        ]
      },
      3:[object #15, class 'Object'] {
        title:"Általános információk",
        link:"hu/altalanos_informaciok",
        _value:"\r\n    ",
        _type:"text",
        item:[object #16, class 'Array'] [
          0:[object #17, class 'Object'] {
            title:"Budapest",
            link:"hu/altalanos_informaciok/budapest"
          },
          1:[object #18, class 'Object'] {
            title:"Ingatlan piac",
            link:"hu/altalanos_informaciok/ingatlan_piac"
          },
          _type:"array"
        ]
      },
      4:[object #19, class 'Object'] {
        title:"Rólunk",
        link:"hu/rolunk",
        _value:"\r\n    ",
        _type:"text",
        item:[object #20, class 'Array'] [
          0:[object #21, class 'Object'] {
            title:"Cégünk",
            link:"hu/rolunk/cegunk"
          },
          1:[object #22, class 'Object'] {
            title:"Szolgáltatásaink",
            link:"hu/rolunk/szolgaltatasaink"
          },
          _type:"array"
        ]
      },
      5:[object #23, class 'Object'] {
        title:"Hasznos linkek",
        link:"hu/hasznos_linkek"
      },
      6:[object #24, class 'Object'] {
        title:"Karrier",
        link:"hu/karrier"
      },
      7:[object #25, class 'Object'] {
        title:"Kapcsolat",
        link:"hu/feedback"
      },
      _type:"array"
    ]
  }
}

Nem tudom, mennyire látható de az objektumunk tömbök, és objektumok egyenlege. A gyökér elemre ( menu ) például a _global.data_obj.menu kóddal hivatkoznhatunk. Ami még szebb, hogy ennek item nevű ?gyerekeire? a _global.data_obj.menu.item hivatkozással. Hogy biztosak legyünk abban, hogy tömbként tudjunk ezekre hivatkozni, segédkezik a buildList függvény. Erre néha szükség lehet, ugyanis ha az aktuális szint csak egyetlen elemet tartalmaz, akkor az a _global.data_obj objektumunkon belül nem tömbként, hanem objektumként mutatkozik meg.

Példaként irassuk ki az első szinten levő item elemek title paraméterét:

var items = buildList(_global.data_obj.menu.item);
for(var i=0; i<items.length; i++) {
  trace(items[i].title);
}

Ennek a kimenete:

Fooldal
Eladó ingatlanok
Kiadó ingatlanok
Általános információk
Rólunk
Hasznos linkek
Karrier
Kapcsolat

Most kicsit bonyolítsuk meg, és irassuk ki az első szint alatti elemek title paraméterét is, de kettő karakterrel beljebb:

var items = buildList(_global.data_obj.menu.item);
for(var i=0; i<items.length; i++) {
  trace(items[i].title);
  var subs = buildList(items[i].item);
  for (var j=0; j<subs.length; j++) {
    trace("  "+subs[j].title);
  }
}

Ennek kimenete:

Fooldal
Eladó ingatlanok
  Használt lakások
  Új építésu ingatlanok
  Üzlethelyiségek
  Más típusú ingatlanok
Kiadó ingatlanok
  Hosszútávú
  Rövidtávú
Általános információk
  Budapest
  Ingatlan piac
Rólunk
  Cégünk
  Szolgáltatásaink
Hasznos linkek
Karrier
Kapcsolat

Remélhetőleg ezek után nem lesz problémánk ezen függvények segítségével az XML adatok feldolgozásával, amennyiben mégis maradt volna üres folt, hozzászólások formájában szívesen válaszolok a kérdésekre.

comments powered by Disqus