Come si sa il modo più sempice e classico per caricare file javscript in una pagina è l’uso del tag <script> messo nell’ head della pagina HTML. Ad esempio, se vogliamo caricare il file javascript myfunc.js scriveremo qualcosa del genere:
Alcune delle considerazioni che possiamo fare sono:
Se siamo giunti a queste considerazioni, o ci troviamo nel caso di volere ottimizzare la pagina, probabilmente ci si presenta la possibilità di aggiungere dinamicamente i file javascript al DOM della pagina stessa. Il DOM è il Document Object Model ed è sostanzialmente una rappresentazione ad albero di tutto quello che compone la nostra pagina HTML. In un punto a piacere nel body della pagina potremmo volere modificare il DOM nel modo seguente: il codice dovrebbe funzionare su tutti i browser più recenti:
A questo punto il file javascript verrà aggiunto alla pagina.
Il vantaggio più evidente di questa tecnica è che possiamo aggiungere file javascript in un secondo momento rispetto al primo caricamento della pagina e magari on-demand, cioè solo quando ne abbiamo bisogno ad esempio quando l’utente preme un pulsante.
Ok, ma quali possibili problemi possiamo incontrare?
Guardiamo il codice seguente dove carico jquery usando la tecnica vista e poi faccio una semplice chiamata usando l’oggetto Jquery per andare ad impostare un alert su un tag ancora:
Se lancio l’applicazione ottengo un errore: perchè l’oggetto JQuery, cioè $, non è ancora definito quando lo devo usare, lo vedete bene nella developer toolbar di Internet Explorer 8:
Ironia della sorte l’oggetto $ è proprio quello che jQuery mi mette a disposizione per verificare che il DOM della pagina è pronto. Il motivo è proprio che l’oggetto JQuery, cioè il simbolo $, non è definito nel momento in cui eseguiamo il nostro codice Javascript che vuole usare la suddetta libreria. Per preveniere questa situazione alcune tecniche di programmazione Javascript prevedono d’ implementare una sorta di timer in attesa del caricamento effettivo della libreria: una tecnica che funziona e che non è neanche così inefficente come potrebbe sembrare.
Per risolvere queste problematiche ed avere numerosi altri vantaggi possiamo usare il Microsoft Ajax Script Loader, un componente della Microsoft Ajax Library,ed in particolare il modulo che implementa un loader per file javascript e la gestione delle dipendenze: Start.js.
Il modo più rapido per imparare ad usare le MS Ajax Library è partire da questo link al sito. Nel seguito mi focalizzerò primariamente sul loader, le caratteristiche di questo loader sono:
Vediamo un primo esempio d’uso:
Inizialmente ho caricato il file Start.js, il nostro loader appunto, direttamente dalla CDN Microsoft, non ho dovuto quindi aggiungere nessun file .js al mio progetto.
Usando ora l’istruzione Sys.require, Visual Studio ci mette a disposizione l’intellicese anche per queste istruzioni Javascript, possiamo specificare quali sono i file javascript necessari. Come vi dicevo il loader ha già una serie di file preimpostati, tra questi c’è anche jquery e quindi potete scrivere Sys.scripts.jQuery.
La lista dei file disponibili out-of-the box (al momento) è:
I file vengono presi dalla CDN microsoft. Nella CDN trovate anche jquery 1.4.1 e potete utilizzare quest’utima versione con la tecnica vista nel seguito, in cui andremo a indicare file custom da caricare.
Inoltre notate che all’istruzione Sys.require viene passata la funzione funDOM che verrà eseguita al caricamento completato e quando sarà disponibile l’oggetto jQuery. In questo modo quindi:
L’ Ajax Script Loader ci consente anche di caricare file custom, cioè non quelli presenti sulla CDN, come ad esempio jqueriUI. Quest’ultimo in dipendenza da JQuery, per fare questo dobbiamo prima istruire il loder sulle dipendeze, come nel codice seguente:
Il codice usa il metodo .defineScript per definire il file custom, nelle due versioni release e debug. La versione scelta è definita da una costane nel loader, verrà presa quella di release se il file è Start.js, quella di debug se il file è Start.debug.js.
Vedete inoltre che il file jquery.ui dipende (dependencies) dal file jQuery, ma la lista potrebbe essere estesa e il caricamento del file sarà considerato completato (isLoaded)quando le variabile windows.jQuery e jQuery.ui saranno definite.
Grazie a questo codice possiamo scrivere:
Questa volta semplicemente impostiamo come required lo script JQueryUI, che a sua volta dipende da JQuery. La nostra funcDOM funzionerà correttamente, il datepicker ad esempio è un plugin di jquery. Nella scherma seguente vedete un’esempio in esecuzione all’interno del browser Opera 10:
In questo post abbiamo visto come il Microsoft Ajax Loader, consenta di risolvere alcuni dei problemi più fastidiosi che si hanno quando si lavora con il javascript come: caricamento on-demand di file js, gestione delle dipendenze tra file js, verifica del caricamento dei file js prima dell’esecuzione di file javascript nella pagina. Vi posso consigliare anche di leggere questi how-to su: HOW TO Detect DOM Ready, in cui vedere come usare le funzioni .domReady e .pageLoad; ed in generale trovate molte informazioni sulle Microsoft Ajax Library a questo link.
Spero che il post vi sia piaciuto.
Potete scaricare il codice dell’esempio da qui.
E’ con piacere che vi segnalo il portale del TTG, Technologies User Group, la community torinese dedicata primariamente allo sviluppo .NET.
Come già annunciato in precedenza da Marco Russo i tempi erano maturi.
Dal portale della community ora (www.torinotechnologiesgroup.it) potete leggere la filosofia e le finalità:
“Torino Technologies Group è una community locale, di base a Torino ma rivolta in particolare al Piemonte, che consente occasioni di incontro e scambio di esperienze tra chi sviluppa soluzioni usando tecnologie Microsoft (e non solo). L'obiettivo è quello di riuscire a organizzare appuntamenti con una certa frequenza (l'ideale sarebbe una frequenza mensile) di durata breve in orario pomeridiano o pre-serale (magari alternando diverse soluzioni di orario e venire incontro a esigenze diverse).
Gli incontri periodici avvengono generalmente presso il MIC (Microsoft Innovation Center) all'interno dell'area del Politecnico di Torino. È quindi auspicabile che la community diventi anche un ponte di collegamento tra aziende con sedi in Piemonte, studenti e start-up ospitate negli incubatori all'interno del Politecnico stesso.”
Direi che potete:
1. Registrarvi alla community Torinese/Piemontese
2. Rimanere in attesa di un evento, potete consultare la pagina stessa.
E quindi partecipare semplicemente per ascoltare e per imapare e, anche perchè no, contribuire.
Ci vediamo presto.
[Aggiornato con codice anche in Visual Basic]
In questo post vedremo come realizzare un semplice esempio per implementare una relatione master-detail usando Silverlight 4 e i WCF RIA Services, entrambe le tecnologie non ancora rilasciate.
Per realizzare l’esempio dovete installare
Inzialmente partiamo realizzando un’applicazione Silverlight, anche se non strettamente necessario possiamo usare il template Silverlight per realizzare applicazioni di business. Per usarlo da Visual Studio 2010, selezionare “New Projects”, quindi “Silverlight” e selezionare Silverlight Business Application, come mostrato in figura
Questo template ci consente di avere un template già fatto che offre questi vantaggi:
Nel nostro caso andremo a personalizzare la pagina Home.xaml che si trova nel folder Views, ma potete aggiungere un’altra pagina Silverlight facilmente al framework di navigazione.
Aggiungiamo ora al progetto un ADO.NET Entity Data Model, per creare il nostro DAL, nel mio caso l’ho chiamato NorthwindModel.edmx e ho aggiunto, usando il database northwind, la tabella Customers e Orders, per avere una semplice relazione 1-a-molti che mi servirà per creare la UI con la relazione master-details. Inoltre nel designer ho rinominato le due classi create togleindo la “s” finale. Quindi il mio modello dei dati avrà la classe Customer e la classe Order, senza “s” . Quersto mi permette di avere collezioni di oggetti che invece avranno la “s” finale. Ovviamente questa è una finezza e non strettamente necessaria.
Nella figura seguente vedete la selezione delle due tabelle dal designer di Entity Framework
Che generano quindi le due classi. Nella figura seguente vedete il risultato con le due entità già rinominate.
Aggiungiamo ora un nuovo item che realizzerà lo strato di servizio con i RIA Services. Add-> New Items… e selezioniamo il template per Domain Service Class.
Questo mostrerà un popup nel quale dobbiamo indicare se le entità che verrano create saranno accedibili dal client, quali entità di quelle presenti vogliamo utilizzare, se vogliamo fare operazioni di modifica, oltre che di lettura.
Questo wizard genera il file NorthwindDomainService.cs dove troviamo il codice del servizio e in particolare i metodi per ottenere la lista dei nostri Customer come GetCustomers che ritorna un valore di tipo IQueryable del tipo Customer. In questo caso l’implementazione del nostro servizio è fatta sfruttando la classe LinqToEntityDomainServices messa a disposizione dal framework e che Visual Studio 2010 mi consente di sfruttare a pieno tramite il wizard.
Dato che ho chiesto al wizard di utilizzare anche l’entità Order, nel progetto troverete anche i corrispondenti metodi per la gestione.
Nel nostro caso però lo scenario che vogliamo indirizzare è leggermente più complesso: infatti vogliamo mostrare due griglie la prima legata ai clienti e la seconda agli ordini di uno specifico cliente una volta selezionato questo nella prima griglia.
Per questo aggiungiamo un metodo per recuperare gli ordini, metodo che accetterà un parametroche rappresenta l’id del nostro customer.
il codice da aggiungere per chi usa Visual Basic.NET 2010 è il seguente
Grazie ai RIA Service e il template di progetto di Visual Studio 2010 ci troviamo, dopo la compilazione, il modello ad oggetti esposto sul server, direttamente sul client e tutte le operazioni di comunicazione vengono gestite per me dal framework.
Per la UI ho posizionato due DataGrid, una (customerDataGrid) che conterrà la lista dei customer e la seconda (orderDataGrid) gli ordini selezionati per lo specifico customer. Per fare questo ho intercettato l’evento SelectionChanged sulla prima DataGrid, per aggiungere del codice in cs, come vedrete nel seguito.
Inizialmente ho usato il drag-and-drop offerto da Visual Studio 2010, usando la finestra Data Source e trascinando l’oggetto Customer, questo mi ha aggiunto sia la DataGrid che l’oggetto DomainDataSource corrispondente. Inoltre ho poi aggiunto una seconda DataGrid che dovrà contenere gli ordini.
In figura seguente vedete più o meno il risultato nel designer di Visual Studio 2010:
Aggiungo ora l’evento SelectionChanged alla DataGrid customerDataGrid e aggiungo il codice per riempire la seconda (orderDataGrid nell’esempio) facendo la query verso il metodo GetOrdersByCustomerID, visto prima, aggiunto lato server e che mi trovo ora sul client grazie a RIA Services. Il metodo lato client, si chiama come la sua controparte sul server, con in più l’estensione finale di Query.
Il codice in Visual Basic corrispondente è:
Lanciando ora l’applicazione abbiamo il comportamento desiderato: seleziono un customer nella prima DataGrid e vedo nella seconda gli ordini, come vedete nella figura sottostante.
Potete scaricare il codice d’esempio da
Buon divertimento con Silverlight 4 e i WCF RIA Services !
Ieri ho preso parte all’ultima tappa del “mio” community tour, che mi ha visto prendere parte a questa iniziativa con le community DotNetToscana a Pisa, dotNetRomaCeSta a Roma, DotDotNet a Bologna e con XeDotNet, PowerShell.it, DotNetWork a Pordenone e che con un unico post vorrei ringraziare per il supporto. Inoltre un grazie ai ragazzi di DotNetCampania e a chi è venuto a trovarmi facendo lunghe trasferte :-) e ha preso parte a questi eventi contribuendo a farli diventare un momento importante di formazione comune, solo per appassionati naturalmente.
Per chi è interssato, può scaricare slide e demo delle mie sessioni, modificate via via che il tour procedeva.
Alcune foto degli eventi a cui ho partecipato, se volete segnalarne altre lasciate pure un commento.
Inoltre per l’evento di Roma trovate un player Silverlight sul sito di DotNetRomaCeSta.