Windows Phone 8 : Introduction au XAML

() translation by (you can also view the original English article)

Le développement de logiciel se compose habituellement de deux étapes qui sont le développement de l'interface utilisateur et celui de la logique métier. Windows Phone n'échappe pas à ce paradigme. Le XAML est utilisé pour l'implémentation de l'interface utilisateur des applications Windows Phone.

1. Qu'est-ce que le XAML ?

Le XAML ou Extensible Application Markup Language est un langage déclaratif développé par Microsoft et utilisé pour le développement Windows Phone afin de créer les objets graphiques des interfaces utilisateurs. Si vous avez l'habitude du XML, un extrait de code XAML va vous sembler très familier. Le XAML est au C# ce que l'HTML est au développeur web. C'est la base de l'interface graphique utilisateur pour Windows Phone.

La plateforme Windows Phone possède une multitude de composants, comme les boutons, blocs de texte, textbox, etc. Et même s'il est possible de développer une application Windows Phone 8 en utilisant uniquement C#, cela serait lourd et incompréhensible.

Le XAML rend la création d'interface utilisateur beaucoup plus facile. Après avoir créé un nouveau projet ou une nouvelle page Windows Phone 8 dans Visual Studio, vous pouvez voir deux vues. La première affiche le code XAML alors que la seconde affiche au développeur sa représentation graphique.

Pour mieux comprendre, reprenons le projet que nous avions créé dans le tutoriel précédent dans lequel nous avons créé notre première application Windows Phone 8.

  <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contient le nom de l'application et le titre de la page-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - Ajouter d'autres composants ici-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        </Grid>
    </Grid>

Vous remarquerez immédiatement la même structure présente dans le XML ou l'HTML. Chaque élément en XAML représente un contrôle Windows Phone, que nous verrons plus tard dans cette série de tutoriels. Vous remarquerez que chaque élément possède une balise d'ouverture et une balise de fermeture, comme le XML ou l'HTML. Vous pouvez aussi voir que certains éléments disposent d'attributs supplémentaires, comme ci-dessous :

1	<ElementName Property1="Value" Property2="Value" ...>
2	<ChildElementName Property="Value">
3	</ChildElementName>
4	</ElementName>

Je considérerai chaque élément présent dans le XAML comme un contrôle car ils représentent un contrôle Windows Phone, lequels sont des objets faisant partis du framework. Chacun de ces contrôles peut avoir plusieurs propriétés. Certains d'entre eux, comme le Grid ou le StackPanel, peuvent contenir d'autres contrôles. Par exemple, regardez comment la propriété Name du StackPanel TitlePanel contient deux contrôles TextBlock.

Cette architecture hiérarchique permet au développeur de construire l'interface utilisateur d'une application Windows Phone avec beaucoup de facilité et décrit la structure entre les différents contrôles qui créé l'interface utilisateur d'une application Windows Phone.

2.XAML vs. Code

Comme je l'ai dit précédemment, il est possible de créer l'interface utilisateur d'une application Windows Phone entièrement en C#, sans utiliser de XAML. En réalité, ce n'est pas très pratique. Ce n'est pas recommandé car cela rend la création de l'interface désordonné et on peut vite s'éparpiller.

De plus, en utilisant seulement le C# pour créer l'interface utilisateur, les possibilités offertes par le concept MVVM, base du développement Windows Phone, seront grandement réduites. Cela signifie que certaines techniques, comme le data binding, seront plus difficiles à mettre en place.

Regardons de plus près les deux techniques, XAML et C# pour réaliser l'interface utilisateur d'une application. Pour cette comparaison, je vais d'abord vous montrer comment déclarer un Button et un TextBlock dans un StackPanel en utilisant le XAML. Je vous montrerais ensuite l'équivalent en C#.

XAML

<StackPanel>
    <TextBlock Margin="20">A Simple TextBlock</TextBlock>
    <Button Margin="10" HorizontalAlignment="Right" Content="Simple Button">
    </Button>
</StackPanel>

Vous pouvez constater à quel point le XAML ci-dessus est déclaratif. Il est simple de comprendre la hiérarchie des contrôles. Il y a un autre avantage lors de l'utilisation du XAML. Nous pouvons voir directement le rendu de nos changements dans Visual Studio via le panel de prévisualisation, qui est habituellement positionné à droite dans Visual Studio.

C#

Voyons maintenant comment implémenter la même interface utilisateur en utilsant le C# plutôt que le XAML.

//Création de notre StackPanel
StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;

//Création de notre TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Margin = new Thickness(10);
textBlock.Text = "A Simple TextBlock";
stackPanel.Children.Add(textBlock);

//Création de notre Button
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "Simple Button";
stackPanel.Children.Add(button);

Comme vous pouvez le voir, c'est un peu plus brouillon comparé au XAML et nous n'avons pas la possibilité de voir le rendu de nos modifications en temps réel. Vous avez aussi peut-être remarqué que le code C# fait presque deux fois plus de lignes et n'est pas aussi lisible que l'extrait XAML que nous avons vu précédemment.

Pour le développement Windows Phone, le XAML est la méthode recommandée pour la création d'interface utilisateur. Cependant, il peut arriver d'avoir besoin d'implémenter des contrôles plus compliqués qui seront difficiles à mettre en place en XAML. Par exemple, lorsqu'un contrôle doit être dynamique selon certains facteurs. Même si ces situation sont moins fréquentes, il est toujours bon de savoir que nous pouvons compter sur le C#.

Conclusion

Le XAML fait partie intégrale du développement Windows Phone et une bonne compréhension est alors essentielle. Je vous encourage à regarder la documentation officielle du XAML de Microsoft sur le site Windows Phone Dev Center. Il contient des informations détaillées sur l'utilisation du XAML pour le développement de Windows Phone.

Dans ce tutoriel, nous avons vu le rôle du XAML dans le développement Windows Phone et nous l'avons comparé au C# pour la création d'interface utilisateur. Dans le prochain tutoriel, nous continuerons de travailler avec le XAML. Nous approfondirons les contrôles les plus courants, à savoir leur utilisation et la façon de les mettre en œuvre dans une application Windows Phone 8.