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