Traduction

Différentes vues

Voici encore une mise à jour de ma présentation du Mix 09 intitulée « building business applications with Silverlight 3 ».

Vous pouvez regarder

La démo requiert les éléments suivants (tout est 100 % gratuit) :

Vous pouvez, de plus, télécharger les fichiers de la démo complète et jeter un œil à l'application en cours d'exécution.

Dans cet article, nous allons parler des différentes vues de notre logique applicative.

Maintenant, intéressons-nous à mettre des vues différentes à notre application. L'un des éléments-clefs pour la réalisation de différentes vues sont les liens profonds. Voyons comment ajouter cela à notre application.

Image non disponible

Tout d'abord, nous devons ajouter un Textbox afin d'afficher le lien profond pour chacun de nos super employés. Pour ce faire, ajoutez le code ci-dessous juste après la balise de fermeture du DataForm.

Image non disponible

Ajoutez l'évènement SelectionChanged à notre Datagrid.

Image non disponible

Et connectez-le en code behind.

Image non disponible
Image non disponible

Maintenant, nous devons rendre la page suffisamment intelligente afin de connaitre ce lien profond :

Image non disponible

Maintenant, lancez l'application, faites un copier-coller de cette adresse dans un navigateur qui affichera exactement cet enregistrement.

Image non disponible

Ok, maintenant que nous disposons d'un lien profond, que pouvons-nous faire avec ? Et bien, nous pouvons envoyer ce lien par mail, par messagerie instantanée, l'inclure dans un blog, etc. Mais qu'en est-il si nous voulons que des moteurs de recherche soient capables de trouver les enregistrements dans notre site ? Il s'avère qu'il y a pour cela un format standard appelé sitemap (http://sitemap.org/). Vous pouvez voir un exemple concret ici : http://amazon.com/robots.txt. Pour ajouter cela à notre application, faites un clic droit sur votre projet web, Add > New Item > SearchSitemap.

Image non disponible

Ceci ajoute robots.txt et sitemap.aspx à notre projet. Avant de continuer, nous allons utiliser la page Default.aspx comme page de démarrage. Pour ce faire, nous allons faire un copier-coller de l'ensemble du contenu du fichier BusinessApplicationTestPage.aspx dans Default.aspx. Une fois cela fait, vérifiez que les deux premières lignes de ce dernier sont bien comme suit :

Image non disponible

Puis, allez dans Project, MonApplication.web Properties. Assurez-vous d'avoir MonApplication.web en surbrillance.

Image non disponible

Enfin, allez dans l'onglet Web et effacez le champ Start Action - Specific Page

Image non disponible

Ceci dans le but que l'application utilise la page Default.aspx plutôt que BusinessApplicationTestPage.aspx comme page de démarrage. Enfin, modifiez la méthode dataGrid1_SelectionChanged afin de ne plus se référer à BusinessApplicationTestPage.aspx comme suit :

Image non disponible

Ceci étant fait, voyons comment personnaliser le fichier sitemap.aspx. Notez que nous utilisons un nouveau contrôle de source de données ASP.NET conçu pour fonctionner avec la classe DomainService. Ceci nous donne accès au serveur pour la même logique applicative d'ASP.NET et Silverlight. Rendons-nous dans le fichier Sitemap.aspx afin d'ajouter le code suivant :

Image non disponible

Une dernière chose à faire consiste à permettre au côté serveur d'accéder à l'ID de l'employé. Dans Default.aspx.cs, ajoutez :

Image non disponible

Maintenant, en faisant un clic droit sur Sitemap.aspx, faites View in Browser :

Image non disponible

Et voilà le résultat :

Image non disponible

Changez l'adresse par Robots.txt et vous devriez obtenir ceci :

Image non disponible

Si vous faites un copier-coller d'une adresse du sitemap, vous pouvez constater que cela fonctionne parfaitement.

Image non disponible

Ok, ceci fonctionne parfaitement. Maintenant, les moteurs de recherche peuvent trouver n'importe quelle entité dans notre application. Mais que vont les moteurs de recherche vraiment y trouver comme cela ? Les moteurs de recherche sont performants pour analyser du html, mais les contenus dynamiques tels que ceux que nous avons là ou les sites Ajax sont plus difficiles à traiter pour eux. L'art de ce type de référencement est appelé Optimisation pour les moteurs de recherche (SEO, Search Engine Optimization en anglais, nous emploierons ici le terme SEO). Rendons-nous dans notre page Default.aspx. Étant donné que nous avons modelé notre logique applicative dans une classe DomainService, il est très facile d'ajouter une vue en HTML standard. Ajoutez juste le code suivant dans la balise object dans Default.aspx :

Image non disponible

Nous avons également besoin d'une méthode de domaine GetSuperEmployee afin de prendre en charge ce code. Retournez donc dans votre service SuperEmployeeDomainService.cs et ajoutez :

Image non disponible

Maintenant, nous devons désactiver Silverlight dans notre navigateur parce que les moteurs de recherche ne disposent pas de ce plugin.

Image non disponible

Et effectuez un rafraichissement de page sur un lien profond.

Image non disponible

Plutôt sympa, non ? Maintenant les moteurs de recherche (avec ou sans Silverlight) peuvent accéder aux données. Mais, cela fonctionne-t-il vraiment ? Essayez les recherches suivantes : Super Employé Alfred (Yahoo) et Super Employée Alfred (Google).

Bien, ceci est une vue serveur, essayons maintenant une autre vue côté client. Nous allons exporter ces données dans Excel ! Pour ce faire, ajoutez le fichier excelTemplate.txt à la racine du projet côté client. (Vous pouvez télécharger ce fichier ici : http://pagesperso-orange.fr/aristidi/files/excelTemplate.txt). Puis ajoutez un bouton dans votre fichier Home.xaml pour exporter vers Excel :

Image non disponible

Enfin, écrivez le fichier Excel. Notez que tout est en accès sécurisé, l'utilisateur doit sélectionner la destination du fichier. Le développeur ne pourra plus avoir accès à l'emplacement du fichier. Maintenant, dans votre fichier Home.xaml.cs, ajoutez la méthode suivante :

Image non disponible

Enfin, exécutez de nouveau l'application (après avoir pensé à réactiver Silverlight dans votre navigateur).

Image non disponible
Image non disponible

Cela crée un fichier Excel à l'emplacement utilisateur sélectionné.

Image non disponible

En ouvrant et en faisant un peu de mise en forme...

Image non disponible

Et maintenant, la vue finale... en mode « out-of-browser ».

Sélectionnez les propriétés sur l'application cliente :

Image non disponible

Éditez les paramètres :

Image non disponible

Lancez l'application. Effectuez un clic droit et sélectionnez Installer Application.

Image non disponible
Image non disponible

Ajoutez un lien sur le bureau.

Image non disponible

Et il ne nous reste plus qu'à lancer l'application !

Image non disponible

Conclusion

Ceci conclut donc la quatrième partie de cette série. La partie suivante abordera les sujets suivants : Astoria, ajouter une référence de service et WinForms.

Remerciements

Je tiens ici à remercier Brad Abrams pour nous avoir autorisé à traduire son article.
Je remercie également ClaudeLELOUP pour sa relecture et ses propositions.