3 Extensible Application Markup Language (XAML) Au chapitre précédent, nous avons développé une application qui possédait une interface simple définie à l aide d un fichier dont l extension était.xaml. XAML est l acronyme de Extensible Application Markup Language. Son utilisation s est généralisée grâce aux applications WPF ( Windows Presentation Foundation) et Silverlight. Son emploi avec les applications Windows 8 ne devrait pas poser de difficultés aux développeurs qui l ont associé par le passé à d autres technologies. XAML est un langage de balisage déclaratif fondé sur XML et développé par Microsoft. On le décrit souvent à tort comme un langage d interface utilisateur, en le comparant à HTML. Bien que XAML constitue une technologie essentielle sur laquelle se fondent les interfaces graphiques des applications Windows 8, il ne se limite pas à la création d éléments d interface utilisateur pour des plateformes comme Silverlight et WPF. En réalité, XAML est sous-jacent à d autres technologies, notamment WF (Windows Workfl ow Foundation). XAML se définit comme un système qui permet de représenter des informations structurées. Il s articule autour de trois types de nœud : objets, membres et texte. Les objets sont soit des types CLR instanciés par l analyseur XAML, soit des appels à des composants WinRT. Les membres font référence à des propriétés de ces types. Le texte permet de fixer des valeurs. Le plus simple consiste à voir un document XAML comme un graphe élaboré d objets que l on définit de manière déclarative en utilisant XML. À la section suivante, nous expliquerons comment se fait l instanciation déclarative des objets en XAML. Déclarer l interface utilisateur La définition de l interface utilisateur d une application Windows 8 développée en C#, VB ou C++ se fait avec XAML. Elle se fonde sur un ensemble de déclarations d objets que l application Windows 8 va analyser et créer afin d obtenir l interface
56 Développement d applications Windows 8 avec C# et XAML utilisateur au comportement souhaité. Examinons le Listing 3.1. Ce document XAML correspond à l intégralité de l interface utilisateur de l application ImageHelper. Listing 3.1 : Utiliser XAML pour déclarer l interface utilisateur <Page x:class="imagehelper.mainpage" IsTabStop="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:imagehelper" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:name="imagetarget" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/> <StackPanel Grid.Row="1" Margin="10" HorizontalAlignment="Center" Orientation="Horizontal"> <Button x:name="capturebutton" Content="Prendre une photo" Click="CaptureButton_Click_1"/> <Button x:name="savebutton" Content="Enregistrer la photo" Click="SaveButton_Click_1" Margin="20 0 0 0"/> </StackPanel> </Grid> </Page> Ce contenu XAML demande à l analyseur de créer un objet Page, qui possède certaines propriétés. Par exemple, il fait référence à la classe MainPage afin d indiquer l emplacement du code de la page. Celle-ci comprend un objet enfant de type Grid, qui définit la disposition des éléments sur l écran. La grille fait référence à une ressource pour la couleur d arrière-plan (les ressources seront expliquées plus loin dans ce chapitre). Un objet Image est utilisé pour contenir le cliché ou l image partagée. Les éléments Button affichent non seulement des boutons à l écran mais précisent également comment les relier au code applicatif pour le traitement des clics. Tous les éléments donnés par l exemple du Listing 3.1 auraient pu être obtenus par programmation. Il est possible d instancier un objet Page, de créer un nouvel objet Grid et de l affecter à la page, etc. Toutefois, avec XAML, il est plus facile de déclarer la mise en page et d en afficher un aperçu pendant la conception pour déterminer si l interface utilisateur résultante convient. Le document commence par des déclarations d espaces de noms importantes. En XAML et XML, les espaces de noms servent à fournir des éléments et des attributs
Chapitre 3 Extensible Application Markup Language (XAML) 57 dont les noms sont uniques en définissant une étendue. L attribut x:class joue un rôle spécial dans l espace de noms XAML (indiqué par la partie x: de l attribut) en donnant la déclaration sous forme d une classe partielle afin qu elle soit mappée avec le fichier de code sous-jacent. L espace de nom xmlns correspond à l espace de noms XML par défaut et nous permet de définir nos propres étendues. Comme nous ajoutons une déclaration using au début d un fichier C# pour inclure un espace de noms, nous pouvons nous servir de xmlns: en XAML pour définir une étendue et utiliser d autres espaces de noms. Pour affecter l espace de noms MonApp.MonEspaceDeNoms au préfixe local, il suffit d ajouter la ligne suivante aux déclarations : xmlns:local="using:monapp.monespacedenoms" Ensuite, voici comment faire référence au type MonType dans l espace de noms MonApp.MonEspaceDeNoms : <local:montype/> Un assembly qui comprend un espace de noms cible doit être référencé afin de déclarer une étendue pour cet espace de noms et l assembly qui contient le type cible doit être référencé par le projet pour que les références à ce type dans le contenu XAML puissent être résolues. Vous aurez peut-être remarqué que les éléments qui suivent les déclarations d espaces de noms XAML forment une sorte de hiérarchie. Nous avons un objet parent, avec des enfants, et chaque enfant peut avoir les siens. Certains éléments peuvent être désactivés et configurés pour ne pas être affichés. Les éléments qui sont affichés constituent une hiérarchie particulière appelée arborescence d éléments visuels. L arborescence d éléments visuels L arborescence d élé ments visuels comprend les éléments de l interface utilisateur qui sont affichés à l écran. Le schéma de la Figure 3.1 représente l arborescence de notre application ImageHelper très simple. Figure 3.1 L arborescence d éléments visuels. Page Grid Image StackPanel Button "Prendre une photo" Button "Enregistrer la photo"
58 Développement d applications Windows 8 avec C# et XAML Il est essentiel de comprendre l arborescence d éléments visuels car ceux-ci peuvent générer des événements spéciaux appelés événements routés. Afin d en comprendre l importance, prenons pour exemple un utilisateur qui touche une partie de l écran. Cette zone peut correspondre à l endroit où l un des boutons est affiché. Quel est l élément de l interface utilisateur qui doit traiter l événement généré par l action? Techniquement, le bouton fait partie du StackPanel, qui est un enfant du Grid. En réalité, l utilisateur touche ces trois éléments en même temps. Quand cela se produit, un événement généré se propage vers le haut dans l arborescence d éléments visuels. Il est déclenché au niveau de l élément interne, c est-à-dire le plus bas dans l arborescence. Pour voir ce fonctionnement en action, téléchargez le projet ImageHelper2. Cet exemple ajoute un événement PointerPressed aux éléments Grid et StackPanel, ainsi qu un élément Rectangle rouge entre les deux boutons : <Rectangle Width="30" Height="30" Fill="Red" Margin="20 0 0 0" PointerPressed="Rectangle_PointerPressed_1"/> Lorsque, dans l outil de conception, nous ajoutons un événement à un élément XAML, il suffit d appuyer sur la touche Tab pour générer automatiquement le code du gestionnaire de l événement. L événement "attend" que quelque chose se produise. Lorsque cela arrive, le gestionnaire qui correspond à l événement est invoqué. Il peut effectuer n importe quelle opération, comme accéder à la webcam pour prendre une photo ou ouvrir la boîte de dialogue d enregistrement d un fichier. L événement PointerPressed est déclenché lorsque l utilisateur tape sur l écran avec son doigt ou un stylet, ou lorsqu il clique du bouton gauche avec une souris. Voilà l une des façons dont Windows 8 simplifie notre travail de développeur : la gestion de plusieurs périphériques d entrée est facile. Le code de traitement de ces événements écrit simplement du texte dans la fenêtre de débogage et l ajoute à un bloc de texte sur la page : private void ShowPointerPressed(string source) { var text = string.format("appui venant de {0}", source); Events.Text = string.format("{0} // {1}", Events.Text, text); Debug.WriteLine(text); } Compilez et exécutez l application dans le débogueur (appuyez sur F5). Cliquez ou tapez sur le rectangle rouge. Que se passe-t-il? Trois événements doivent apparaître à l écran et dans la fenêtre de débogage (si elle ne s affiche pas, appuyez sur Ctrl+Alt+O) : // Appui venant de Rectangle // Appui venant de StackPanel // Appui venant de Grid
Chapitre 3 Extensible Application Markup Language (XAML) 59 Cet affichage illustre la propagation de l événement. Il parcourt l arborescence d éléments visuels vers le haut, en partant du Rectangle, vers son élément StackPanel puis vers le Grid parent. Cliquez à présent sur l espace situé entre le rectangle et l un des boutons. Êtes-vous surpris par le résultat? Vous auriez pu penser que le déclenchement de l événement allait se faire dans le StackPanel, pour remonter ensuite dans le Grid, mais seul le Grid apparaît dans la fenêtre de débogage. Quelle est la raison de ce fonctionnement? Le moteur XAML est suffisamment intelligent pour reconnaître les "espaces vides" et ne pas déclencher d événements. Il suppose que nous ne voulons pas que l espace vide dans le StackPanel réagisse aux événements de toucher. Puisque le StackPanel ne définit aucun arrière-plan, il est transparent et tout appui dans un espace vide passera simplement "au travers" pour aller à l élément parent. L élément Grid définit un arrière-plan et est donc capable de traiter les événements de toucher. Modifiez StackPanel pour lui donner un fond gris en ajoutant le code indiqué en gras : <StackPanel Grid.Row="1" Margin="10" Background="Gray" PointerPressed="StackPanel_PointerPressed_1" HorizontalAlignment="Center" Orientation="Horizontal"> Pour que l espace vide traite les événements, il suffit de donner une valeur à l attribut Background. Si on choisit Transparent, le résultat visuel est identique à l absence d arrière-plan, mais le fonctionnement diffère. L arrière-plan existe avec une surface transparente capable de traiter des événements. L espace vide peut donc gérer les appuis, les appuis longs et les autres gestes. Exécutez à nouveau l application et tapez sur l un des espaces gris qui ne sont pas recouverts par un bouton ou le rectangle. Vous devez constater que le StackPanel intercepte à présent l événement. Cliquez sur le bouton Enregistrer la photo. Êtes-vous surpris par le résultat? (Aucun événement n est généré.) Le mécanisme de propagation a la possibilité d arrêter la remontée de l événement dans l arborescence. L événement Click sur le bouton est en réalité équivalent à l événement PointerPressed et, puisque le bouton gère cet événement, il annule celui-ci afin qu il n aille pas plus loin. INFOS Dans le cas des tablettes Windows 8, vous avez plusieurs possibilités d interaction avec les applications. Vous pouvez "appuyer" sur un bouton en cliquant dessus, en le tapant avec un doigt ou en le touchant avec un stylet. Dans cet ouvrage, les verbes "cliquer" et "taper" correspondent à la même action, qu elle soit effectuée avec le bouton gauche de la souris, un doigt ou un stylet. Si nous voulons que vous réalisiez un geste précis, avec un dispositif particulier, nous l indiquerons clairement dans le texte. Lorsque c est possible, nous indiquerons également les raccourcis clavier et les mouvements de la souris qui équivalent à leurs homologues tactiles.