Giuseppe Guerrasio : RIA

Behaviors: rendere l’interattività semplice in Blend

Giuseppe Guerrasio — Fri, 26 Jun 2009 08:47:00 GMT

Tra gli elementi che restano più ostici in Blend 2 per il lavoro che un interaction designer può realizzare nell’implementazione degli elementi di una interfaccia grafica in Silverlight 2, c’è sicuramente il collegamento degli eventi di interazione sull’interfaccia con azioni da innescare nel codice o sugli oggetti presenti nell’interfaccia stessa. Questa operazione, infatti, ad oggi richiede , se pur in modo semplice, lo sviluppo di alcune righe di codice con cui non sempre ha familiarità chi si occupa di interaction design .

Ad esempio immaginiamo di aver realizzato un’animazione e di volerla far eseguire alla pressione di un tasto sull’interfaccia, oppure di voler eseguire il play sul MediaElement inserito nella nostra interfaccia Silverlight in conseguenza di un click su un elemento del Visual Tree. Al momento tutte queste azioni in Blend 2 con Silverlight 2 comportano l’inserimento di un handler su uno specifico evento contenente almeno una riga di codice per invocare la specifica azione sull’oggetto che rappresenta l’animazione o il MediaElement all’interno dell’interfaccia in sviluppo.

Per semplificare questo tipo di attività di sviluppo e consentire una rapida interazione per il designer che compone l’interfaccia con gli eventi e le azioni che si vogliono innescare in conseguenza degli eventi stessi in Blend 3 e Silverlight 3 sono stati inseriti i Behaviors come ben ci descrive Roberto sul suo blog .

I Behaviors consentono per l’appunto l’esecuzione di specifiche azioni su di un target e sono associabili in modo dichiarativo ad uno specifico evento su un elemento della nostra interfaccia, sia attraverso una dichiarazione espressa con lo XAML sia direttamente dai menù di Blend associati all’elemento che poi implementano la dichiarazione nello XAML su cui si sta lavorando.

Come si utilizzano i Behaviors ? Come prima cosa occorre referenziare nel progetto su cui si sta lavorando

la DLL che contiene l’implementazione dei Behaviors che vogliamo utilizzare la libreria di base per questa funzionalità che è contenuta per la preview di Blend 3, nella cartella ..Program Files\Microsoft Expression\Blend 3 Preview\Libraries\Silverlight con il nome Microsoft.Expression.Interactivity.dll . Per poter provare potete utilizzare il semplice esempio che ho implementato e che trovate qui per eseguire una animazione. Altri esempi di Behaviors potete scaricarli da http://gallery.expression.microsoft.com/en-us/SampleSLBehaviors .

Effettuata questa operazione, selezionando dal menù dei controlli di Blend la Asset Library e da li selezionando la pagina dei Behaviors si potrà selezionare il Behaviors StartAnimation e trascinarlo sul bottone presente nella nostra interfaccia a cui vogliamo associare l’azione.

Fatta questa operazione, vedremo associato al bottone il behavior

e potremo configurare con il tab delle proprietà il nome dell’animazione da eseguire. Lo XAML generato per associare il Behaviors sarà il seguente :

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<si:StartAnimation AnimationName="test"/>

</i:EventTrigger>

</i:Interaction.Triggers>

…………

dove i: e si: sono rispettivamente i namespace che corrispondono alla libreria di base dei Behaviors e alla mia libreria che implementa il semplice StartAnimation.

Attraverso la finestra delle proprietà si potrà impostare le proprietà del Behaviors tra cui il nome della animazione da eseguire sull’evento click del bottone a cui abbiamo associato il Behaviors stesso.

Eseguendo l’applicazione e facendo click sul bottone si eseguirà l’animazione test che dovrà ovviamente essre implementata nello usercontrol in cui si stautilizzando il Behaviors.

Attraverso le proprietà possiamo anche modificare l’evento del Trigger che decide quando scatenare l’azione collegata al Behaviors come si vede nell’immagine precedente, in quei casi in cui sia esposta questa specifica funzionalità dal Behaviors associato all’elemento. Alcuni Behaviors permettono anche di specificare l’elemento target su cui l’azione associata deve essere eseguita come appunto l’esempio appena visto. E’ anche possibile, associare più Behaviors ad un singolo elemento.

Implementare i Behaviors

Per implementare dei nostri Behaviors che possano essere poi utilizzati all’interno di Blend per semplificare il lavoro dello sviluppo dell’interazione con l’applicazione, si possono realizzare delle classi specifiche partendo dalle classi base definite nella libreria principale di questa funzionalità ovvero la dll Microsoft.Expression.Interactivity.dll (nella versione finale di Blend3 e Silverlight 3 il nome della libreria ed alcuni dettagli implementativi potrebbero cambiare).

Un Behaviors è essenzialmente basato su tre concetti fondamentali : Trigger, Action e Behavior. I Trigger rappresentano uno degli elementi principali del funzionamento dei Behaviors, fornendo l’elemento che scatena l’ Action che poi produce lo specifico Behavior voluto.

Ad esempio nel caso del nostro Behaviors StartAnimation il Trigger è l’elemento associato al click sul bottone che produce l’innesco dell’azione (start dell’animazione il cui nome è impostato sulla proprietà specifica).

Per implementare un Trigger o estenderne di esistenti si utilizzando le classi definite nella libreria base citata sopra. Ad esempio per realizzare un nostro Trigger implementeremo una classe BaseBehaviorSample derivando dalla classe base specifica Microsoft.Expression.Interactivity .TriggerBase<DependencyObject> come da esempio:

public class BaseBehaviorSample : Microsoft.Expression.Interactivity.TriggerBase<DependencyObject>

{

}

Questo tipo di Behaviors può essere associato a qualunque oggetto Silverlight che deriva da DependencyObject e per il momento non implementa nessuna particolare azione. La classe TriggerBase<T>

public abstract class TriggerBase<T> : TriggerBase where T : System.Windows.DependencyObject

{

protected TriggerBase();

protected T AssociatedObject { get; }

protected override sealed Type AssociatedObjectTypeConstraint { get; }

}

Deriva a sua volta dalla classe :

[ContentProperty("Actions")]

public abstract class TriggerBase : DependencyObject, IAttachedObject

{

public static readonly DependencyProperty ActionsProperty;

public TriggerActionCollection Actions { get; }

protected DependencyObject AssociatedObject { get; }

protected virtual Type AssociatedObjectTypeConstraint { get; }

public void Attach(DependencyObject dependencyObject);

public void Detach();

protected void InvokeActions(object parameter);

protected virtual void OnAttached();

protected virtual void OnDetaching();

}

L’implementazione dalla classe TriggerBase ci permette di effettuare l’override di due importanti metodi che implementa la classe base OnAttached e OnDetaching che corrispondono ai metodi che vengono invocati rispettivamente all’avvio ed al rilascio degli oggetti creati a partire da questa classe che stiamo realizzando. Il metodo InvokeActions è il metodo che invoca le azioni che vengono eventualmente associate al Trigger e la Dependency Property AssociatedObject rappresenta l’elemento a cui è stato associato il Trigger .

Ad esempio, volendo implementare un Trigger che esegue un’azione sull’evento MouseLeftButtonDown sull’oggetto a cui associamo il trigger scriveremo il seguente codice, agganciando l’evento su cui vogliamo innescare l’azione in OnAttached e rimuovendolo su OnDetaching:

public class BaseTriggerSample: Microsoft.Expression.Interactivity.TriggerBase<UIElement>

{

protected override void OnAttached()

{

base.OnAttached();

this.AssociatedObject.MouseLeftButtonDown += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);

}

void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.InvokeActions(null);

}

protected override void OnDetaching()

{

base.OnDetaching();

this.AssociatedObject.MouseLeftButtonDown -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);

}

}

In questo modo è evidente che si possono pensare di implementare un’ampia gamma di Triggers che possono poi essere usati come base per invocare specifiche Action. Ad esempio si possono realizzare dei Triggers che si eseguono nel momento in cui cambia lo stato della rete o su uno specifico timer , l’architettura implementata offre una ampia possibilità di estensione ed utilizzo.

Oltre ai Trigger di base si possono implementare Behaviors che hanno un’associazione tra Trigger e una Action. Ad esempio derivando dalla classe TriggerAction :

public abstract class TriggerAction : DependencyObject, IAttachedObject

{

public static readonly DependencyProperty IsEnabledProperty;

protected DependencyObject AssociatedObject { get; }

protected virtual Type AssociatedObjectTypeConstraint { get; }

[DefaultValue(true)]

public bool IsEnabled { get; set; }

public void Attach(DependencyObject dependencyObject);

public void Detach();

protected abstract void Invoke(object parameter);

protected virtual void OnAttached();

protected virtual void OnDetaching();

}

Questa classe oltre ad avere a disposizione i metodi OnAttached e OnDetaching abbiamo la possibilità di implementare l’ovverride del metodo Invoke che è il metodo che viene invocato nel momento in cui si innesca il trigger. Ad esempio di seguito vediamo un semplice esempio che imposta l’opacity dell’oggetto su cui viene implementato:

public class BaseTriggerAction : TriggerAction<UIElement>

{

public static readonly DependencyProperty OpacityProperty = DependencyProperty.Register("Opacity", typeof(double ), typeof(BaseTriggerAction), new PropertyMetadata(0.5));

public double Opacity

{

get { return (double )this.GetValue(BaseTriggerAction.OpacityProperty ); }

set { this.SetValue(BaseTriggerAction.OpacityProperty , value); }

}

protected override void Invoke(object parameter)

{

this.AssociatedObject.Opacity = this.Opacity ;

}

Dall’interfaccia di Blend , quando agganciamo il nostro BaseTriggerAction ad un elemento che deriva da UIElement , ad esempio un bottone:

possiamo anche selezionare su quale Trigger si deve innescare la Action associata come da immagine:

Specifici attributi con cui possiamo decorare la classe ci consentono di predeterminare l’evento su cui si innesca il Trigger. Ad esempio ammettendo di voler implementare un Behaviors che imposti automaticamente il Trigger a Click nel caso in cui lo colleghiamo ad un elemento che deriva da ButtonBase o all’evento MouseLeftButtonDown nel caso di un elemento UIElement generico, potremo decorare con gli specifici attributi la precedente classe come segue:

[DefaultTrigger(typeof(ButtonBase), typeof(Microsoft.Expression.Interactivity.EventTrigger), new object[] { "Click" }),

DefaultTrigger(typeof(UIElement), typeof(Microsoft.Expression.Interactivity.EventTrigger), new object[] { "MouseLeftButtonDown" })]

public class BaseTriggerAction : TriggerAction<UIElement>

{

public static readonly DependencyProperty OpacityProperty = DependencyProperty.Register("Opacity", typeof(double ), typeof(BaseTriggerAction), new PropertyMetadata(0.5));

public double Opacity

{

get { return (double )this.GetValue(BaseTriggerAction.OpacityProperty ); }

set { this.SetValue(BaseTriggerAction.OpacityProperty , value); }

}

protected override void Invoke(object parameter)

{

this.AssociatedObject.Opacity = this.Opacity ;

}

Derivando da TargetedTriggerAction

public abstract class TargetedTriggerAction<T> : TargetedTriggerAction where T : System.Windows.DependencyObject

{

protected TargetedTriggerAction();

protected T Target { get; }

protected virtual void OnTargetChanged(T oldTarget, T newTarget);

}

Avremo a disposizione la proprietà Target che si potrà utilizzare per definire l’elemento Target della nostra Azione associata al Behavior. Per esempio, tornando al nostro semplice esempio di configurazione dell’Opacity , si potrà definire attraverso la proprietà Target , l’elemento su cui impostare l’Opacity con l’azione implementata sul metodo Invoke:

[DefaultTrigger(typeof(ButtonBase), typeof(Microsoft.Expression.Interactivity.EventTrigger), new object[] { "Click" }),

DefaultTrigger(typeof(UIElement), typeof(Microsoft.Expression.Interactivity.EventTrigger), new object[] { "MouseLeftButtonDown" })]

public class BaseTargetedTriggerAction : TargetedTriggerAction<UIElement>

{

public static readonly DependencyProperty OpacityProperty = DependencyProperty.Register("Opacity", typeof(double ), typeof(BaseTargetedTriggerAction), new PropertyMetadata(0.5));

public double Opacity

{

get { return (double )this.GetValue(BaseTriggerAction.OpacityProperty); }

set { this.SetValue(BaseTriggerAction.OpacityProperty, value); }

}

protected override void Invoke(object parameter)

{

this.Target.Opacity=this.Opacity ;

}

La proprietà Target potrà essere impostata dopo aver associato il BaseTargetedTriggerAction ad un elemento selezionandolo tra i Behaviors disponibili nella Asset Library e trascinandolo sopra l’elemento sull’interfaccia con cui lo si vuole associare, ad esempio un bottone, come già visto sopre per gli altri esempi. Selezionando il Beheviors si prota impostare dalle proprietà anche il Target e all’esecuzione del Trigger (in questo caso il Click sul bottono a cui abbiamo associato il Behavior ) si eseguirà l’azione che imposterà l’Opacity sull’oggetto Target in base al valore della proprietà Opacity del Behaviors.

Il meccanismo Trigger e Action permette di implementare soluzioni per molte esigenze di interazione sull’interfaccia, ma non soddisfa tutti i possibili scenari. Ad esempio nel caso in cui si voglia realizzare un Behaviors che consenta di impostare il comportamento di un oggetto per il Drag and Drop, occorre l’interazione di un modello Trigger-Action che non è limitato all’associazione di una coppia di questi due elementi, ma occorre la possibilità di costruire una combinazione di Trigger e Action per inserirle sempre in modo dichiarativo per ottenere questo tipo di comportamento.

Proprio per questo motivo attraverso la derivazione dalla classe Behavior si possono sviluppare Behaviors che implementano azioni specifiche e renderle associabili anche in modo dichiarativo con lo XAML o attraverso Blend ad uno più specifici Trigger, senza definirne l’associazione in modo vincolante come negli esempi delle classi base viste in precedenza.

Ad esempio implementando un Behaviors nel seguente modo, si consentirà un’enorme flessibilità nell’associare il comportamento a Triggers in modo completamente dichiarativo, fornendo la base per realizzare un’enorme flessibilità sia nello sviluppo delle interfacce che nella possibilità di personalizzazione del template dei controlli.

Derivando dalla classe Behavior si può implementare le Action attraverso l’implementazione di un’interfaccia ICommand :

public class BaseSampleBehavior : Behavior<DependencyObject>

{

public BaseSampleBehavior()

{

this.BaseCommand = new ActionCommand(this.ExecCommand );

}

protected override void OnAttached()

{

base.OnAttached();

}

protected override void OnDetaching()

{

base.OnDetaching();

}

public ICommand BaseCommand

{

get;

private set;

}

private void ExecCommand()

{

MessageBox.Show("Behavior") ;

}

Associato il Behaviors implementato con un elemento sull’interfaccia si può dalla finestra delle proprietà del Behaviors associare i Triggers che dovranno produrre l’esecuzione del Command.

Attraverso questo pattern si possono così implementare Behaviors che permettano di gestire complesse interazioni in termini di Trigger e Action , consentendo anche la gestione di uno stato tra le diverse interazioni, fornendo un ottimo modello per la realizzazione di Behaviors che possano notevolmente semplificare lo sviluppo delle parte di interazione della interfaccia utente della nostra applicazione che dovranno produrre l’esecuzione del Command implementato, fornendo una grandissima flessibilità .

RAINET Test Live Smooth Streaming in HD for Italian soccer team matches during Confederation Cup

Giuseppe Guerrasio — Mon, 22 Jun 2009 17:42:00 GMT

How I have introduced in my previous post , Smooth Streaming is an innovative technology based on IIS Media Services and Silverlight, which the scope to simplify and make a reality delivering video content at high quality level through Internet up to true HD for Live and VOD. Using this technology RAI.IT, the internet company of RAI, the Italian broadcast host of FIFA Confederations Cup South Africa 2009, in cooperation with Microsoft Corp., Inlet Technologies and Level 3 Communications, offered exclusively for Italy (video content was geo-blocked to Italian IP) on www.raisport.rai.it and www.rai.tv free, live Web broadcasting in high definition television quality (720p) of the Italian soccer team matches during the tournament.

In the next picture an image of the player used during the streaming of the event:

RAI.IT use already Smooth Streaming for VOD on RAI TV portal (http://www.rai.tv ) in the High Quality area (not in HD but to 480p) and now starts to adopt this technology for Live sports event.

Smooth Streaming permit to solve one of the most significant limits in Internet video streaming connected to typical behaviors of the last mile for reproducing High Quality videos with high bitrates. When we think to the way that the content is delivered to the client, we have a lot of parameter that change every second during the client reproduction. In particular bandwidth and CPU power availability conditions change every second and causing a video glitch and buffering during the reproduction of the content, especially for the content at high level of bitrates, generating a poor user experience.

During the reproduction of the content Smooth Streaming dynamically detects current network and local PC conditions, and seamlessly switches the video quality of a media file that a Silverlight player receives. Consumers with high-bandwidth connections and newer hardware can experience HD quality streaming, and others with lower bandwidth speeds or older hardware receive an appropriate stream for their conditions, allowing the audience to enjoy an uninterrupted streaming experience with the highest quality possible.

The original video source was acquired by specific encoders and transformed in a set of separated streams at different quality (one for different bitrates level) based on a contiguous sequence of 2 sec of video chunks, and an XML manifest with the metadata. These streams are published to the client through a set of servers based on IIS7 with IIS Media Services . In Live streaming all the streams are offered to the client via HTTP and archived automatically in a set of file in the storage of the origin servers. Archived files are republished automatically to the client offering DVR capability to the client in addition to Live Stream offer. For the Confederation Cup matches RAI use the new beta version of IIS Media Services that support Live Streaming.

Video streaming is delivered to the client trough a sequence of HTTP call with REST style and for this reason it is possible leverage all the classic Internet HTTP Cache Infrastructure to increase streaming scalability.

The client part of the Smooth Streaming based on Silverlight detects current network and local PC conditions, and seamlessly switches the video quality of a media adapting the experience at the actual conditions in the client permitting the best experience possible, eliminating buffer and glitch .

The streaming starts with the first REST call from the client to the source and the response from the server with a manifest that describe chunks and streams level offered with the streaming.

The client reads this information and in order to start the download of video chunks and initiate video reproduction requesting the chunk with a too low bitrates for first.

During the download of the first chunk, client code calculate the current bitrates and CPU conditions and in base at this information proceeds with requests of the others chunks, adapting continuously the bitrates of chunks requested.

As written before streaming works with a sequence of HTTP client requests with a REST style to a stateless server and this permit to insert the origin server behind a CDN with a classic HTTP Edge Caching, improving in a simple way the scalability of streaming. For the same reason all the intermediate http caching level (for example enterprise intermediate cache , etc ) can act automatically as a cache for our chunk and contributing to the scalability of our solution.

The client code can offer a lot of services leveraging the capability of the programming platform offered with Silverlight and can consume and presents a lot of contextual data and information with the video. The smooth streaming player element can send back to the server a lot of logging information can be captured using logging functionality of IIS Media Services. It is possible build to service that can permit start and stop of the event and services for control and limit bandwidth consumption from the client.

In the client of RAI event we have start and stop control, bandwidth control and list highlights in the match that can permit to navigate and replay in the archive to the most important point of the event quickly. In this picture you can see the highlights box in overlay on the video in the player.

highlights future leveragin the fact that all the streams are archived automatically in a set of file in the storage of the origin servers. Archived files are republished automatically to the client offering DVR capability to the client .

In the case of RAI Confederation Cup streaming the architecture in place for the event is represented in the next picture :

The original HDTV 1080i signal in input is encoded in 7 different bitrates streams composed by a contiguous 2 secs video chunks codified in VC-1, created by 2 encoders Spinnaker 7000 from Inlet. Each encoder creates 3-4 streams and synch through the encoders are achieved with a timecode generator in input in the encoders with the source video. Encoders push the streams to an origin server farm in load balancing were the Level3 Communication CDN pull for distribute Live, archive streaming and XAP code and offers these to Silverlight client player published on RAI.IT and RAI.TV portal .

Download modulare con Silverlight

Giuseppe Guerrasio — Mon, 25 May 2009 15:07:10 GMT

L’utilizzo di rich plugin su Internet e nelle intranet come strumento per lo sviluppo di interfacce client sta diventando sempre più frequente. L’introduzione con Silverlight 2 dello sviluppo con .NET e la possibilità di consumare e aggregare dati provenienti da Web Service in una interfaccia in cui si possono utilizzare controlli e databinding ha allargato le possibilità di utilizzo anche a quelle classiche applicazioni Intranet di gestione dati.

La crescita nelle potenzialità utilizzabili per lo sviluppo e l’impiego di Silverlight in applicazioni di maggiore complessità e che implementano una notevole quantità di funzionalità e che in alcuni casi comportano in conseguenza un incremento nelle dimensioni del codice compilato che viene prodotto e che deve essere in conseguenza scaricato sul client.

Con il tradizionale modello di deployment di Silverlight le componenti dell’applicazione implementata vengono compilate in dll e racchiusi un file compresso che prende l’estensione .xap che viene utilizzato come contenitore. L’utilizzo dell’applicazione è indicato nella pagina client attraverso lo specifico tag object che tra i parametri contiene l’indicazione del file .xap contenente il codice compilato dell’applicazione da eseguire che deve essere scaricato e utilizzato nel client.

Il seguente esempio di tag illustra una tipica implementazione dell’inserimento di un’applicazione Silverlight con evidente l’indicazione dello .xap contenente l’applicazione:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/SilverlightComponent.xap"/>

<param name="onerror" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="2.0.31005.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

</a>

</object>

Nel caso di applicazioni più corpose i tempi di download del file e di avvio dell’applicazione possono diventare significativi ed impattare in modo negativo sulla esperienza del’’utente nell’utilizzo dell’applicazione stessa. Ovviamente si può agire sui meccanismi di cache per ridurre al minimo le volte in cui all’avvio dell’applicazione la stessa sia scaricata nuovamente nel client. Con questo tipo di tecnica per il deployment però , si riduce il problema , ma non si eliminano comunque i tempi necessari nei casi in cui a seguito di una modifica o all’avvia su una nuova macchina dell’applicazione deve essere scaricato l’intero .xap.

Per gestire questo tipo di situazioni è inoltre possibile utilizzare alcuni parametri che consentono di mostrare delle animazioni personalizzate durante lo scaricamento dello .xap. Attraverso il parametro splashscreensource del tag object utilizzato per istanziare nella pagina l’applicazione è infatti possibile introdurre un file .xaml con una grafica personalizzata e ricevere con delle callback Java Script onSourceDownloadProgressChanged e onSourceDownloadComplete le informazioni sullo stato di avanzamento del download dello xap in maniera da permettere lo sviluppo di una interfaccia personalizzata, per gestire in modo più efficace la comunicazione versol’utente durante il download dell’applicazione.

In particolare nel seguente tag abbiamo un esempio di come sia possibile configurare questa funzionalità:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/SilverlightComponent.xap"/>

<param name="onerror" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="2.0.31005.0" />

<param name="autoUpgrade" value="true" />

<param name=”splashscreensource” value=”SplashScreen.xaml”/>

<param name=”onSourceDownloadProgressChanged” value=”onSourceDownloadProgressChanged” />

<param name=”onSourceDownloadComplete” value=”onSourceDownloadProgressChanged” />

<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

</a>

</object>

Attraverso il parametro splashscreensource ho impostato una grafica in xaml che Silverlight mostrerà durante il tempo di caricamento e attraverso le due callback provvederò a pilotare l’aggiornamento dello stato di download dell’interfaccia mostrata all’utente durante il download.

Ad esempio nel file splashscreen.xaml si potrà mostrare una grafica simile a quella riportata di seguito:

E con le due seguenti funzioni si potrà così modificare il contenuto della interfaccia utente in base allo stato di avanzamento:

function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName(”testo”).Text = “Loading: ” + Math.round((eventArgs.progress * 1000)) / 10 + “%”;
}

function onSourceDownloadComplete(sender, eventArgs)
{
sender.findName(”testo”).Text = “Completed”;
}

Questo tipo di tecnica consente di gestire in modo più efficace l’interazione con l’utente ma non elimina il tempo di attesa per quei casi in cui abbiamo applicazioni corpose che devono essere scaricate nel client.

Oltre alla modalità di deployment classica che abbiamo visto, Silverlight consente di effettuare il download ed il caricamento di componenti aggiuntive preparate in xap differenti durante l’esecuzione dell’applicazione. Questo consente di poter pensare la propria applicazione differenti componenti che verranno poi compilati ed inseriti in xap differenti. Il componente principale conterrà la parte di startup dell’applicazione e sarà quello che verrà indicato nel tag source inserito nella pagina web.

Durante l’esecuzione di questo primo componente, verranno caricati su richiesta nel momento in cui occorrono per l’esecuzione dell’applicazione , le restanti componenti.

Questo tipo di modello consente di scomporre l’applicazione in componenti diverse modulando i tempi di caricamento ed avvio dell’applicazione stessa.

Silverlight consente, infatti, di caricare a runtime componenti aggiuntive ed eseguirle. Lo scaricamento sul client del componente aggiuntivo può essere effettuato attraverso la classe WebClient . Terminato lo scaricamento si può estrarre l’oggetto dallo xap o dalla dll scaricata utilizzando delle classi Assembly ed AssemblyPart.

Nel seguente frammento di codice ho riportato un esempio di download e caricamento di un oggetto Silverlight da un componente esterno allo xap dell’applicazione. Come primo passo si utilizza il WebClient per effettuare il download del componente satellite:

WebClient client = new WebClient();

client.DownloadStringCompleted +=

new DownloadStringCompletedEventHandler(OnDownloadCompleted);

Uri uri = new Uri( …url del componente satellite.. , UriKind.Relative);

client.DownloadStringAsync(uri);

Sulla callback chiamata al termine del download si procede a creare un istanza dell’oggetto e ad esempio aggiungerla come Child al contenitore dove dovrà essere visualizzata:

void OnDownloadCompleted(object sender, DownloadStringCompletedEventArgs e)

{

// caricamento dell’assembly dallo XAP package dove e è l’args della callback del web client

Assembly ass = GetAssemblyFromXap(nomeAssembly, e.Result);

// Creazione istanza object

object component = ass.CreateInstance(className);

UserControl componentControl = component as UserControl;

// Caricamento come child di un contenitore

contenitore.Children.Clear();

contenitore.Children.Add(componentControl);

}

Assembly GetAssemblyFromXap(string assemblyName, Stream xap)

{

Uri assemblyUri = null;

StreamResourceInfo resPackage = null;

StreamResourceInfo resAssembly = null;

AssemblyPart part = null;

assemblyUri = new Uri(assemblyName, UriKind.Relative);

resPackage = new StreamResourceInfo(xap, null);

resAssembly = Application.GetResourceStream(resPackage, assemblyUri);

//Estrae l’assembly

part = new AssemblyPart();

Assembly a = part.Load(resAssembly.Stream);

return a;

}

In modo similare è anche possibile scaricare ed visualizzare dei file xaml. In questo caso terminato lo scaricamento del file contenente lo xaml nella funzione di callback del webclient si può:

void OnDownloadCompleted(object sender, DownloadStringCompletedEventArgs e)

{

// Parsing e costruzione oggetti UI dallo XAML

string xaml = e.Result;

UIElement uiObjects = XamlReader.Load(xaml) as UIElement;

// Append to the DOM

contenitore.Children.Clear();

contenitore.Children.Add(uiObjects);

}

Sfruttando questo tipo di funzionalità disponibile per il deployment in SL diventa semplice scomporre in componenti l’applicazione e permettere una migliore gestione del download delle risorse necessarie al funzionamento dell’applicazione stessa implementando ad esempio pattern come il LazyLoad (http://en.wikipedia.org/wiki/Lazy_loading ) per gestire il caricamento su richiesta delle componenti.

Per poter gestire con più semplicità il caricamento delle componenti e stabilire una semplice suddivisione della applicazione un possibile approccio consiste nell’implementare i diversi componenti satellite come Sliverlight Control e nel gestire come Applicazione solo la componente principale che si occuperà di caricare il menù delle funzioni applicative e l’infrastruttura di base utilizzata per la gestione dello stato e per il caricamento delle componenti che implementano le singole funzionalità.

Allo scopo di consentire anche un utilizzo trasparente del caricamento a richiesta delle componenti aggiuntive è utile sviluppare un controllo che consenta di rendere trasparente questa operazione rispetto allo sviluppo delle funzionalità dell’applicazione stessa.

Ad esempio immaginando un’applicazione che presenta un menù di funzionalità ciascuna implementata attraverso una delle componenti satellite, può essere utile implementare un controllo da inserire nello UserControl principale dell’applicazione che attraverso la semplice modifica di alcuni parametri , provveda automaticamente a caricare ed eseguire, inserendo nello spazio in cui il controllo e inserito nell’ applicazione principale , gli elementi del componente satellite impostati sulle proprietà . Ad esempio nel seguente frammento di xaml abbiamo una Grid con all’interno il controllo con le proprietà impostate all’interno del quale verrà visualizzato lo UserControl TestComponente, estratto dallo xap TestComponente:

<StackPanel Grid.Row="1" x:Name="contenitore">

<c:ComponentLoaderControl>

<c:ComponentLoaderControl.ComponentInfo>

<c:ComponentInfo ComponentXapUrl="TestComponent.xap" ComponentAssembly="TestComponent.dll" ComponentControl="TestComponent.Page" />

</c:ComponentLoaderControl.ComponentInfo>

</c:ComponentLoaderControl>

</StackPanel>

Un controllo di questo genere oltre a gestire con semplicità il meccanismo di Download e caricamento dei componenti aggiuntivi, potrebbe occuparsi di gestire sia gli eventuali errori di download o caricamento del componente aggiuntivo sia i feedback verso l’utente relativi agli errori e alla grafica necessaria a comunicare lo stato di download del componente aggiuntivo.

Un controllo di questo tipo potrebbe essere implementato attraverso un customcontrol di Silverlight in maniera da ottenere un componente facilmente riutilizzabile in più applicazioni.

Come esempio ho realizzato un prototipo di customcontrol che implementa questa funzionalità da utilizzare come base per realizzare un componente di questo tipo nelle vostre applicazioni e che potete scaricare da qui.

Move Forward Internet video streaming: IIS7 Media Service and Smooth Streaming

Giuseppe Guerrasio — Fri, 15 May 2009 13:50:00 GMT

Delivering video content through Internet is one of the hottest technical topics. The increase of bandwidth and connectivity in combination with the numbers from the last big video event delivered like Olympics, demonstrate the potential of Internet channel for this type of content. In the 2008 Summer Olympics Games in Beijing, NBCOlympics.com attracted close to 6½ million users daily, who, on average, stayed more than 13 minutes per visit and spent more than 27 minutes when consuming video. In total, users watched more than 6 million hours of video content or 60 million video streams, which represent a 5-fold and 20-fold increase compared to the Torino and Athens games combined. Another big difference that the last Olympic on line demonstrate it is relative, not only to the number of users, but also to the viewing time. In the past, online video consumption was limited to “snippets” of video, now the prolonged viewing indicates that users enjoy the experience and find the image and sound quality acceptable.

Worldwide, billions of videos are viewed online every month. This type of trend are confirmed to a lot of service that came up on the market with success in the previous months like BSKYB channels offering or the new version of Netflix service and many others.

Setting up an online video service was a complex undertaking and fraught with difficulties, and the process of preparing, loading, and delivering multimedia content, combined with the serving of appropriate advertising, required a lot of manual work and did not really scale very well. In particular “delivering” video content at good or high level of quality through Internet connection is not a simple thing. A lot of details and technical issues are involved on this and build a solution for this and monetize the result is really complex.

In the last NAB conference Microsoft announce a first Release of new technology called Smooth Streaming based on IIS7 Media Services and Silverlight, which the scope to simplify and make a reality delivering video content at high quality level through Internet up to true HD for Live and VOD. You can see this web site from akamai an example of HD content delivered with smooth streaming and at this website you can found others technical information about this technology.

In the previous months before this announcement I had the opportunity to test and build a real production environment based on this technology, inside a new Web TV portal of RAI – Radio Televisione Italiana ( http://www.rai.tv ) . In the new version of this web site recently released there is a new area based on this smooth streaming technology with fiction, sport and junior videos. Content from RAI website have a good quality but is not HD content because the original produced video is not HD. Based on this experience I want write some post on this new fantastic technology that can permit to deliver uninterrupted video streaming to Silverlight clients at High Quality, via HTTP in VOD and delivers massively scalable Smooth Streaming for live events.

Before to go in deep in Smooth Streaming technology and in order to explain difference and advantage that come with this new streaming technique I want recap the typical way used to delivery video content through Internet. Before the smooth streaming you can use essentially two different way for delivering video content:

- Progressive Download

- Traditional Streaming (RTSP, streaming through HTTP, RTMP, etc)

Both approaches have pros and cons and smooth streaming try to combine the best of the previous techniques.

When you use Progressive Download to delivery video content you essentially leverage the capability of Web Server to delivery file.

The Web Server receive a request for a specific URL for the video content and the web server start to deliver the file to the client via classic HTTP.

Big advantages of this solution are:

- simplicity of the approach ;

- not required a specialized server;

- leveraging all HTTP infrastructure in terms of caching and distribution.

Problems connected to this solution are:

- Bandwidth controls;

- Security of content;

- Limited user tracking;

- Poor user experience (no seeking feature on classic web server);

- VOD video content only.

In general the most significant problem of this approach is about bandwidth consumption. In fact the web server delivers the video content to the cache of the client without any type of control or limitation leveraging all the bandwidth available.

You can improve efficiency of progressive download through system that can permit the control of bandwidth and offering control and seeking capabilities. IIS7 Media Services enabled this feature too called Intelligent bit rate throttling. This feature is available for the most used type of media content, and permit to reduce bandwidth consumption saves money on network costs by metering the download speed of multiple media file types as well as data. Intelligent Bit Rate Throttling accomplishes this by automatically detecting the encoded bit rates of 11 common media formats, such as Windows Media Video (WMV), Flash Video (FLV), and MPEG 4 (MP4), and then throttling the response to the client. Bit Rate Throttling and allows administrators to configure throttling rules for all file and MIME types.

With this technique you could obtain more efficiency for bandwidth consumption and simplicity in the delivery but remaining a lot of limitations. For example, in the case of the user put in pause the reproduction the download proceeds consuming bandwidth; in this way we can use of a single bitrates for reproduction or complex variable bitrates technique with poor efficiency , and remaining the problem illustrated before about the last mile and client reproduction, in particular for content with high quality and consequent high bitrates.

When you use classical streaming you use a specialized server to delivery to the client only the portion of the stream involved in the reproduction of the video in base of the command received from the client.

Big advantages of this solution are:

- Efficiency in control and delivery of content ;

- Simple way to track user activity;

- Good user experience (seeking, forward, etc);

- Good for VOD and Live .

Problems connected to this solution are:

- Required specialized services ;

- Not cache in HTTP CDN;

- Scalability required a specialized network .

In general the most significant problem of this approach is about scalability. In order have a large distribution of video content is necessary achieve a specialized infrastructure of server with a specific streaming services. Is not possible reuse the big cache infrastructure that we have in place on Internet today for HTTP . In order to delivery this type streaming, Windows Server offers a good platform through the Windows Media Services today available for Windows Server 2008.

When you use Smooth Streaming now available in beta with IIS7 Media Services , you have the capability to deliver media at variables bit rates to Silverlight clients over HTTP combining the advantage of streaming and progressive download and adding capability of adapt the bit rates at the real situation in the last mile in terms of bandwidth and CPU.

With the Smooth Streaming you deliver video content starting from a set of specific encoded file with different bit rates level. During the encoding phase, realizable today for VOD (with Expression Encoder 2 SP1 with adaptive streaming encoding profile) or for live using a specialized encoder from an encoders vendor, you obtain the source files to stream. You can choose a set of different bitrates and obtaining a set of N file one for every level of bit rates that you have selected in the profile and a xml manifest with the metadata for server and an xml file for client. You can choose at maximum of 10 different bit rates. The manifest files are used from the server and from the client to understand level of bitrates available for streaming and others information relative to the media content.

A typical Smooth Streaming media asset (presentation) consists of the following files:

MP4 files containing video/audio

- *.ismv Contains video and audio, or only video (one file ISMV file per encoded video bit rate )

- *.isma Contains only audio

Server manifest file

- *.ism -Describes the relationships between the media tracks, bit rates and files on disk . Used by IIS Media Services Server

Client manifest file

- *.ismc - first file delivered to the client. Describes the available streams to the client: bitrates level available, codecs used, video resolutions, markers, captions, etc.

For live streaming the same structure is created in the archive of event and client manifest is generated at runtime from encoding available. Origin Media Server can archive all live streaming and offer DVR capability to the client.

In every video\audio file (ismv , isma) you have a contiguous sequence of video chunks at fixed time length (default 2 sec) based on the ISO/IEC 14496-12 ISO Base Media File Format specification, better known as the MP4 file specification . There are actually two parts to the Smooth Streaming format: the wire format, and the disk file format. In Smooth Streaming, a video is recorded in full length to the disk as a single file (one file per encoded bit rate), but it's transferred to the client as a series of small file chunks. The wire format defines the structure of the chunks that are sent by IIS to the client, whereas the file format defines the structure of the contiguous file on disk, enabling better file management. The MP4 specification is perfect for this because allows MP4 to be internally organized as a series of fragments, which means that in Smooth Streaming the wire format is a direct subset of the file format. Every fragment is delivered to the client through HTTP and in this way can be leverage all the HTTP caching infrastructure of Internet.

For VOD and for Live the content are published through IIS Media Service using Windows Server 2008 and IIS7 with IIS Media services Extensions.

During the delivery of the content, the client, in order to reproduce the video, sends a set of specific requests to the server to download the video and audio chunks. In every request for a single chunk, the client specifies level of bit rates and timeframe required in base of the current condition of bandwidth and CPU and position in content reproduction. In this way smooth streaming is delivered with a set of progressive download of video and audio chunks.

The client send a set of HTTP GET request in REST style like this : http://smoothstreaming.com/title.ism/QualityLevels(1775000)/Fragments(video=840000000) that contains information about bit rates and timeframe requested for the chunk . This type of request is a typical HTTP request and is it possible leverage all the http infrastructure on Internet in order to cache this content to near as possible at the client and using a typical http edge offered from a CDN.

A specific part of code downloaded in the client contains the Heuristic Algorithms that drive the requests of chunks. The process start with the base request from the client at the client manifest file on the server in order to obtain the metadata that can guide the behavior of the client. This request have this format : http://smoothstreaming.com/title.ism/Manifest, IIS receive the request send manifest client in response. In the next picture you can see a typical client manifest response with the indication of the bit rates available for the content downloads.

The client manifest can contains more information about media metadata like : codecs, Text streams, Multi-language audio tracks, Alternate video and audio tracks (for example, multiple camera angles, director's commentary, etc.), Multiple hardware profiles (for example, a bit rate targeted at different playback devices) , Script commands, markers/chapters, captions

The process continue with the request of the first chunk video and audio, requested with the low bit rates available in the manifest with a REST style call described before . The IIS Media Service Module receive the request and use a server manifest file to determine the file to load in base of the request bitrates and provides to the right chunk of video. In the next picture you can see a sample of server manifest file with the indication of file for bitrates:

For the successive request based on download speed, the client can detect available bandwidth and requesting the right bit rates in base of the current situation of bandwidth and CPU. In this way the smooth streaming have the capability of adapt continuously creating an immersive User Experience. The process Work in a similar way for Live and VOD streaming and during the delivery of the video chunk through Internet, all the HTTP caching infrastructure of the network can be leverage in order to improve scalability in particular for Live Streaming. In the case of Live Smooth Streaming the Origin media server can archive the content produced from the encoder and offering DVR capability too during the Live Streaming.

There is a lot of advantage in this approach respect to traditional streaming technique. In traditional streaming, the client state is managed both by the client and the server. The server keeps a record of each client for things such as playback state, streaming position, selected bit rate (if multiple bit rates are supported), etc. While this gives the streaming server more control, it also adds overhead to the server. In terms of scalability another important limitation is about the fact that each client has to maintain the server affinity throughout the streaming session.

With the pull model in VOD or Live Smooth Streaming, the server is stateless, the client drive the process and has the responsibility for the state and this fact increase scalability and remove any single point of failure. Any client request can be satisfied by any server configured and the network topology can leverage a stateless infrastructure and can reroute the client requests to the best server. In this way we have a big improvement in:

- quality because all the decisions, resulting in a much faster response (for example bit rate switching) offering a superior UX :

- reproduction start fast because the client select the low bitrates and can download in parallel more chunks, potentially cached from the most near web server

- bitrates are continuously adapted at the real situation in the last mile in terms of bandwidth and CPU status

- requests can be served from different servers without affinity or persistent connection improving scalability and fault-tolerance

- scalability because you can leverage a simple, efficient and load balanced HTTP infrastructure to deliver video content

- cost because you can leverage an HTTP CDN with generic web server with low number of specialized server and leverage all the HTTP cache ( for example intermediate proxy )

Al the URL obfuscation technique can be used to protect the content and is announce the support of Playready content protection encryption in order to protect smooth streaming for Live and for VOD.

Smooth streaming enable a new video delivery mechanism that can permit to stream HD content in VOD and Live through Internet with a cool UX .

In next posts we can see in more details the three phase for create and publish content with this technology .

Silverlight e le nuove applicazioni RIA: Servizi per l'Healthcare

Giuseppe Guerrasio — Thu, 08 May 2008 15:00:00 GMT

Nelle scorse settimane ho fatto un post relativo ad una applicazione di esempio per il mondo finaziario sviluppata in Silverlight 2 che evidenzia come la possibilità di sfruttare le potenzialità delle nuove tecnologie per lo sviluppo di interfacce RIA (Rich Interactive Application) possa essere utilizzata a vantaggio di qualunque tipologia di applicazione. Da ieri è disponibile online una nuova serie di esempi per la sanità Microsoft Health Common User Interface (MSCUI) Patient Journey Demonstrator che dimostrano come anche in questo settore le potenzialità delle nuove tecnologie possono essere utilizzate per costruire una nuova generazione di applicazioni, evidenziando le qualità di Silverlight come piattaforma di sviluppo.

Si tratta di una implementazione di esempio per un progetto piu ampio per il settore dell'Healtcare: Il Microsoft Health Common User Interface (CUI) . L'iniziativa, sviluppata in UK, ha lo scopo di contribuire alla costruzione di una User Interface Design Guidance per le applicazioni in questo settore, completa di un Toolkit di controlli che indirizza una ampia gamma di scenari , abilitando la costruzione di una nuova generazione di applicazioni, più semplici da usare e più efficaci rispetto alla loro funzione nel campo sanità .

Disponibili oltre allo scenario anche il documento di Design Guidance e il Toolkit con i controlli ed esempi realtivi all'iniziativa che possono essere scaricati e installati per utilizzarli con Microsoft Visual Studio. Disponibile anche la Roadmap del programma.

Nel Health Common User Interface (MSCUI) Patient Journey Demonstrator vengono al momento implementate tre applicazioni che descrivono una tipica giornata di un paziente dal punto di vista della struttura ospedaliera che lo cura. Si va dalle interfacce finanziare fino alle informazioni sanitarie ed agli esami clinici. Molte le funzionalità di Silverlight 2 Beta 1 utilizzate tra cui:

· Deep zoom per la visualizzazione dei dati degli complex ECG (elettrocardiogrammi)

· Scaling layout

· Data-binding

· Animazioni e integrazione di contenuti multimediali

· Ampio utilizzo di grafica vettoriale per la rappresentazione di diagrammi

Trovate anche una introduzione allo scenario completa di video , descrizione delle applicazioni e scenari evolutivi futuri per le applicazioni di questo settore.

Alcuni link per chi volesse cominciare a provare Silverlight 2 :

- http://silverlight.net/GetStarted/ dove trovate i link per installare il Runtime , le estensioni per Visual Studio 2008 e la versione di Expression Blend per SL2

- http://silverlight.net/learn/tutorials.aspx tutorial sul Silverlight 2

- http://silverlight.net/learn/labs.aspx . laboratori sulle nuove funzionalità di Silverlight 2

- Slide dell'evento The Next Web Now

- Sessioni di MIX 08

Per chi fosse interessato alle funzionalità di accesso remoto a dati esposti da siti via http e web service, aspetto fondamentale per lo sviluppo di soluzioni applicative con SL suggerisco un mio post sull'argomento.

Ottimo tutorial introduttivo sul blog di Scott Guthrie.

Esempio di applicazione RIA con Silverlight : Sanremoanchenoi da Rai Click e Kora

Giuseppe Guerrasio — Mon, 05 May 2008 09:50:00 GMT

L’evoluzione delle interfacce utente e l’emergere di applicazioni RIA (Rich Interactive Application) basate in gran parte sull’utilizzo di rich-plugin come Silverlight che arricchiscono il browser e potenziano le possibilità offerte dall’HTML e dalle tecniche AJAX sta rapidamente modificando la modalità con cui vengono sviluppate le applicazioni. Un ottimo esempio di come sia possibile combinare queste nuove potenzialità per sviluppare interfacce innovative è rappresentato dal sito sanremoanchenoi ( l'iniziativa è conlusa e qui potete vedere il video del sito) . Si tratta di un iniziativa di Rai Click, implementata da Kora , avviata durante il festival di Sanremo e collegata proprio alla sperimentazione di nuove forme di user interface e di gestione di contenuti UGC (User Genereted Content) .

L’iniziativa è basata su una serie di contest dove gli utenti possono inviare dei video per dimostrare le loro capacità “artistiche” collegate alla musica. Gli utilizzatori del sito possono navigare sui video, votarli ed inserire dei commenti. Di seguito un’immagine dell’interfaccia realizzata:

Il sito rappresenta anche un ottimo esempio di utilizzo di software sviluppato localmente in combinazione con l’utilizzo di servizi offerti da piattaforme su Internet . Infatti, l’infrastruttura di gestione ed erogazione dei contenuti video è completamente basata su Silverlight Streaming che, attraverso la sua CDN (Content Delivery Network), fornisce il servizio di streaming per i filmati che vengono visualizzati nel client.

L’interfaccia dell’intera applicazione è sviluppata con tecniche AJAX e sfrutta una logica sviluppata in Java Script per pilotare sia le componenti di grafica ed animazione sviluppate con Silverlight 1.0 , sia le componenti HTML. L’interazione con i servizi di back end che gestiscono il voting , i commenti ed il catalogo dei video è stata implementata in puro stile AJAX e l’iterfaccia client accede ai servizi attraverso XMLHttpRequest senza alcun reload dell’interfaccia client.

L’applicazione ha poi una componente di back-end redazionale che gestisce l’approvazione dei contenuti e che in particolare gestisce l’encoding e l’upload dei video su Silverlight Streaming. L’encoding dei video viene realizzato con Expression Encoder. L’architettura di massima dell applicazione e la seguente:

La gestione della fruizione dei video dal client Silverlight avviene attraverso l’utilizzo combinato dei servizi locali al sito ed di Silverlight streaming . I video vengono pubblicati sul servizio , il catalogo locale del sito mantiene i riferimenti ai video . L’interfaccia caricata nel browser client interroga via http(utilizzando XMLHttpRequest via javascript) il servizio di catalogo che fornisce l’elenco dei video. L’elenco dei video viene caricato via Javascript nell’interfaccia Silverlight e mostrato all’utente.

Nel momento in cui l’utente seleziona un video per effettuare lo streaming , l’applicazione client interroga attraverso degli script forniti da Silverlight Streaming che vengono inclusi nel client il servizio per ottenere l’url del video che viene poi visualizzato dal MediaElement di Silverlight, opportunamente utilizzato nell’interfaccia che provvede a consumare lo streaming fornito dalla CDN .

Per chi volesse approfondire l’utilizzo di Silverlight Streaming service e la costruzione di siti UGC consiglio di utilizzare l’applicazione di esempio video.show che offre un esempio completo di codice sorgente scaricabile per realizzare siti UGC per il video sharing, con la possibilità di utilizzare Silverlight Streaming come meccanismo per la distribuzione dei video e l’SDK del servizio Silverlight Streaming.

Grazie alla flessibilità di Silverlight ed alla flessibilità dello XAML che consente di sviluppare una efficace collaborazione tra developer che sviluppa la logica dell’interfaccia e designer che implementa le componenti di grafica ed animazione, l’applicazione è stata sviluppata in tempi estremamente rapidi (2 settimane) . Anche per l’integrazione e la messa in produzione, la possibilità di sfruttare Silverlight Streaming come piattaforma di delivery dei video ha consentito di gestire l’intero progetto in tempi estremamente ridotti.

La ricchezza di animazioni e contenuti multimediali dell’interfaccia utente mette in evidenza la notevole flessibilità che viene fornita da Silverlight. L’intera interfaccia contenuta nel browser è infatti realizzata con il plugin, combinando anche parte di contenuti in HTML che vengono utilizzati in overlay al contenuto implementato con Silverlight. Come si può vedere dalla seguente figura:

abbiamo una serie di oggetti grafici in overlay su un video di background, dove vengono composti i diversi menù, che interagiscono con l’utente attraverso delle animazioni che compongono le diverse scene previste in base alle selezioni effettuate dall’utente.

Anche le liste dei contenuti video vengono posizionate in overlay al video di background e consentono di avere in preview il video selezionato in completo overlay sul video di background , componendo in un'unica interfaccia animazioni, grafica, testo e differenti flussi video:

Le componenti dell’interfaccia che consento il voting e l’inserimento di commenti e contenuti sono sviluppate con dell’HTML che viene anche in questo caso posizionato in overlay ai contenuti realizzati in Silverlight ed anche in questo caso gestito con una logica in Java script che sfrutta le classiche tecniche AJAX per colloquiare con i servizi di back end che abbiamo descritto nell’architettura vista in precedenza.

Il sito resterà in produzione solo per alcune settimane collegate al contest collegato a sanremo.

Una giornata di Steve Ballmer

Giuseppe Guerrasio — Mon, 28 Apr 2008 16:00:00 GMT

Durante la giornata che Steve Ballmer ha passato in italia la scorsa settimana Carlo Rossanigo lo ha seguito per tutto il tempo ed ha girato una video intervista con lui nei ritagli di tempo della giornata. Domande a tutto campo da su cosa pensa mentre fa jogging, a come vive il social networking, da come si aspetta che sarà il web 3.0, s cosa suggerisce ai giovani, .. insomma, 14 domande “unplugged” da non perdere !!!!

Le trovate su mclips .

Evento The Next Web Now: Slide sessione Costruire applicazioni RIA con Silverlight 2

Giuseppe Guerrasio — Thu, 24 Apr 2008 15:27:00 GMT

Ecco le slide della mia sessione "Costruire applicazioni RIA con Silverlight 2" all'evento The Next Web Now – MIX Essentials . Sul blog di MSDN Italia i link alle altre slide e presto anche i filmati delle sessioni. Grazie a tutti per la partecipazione.

Accesso ai dati con Siliverlight 2 Beta 1

Giuseppe Guerrasio — Tue, 18 Mar 2008 11:00:00 GMT

In questo fine settimana ho passato un po di tempo libero ad approfondire i bit disponibili della Beta 1 di Silverligth 2 . Tra le tantissime novità offerte dal supporto del codice managed, la nuova versione mette a disposizione un'ampia parte delle librerie .NET tra cui nuovi meccanismi per accedere a dati esposti da siti Internet\Intranet via HTTP.

Sia Internet che nelle intranet è sempre più frequente l'utilizzo dell'HTTP per l'esposizione di informazioni attraverso diverse forme (Web Service Soap,RSS, REST, POX, JSON, etc).

Lo scenario tipico di sviluppo Web che prevedeva lo strato di accesso ai dati realizzato direttamente dalla parte server dell'applicazione Web , sta rapidamente evolvendo. Anche le applicazioni basate sul browser sono sempre più caratterizzate da una larga presenza di codice client, che sfrutta tecniche AJAX per consumare dati offerti da servizi esposti da server. In particolare diventano sempre più frequenti gli scenari in cui si utilizzano fonti dati esposte da siti differenti, che vengono combinate in un unica interfaccia direttamente sul client.

Questo tipo di scenario non riguarda esclusivamente le applicazioni sviluppate per Internet ma diventa sempre più presente anche in scenari Intranet. Con sempre maggior frequenza le aziende cominciano a combinare il software interno con servizi esterni. Le applicazioni e le informazioni aziendali vengono utilizzate in combinazione con servizi presenti su Internet e con le applicazioni delle aziende clienti o partner, creando scenari un cui la gestione dell'accesso ai dati da parte del codice che gira nel browser client, diventa sempre più sofisticata e complessa. Ad esempio, un azienda che ha bisogno di un software per la gestione di spedizioni presso i propri punti vendita potrebbe sviluppare un applicazione client che aggrega le informazioni sui punti vendita estratte da servizi presenti nella intranet , posizionando i punti vendita sulle mappe fornite da un provider di mappe su Internet ed i servizi del corriere utilizzato per effettuare le spedizioni, integrando con i dati aziendali i servizi per gli ordini, lo stato della spedizione , etc.

Evidentemente in scenari più complessi di integrazione non tutta l'aggregazione dei servizi può essere implementata nel client , perchè in moltissimi casi il coordinamento dei servizi stessi comporta la gestione di processi asincroni che vanno gestiti con specific Business Process Manager , ma sono comunque molti gli scenari in cui ha senso aggregare nel client. Nel nostro scenario un esempio ll'invio di un ordine di spedizione verrà sicuramente gestito attraverso il BPM dell'azienda che provvederà poi ad inviare l'ordine al servizio del corriere mentre lo stato della singola spedizione potrebbe direttamente essere richiesto dal client al servizio del corriere e combinato direttamente sulla mappa e con gli altri dati provenienti dall'Intranet.

Altra interessante modalità di integrazione dei servizi con i processi dell'azienda è rappresentata dalla possibilità di sfruttare office ed il pattern OBA per collegare un scenario di questo tipo , direttamente con gli strumenti di produttività che le persono utilizzano per portare avanti i processi di tutti i giorni, ed una blla implementazione reale di uno scenario simile è rappresentata daei servizi che sta implementando FedEx mostrati alla office developers conference .

Con la prima versione di Silverlight gestire l'accesso a fonti dati è possibile direttamente dallo XAML per immagini, video , suoni mentre per l'accesso a sorgenti dati occorre utilizzare il JS e l'oggetto XmlHttpRequest . Attraverso queste modalità e gia possibile sviluppare delle interessanti applicazioni di mashup (esempio interessante sviluppato in Italia sul blog msdn) , ma ovviamente sviluppare completamente utilizzando JS XMLHttprequest con sorgenti dati JSON o XML non è semplice e nemmeno particolarmente performante nella parte di parsing e caricamento dei dati sull'interfaccia utente.

In alcuni casi, per eliminare il costo del parsing sul client, è anche possibile fare in modo di costruire dei servizi in grado di rispondere direttamente con delle porzioni di XAML che vengono valorizzate server side, con i dati estratti da sorgenti specifiche e caricati a partire da template disponibili sul server. Lato client si può utilizzare XMLHttpRequest o il downloader di Silverlight per connettrsi all'url sul server che restituisce lo XAML contenente i dati e caricarlo nell'interfaccia utilizzando CreateFromXaml . Questo Howto mostra un semplice esempio di utilizzo di questa tecnica che sfutta lo XAML mentre questo mostra l'utilizzo di web service da Silverligh 1.0 .

L'utilizzo di AJAX e quindi dello JavaScript e di XMLHttpRequest per accedere a fonti dati remote comporta una notevole difficoltà di debug ed è sottoposto alle restrizioni imposte dal browser per il cross-scripting . Infatti attraverso questa tecnica possono essere interrogati solo URL residenti sullo stesso dominio da cui è stata caricata la pagina in esecuzione sul Browser. E' possibile attraverso specifiche tecniche di impiego di script dinamici o proxy lato server, Iframe etc, superare una parte di queste limitazioni , ma il risultato incrementa ancora di più la complessità di sviluppo e debug.

Con l'arrivo di Silverlight 2 (SL2) ed il supporto di .NET nello sviluppo con Silverlight abbiamo a disposizione un' ampia serie di classi che andranno ulteriormente ad arricchisi nella versione finale del nuovo plug-in. Attraverso SL2 abbiamo a disposizione le classi per consumare sia Web Service SOAP che per accedere direttamente a URL in GET e POST che per l'utilizzo di RSS , aggiunte anche le classi per gestire socket in uscita. Attraverso il nuovo modello di sviluppo è possibile anche effettuate cross-scripting attraverso quei siti che impostano sulla root del loro dominio il file di policy per questa funzionalità. Viene supportato anche il file di policy di Flash , per cui su tutti i siti in cui è già presente questo file è possibile fare crossscripting con Silverlight.

Oltre al supporto per il cross-scripting, il nuovo modello di controlli di SL2 supporta le funzionalità di databinding con le stesse modalità che sono utilizzate nel .NET Framework e Windows Presentation foundation , rendendo di fatto estremamente semplice anche il caricamento dei dati estratti dai servizi sui controlli dell'interfaccia utente. Disponibile anche il supporto per LINQ to XML che ci permette di gestire con semplicità la manipolazione delle strutture XML estratte dai servizi.

Facciamo un esempio pratico provando a sviluppare un client per video.msn.com ed in particolare per estrarre un elenco di video casuale e visualizzare le informazioni fornite in formato XML dall'URL: http://catalog.video.msn.com/randomVideo.aspx?mk=us&vs=0&ff=99&c=10&random=12345 . Di seguito l'XML che viene restituito dal servizio di MSN:

La piccola applicazione che realizzeremo avrà quindi la seguente struttura:

In particolare per accedere alle informazioni utilizzeremo la classe System.Net.WebClient messa a disposizione dalla versione di .NET associata a SL2 che consente di accedere ad URL Internet in GET e POST a patto di contattare un URL sullo stesso dominio da cui abbiamo scaricato l'applicazione o su un dominio che ha posizionato sulla sua root un file di policy per il cross-scripting Silverlight o Flash. Infatti su catalog.msn.video.com troviamo il file clientaccesspolicy.xml :

Per costruire il nostro client SL2 utiliziamo Visual Studio 2008 selezionando lo specifico template di progetto per Silverlight scegliendo di farci generare anche il progetto Web per il test dell'applicazione:

Ottenendo così una soluzione con due progetti: uno per l'implementazione dell'applicazione SL2, l'altro per l'applicazione Web:

SL2 supporta oltre al Canvas due nuovi controlli di Layout , ovvero i contenitori per il posizionamento dei controlli sulla nostra interfaccia. Per il nostro esempio utiliziamo una Grid, equivalente a quella che abbiamo nel fratello maggiore WPF, con due righe all'interno delle quali inseriremo gli elementi fondamentali dell'intrfaccia: nella prima riga i controlli per impostare i parametri della ricerca sul contenuto dei risultati, nella seconda il contenuto selezionato in base ad i parametri di ricerca impostati. Per poter inserire , impostiamo ,inoltre, la proprietà ShowGridLines a true per visualizza la struttura della griglia:

Sull'handler dell'evento click del controllo Button inserito per effetuare la ricerca:

inseriamo il codice che utilizzando la classe WebClient ci permetterà di accedere ai dati di cataalogo. La classe WebClient mette a disposizione i metodi per accedere ed estrarre informazioni da un URL solo attraverso un pattern asincrono. Per accedere al catalogo di MSN video ed estrarre le informazioni in XML utilizzaremo il seguente codice:

Le informazioni in XML ottenute dal servizio possono essere direttamente caricate in u Array utilizzando Linq To Xml . Per utilizzare questa funzionalità occorre referenziare lo specifico assembly System.Linq.Xml :

Dove ns è una proprietà per gestire in namespace contenuto nel file XML, GetUriAsset un metodo helper per estrarre idati e VideoSource una specifica classe inserita nel progetto per rappresentare le informazioni dei video:

Ottenuto l'array con le informazioni , possiamo sfruttare il databinding e collegare direttamente la collezione contenente i dati da visualizzare ad uno dei nuovi controlli offerti da SL2 completi di supporto per il databindig. Per questo semplice esempio utilizzeremo direttamente il nuovo controllo DataGrid che aggiungeremo allo XAML:

e poi lo collegheremo ai dati usando la proprietà ItemSource:

Ottenendo a runtime il seguente risultato:

Come tutto il modello dei controlli di SL2 in maniera speculare a quanto possibile in WPF è possibile definire dei template di visualizzazione per i controlli. Infatti , ad esempio, nella colonna contenente l'url dell'immagine di preview possiamo impostare un template per fare visualizzare l'immagine al posto dell'url nella specifica colonna utilizzando la funzionalità di databinding per collegare i dati ad i controlli inseriti nel template.

Nel nostro esempio, in particolare, andiamo ad usare il template della RowDetails ovvero la riga di dettaglio che viene supportata dal DataGrid per ogli riga inserita. Impostiamo un template sulla riga di dettaglio per permettere la visualizzazione dell'immagine di preview del video. Il campoSource del controllo immagine lo colleghiamo al campo ImageUrl del datacontext con la specifica funzionalità di databinding ( {Binding ImageUrl} ) corrente e impostiamo anche la specifica proprietà della DataGrid che ci permette di mostrare la RowDetails nel momento in cui la riga viene selezionata:

Il risultato ottenuto a runtime sarà il seguente:

Oltre al campo Image, possiamo anche direttamente inserire un MediaElement e riprodurre il direttamente il video.

Agendo con altri template è possibile personalizzare completamente la griglia così come qualunque altro controllo adattandola come vogliamo alle nostre esigenze grafiche.

Come abbiamo già detto l'oggetto WebClient è solo uno dei meccanismi offerti da SL2 per l'accesso ai dati. Per l'accesso a servizi SOAP silverlight mette a disposizione lo stack client di WCF permettendo l'utilizzo del classico modello "Add Service Reference" che consente di generare da Visual Studio una classe proxy a partire dai metadati del WSDL esposto dal servizio, classe che poi può essere usata direttamente per l'accesso a servizio. Anche in questo caso il proxy genera solo la possibilità di utilizzare con un pattern asincrono le chiamate al servizio, per evitare di bloccare l'interfaccia utente. Di seguito uno schema dello stack WCF per SL2.

Facciamo anche un piccolo progetto di test per l'utilizzo di Web Services da SL2 utilizzando WCF come servizio server. Sviluppiamo un semplice client SL2 per estrarre le informazioni dei clienti del classico database Northwind esposto attraverso un servizio WCF. Partiamo con un nuovo progetto Silverlight e selezioniamo anche la costruzione dell'applicazione Web di test.

All'interno dell'applicazione web di test aggiungiamo un modello LINQ To Sql per accedere alla tabella Customers del database Northwind :

Con il wizard di LINQ To Sql selezioniamo la tabella Customers e ci facciamo generare il modello di classi per l'accesso ai dati dal nostro ORM:

Impostiamo la specifica proprietà che ci consente di rendere serializzabili le classi generate da Linq To Sql:

Aggiungiamo un servizio di tipo WCF al nostro progetto:

Dove implementiamo la seguente interfaccia per estrarre l'elenco dei clienti dal database customers che sono in una specifica città:

Implementiamo l'interfaccia sul servizio ed impostiamo con LINQ la query per estrarre i clienti in base al parametro selezionato:

Come ultimo step per permettere l'accesso a SL2 al servizio, impostiamo come profilo di banding il basicProfile , agendo sul file di configurazione della nostra applicazione client per fare in modo che l'implementazione SOAP del servizio sia compatibile con il Basic Profile SOAP che viene supportato da SL2:

Lato SL2 implementiamo una semplice interfaccia per l'invio della richiesta al servizio e la visualizzazione della risposta:

Per poter agganciare il servizio, dal progetto SL2 usiamo la classica add service reference, selezionando il servizio WCF :

L'ambiente di sviluppo carica il WSDL esposto dal servizio e ci implementa il proxy necessario per l'accesso al servizio e la configurazione di WCF:

Sull'evento di click del Button query inserito nell'interfaccia SL implementiamo il codice per accedere al servizio , e sul metodo di callback agganciamo non il databinding la DataGrid ai dati estratti dal servizio:

Completando il nostro esempio:

Per approfondire questo aspetto vi consiglio : http://msdn2.microsoft.com/en-us/library/cc296254(VS.95).aspx .

In SL2 avremo a disposizione anche i serializzatori JSON . Al link http://code.msdn.microsoft.com/SilverlightWS trovate alcuni esempi del supporto JSON su cui il team di sviluppo sta lavorando :

Interessante anche la funzionalità prevista per l'ambiente di sviluppo paste as XmlSerializable che ci consentirà da VisualStudio di fare copia e incolla di un frammento XML per generare direttamente una classe tipizzata per rappresentare lo stesso XML con una classe .NET, cosa che in parte è possibile con il tool da riga di comando XSD.EXE di .NET.

Disponibile anche il supporto per i socket, ma solo verso il dominio da cui è stata scaricata l'applicazione (no crossscripting al momento) ed il supporto per Syndication che è praticamente identico a quello disponibile in .NET 3.5.

Per chi volesse cominciare a provare Silverlight 2 suggerisco i seguenti link:

- http://silverlight.net/GetStarted/#betajump dove trovate i link per installare il Runtime , le estensioni per Visual Studio 2008 e la versione di Expression Blend per SL2

- http://silverlight.net/learn/tutorials.aspx tutorial sul Silverlight 2

- http://silverlight.net/learn/labs.aspx . laboratori sulle nuove funzionalità di Silverlight 2

Al link http://silverlight.net/Quickstarts/Remote/default.aspx trovate un quickstart sugli argomenti trattati.

Silverlight e le nuove interfacce per i Servizi Finanziari

Giuseppe Guerrasio — Sun, 16 Mar 2008 14:21:21 GMT

Normalmente si è portati a pensare che la costruzione di interfacce innovative e ricche di contenuti, sia una tematica riservata al mondo dell'intrattenimento . In realta la possibilità di sfruttare le potenzialità delle nuove tecnologie per lo sviluppo di interfacce RIA (Rich Interactive Application) può essere effettuato a vantaggio di qualunque tipologia di applicazione, permettendo di costruire siti che consentono di aprire scenari completamente nuovi, contribuendo a migliorare significativamente anche servizi come la Banca Online. Un bell'esempio di quello che è possibile fare in questo settore è rappresentato dalla applicazione demo mostrata alcuni giorni fà alla Financial Services Developers Conference in NY.

Si tratta di una demo che illustra un 'mock-up' di esempio di un sito finanziario sviluppato in Silverlight 2 che potete vedere online in questo sito . Caratteristiche interessanti di Silverlight 2 vengono combinate insieme all'interno di questo esempio, video e grafici interattivi, drag&drop , codice client compilato per calcoli , utilizzo di web service, dimostrando le potenzialità anche in questo tipo di scenari.

Un video di introduzione alla demo lo trovate su questo silverlight streaming video e a quest'altro link trovate un documento che descrive gli step dello scenario demo.

Il codice sorgente dell'esempio lo potete scaricare qui, al momento è un porting dalla versione 1.1 di Silverlight e verrà a breve pubblicata una nuova versione che sarà anche inserita nella gallery su Silverlight.net . Link al blog di Jaime Roudriguez che ha pubblicato la notizia .

Silverlight Blueprint per SharePoint

Giuseppe Guerrasio — Tue, 04 Mar 2008 18:00:00 GMT

Come posso integrare Silverlight all'interno del mio portale basato su Sharepoint ? Domanda classica e ricorrente da tempo in tutti gli incontri con clienti e partner che hanno come argomento una delle due tecnologie. Ora disponibile il Silverlight Blueprint per SharePoint web site completo di esempi con tutorial e video che mostrano come integrare Silverlight all'interno di applicazioni basate su Sharepoint.

Sei applicazioni di esempio verranno rese disponibili per partire a sviluppare siti combinando le potenzialità delle due tecnologie tra cui un Navigation Control, un viewer per i colleghi che effettua delle lookup in Active Directory usando WCF, una SharePoint picture library basata su Silverlight, un custom field type per slider control e molto altro.

Disponibile anche un assembly wrapper di base per che include delle wrapper class di partenza per includere Silverlight in WebPart . Il Blueprint conterrà il codice sorgente di esempi e wrapper rilasciato con la modalità shared source su codeplex.

ADO.NET Data Service

Giuseppe Guerrasio — Tue, 04 Mar 2008 12:00:41 GMT

Un'altra interessante componente disponibile con la CTP delle ASP.NET 3.5 Extension è la nuova infrastruttura per lo sviluppo di Web Data Service ADO.NET Data Service. Si tratta dell'evoluzione in prodotto della tecnologia incubazione denominata "Astoria" mostrata a MIX 07.

Il nuovo framework ha lo scopo di semplificare l'erogazione di sorgenti dati sul Web venendo incontro alla trasformazione che i siti internet stanno avendo nell'utilizzo di queste funzionalità.

I siti Web da semplici erogatori di interfacce HTML si stanno trasformando in erogatori di dati. Con lo sviluppo di AJAX e delle applicazioni RIA si sta passando da un approccio in cui dall'esecuzione del codice lato server si accedeva alle sorgenti dati utilizzate nei siti

ad un approccio in cui dal codice client che si esegue nel browser, si accede direttamente alle sorgenti dati via HTTP, genericamente attraverso un approccio REST

Il framework ADO.NET Data Service è uno strato costruito sopra l'Entity Framework che permette di rendere accessibile attraverso un URL con uno stile REST il modello E/R implementato (per approfondimenti sull'entity framework vi consiglio : http://msdn2.microsoft.com/en-us/library/aa697427(VS.80).aspx e http://msdn2.microsoft.com/en-us/library/cc161164(printer).aspx ). In realtà non permette esclusivamente di esporre modelli dell'Entity framework ma di qualunque entità che implementi l'interfaccia IQueryable <T> .

Oltre a fornire le componenti server per esporre via Http con stile REST il modello di entità, il framework offre due nuove API client per semplificare l'accesso ai dati esposti in questa modalità:

- Un libreria JavaScript che estende i namespace della Microsoft Ajax Library (namespace Sys.Data ed in particolare Sys.Data.DataService nella Script Library MicrosoftAjaxDataService.js)

- una libreria .NET pensata per client sia silverlight che .NET Framework per desktop ( namespace Microsoft.Data.WebClient contenuto nelle Extension con particolare riferimento alle classi WebDataContext e WebDataQuery ).

Per poter analizzare più nel dettaglio il funzionamento del framework partiamo con l'implementare un semplice esempio basandoci sull'Entity Framework. In particolare partiremo con il creare un entity data model sul classico database Northwind per poi esporre con un servizio ADO.NET DataService le entità via http e poi accederci utilizzandole due librerie client citate.

I passi da implementare sono essenzilmente i seguenti:

- Creare il Progetto

- Creare l'Entity Model

- Creare il Data Service e Autorizzare gli accessi

Procediamo con la creazione di un nuovo Web Site. Dopo aver avviato il progetto, includiamo un elemento di tipo ADO.NET Entity Data Model lo connettiamo al classico database Nortwind , ottenendo un nuovo modello che utilizzeremo come base per l'esposizione del servizio di accesso ai dati.

Aggiungiamo ora un elemento di tipo ASP.NET Data Service e lo colleghiamo al modello EDM appena creato

ottenendo un servizio come quello che vediamo di seguito:

Si tratta di un servizio che utilizza WCF ed il nuovo supporto REST offerto da .NET 3.5 e attraverso una infrastruttura costruita sopra queste funzionalità basata sulla classe WebDataService, espone il nostro EDM che in questo caso è basata data context NorthwindEntities che abbiamo appena costruito con il tool dell'entity framework e che stiamo indicando con lo specifico generics previsto dalla classe:

.........

public class Northwind: WebDtataService <NorthwindModel.NorthwindEntities>

........

In realtà la classe WebDataService come abbiamo già detto è in grado di gestire qualunque modello che implementi l'interfaccia IQueryable <T>.

Per autorizzare l'accesso alle informazioni esposte dal servizio utiliziamo la classe di autorizzazione appositamente inserita nel servizio , aggiungendo al configurazione sul costruttore del servizio per ottenere l'accesso ai dati di tutti i clienti contenuti nel database nortwind su cui abbiamo costruito il nostro EDM.

Nel nostro piccolo esempio impostiamo l'accesso completo a tutte le risorse presenti nel modello esposto attraverso il servizio:

namespace SimpleDataService {

public class Northwind : WebDataService<NorthwindEntities> {

public static void InitializeService(IWebDataServiceConfiguration config) {

config.SetResourceContainerAccessRule("*", ResourceContainerRights.All);

}

Per poter effettuare un test sul funzionamento del servizio è possibile inviare direttamente con un browser una richiesta GET del tipo seguente:

http://localhost:2759/WebSite1/Northwind.svc/Customers

con la quale otteniamo accesso ai dati di tutti i clienti. Oppure la seguente con cui otteniamo l'accesso ad uno specifico customer:

http://localhost:2759/WebSite1/Northwind.svc/Customers('alfki')

o ad esempio ai suoi ordini:

http://localhost:2759/WebSite1/Northwind.svc/Customers('alfki')/Orders

Per un introduzione sulla sintassi per ADO.NET DataService potete far riferimento a http://quickstarts.asp.net/3-5-extensions/adonetdataservice/SimpleAddressingSchemeForDataWithUniformURLs.aspx

Utilizzando la specifica sintassi prevista dal servizio si possono effettuare query e modifiche ai dati. In funzione del tipo di content type inviato nell'header http è possibile ottenere risposte con serializzazione XML o JSON.

E' possibile anche implementare dei Query Interceptors o Change Interceptor sul WebService per agganciare del nostro codice e gestire specifiche richieste di Query o modifiche. Ad esempio per intercettare e gestire le richieste di Query sui Customers del nostro esempio si dovrà aggiungere il seguente metodo:

[QueryInterceptor("Customers")]
      public IQueryable<Customers> OnQueryOrders(IQueryable<Customers> customerQuery)
    {
        return from o in customerQuery
               where o.ContactName ==HttpContext.Current.User.Identity.Name
               select o;
    }

che fornirà esclusivamente accesso a quei customer dove il contactname corrisponde al nome dell'utente che sta accedendo al servizio. Per il Change Interceptor si utilizzerà l'attributo [ChangeInterceptor("......")] sul metodo Interceptor.

Oltre agli Interceptor è possibile estendere il servizio con dei nostri metodi custom attraverso quello che viene definito un Service Operation. Per aggiungere una Service Operation basta implementare uno specifico metodo come di seguito:

[WebGet]
public IQueryable<Model.Customers> CustomersInCity(string cityName)
{
    return from c in this.CurrentDataSource.Customers
           where c.City == cityName
           select c;
}

Renderlo accessibile con la configurazione delle autorizzazioni:

public static void InitializeService(IWebDataServiceConfiguration config)
{
...
config.SetServiceOperationAccessRule("CustomersInCity", ServiceOperationRights.All);
}

e potrà essere acceduto attraverso il seguente URL:

http://localhost:2759/WebSite1/Northwind.svc/CustomersInCity?cityName='Rome'

Non soltando è possibile esporre dati ma utilizzando delle Service Operetions è possibile anche sfruttare gli attributi [SingleResult] e [MimeType] per realizzare interessanti combinazioni come ad esempio l'esposizione di template HTML collegati ai dati contenuti nel modello:

[MimeType("text/html")]
[SingleResult]
[WebGet]
public IQueryable<string> WelcomePage()
{
    return new string[]
    {
        "<html><head><title>Welcome</title></head>" +
        "<body><h1>Welcome!</h1><p>Currently we have " +
        this.CurrentDataSource.Customers.Count().ToString() +
        " customers.</p></body></html>"
    }.AsQueryable();
}

Accessibili poi con URL di questo tipo:

http://localhost:2759/WebSite1/Northwind.svc/WelcomePage/$value

Ad esempio è possibile anche creare dei Tempale XAML per Silverlight che possono essere direttamente valorizati con dei dati come nell'esempio precedente e poi caricati dinamicamente nell'applicazione RIA client chiamante utilizzando ad esempio una chiamata XmlHttpRequest con la funzione createfromxaml del plugin.

Abbiamo parlato prima delle due librerie client disponibili per l'accesso via JavaScript e via .NET. Per l'utilizzo AJAX sfruttiamo la libreria JS MicrosoftAjaxDataService.js che ci mette a dsiposizione la classe Sys.Data.DataService . Referenziando la libreria :

<asp:ScriptManager ID="ScriptManager1" runat="server">

<asp:ScriptReference Name="MicrosoftAjaxDataService.js" />

</Scripts>

</asp:ScriptManager>

è possibile utilizzare la libreria per effettuare un query sui dati come di seguito:

var northwindService = new Sys.Data.DataService("/Northwind.svc");

northwindService.query("/Customers", onSuccess, onFailure);

Dove onSuccess e onFailure sono rispettivamente i metodi invocati all'arrivo della risposta o in caso di errore :

function onFailure(error, context, operation) {

$get("spanResults").innerHTML = "Error occurred in operation " + operation + ".";

}

function onSuccess(result, context, operation) {

// Get Customers list and put into a table.

var sb = new Sys.StringBuilder();

sb.append("<table>");

var firstRowOutput = false;

for (idx in result) {

var customer = result[idx];

if (!firstRowOutput) { // Display the header row.

sb.append("<tr>"); for (key in customer) {

if (key != "__metadata") {

sb.append("<th>");

sb.append(key);

sb.append("</th>");

}

sb.append("</tr>");

firstRowOutput = true;

} // Display the data.

sb.append("<tr>");

for (key in customer) {

if (key != "__metadata") {

sb.append("<td>");

sb.append(customer[key]);

sb.append("</td>");

}

sb.append("</tr>");

}

sb.append("</table>");

$get("spanResults").innerHTML = sb.toString();

}

La classe mette poi a disposizione le funzionalità per effettuare update ed insert.

Come già in precedenza segnalato è disponibile anche un namespace client .NET (Microsoft.Data.WebClient) per poter accedere con maggiore semplicità da client managed ai dati esposti da un servizio ASP.NET Data Service .

Attraverso la classe WebDataContext si gestisce il contesto verso uno specifico servizio e con la classe WebDataQuery si rappresentano e si eseguono le query verso la sorgente dati rappresentata da un WebDataContext:

WebDataContext ctx = new WebDataContext(http://localhost:51905/nw.svc);

WebDataQuery<Customer> customers = ctx.CreateQuery<Customer>("/Customer");

foreach (Customer r in customers) {

Console.WriteLine(c.CompanyName );

}

La CTP mette a disposizione anche un generatore di codice (WebDataGen.exe) che, partendo dai metadatid el servizio, ci genera un modello ad oggetti che ci permette di utilizzare LINQ per accedere al servizio:

\Program Files\Microsoft ASP.NET 3.5 Extensions\WebDataGen.exe" /mode:ClientClassGeneration /outobjectlayer:northwind.cs /uri:http://localhost:8090/Northwind.svc

Generato il modello con il tool è possibile utilizzare per accedere ai dati del servizio codice come il seguente:

using System;

using Microsoft.Data.WebClient;

using System.Linq;

using NorthwindModel;

namespace TestApplication {

class Program {

static void Main(string[] args) {

NorthwindEntities ctx = new NorthwindEntities(http://localhost:8090/Northwind.svc);

ctx.MergeOption = MergeOption.AppendOnly;

var q = from c in ctx.Customers where c.City == "London" orderby c.CompanyName select c;

foreach (var cust in q) {

Console.WriteLine(cust.CompanyName);

}

La classe NorthwindEntities deriva da WebDataContext e permette di gestire con LINQ un approccio tipizzato.

Sono possibili anche operazioni di update,delete e insert. L'autenticazione sul servizio avviene passando le credenziali con la classica interfaccia ICredentials.

Conclusioni

ADO.NET Data Service fornisce un nuova nuova sofisticata modalità per esporre , consumare sorgenti dati attraverso un approccio REST che consente di costruire con rapidità servizi in grado di supportare con efficacia le esigenze di accesso ai dati nei nuovi scenari Internet con particolare riferimento alle applicazioni RIA.

Per una introduzione alle funzionalità del servizio vi suggerisco il QuickStart online , il blog del team dove troverete anche le novità in arrivo , e segnalo inoltre alcuni video realizzati sull'argomento:

ADO.NET Data Services - Surfacing Data
ADO.NET Data Services - Querying with URI's
ADO.NET Data Services - A Basic .NET Client
ADO.NET Data Services - A Basic AJAX Client
ADO.NET Data Services - A Basic Silverlight Client

        ADO.NET Data Services - Querying with LINQ
        ADO.NET Data Services - Query Interceptors
        ADO.NET Data Services - Service Operations

Pubblicato il codice sorgente di Tafiti ottimo esempio di utilizzo di Silverlight e Windows Live

Giuseppe Guerrasio — Thu, 20 Dec 2007 11:34:26 GMT

Per chi non l'avesse ancora visto sul sito delle Windows Live Quick Apps è stato rilasciato il codice sorgente di Tafiti, ottimo esempio di Silverlight e dell'utilizzo delle API web service di Windows Live. Sul sito dedicato a tafiti da ms live labs potete scaricare il codice sorgente.

Le 10 cose da conoscere su Silverlight per un CIO

Giuseppe Guerrasio — Sat, 22 Sep 2007 16:00:00 GMT

Articolo interessante dal CIO magazine che elenca le 10 principali caratteristiche di Silverlight che un CIO ha bisono di conosce per capire il ruolo di Silverlight all'interno dei nuovi scenari Web.

Rilasciato Silverlight 1.0 e annunciato per Silverlight il supporto per Linux

Giuseppe Guerrasio — Wed, 05 Sep 2007 13:49:00 GMT

Post sul blog di Scott che annuncia il rilascio e i piano per il supporto per Linux in collaborazione con Novell:

Alcuni siti già online con la RTM tra cui :

MLB.com (Major League Baseball),

Halo 3 preview site (click here for the awesome HD version),

Tafiti.com, MSN Extra, and MSN Podium '08.

per una carrellata di click su Showcase e presto arriveranno anche msn. e microsoft.com .

Per partire ad utilizzare Silverlight per lo sviluppo: GetStarted