Ucaya Blog

Serialisation webservices Proto Buffer et client Silverlight

Thierry Bouquain — Tue, 01 Sep 2009 10:47:46 GMT

Un de mes amis m’a conseiller de jeter un oeil à la sérialisation Proto Buffer. Elle est rapide et légère. Idéale donc pour la consommer par webservice. Il existe plusieurs implémentation pour c#, je me suis intéressé à protobuf-net. Pour une comparaison des performances par rapport à du BinaryFormatter du Soap ou du Json, vous pouvez vous rendre sur cette page.

Utilisation avec WCF

Dans mes premiers tests, je voulais remplacer le DataContractSerializer de mes ServiceContract par le serializer protobuf-net, malheureusement le support de WCF de silverlight est assez léger et il n’est actuellement pas possible de le faire. Dans ses exemples protobuf-net contient un serveur et client RPC. J’ai donc configuré WCF avec une adaptation de ce serveur RPC et remplacé le client généré par le wizard de visual studio par le client protobuf-net.

Côté serveur

Pour avoir un serveur RPC compatible avec l’exemple fourni par protobuf-net, il faut rajouter à WCF un OperationSelector routant les urls entrantes vers le bon service contract. J’ai réalisé un EndPointBehavior paramettrant tout ça. La configuration ressemble à ceci:

    <system.serviceModel>

        <extensions>

<behaviorExtensions>

<add name="protoRPC" type="ProtoBuf.RPC.ProtoRpcEndpointBehaviorSection,
protobuf-wcf, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"/>

</behaviorExtensions>

        </extensions>

        <behaviors>

<endpointBehaviors>

<behavior name="rpcBehavior">

<protoRPC/>

</behavior>

</endpointBehaviors>

        </behaviors>

        <services>

<service name="SilverlightApplication4.Web.TestService">

<endpoint address="" binding="webHttpBinding" contract="TestServices.ITestService" behaviorConfiguration="rpcBehavior"/>

</service>

        </services>

    </system.serviceModel>

La classe implémentant le ServiceContract doit également autoriser toutes les urls:

    [ServiceBehavior(AddressFilterMode = AddressFilterMode.Any)]

    public class TestService : ITestService

    {

        #region ITestService
Members

        public TestServices.Customer DoWork(string a, TestServices.Customer c)

        {

            return TestServices.Customer.Invent();

        }

        #endregion

    }

J’ai choisi d’externaliser le ServiceContract dans une interface pour pouvoir générer simplement un client dans la partie Silverlight. Voici à quoi il ressemble:

    [ServiceContract]

    public interface ITestService

    {

        [OperationContract(Action = "dowork")]

        Customer DoWork(string a, Customer c);

    }

Côté Silverlight

Pour fonctionner avec Silverlight, il a fallu que je corrige un bug dans les sources de protobuf-net. Les classes temporaires de sérialization générées par protobuf-net sont privées et Silverlight ne permet pas de faire de réflection sur celles-ci. Il faut les mettres en internal.

DataContracts

Dans l’implémentation de mon exemple, j’ai isolé mes datacontracts dans une assembly séparée. J’ai créé la même assembly pour Silverlight en référençant simplement les fichiers par liens, ce qui me permet de n’avoir qu’une seule version de ces fichiers. Pour ceux qui ne saurait pas comment faire et pour éviter de perdre 2 heures à chercher, il suffit lorsque vous ajouter un élément à la solution de cliquer sur la petite flêche à côté du boutton Add et de choisie Add as link.

Génération du client

Nous voici donc avec la même assembly que côté serveur, mais compilée au format Silverlight. Cette assembly contenant notre interface de ServiceContract, nous allons rajouter dans la version Silverlight la génération du client. J’ai fais cette génération par l’utilisation des fichiers t4. Il suffit de copier coller le fichier .tt qui se trouve dans la solution et de le nommer du nom du fichier qui contient l’interface de ServiceContract pour que la génération s’effectue (ici ITestService.tt). La génération utilise le FileCodeModel pour déterminer les Méthodes de l’interface à implémenter dans le client. Le client généré contient des fonctions d’appels asynchrones et les événements completed qui correspondent.

Utilisation

L’utilisation de notre client reste aussi simple que l’utilisation d’un client WCF silverlight standard.

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            ITestServiceClient client = new ITestServiceClient(new Uri("../", UriKind.Relative));

            client.DoWorkCompleted += new EventHandler<ITestServiceClient.DoWorkResultEventArgs>(client_DoWorkCompleted);

            client.DoWorkAsync("aazer", Customer.Invent());

        }

        void client_DoWorkCompleted(object sender, ITestServiceClient.DoWorkResultEventArgs e)

        {

            var r = e.Result;

        }

Il y a plusieurs façons d’instancier le client. Tout dépend d’où vos webservices se trouvent.
Le constructeur par défaut va chercher un webservice se nommant du même nom que l’interface de service contract sans le I se trouvant de le même dossier que votre .xap. Sur une surcharge du constructeur, vous pouvez spécifier soit une Url donnant le dossier dans lequel va se trouver le webservice ou alors un url d’appel direct vers le fichier svc.

Les sources

France Télévisions – L’info en vidéo

Romuald Boulanger — Mon, 08 Jun 2009 21:03:08 GMT

Et une nouvelle version pour l’application L’info en vidéo.

Maintenant vous avez accès aux Directs !

Une nouvelle entrée “Evenements” dans le menu donne accès à tous les directs. Et lorsqu’une catégorie du menu contient un direct, un picto rouge vous l’indique.

SLMedia et Smooth Streaming

Thierry Bouquain — Mon, 08 Jun 2009 17:41:52 GMT

Comme les français ont put le voir avec Roland Garros, le Smooth Streaming permet de diffuser des flux de grande qualité qui vont s’adapter à la connexion et à la puissance de la machine et de pouvoir faire du timeshifting (contrôle du direct) sur les emissions live.

Smooth Streaming c’est quoi ?

Le smooth streaming n’est pas un format de compression de video. C’est une technologie de diffusion qui permet de découper la vidéo et le son en morceaux de 2 secondes et diffuser le tout par http. La vidéo étant encodé en plusieurs niveau de qualité, nous obtenons des échantillons de différents poids qui vont être mis à disposition sur un serveur web.
La partie client web (silverlight) va récupérer ces différents paquets et les mettre bout à bout pour reconstituer le flux vidéo. L’application silverlight récupérera le paquet de poids correspondant au mieux à la qualité de la connexion à internet.
Pour la partie diffusion en live, un ou plusieurs encodeur envoyent au serveur web ces paquets de 2 secondes au fur et à mesure qu’ils sont reçu de la source et encodés.
Pour silverlight 2, la vidéo est au format VLC1 et nous devrions avoir droit au H264 avec silverlight 3.
Le découpage en paquets et la diffusion au format HTTP permettent de tirer partie des différents Cache HTTP qui existent sur internet.

Côté serveur

La diffusion des flux smooth streaming nécessitent des composants côté serveur. Actuellement, IIS7 est la seule plateforme supportant la diffusion de ce format. Deux versions existent. La première vous permet de diffuser des vidéos préenregistrées au format smooth streaming et la deuxième encore en beta permet la diffusion de flux live.

Côté client

Silverlight est actuellement le seul moyen de lire de la vidéo en Smooth Streaming. Des exemples existent pour Silverlight 2 et Silverlight 3.

Encodeur

Pour encoder des vidéos préenregistrées, vous devrez passer par Microsoft Expression Encoder SP1. Pour les flux live, des encodeurs hardwares sont en cours de développement. Pour Roland Garros, c’est la société Inlet qui les a fourni. Vous pouvez cependant simuler un flux live à partir d’une vidéo préencodée en Smooth Streaming. Allez sur le site officiel et téléchargez le starter kit. Vous trouverez 2 exécutables PushEncoder32.exe et PushEncoder64.exe qui poussent votre vidéo préencodée sur le point de distribution live.

SLMedia

La librairie de décodage du flux smoothstreaming (Microsoft.Web.Media.SmoothStreaming.dll) est récupérable dans le player d’exemple silverlight du starter kit.

Pour cet exemple, je vais réutiliser le VideoPlayer d’un précédent billet.
L’assignation d’une vidéo à un MediaElement ne se fait pas de la même manière que la video soit du smooth streaming ou non. Pour gérer ceci, la notion de VideoSourceAdapter et VideoAdapter a été ajoutée à SLExtensions. Le VideoSourceAdapter va instancier la bonne source en fonction de l’url de la vidéo. La première chose à faire dans le projet est de référencer le projet SLMedia.SmoothStreaming et d’initialiser le SmoothStreamingVideoSourceAdapter. Il suffit de rajouter la ligne ci-dessous au constructeur de la classe App.xaml.cs.

            SLMedia.SmoothStreaming.SmoothStreamingVideoSourceAdapter.Initialize();

Ensuite, changez le binding sur le source du MediaElement et l’url de la video.

        <MediaElement x:Name="mediaelement" 

                    slvideo:VideoSourceAdapter.Source="{Binding Path=CurrentItem.SourceUri}"

                    slvideo:VideoController.MediaElement="{StaticResource controller}"

                    IsMuted="{Binding Path=IsMuted}"

                    Volume="{Binding Path=Volume}"

                    AutoPlay="{Binding Path=AutoPlay}"    

                    />

            controller.Playlist.Add("http://localhost/live.isml/Manifest");

Attention, le chemin d’accès au Manifest est sensible au crossdomain. Pensez à autoriser votre player à accéder à la video si le player n’est pas dans le même domaine (crossdomain.xml)

Poussez votre video en live PushEncoder64.exe http://localhost/live.isml "Big Buck Bunny.ism" et lancez votre player. Vous devriez voir la video. Si vous voulez un contenu préencodé, téléchargez la video Big Buck Bunny ici.

Par défaut, la lecture du flux commence toujours au début de la vidéo qui a été encodée. Si vous voulez rejoindre le direct, vous pouvez appeler la fonction GoToLive du VideoAdapter ou créer un mediaitem de type LiveVideoItem et lui assigner sa propriété JoinLive.

        void Page_Loaded(object sender, RoutedEventArgs e)

        {

            controller.Playlist.Add(new LiveVideoItem

            {

                Source = "http://localhost/live.isml/Manifest",

                JoinLive = true

            });

            controller.Next();

        }

la timeline pour le Live Smooth Streaming

Pour les événements live, les informations de position ne démarrent pas forcément à 0. Il faut changer la déclaration des bindings du slider pour tenir compte des propriétés Start et LivePosition.

            <slec:Slider Maximum="{Binding Path=VideoAdapter.LivePosition, Converter={StaticResource timeSpanConverter}}"

                        Minimum="{Binding Path=VideoAdapter.Start, Converter={StaticResource timeSpanConverter}}"

                        MoveValue="{Binding Converter={StaticResource timeSpanConverter}, Mode=TwoWay, Path=Position}"

                        Width="200" Margin="20,0,0,0"

                        />

Quelle représentation pour la timeline

Un slider simple

Ce contrôle est utilisé dans le majorité des players vidéos disponible sur internet. Il se prête bien pour des vidéos de taille connues et relativement petites. Dans le cas de diffusion de flux live, la taille du slider ne représente pas toujours la même durée. Au bout d’une heure d’émission, amener le slider au milieu reculera d’une demi heure alors qu’au bout d’une journée on reculera d’une demi journée.

Un “slider inversé”

Le marqueur au milieu indique la position de lecture. La barre orange indique la durée de la vidéo. Cette barre grandit au fur et à mesure que le flux live est émis. Quand l’utilisateur regarde en live, la barre orange s’agrandit vers la gauche et rien ne dépasse à droite du marqueur.
Si l’utilisateur met en pause, le barre s’agrandit à droite du marqueur montrant qu’on est plus en live et indique la durée du décalage par rapport au live.
Quand la lecture reprend, la barre regrandit à gauche.

Contrairement au slider simple, ce type de contrôle permet d’avoir une échelle de temps constante tout au long de la diffusion. Lorsqu’on déplace la timeline, c’est la barre orange qui se déplace, le marqueur reste toujours au milieu. Peut être un peu déroutant au départ, un utilisateur en comprendra vite la logique

Un slider sur une ligne de temps

C’est ce qui a été utilisé pour Roland Garros, une barre de temps représente la journée entière. La taille du slider grandit au fur et à mesure du live. Le slider garde une échelle constante mais est quasi invisible au départ. Le principe de déplacement du curseur est préservé.

N’oubliez pas de télécharger les sources de SLMedia sur le site de slextensions.

SLMedia le player Photo / Video de SLExtensions

Thierry Bouquain — Mon, 08 Jun 2009 11:16:46 GMT

Les librairies SLMedia regroupent tout ce qu'il vous faut pour gérer vos galeries photos et vidéo. Ces librairies sont séparées en plusieurs dlls gérant chacune un type de média.

SLMedia.Core : Librairie centrale prenant en charge les fonctions communes.
SLMedia.Picture : Librairie vous permettant de réaliser des slideshows d’images.
SLMedia.Deepzoom : Librairie vous permettant d’afficher des galeries deepzoom de vos images.
SLMedia.Video : Librairie gérant les galeries vidéos.
SLMedia.SmoothStreaming : Gestion des vidéos en Smooth Streaming

Création d’un player video avec SLMedia

La réalisation d’un player avec SLMedia repose sur les concepts de Binding et de Behavior. Les Bindings vont vous servir à lier les informations provenant du controller (ici un VideoController) et les différents éléments graphiques qui vont vous permettre d’afficher et d’agir sur votre vidéo.

MediaController

Cette classe appartenant à SLMedia.Core sert de base au VideoController. Elle regroupe les fonctionnalités communes aux différents controllers.

Gestion de la playlist (Next, Previous, IsPlaying, SelectedItem)
Gestion du fullscreen (IsFullscreen)
Gestion des progressions pour les slideshow / videos (Position, Duration)
Etc..

VideoController

Cette classe hérite du MediaController et lui rajoute des fonctions spécifiques pour la vidéo.

MediaElement
Buffering
Support de différentes source par les VideoAdapter

Etape 1 : Affichage d’une video de la playlist

Dans votre page xaml, référencez le namespace correspondant à SLMedia.Video et ajouter le VideoController aux ressources.

<UserControl x:Class="VideoPlayer1.Page"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   xmlns:slvideo="clr-namespace:SLMedia.Video;assembly=SLMedia.Video"

   >

    <UserControl.Resources>

        <slvideo:VideoController x:Name="controller" />

    </UserControl.Resources>

Ensuite posez un MediaElement et associez sa source avec la propriété CurrentItem de notre controller. Le CurrentItem sera du type IMediaItem et possèdera donc une propriété SourceUri contenant l’url de la vidéo à afficher.

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource controller}}" >

        <MediaElement x:Name="mediaelement" 

                    Source="{Binding Path=CurrentItem.SourceUri}"

                    />

    </Grid>

Il ne reste plus qu’à renseigner un nouvel item dans la playlist et de le sélectionner pour que la video se lancer.

using SLMedia.Video;

using SLMedia.Core;

namespace VideoPlayer1

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

            controller = (VideoController)Resources["controller"];

            this.Loaded += new RoutedEventHandler(Page_Loaded);

        }

        void Page_Loaded(object sender, RoutedEventArgs e)

        {

            controller.Playlist.Add("http://labs.ucaya.com/lake.wmv");

            controller.Next();

        }

    }

}

Pour rendre complétement opérationnel notre videocontroller, nous devons lui indiquer quel est le MediaElement qui affiche la vidéo. De cette manière il pourra récupérer les états de lecture, de progression et de buffering. Nous allons également lier quelques propriétés supplémentaires qui nous permettrons de tout contrôler depuis le VideoController.

        <MediaElement x:Name="mediaelement" 

                    Source="{Binding Path=CurrentItem.SourceUri}"

                    slvideo:VideoController.MediaElement="{StaticResource controller}"

                    IsMuted="{Binding Path=IsMuted}"

                    Volume="{Binding Path=Volume}"

                    AutoPlay="{Binding Path=AutoPlay}"    

                    />

Etape 2 : Lecture / Pause

L’état lecture / pause est géré dans notre controller par la propriété IsPlaying. Un binding entre une checkbox et cette propriété permetra de contrôler facilement l’état de lecture.

        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Background="#50000000" Margin="30">

            <CheckBox IsChecked="{Binding Path=IsPlaying, Mode=TwoWay}" />

        </StackPanel>

Etape 3 : Position / Durée

Un slider Bindé sur les propriétés Duration et Position fera l’affaire. Les propriétés Duration et Position étant du type TimeSpan, nous allons utiliser un IValueConverter pour transformer la valeur en Double.

<UserControl x:Class="VideoPlayer1.Page"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   xmlns:slvideo="clr-namespace:SLMedia.Video;assembly=SLMedia.Video"

   xmlns:slec="clr-namespace:SLExtensions.Controls;assembly=SLExtensions.Controls"

   xmlns:sled="clr-namespace:SLExtensions.Data;assembly=SLExtensions.Data"

   Foreground="White"

    >

    <UserControl.Resources>

        <slvideo:VideoController x:Name="controller" />

        <sled:TimeSpanConverter x:Name="timeSpanConverter"/>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource controller}}">

        <MediaElement x:Name="mediaelement" 

                    Source="{Binding Path=CurrentItem.SourceUri}"

                    slvideo:VideoController.MediaElement="{StaticResource controller}"

                    IsMuted="{Binding Path=IsMuted}"

                    Volume="{Binding Path=Volume}"

                    AutoPlay="{Binding Path=AutoPlay}"    

                    />

        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Background="#50000000" Margin="30">

            <CheckBox IsChecked="{Binding Path=IsPlaying, Mode=TwoWay}" />

            <slec:Slider Maximum="{Binding Converter={StaticResource timeSpanConverter}, Path=Duration}" 

                        MoveValue="{Binding Converter={StaticResource timeSpanConverter}, Mode=TwoWay, Path=Position}"

                        Width="200" Margin="20,0,0,0"

                        />

            <TextBlock Text="{Binding Converter={StaticResource timeSpanConverter}, Path=Position}" 

                    Margin="20,0,0,0"/>

            <TextBlock Text="
/ " />

            <TextBlock Text="{Binding Converter={StaticResource timeSpanConverter}, Path=Duration}" />

        </StackPanel>

    </Grid>

</UserControl>

Si vous utilisez le slider de base de silverlight, vous noterez des problèmes lorsque vous déplacez le curseur. Pendant que vous déplacez le curseur, la propriété Value peut être remise à jour par le binding et le curseur donne l’impression de sauter.

Etape 4 : Volume

De même que pour la position, nous allons utiliser un slider pour le volume et une checkbox pour le mute

            <CheckBox IsChecked="{Binding Path=IsMuted, Mode=TwoWay}" Margin="20,0,0,0"/>

            <Slider Maximum="1" SmallChange="0.1" LargeChange="0.1"

                   Value="{Binding Path=Volume, Mode=TwoWay}" Width="50" />

Etape 5 : Buffering - Downloading

Encore du binding

            <TextBlock Text="Buffering:" />

            <TextBlock Text="{Binding Path=BufferingProgress, Mode=TwoWay, Converter={StaticResource strConverter}, ConverterParameter='{0:p}'}" />

            <Slider Maximum="1" 

                   Value="{Binding Path=BufferingProgress, Mode=TwoWay}" Width="50" IsHitTestVisible="False" Margin="5,0,0,0"/>

            <TextBlock Text="Downloading:" Margin="20,0,0,0"/>

            <TextBlock Text="{Binding Path=DownloadProgress, Mode=TwoWay, Converter={StaticResource strConverter}, ConverterParameter='{0:p}'}" />

            <Slider Maximum="1" 

                   Value="{Binding Path=DownloadProgress, Mode=TwoWay}" Width="50" IsHitTestVisible="False" 

                   Margin="5,0,0,0"/>

Etape 6 : Gestion des états visuels

Le VideoController centralise les propriétés de notre player video. Il est possible de changer l’état visuel de nos contrôles en fonction des propriétés du VideoController. Nous allons utiliser le behaviors fournis par SLExtensions pour mapper ces propriétés à nos VisualStates.

<UserControl x:Class="VideoPlayer1.Page"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   xmlns:slvideo="clr-namespace:SLMedia.Video;assembly=SLMedia.Video"

   xmlns:slec="clr-namespace:SLExtensions.Controls;assembly=SLExtensions.Controls"

   xmlns:sled="clr-namespace:SLExtensions.Data;assembly=SLExtensions.Data"

   xmlns:inter="clr-namespace:Microsoft.Expression.Interactivity;assembly=Microsoft.Expression.Interactivity" 

   xmlns:slint="clr-namespace:SLExtensions.Interactivity;assembly=SLExtensions.Interactivity"

   xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

   Foreground="White"

    >

    <UserControl.Resources>

        <slvideo:VideoController x:Name="controller" />

        <sled:TimeSpanConverter x:Name="timeSpanConverter"/>

        <sled:StringFormatConverter x:Name="strConverter"/>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource controller}}">

        <vsm:VisualStateManager.VisualStateGroups>

            <vsm:VisualStateGroup x:Name="PlayingStates">

                <vsm:VisualStateGroup.Transitions>

                    <vsm:VisualTransition GeneratedDuration="00:00:00.3000000"/>

                </vsm:VisualStateGroup.Transitions>

                <vsm:VisualState x:Name="Playing">

                    <Storyboard>

                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">

                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#5039FF00"/>

                        </ColorAnimationUsingKeyFrames>

                    </Storyboard>

                </vsm:VisualState>

                <vsm:VisualState x:Name="Paused">

                    <Storyboard>

                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">

                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#50D56700"/>

                        </ColorAnimationUsingKeyFrames>

                    </Storyboard>

                </vsm:VisualState>

            </vsm:VisualStateGroup>

        </vsm:VisualStateManager.VisualStateGroups>

        <inter:Interaction.Behaviors>

            <slint:MapState Source="{StaticResource controller}" Property="IsPlaying" >

                <slint:MapStateMapping StateName="Playing" Value="true"/>

                <slint:MapStateMapping StateName="Paused" Value="false"/>

            </slint:MapState>

        </inter:Interaction.Behaviors>

        <MediaElement x:Name="mediaelement" 

                    Source="{Binding Path=CurrentItem.SourceUri}"

                    slvideo:VideoController.MediaElement="{StaticResource controller}"

                    IsMuted="{Binding Path=IsMuted}"

                    Volume="{Binding Path=Volume}"

                    AutoPlay="{Binding Path=AutoPlay}"    

                    />

        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Background="#50000000" Margin="30" x:Name="stackPanel">

            <CheckBox IsChecked="{Binding Path=IsPlaying, Mode=TwoWay}" />

            <slec:Slider Maximum="{Binding Converter={StaticResource timeSpanConverter}, Path=Duration}" 

                        MoveValue="{Binding Converter={StaticResource timeSpanConverter}, Mode=TwoWay, Path=Position}"

                        Width="200" Margin="20,0,0,0"

                        />

            <TextBlock Text="{Binding Converter={StaticResource timeSpanConverter}, Path=Position}" 

                    Margin="20,0,0,0"/>

            <TextBlock Text="
/ " />

            <TextBlock Text="{Binding Converter={StaticResource timeSpanConverter}, Path=Duration}" />

            <CheckBox IsChecked="{Binding Path=IsMuted, Mode=TwoWay}" Margin="20,0,0,0"/>

            <Slider Maximum="1" SmallChange="0.1" LargeChange="0.1"

                   Value="{Binding Path=Volume, Mode=TwoWay}" Width="50" />

            <TextBlock Text="Buffering:" />

            <TextBlock Text="{Binding Path=BufferingProgress, Mode=TwoWay, Converter={StaticResource strConverter}, ConverterParameter='{0:p}'}" />

            <Slider Maximum="1" 

                   Value="{Binding Path=BufferingProgress, Mode=TwoWay}" Width="50" IsHitTestVisible="False" Margin="5,0,0,0"/>

            <TextBlock Text="Downloading:" Margin="20,0,0,0"/>

            <TextBlock Text="{Binding Path=DownloadProgress, Mode=TwoWay, Converter={StaticResource strConverter}, ConverterParameter='{0:p}'}" />

            <Slider Maximum="1" 

                   Value="{Binding Path=DownloadProgress, Mode=TwoWay}" Width="50" IsHitTestVisible="False" 

                   Margin="5,0,0,0"/>

            <CheckBox IsChecked="{Binding Path=IsFullscreen, Mode=TwoWay}" Margin="20,0,0,0" Content="Fullscreen" Foreground="White"/>

        </StackPanel>

    </Grid>

</UserControl>

Being the Big Boss

Romuald Boulanger — Mon, 11 May 2009 09:02:31 GMT

En ce début de semaine www.beingthebigboss.com depasse les 14 000 inscrits !!

Venez nombreux prendre les commandes d’une multinationale !

Et n’oubliez pas si vous êtes étudiant le concours www.bigbosstrophy.com se prépare. Inscrivez-vous !

Testez moonlight sous Windows

Thierry Bouquain — Fri, 08 May 2009 07:33:11 GMT

Même si au final vous aurez une fenêtre faisant tourner moonlight sur votre windows, ce ne sera pas réellement le cas. L’idée expliquée dans ce post de Chris Cavanagh est d’utiliser Portable Ubuntu. Cette distribution d’Ubuntu tourne en tant que programme windows. Vous pourrez donc installer Moonlight sur le firefox d’ubuntu.

France Télévisions – L’info en vidéo

Romuald Boulanger — Tue, 28 Apr 2009 12:47:12 GMT

Encore une nouvelle version pour l’application L’info en vidéo.

L’accès aux journaux des régions simplifié par l’affichage de celles-ci sur une carte de France :-)

Et un accès direct aux différents journaux de chaque région :

Gestion de la mémoire sous Silverlight / .Net

Thierry Bouquain — Fri, 24 Apr 2009 09:29:36 GMT

On m’a interrogé récemment sur la libération de la mémoire des objets en silverlight. Je vais essayer de synthétiser ici ce que j’ai répondu.

Silverlight réagi exactement de la même manière que le framework .Net. La mémoire est gérée par un garbage collector (ramasse-miettes) qui libère les allocations mémoires des objets une fois qu’ils ne sont plus référencés.

L’application de test

Voila le principe de mon application de test. Au clic sur un bouton, mon application ajoute un usercontrol dans l’arbre visuel et au clic sur un autre bouton, je l’enlève. La seule référence vers mon contrôle est faite par l’arbre graphique. Dans le constructeur de mon usercontrol, j’incrémente un compteur qui m’indique le nombre d’instances en cours et dans le destructeur je le décrémente. Ce compteur est affiché par binding dans l’interface graphique.

Petite parenthèse pour le fonctionnement de l’application, la destruction des objets ne se passe pas dans le thread graphique, pour que la mise a jour du binding fonctionne, je lève l’événement PropertyChanged de AppController par le SynchronizationContext récupéré du thread graphique.

Contrôle sans références

A l’ajout de mon usercontrol, on note bien l’incrémentation du compteur.

Je clic sur le bouton Remove et je vois que mon compteur est toujours à 1. Le garbage collector ne passe pas tout de suite. Il y a un algorithme qui détermine quand le garbage collector doit passer sur les objets. Pour le besoin de mon application, je vais forcer l’appel au garbage collector au clic sur le bouton Force GC. Il faut noter que c’est une mauvaise pratique que de vouloir appeler soit même de garbage collector. GC.Collect() ne doit être appelée que si vous en avez réellement l’utilité. Un appel trop fréquent peut dégrader les performances de votre application.

Le clic sur Force GC ramène bien le compte de référence à 0.

Contrôle s’abonnant à un événement

Comme je vous le précisait dans le fonctionnement de mon application, je ne maintient aucune référence vers mes usercontrol, je n’ai théoriquement rien qui va empêcher le garbage collector de passer. Cependant le contrôle lui même peut faire qu’il ne sera pas libéré. Ici ma classe AppController fourni un événement auquel mes contrôles peuvent s’abonner. MyControl2 va s’abonner à cet événement. Au clic sur le bouton Raise Test event, vous verez que la couleur du usercontrol change.

Si vous ajoutez le usercontrol MyControl2, que vous l’enlevez et que vous forcez le garbage collector, vous verrez que l’instance ne se libère pas. Que se passe-t-il ?
Lorsque le contrôle s’est abonné à l’événement de AppController, il a créé un EventHandler (une référence vers une fonction) et l’a ajouté à la liste des fonctions à appeler lorsque l’événement est levé. Un événement n’est rien d’autre qu’une liste de références qui pointe vers les fonctions à appeler. Pour que notre contrôle se libère, il faut donc supprimer cette référence. Un clic sur Clear Test event list demande à AppController de vider sa liste d’événement, un clic sur Force GC remettra les compteurs à 0.

IDisposable

Une bonne pratique pour gérer la libération de ressources internes et le désabonnement d’évenement est d’implémenter l’interface IDisposable. Cette interface vous demande d’implémenter la fonction Dispose dans laquelle vous pouvez remettre à null les références externes, vous désabonnez d’événements, etc…
Le usercontrol MyControl3 implémente cette interface. Lorsque le bouton Remove First Item est cliqué, mon application vérifie si le contrôle à enlever implémente IDisposable et l’appel le cas échéant.

Les clics successifs sur Add MyControl3, Remove First Item et Force GC incrémentent et décrémentent bien notre compteur de références.

WeakReference et proxy d’événement

Si vous ne maitrisez pas la logique d’ajout suppression des contrôles, vous ne pouvez pas toujours appeler la IDisposable.Dispose. (A noter que ce n’est pas parce qu’un contrôle n’est plus dans l’arbre d’affichage qu’il faut nécessairement le disposer. Un tabcontrol ajoute et enlève chaque tab de l’abre graphique.)

La classe WeakReference permet de maintenir une référence “qui ne compte pas” du point de vue du garbage collector. La propriété Target de la WeakReference vaut null quand le garbage collector est passé et renvoi l’instance de l’objet sinon.

Ici pour gérer notre abonnement à l’événement, nous allons utiliser ces WeakReference pour pouvoir quand même être libéré. La fonction à appeler en retour de l’événement est : MyControl4.Instance_TestEvent. Cette fonction est privée. WeakListener est une classe interne à MyControl4 et va donc pouvoir appeler cette fonction privée. C’est WeakListener.Instance_TestEvent que nous allons abonner à l’événement de AppController. Lors de l’appel de l’événement, elle va vérifier que sa WeakReference vers MyControl4 est toujours valide, si tel est le cas, cette fonction va transmettre l’appel vers la fonction MyControl4.Instance_TestEvent, sinon elle se désabonne de l’appelant et pourra donc aussi être collecté par le garbage collector.

    public partial class MyControl4 : UserControl

    {

        private class WeakListener

        {

            public WeakListener(MyControl4 target)

            {

                weakReference = new WeakReference(target);

            }

            private readonly WeakReference weakReference;

            public void Instance_TestEvent(object sender, EventArgs e)

            {

                MyControl4 ctrl = (MyControl4)weakReference.Target;

                if (ctrl != null)

{

                    ctrl.Instance_TestEvent(sender, e);

}

                else

{

((AppController)sender).TestEvent -= this.Instance_TestEvent;

}

            }

        }

        void Instance_TestEvent(object sender, EventArgs e)

        {

            this.LayoutRoot.Background = new SolidColorBrush(GetRandomColor());

        }

        …

    }

Un clic sur Add MyControl4, Remove et Force GC vous donnera un compte de référence de MyControl4 à 0. Il faut noter qu’à ce stade, MyControl4 a été libéré mais le WeakListener est toujours présent en mémoire. Sa libération ne sera effectué que lorsque l’événement sera appelé, la classe s’autodésabonnera toute seule de l’événement et pourra est collectée.

WeakEventList

J’ai ajouté dans slextensions une WeakEventList permettant de gérer une liste d’événements basés sur des WeakReference. A la place de stocker les événements par le processus standard de .Net, nous créons une liste de WeakReference directement sur les delegates abonnés.

Voila la déclaration de l’événement de ma class AppController.

        private WeakEventList<EventArgs> weakTestEvent;

        private event EventHandler<EventArgs> testEvent;

        public event EventHandler<EventArgs> TestEvent

        {

            add

            {

                if(UseWeakEvent)

{

                    weakTestEvent.Event += value;

}

                else

{

                    testEvent += value;                    

}

            }

            remove

            {

                if (UseWeakEvent)

{

                    weakTestEvent.Event -= value;

}

                else

{

                    testEvent -= value;

}

            }

        }

En cochant la case UseWeakEvent et en reproduisant le cas qui posait problème au début de ce post ( Add MyControl2, Remove, Force GC), on voit que la référence est bien libérée.

Vous trouvez plusieurs autres manières de créer des “weakevent” sur internet. Celle-ci est la seule qui marche en silverlight pour des appels à des fonctions privées. De nombreuses utilisent la réflexion pour pouvoir accéder à la fonction finale à appeler par l’événement, ceci n’est pas permit en silverlight si la déclaration est privée. Le mode MediumTrust de silverlight nous en empêche.

Silverlight Extensions

Romuald Boulanger — Thu, 23 Apr 2009 18:24:01 GMT

Comme vous le savez les 2 projets Silverlight Extensions et Silverlight Contrib sont en cours de fusion :

- Silverlight Extensions et Silverlight Contrib

- The Future of Silverlight Contrib

- MVPs Shine Silverlight Together at MVP Global Summit!

Pour l’occasion nous avons mis en place le nouveau site de Silverlight Extensions sous N2 CMS et le futur Blog de Silverlight Extensions sous BlogEngine.NET.

* En attendant que la fusion avance, n’oubliez pas d’aller sur les sites des deux projets Silverlight Extensions et Silverlight Contrib.

France Télévisions – L’info en vidéo

Romuald Boulanger — Tue, 21 Apr 2009 21:18:26 GMT

Nouvelle version de l’application Silverlight L’info en vidéo.

Vous pouvez maintenant retrouver les vidéos des différentes émissions !

UCAYA Tour Next 7

Romuald Boulanger — Tue, 21 Apr 2009 11:13:21 GMT

::Au Sénégal::

Encore le Sénégal :-)

Silverlight Extensions et Silverlight Contrib

Thierry Bouquain — Fri, 17 Apr 2009 12:21:29 GMT

Comme nous vous le disions dans un précédent post et comme vous avez pu le voir sur les sites respectifs des deux projets, les 2 projets sont en cours de fusion. Le nom du projet résultant de cette fusion a été publié par Page Brooks sur un son blog. Un vote était organisé et c’est le nom silverlight extensions qui a remporté la majorité des voix. Retrouvez le post de Page Brooks

En attendant que la fusion avance, n’oubliez pas d’aller sur le site web des deux projets. slextensions et silverlight contrib