Accueil > Silverlight > Interaction Silverlight et Facebook (part I): Un bouton aux couleurs de Facebook

Interaction Silverlight et Facebook (part I): Un bouton aux couleurs de Facebook

A moins d’avoir passé les 2 dernières années dans un monastère tibétain, vous avez comme tout le monde un compte Facebook ou vous avez au moins vu fleurir partout sur le net des liens de partage, des boutons « I Like » etc

Facebook est devenu un très bon outil de communication et il serait dommage de ne pas profiter de ses fonctionnalités dans vos applications. Je commencerai donc ce blog par une petite série d’articles pour vous montrer comment interagir et utiliser les API Facebook dans vos applications Silverlight.

Sans même parler de la visibilité apportée par le site communautaire de par son énorme nombre de membres, l’une des fonctionnalités très intéressantes que propose Facebook est l’API Facebook Connect qui vous permet de récupérer les informations de l’utilisateur actuellement connecté à Facebook sur le poste. Avec ce système, plus besoin de se rappeler ni de saisir un login et un de mot de passe: un clic sur un bouton et vous pouvez récupérer les infos que l’utilisateur vous a autorisé à voir et vous en servir pour l’authentifier, ou même pour lui créer directement un compte sur votre application. Moins de saisie = Plus d’utilisateurs c’est mathématique et Facebook est donc devenu un bon moyen de booster vos applications.

Dans le premier article, nous allons faire un peu de XAML pour créer un style réutilisable de bouton aux couleurs de Facebook. Nous lui ajouterons des fonctionnalités dans les articles suivants.

En XAML, le contrôle button (comme la plupart des autres d’ailleurs) n’est pas natif: il a en fait simplement été défini par défaut à partir d’éléments graphiques de base. Des comportements ont ensuite été ajoutés selon l’état du bouton. Un bouton de base utilisera donc simplement un style par défaut. Il est heureusement possible de définir nos propres styles. C’est ce que nous allons faire pour créer notre bouton Facebook.

Vous pouvez trouver le template de base d’un bouton sur MSDN

Le rendu final du bouton que nous allons créer est le suivant:

Le texte et la taille sont personnalisables. Les éléments que nous allons fixer sont le logo et le fond ainsi que la forme du bouton.
Nous allons également définir les comportements graphiques du bouton en cas de survol, de click ou lorsqu’il est disabled.

Tout se passe dans un élément Style:

<Style x:Key="FacebookButtonStyle" TargetType="Button">

Nous spécifions ici le nom du style et le type de contrôle sur lequel il s’applique. Si aucun nom de style n’est spécifié ici, le style sera appliqué à tous les boutons ce qui permet de définir le style global des contrôles d’une application.

Nous utilisons ensuite des éléments Setter qui servent à définir les propriétés du contrôle:

<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontFamily" Value="lucida grande"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>

Ces Setter servent à définir les propriétés par défaut du contrôle. Dans le code ci dessous, on reproduit un style Facebook pour la police du bouton.

Le prochain Setter est un peu spécial, c’est le Setter de la propriété Template qui va servir à définir l’apparence visuelle et le comportement graphique du bouton.

Notre bouton Facebook est en fait une Grid à 2 colonnes, la première contenant l’image du logo :

 
<!--Définition des colonnes-->
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
 
<!--Image du logo dans la première colonne-->
<Image x:Name="Logo" 
      Grid.Column="0" 
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      Source="/fb_button.png"
      Stretch="Uniform"
      Margin="10"
      />
 
 

les expressions de la forme: {TemplateBinding HorizontalContentAlignment} font référence aux propriétés du contrôle courant.

La deuxième colonne contenant le contenu défini par l’utilisateur:

<!--Contenu de l'utilisateur dans la deuxième colonne-->
<ContentPresenter
      x:Name="contentPresenter"
      Content="{TemplateBinding Content}"
      ContentTemplate="{TemplateBinding ContentTemplate}"
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      HorizontalAlignment="Stretch"
      Margin="0,10,10,10"
      Grid.Column="1"/>
 
 

Le content d’un bouton n’est pas forcément une chaîne de caractères. En effet, l’utilisateur peut utiliser n’importe quel type de contenu accepté par un bouton donc un ContentPresenter est utilisé et non pas un simple affichage de chaîne. Il permet de garder les fonctionnalités de base d’un bouton en acceptant les mêmes contenus qu’un bouton traditionnel.

Le fond est un rectangle aux coins arrondis avec un dégradé de bleus ce qui donne en XAML:

<!--Fond du bouton avec dégradés de bleus-->
<Border Grid.ColumnSpan="2" Opacity="1" CornerRadius="6" x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent">
    <Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,0.75">
                <GradientStop Color="#FF3B5998" Offset="1" />
                <GradientStop Color="#FF627AAD" Offset="0.5" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Border>
 

Le rendu du bouton est maintenant terminé. Reste à gérer les différents états.
Pour ça nous allons utiliser un VisualStateManager. Comme cet objet appartient à l’assembly System.Windows nous allons devoir déclarer son namespace:

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

Le VisualStateManager va nous permettre de lancer des animations sur le bouton à l’aide de storyboards comme ceci:

<vsm:VisualStateManager.VisualStateGroups>
    <vsm:VisualStateGroup x:Name="CommonStates">
        <vsm:VisualState x:Name="Normal"/>
        <vsm:VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimation Duration="0" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF1D4088"/>
            </Storyboard>
        </vsm:VisualState>
        <vsm:VisualState x:Name="Pressed">
            <Storyboard>
                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" 
                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8627AAD"/>
                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" 
                                Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6627AAD"/>
            </Storyboard>
        </vsm:VisualState>
 
        <vsm:VisualState x:Name="Disabled">
            <Storyboard>
                <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
            </Storyboard>
        </vsm:VisualState>
 
    </vsm:VisualStateGroup>
 
</vsm:VisualStateManager.VisualStateGroups>
 

L’état « Normal » ne change rien au template on ne spécifie donc rien.
A l’état MouseOver, on change la brush utilisée pour le contour du rectangle de fond pour faire apparaître le bord du bouton et le faire ressortir.
A l’état Pressed, on redéfinit les paramètres de couleur du dégradé du fond pour l’éclaircir.
L’état disabled est un peu spécial. le bouton doit avoir une apparence désactivée et donc plutôt éclaircie.
Pour arriver à ce rendu, on va ajouter au template un rectangle blanc qui se placera devant le contrôle. Si le bouton est désactivé, on mettra son opacité à 0 et si il est désactivé, le VisualStateManager passera son opacité à 0.55 ce qui donnera l’impression d’un voile sur le contrôle sans le cacher complètement.

Le bouton est donc terminé et en voilà le code complet:

        <Style x:Key="FacebookButtonStyle" TargetType="Button">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FontFamily" Value="lucida grande"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF1D4088"/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8627AAD"/>
                                            <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6627AAD"/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.ColumnSpan="2" Opacity="1" CornerRadius="6" x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent">
                                <Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,0.75">
                                            <GradientStop Color="#FF3B5998" Offset="1" />
                                            <GradientStop Color="#FF627AAD" Offset="0.5" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Border>
                            <Image x:Name="Logo"
                                  Grid.Column="0"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  Source="/CivOnline.SL;component/Assets/Images/fb_button.png"
                                  Stretch="Uniform"
                                  Margin="10"
                                  />
                            <ContentPresenter
                                  x:Name="contentPresenter"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  HorizontalAlignment="Stretch"
                                  Margin="0,10,10,10"
                                  Grid.Column="1"/>
                            <Rectangle Grid.ColumnSpan="2" x:Name="DisabledVisualElement" RadiusX="5" RadiusY="5" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Le style est défini, vous pouvez maintenant l’ajouter aux ressources de votre application.
L’utilisation du bouton se fait de la manière suivante:

<Button 
    Name="fbLogin" 
    Style="{StaticResource FacebookButtonStyle}" 
    Content="Connexion via Facebook" 
    />

Le but de cet article étant plus de détailler la manière de créer un template de contrôle que de faire quelque chose de joli, nos amis designers voudront bien m’excuser pour mes médiocres qualités artistiques! (oui je le sais qu’il est moche mon bouton…).
Le but de ce blog étant de partager des expériences, n’hésitez pas à poster des commentaires si vous pouvez améliorer ou corriger le code

Dans le prochain article de la série, nous nous focaliserons sur les prérequis pour développer une application qui intéragi avec Facebook et sur les bases de l’API Graphe qui nous permettra d’en récupérer les informations.

EDIT: La partie 2 est publiée : Interaction Silverlight et Facebook (part II): l’API Graph

Enjoy…

Étiquettes : ,

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :