# Saturday, July 05, 2008

MVP isé

Me voici élevé au rang de MVP Client App Dev. J'ai reçu hier mon petit package MVP en provenance des USs. Je vous fais profiter de son contenu. En plus du diplôme, j'ai reçu un set bluetooth contenant une paire d'écouteurs, un dongle et une souris MoGo.

Je suis très fier de faire parti des 173 MVPs français actifs de 2008 et je remercie tous ceux qui m'ont permis de le devenir.

PIC-0024 PIC-0025 PIC-0026

#    Comments [0] |
# Sunday, June 29, 2008

Animer des propriétés non animables par Storyboard

Le moteur d'animation de silverlight ne permet d'animer que certains types de propriétés : des couleurs, des doubles et des points. Il n'est a priori pas simple d'animer une propriété comme Margin. En rusant un peu, on se rend compte qu'il est tout à fait possible de le faire. L'idée est de passer par une classe intermédiaire qui possède une propriété simple et de faire la conversion vers le type Thickness utilisé pour représenté une Margin. Afin de facilité l'utilisation de cette classe depuis le Xaml, elle hérite de Panel et peut donc être posée dans n'importe quel conteneur. Voici donc un petit exemple que vous retrouverez bien sur dans le projet SLExtensions.

La classe wrapper

namespace SLExtensions.Controls.Animation

{

    ...

 

    public class MarginWrapper : Panel

    {

        public MarginWrapper()

        {

            // Hide this control. It's just a wrapper and does not need to be shown in the GUI

            this.Visibility = Visibility.Collapsed;

            this.Loaded += new RoutedEventHandler(MarginWrapper_Loaded);

        }

 

        void MarginWrapper_Loaded(object sender, RoutedEventArgs e)

        {

            EnsureElement();

        }

 

        public string ElementName { get; set; }

 

        private FrameworkElement element;

 

        private void EnsureElement()

        {

            if (element == null)

            {

                element = this.FindName(ElementName) as FrameworkElement;

                if (element != null)

                {

                    Thickness margin = element.Margin;

                    if (margin != null)

                    {

                        MarginLeft = margin.Left;

                        MarginTop = margin.Top;

                        MarginRight = margin.Right;

                        MarginBottom = margin.Bottom;

                    }

                }

            }

        }

 

        #region MarginLeft

 

        public double MarginLeft

        {

            get

            {

                return (double)GetValue(MarginLeftProperty);

            }

 

            set

            {

                SetValue(MarginLeftProperty, value);

            }

        }

 

        /// <summary>

        /// MarginLeft depedency property.

        /// </summary>

        public static readonly DependencyProperty MarginLeftProperty =

            DependencyProperty.Register(

                "MarginLeft",

                typeof(double),

                typeof(MarginWrapper),

                new PropertyMetadata((d, e) => ((MarginWrapper)d).OnMarginLeftChanged((double)e.OldValue, (double)e.NewValue)));

 

        /// <summary>

        /// handles the MarginLeftProperty changes.

        /// </summary>

        /// <param name="oldValue">The old value.</param>

        /// <param name="newValue">The new value.</param>

        private void OnMarginLeftChanged(double oldValue, double newValue)

        {

            EnsureElement();

            if (element != null)

            {

                Thickness margin = element.Margin;

                if (margin == null)

                    margin = new Thickness();

 

                margin.Left = newValue;

                element.Margin = margin;

            }

        }

 

        #endregion MarginLeft

 

...

 

    }

}

Un exemple de Xaml

<UserControl x:Class="SLExtensions.Showcase.PageAnimation"

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

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

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

   xmlns:slei="clr-namespace:SLExtensions.Input;assembly=SLExtensions"

   >

    <UserControl.Resources>

        <Storyboard x:Name="anim1">

            <DoubleAnimation Storyboard.TargetName="marginWrapper1" Storyboard.TargetProperty="MarginLeft" To="150" Duration="0:00:03"/>

        </Storyboard>

    </UserControl.Resources>

    <StackPanel x:Name="LayoutRoot" Background="White">

        <StackPanel Orientation="Horizontal">

            <Button Content="Start" slei:CommandService.Command="BeginStoryboard" slei:CommandService.CommandParameter="anim1" />

            <Button Content="Stop" slei:CommandService.Command="StopStoryboard" slei:CommandService.CommandParameter="anim1"/>

                <Grid Width="400" Height="100">

                    <anim:MarginWrapper x:Name="marginWrapper1" ElementName="rect1" />

                    <Rectangle x:Name="rect1" Fill="Red" Width="50" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="50,0,0,0" />

                </Grid>

            </StackPanel>

    </StackPanel>

</UserControl>

#    Comments [0] |
# Saturday, June 28, 2008

Silverlight Extensions

Vous trouverez les exemples de code que je poste sur ce blog dans un projet nommé SLExtensions qui est disponible sur CodePlex. En plus des exemples de codes, vous trouverez quelques contrôles silverlight comme un TreeView ou un StackPanel virtualisé. Un mini showcase est visible ici : http://labs.ucaya.com/slextensions

#    Comments [0] |

Envoyer un formulaire html en POST avec Silverlight

Je vous propose une méthode d'extension simple qui permet d'envoyer un formulaire vers une page html. Le beta 2 de silverlight nous simplifie la vie avec la fonction UploadStringAsync. Il ne reste plus que l'encodage des données et le content type à assigner.

Voici la méthode d'extension

    /// <summary>

    /// Method extensions for SLExtension framework

    /// </summary>

    public static class SLExtension

    {

 

....

 

        #region WebClient

        /// <summary>

        /// Sends an HTML form. The request is sent using POST method

        /// </summary>

        /// <param name="webclient">The webclient.</param>

        /// <param name="uri">The URI of the resource to receive the file. </param>

        /// <param name="data">The form data to upload.</param>

        public static void SendHtmlForm(this WebClient webclient, Uri uri, IEnumerable<KeyValuePair<string, string>> data)

        {

            StringBuilder dataBuilder = new StringBuilder();

            int cnt = 0;

            foreach (var item in data)

            {

                if (cnt > 0)

                {

                    dataBuilder.Append('&');

                }

 

                dataBuilder.Append(item.Key);

                dataBuilder.Append('=');

                dataBuilder.Append(HttpUtility.UrlEncode(item.Value));

            }

 

            webclient.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";

            webclient.UploadStringAsync(uri, dataBuilder.ToString());

        }

 

        /// <summary>

        /// Sends an HTML form. The request is sent using POST method

        /// </summary>

        /// <param name="webclient">The webclient.</param>

        /// <param name="uri">The URI of the resource to receive the file. </param>

        /// <param name="data">The form data to upload.</param>

        /// <param name="userToken">user state</param>

        public static void SendHtmlForm(this WebClient webclient, Uri uri, IEnumerable<KeyValuePair<string, string>> data, object userToken)

        {

            StringBuilder dataBuilder = new StringBuilder();

            int cnt = 0;

            foreach (var item in data)

            {

                if (cnt > 0)

                {

                    dataBuilder.Append('&');

                }

 

                dataBuilder.Append(item.Key);

                dataBuilder.Append('=');

                dataBuilder.Append(HttpUtility.UrlEncode(item.Value));

            }

 

            webclient.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";

            webclient.UploadStringAsync(uri, "POST", dataBuilder.ToString(), userToken);

        }

        #endregion WebClient

        #endregion Public Methods

    }

#    Comments [0] |

Unload des contrôles en Silverlight

Il est parfois nécessaire d'être notifié lorsqu'un contrôle n'est plus dans l'arbre graphique de silverlight. Il n'existe pas à l'heure actuelle (c'est à dire dans la beta 2) d'événement unload, cependant, l'événement LayoutUpdated est levé sur les contrôles lorsqu'ils sont enlevés de leur parent. Voici un petit exemple de code. Notez au passage l'utilisation des méthodes d'extension.

namespace SLExtensions

{

    using System;

    using System.Text;

    using System.Windows;

    using System.Windows.Browser;

    using System.Windows.Controls;

    using System.Windows.Documents;

    using System.Windows.Ink;

    using System.Windows.Input;

    using System.Windows.Interop;

    using System.Windows.Media;

    using System.Windows.Media.Animation;

    using System.Windows.Shapes;

    using System.Collections.Generic;

 

    /// <summary>

    /// Method extensions for SLExtension framework

    /// </summary>

    public static class SLExtension

    {

       ...

 

        /// <summary>

        /// Determines whether an element is in the visual tree of the current application.

        /// </summary>

        /// <param name="element">The element.</param>

        /// <returns>

        ///    <c>true</c> if element paramter is in visual tree otherwise, <c>false</c>.

        /// </returns>

        public static bool IsInVisualTree(this FrameworkElement element)

        {

            return IsInVisualTree(element, Application.Current.RootVisual as FrameworkElement);

        }

 

        /// <summary>

        /// Determines whether an element is in the visual tree of a given ancestor.

        /// </summary>

        /// <param name="element">The element.</param>

        /// <param name="ancestor">The ancestor.</param>

        /// <returns>

        ///    <c>true</c> if element paramter is in visual tree otherwise, <c>false</c>.

        /// </returns>

        public static bool IsInVisualTree(this FrameworkElement element, FrameworkElement ancestor)

        {

            FrameworkElement fe = element;

            while (fe != null)

            {

                if (fe == ancestor)

                    return true;

                fe = fe.Parent as FrameworkElement;

            }

            return false;

        }

 

       ...

    }

}

 

<UserControl x:Class="SLExtensions.Showcase.IsInVisualTree"

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

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

   Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <Rectangle x:Name="rect" Fill="Cornsilk" LayoutUpdated="rect_LayoutUpdated" />       

        <Button Content="Remove rect" Height="40" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="100" Click="Button_Click" />

    </Grid>

</UserControl>

 

using SLExtensions;

 

namespace SLExtensions.Showcase

{

    public partial class IsInVisualTree : UserControl

    {

        public IsInVisualTree()

        {

            InitializeComponent();

        }

 

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            LayoutRoot.Children.Remove(rect);

        }

 

        private void rect_LayoutUpdated(object sender, EventArgs e)

        {

            if (!rect.IsInVisualTree())

            {

                // Handle unload behavior

            }

        }

    }

}

xcvcx

#    Comments [0] |
# Friday, June 13, 2008

Projet reMIX 08

constellation Vous trouverez ci-dessous les liens vers les vidéos d'un projet Silverlight 2 réalisé par mes soins pour le compte d'un de nos clients. Ce système de réservation en ligne bénéficie d'une grande fluidité d'utilisation et s'appuie sur les images cartographiques de virtual earth.

 

Video 1 - Présentation du client et du produit

Video 2 - Retours des tests utilisateurs

#    Comments [0] |
# Tuesday, May 27, 2008

Silverlight Command pattern et AttachedProperty

Les AttachedProperty

Ce type de propriété permet d'enrichir les propriétés existantes d'un objet. Ce sont des propriétés qui n'ont pas forcément de sens au niveau du contrôle lui-même, mais qui en ont au vu d'un contexte externe. Les AttachedProperty les plus connues sont Canvas.Left, Canvas.Top, Grid.Column et Grid.Row. Vous remarquerez que la propriété colonne n'a aucun sens sur un contrôle en dehors du contexte de la grille.

Ces AttachedProperty nous permettent d'étendre le comportement de nos contrôles. Nikhilk nous donne un exemple d'implémentation d'un framework de comportement sur son blog.

Le Command pattern

Ce pattern a pour but de séparer le comportement de la partie IHM. L'idée est de ne plus s'attacher directement aux événements des contrôles et de passer par un objet Command qui va faire la liaison entre le comportement et la saisie des utilisateurs.
Vous trouverez une bonne description du pattern Command en WPF sur le site de microsoft. Cette séparation permet de pouvoir déclencher l'action depuis l'IHM mais aussi depuis d'autres classes métiers.

Le code

La classe centrale est CommandService. Elle défini les AttachedProperty, c'est elle qui devra être référencée dans le xaml pour relier un contrôle à une commande.

<UserControl  xmlns="http://schemas.microsoft.com/client/2007"

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

   xmlns:sle="clr-namespace:SLExtensions.Input;assembly=SLExtensions"

...

        <Button Content="Open" Width="50" Height="30"

                      sle:CommandService.Command="Open"

                      sle:CommandService.CommandParameter="{Binding OpenFileInfo, Source={StaticResource controller}}" />

 

...

</UserControl>

Dans cet exemple, le bouton "Open" est bindé à la commande Open. On passe en paramètre à la commande un object OpenFileInfo qui est stocké sur le contrôleur de la page. Il sert à passer les paramètres d'exécution de la commande.

Du coté métier, le contrôleur de la page s'attache à l'événement Executed de la commande

...

 TestCommands.OpenCommand.Executed += new ExecutedEventHandler(OpenCommand_Executed);

...

void OpenCommand_Executed(object sender, ExecutedEventArgs e)

{

    OpenFileDialogInfo info = e.Parameter as OpenFileDialogInfo;

    if (info != null)

    {

        using (OpenFileDialog ofd = new OpenFileDialog())

        {

            ofd.EnableMultipleSelection = info.EnableMultipleSelection;

            ofd.Filter = info.Filter;

            ofd.ShowDialog();

        }

    }

}

 

Téléchargements Sources

#    Comments [0] |
# Monday, May 26, 2008

Copy source as html VS 2008

J'ai cherché durant le weekend un moyen satisfaisant de poster du code sur mon blog sans perdre le formatage. J'ai fais plusieurs essais plus ou moins réussis. Mon choix s'est arrêté sur CopySourceAsHtml. Il a bien sur fallu que je trouve une version compatible avec Visual Studio 2008 contenant ce patch corrigeant un problème d'accès au presse-papier. Finalement, je suis reparti des sources. Je publie donc ici les sources modifiées ainsi que les binaires à mettre dans

Voici un exemple de ce que ça peut donner "%userprofile%\Documents\Visual Studio 2008\Addins"

namespace SilverlightApplication5

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

        }

    }

}

Téléchargements :

#    Comments [0] |
# Sunday, May 25, 2008

Le data binding en Silverlight

Le data binding est une des fonctionnalités les plus puissantes de Silverlight et WPF. Il n'est plus nécessaire de passer du temps à faire du code pour la synchronisation des données. Cela contribue à la séparation de la partie visuelle de la partie métier.

Fonctionnement

En beta 1, le data binding est implémenté sur tout les objets qui héritent de FrameworkElement. Les propriétés de ce contrôle peuvent être liées à un objet source spécifiée lors du binding ou être liées au contexte de binding en cours. Le binding en cours est stockée par la propriété DataContext.

  • Exemple 1:

    1 <UserControl x:Class="Ucaya.SilverlightTest.Page"

    2    xmlns="http://schemas.microsoft.com/client/2007"

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

    4    xmlns:sys="clr-namespace:System;assembly=mscorlib"

    5    Width="400" Height="300">

    6     <UserControl.Resources>

    7         <sys:String x:Name="src">Binding source</sys:String>

    8     </UserControl.Resources>

    9     <StackPanel x:Name="LayoutRoot" Background="White">   

   10         <TextBlock x:Name="tb1" Text="{Binding Source={StaticResource src}}"/>

   11         <TextBlock x:Name="tb2" Text="{Binding Length, Source={StaticResource src}}"/>

   12     </StackPanel>

   13 </UserControl>

Ici, le TextBlock tb1 a sa propriété Text bindée à l'objet src qui se trouve dans les ressources. N'ayant pas spécifié de chemin dans la binding, c'est l'objet lui même qui est lié.
Le TextBlock tb2 est lié à la propriété Length de la source.

  • Exemple 2:

    1 <UserControl x:Class="Ucaya.SilverlightTest.Page"

    2    xmlns="http://schemas.microsoft.com/client/2007"

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

    4    xmlns:sys="clr-namespace:System;assembly=mscorlib"

    5    Width="400" Height="300">

    6     <UserControl.Resources>

    7         <sys:String x:Name="src">Binding source</sys:String>

    8     </UserControl.Resources>

    9     <Grid x:Name="LayoutRoot" Background="White">

   10         <ListBox x:Name="lb" ItemsSource="{Binding Source={StaticResource src}}">

   11             <ListBox.ItemTemplate>

   12                 <DataTemplate>

   13                     <TextBlock x:Name="tb" Text="{Binding }"/>

   14                 </DataTemplate>

   15             </ListBox.ItemTemplate>

   16         </ListBox>       

   17     </Grid>

   18 </UserControl>

La ListBox est bindée de la même manière que dans l'exemple 1. La string étant énumérable, la ListBox instancie un ItemTemplate par valeur de l'énumération.
Le TextBlock à sa propriété Text bindée au contexte de binding en cours fourni par la ListBox. Comme dans l'exemple 1, n'ayant pas fourni de chemin de binding, c'est directement la source du binding qui est liée.

Modes de binding

La synchronisation des valeurs peut se faire de différente manière.

OneTime

La donnée est recopiée de la source vers le contrôle une seule fois lorsque le binding est créé.

OneWay

La donnée est mise à jour dans le sens source vers contrôle à chaque fois que la valeur de la source change. Pour que le binding soit notifié du changement, l'objet source du binding doit implémenter l'interface INotifyPropertyChanged pour les propriétés et INotifyCollectionChanged pour les collections.

TwoWay

La donnée est mise à jour dans le sens source vers contrôle à chaque fois que la valeur de la source change (sous réserve de l'implémentation de INotifyPropertyChanged ou INotifyCollectionChanged) et dans le sens contrôle vers source quand la valeur du contrôle change.

Conversion des données

Il arrive que les données sources ne puissent être converties directement entre les propriétés d'un contrôle et les valeurs de la source. C'est là qu'interviennent les classes de conversion. Elles permettent par exemple de convertir un string en Uri, un string en ImageSource ou encore de formatter un double en string avec 2 nombres après la virgule. Ces convertisseurs sont des classes qui implémentent l'interface IValueConverter.

  • Exemple

Implémentation d'un convertisseur effectuant un string.Format. Affiche une valeur en pourcentage.

Xaml:

 

<UserControl x:Class="Ucaya.SilverlightTest.Page"

   xmlns="http://schemas.microsoft.com/client/2007"

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

   xmlns:sys="clr-namespace:System;assembly=mscorlib"

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

   Width="400" Height="300">

    <UserControl.Resources>

        <sys:Double x:Key="src">0.333333</sys:Double>

        <sle:StringFormatConverter x:Key="formater"/>

        <sys:String x:Key="formatString">{0:p}</sys:String>

    </UserControl.Resources>

    <StackPanel x:Name="LayoutRoot" Background="White">   

        <TextBlock x:Name="tb1"

                  Text="{Binding Converter={StaticResource formater}, ConverterParameter={StaticResource formatString}, Source={StaticResource src}}"/>

    </StackPanel>

</UserControl>

Convertisseur:

// <copyright file="StringFormatConverter.cs" company="SLExtensions.Controls">

// Distributed under Microsoft Public License (Ms-PL)

// </copyright>

 

namespace SLExtensions.Data

{

    using System;

    using System.Windows;

    using System.Windows.Controls;

    using System.Windows.Documents;

    using System.Windows.Ink;

    using System.Windows.Input;

    using System.Windows.Media;

    using System.Windows.Media.Animation;

    using System.Windows.Shapes;

    using System.Windows.Data;

 

    /// <summary>

    /// Convert data to string objects as it passes through the binding engine.

    /// </summary>

    public class StringFormatConverter : IValueConverter

    {

        /// <summary>

        /// Default string format syntax

        /// </summary>

        private const string DefaultStringFormat = "{0}";

 

        #region IValueConverter Members

 

        /// <summary>

        /// Convert source data to string before passing it to the target for display in the UI.

        /// </summary>

        /// <param name="value">The source data being passed to the target.</param>

        /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the target dependency property.</param>

        /// <param name="parameter">An optional parameter to be used in the converter logic.</param>

        /// <param name="culture">The culture of the conversion.</param>

        /// <returns>

        /// The value to be passed to the target dependency property.

        /// </returns>

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            if (targetType != typeof(string))

            {

                throw new ArgumentException(Resource.StringFormatConverterExceptionInvalidTargetType);

            }

 

            if (value == null)

            {

                return string.Empty;

            }

 

            string format = (parameter as string) ?? DefaultStringFormat;

            return string.Format(format, value);

        }

 

        /// <summary>

        /// This convertion is not supported

        /// </summary>

        /// <param name="value">The target data being passed to the source.</param>

        /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the source object.</param>

        /// <param name="parameter">An optional parameter to be used in the converter logic.</param>

        /// <param name="culture">The culture of the conversion.</param>

        /// <returns>

        /// The value to be passed to the source object.

        /// </returns>

        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            throw new NotSupportedException();

        }

 

        #endregion

    }

}

#    Comments [0] |
# Wednesday, April 30, 2008