COME PROGRAMMARE UNA WEBAPP

In questa sezione del manuale verrà mostrato quali sono i meccanismi che devono essere utilizzati per l’interazione con gli archivi del gestionale. Per i dettagli sulle istruzioni Sprix (costruzione dei JSON) si rimanda all’opportuna sezione del manuale sprix.

Come prerequisito è richiesta una conoscenza base di HTML e Javascript. I CSS sono facoltativi (e non verranno trattati in questo esempio) ma è caldamente consigliato averne comunque una conoscenza di base.

N.B.: è a carico del programmatore fare i dovuti controlli sulla compatibilità delle API JavaScript utilizzate in base alla versione dello user agent utilizzato. Nel caso di iDesk lo user agent è quello del browser interno alle WebApp, mentre nel caso di WebDesk (PassGo) lo user agent è quello del browser utilizzato per l’esecuzione del Desk stesso.

Come prima cosa bisogna definire la struttura della WebApp. Tipicamente questo viene fatto costruendo un opportuno file HTML (HTML5) con tutti gli elementi che dovranno comporre la WebApp (caselle di input, pulsanti, tabelle, liste, etc.).

Per arricchire graficamente la pagina web (ma è facoltativo) dovranno essere definiti uno o più fogli di stile (CSS) al fine di impostare, oltre alla colorazione, anche la posizione dei componenti ed il modo in cui rispondono all’impaginazione.

E’ invece obbligatorio (solo se è prevista una interazione con il gestionale) definire uno o più file JavaScript nei quali, oltre alle logiche di programmazione definite dall’utente, utilizzare opportune funzioni proprietarie messe a disposizione dall’elemento WebApp per poter interagire con gli archivi del gestionale.

Di seguito un esempio banale di struttura HTML.

Si tratta di una pagina nella quale sarà mostrata una tabella (tarti), che verrà costruita runtime in JavaScript, contenente gli articoli.

Sono presenti i riferimenti ai fogli di stile (stili.css, non oggetto di questo esempio) ed al file JavaScript, vero cuore di tutta l’applicazione (funzioni.js)

<!DOCTYPE html>

<html>

<head>

<!—Titolo della webapp -->

<title>Lista articoli</title>

</head>

<body>

<div id="titolo" class="titolo">Lista articoli</div>

<thead>

<tr>

<th>Codice</th>

<th>Descrizione</th>

<th>Alternativo</th>

<th>Prezzo</th>

<th>Costo ultimo</th>

<th>Ubicazione</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<script type="text/javascript" src="funzioni.js"></script>

</body>

</html>

Il file HTML (salvato ad esempio come index.htm) deve essere salvato dentro la cartella che abbiamo definito per l’elemento WebApp: tipicamente sarà il file di partenza della WebApp (quello che deve essere specificato in “Nome file di partenza”).

Il cuore vero e proprio dell’applicazione Web è implementato in JavaScript, direttamente nel file HTML oppure (consigliato) in un file JavaScript esterno (come nell’esempio). N.B.: l’elemento WebApp potrebbe anche concludersi con un semplice file HTML ma in questo caso sarebbe preclusa ogni interazione con gli archivi del gestionale.

Per poter interagire con il gestionale, il file JavaScript deve obbligatoriamente:

Registrare un evento che avverta quando la WebApp è pronta all’invio dei comandi
Utilizzare una funzione JavaScript proprietaria per l’interazione con il server: MxNative.eseguiCollageServerRemoto()

Il file JavaScript, o il codice JavaScript inserito nel file HTML, viene eseguito non appena il browser interno della WebApp lo individua, come succede in ogni browser. Non è quindi detto che, al momento della messa in esecuzione, le funzioni necessarie all’interazione siano già disponibili. Per questo motivo è necessario registrare un evento, rilasciato dall’elemento WebApp, che “scatta” quando tutti gli elementi sono pronti per l’utilizzo.

E’ quindi buona norma, come prima istruzione dello script, registrare l’evento ‘nativeready’

window.addEventListener('nativeready', <funzione>, true);

Dove nativeready è l’evento messo a disposizione dal framework della WebApp e <funzione> è la funzione che viene eseguita quando “scatta” l’evento. Sarà quindi dentro la funzione che deve essere inclusa tutta la logica di interazione con il collage server remoto.

Nello specifico è dentro questa funzione che deve essere utilizzato il metodo

MxNative.eseguiCollageServerRemoto('<nome_file>', '<nome_etichetta>',<json>, <call_back>);

Dove <nome_file> è il nome del file del Collage Server Remoto, <nome_etichetta> è l’etichetta definita dentro il Collage Server Remoto, <json> è la struttura JSON in cui sono passati eventuali dati al server, <call_back> è la funzione di ritorno che deve essere utilizzata per la gestione del risultato.

window.addEventListener('nativeready', getArti, true);

//********************* Chiamate remote ************

function getArti() {

//* JSON con i dati da inviare

//* può essere vuoto se non ci sono dati da inviare

var arti = {}

//* Funzione proprietaria del framework per interfacciarsi con il collage server remoto

MxNative.eseguiCollageServerRemoto('colrem', 'GET_ARTI',arti, callBackArti);

}

//* Funzione di ritorno per il trattamento dei dati ricevuti dal server

//* I dati sono ritornati in un JSON (in questo caso nella variabile a)

function callBackArti(a)

{

//* Estraggo i dati dal JSON e costruisco la tabella degli articoli

var table = document.getElementById('tarti');

table.setAttribute("class","tabar");

var tbody = table.getElementsByTagName('tbody')[0];

for(var i=0; i<a.data.arti.length; i++){

var tr = document.createElement('tr');

tr.setAttribute("id","tr"+i);

tr.setAttribute("class","righe");

for(var j=0; j<a.data.arti[i].length; j++)

{

var td = document.createElement('td');

td.setAttribute("class","campi");

var tx = document.createTextNode(a.data.arti[i][j]);

td.appendChild(tx);

tr.appendChild(td);

}

tbody.appendChild(tr);

}

Anche questo file JavaScript (funzioni.js) dovrà essere posizionato dentro la cartella della WebApp, nella radice o in un percorso relativo alla radice.

La funzione di callBack (callBackArti), ritorna il risultato in una variabile (a in questo caso) in cui sarà memorizzato tutto il JSON di ritorno.

Il programmatore dovrà poi “scorrere” il JSON (a.data.arti) per estrarre i dati di interesse. Nell’esempio, man mano che si estraggono i dati corrispondenti agli articoli, viene costruita la tabella HTML utilizzando il DOM (Document Object Model).

N.B.: se si prova ad eseguire l’applicazione in un Browser esterno (ad esempio Chrome) verranno restituiti degli errori in quanto il nativeready e la MxNative.eseguiCollageServerRemoto sono elementi disponibili esclusivamente all’interno dell’elemento WebApp di Passbuilder.

Fino a questo punto sono stati definiti tutti gli elementi lato client (cioè HTML e JavaScript). Per interagire con gli archivi del gestionale è necessario inserire nella PassApp, oltre all’elemento WebApp, anche un elemento Collage Server Remoto.

Come mostrato nell’esempio, è stata definita l’etichetta GET_ARTI in cui, con un ciclo tabellare, si estraggono alcune informazioni degli articoli e si costruisce il file JSON di output (_JSONDATIOUT). Come è stato già indicato nell’esempio del file JavaScript, l’etichetta GET_ARTI ed il file colrem sono i riferimenti che vengono passati alla funzione eseguiCollageServerRemoto.

Lanciando la WebApp dal menu in cui è stata inserita, il risultato sarà il seguente (è stato utilizzato anche un foglio di stile CSS non oggetto di questo esempio).

DATATREK