Silverlight pour Windows Embedded 7 – Ma première application

Dans un premier article je vous ai donné la procédure pour préparer les outils nécessaires au développement d’applications Silverlight pour Windows Embedded. Cette fois ci nous allons réaliser notre première application et pour faire classique nous allons faire une "hello world" .

Pour rappel il vous faut les outils suivants :

– Visual Studio 2008 + SP1 (ne pas oublier le C++ )

– Microsoft Expression Blend 3 ou 4

– Le SDK "Silverlight For Embedded" généré par Platform Builder lors de la création de l’OS Design (étape 4 de l’article précédent)

– WEST (Windows Embedded Silverlight Tools) installé avec Platform Builder.

– Une machine virtuelle Windows 7 Virtual PC avec un OS Windows Embedded 7

Les sources de l’application présentée ci dessous se trouvent ici .
Cet article est aussi disponible sur labs.bewise.fr

1 – Configuration du SDK

Le SDK généré par Platform Builder contient malheureusement un petit bug d’installation. Les chemins d’include ajoutés à Visual Studio lors de l’installation ne sont pas mis dans le bon ordre et si vous ne changez pas cette configuration, vos applications ne compileront tout simplement pas, avec des erreurs de type "malloc is undefined". De ce que j’ai eu comme échos, ce bug est bien identifié chez Microsoft est sera corrigé dans la RTM de Windows Embedded 7.

Pour configurer le SDK il faut suivre la procédure suivante :

– Lancer Visual Studio 2008, aller dans le menu outils puis Options

– Sélectionner les options pour "Projets et Solutions" et "VC++ Directories" .

– Sélectionner la "Platform" correspondant au SDK installé, puis afficher les dossiers "Include"

image

– Vérifier que les 2 chemins pour le SDK sont bien en tête de liste !

– Faire de même pour les dossiers "Libraries" :

image

Le SDK est maintenant correctement configuré.Vous n’aurez plus à faire cette configuration car elle s’appliquera à tous vos projets ciblant cette plateforme.

2-Mon premier projet

Nous allons  maintenant créer le projet de notre première application. Le principe est simple : il faut d’abord créer une application Silverlight "classique", c’est à dire C# en version 3.0. Dans cette application il faut mettre en place au moins la partie graphique, c’est à dire les pages XAML. Le code behind en C# sera "perdu" dans le sens où il ne sera pas porté automatiquement par les outils. Ceci dit le code C++ proposé par le SDK Silverlight pour Windows Embedded est très proche du code C# classique, donc l’effort de portage ne sera pas très complexe. Vous pouvez donc mettre un minimum de code C# si cela vous permet par exemple de déclencher des story-boards ou autres éléments qui vous permettrons de tester l’application avant de la "transformer" en application Embedded. Notez cependant qu’une des "grosses" limitations est que le DataBinding n’est pas supporté côté Embedded. Donc inutile de vous embêter à faire du MVVM en C# si c’est pour le porter en C++ côté Embedded.

Pour commencer nous allons faire simple et en passant par Microsoft Expression Blend :

– Créer un projet Silverlight classique, avec un site web, par contre il faut cibler Silverlight 3

– Les sources du projet doivent être placées dans un chemin qui ne contient pas d’espace ni de caractères spéciaux. En effet l’outil WEST qui importera le projet Silverlight contient un bug et ne sait pas aller chercher des projet dans des dossiers contenant des espaces ( les joies du développement pour des périphériques embarqués .)

image

– Créer sur la MainPage.xaml une première interface. Je fait très simple : un TextBlock avec comme texte ‘"Hello Embedded"

image

Il faut maintenant importer ce projet Silverlight "classique" dans Visual Studio 2008. Lors de la préparation de notre environnement, les outils WEST ont été installés. Ces outils nous fournissent un modèle de projet accompagné d’un assistant qui va générer tout le "squelette" C++ de notre application embarquée et même écrire le code C++ "qui va bien" pour charger le XAML et l’afficher. Il ne nous restera plus qu’à mettre le code C++ métier pour alimenter par exemple le contenu de nos TextBlock ou déclencher les story-boards ou quoique ce soit que nous aurions fait en C#.

– Dans VS 2008 créer un projet C++ / Smart device / Application Silverlight pour Windows Embedded :

image

– Dans l’assistant qui suit, choisir le bon SDK si il y en a plusieurs. D’où l’intérêt de l’avoir nommé correctement lors de sa préparation. Si vous avez un SDK pour l’émulateur et un SDK pour un device réel bien sûr vous n’aurez pas à créer 2 projets différents. Le SDK cible peut être changé dans la configuration de Build.

image

– Sélectionner le projet Silverlight (c’est là qu’il ne faut pas d’espaces dans le chemin). L’assistant détecte toutes les pages XAML ainsi que les différentes ressources éventuelles (images).

image

– Si le projet Silverlight n’utilise pas des choses non supportées par la version Embedded (DataBinding, Custom Controls), la validation doit passer. Des avertissements seront levés par exemple si des expressions de Binding sont détectées dans le code xaml, mais cela ne vous empêchera pas de faire fonctionner l’application. Le binding ne sera juste pas exécuté.

image

Notre projet C++ Silverlight pour Windows Embedded 7 est maintenant crée. Pour chaque page xaml on retrouve un fichier .h et un fichier .cpp (donc une classe C++) du même nom. Un certain nombre de méthodes ont été générées automatiquement comme par exemple la méthode "OnLoaded" où vous allez pouvoir ajouter le code nécessaire pour modifier le contenu de vos éléments graphiques.

Pour manipuler vos éléments xaml depuis le code behind, il y a une étape obligatoire. Cette étape je ne l’ai pas suivie dans l’exemple du "Hello World" car je n’ai pas besoin de faire de manipulation depuis le C++. Pour chaque éléments que vous souhaitez "piloter" ou sur lequel vous souhaitez intercepter un évènement (comme le click par exemple) il faut placer un attribut x:Name dans le XAML. L’outil WEST détectera cet attribut et dans le code C++ qu’il génèrera vous créera des variables pointant directement sur ces objets.

Si l’application Silverlight est mise à jour (côté Blend), il faut "rafraichir" le projet C++ pour que les nouveaux éléments xaml soient intégrés, et le code C++ auto généré remis à jour. Cette mise à jour n’est pas destructive sur le code behind C++ éventuellement déjà codé et ce passe très bien. Vous pouvez donc y aller sans crainte. Pour faire cette opération il faut faire :

– Menu "Outils" puis "Silverlight Embedded Tools" puis "Update Silverlight for Windows Embedded Project"

Si des évènements de types OnClick par exemple étaient déclarés dans le XAML et branchés sur des méthodes C# on retrouve les signatures équivalentes générés dans le C++. Il n’ a plus qu’à coder le traitement de l’évènement en C++. Si vous n’aviez pas "branché" ces évènements au préalable côté C# vous pouvez le faire via l’éditeur d’évènements fourni par WEST :

– Dans le menu "Outils / Silverlight Embedded Tools" il y a aussi le menu  "Windows Embedded Event" qui s’affiche comme une fenêtre de propriétés à condition d’avoir le focus sur un fichier XAML dans l’éditeur. Cet éditeur permet de générer les signatures de méthodes C++ pour les évènements disponibles sur les objets XAML nommés.

– Choisir l’élément XAML nommé qui nous intéresse, puis double cliquer dans la case "Handler" de l’évènement à intercepter. La méthode C++ est générée automatiquement et son branchement aussi (voir méthode OnLoad).

image

Notre première application est prête. Il nous faut maintenant la compiler puis la déployer sur l’émulateur.

3 – Déployer et débugger sur la machine virtuelle Windows Embedded 7

Dans l’article précédent nous avons mis en place la machine virtuelle pour tester nos applications. Sur cette VM , si ce n’est pas déjà le cas,il faut configurer une carte réseau mappée sur votre carte physique

image

Ensuite nous pouvons démarrer la VM. Il va nous falloir suivre une petite procédure pour permettre à notre PC de développement de se connecter à notre machine virtuelle pour déployer et débuguer. Nous n’allons pas utiliser ActiveSync mais directement passer en TCP. Il nous faut d’une part relever l’IP de notre émulateur, d’autre part l’indiquer à notre Visual Studio et enfin autoriser les connexions distantes sur notre émulateur.

ATTENTION de ne pas utiliser le clavier à l’intérieur de la VM, utiliser le clavier virtuel. Il y a un bug à partir de la première touche de clavier que vous taperez et vous entendrez des bips en continu. Dans ce cas la seule solution reste le redémarrage de la VM.

– Lancer un prompt sur la VM puis taper ipconfig pour déterminer son IP

image

image

– Une autre solution plus simple consiste aussi à utiliser l’icone de carte réseau en bas à droite (près de l’heure) qui vous affichera l’IP actuelle de votre device.

– Dans Visual Studio 2008, aller dans le menu Options / Device Options, ou en utilisant l’icone adéquate :

image 

– Sélectionner la plateforme correspondant au SDK, puis le device correspondant (en principe il n’y en a qu’un) :, et cliquer sur propriétés

image

– Sur la fenêtre suivant cliquer sur "Configure" pour le mode de transport TCP :

image

– Utiliser une IP spécifique et renseigner l’IP relevée précédemment sur la VM :

image

– Faire ok pour fermer les fenêtres.

– Retourner sur la VM Win CE 7, lancer le "Windows Explorer" et aller dans le dossier "Windows".

– Exécuter les applications " CMAccept" et "ConManClient2". Pour rappel nous avons placé ces fichiers dans notre OS lors du précédent article. Ces outils permettent d’autoriser la connexion distante ainsi que le débogage distant.

image

– A partir de là il faut se connecter via Visual Studio 2008 dans les 2 minutes , sinon il faut relancer ces 2 utilitaires

– Dans Visual Studio, utiliser l’icone pour se connecter au device

image

image

image

Nous pouvons maintenant compiler l’application (en Debug) et l’exécuter (F5). Si tout est correctement configuré elle est déployée automatiquement sur le device sur lequel Visual Studio est connecté et l’application s’affiche dans la VM :

image

Pour ce qui est du débogage, une limitation importante à ne pas oublier : le "step in" n’est pas supporté. Vous devez donc placer explicitement un point d’arrêt sur chaque ligne où vous souhaitez vous arrêter.

Conclusion

Nous avons mis en place notre première application Silverlight pour Windows Embedded 7. Cependant nous nous sommes contentés d’afficher du XAML sans plus de code behind C++. De plus notre application n’est pas aux bonnes dimensions, n’a pas de bouton pour se fermer et surtout est ici trop triviale pour démontrer l’intérêt réel d’une interface en Silverlight dans le monde de l’embarqué.

Je prévois donc un troisième article plus avancé sur l’API C++ fournie par le SDK pour vous donner les points d’entrées utiles tels que le démarrage de story-boards, la modification du contenu d’éléments graphiques, l’utilisation des Visual State.

En attendant je vous invite à voir cette vidéo qui vous présente un des projets réalisés entre autre par Bewise (partie IHM) où j’ai activement participé à l’intégration XAML sur un device embarqué : http://blogs.msdn.com/b/obloch/archive/2011/02/23/freescale-home-energy-gateway-reference-platform-powered-by-windows-embedded-compact-7.aspx

Remerciements

Je tiens à remercier tout particulièrement les personnes suivantes qui ont participé de prêt au projet "Home Energy Gateway" qui m’a permis de découvrir cette nouvelle plateforme et même de la présenter au Techdays 2011 :

– Olivier COME (Freescale)

Olivier BLOCH (Microsoft)

Sacha LEROUX (Bewise)

Merci aussi à Benoit Laut et Alexandre Barbier pour la relecture de ces deux articles.

Publié dans Silverlight Tagués avec : , , , , ,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Verifions que vous êtes un humain * Time limit is exhausted. Please reload CAPTCHA.

Archives

Social

  • Twitter
  • LinkedIn
  • Flux RSS
  • mvp
  • technet
  • Google+