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 :
<Button x:Name="button" >
<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à .
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 .
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:
<Canvas
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”550″ Height=”550″>
<Grid>
<TextBlock Text=”Loading: 0%” x:Name=”testo”/>
</Grid>
</Canvas>
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.
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.
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 .
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 .
Una delle attività più interessanti che mi è capitato di seguire negli ultimi mesi è collegata alla revisione architetturale che Yoox Group ha avviato sui suoi servizi e siti Internet.
YOOX Group è il partner globale di Internet retail per i principali brand di moda & design: l’unica azienda di retail su Internet sia multimarca – con la boutique virtuale YOOX.COM, sia monomarca – con i flagship store online sviluppati da YOOX Services.
Nato nel 2000 ha avviato un nuovo modello di business con la boutique virtuale N° 1 al mondo YOOX.COM, che ha contribuito pionieristicamente a creare lo shopping di moda online nel nostro Paese.
L’infrastruttura globale sincronizzata su tre continenti, insieme all’esperienza accumulata in questi anni, hanno portato all’apertura nel 2006 di YOOX Services, società di YOOX Group che progetta e gestisce gli online store per conto dei principali brand di moda & design. YOOX Services realizza i flagship store dei principali brand della moda & design che intendono offrire online la stessa collezione disponibile attualmente nei negozi.
Attualmente i flagship store online monomarca “powered by YOOX” sono: www.marni.com, www.emporioarmani.com, www.diesel.com, www.cpcompany.com, www.stoneisland.com e presto saranno annunciati molti altri virtual store dei principali brand del lusso.
A questi si è aggiunto il nuovissimo THECORNER.COM “powered by YOOX”, un department store online completamente dedicato alle nuove collezioni di designer internazionali ”cutting edge” e a brand italiani di ricerca ognuno con un “corner” dedicato.
Una case history di successo se guardiamo i numeri di YOOX.COM: un sito localizzato in 7 lingue con più di quattro milioni di visitatori al mese e più di un milione di capi consegnati in tutto il mondo nel 2007 in 53 paesi.
Dal punto di vista tecnico la necessità di dover passare da un singolo Internet retailer ad una nuova serie di siti monobrand ha comportato la necessità di una profonda revisione dell’architettura su cui yoox services implementa le soluzioni Internet. I piani di Yoox Group, infatti, prevedono lo sviluppo di un numero significativo di siti monbrand o specialistici e pertanto la nuova piattaforma tecnologica per Yoox Service dovrà prevedere la possibilità di implementare e gestire con sempre maggiore velocità nuove tipologie di siti.
Dal punto di vista architetturale Yoox Services si è trovata di fronte all’esigenza di muovere la propria soluzione per yoox.com da un sito di e-commerce ad una vera e propria piattaforma che possa permettere la costruzione e la gestione di “n” siti, mettendo a fattor comune un insieme di servizi di base con lo scopo di semplificare lo sviluppo , manutenzione e sfruttamento dell’hardware, ma permettendo al tempo stesso il necessario isolamento tra i siti, la flessibilità per gli elementi di interfaccia utente e la costruzione dei contenuti di ciascuno store virtuale, garantendo allo stesso tempo la necessaria scalabilità rispetto al volume di richieste già oggi elevato sul solo Yoox.com.
Per rispondere a queste esigenze Yoox Group ha quindi avviato uno studio per l’implementazione di una nuova piattaforma che viene da identificata con il termine OSS (ONLINE STORE SERVICES) per rispondere alle nuove esigenze del gruppo e garantire gli stessi livelli di qualità , scalabilità e costi offerti dalla soluzione che ha contribuito in modo determinate al successo di Yoox.com.
La nuova architettura è divisa in due componenti fondamentali: una componenti di front-end che si preoccupa di gestire acquisizione di ordini e gestione del sito (catalogo, profili, carrello, pagamenti, etc) ed una componente di back-end che riceve gli ordini attraverso un un meccanismo di code asincrone dove attraverso Microsoft BizTalk e Microsoft Navision vengono gestite le interazioni con i partner , le operazioni logistiche di spedizione e la fatturazione.
La componente di front-end prevede una parte di user interface (UI) , una serie di Web Service per erogazione di servizi a siti terzi (ad esempio il catalogo) ed alle componenti lato client della UI (JS AJAX, FLASH, SILVERLIGHT, WPF\.NET) , una parte di servizi con la logica delle operazioni del sito e uno storage per i dati.
I principi architetturali che guidano il rifacimento della componente di front-end che si è deciso di seguire per l’evoluzione dal mono sito a multi sito possono essere rappresentati come indicato nella seguente figura:
L’idea guida di base è quella di passare da un’architettura single-tenant dove ciascuna istanza dei siti è implementata con una singola soluzione adhoc\custom ,ad una piattaforma che ricalchi la struttura di base dei servizi offerti attualmente in yoox.com, fornendoli con una architettura multi-tenant scalabile e configurabile. I principi architetturali impostati partono dalle idee impostate per le architetture SaaS e quindi gran parte delle impostazioni sulle architetture multi-tenant indicate ottimo documento di Carraro e Chong sull’argomento, ma vengono riadattati alle forti esigenze di flessibilità sugli aspetti di personalizzazione del front-end ed di gestione dei contenuti dello stesso necessari ad una applicazione di questo tipo.
Dal punto di vista tecnologico nell’implementazione della nuova architettura in corso di sviluppo Yoox ha scelto di utilizzare nelle componenti fondamentali la piattaforma Microsoft: Windows Server 2008 con IIS7 come piattaforma Web Server, SQL Server 2008 come storage e .NET 3.5 come framework di sviluppo con Visual Studio Team System e Team Foundation Server per l’implementazione della software factory, Navision e Microsoft BizTalk Server nelle componenti di back-end.
Ulteriore vincolo per la nuova architettura consiste nella necessità di migrare per step successivi anche il sito principale yoox.com e di garantire,quindi, una completa continuità di funzionamento. Proprio per questo motivo la migrazione dalla precedente architettura single-tenant basata su ASP/COM sta procedendo per step che prevedono come prima parte la costruzione dei nuovi servizi e l’aggancio di questi alla attuale interfaccia. Terminata la costruzione dei nuovi servizi, verrà anche migrata la tecnologia utilizzata per la parte di interfaccia utente.
Data la particolarità della natura dei siti, infatti , la profonda necessità di personalizzazione delle componenti di UI è una delle caratteristiche che a spinto Yoox alla decisione di mantenere quest’ultimo aspetto sviluppato ad hoc per ogni tenant. In particolare , oltre alla classica interfaccia HTML sono previste anche interfacce di tipo differente tra cui piccoli smart client residenti sul desktop che offriranno agli utenti la possibilità di un interazione più semplice con il catalogo del sito. Anche le componenti di UI di gestione del sito sono costruite con interfacce smart client.
L’architettura principale del nuovo front-end multi sito di YOOX può quindi essere rappresentata come di seguito:
Le interfacce utente di ciascun tenant\sito accedono ai sevizi forniti dal OSS fornendo sempre un parametro che identifica il tenant stesso e ottenendo in questo modo l’accesso alla logica ed ai dati necessari al funzionamento della specifica istanza. Con questo tipo di approccio, ciascun elemento applicativo può scalare con un approccio orizzontale che comporta la semplice aggiunta di macchine fisiche o virtuali all’architettura su tutti gli strati applicativi , compresa la parte di dati. Anche a questo livello, infatti, viene utilizzato un partizionamento dei dati rispetto alle istanze che identificano i tenant . Questo approccio consente di suddividere i dati in differenti database che possono anche essere ospitati su macchine fisiche o virtuali diverse in funzione delle esigenze di scalabilita. Lo strato di accesso ai dati dei servizi conterrà la logica necessaria ad individuare la partizione corretta in base all’identificativo del tenant\ sito fornito dal chiamante :
Per un chiarimento sul tema del partizionamento dei dati vi rimando ai post fatti in passato sull argomento la scalabilità ed il partizionamento in entità parte 1 e parte 2 . Il disaccoppiamento tra front-end e back-end attraverso l’utilizzo di una coda fa si che il carico prodotto nell’inserimento di ordini o dalla navigazione degli utenti, non si rifletta direttamente sulle componenti che gestiscono le fasi di fatturazione e gestione logistica e di spedizione.
I servizi sono sviluppati con tre differenti interfacce per permettere sia l’interazione con le pagine ASP (COM), sia l’interazione con componenti .NET in process , sia una interfaccia REST con XML o JSON . In questo modo ciascun servizio può o essere direttamente posizionato sulle macchine di front-end per essere consumato da UI HTML o per poter essere eventualmente esposto verso altre applicazioni ad estensione delle potenzialità della piattaforma stessa.
La maggior parte dei servizi utilizza WCF (Windows Communication Foundation) per esporre una parte delle interfacce di accesso e nello strato di accesso ai dati sfruttano le nuove funzionalità offerte da LINQ.
La struttura complessiva del sito può essere quindi rappresentata come di seguito:
Filed under: VSTS, Software Factories, SOA, Web 2.0, Visual Studio, WPF, .NET, ORM, TFS, REST, ASP.NET, BPM, Orcas, Architecture, Smart Client, Silverlight, IIS7
Sono online le sessioni dell'evento The Web Next Now tra cui la mia sessione "Costruire Rich Internet Applications con Microsoft Silverlight 2" . Per le slide trovate i link nel seguente post.
![clip_image001[3]](http://blogs.msdn.com/blogfiles/giuseppeguerrasio/WindowsLiveWriter/SilverlightelenuoveapplicazioniRIAServiz_83E0/clip_image001%5B3%5D_thumb.jpg)
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.
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.
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 .
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.
Disponibili online le sessioni del lancio. In particolare disponibile anche video e slide della sessione che ho preparato con Mario Fontana e Mauro Minella sul tema Visual Tools For Office da titolo
"Sviluppo di applicazioni per Microsoft Office System"
Una delle tendenze più rilevanti nell'evoluzione dei contenuti nel mondo del Web è sicuramente rappresentata dall'enorme crescita dei contenuti video che oramai sta investendo siti di ogni dimensione. Si va dalla possibilità di ospitare materiale video generato dagli utenti, news, film , trailer.
Erogare contenuti video è estremamente costoso in termini di consumo di banda e gli scenari attraverso i quali viene generalmente affrontata questa tematica sono essenzialmente di tre tipi:
- Hosting dei contenuti video presso strutture terze specializzate nella distribuzione di questo tipo di contenuti attraverso CDN (Content Delivery Network) specifiche
- Infrastruttura di streaming installata nella server farm
- Download progressive , ovvero distribuzione del file attraverso un server web
La piattaforma Microsoft offre una soluzione per tutti e tre gli scenari :
- Silverlight Streaming che offre una CDN per la distribuzione di contenuti video e di applicazioni Silverlight in generale
- Windows Media Services per Windows Server 2008 che forniscono una piattaforma di streaming integrata in Windows Server con completo supporto per il DRM
- IIS 7 Media Pack che offre nuove funzionalità ad IIS7 per gestire gli scenari di download progressive , da poco disponibile nella versione finale.
Uno degli scenari tipici, in particolare per la distribuzione di video di piccole dimensioni è lo scenario di download progressive, dove il file viene posizionato semplicemente sul server web, mentre lo streaming viene utilizzato in scenari più complessi o per scenari in cui vengono trasmessi video in diretta. Nel download progressive, non abbiamo le ottimizzazioni sulla banda offerte dal server di streaming , il consumo di banda è elevatissimo in quanto il server web effettua il download del file verso il player client utilizzatore, sfruttando completamente la banda disponibile, indipendentemente dal bit rate con cui il video è codificato per la visualizzazione. Inoltre, nella maggioranza dei casi, l'utente guarda solo i primi secondi del video che nel frattempo va in download a banda completa praticamente inutilmente.
Nel nuovo Media Pack per IIS7 troviamo le funzionalità di BitRate Throttling che consentono di gestire gli scenari di download progressive, permettendo di ottimizzare il consumo di banda in modo configurabile sulla base del reale formato di codifica del file, ed a garantire un maggior numero di connessioni contemporanee possibili. Tra le caratteristiche fondamentali del nuovo supporto il media pack installa un modulo che permette di effettuare il download del file in base al bit rate di encoding. La risposta ed il funzionamento del modulo è completamente configurabile dal livello del server web, fino ad arrivare al livello del singolo file.
La lista dei formati supportati è la seguente:
- .asf
- .avi
- .flv
- .m4v
- .mov
- .mp3
- .mp4
- .rm
- .rmvb
- .wma
- .wmv
E' possibile estendere il Media Pack per supportare ulteriori formati.
Per installare il MediaPack Bit Rate Throttling potete trovare qui il setup:
Per dimostrare la funzionalità del media pack e la semplicità di configurazione ed utilizzo, ho effettuato un piccolo test installandomi una macchina di prova. Sulla root del sito ho posizionato un file di esempio;
E l'ho pubblicato con la funzionalità di throttling disabilitata a livello del server web:
Di seguito potete vedere l'andamento del consumo di banda realizzato durante la riproduzione del video:
Il Media Pack per configuare il Bit Rate Throttling offre una interfaccia completamente integrata nell'ambiente di amministrazione di IIS7
Dall'interfaccia provvedo ad abilitare la funzionalità :
ed in particolare di seguito vediamo la configurazione impostata per i file di tipo .wmv:
Con la configurazione impostata , i primi 20 secondi necessari per l'avvio rapido del filmato verranno forniti a banda completa (FastStart) , successivamente il download avverrà al 100% (Throttle Rate) del bitrate di encoding del video che nel nostro esempio è di 300kps.
La funzionalità di Bit Rate Throttling può anche essere applicata ad altri tipi di contenuti , configurando la parte data dell'entry e stabilendo quindi il la banda assegnata per il download
Effettuado nuovamente il play del video l'andamendo del consumo di banda in questo caso avrà un andamento che è il seguente:
Contribuendo significativamente ad ottimizzare il consumo di banda , ed a garantire un maggior numero di connessioni contemporanee possibili.
Per uteriori informazioni vi suggerisco i seguenti walkthrough:
Tra le altre caratteristiche offerte da IIS7 all'interno del Media Pack vi segnalo anche la possibilità di costruire delle playlist server side anche per i contenuti in download progressive, funzionalità utile ad esempio per costruire playlist introducendo contenuti pubblicitaril. Informazioni e Walkthrough di utilizzo qui .
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.
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 .
Una delle più interessanti possibilità di Internet che oramai diamo per scontato è rappresentata dal fatto di avere un unico protocollo di rete unificato che , di fatto, garantisce la possibilità a qualunque macchina di poter colloquiare con qualunque altra macchina collegata alla rete. Anche a livello di applicazioni, la standardizzazione del Web e dei suoi protocolli come meccanismo di esposizione e condivisione di informazioni ha reso possibile la costruzione di una enorme quantità di applicazioni e di siti , raggiungibili attraverso modalità completamente standardizzate. Uno degli aspetti che resta ancora complesso e che comporta una notevole difficoltà nell'integrazione tra i siti e nell'utilizzo delle risorse esposte su Internet è rappresentato dagli aspetti collegati alla sicurezza . Siamo ancora in presenta di una ampia gamma di differenti modalità di autenticazionzione ed autorizzazione, non integrabili tra loro con semplicità, che costringento utenti ed applicazioni a gestire differenti modalità di autenticazione, impedendo di fatto la semplice costruzione di applicazioni che possano condividere e aggregare servizi offerti da siti differenti, frenando la possibilità di far evolvere Internet in una vera e propria piattaforma applicativa. Per materializzare la visione del Sofware + Service e rendere di fatto Internet una piattaforma di servizi componibili con il software locale alle nostre reti aziendali o di altri siti o servizi web, o direttamente utilizzabile on line come servizio, avere una piattaforma comune per i meccanismi di sicurezza e autorizzazione costituisce un vincolo di base.
Tra le princiopali iniziative portate avanti da un ampia gamma di vendor tra cui spiccano Microsoft ed IBM, per risolvere questa problematica ci sono le proposte di standard collegate a WS-Security. Per quanto riguarda Microsoft oltre alla collaborazione negli enti di standardizzazione per la proposizione degli standard , l'obiettivo degli ultimi anni è stato quello di lavorare in tutti i prodotti, tecnologie e servizi per applicare realmente gli standard proposti. In particolare nell'area dell'identity management un ampia iniziativa è stata messa in campo con l'identity metasystem e le sue 7 leggi fondamentali che per l'appunto mirano a garantire il massimo dell'interoperabilità e della semplicità di utilizzo da parte degli utenti di questi aspetti che sono fondamentali per garantire la possibilità di far evolvere Internet in una vera e propia piattaforma applicativa. Una componente importante della piattforma di servizi è rappresentata da Window Live Id che fornisce la base per i meccanismi di Autenticazione ed Autorizzazione per l'intera piattaforma di servizi on line di Microsoft e dei siti affiliati.
In un precedente post ho illustrato gli elementi fondamentali per poter agganciare l'autenticazione di Windows LiveID ad un nostro sito web utilizzandolo come provider di autenticazione. Nel post avevo anche indicato la possibilità ed il supporto di questo servizio ai meccanismi di federazione con altri sistemi di autenticazione attraverso WS-Federation , passo importante per materializzare il Digital Identity Metasystem , ed ho ricevuto una serie di richieste di approfondimento su questo aspetto da molte persone. WS-Federation è uno standard per permettere la federazione di sistemi di autenticazione differenti , consentendo di semplificare l'integrazione delle funzioni di autenticazione ed autorizzazione tra applicazioni e servizi che sono di aziende differenti o che comunque utilizzano differenti meccanismi e servizi di per gli aspetti di accesso, permettendo di implementare meccanismi di single sign-on tra sistemi di autentizione eterogenei .
WS-Federation pervede due profili: il profilo che prevede l'autenticazione di client Web di tipo Browser che viene genericamente indicato come profilo passivo ed il profilo attivo in cui abbiamo dei client di tipo diverso dal browser (smart client ) che accedono a dei web service che richiedono una autenticazione. Il profilo passivo di WS-Federation (quello riferito all'accesso via browser alle applicazioni Web) è anche supportato direttamente da active directory da Windows 2003 R2 in poi con gli Active Directory Federation Service che permettono la federazione di un dominio windows con altri sistemi che supportano lo stesso standard.
Windows Live ID è un Identity Provider nell'accezione prevista da WS-Trust e WS-Security. I siti ed i web service che vogliono utilizzare Windows Live ID come provider di autenticazione vengono genericamente indicati come Resource Provider (RP). Tutti i siti ed i servizi offerti da Microsoft utilizzano Windows Live ID come provider di autenticazione ed è possibile per qualunque sito o servizio Intenet, utilizzare Windows Live ID come provider di autenticazione, senza la necessità di condividere le informazioni di profilo degli utenti con il servizio. Nel momento in cui un client richiede una risorsa offerta da un resource provider che utilizza Live Id come provider di autenticazione , il client viene rediretto sul servizio di Live Id che provvede a verificare e credenziali del client chiamante ed a fornire le informazioni necessarie per accedere al servizio. Come abbiamo visto nel post precedete Live Id supporta la protezione di resource provider web sia nel caso di accesso da parte di client di tipo Browser che accede ad un sito web protetto sia il caso di smart client che accedono ad un web service. Le informazioni sull'integrazione dei due tipi di scenario sono contenute rispettivamente nel Web Client SDK e nel Smart Client SDK. Schematizzato ad alto livello il processo di autenticazione può essere rappresentato come di seguito:
1- Il client richiede accesso al Resource Provider
2- il client viene rediretto sull'Identity Provider e gli viene fornito un "security token" per l'accesso al resource provider
3- Il client torna dal resource provider presentando il security token, ottenendo l'accesso
Attraverso la federazione è possibile gestire lo scenario in cui Windows Live Id si integra con un altro Identity Provider (IP), permettendo di realizzare una "relazione di fiducia" (Trust) tra i due IP che permetta di rimappare l'identità autenticata da un IP su un' identità gestita dall'altro. A seconda delle necessità e degli accordi il Trust pò essere effettuato in modo unidirezionale o bidirezionale. Con questo scenario un utente che ha le credenziali per autenticarsi su un IP , per accedere alle risorse protette da un altro IP può farlo senza la necessità di creare e gestire una nuova identità presso il secondo IP. Cerco di chiarire questa possibilità con un esempio. Proviamo ad immaginare un ipotetico sito Internet alfa.com che dispone già di un suo IP che è ingrado di autenticare gli utenti che accedono al sito che verranno identificati come nomeutente@alfa.com . Il sito alfa.com vuole introdurre alcuni controlli di Windows Live e integrarli all'interno delle pagine del sito e vuole fare in modo che gli utenti che sono già autenticati dal suo IP non debbano inserire le credenziali di Windows Live ID per accedere ai servizi, ma possano essere direttamente riconosciuti con le credenziali di alfa.com anche quando, ad esempio, accedono alla cassetta postale su Windows Live Mail . La federazione e lo standard WS-Federation rendono possibile proprio la gestione di questo tipo di scenari facendo in modo che le credenziali autenticate da un IP possano essere rimappate su un altro IP.
Lo scenario non si limita ovviamente ad un sito, ma è possibile ad esempio federare direttamente l'identity provider di un azienda con Live Id garantendo la possibilità per questa azienda di integrare le sue applicazioni con i servizi di Microsoft ottenendo un modello di sicurezza affidabile ed omogeneo con estrema semplicità, senza costringere gli utenti a gestire differenti identità. Ad esempio gli utenti interni potrebbero avvalersi di Windows Live Mail utilizzando direttamente le credenziali con cui si collegano alla rete interna, senza doversi autenticare nuovamente con credenziali diverse per accedere a questi servizi. Gli utenti della Intranet potrebbero usare alcune funzionalità di Office Live , senza doversi riautenticare, e così via per tutti gli altri servizi che sono disponibili nell'offerta online, rendendo di fatto possibile materializare la visione di internet come piattaforma che può essere combinata con i software locale alle reti ad al device client.
Nel caso del nostro sito di esempio alfa.com immaginiamo di avere un utente che si collega direttamente alla sua e-mail su Windows Live mail. Il resource provider di Live Mail non riconosce l'utente e lo indirizza verso l'IP di Windows Live ID , responsabile del riconoscimento degli utenti per il sito di Live Mail. All'utente viene presentata l'interfaccia per l'autenticazione e l'utente ha la possibilità di selezionare un differente IP specificando il suo nome di utente numeutente@alfa.com . A questo punto Windows Live ID redirige la richiesta sul provider di autenticazione con cui è federato di alfa.com dove l'utente può essere autenticato con il meccanismo previsto da alfa.com. Ottenuta l'autenticazione , la richiesta torna su Windows Live Id che estrae e verifica il security token rilasciato da alfa.com e cifrato con la chiave privata del certificato digitale di alfa.com e la rimappa su un utente Windows Live Id, rilasciando il security token opportuno con cui il browser client attraverso una redirect si ripresenta da Windows Live Mail , ottenendo l'accesso.
1- Il client richiede l'accesso ad una risorsa su Windows Live ID
2- Viene rediretto su Live Id e viene presentata l'interfaccia per l'autenticazione e l'utente ha la possibilità di selezionare un differente IP specificando il suo nome di utente numeutente@alfa.com
3- La richiesta viene rediretta su alfa.com dove l'utente può essere autenticato con il meccanismo previsto da alfa.com
4 - La richiesta viene rediretta su Windows Live ID che estrae e verifica il security token rilasciato da alfa.com e cifrato con la chiave privata del certificato digitale di alfa.com e la rimappa su un utente Windows Live Id, rilasciando il security token opportuno
5- client attraverso una redirect si ripresenta da Windows Live Mail , ottenendo l'accesso.
Abbiamo schematizzato il comportamente in caso di client Browser (profilo passivo ) , un approccio simile si realizza anche nel caso di profili attivi ovvero smart client che accedono a Web Service.
Per chi volesse approfondire l'argomento segnalo un articolo pubblicato di recente su MSDN che introduce le possibilità di federazione di LiveId: Windows Live ID Federation da leggere dopo il documento di
Introduzione a Windows Live ID
