SILVERLIGHT 2 . 0 (beta1)
About MeGiorgetti Alessandro• Laureato in Ingegneria Microelettronica
• CoFondatore di DotNetMarche e membro di Ugi.Net
• Socio fondatore di SID s.r.l..
Sinottico• Introduzione
• Tools & links.
• Costruire una semplice applicazione• Networking• Xml• Databinding (1 way)• Controlli• Improving Interface
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’.
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* Storage locale*
* Silverlight 2
Introduzione - Tools• Silverlight Runtime.• Silverlight SDK.• Visual Studio (2005/2008).• Visual Studio tools updates for Silverlight• 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).
Tools & LinksTutto il necessario per iniziare a sviluppare: http://silverlight.net/
Tools & Links - DEMO
• Creazione di un progetto silverlight vuoto
• Illustrazione della struttura e caratteristiche del progetto
• Semplice pagina di esempio (Page1)
Costruire una semplice Applicazione
• Recuperare i dati (networking).• Conversione XML -> .NET domain Objects (Linq).• Presentare i dati (Binding).• Strutturare l’applicazione (mater-detail/User Controls).• Migliorare il Layout (Formattazione/Animazioni).
Realizzare una interfaccia per servizi che offrono streaming video
Costruire una semplice Applicazione
Step 1 - NetworkingPer recuperare e gestire dati dobbiamo considerare diversi scenari
• Dati Locali all’applicazione (incorporati come risorse) oppure local storage (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)
Step 1 – NetworkingSystem.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.
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>
Step 1 – DEMOUtilizziamo 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> <videoFile formatCode="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> <videoFile formatCode="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>
Step 1 – DEMORecupero dei dati mediante oggetto WebClient (Page3)
Step 2 – from XML to .NET
Diverse sono le opzioni disponibili:
• Parsing ‘manuale’ XML attraverso XML readers.
• Serializzazione/Deserializzaizone XML.
• Linq (Linq to xml – System.Linq, System.Xml.Linq).
Step 2 – from XML to .NET
IList<VideoInfo>
Linq
XMLPublic class VideoInfo
Step 2 – DEMOParsing dei dati mediante Linq (Page3b)
Step 3 – Presentare i dati
• Creazione di una interfaccia per la presentazione del dato
• Visualizzazione mediante databinding
Step 3 – Layout ControlsControlli 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.
Step 3 - DatabindingBinding 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; }}
<StackPanel Orientation="Horizontal"> <Image Source="{Binding Data1}"></Image> <TextBlock Text="{Binding Data2}"></TextBlock></StackPanel>
Step 3 - DatabindingBinding di collezioni o liste:• Supporto per item templates e repeaters.• Utilizza la proprietà ‘ItemsSource’.
List<Data> dataobjs = new List<Data>();//load the data…ItemsControl.ItemsSource = dataobjs
Step 3 – DEMORealizzazione Master View (Page3c)
Step 4 – Master-Detail application
• È possibile definire controlli riutilizzabili, ogni applicazione Silverlight deriva 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).
Step 4 – User Controls
• Interazione tra controlli mediante:
• Proprietà.
• Funzioni definite nei controlli.
• Eventi.
Step 4 – DEMORealizzazione della Detail View (Page4)Modifiche alla Master View (Page3c)Composizione dell’applicazione (Page4b)
Step 5 – Completare l’applicazione
• Aggiungiamo possibilità di effettuare ricerche.
• Arricchiamo l’interfaccia mediante semplici animazioni.
Step 5 – DEMOModifiche alla Master View (Page3d)Composizione dell’applicazione (Page5)
Expression Blend interface design tool
Ricorrendo a Microsoft Expression Blend risulta abbastanza semplice realizzare elementi grafici complessi per le applicazioni Silverlight.
Expression Blend fornisce:
• Supporto completo alla gestione delle solution VS2008.
• Interoperabilità con VS2008 per la gestione del code-behind.
Expression Blendinterface 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.
Expression Blend – DEMO
Realizzazione dello waiting control.
Cosa è rimasto fuori…• Databinding bidirezionale.
• Styles / Template.
• Gestione Eventi (indept view).
• Expression Blend (indept view).
• Accesso dati (how to).
• Cross Domain Calls (indept view).