La settimana scorsa abbiamo visto come eseguire il Parsing XML utilizzando la sintassi jQuery. La semplicità di lettura di un file XML arriva dal fatto che dovremmo scorrere i Nodi ed eseguire un Append di ognuno all’interno di un TAG specifico.
Quello che mi presto a presentare è appunto la lettura di un file XML composto da diversi Blocchi denominati Portfolio, che contengono al loro interno questi items:

  • Title
  • Thumb
  • Description
  • Date

La generazione del file XMl può essere statica, scrivendolo a mano oppure dinamica, magari facendo una quesry ad una Base Dati e convertendo l’Output in un file XML. Ci tengo a precisare che questo metodo di lettura, può essere applicato sia per la costruzione di un sito ottimizzato per iPhone come in questo caso, che per un sito Web Desktop.
Vediamo dunque la struttura XML del file che chiameremo portfolio.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<recentportfolio>
  <portfolio>
    <title>Wave Action</title>
    <thumb>1.jpg</thumb>
    <description>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</description>
    <date>12/1/2010</date>
  </portfolio>
  <portfolio>
    <title>Cloud Floater</title>
    <thumb>2.jpg</thumb>
    <description>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</description>
    <date>4/1/2010</date>
  </portfolio>
</recentportfolio>

Degno di nota è il Nodo Thumb, dove registraimo il nome della nostra Immagine. A questo punto vediamo il codice jQuery dedicato alla lettura del file portfolio.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "portfolio.xml",
            dataType: "xml",
            success: xmlParser
        });
    });

    function xmlParser(xml) {
       
        $(xml).find("Portfolio").each(function () {
   
            $(".content_portfolio").append('<ul class="edgetoedge"><li class="sep">' + $(this).find("Title").text() + '</li><li><span class="thumb"><img src="portfolio/thumb/' + $(this).find("Thumb").text() + '" /></span><p class="description">' + $(this).find("Description").text() + '</p><span class="date">Published ' + $(this).find("Date").text() + '</span></li></ul>');
            $("ul.edgetoedge").fadeIn(1000);
   
        });

Il codice si commenta da solo, ma voglio evidenziare come la parte più divertente dello stesso, sia la costruzione della lista con Classe edgetoedge che contiene i nostri Items. Alla fine della costruzione dinamica delegata a jQuery, eseguiamo la visualizzazione dello stesso con un leggere effetto a comparsa impostando fadeIn ad 1 secondo.
Infine scriviamo il nostro blocco HTMl secondo la logica del Framework jQTouch:

1
2
3
4
5
6
7
8
9
10
11
<div id="portfolio">
    <div class="toolbar">
        <h1>Portfolio</h1>
        <a class="button back" href="#">Back</a>
    </div>                     
    <div class="content_portfolio">
        <!--codice dinamico letto dal file XML-->
    </div><!--/.content_portfolio-->    
   
</div><!--/#portfolio-->
Buon lavoro.