Avant propos

Voici un article sur Silverlight 3 que j’ai du écrire pour un magasine. Veuillez me pardonner s’il n’est pas exhaustif mais j'ai eu tant de chose à dire et si peu de place pour le dire…

J’espère néanmoins qu’il sera utile à l’un ou l’autre d’entre vous.

Installation sur machine cliente et travail en mode offline

Alors que Silverlight 2 ne fonctionne qu’en mode online et à l’intérieur d’un navigateur, la version 3 de la plateforme ne respecte plus ces limitations.

En effet, lors de la visite d’un utilisateur sur une application Silverlight 3, ce dernier à l’opportunité de télécharger et installer cette application sur son système d’opération. Ainsi cette application lui deviendra accessible même lorsqu’il ne sera pas connecté à internet.

Bien sur, nous devons prendre en compte que si l’application doit récupérer des données sur un serveur, cela restera impossible en mode offline. Cependant, une bonne gestion d’un cache de données et de la concurrence lors des mises à jour pourra tout de même permettre un travail offline sur des données online.

Dans cet article nous allons apprendre à :

  •  
    • Rendre une application Silverlight 3 téléchargeable
    • Détecter si l’application est :
      • Installée sur le bureau ou sous navigateur
      • Online ou offline.
    • Récupérer des données à partir du site hôte de l’application

Avant de commencer, notez que les pré-requis pour cet article sont :

  •  
    • Connaître les bases de la plateforme .Net
    • Installer Visual Studio 2008 (dont la version express est gratuite)  
      Attention, installez la version anglaise, les Tools et SDK n’existent que en anglais pour l’instant !
    • Installer les Silverlight 3 Tools et SDK ainsi que les .Net RIA services (http://www.silverlight.net/GetStarted/silverlight3)

Bases de l’application

  •  
    • Démarrez Visual Studio 2008
    • Ouvrez le menu File à New Project …
    • Dans la boîte de dialogue « New Project » qui apparait, choisissez « .Net Framework 3.5 » et sous le type de projet « Silverlight » : « Silverlight Application »
      clip_image002
    • N’oubliez pas de lui donner un nom, dans ce cas-ci : « OutOfBrowser »
    • Cliquez sur Ok.
    • Une nouvelle boîte de dialogue apparaît : « New Silverlight Application ». Prenez soin de cocher l’option « Link to ASP.Net server project ». Cette option activera le lien .Net RIA Services entre l’application Silverlight et son site ASP.NET host.
      clip_image004
    • Cliquez sur Ok.
    • Visual Studio va générer automatiquement toute la structure de la solution.
    • Dans le fichier MainPage.xaml du projet Silverlight, ajouter un texte « Hello World ».

      [code:xml]
      <Grid x:Name="LayoutRoot" Background="White">
      <TextBlock>HelloWorld</TextBlock>
      </Grid>
      [/code]

  • Voici le résultat obtenu lors d’un débogage de la solution crée ci-dessus :

    clip_image006

Rendre cette application téléchargeable
Grâce au bouton fournit par la plateforme

Permettre à vos utilisateurs d’installer votre application sur leurs machines se fait dans son fichier manifeste.

Ce fichier se trouve dans le dossier « Properties » de votre application.
clip_image008

Pour procéder, décommentez le nœud «Deployement.ApplicationIdentity ».

public MainPage()
{
    InitializeComponent();
    if (App.Current.RunningOffline)
    {
        WebOrDeskTextBlock.Text = "Bureau";
        DownAndInstallBtt.Visibility = Visibility.Collapsed;
    }
    else
    {
        WebOrDeskTextBlock.Text = "Navigateur";
        DownAndInstallBtt.Visibility = Visibility.Visible;
    }
}

Détecter si le pc est online ou offline

Dans le même état d’esprit, il est utile de connaître l’état de la connexion internet de la machine sur laquelle tourne l’application.

Mais dans ce cas-ci, le travail est un peu plus complexe. En effet, cette connexion n’a pas un état statique, il est possible que son état change durant l’exécution de l’application.

Un évènement est envoyé à l’application par la plateforme lorsque cela arrive. Il suffit donc de s’y abonner et de revérifier l’état de la connexion quand il est lancé.

  •  
    • Ouvrez MainPage.xaml dans le projet Silverlight.
    • Ajoutez une nouvelle zone de texte et nommez-la « OnOrOffTextBlock»
      [code:xml]
      <Grid x:Name="LayoutRoot" Background="White">
      <StackPanel>
      <>
      <TextBlock
      Name="OnOrOffTextBlock"
      Margin="5"
      Text="HelloWorld"/>
      </StackPanel>
      </Grid>
      [/code]

    • Ouvrez MainPage.xaml.cs
    • Dans le constructeur de la page, juste après l’initialisation des composants, ajoutez ce code :
      [code:c#]
      public MainPage()
      {
          InitializeComponent();
          (…)
          OnOrOff();
          NetworkChange.NetworkAddressChanged +=
              new NetworkAddressChangedEventHandler
                  (NetworkChange_NetworkAddressChanged);
      }

      void NetworkChange_NetworkAddressChanged(object sender,
                                                                           EventArgs e)
      {
          OnOrOff();
      }

      void OnOrOff()
      {
          if (NetworkInterface.GetIsNetworkAvailable())
          {
              OnOrOffTextBlock.Text = "Online";
              OnOrOffTextBlock.Foreground =
                   new SolidColorBrush(Colors.Green);
          }
          else
          {
              OnOrOffTextBlock.Text = "Offline";
              OnOrOffTextBlock.Foreground =
                      new SolidColorBrush(Colors.Red);
          }
      }
      [/code]

La fonction NetworkInterface.GetIsNetworkAvailable() retourne un booléen donnant cette information.

Lorsque l’ordinateur client perd la connexion internet, l’application le remarque en quelques secondes.

Récupérer des données à partir du site hôte de l’application

Silverlight 3 et les .Net RIA Services simplifie grandement la vie fastidieuse des développeurs. Auparavant, pour consommer des données d’un serveur dans une application Silverlight, la méthode la plus couramment utilisée était de connecter cette application Silverlight à un service WCF (Windows communication foundation) lui-même correctement configuré pour que sa sécurité lui permette de dialoguer avec l’application. *gasp* Rien que de le dire, ca fait mal.

Aujourd’hui, le paradis nous ouvre ses portes. En effet, il est possible de créer une communication entre un site ASP.NET et une application Silverlight 3 qu’il héberge, et ce, en quelque cliques mais tout en gardant une grande liberté de configuration.

Ainsi, la plateforme nous offre de la simplicité, sans nous faire payer en généricité.

· Pour les besoin de la démo, créons rapidement une petite base de données des employés de Heode dont voici la structure :
clip_image020

  •  
    • Retournez dans Visual Studio
    • Cliquez avec le bouton droit de la souris sur le projet « OutOfBrowser.Web » (le site web ASP.NET)
    • Sélectionnez le menu Add new à new Item …
    • Dans la boîte de dialogue « New Item », sélectionnez le template « LINQ to SQL Classes » et donnez lui le nom : SuperHeroDB.
      Les classes LINQ to SQL sont un moyen simple et rapide de vous connecter à une base de données.
    • Ouvrez le fichier SuperHeroDB.dbml
    • Naviguez dans l’explorateur de serveur de Visual Studio jusqu’à trouver la table SuperHero et glissez là sur la surface de dessin des classes LINQ to SQL.
    • Compilez le projet ASP.NET 
    • Sélectionnez une foi de plus le menu Add new à new Item …
    • Dans la boîte de dialogue « New Item », sélectionnez le template « Domain Service » et donnez lui le nom : SuperHeroService.
      Un Domain Service est un service de données et d’opération qui sera accessible au site web et à tous ses composants internes. C’est à travers ce service que le site web et l’application Silverlight vont communiquer.
    • Cliquez sur Ok.
    • La boîte de dialogue suivante vous demande de sélectionnez à quel accès aux données vous voulez lier le Domain Service. Choisissez SuperHeroDB, ensuite cochez l’option devant la table SuperHero.
      clip_image022
      Les autres options vous permettent de demander à la plateforme de générer automatiquement toute l’opération d’édition, d’insertion et de résolution de conflits mais nous n’en auront pas besoin dans cet exercice. 
    • Cliquez sur Ok.
    • Compilez la solution au complet.

Vos données sont maintenant exposée par le site web aux clients Silverlight.

  •  
    • Ajoutez la référence System.Windows.Controls.Data à votre project Silverlight
    • Ouvrez MainPage.xaml dans le projet Silverlight.
    • Ajoutez une nouvelle grille de données et nommez-la « MaDataGrid»
      [code:xml]
      <UserControl x:Class="OutOfBrowser.MainPage"
      xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      xmlns:data="clr-namespace:System.Windows.Controls;assembly=
      System.Windows.Controls.Data"

      Width="400" Height="300">
      <Grid x:Name="LayoutRoot" Background="White">
      <StackPanel>
      <data:DataGrid Name="MyDataGrid" Margin="5"/>
      <>
      </StackPanel>
      </Grid>
      </UserControl>
      [/code]

    • Ouvrez MainPage.xaml.cs
    • Dans le constructeur de la page, juste après l’initialisation des composants, ajoutez ce code :
      [code:c#]
      public MainPage()
      {
          InitializeComponent();
          (…)
          SuperHeroContext context = new SuperHeroContext();
          MyDataGrid.ItemsSource = context.SuperHeros;
          context.LoadSuperHero();
      }
      [/code]

Le résultat est directement visible :

clip_image024

Cette méthode passionnante d’accès aux données est bien plus complète que le peu que je viens de vous montrer, pour les intéresser je conseille grandement une lecture du document relatif aux .Net RIA Services disponible sur http://www.silverlight.net/GetStarted/silverlight3.