free hit counter
January, 2010 - Pietro Brambati Blog - Site Home - MSDN Blogs

Pietro Brambati Blog

Developer's stories

January, 2010

  • Pietro Brambati Blog

    Javascript : caricare script dinamicamente e dipendenze

    • 0 Comments

    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:

    image

    Alcune delle considerazioni che possiamo fare sono:

    • i file vengono caricati in serie (anche se questo non è sempre vero per tutti i browser) e questo può portare ad un rallentamento del caricamento iniziale della pagina, a maggior ragione in presenza di numerosi file e soprattutto la prima volta che un visitatore arriva su un nostro sito e i file .js non sono nella cache del suo computer.
    • inoltre se carichiamo un file molto grosso, con delle funzioni che non vengono usate fino  a quando l’utente non fa qualcosa sulla pagina, il caricamento della pagina rimane in attesa inutilmente. Se carichiamo una complicatissima funzione somma (o una funzione per la verifica di acquisto, ad esempio) ma il nostro visitatore non premerà il pulsante somma o acquisto, abbiamo fatto un’operazione di carimento in questo caso inutile e magari l’utente ha l’impressione che il sito sia lento perchè la pagina non viene caricata subito.

    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:

    image

    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?

    • il file javscript potrebbe essere già presente e magari già caricato nel DOM. Supponiamo di voler aggiungere jquery alla pagina, se la pagina non l’abbiamo fatta noi o magari andiamo ad inserire del codice in una pagina già fatta, ad esempio in un blog, il file potrebbe essere già presente. JQuery è una libreria molto usata ed è molto probabile che sia già stata usata da qualche parte.
    • Quando andiamo ad usare le funzioni della libreria dobbiamo verificare che questa sia disponibile nel momento in cui il nostro codice javascript la usa. Questa volta il caricamento avviene in modo asincrono e quindi il codice potrebbe richiamare una funzione di una libreria non ancora caricata.

    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:

    image

    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:

    image

    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.

    • un altro problema che possiamo incontrare è la gestione delle dipendenze: se vogliamo caricare dinamicamente in modo asincrono ma ci sono delle dipendenze tra i file javascript, la situazione si complica ulteriormente: ad esempio se vogliamo usare la libreria jQueryUI, questa dipende da jquery. Quindi in questo caso dovrei essere sicuro di caricare prima jquery, alla fine del caricamento e solo alla fine, caricare jquery.UI e quando le librerie di jQueryUI sono disponibili scrivere il mio codice.

    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 Microsoft Ajax Script Loader

    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:

    • contenuto in un unico file Start.js che può essere scaricato dalla CDN Microsoft, o localmente al vostro progetto. L’uso di una CDN consente di migliorare i tempi di download avendo una cache distribuita sui server Microsoft in modo geografico.
    • Riduce i tempi di download iniziali di un’applicazione, differndo il downlaod del javascript in seguito.
    • contiene riferimenti ad un serie di file javascript come Jquery o le MS Ajax library che vengono scaricate da una CDN, ma se ne possono aggiungere di propri e anche per questi definire delle dipendenze.
    • gestiste le dipendenze tra file javascript in modo che vengano caricati nell’ordine opportuno per il loro buon funzionamento.
    • consente di combinare tra loro file javscript in un unico file, prima del downlaod, così da fare un unico downlaod di un file invece di n piccoli download, che scatenerebbero più richieste http sulla rete.
    • esegue il caricamento di file javascript on-demand, quando effettivamente richiesto.

    Vediamo un primo esempio d’uso:

    Caricamento dei file js necessari

    image

    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) è:

    image

    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:

    • abbiamo caricato il file jQuery dalla CDN in asincrono (rispetto al caricamento iniziale della pagina).
    • siamo certi che il codice eseguito dalla funzione funDOM potrà contare sul fatto che gli oggetti nel file javascript da cui dipende sono disponibili.

    Caricamento dei file js custom e in dipendenza

    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:

    image

    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:

    image

    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:

    image

    Conclusione

    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.

    Download

    Potete scaricare il codice dell’esempio da qui.

  • Pietro Brambati Blog

    Torino Technologies Group : community a Torino

    • 0 Comments

    image

    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.”

    Cosa fare ora?

    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.

  • Pietro Brambati Blog

    Silverlight 4 e WCF RIA Services : esempio di relazione master-detail

    • 4 Comments

    [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

    • Visual Studio 2010 (beta 2 al momento)
    • Silverlight 4 (beta) che contiene la Technical Preview dei WCF RIA Serives

    Creazione del progetto per una Business Application

    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

    image

    Questo template ci consente di avere un template già fatto che offre questi vantaggi:

    • aspetto professionale
    • un framework di navigazione per l’applicazione integrato con i bottoni di back and forward funzionante da diversi browser: Internet Explorer, Safari, FireFox e Chrome.
    • Proprietà dei controlli della UI già integrati con il file delle risorse per una facile localizzazione
    • integrazione con il provider di memership di ASP.NET per l’autenticazione e gestione dei ruoli

    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.

    Creazione del DAL usando Entity Framework

    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

    image

    Che generano quindi le due classi. Nella figura seguente vedete il risultato con le due entità già rinominate.

    image 

    Creazione del servizio con i WCF RIA Services

    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.

    image

    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.

    image

    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.

    image

    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.

    image 

    il codice da aggiungere per chi usa Visual Basic.NET 2010 è il seguente

    image


    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.

    Creazione della User Interface

    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:

    image

    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.

    image 

    Il codice in Visual Basic corrispondente è:

    image

    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.

    image

    Download esempio

    Potete scaricare il codice d’esempio da

    Buon divertimento con Silverlight 4 e i WCF RIA Services !

  • Pietro Brambati Blog

    Community Tour slide e demo

    • 0 Comments

    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.

    Silverlight 4 e i WCF RIA Services

    Windows 7 sviluppo con .NET

    Foto e player Silverlight

    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.

    image image

    image image

    Grazie a tutti !!
Page 1 of 1 (4 items)