28 marzo, 2012 | di in » Strumenti

Su TANTO abbiamo scritto in varie occasioni di jQuery e abbiamo visto vari esempi delle sue potenzialità nella creazione di interfacce efficaci ed esteticamente valide per le applicazioni web.
Esistono tantissime estensioni per questo popolare framework ed una delle mie preferite è sicuramente jqGrid, utilissima per chi sviluppa applicazioni web in ambito geospaziale.
La sua utilità nel nostro campo è presto detta: un’applicazione GIS, che sia desktop o web, non consiste solo della mappa, ma deve dare anche la possibilità a chi la usa di esplorare le informazioni associate agli elementi visualizzati, cioè gli attributi. jqGrid assolve benissimo il compito.
Gli esempi sul sito ufficiale offrono una buona carrellata delle possibilità del plugin e, insieme al dettagliato wiki, permettono di produrre le prime griglie in tempi brevi.
I formati di dati che jqGrid è in grado di importare e rappresentare sono molti e, tra questi, quello che ci interessa in particolar modo oggi è JSONP (JavaScript Object Notation with Padding).
In breve, si tratta di una tecnica che supera le restrizioni della same origin policy e permette di effettuare chiamate tra domini differenti. E’ bene sapere, comunque, che questa è una regola di sicurezza che, impedendo di eseguire script provenienti da siti esterni e “non fidati”, protegge l’utente da attacchi informatici detti XSS (Cross Site Scripting).
Ricorrere a JSONP è una delle strategie disponibili per aggirare questa politica, che risulta parecchio limitante per le applicazioni web che, come i Mash-up spaziali spesso citati su TANTO, fanno uso di dati provenienti da più fonti.
Il trucco si basa sulla capacità del tag html script di caricare file javascript, anche esterni e, all’occorrenza, eseguire del codice. Non mi dilungo oltre sull’argomento e rimando a wikipedia e a questo articolo su HTML.it per eventuali approfondimenti.

Vediamo subito un esempio. Come fonte di dati prendiamo il risultato di un query task lanciato verso un MapService ReST di ArcGIS Server. Il codice per ottenere la griglia di attributi è molto semplice e il risultato di sicuro effetto.

	
$('#grid').jqGrid({
url: 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/'+
     'services/Demographics/ESRI_Census_USA/MapServer/4/query',
datatype: 'jsonp',
postData: $.param({
where: "1=1",
returnGeometry: false,
outFields: "ObjectID,NAME,STATE_NAME,CNTY_FIPS",
f: "json"
}),
colModel: [
{name: 'ObjectID', label: 'ID', width: 60, jsonmap: 'attributes.ObjectID',sorttype:'number'},
{name: 'NAME', label: 'Name', width: 170, jsonmap: 'attributes.NAME'},
{name: 'STATE_NAME', label: 'State', width: 150, jsonmap: 'attributes.STATE_NAME'},
{name: 'CNTY_FIPS', label: 'FIPS', width: 60, jsonmap: 'attributes.CNTY_FIPS'}
],
caption:"ArcGIS Server 10 query",
toppager: false,
pager:"#pager",
rowList: [50, 100, 250, 1000],
rowNum: 50,
jsonReader: {
root: 'features',
repeatitems: false,
},
loadonce: true,
ignoreCase: true,
viewrecords: true,
height: '300',
width:'500'
}).jqGrid('navGrid', '#pager', {search:false, add: false, edit: false, del: false});
});
	

Il codice è volutamente semplice e ovviamente si può sostituire il valore della clausola where, qui passata come parametro e valorizzata con 1=1, con qualcosa di più utile (o dinamico).
Qui sotto potete vedere l’output della query in una tabella dinamica che offre la possibilità di consultare in modo ricco ed interattivo la nostra sorgente di dati spaziali d’esempio

Attenzione! Questo è un articolo di almeno un anno fa!
I contenuti potrebbero non essere più adeguati ai tempi!

Lascia un commento

Tag html consentiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


+ 2 = 8


TANTO non rappresenta una testata giornalistica ai sensi della legge n. 62 del 7.03.2001, in quanto non viene aggiornato con una precisa e determinata periodicita'. Pertanto, in alcun modo puo' considerarsi un prodotto editoriale.