Leggere i dati di un documento XML è un’operazione semplice e veloce, farli visualizzare su una pagina web è altrettanto rapido, ma è bene sapere alcune nozioni per potersi muovere con tranquillità e sicurezza.

Andiamo con ordine e vediamo subito un esempio di un file XML che vogliamo trattare:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
[..]
</data>
</DataSet>

Questo file potrebbe rappresentare dei dati produttivi, riguardanti ad esempio i materiali entrati in magazzino, i materiali prodotti e il venduto.

Il modo più rapido e banale per leggere questo file e farlo visualizzare su una pagina ASPX è tramite il seguente codice:

DataSet ds = new DataSet();
ds.ReadXml(@"C:\test.xml", XmlReadMode.Auto);
DataView MyDataView = new DataView(ds.Tables[0]);
MyDataGrid.DataSource = MyDataView;
MyDataGrid.DataBind();

Il codice non fa altro che creare un nuovo DataSet per contenere i dati che andremo a leggere, leggere il file tramite il metodo ReadXml(), creare una DataView con la tabella creata nel dataset e assegnare quest’ultima come DataSource per la DataGrid.

All’interno della pagina .aspx ci sarà quindi una DataSource così fatta:

<asp:DataGrid id="MyDataGrid" runat="server" >
    <HeaderStyle CssClass="th">
    </HeaderStyle>
</asp:DataGrid>

Tralasciamo lo stile attribuito alla testata della datagrid, ciò che è importante in questo caso è solo l’ID. 

Così facendo però ottengo una tabella di questo tipo:

E tutti gli altri dati che fine hanno fatto? Sono stati salvati in altre tabelle del DataSet, assieme a tutti gli attributi dell’xml; queste tabelle avranno come riferimento il data_Id e potrò utilizzarle come meglio credo.

Se infatti cambiamo il primo codice, mettendo una tabella diversa, in questo modo:

DataView MyDataView = new DataView(ds.Tables[1]);

Verrà visualizzata una pagina con la seguente tabella:

Se cambio e metto la terza tabella:

DataView MyDataView = new DataView(ds.Tables[2]);

Il risultato sarà:

Mentre per le tabelle successive, avrò questi risultati visualizzati:

Incrociando queste tabelle attraverso il campo data_Id potrei ricavare tutti i dati contenuti nell’XML, attributi e testi all’interno dei tag.
Il mio obiettivo era però quello di far visualizzare questi dati senza gli attributi riportati nell’XML. Ciò che mi interessa sono solo i dati riportati all’interno dei tag. Vorrei avere un risultato di questo tipo:

In questo caso potrebbe fare al caso nostro l’ XML Schema. Si tratta di un file con estensione XSD, che descrive i dati contenuti in un file XML. Ogni file XML può avere uno schema associato che lo descrive. Esistono diversi tool che possono creare un file XSD a partire da un XML, uno di questi, che trovo molto pratico è quello di Flame-Ware completamente on-line. 

Il nostro file XML iniziale potrebbe essere descritto da questo XSD, supponendo che tutti i campi siano stringe.

<?xml version="1.0"?>
<!-- Generated using Flame-Ware Solutions XML-2-XSD v2.0 at http://www.flame-ware.com/Products/XML-2-XSD/ -->
<xs:schema id="DataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="DataSet" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="logunit_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="id" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="entered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="entered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="produced" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="produced_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="delivered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="delivered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

Per associare questo schema al file XML, è necessario dichiararlo nell’intestazione, in questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="schema.xsd">
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Così facendo però, se rilanciamo la pagina costruita in precedenza, il risultato sarà identico: un unico dataset con diverse tabelle collegate tra loro dal campo data_Id.

Quindi? La soluzione c’è. Dobbiamo solo definire uno schema XSD semplificato all’interno dell’XML stesso. In questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<xs:schema id="NewDataset" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="NewDataset" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" type="xs:string" minOccurs="0" />
              <xs:element name="entered" type="xs:string" minOccurs="0" />
              <xs:element name="produced" type="xs:string" minOccurs="0" />
              <xs:element name="delivered" type="xs:string" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Il risultato finale sarà quindi una DataGrid che può essere visualizzata come sotto, utilizzando pari pari il codice C# definito all’inizio di questo articolo.

Buon divertimento con l’XML..

Alcune utili consigli per chi sviluppa applicazioni ajax destinate ad essere fruibili attraverso dispositivi mobili:

• Blackberry: il browser deve essere abilitato per usare javascript. Inoltre, se si fa largo uso dello script lato client, è bene evitare di spuntare tra le opzioni il flag “Termina script in esecuzione lenti”, un semplice Bubble Sort lo manderebbe in tilt.
• Nokia (symbian): nel browser standard il metodo open(“GET”,”xml/test2.xml”,true) funziona solo in modalità asincrona, ovvero con l’ultimo parametro settato a true; scaricando il browser Opera Mini invece non ci sono problemi in entrambi i casi: sincrono/asincrono.
• iPhone: che dire.. finora nessun problem riscontrato: browser e processore appartengono a una categoria superiore.

Purtroppo non ho ancora avuto modo di fare test su dispositivi con Android..

Ma veniamo al dunque.. Tutto prende il via dagli esempi sul sito W3C, utilissimi per fare pratica.

L’obiettivo è realizzare una applicazione che va a interrogare un file xml, riportante i dati di produzione (magari estratti direttamente dal gestionale aziendale), visualizzandoli in maniera ottimizzata per schermi di modeste dimensioni.

L’esempio con il risultato finale è visibile qui.

Questa è la struttura dela file XML:
<?xml version="1.0" encoding="UTF-8"?>
<db>
<item>
<period>04.2010</period> <!-- Periodo: mese o giorno -->
<logunit id="0010">Italy Milan</logunit> <!-- Divisione di produzione-->
<delivered matcode="000123">268</delivered> <!-- Quantita' spedita -->
<finished matcode="100123">265</finished> <!-- Quantita' versata -->
<description>Product One</description> <!-- Descrizione codice materiale  -->
<update>15.04.2010 - 16:43</update> <!-- Ultimo aggiornamento -->
</item>
</db>

Supponiamo di voler offrire all’utente un menù per selezionare la divisione logistica su cui fare l’analisi e filtrare così i dati relativi alla singola divisione raggruppati in righe in base agli intervalli temporali, cliccando sulla singola riga è poi possibile vedere il dettaglio.

Ecco il codice della pagina web, con il suo javascript:
<html>
<head>
<title>Mobile Web Access</title>
<script type="text/javascript">
var xmlDoc;
var x; //array dove memorizzo la risposta xml
//inizio chiamata
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
if (xhttp.overrideMimeType) {
xhttp.overrideMimeType('text/xml');
}
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = alertContents; //gestione eventuali errori
xhttp.open("GET","xml/test2.xml",true); //chiamata asincrona
xhttp.send("");
// Questo metodo viene eseguito in modo asincrono quando arriva la risposta dal server
function alertContents() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
processResponse(); //gestione risposta
}
else {
document.write('<small>There was a problem with the request, sorry. Try later or contact your system administrator..</small>');
}
}
}
function processResponse() {
xmlDoc=xhttp.responseXML;
x=xmlDoc.getElementsByTagName("item");
}
//mostra i dati nel div in alto
function show(i) {
logunit=(x[i].getElementsByTagName("logunit")[0].childNodes[0].nodeValue);
logunitID=(x[i].getElementsByTagName("logunit")[0].getAttribute("id"));
period=(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
description=(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
delivered=(x[i].getElementsByTagName("delivered")[0].childNodes[0].nodeValue);
deliveredCode=(x[i].getElementsByTagName("delivered")[0].getAttribute("code"));
finished=(x[i].getElementsByTagName("finished")[0].childNodes[0].nodeValue);
finishedCode=(x[i].getElementsByTagName("finished")[0].getAttribute("code"));
update=(x[i].getElementsByTagName("update")[0].childNodes[0].nodeValue);
txt="<strong>Logistic Unit</strong>: "+logunitID+" - "+logunit+"<br /><strong>Period</strong>: "+period+"<br /><strong>Description</strong>: "+description+"<br /><img style='float:left; margin-right: 2px;' src='icon.png' alt='icon'/><strong>Delivered</strong>: "+delivered+"<br /><strong>Finished</strong>: "+finished+"<br /><div style='border: 1px dotted #fff; padding: 2px; background: #f9f9f9; color: #666;'><small><em>Last update: "+update+"</em></small><br/><small><a href='#item"+i+"'>Go Down To List..</a> | <a href='#show' onclick='show(" + (i-1) + ")'>Prev..</a> | <a href='#show' onclick='show(" + (i+1) + ")'>Next..</a></small></div>"  ;
document.getElementById("show").innerHTML=txt;
}
//crea tabella coi record relativi alla singola divisione
function createTable(t) {
document.getElementById("show").innerHTML="<em>"+t+": click on a table row to display the full production information.</em>";
txt="<table style='border: 2px solid #ccc; width: 100%;'>";
altStyle=0;
for (var i=0;i<x.length;i++)
{
if (x[i].getElementsByTagName("logunit")[0].getAttribute("id")==t) {
altStyle++;
if (altStyle % 2 == 0) { txt=txt+"<tr style='background: #e3efff;' onclick='show(" + i + ")'>"; }
else { txt=txt+"<tr style='border-bottom: 1px dotted #ccc;' onclick='show(" + i + ")'>"; }
txt=txt+"<td id='item"+i+"'><img src='cal.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
txt=txt+"</a></td><td><img src='car.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
txt=txt+"</a></td></tr>";
}
}
txt=txt+"</table>";
document.getElementById("table-content").innerHTML=txt;
}
</script>
</head>
<body>
<img src='mobile-logo.gif' alt='logo' /><br/>
<div id='show' style='background: #e3efff; padding: 3px; margin: 3px 0; border: 2px solid #ccc;'><em>Select Logistic Unit then click on a table row to display the full production information.</em></div>
<!--Per aggiungere una divisione, modificare questo menu -->
<img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0010")'>Italy Milan</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0020")'>Italy Rome</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0030")'>USA</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0040")'>Germany</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0050")'>China</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0060")'>Brasil</a>
<!-- fine menu selezione divisione -->
<div id='table-content'></div>
</body>
</html>


Il codice è interamente commentato, e più che descriverlo a parole vale la pena scorrerlo e leggere i commenti. Se vuoi scaricare l’esempio completo, con sorgenti e immagini: ecco lo zip.

La scelta di incorporare css e javascript all’interno della stessa singola pagina è voluta, per ottimizzare il caricamento da parte di dispositivi mobili. Certo questa è solo una base di partenza, dalla quale si potrebbero sviluppare altre funzionalità: l’esigenza di avere dati disponibili anche su dispositivi mobili è sempre più sentita; è inevitabile che in futuro si debba far fronte a queste richieste.
In fondo è pure divertente!

Come noto, un feed RSS è un documento XML. La formattazione è classica:

<?xml version=”1.0″ encoding=”UTF-8″?>
<rss version=”2.0″>
<channel>
<generator>NFE/1.0</generator>
<title>obama – Google News</title>
<link>http://news.google.it/news?hl=it&ned=it&q=obama&ie=UTF-8</link>
<language>it</language>
<webMaster>news-feedback@google.com</webMaster>
<copyright>©2008 Google</copyright>
<pubDate>Mon, 15 Dec 2008 14:34:32 GMT</pubDate>
<lastBuildDate>Mon, 15 Dec 2008 14:34:32 GMT</lastBuildDate>
<image>
<title>obama – Google News</title>
<url>http://news.google.com/intl/it_it/images/news_res.gif</url>
<link>http://news.google.it/</link>
</image>
<item>
<title>USA: OBAMA ANNUNCIA OGGI NOMINE ENERGIA E AMBIENTE – La Repubblica</title>
<link>http://news.google.it/news/url?sa=T&ct=it/0-0&fd=R&url=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF0go8PkbUwHKLk9BaKdp8dFCS0hg</link>
<guid isPermaLink=”false”>tag:news.google.com,2005:cluster=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html</guid>
<pubDate>Mon, 15 Dec 2008 07:37:02 GMT</pubDate>
<description><table border=0 width= valign=top cellpadding=2 cellspacing=7><tr><td width=80 align=center valign=top><font style=”font-size:85%;font-family:arial,sans-serif”><a  href=”http://news.google.it/news/url?sa=T&ct=it/0i-0&fd=R&url=http://www.instablog.org/ultime/35898.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNFqys_EXXw7Kh4xa96o32AB49JHvw”><img src=http://news.google.it/news?imgefp=ve3DuBkpQiwJ&imgurl=www.instablog.org/blogpress/art/ultimora/obama.jpg width=80 height=51 alt=”” border=1><br><font size=-2>The Instablog</font></a></font></td><td valign=top class=j><font style=”font-size:85%;font-family:arial,sans-serif”><br><div style=”padding-top:0.8em;”><img alt=”” height=”1″ width=”1″></div><div class=lh><a href=”http://news.google.it/news/url?sa=T&ct=it/0-0&fd=R&url=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF0go8PkbUwHKLk9BaKdp8dFCS0hg”>USA: <b>OBAMA</b> ANNUNCIA OGGI NOMINE ENERGIA E AMBIENTE</a><br><font size=-1><font color=#6f6f6f>La Repubblica -</font> <nobr>6 ore fa</nobr></font><br><font size=-1>Il presidente eletto, Barack <b>Obama</b>, annuncera’ oggi le nomine del segretario al Dipartimento Energia e dello ‘zar’ per l’Ambiente. Gli annunci, che verranno <b>…</b></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-1&fd=R&url=http://notizie.alice.it/notizie/esteri/2008/12_dicembre/15/usa_obama_incontra_oggi_staff_difesa_e_annuncia_nomine_ambiente,17232675.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNHg4RwSRzsrR_uvMvcY3h-S38meRg”>Usa/ <b>Obama</b> incontra oggi staff difesa e annuncia nomine ambiente</a> <font size=-1 color=#6f6f6f><nobr>Virgilio Notizie</nobr></font></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-2&fd=R&url=http://www.agenziami.it/ultime/9415/USA%2BObama%2Bpronte%2Ble%2Bnomine%2Bper%2Bl%2Bambiente/&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNGniMEyAO4lJg5HiWJCKROXee8p_g”>USA. <b>Obama</b>, pronte le nomine per l’ambiente</a> <font size=-1 color=#6f6f6f><nobr>(ami) Agenzia Multimediale Italiana</nobr></font></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-3&fd=R&url=http://www.instablog.org/ultime/36309.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF64d7ozOXQdd8tBoaRDHWfPlBfsg”><b>Obama</b>: nomine ambiente, oggi gli annunci ufficiali</a> <font size=-1 color=#6f6f6f><nobr>The Instablog</nobr></font></font><br><font class=p size=-1><a class=p href=http://news.google.it/news?hl=it&ned=it&ie=UTF-8&ncl=1263615727><nobr>e altri 4 articoli simili</nobr></a></font></div></font></td></tr></table></description>
</item>
[...]
</channel>
</rss>

Si può formattare a dovere con un po’ di XSL per pubblicare ad esempio i titoli, rendendoli cliccabili con un link diretto all’articolo (quello contenuto nel tag <link>).

<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<xsl:template match=”/rss”>
<html>
<head>
<!–<link href=”style.css” rel=”stylesheet” type=”text/css” />–>

</head>
<body>
<div id=”logo” style=”border-bottom: 1px solid #ccc; margin-bottom: 5px; font-size: 1.2em; font-weight: bold;”>
<xsl:element name=”a”>
<xsl:attribute name=”href”>
<xsl:value-of select=”channel/link” />
</xsl:attribute>
<xsl:value-of select=”channel/title” />
</xsl:element>
</div>
<div class=”Snippet”>
<ul style=”list-style: none; margin: 0; padding:0″>
<xsl:for-each select=”channel/item”>
<li>
<xsl:element name=”a”>
<xsl:attribute name=”href”>
<xsl:value-of select=”link”/>
</xsl:attribute>
<xsl:value-of select=”title”/>
</xsl:element>
<br/>
<small style=”color: #ccc; text-align: right”><xsl:value-of select=”pubDate” /></small>
</li>
</xsl:for-each>
</ul>
</div>
<div id=”footer” style=”display: none;”>
<xsl:value-of select=”channel/copyright” />
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Per semplificare un po’ ho aggiunto qualche regola CSS direttamente in linea, ma nulla vieta di creare un foglio esterno (ho commentato la porzione di codice che richiamerebbe un foglio di stile).
L’unica vera scocciatura di Google News è che non offre un feed pulito, ma all’interno del tag <description> inserisce codice html e questo può dare problemi in fase di parsing XML.

Per chi volesse approfondire l’argomento un buon punto di partenza è questo. Buona lettura.