SILVERLIGHT 2 . 0 (beta1)

1. SILVERLIGHT 2 . 0 (beta1)

2. About Me Giorgetti Alessandro • Laureato in IngegneriaMicroelettronica • CoFondatorediDotNetMarche e membrodiUgi.Net • Socio fondatoredi SID s.r.l..

3. Sinottico • Introduzione • Tools & links. • Costruire una semplice applicazione • Networking • Xml • Databinding (1 way) • Controlli • Improving Interface

4. Introduzione • Silverlight è un framework/insieme di tecnologie per la realizzazione di applicazioni Web-Based. • Silverlight viene eseguito CLIENT SIDE non server-side, di conseguenza si hanno tutta una serie di limitazioni nell’accesso a funzioni di libreria per evitare di trasformare i browser degli utenti in macchine da ‘assalto informatico’.

5. Introduzione - Features • Grafica 2D • Audio/Video • Animazioni • Layout controls* • Controlli (wpf subset)* • Testo (immissione*) • Stili/Templates • Databinding* • Networking (http/sockets*) • .NET* • Linq* • XML Api* • Integrazione con HTML* • Storagelocale* * Silverlight 2

6. Introduzione - Tools • SilverlightRuntime. • Silverlight SDK. • Visual Studio (2005/2008). • Visual Studio toolsupdatesforSilverlight • Supporto per progetti web e silverlight. • Supporto limitato al designer per applicazioni silverlight (designer surface non interattiva). • Microsoft Expression Suite (Blend) • Semplifica la realizzazione del design dell’applicazione (stili/animazioni/elementi multimediali).

7. Tools & Links Tutto il necessario per iniziare a sviluppare: http://silverlight.net/

8. Tools & Links - DEMO • Creazione di un progetto silverlight vuoto • Illustrazione della struttura e caratteristiche del progetto • Semplice pagina di esempio (Page1)

9. Costruire una semplice Applicazione Realizzare una interfaccia per servizi che offrono streaming video • Recuperare i dati (networking). • Conversione XML -> .NET domain Objects (Linq). • Presentare i dati (Binding). • Strutturare l’applicazione (mater-detail/UserControls). • Migliorare il Layout (Formattazione/Animazioni).

10. Costruire una semplice Applicazione

11. Step 1 - Networking • Per recuperare e gestire dati dobbiamo considerare diversi scenari • Dati Locali all’applicazione (incorporati come risorse) oppure localstorage (storage isolato, opera in maniera molto simile ai cookies) • Dati provenienti dallo stesso dominio/sito in cui gira l’applicazione (nessuna restrizione) • Dati provenienti da sorgenti esterne (cross domain calls, quindi soggetti a policy di accesso)

12. Step 1 – Networking System.Net.WebClient – consente di effettuare richieste asincrone verso siti web / webservices /risorse accessibili sulla rete. Nel caso di chiamata Cross-Domain (accesso a risorsa esterna al dominio del sito su cui si esegue l’applicativo silverlight) Occorre un File che definisca le policy di accesso (http://catalog.video.msn.com/clientaccesspolicy.xml) Deve essere presente nella root del sito.

13. Step 1 – ClientAccessPolicy <?xml version="1.0" encoding="utf-8"?> <access-policy> <cross-domain-access> <policy> <allow-from> <domain uri="*"/> </allow-from> <grant-to> <resource path="/" include-subpaths="true"/> </grant-to> </policy> </cross-domain-access> </access-policy>

14. Step 1 – DEMO Utilizziamo il servizio di video streaming di MSN: http://catalog.video.msn.com/randomVideo.aspx?mk=us&ff=99&vs=0&c=10 <videos mk="us" vs="0" ff="99" cacheKey="us:0:1:10000:videoid:-1:1::99:randomvideomarket" cacheTtl="3503" total="4079" ind="1" ps="10000" sf="VideoId" sd="-1" st="1" cst="" execTime="0" xmlns="urn:schemas-microsoft-com:msnvideo:catalog"> <video xmlns="urn:schemas-microsoft-com:msnvideo:catalog" publishState="Published" lcid="1033"> ... <title>Dawn of Creation</title> <description>An animated New Yorker cartoon by Sam Gross.</description> ... <videoFiles> <videoFileformatCode="1002" msnFileId="70D74B08-EAF1-4962-A732-B7F022879E34"> <uri>mms://a1523.v0325851.c32585.g.vm.akamaistream.net/7/1523/32585/0/ori-content.catalog.video.msn.com/ft/share0/9e34/0/dawnofcreation_wm3.wmv</uri> </videoFile> <videoFileformatCode="1003" msnFileId="F593F627-2724-4B8C-A5D7-4BC461DFB6AF"> <uri>http://content2.catalog.video.msn.com/e2/ft/share0/b6af/0/dawnofcreation_wm3.flv</uri> </videoFile> </videoFiles> <files> <file formatCode="1201"> <uri>http://a1235.g.akamaitech.net/7/1235/32585/0/content.catalog.video.msn.com/ft/share0/1e91/0/Ringtales_Flash_Panel.swf</uri> </file> … </file> <file formatCode="2009" msnFileId="825DDD87-B7A6-4843-B049-B02CB5C78D35"> <uri>http://a1639.g.akamaitech.net/7/1639/32585/0/content.catalog.video.msn.com/ft/share0/8d35/0/dawnofcreation400.jpg</uri> </file> </files>…</video>

15. Step 1 – DEMO Recupero dei dati mediante oggetto WebClient (Page3)

16. Step 2 – from XML to .NET • Diverse sono le opzioni disponibili: • Parsing ‘manuale’ XML attraverso XML readers. • Serializzazione/Deserializzaizone XML. • Linq (Linqto xml – System.Linq, System.Xml.Linq).

17. IList<VideoInfo> Step 2 – from XML to .NET

18. Step 2 – DEMO Parsing dei dati mediante Linq (Page3b)

19. Step 3 – Presentare i dati • Creazione di una interfaccia per la presentazione del dato • Visualizzazione mediante databinding

20. Step 3 – Layout Controls • Controlli disponibili per definire il layout: • Canvas – posizionamento assoluto degli elementi. • Stackpanel – posizionamento side-by-side degli elementi (allineamento orizzontale o vericale). • Grid – definisce una griglia di posizionamento (dimensioni di righe e colonne assolute o ‘fluide’). • Border – contenitore per controlli.

21. Step 3 - Databinding • Binding di proprietà: • 1 time, 1 way, 2 way. • Utilizza la proprietà ‘Datacontext’. • Supporto per type-coverters. Public class Data { string Data1 { get; set; } string Data2 { get; set; } } <StackPanelOrientation="Horizontal"> <ImageSource="{Binding Data1}"></Image> <TextBlockText="{Binding Data2}"></TextBlock> </StackPanel>

22. Step 3 - Databinding • Binding di collezioni o liste: • Supporto per item templates e repeaters. • Utilizza la proprietà ‘ItemsSource’. List<Data> dataobjs = newList<Data>(); //load the data … ItemsControl.ItemsSource = dataobjs

23. Step 3 – DEMO Realizzazione Master View (Page3c)

24. Step 4 – Master-Detailapplication • È possibile definire controlli riutilizzabili, ogni applicazione Silverlightderiva da UserControls e può quindi essere utilizzata come controllo entro un’altra applicazione. • Si possono incapsulare ed isolare funzionalità sia per semplificare lo sviluppo, sia per aumentare le produttività (isolare e separare i problemi, riutilizzabilità del codice).

25. Step 4 – UserControls • Interazione tra controlli mediante: • Proprietà. • Funzioni definite nei controlli. • Eventi.

26. Step 4 – DEMO Realizzazione della DetailView (Page4) Modifiche alla Master View (Page3c) Composizione dell’applicazione (Page4b)

27. Step 5 – Completare l’applicazione • Aggiungiamo possibilità di effettuare ricerche. • Arricchiamo l’interfaccia mediante semplici animazioni.

28. Step 5 – DEMO Modifiche alla Master View (Page3d) Composizione dell’applicazione (Page5)

29. ExpressionBlendinterface design tool • Ricorrendo a Microsoft ExpressionBlend risulta abbastanza semplice realizzare elementi grafici complessi per le applicazioni Silverlight. • ExpressionBlend fornisce: • Supporto completo alla gestione delle solution VS2008. • Interoperabilità con VS2008 per la gestione del code-behind.

30. ExpressionBlendinterface design tool • Supporto di un designer che consente composizione e ‘formattazione’ di elementi grafici. • Supporto di un designer per la realizzazione di sequenze di animazione degli elementi. • Supporto al databinding.

31. ExpressionBlend – DEMO Realizzazione dello waitingcontrol.

32. Cosa è rimasto fuori… • Databindingbidirezionale. • Styles / Template. • Gestione Eventi (indeptview). • ExpressionBlend (indeptview). • Accesso dati (howto). • Cross Domain Calls (indeptview).