Realizzare un template per il digital signage in grado di leggere dati XML

Come realizzare un Flash da utilizzare come base per un template per Web Signage in grado di leggere dati in formato XML

In questa mini guida affronteremo il tema del’integrazione di dati in formato XML in un file Flash e come sia possibile derivare da esso un template per Web Signage in grado di valorizzare dinamicamente dei campi basati su questa fonte di dati esterna. Le applicazioni nell’ambito del digital signage sono molteplici. Una fra tutte la possibilità di realizzare cataloghi che rappresentino prodotti, immagini, offerte, etc, ricavando le informazioni direttamente da un CMS o da un gestionale preesistente in grado di generare dati in formato XML.

Per iniziare esaminiamo velocemente la struttura di un file XML:

<?xml version="1.0" encoding="UTF-8" ?>
 <websignage>
    <item>
        <name>Nome Oggetto</name>
        <description>Descrizione Oggetto.</description>
        <image>http://Percorso immagine oggetto</image>
    </item>
     <item>
        <name>Nome Oggetto2</name>
        <description>Descrizione Oggetto2.</description>
        <image>http://Percorso immgine oggetto2</image>
    </item>
</websignage>

Senza dilungarci più di tanto nella spiegazione del formato XML possiamo dire:

1)  il primo TAG dell’XML <?xml version="1.0" encoding="UTF-8"?> indica la versione e la codifica dei caratteri utilizzata, e non è indispensabile per Flash, anzi possiamo tranquillamente ometterlo.

2) Tutti i nodi che contengono i campi e i relativi valori si trovano all’interno del nodo radice <websignage>

Il codice Action Script

Per poter passare i dati a Flash sarà necessario scrivere del codice actionscript da inserire nel primo frame:

var mioXML:XML = new XML();
mioXML.ignoreWhite = true;
mioXML.onLoad = function(success) {
      if (success) {
            trace("FILE XML CARICATO CON SUCCESSO");
      } else {
            trace("FILE XML NON CARICATO");
      }
}
mioXML.load("mio.xml")

Abbiamo inserito il comando Trace ai fini del debug della nostra applicazione. Per testare quindi la funzionalità di lettura di un file xml da parte del flash , salviamo il nostro file xml di esempio (mio.xml) nella stessa directory dove andremo a creare il file di progetto .fla.

Apriamo il flash e creiamo un nuovo documento (ActionScript 2.0):

Apri file flash
Posizioniamoci sul primo frame,  premiamo F9 e incolliamo il codice su scritto nella finestra di programmazione relativa al frame:

incollacodice

Salviamo il nostro file flash nella stessa directory del file con estensione xml preso ad esempio all’inizio.

A questo punto testiamo il filmato e se tutto è stato eseguito correttamente, avremo nella  finestra di Output il messaggio che indica che file xml è stato correttamente caricato

testcodice

Ora che ci siamo assicurati che il file xml è caricato correttamente procediamo alla lettura dei dati all’interno della struttura XML.

Per fare questo aggiungiamo altre poche righe di codice:

var mioXML:XML = new XML();
mioXML.ignoreWhite = true;
var output:String = "";
mioXML.onLoad = function(success) {
if (success) {
      var myarray:Array = mioXML.firstChild.childNodes;
      output=myarray[0].childNodes[0].firstChild.nodeValue;
      output+="\n\n";
      output+=myarray[0].childNodes[1].firstChild.nodeValue;
      output+="\n\n";
      output+=myarray[0].childNodes[2].firstChild.nodeValue;
      trace(output);
      } else {
            trace("FILE XML NON CARICATO");
      }
}
mioXML.load("mio.xml")

Avviando il filmato con Ctrl+Invio in output avremo la visualizzazione dei dati presenti  nel file XML.

A questo punto vogliamo inserire i dati estratti dal file XML all’interno di un campo di testo nello Stage di Flash.

Creiamo un testo dinamico all’interno dello Stage,  e assegniamo un nome d’istanza, nel nostro caso mio_txt.

Sostituiamo trace(output); con : mio_txt.text=output

L’esecuzione del filmato ci consentirà di valorizzare il testo dinamico con i dati estratti dal file XML.

test esecuzione flash

Predisporre l’accesso a fonti di dati esterne

Dopo aver testato l’applicazione, dobbiamo immaginare che la fonte di dati sia disponibile, nel medesimo formato, da una qualunque sorgente esterna. Per fare questo è necessario predisporre una variabile d’ambito tale che Web Signage Template la riconosca come campo valorizzabile.
Per fare questo basta semplicemente sostituire  la variabile fissa in mioXML.load(“mio.xml”) con  mioXML.load (WSXML), dove la variabile WSXML è una variabile d’ambiente di  Web Signage che deve essere scritta esattamente come indicato e a caratteri maiuscoli.

Inoltre per evitare possibili ritardi di caricamento della variabile WSXML, e consigliabile che la lettura dei dati avvenga qualche frame successivo al primo.

codice action script
Per evitare che in Web Signage Template Manager l’oggetto testo dimanico mio_txt risulti visibile tra i campi, si è proceduto a  modificare il nome dell’istanza in _mio_txt (facendola precedere dal trattino basso _).

Siamo arrivati alla fine della creazione del file flash alla base del Modello per Web Signage Template Manager. Compiliamo il progetto e otteniamo così un file con estensione .swf, pronto per essere trasformato in un modello per Web Signage.

Creazione e test del modello con Template Manager

Lanciamo  Web Signage Template Manager  e testiamo il nostro modello, sezionando Nuovo da Flash il file generato precedentemente.

Noterete che  all’apertura del file swf,  Web Signage Template Manager mostra su Proprietà e risorse esterne il Connettore XML attivato.

connettore xml

Testiamo il clip attraverso il pulsante anteprima

Nella finestra di anteprima andiamo a specificare l’URL del nostro file XML

risorse xml

Non ci resta che compilare e controllare il corretto funzionamento.

A questo punto sarà possibile salvare il nostro modello nel formato .wst, pronto per essere letto all’interno di Web Signage per la creazione di un Clip di digital Signage personalizzato attraverso una fonte di dati esterna in formato XML.

In conclusione sottolineiamo come Web Signage dispone già di un modulo per la gestione di un catalogo prodotti ed un elenco di news/eventi, ed è in grado di generare la struttura XML e il relativo link da valorizzare all’interno di un clip basato su un template sviluppato a partire da un flash in grado di interpretare e rappresentare opportunamente la struttura. Per maggiori informazioni vi invitiamo a consultare la guida on line, in particolare nella sezione dove si descrive il modulo WebXML.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...