dimanche 4 octobre 2009

Exemple d'application d'entreprises pour Silverlight 3 et .NET RIA Services. - Partie 1: les bases de la navigation



Partie 1 : Les bases de la navigation

Cet exercice requière (tout est gratuit et le restera) :
1- VS2008 SP1 (qui comprend Sql Express 2008)
2 - Silverlight 3.0
3 - .NET RIA Services July’09 Preview (pour cet exercice, ceci est optionnel)

L'original en anglais est diponible ici: Part 1: Navigation Basics


Aujourd’hui nous allons parler de l’apparence professionnelle.

Apparence Professionnelle
Les applications d'entreprises doivent être professionnelles, mais combien d’entre-nous ont un designer à temps plein à notre travail ? Je suppose très peu. C’est pour cela que nous avons investi beaucoup d’efforts pour une prise en main rapide. Les projets Silverlight Navigation Application et et Silverlight Business Application (qui ajoute un support de login / délogin) démarrent avec une structure d’application normalisé, un « look and feel » agréable et très simple à modifier, même pour un développeur.

- Sous Visual Studio, cliquez sur New Project et choisissez Silverlight Business Application.




- Pressez la touche F5 pour lancer le projet. Une fenêtre apparait alors vous demandant s’il faut modifier le fichier web.config. Sélectionner Modify et cliquez sur OK.






- Vous devriez alors obtenir quelque chose comme cela :




Nous obtenons alors une application Silverlight parfaitement fonctionnelle (bien qu’elle ne fasse pas grand-chose pour le moment). Notez les liens de navigation (home et about).

Notez que les boutons suivants et précédents fonctionnent parfaitement.




Notez également le lien profond qui pointe exactement là où vous êtes dans l’application Silverlight.




Vous pouvez la copier/coller dans un site web, un bog, un mail ou autre et le destinataire du message sera dirigé exactement au même point de l’application. Et ce, quelque soit le navigateur utilisé.




Parfois, même les meilleurs développeurs font des erreurs dans leurs applications. Les liens qui sont invalides ou les erreurs génèrent des exceptions. Le modèle Navigation Application ou Business Application offre une manière très facile de les gérer. Tapez une mauvaise URL dans votre application et une fenêtre d’erreur apparaitra.




Maintenant procédons à un peu de modifications.
Tout d’abord, ajoutez une nouvelle page.
Faites un clic droit sur Views dans le projet client et sélectionnez Add New Item, sélectionnez Silverlight Page. Donnez-lui un nom ou laissez celui par défaut (pour cet exemple, mieux vaut la nommer MaPremierePage).








Lorsque la page est ouverte, insérer le code ci-dessous juste avant la balise de fermeture de la grille.




Maintenant, connectons cette page au menu de navigation. Dans le fichier MainPage.xaml ajouter un nouveau bouton en suivant le même format que ceux qui sont déjà présent.





Maintenant, tant que nous y sommes, allons personnaliser le modèle de fenêtre de message d’erreur. Ouvrez View/ErrorWindow.xaml. Vous pouvez changer le format, enregistrer l’erreur sur un journal du serveur ou personnaliser le texte que les utilisateurs finaux verront apparaitre.




Maintenant, changeons l’intitulé du site. Tout d’abord, dans MainPage.xaml , changez le nom « Application Name » en Service de Placement de Super Employés.





Finalement, changeons la couleur du bandeau du haut afin qu’il corresponde à l’image de votre société. Ouvrez Style.xaml dans le répertoire Assets. Ce fichier contient toutes les définitions de styles de votre application. Nous allons voir qu’il est aisé, même pour un développeur de modifier l’apparence d’un site.




Appuyez sur F5 et voilà ce que vous devriez obtenir :








Comme vous pouvez le constater, mes choix de couleurs ne sont pas très bons. Toutefois, des styles complets sont disponibles. Vous n’avez qu’à remplacer le fichier Styles.xaml dans le dossier Assets par ceux qui sont proposés ici :

http://timheuer.com/blog/archive/2009/07/09/free-silverlight-application-themes-silverlight-3.aspx



Aurora :


Frosted Cinnamon Toast:


Lime Shocker:


Pinky:


Retro:


Skyline:



Aucun commentaire:

Enregistrer un commentaire