Wilfried Woivré & .Net

Migrer une application WPF en Silverlight grâce au MVVM

JUIN7

Si vous êtes comme moi développeur WPF et Silverlight, on a souvent du vous dire: “mais c’est facile si tu sais faire l’un, l’autre c’est la même chose”. Or nous savons tous que c’est faux, il y a certes certains points similaires, mais ça ne fait pas tout puisque Silverlight c’est pour le Web et donc beaucoup plus limité que WPF tant au niveau des ressources disponibles que des composants, de la possibilité de Binding … Enfin tant de choses qui les différencient que toutes les énumérer serait un peu trop long.

Enfin, clairement on ne peut pas vraiment migrer une application WPF en Silverlight totalement, cependant il serait tout de même bien qu’en parti on puisse migrer une partie. Clairement le Model et son accès, ce n’est pas possible vu que Silverlight s’exécute dans une “Sandbox” on n’a pas accès au model. Vous pouvez tout de même y accéder via plusieurs méthodes que j’ai présenté précédemment. Maintenant la vue, vu ce que j’ai dis précédemment entre les différences entre Silverlight et WPF il est difficilement envisageable de migrer en 2 clics la vue entre ces types d’application. Il nous reste donc le ViewModel que l’on peut réutiliser en WPF ou en Silverlight, vu que comme je vous l’ai présenté dans un ancien poste, il contient des données, des DependencyProperty pour les injecter dans la vue, et bien entendu diverses actions appelées par la vue. Nous allons donc essayer de les migrer … A première vue, on ne peut pas vraiment référencer le projet contenant les ViewModel depuis Silverlight, donc on a une autre solution qui serait de copier le contenu de chacun des ViewModel dans un projet Silverlight ou alors même d’ajouter notre fichier “.cs” à notre application tel quel. Mais cela voudrait dire que pour chaque modification de notre ViewModel pour notre application WPF, nous serions obligé de faire la même en Silverlight, ce qui n’est certes pas pratique.

Cependant les concepteurs de Visual Studio ont pensé à nous, lorsque l’on ajoute un élément existant à notre application il est possible de l’ajouter comme lien vers le fichier en question, comme on peut le voir ci-dessous.

image

Cela nous permet donc de modifier les 2 ViewModel sélectionnés dans n’importe laquelle des deux applications.

Bien entendu, si vous avez déjà utilisé ce genre d’ajout, vous savez qu’il y a aussi beaucoup de contraintes, entre autre le fait que les deux projets doivent référencer les mêmes assembly afin de pouvoir fonctionner dans les deux cas.

De plus, en Silverlight ayant accès à beaucoup moins de choses qu’en WPF, si vous créez un projet avec ce principe, il faut que votre application WPF d’origine n’utilise pas des accès direct à la base de données, il vaut mieux passer par un Web Service commun pour vos deux applications afin que votre application WPF soit isolée par rapport à votre base de données.

Bon après tout cette littérature, je vais vous montrer succinctement un projet WPF que j’ai migré en Silverlight pour votre plus grand plaisir. Donc voici avant tous les différents projets :

image Le projet Helix et un projet Silverlight qui aide entre autre pour la navigation au sein d’un projet Silverlight, il n’a pas été créé par moi mais vous pouvez voir plus d’infos sur ce projet sur ce lien.

Bon comme vous pouvez le voir pour les autres projets, on va parler un peu Flux RSS là ! L’application a pour rôle d’afficher diverses personnes en base de données, puis après sélection on va récupérer les derniers posts de leurs blogs pour les afficher, je n’ai pas mis de lien lors d’un clic sur le titre d’un post, mais je vous laisse le faire par la suite …

Donc nous avons nos deux projets en Silverlight et WPF qui sont respectivement “MVVM.RSS.SL” et “MVVM.RSS”, les autres projets sont le service WCF, le modèle de base de données, et un projet de dépôt avec une Factory pour les différents types de données.

Dans cet article je ne vais pas rentrer dans l’implémentation du code puisque j’ai déjà abordé cette partie dans un autre post. Mais juste pour vous montrer le projet Silverlight contient les différents “ViewModel” du projet WPF en étant ajouté comme lien.

image image

 

La démonstration :image Vous pouvez voir que la partie Silverlight pour les flux RSS ne marche pas avec les liens fournis, puisqu’ils n’ont pas les fichiers XML pour autoriser l’accès aux flux RSS via Silverlight …

 

Pour une fois je vais conclure sur cet article, j’ai en réalité créé cet article sur un coup de tête puisque le projet initial en MVVM/WPF était pour mon premier post sur le MVVM, mais certaines circonstances furent telles que je ne pus le poster.

J’ai donc décidé de réaliser ce post puisque je savais qu’il était possible d’effectuer ce genre de manipulation. Néanmoins la réalisation de la migration en utilisant des fichiers “.cs” d’un projet WPF est assez ardue, du moins avec ma façon de concevoir le MVVM. Cela est dû entre autre à l’architecture de l’application qui est légèrement différente, mes contrôles ne passent pas directement par un ControlBase, mais via une classe intermédiaire puisque le XAML en Silverlight ne prends pas les arguments en compte dans le constructeur.De plus, les DependencyProperty en Silverlight et WPF sont légèrement différentes, je ne pouvais donc pas les utiliser pour les deux applications en mêmes temps. Je n’ai pas regardé si ces diverses différences sont moins importantes en Silverlight 3, ça sera peut être l’intitulé d’un autre post.

Enfin bref, divers problèmes, je pense donc que la migration d’un projet WPF en Silverlight peut s’avérer longue et ardue et il peut être plus rapide de reprendre entièrement un nouveau projet en Silverlight surtout si ce n’est pas vous qui avez réalisé celui en WPF. Je ne vous donne néanmoins pas de chiffres, puisque j’avais beaucoup de morceaux de code déjà fait, donc c’est toujours plus rapide. A près, il faudrait voir si cela serait rentable de réaliser les deux applications en parallèle afin de permettre une plus grande visibilité de votre application finale.

Remonter

Silverlight et l’accès aux bases de données

FÉVR4

Lors de la création d'un projet, il y a toujours une question qui revient c'est celle sur l'accès aux données.

En effet comment accède-t-on aux données depuis une application aujourd'hui ?

  • Un accès direct à la base de données
  • Un Web Service
  • WCF et ses différents types de binding

Mais pour ce qui est de Silverlight, il est évident qu'on ne peut pas utiliser tous ces types d'accès, en effet on a jamais vu une application cliente se connecter directement à une base de données.

De plus, à quelle base de données peut-on se connecter, car j'espère que tout le monde qui lis ce post sait qu'on peut ajouter des modules Silverlight aussi bien dans une page aspx (ASP.Net) qu'une bonne page html.

Alors personnellement, j'ai utilisé des méthodes aussi libre que propriétaire. C'est à dire une base de données MySQL, un accès direct aux données via diverses pages en php qui génèrent des données XML récupérées dans mon application Silverlight via l'accès aux pages php en question. Où une solution plus propriétaires, soit Sql Serveur 2008, un accès aux données avec Linq To Sql, et un service WCF pour diffuser les données.

Donc je me suis dis une petite démo pour les deux méthodes, histoire que vous puissiez tous profiter de ces exemples pour vos futures applications. De plus, vous pourrez trouver à la fin de ce post un lien pour télécharger les différentes sources utilisé pour la création de cet article.

Commençons par la solution gratuite, c'est à dire MySQL + PHP + Silverlight avec un petit schéma pour une compréhension plus facile.

Alors il faut penser à l'accès aux données et aux envois des nouvelles données à notre base.

Donc pour l'accès à la base en PHP, je vais supposer que tout le monde sait faire (enfin si vous ne savez pas, ce n'est pas grave vous n'allez pas en mourir). Mais en gros il faut créer un XML pour qu'on puisse le lire à travers notre application Silverlight

while ($line = mysql_fetch_assoc($result))
{
echo "<Favori>";
$id = $line["Id"];
echo "<id>".$id."</id>";
echo "<Lien>".utf8_encode($line["Lien"])."</Lien>";
echo "<Libelle>".utf8_encode($line["Libelle"])."</Libelle>";
echo "<Auteur>".utf8_encode($line["Auteur"])."</Auteur>";
echo "</Favori>";
}

Vous obtenez grâce à cette boucle une syntaxe XML de ce type, pour une entité Favori :

<Favori>

<id>1</id>

<Lien>http://etudiants.ms</Lien>

<Libelle>Site Microsoft étudiants</Libelle>

<Auteur>Microsoft</Auteur>

</Favori>

Maintenant viens la récupération de ce code XML au travers de l'application Silverlight, j'utilise donc un Helper pour récupérer ces valeurs via un WebClient, puis je traite les données récupérées via un LinqToXML, et ensuite les utiliser à bon escients dans mon application.

Pour la récupération en LinqToXML, j'ai utilisé une requête assez simple que voici :

var elements = xmlElements.Descendants("Favori").Select(favori => new

{

Id = (int)favori.Element("id"),

Auteur = ((string)favori.Element("Auteur")).Trim(),

Libelle = ((string)favori.Element("Libelle")).Trim(),

Lien = ((string)favori.Element("Lien")).Trim()

});

Voilà pour la récupération des données avec cette méthode, et maintenant voyons comment envoyé des données au serveur, car après tout un échange se fait dans les deux sens.

Alors pour l'envoi des données, j'ai aussi utilisé un Helper pour envoyer les données.


HttpHelper helper = new HttpHelper(new Uri("http://myWebSite/setFavori.php"), "POST"

, new KeyValuePair<string, string>("Favori", null)

, new KeyValuePair<string, string>("Favori_Libelle", "Imagine Cup Student Competition 2009")

, new KeyValuePair<string, string>("Favori_Lien", " http://imaginecup.com")

, new KeyValuePair<string, string>("Favori_Auteur", "Microsoft"));

helper.ResponseComplete += new HttpResponseCompleteEventHandler(helper_ResponseComplete);

helper.Execute();

En fait le but de ce helper est d'ajouter les données dans différentes données à poster selon le type de méthode voulue, ici en mode « POST », pour plus de détails voici le constructeur utilisé ci-dessus.


public HttpHelper(Uri requestUri, string method, params KeyValuePair<string, string>[] postV alues)

{

Request = (HttpWebRequest)WebRequest.Create(requestUri);

Request.ContentType = "application/x-www-form-urlencoded";

Request.Method = method;

PostValues = new Dictionary<string, string>();


if (postValues != null && postValues.Length > 0)

{


foreach (var item in postValues)

{

PostValues.Add(item.Key, item.Value);

}

}

}

On récupère ensuite ces différentes données via le fichier setFavori.php, puis on les ajoute à la base de données MySQL via un code de ce type, on remarquera par ailleurs que mon niveau en PHP n'est pas très élevé.

if (isset($_POST["Favori"]))

{

$Libelle = mysql_real_escape_string($_POST["Favori_Libelle"]);

$Lien = mysql_real_escape_string($_POST["Favori_Lien"]);

$Auteur = mysql_real_escape_string($_POST["Favori_Auteur"]);

$query = "INSERT INTO `Flux` (`Id`, `Libelle`, `Lien`, `Auteur`) VALUES (NULL, '".$Libelle."', '".$Lien."', '".$Auteur."')";

$result = mysql_query($query);

if(!result)

echo "ERR2";

}

On effectue donc l'ajout en base, et on écrit un code d'erreur qui sera lu par l'application Silverlight afin d'informer l'utilisateur d'un éventuel souci.

Passons maintenant à la partie « Full Microsoft », une solution où d'ailleurs je me sens plus à l'aise, peut-être du au fait que j'ai rarement fait du PHP durant ma carrière de développeur. Donc pour commencer un petit schéma du fonctionnement de l'exemple.

Donc avant tout un LinqToSql, dont voici le fichier dbml qui est comme vous pouvez le voir assez succinct.

Et oui, encore l'exemple du favoris, on remarque que cela change de l'exemple de la personne J

On construit ensuite le WCF, je vais passer sur la création d'un service WCF puisque ce n'est pas le but de cet article, mais néanmoins voici les différentes méthodes exposées sur le Web Services.


///<summary>

/// Récupère la liste des favoris de la base

///</summary>

///<returns></returns>
List<WCF_DataContract.Favori> WCF_Interface.IService.SelectAllFavoris()

{
if (db != null && db.DatabaseExists())

{
var query = from f in db.Favoris

select new WCF_DataContract.Favori

{

Id = f.IdFavori,

Libelle = f.Libelle,

Auteur = f.Auteur,

Lien = new Uri(f.Lien)

};


return query.ToList();

}

< span="" style="font-family:courier new;font-size:10pt;">
return null;

}


///<summary>

/// Insère un favori dans la base et retourne son id

///</summary>

///<param name="obj"></param>

///<returns></returns>
void WCF_Interface.IService.insertFavori(WCF_DataContract.Favori obj)

{


if (db != null && db.DatabaseExists())

{


Favori f = new Favori()

{

Lien = obj.Lien.AbsoluteUri,

Auteur = obj.Auteur,

Libelle = obj.Libelle

};

db.Favoris.InsertOnSubmit(f);

db.SubmitChanges();

}

}

Donc on peut voir ci-dessous, la méthode pour insérer et pour récupérer tous les éléments de la liste.

Pour publier notre service WCF dans notre site web, rien de plus, il faut configurer le fichier de configuration correctement, et créer un fichier « .svc » après bien entendu avoir ajouter toutes les références nécessaire.

Voici les données du fichier de configuration :

<system.serviceModel>

<services>

<service name="WCF_Services.Service" behaviorConfiguration="MyServiceTypeBehaviors">

<endpoint address="" binding="basicHttpBinding" contract="WCF_Interface.IService" />

</service>

</services>

<behaviors>

<serviceBehaviors>

<behavior name="MyServiceTypeBehaviors">

<serviceMetadata httpGetEnabled="true" />

</behavior>

</serviceBehaviors>

</behaviors>

</system.serviceModel>

Et le contenu du fichier « .svc » : <%@ ServiceHost Service="WCF_Services.Service" %>

Bien entendu, l'implémen tation d'un service WCF peut être bien plus compliquée selon les besoins du projet.

Passons au projet Silverlight, on ajoute une référence à notre service WCF précédemment crée, comme le montre l'écran ci-dessous.

Pour la récupération de tous les favoris, on utilise donc ces différentes méthodes :


private ServiceClient client;


public void Load()

{

client = new ServiceClient();

client.SelectAllFavorisCompleted += new EventHandler<SelectAllFavorisCompletedEventArgs>(client_SelectAllFavorisCompleted);

client.SelectAllFavorisAsync();

}


void client_SelectAllFavorisCompleted(object sender, SelectAllFavorisCompletedEventArgs e)

{
var MyList = e.Result.ToList();

client.CloseAsync();

}

La variable MyList contient dorénavant toutes les données de la base.

Note : Il ne faut pas oublier de fermer la connexion avec le service WCF afin de libérer les ressources, pour qu'elles soient nettoyés par le Garbage Collector.

Donc voici, comme promis les sources de la solution sur ce lien.

Alors pour conclure ce post, on peut dire que voici deux solutions diverses pour accéder à des bases de données depuis Silverlight, on peut bien entendu envisager à partir de ces exemples toutes les possibilités immaginables et réalisables ce qui ne rendra pas vos applications Silverlight isolée sur le poste de l'utilisateur final.

Wilfried Woivré

Remonter