DHTMLX e la creazione di applicazioni per il web

Javascript, php e fogli di stile per un programmatore esperto sono strumenti che forniscono massima potenza e flessibilità e che permettono di creare applicazioni che ben poco hanno da invidiare ai tradizionali programmi desktop. Partire da zero nella creazione di un'applicazione per il web è però un'attività non banale che richiede tempo e conoscenze approfondite. Fortunatamente sono disponibili in rete librerie Javascript che semplificano sensibilmente tale lavoro.

Tra le tante librerie disponibili per la creazione di interfacce, una delle più complete e versatili è DHTMLX. Si tratta di una libreria commerciale utilizzata da aziende del calibro di Intel, Google e IBM, che viene messa a disposizione sotto licenza GPL a condizione che i progetti nei quali viene impiegata siano rilasciati sotto la stessa licenza.

Scopo di questo articolo non è tanto insegnarvi a programmare con DHTMLX, quanto darvi un'idea delle potenzialità di questo strumento.

Creiamo un'applicazione di esempio

Per testare DHTMLX mi sono cimentato nella creazione di un'applicazione interattiva per il calcolo del carico neve secondo le Norme Tecniche per le Costruzioni 2008.

Prima di tutto è necessario caricare sul vostro sito le librerie necessarie, che troverete all'indirizzo dhtmlx.com/docs/download.shtml. Due i possibili approcci:

caricare le definizioni delle sole classi utilizzate
caricare tutte le definizioni raccolte nell'unico file dhtmlx.js

Se come me optate per la seconda opzione, nella sezione head includete

Sempre nella sezione head è necessario includere il foglio di stile di DHTMLX

Nella sezione body definiamo l'evento DHTMLX "load", cui associamo i comandi che saranno eseguiti al caricamento della pagina

Passiamo a disegnare l'interfaccia utente che vogliamo sia composta da due riquadri verticali paralleli: un primo per consentire l'input dei dati; un secondo per mostrare a video il risultato del calcolo.

Usiamo i comandi

var obj = document.getElementById("mainLayout");
var mainLayout = new dhtmlXLayoutObject(obj, "2U");
mainLayout.cells("a").setText("Input");
mainLayout.cells("b").setText("Risultati");

L'oggetto principale obj sarà disegnato nella sezione "mainLayout" che definiremo con il codice HTML

Per associare alla nostra applicazione un menu usiamo invece i comandi

snowMenu = mainLayout.attachMenu();
snowMenu.setIconsPath( "/imgs/" );
snowMenu.loadStruct("<percorso>/snow-menu.xml");

Il file snow-menu.xml contiene la struttura del menu, qualcosa del tipo

<?xml version="1.0"?>
<menu>
  <item id="file" text="File">
    <item id="new" text="Nuovo" img="new.gif" imgdis="new_dis.gif"/>
    <item id="file_sep_1" type="separator"/>
    <item id="open" text="Apri" img="open.gif" imgdis="open_dis.gif"/>
    <item id="save" text="Salva" img="save.gif" imgdis="save_dis.gif"/>
  </item>
  <item id="sep_top_1" type="separator"/>
  <item id="help" text="Aiuto">
    <item id="about" text="Info..." img="about.gif" imgdis="about_dis.gif"/>
  </item>
</menu>

I file GIF sono contenuti nella directory "<percorso>/imgs/" definita con il comando setIconsPath().

Per associare delle azioni alle voci del menu, associamo all'evento "onClick" la seguente funzione

snowMenu.attachEvent("onClick", function(id, zoneId, cas){
  if( id == "save" ){
    saveXMLFile();
  } else if( id == "new" ){
    newXML();
  } else if( id == "open" ){
    loadXMLFile();
  } else if( id == "about" ){
    aboutMessage();
  }
});

Le funzioni saveXMLFile(), newXML(), loadXMLFile(), aboutMessage() eseguono i comandi desiderati per ciascuna voce del menu.

Si procede analogamente per la creazione dei form. Abbiamo un primo form per l'inserimento dei dati di input

snowInputForm = mainLayout.cells("a").attachForm("Input dati");

E' possibile definire gli elementi che compongono il form (caselle di testo, etichette, etc) con un file XML.

snowInputForm.loadStruct("<percorso>/snow-input.xml");

Nel nostro caso il file snow-input.xml contiene

<?xml version="1.0"?>
<items>
  <item type="combo" name="zone" inputWidth="250" label="Zona" labelWidth="150" position="label-top">
    <option text="Zona 1 - Alpina" value="1"/>
    <option text="Zona I - Mediterranea" value="2"/>
    <option text="Zona II" value="3"/>
    <option text="Zona III" value="4"/>
  </item>
  <item type="combo" name="wind" inputWidth="250" label="Esposizione ai venti" labelWidth="150" position="label-top">
    <option text="Battuta dai venti" value="1"/>
    <option text="Normale" value="2" selected="true"/>
    <option text="Riparata" value="3"/>
  </item>
  <item type="input" name="as" inputWidth="100" label="Altitudine (m s.l.m.)" labelWidth="150" position="label-left"/>
  <item type="input" name="Ct" inputWidth="100" label="Coeff. termico (Ct)" labelWidth="150" position="label-left"/>
  <item type="input" name="pendence1" inputWidth="100" label="Pendenza falda 1 [°]" labelWidth="150" position="label-left"/>
  <item type="input" name="pendence2" inputWidth="100" label="Pendenza falda 2 [°]" labelWidth="150" position="label-left"/<
</items<

I valori delle caselle del form vengono letti da un altro file che chiamiamo snow-data.xml

<?xml version="1.0"?>
<data>
  <zone>3</zone>
  <wind>2</wind>
  <as>350</as>
  <Ct>1.0</Ct>
  <pendence1>42</pendence1>
  <pendence2>34</pendence2>
</data>

Per caricare i valori nelle caselle del form usiamo il comando load()

snowInputForm.load("<percorso>/snow-data.xml");

Non vado oltre nei dettagli per non essere noioso, e vi mostro direttamente il risultato finale, spendendo solo due parole su come funziona l'applicazione:

i dati di input vanno inseriti nel pannello di sinistra
premendo il pulsante "Calcola" sulla destra verranno visualizzati i risultati
le voci di menu salva e apri permettono, rispettivamente, di salvare i dati di input su un file XML locale e di ricaricarli

Se avete voglia di entrare più nel dettaglio, potete visualizzare il codice sorgente della pagina (su Firefox tasto destro mouse e click su "Visualizza sorgente pagina").

Il codice è rilasciato sotto licenza GNU GPL v2.

Ma c'è molto di più...

Abbiamo visto brevemente solo una piccola parte di cosa è possibile fare con DHTMLX.

Le possibilità spaziano da calendari per agevolare l'input di date all'interno di caselle di testo,

a grafici renderizzati lato client sulla base di dati contenuti in tabelle

fino a programmi più complessi come diagrammi di Gantt (di seguito è riportata una semplice immagine; per l'applicazione interattiva vi rimando alla pagina del sito ufficiale)

Vista di un applicazione con diagramma di Gnatt realizzata con DHTMLX

e agende interattive (anche in questo caso segue una semplice immagine; per l'applicazione interattiva vi rimando alla pagina del sito ufficiale)

In questo modo è possibile creare applicazioni che hanno le stesse funzionalità di un programma desktop senza dover installare nulla e con una maggiore facilità di interazione con la rete.

Se sono riuscito a suscitare la vostra curiosità e volete approfondire il funzionamento di DHTMLX vi consiglio di partire dalla pagina di supporto ufficiale.

Tags: javascript, dhtmlx

Autore: Michele Mocciola

Data creazione: 2015-06-23

Data ultima modifica: 2015-10-30