(Dundas Avvia) Una nuova era per Grafica e Charting
English | Italiano
 |
About Dino EspositoDino is a trainer and software consultant based in Rome, Italy. Member of the Solid Quality Learning team, Dino specializes in Microsoft .NET technologies and spends most of his time teaching and consulting across Europe and the United States. Considered an authoritative and acknowledgeable expert in .NET Web applications, Dino regularly contributes articles to the Microsoft's content platform for developers and IT consultants. Check out his articles on a variety of MSDN Developer Centers and MSDN Magazine. |
- Il Prodotto
- Messa a Punto del Prodotto
- In Azione: Grafici Interattivi
- Selezione
- Drill-Down
- Movimenti del mouse
- Embedded UI
- E questo NON è tutto!
- Ricapitolando
A prima vista l’affermazione può sembrare eccessiva, ma non c’è alcuna esagerazione nel dire che il Web non sarebbe lo stesso senza le immagini.
Oggigiorno gran parte delle pagine che scarichiamo dal Web sono rimpinguate da grandi quantità di immagini che possiamo suddividere a grandi linee in due gruppi—immagini di contenuto e di servizio. Le cosiddette immagini di servizio servono a rendere la pagina Web più accattivante e a farla somigliare a quella di una rivista patinata con sfumature, effetti di colore, font speciali. Le immagini di contenuto, invece, semplicemente passano informazione all’utente—grafici, foto, istogrammi.
Attualmente risulta difficile credere che c’è stato un momento—ed in fondo era solo otto anni fa—in cui si potevano mettere su siti Web realistici usando solo un editor HTML, un compilatore C++ o Visual Basic e magari chiedendo ad un amico di dare una mano con Photoshop nel weekend.
In conclusione le immagini sono essenziali per il Web. Punto.
Ma quali strumenti ha a disposizione uno sviluppatore per costruire tali applicazioni? Canali multimediali cross-browser? Servizi di streaming attivabili da JavaScript o magari estensioni HTML per immagini animate?
Che ci crediate o no, nonostante tutto c’è ancora solo un modo in cui uno sviluppatore Web può inserire immagini in una pagina—il tag HTML <img> il quale punta ad un URL pubblico. Per poter essere visualizzata in una pagina Web, un’immagine deve essere identificata con un URL ed i suoi bit inviati tramite uno stream collegato all’URL.
La piattaforma Web che ospita l’applicazione gioca un ruolo chiave e determina in gran parte cosa l’applicazione può o non può fare con le immagini. Chiaramente tutto questo non rappresenta un problema per le immagini di servizio dal momento che queste sono perlopiù semplici immagini GIF statiche e spesso riferite tramite stili CSS. Al contrario, le immagini di contenuto hanno un inerente valore aggiunto per gli utenti. Evidenziare questo contenuto in modo tempestivo ed efficace è la chiave per il successo di un’applicazione.
Ci sono due principali sottotipi di immagini di contenuto—grafici e foto. Una foto è già di per sé un pezzo di informazione. L’immagine nella foto è tutto quanto l’utente richiede. È certamente possibile aggiungere una qualche forma di interattività, ma si tratta soprattutto di caratteristiche aggiuntive specifiche dell’applicazione—per esempio, zoom e panning in sistema museale.
Per i grafici la storia è ben diversa. Il grafico non è altro che uno strumento per rappresentare dell’informazione; e spesso si tratta di dati critici e altamente sensibili. Per loro natura i grafici sono interattivi, stimolano la curiosità dell’utente, inducono ad approfondire, richiamano la semantica del point-and-click, si prestano intuitivamente alla modifica di parametri e, nel contesto del Web, possono essere rigenerati velocemente e interattivamente.
I grafici sono un tipo di dato particolare e hanno bisogno di strumenti di elaborazione particolari. Ecco a voi Dundas Chart for ASP.NET.
Il Prodotto
Dundas Chart for ASP.NET è la più recente versione di un pacchetto di charting piuttosto diffuso e altamente professionale con un insieme di funzionalità con pochi riscontri. Oltre alla capacità di generare grafici di numerosissimi tipi, il prodotto presenta capacità notevoli quanto a analisi statistiche, manipolazione dei dati, calcolo di formule, aggragazioni e filtri, annotazioni dinamiche e supporto per l’interfaccia utente (toolbar, wizard).
Pensato per Visual Studio 2005 e il .NET Framework 2.0, Dundas Chart for ASP.NET versione 5.5 si inserisce perfettamente nell’ambiente design-time e offre strumenti familiari allo sviluppatore quali data visualizer, designer e properties box.
Dundas Chart for ASP.NET è disponibile in due versioni—Enterprise e Professional. La versione Enterprise Edition comprende tutte le funzionalità della versione Professional Edition, più alcune aggiunte piuttosto interessanti quali Dundas Map e Dundas Gauge. Inoltre, vi è la possibilità di avere gratuitamente Dundas Chart OLAP Services per un periodo limitato. Ultime novità ed offerte sono dettagliatamente illustrate su http://www.dundas.com/products.
Messa a Punto del Prodotto
Il programma di installazione esegue tutte le normali operazioni per un prodotto di alto livello e qualità e cioè verifica l’esistenza di Visual Studio 2005 e di un Web server e si comporta di conseguenza. In particolare, esso integra la propria documentazione con quella di Visual Studio 2005 e offre l’opportunità di creare una directory virtuale per eseguire tutti gli esempi.
Completato il setup, si può creare la prima applicazione Dundas Chart semplicemente copiando dei file nella directory Bin: il file con la licenza (*.lic), l’assembly (DundasWebChart.dll) e la documentazione IntelliSense (DundasWebChart.xml). Tutto qui. Più o meno.
Finché ci si limita a visualizzare grafici in modalità streaming non c’è bisogno d’altro. Qualora, invece, fosse necessario creare grafici usando il modello a oggetti allora i controlli avrebbero bisogno di creare file sull’hard disk locale. Ciò sarebbe un problema per qualsiasi applicazione ASP.NET. Per default, infatti, il processo ASP.NET non ha sufficienti privilegi per scrivere su disco. Si tratta di una limitazione predefinita che può essere aggirata solo aumentando i privilegi dell’account che esegue l’applicazione ASP.NET. In altri termini è necessario abilitare il processo ASP.NET alla creazione e modifica di file nel sottoalbero di directory della propria applicazione. Niente di particolarmente complesso per un Web master o un amministratore di sito. Basta navigare nella directory del sito in Gestione Risorse e visualizzare la tabella delle proprietà tramite click-destro. Poi si seleziona il pannello Sicurezza e in esso l’utente ASP.NET. L’utente ASP.NET è NETWORK SERVICE oppure ASPNET a seconda della versione di IIS che si sta utilizzando. Infine, si impostano i permessi di lettura/scrittura sulle directory interessate.
In Azione: Grafici Interattivi
I dati rappresentati in un grafico sono spesso frutto di aggregazione. Agli utenti appare una prima vista di dati ma essi hanno spesso bisogno di approfondire (drill-down), ruotare, filtrare, raggruppare. Interattivamente. D’altra parte, in una applicazione Web un grafico non è altro che una sequenza di byte organizzati in formato PNG o JPEG.
Uno sviluppatore sa che ASP.NET utilizza il meccanismo del postback per aggiornare il contenuto di una pagina. Uno sviluppatore “evoluto”, però, sa anche che un refresh completo è spesso troppo pesante per le pagine di un sito realistico dove ci possono essere grandi quantità di immagini, tabelle e contenuti multimediali. Questa è proprio la ragione per cui nel mondo è emersa la tecnologia AJAX.
Il controllo Dundas Chart supporta pienamente AJAX e dunque è in grado di aggiungere forme di interattività ad ogni grafico. In questo modo uno sviluppatore può creare eventi drill-down per offrire viste particolareggiate di un grafico, e aggiungere a piacimento tooltip grafici, menu di contesto, zoom e panning. Dundas Chart for ASP.NET costruisce il proprio supporto per la programmazione interattiva di grafici attorno a quattro pilastri e relative funzionalità: selezione, drill-down, movimenti del mouse, ed embedded UI.
Selezione
Il controllo Dundas Chart impiega tecniche di hit testing per determinare su quale elemento del grafico si è fatto click. Quindi il controllo stabilisce autonomamente quale azione intraprendere. Per esempio, se l’utente ha fatto click sulla fetta di un diagramma a torta, la fetta viene “esplosa”. Dal punto di vista del programmatore la selezione è un processo naturalmente associato con eventi server. L’interfaccia HTML cattura attività lato client (p.e., un click) ed effettua un postback AJAX. Sul server il controllo lancia un evento server sul controllo Dundas Chart che lo sviluppatore può gestire tramite codice C# o Visual Basic .NET. Ecco un esempio:
protected void Page_Load(object sender, EventArgs e)
{
this.Chart1.Click += new ImageClickEventHandler(Chart1_Click);
}
protected void Chart1_Click(object sender, ImageClickEventArgs e)
{
HitTestResult hitTestResult = this.Chart1.HitTest(e.X, e.Y);
if (hitTestResult != null)
{
this.Chart1.Titles["ClickedElement"].Text = " ... ";
}
}
Nell’evento Load della pagina si registra l’handler per l’evento Click del controllo Chart. Quando l’evento ha luogo il codice verifica la posizione del click, stabilisce quale porzione del grafico è stata coinvolta ed aggiorna l’interfaccia in modo adeguato.
L’evento Click non è la sola possibilità che offre il controllo Dundas Chart. Per esempio, è possibile associare dichiarativamente un metodo server con un evento client ed eseguire il metodo automaticamente a seguito di un evento lato client.
In ogni caso sono disponibili strumenti di programmazione per interagire con il grafico che l’utente vede e per modificarne il contenuto dinamicamente. E non è poco.
Drill-Down
Immaginiamoci per un momento nelle vesti di un manager alle prese con le vendite trimestrali dei propri agenti. All’inizio è importante vedere le vendite raggruppate globalmente per area geografica. In seguito diventerà essenziale esaminare le vendite in una particolare regione, per esempio il Nordamerica. Come chiaramente illustrato in Figura 1, il lavoro del manager risulta grandemente semplificato se egli potesse solo cliccare sul grafico in corrispondenza dell’area desiderata.
Figura 1 -- L’utente fa click sulla barra che rappresenta un valore aggregato e ottiene un secondo grafico più dettagliato.
La funzione drill-down è la combinazione di selezione e codice insito in una specifica applicazione. Il codice ad hoc semplicemente indica quale tipo di dato deve essere visualizzato in seguito alla selezione.
Movimenti del mouse
Con l’aggiunta di un po’ di JavaScript Dundas Chart for ASP.NET consente di associare tooltip agli elementi di un grafico; ma non normali tooltip di testo, bensì tooltip con grafica incorporata. Man mano che l’utente sposta il mouse sulle aree sensibili del grafico, il codice JavaScript inserisce un elemento pop-up nel sorgente HTML fornendo all’utente un preview del grafico che si otterrebbe facendo click.
Figura 2 -- I contenuti della barra che si sta per cliccare vengono mostrati in anteprima tramite un tooltip grafico, sia pure senza troppi dettagli.
Scorrimento e zoom sono altre tipiche azioni che un utente può voler eseguire su un grafico e che sarebbero ardue da ottenere senza un po’ di codice JavaScript. Appositi handler di eventi lato client capiscono le intenzioni dell’utente e trasmettono la richiesta al server per ulteriore elaborazione. Per esempio, in Figura 3 l’utente ha selezionato un’area da zoomare. Al rilascio del mouse una richiesta verrà inviata al server e una nuova immagine zoomata (e limitata all’area selezionata) verrà mostrata all’utente.
Figura 3 -- Zoom interattivo su una area selezionata
Embedded UI
Per quanto il mix di codice server e client che forma un’applicazione possa essere articolato e complesso è molto improbabile che esso possa soddisfare tutte le possibili richieste e necessità dell’utente. Ciò è dovuto ad un semplice fatto—è di fatto impossibile conoscere tutte le possibili impostazioni e formati che un utente finale, o persino un utente esperto, può volere; e spesso si tratta di necessità che si manifestano improvvisamente. Per non parlare di situazioni in cui il grafico è utilizzato per simulare scenari ipotetici.
Dunque, una soluzione professionale per il charting deve incorporare alcuni elementi di interfaccia che, sebbene inizialmente nascosti, possano essere visualizzati su richiesta ed usati per modificare “al volo” alcuni parametri del grafico. Dundas Chart for ASP.NET supporta tre tipi di elementi di interfaccia—toolbar, menu di contesto e property box.
La Figura 4 mostra un grafico associato ad una toolbar. L’utente può così autonomamente modificare l’aspetto e le caratteristiche del grafico usando i comandi della toolbar. Nell’esempio l’utente sceglie tra una visualizzazione 3D e 2D.
Figura 4 -- Una toolbar per modificare dinamicamente l’aspetto del grafico
La toolbar può contenere una combinazione di comandi sia predefiniti sia definiti dal programmatore.
E questo NON è tutto!
Dundas Chart for ASP.NET contiene molto più di quello che viene descritto in questo articolo. Vi sono un vasto assortimento di grafici 2D e 3D, servizi OLAP, capacità di reportistica, strumenti per mappe e misuratori (gauge). Vediamo una breve rassegna di alcune caratteristiche.
Le annotazioni sono estensioni ai grafici che gli sviluppatori usano per evidenziare dati o aggiungere ulteriori funzionalità. Classiche annotazioni sono nuvolette, linee, frecce, rettangoli, e persino note manuali.
La libreria comprende metodi per calcolare formule sui dati, filtrarli, raggrupparli, gestire dati mancanti o vuoti in modo elegante ed efficace. In poche parole, la libreria offre gli strumenti per implementare e far effettuare una buona analisi dei dati.
Data e ora sono tipi di dato piuttosto comuni nelle librerie software e spesso gli oggetti che le compongono sanno lavorare in modo nativo su tali dati. È meno diffusa, però, la capacità di visualizzare dati sull’asse X sotto forma di tipi di dato data oppure ora. Dundas Chart for ASP.NET permette di usare date come etichette per i valori sull’asse X con il risultato di rendere ancora più immediato e naturale il data binding.
Infine, è di altissimo livello il supporto che Dundas Chart for ASP.NET offre a design-time all’interno dell’ambiente Visual Studio 2005. Una larga fetta delle proprietà del controllo Chart può essere impostata dichiarativamente e non richiede codice lato server. Al solito, ogni cambiamento effettuato a design-time viene immediatamente visualizzato nell’anteprima del controllo. Inoltre, il controllo supporta tutte le forme di visualizzazione avanzata compresi gli smart tag, i data visualizer e azioni custom. (Vedere la Figura 5.)
Figura 5 -- Il controllo Dundas Chart in azione all’interno di Visual Studio 2005
Ricapitolando
All’alba della seconda era del Web il charting richiede ben più che immagini statiche o postback di tutta la pagina. AJAX è un requisito chiave per ogni forma di rappresentazione di dati che debba essere interattiva. Un grafico non è di per sé interattivo, ma gli utenti adorano i grafici che reagiscono all’input. Ne consegue che per un’azienda protagonista del mercato dei componenti software come Dundas Software produrre uno strumento di charting avanzato ed interattivo è un obbligo e una necessità. E anche un piacere.
Per uno sviluppatore ASP.NET provare Dundas Chart for ASP.NET è un obbligo e una necessità. (E, credetemi, anche un piacere. ) Chiunque può avere tonnellate di motivi per non acquistare il prodotto; ma chiunque sia alla ricerca di uno strumento di charting non ha motivo per non prendere il controllo in seria considerazione. Fatelo oggi stesso. Andate su http://www.dundas.com.