Le Out of Browser

De plus en plus, des applications web sont utilisées en tant qu’application de bureau. La montée en puissance du cloud-computing, et l’apparition du mode Out-Of-Browser montrent clairement que c’est la tendance.

Le Out Of Browser (OOB) consiste simplement à développer une application web (donc, dans le navigateur), et  “l’installer” sur le bureau de l’utilisateur. En somme, plus besoin d’ouvrir son navigateur, il suffit de cliquer sur une icône du bureau.

Nous allons ici nous intéresser à une nouveauté de Silverlight 4 : les fenêtres « chrome ». Nous allons donc redesigner ces petits boutons qui depuis des années, permettent de minimiser, maximiser, ou encore fermer une fenêtre.

Rendre notre application Out Of Browser

Bien entendu, puisque l’on parle de fenêtre d’application, il va tout d’abord nous falloir mettre notre application sur le bureau. Pour cela, rien de plus simple. Il vous suffit de vous rendre dans les propriétés d’un projet Silverlight, et de cliquer sur la case « Enable Running application out of the browser ». Mais cela ne suffit pas pour notre cas. En effet, Silverlight 4 introduit le concept de « trusted applications », des applications OOB s’exécutant avec des droits élevés (et pouvant potentiellement faire énormément de choses). C’est cela qui nous permettra le changement d’aspect de notre fenêtre. Pour activer ce mode, il vous faudra cliquer dans les propriétés du projet, sur le bouton des options OOB. Une fenêtre va apparaître. Tout en bas de celle-ci, vous devrez cocher la case qui permet d’obtenir ces fameux droits élevés. En dessous, une liste s’active, et nous intéresse. En effet, elle permet de changer le style de fenêtre de notre application.

Nous allons ici définir un style « Borderless Round Corners ». Cela enlèvera la barre de contrôle habituelle de Windows, et fera des coins de fenêtre arrondis. Très esthétique !

Déplacer notre fenêtre

Nous avons maintenant notre fenêtre, mais pas de quoi la contrôler ! Qu’à cela ne tienne ! Nous allons tout d’abord apprendre à la déplacer. Pour cela, vous pouvez créer un rectangle par exemple, en haut de votre application. Un superbe rectangle de couleur Aqua par exemple, fera parfaitement l’affaire.

Une fois cela fait, définissez un événement MouseLeftButtonDown dessus.

Lors de l’appel à cette méthode, nous allons devoir vérifier deux choses : que notre application est bien out of browser, et que celle-ci dispose de droits administrateurs. Nous allons pour cela utiliser des attributs de l’objet MainWindow, qui représente notre fenêtre. Si les deux conditions sont bien remplies, nous pouvons commencer le déplacement, par l’appel de la méthode DragMove de MainWindow.

private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

if (App.Current.IsRunningOutOfBrowser

&& App.Current.HasElevatedPermissions)

App.Current.MainWindow.DragMove();

}

Vous pouvez lancer votre application, et vous verrez que le déplacement est opérationnel.

Redimensionner notre fenêtre

Il est possible que vous souhaitiez laisser la possibilité à votre utilisateur de redimensionner la fenêtre. Pour cela, rien de plus simple. Commencez par définir 4 coins à votre application, avec des rectangles par exemple.

Ensuite, il ne reste plus qu’à définir pour chacun un événement en cas de clic. Dans la fonction appelée, il nous faudra refaire bien entendu, nos deux vérifications, et appeler, en cas de succès, la méthode DragResize de MainWindow. Celle-ci prend en argument un coin de l’application pour le redimensionnement. Mettez celui qui correspond au sender d’événement.

private void rectangle2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

if (App.Current.IsRunningOutOfBrowser

&& App.Current.HasElevatedPermissions)

App.Current.MainWindow.DragResize(WindowResizeEdge.TopLeft);

}

Facile n’est-ce pas ?

Définir nos boutons

Dernière étape : afficher des boutons pour permettre de minimiser/maximiser notre fenêtre, et la fermer. Commencez par les définir, et sur chacun, invoquez  une méthode sur MouseLeftButtonDown.

Pour chacune, n’oubliez pas de faire nos deux vérifications habituelles.  Une autre méthode est de n’afficher vos boutons que si les deux conditions sont vérifiées. Cela permet de faire une seule vérification pour le tout.

Pour minimiser ou maximiser notre fenêtre, il suffit de changer le WindowState de notre MainWindow, qui est une énumération. Vous pouvez le définir sur maximisé, minimisé, ou normal (la fenêtre reprendra alors sa taille d’origine).

De là, il devient très simple de définir nos méthodes :

private void OOB_WindowMaximize(object sender, MouseButtonEventArgs e)

{

App.Current.MainWindow.WindowState = WindowState.Maximized;

}

private void OOB_WindowMinimize(object sender, MouseButtonEventArgs e)

{

App.Current.MainWindow.WindowState = WindowState.Minimized;

}

Et pour fermer notre fenêtre ? Encore une fois, c’est très simple. Il suffit d’un simple appel à la méthode Close de notre MainWindow.

private void OOB_WindowClose(object sender, MouseButtonEventArgs e)

{

App.Current.MainWindow.Close();

}

Conclusion

Comme vous le voyez, redéfinir les événements de gestion d’une fenêtre est simple, et permet d’avoir quelque chose de visuellement plus personnalisé, si ce n’est plus joli. Si vous voulez aller plus loin, pourquoi ne pas changer le WindowState à Normal lorsque vous déplacez la fenêtre (pour reproduire le comportement d’une fenêtre normale sur Window). Vous pourriez également permettre de revenir en état normal après un clic sur le bouton maximiser, lorsque notre fenêtre l’est déjà. Et pour ceux qui voudrait avoir un petit aperçu de ce que l’on peut obtenir :

C#, Silverlight