I. Partie 1 : Les bases de la navigation

Les applications d'entreprises doivent être professionnelles, mais combien d'entre-nous disposent d'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 connexion / déconnexion utilisateur) démarrent avec une structure d'application normalisée, 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.
image1.jpg
  • Pressez la touche F5 pour lancer le projet. Une fenêtre apparait alors vous demandant s'il faut modifier le fichier web.config. Sélectionnez Modify et cliquez sur OK.
image2.jpg
  • Vous devriez alors obtenir quelque chose comme cela :
image3.jpg

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 indique exactement là où vous vous situez dans l'application Silverlight.

image5.jpg

Vous pouvez le copier/coller dans un site web, un blog, 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é.

image6.jpg

Parfois, même les meilleurs développeurs font des erreurs dans leurs applications. Les liens qui sont invalides ou les exceptions génèrent des erreurs. 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.

image7.jpg

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, puis sélectionnez Silverlight Page. Donnez-lui un nom ou laissez celui par défaut (pour cet exemple, mieux vaut la nommer MaPremierePage).

image8.jpg
image9.jpg

Lorsque la page est ouverte, insérez le code ci-dessous juste avant la balise </Grid>

asp.net
Sélectionnez

<TextBlock Text="Hello World!"></TextBlock>

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

asp.net
Sélectionnez

<Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>

   <HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}" 
     NavigateUri="/MaPremierePage" TargetName="ContentFrame" Content="Ma première page"/>

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.

asp.net
Sélectionnez

<TextBlock x:Name="IntroductoryText" Grid.Row="0" Margin="0" 
               Text="Une erreur inconnue est survenue. Veuillez contacter l'administrateur du site pour plus d'information.."
               Width="398" TextWrapping="Wrap" HorizontalAlignment="Left"/>


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.

asp.net
Sélectionnez

<TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" 
               Text="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.

image10.jpg

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

image11.jpg
image12.jpg

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 :

sltheme-aurora.png

Frosted Cinnamon Toast :

sltheme-frostedcinnamontoast.png


Lime Shocker :

sltheme-limeshocker.png



Pinky :

sltheme-pinky.png



Retro :

retro.png



Skyline :

skyline.png



Subdued :

subdued.png

II. Conclusion

Voilà, ceci conclut donc la première partie. Il ne s'agit comme vous pouvez le constater que d'une brève introduction.

III. Liens