BeginnerLayoutTous les articles

XML – Sa syntaxe et son utilisation

Salut c’est Sébastien. Aujourd’hui on va parler du « langage de programmation » XML. Il faut que vous sachiez que le XML n’est pas un langage de programmation à proprement parler dans le sens où un langage de programmation va permettre de donner des instructions à l’ordinateur, comme connectez-vous à une base de données ou réagissez de telle façon quand je clique sur telle touche, etc. En revanche, il s’agit d’un format qui a une syntaxe bien précise et c’est ce que nous allons voir aujourd’hui. Le format XML est donc générique, il n’y a pas que Android qui l’utilise, loin de là, car c’est un format facile à appréhender que ce soit pour l’homme ou pour l’ordinateur.

Ce qui va être spécifique à Android ce sont les mots clés. Par exemple pour placer quelque part sur l’écran un texte ou un bouton, nous allons utiliser un mot clé pour spécifier qu’il s’agit d’un texte ou d’un bouton. Alors il faut que vous compreniez qu’un layout est lié à un fichier java. Le layout va permettre de mettre en page le design de votre application mais ce sera une page statique. C’est-à-dire que vous ne pourrez jamais dire à un bouton de réagir à un clic. Si vous voulez avoir des interactions avec votre page ça se fera du côté du java.

 

Les bases du XML : les balises

On va reprendre l’application qu’on avait fait lors de la précédente vidéo pour le Hello World. Ouvrez le fichier activity_main.xml. Si vous avez un petit peu joué avec la page design, au lieu d’avoir un RelativeLayout vous aurez sûrement un ConstraintLayout. Si vous voulez récupérer le même code que j’ai à l’écran, je vous mets ci-dessous le code que vous pouvez copier-coller dans votre fichier XML.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>

</RelativeLayout>

Le langage XML est un langage qui est fait avec des balises. Alors qu’est-ce qu’une balise ? C’est un mot-clé qui est encadré par des chevrons (< et >). On ouvre la balise au début (<TextView>) et on la ferme ensuite (</TextView>). Ce qui différencie l’ouverture et la fermeture, c’est simplement le slash qu’on place avant le mot clé lors de la fermeture de la balise.

<TextView>   OUVERTURE
	...           CONTENU
</TextView>  FERMETURE

Entre ces deux balises, on peut mettre du contenu. Ce qui est par exemple le cas du RelativeLayout. Le RelativeLayout est une balise, que l’on ouvre au début du fichier XML et que l’on ferme à la fin. Entre les deux, on trouve un texte et un bouton. Dans notre cas, le RelativeLayout représente l’écran et à l’intérieur on va mettre un texte et un bouton.

Il y a une autre syntaxe pour les balises, si jamais on ne veut pas mettre de contenu à l’intérieur. Ce qui est par exemple le cas des TextView. Donc pour un TextView, quand on ne veut pas mettre de contenu à l’intérieur, plutôt que d’ouvrir la balise et de la fermer ensuite, on va l’ouvrir (<TextView) et on va la fermer tout de suite à la fin (/>). Ce qui donne :

<TextView/>

Donc avant de fermer le chevron, on va mettre un slash.

 

Les attributs

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_centerInParent="true"/>

Alors vous allez me dire : « Ok au début on ouvre la balise puis on la ferme. Mais qu’est-ce qu’il y a entre les deux ? Ici on peut voir android:layout_width= »wrap_content ». Qu’est-ce que c’est ? ». Ne vous inquiétez pas on va voir ça tout de suite. C’est ce qu’on va appeler des attributs.

wrap_content

Les attributs vont donner des informations. Par exemple ici sur notre TextView, la ligne

android:layout_width="wrap_content"

va donner des informations sur la largeur du widget. layout_height va donner une information sur la hauteur du widget. On retrouve également ces attributs sur le bouton. « wrap_content » va signifier que la largeur du bouton va être égale à ce qu’il contient. Donc plus ce que contient le bouton va être grand et plus le bouton sera grand. Par exemple si vous augmentez le texte à l’intérieur du bouton, on voit bien que le bouton grandi. C’est parce qu’on a mit « wrap_content » et donc la taille du bouton s’adapte à ce qu’il contient.

match_parent

Il y a un autre attribut qui va dire « tu prends la taille de ton conteneur parent ». Qu’est-ce que le conteneur parent ici ? C’est le RelativeLayout, car on se trouve entre sa balise de début et sa balise de fin. Donc on est à l’intérieur du RelativeLayout, et par conséquent c’est le parent du bouton. On va lui dire tu prends la largeur de ton parent. On va utiliser le mot-clé « match_parent », et comme par défaut la largeur du RelativeLayout est la taille de l’écran, le bouton va prendre tout l’écran dans sa largeur. On peut faire la même chose pour sa hauteur. Si on lui met « match_parent », le bouton va prendre tout l’écran.

 

Identifiant d’un widget

Un autre attribut important pour un widget est son ID. C’est l’identifiant du widget. Ça va permettre, dans le code Java, d’identifier de manière unique un widget. Par exemple si on clique sur un bouton, pour savoir sur quel bouton on a cliqué du côté Java, on va utiliser l’identifiant.

android:id="@+id/textview1"

La syntaxe d’un ID est « @+id/identifiant ».  « @+ »signifie que l’on va créer quelque chose. Par conséquent, « @+id » signifie que l’on va créer un ID. Ensuite on met un slash puis le nom de l’identifiant. Donc ici ça va être « textview1 ». Le nom de l’ID est « textview1 ». Du coup du côté Java quand on va faire référence à textview1, on sait qu’on va parler de ce widget et que de ce widget. Il est d’ailleurs interdit que deux widgets est le même identifiant. Si par exemple notre bouton à comme identifiant « bouton1 » et qu’on essaie de donner cet identifiant à notre TextView, on va avoir une erreur parce qu’on ne peut pas avoir un identifiant qui correspond à deux widget. L’identifiant permet vraiment d’identifier un widget de manière unique.

Nous avons vu la syntaxe principale du XML. Les seules choses que vous allez apprendre au fur et à mesure des vidéos ce sont les mots-clés des attributs et les mots clés qui vont faire référence à des widgets, mais vous pouvez déjà vous amuser avec la page « design » à récupérer des widgets et ça vous mettra dans le XML les mots-clés qui correspondent à ces widget.

 

Les commentaires

Nous allons voir un dernier point important, qui est les commentaires. Qu’est qu’un commentaire ? C’est un moreau de texte qui ne sera pas pris en compte par Android mais qui va vous servir à vous pour vous repérer dans votre code.

<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"/>

Par exemple si on suppose que quand on va cliquer sur ce bouton ça va quitter l’application, on peut mettre comme commentaire « Bouton qui va fermer l’application ». Pour un commentaire il faut faire

<!--

pour l’ouvrir et

-->

pour le fermer. On peut écrire ce qu’on veut entre l’ouverture et la fermeture du commentaire, sans que ce soit pris en compte par Android.

<!--
  Bouton qui va fermer l'application
  -->
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"/>

Le commentaire peut également être utile si vous voulez supprimer une partie de votre code lors de l’exécution Android mais que vous voulez le garder pour le réintégrer plus tard, le modifier ou vous en servir comme référence. Donc vous pouvez mettre votre code en commentaire, il ne sera plus pris en compte par Android.

<!--
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"/>
-->

On voit que notre bouton n’apparaît plus sur Android, mais comme je l’ai mis en commentaire, j’ai gardé le code et je pourrais le décommenter plus tard pour le remettre si jamais j’en ai besoin. Pour le décommenter, il suffit d’enlever l’ouverture et la fermeture du commentaire et notre bouton réapparaît.

<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"/>

J’espère que cet article vous aura plu, que vous aurez vu la syntaxe principale du XML. Il nous restera encore à voir les différents mots-clés, les différents attributs et les différents widgets. Mais là, vous avez déjà un aperçu de la syntaxe du XML.

Je vous dis à bientôt pour une prochaine vidéo / un prochain article. Salut !

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *