Tuto #1 : HelloWorld
Salut,
Pour commencer tranquillement la compréhension du développement sous Androïd, je propose la petite activité HelloWorld. Rien de difficile, rien de très utile non plus, sauf pour avoir quelques notions quant au fonctionnement d'Androïd.
Et en plus, on va faire ça "proprement", comme ça vous aurez aussi des notions d'ordre qui seront appréciables plus tard.
On y va ?
Lancez Eclipse, puis cliquez sur l'icone pour lancer l'assistant de création d'application Androïd.
Remplissez la fenètre qui apparait comme ceci (vous pouvez définir d'autres choses mais restez cohérent) :
Pour information, le package se nomme toujours de la façon suivante : com.créateur.nomdel'application
Ici, mettez tuto en créateur car de toute façon on ne publiera pas cette application sur le Market... Y'en a qui le font !
Soyez cohérent par rapport au Min SDK Version. En effet, regardez ce que vous cochez au dessus, "API". C'est cette information qu'il faut entrer en général.
Faites Finish.
Bien, alors on a notre projet de prêt. Sachez que l'assistant créé d'office un HelloWorld, ce qui va faciliter la tâche pour ce premier tutoriel. On va simplement expliquer pourquoi ça fait ça et comment.
Tout d'abord, regardez bien ce qu'a importé cette création d'application. Une arborescence complete avec des fichiers .java et .xml prédéfinis.
Interessons nous aux fichiers HelloWorld.java, R.java, main.xml et strings.xml.
HelloWorld.java est la page ou vous définierez les actions et événements que l'application va effectuer.
R.java est un fichier automatisé répertoriant, par exemple, les strings et les ids que vous créerez dans vos autres documents. On en reparlera un peu plus tard.
main.xml est un fichier comportant le layout de l'application. C'est ici que vous pourrez insérer et modifier les éléments affichés à l'écran. On va également en parler en détails dans quelques instants.
strings.xml est un fichier contenant des informations textuelles (des chaines de caractères (des phrases quoi)), que vous pouvez définir pour alléger le contenu de main.xml. Chose que l'on va faire meme pour un projet aussi léger, car c'est un principe utile sur un projet un peu plus abouti alors autant s'y mettre dès a présent.
Ouvrez le fichier HelloWorld.java.
Oula ! Du code en Java pour quelqu'un qui n'y connait rien.
N'ayez pas peur, c'est plutôt intuitif quand on a un minimum de logique. Certe il est possible de ne pas le comprendre point par point, mais cela n'empeche pas d'en comprendre les grandes lignes.
Alors... que veulent dire toutes ces phrases ?
On va vous éclairer un peu.
D'abord, on note : package com.tuto/helloworld ;
Cette ligne exprime l'appartenance le la page au package que l'on a créé, rappellez vous.
import android.app.Activity;
Ici, les imports utiles au fonctionnement de votre application. N'ayez crainte, il existe une méthode sous Eclipse pour importer automatiquement ce dont vous avez besoin en fonction de ce que vous créez dans votre programmation. CTRL+SHIFT+O. Très pratique !
Donc en gros cette ligne importe l'activité "Activity", elle détient tout ce que vous pouvez créer ensuite. Sans cette ligne, pas de programme android. (On fait simple hein !)
La ça fache un peu : public class HelloWorld extends Activity {
C'est quoi ?
C'est la classe que l'on a créé grâce à l'assistant "HelloWorld" (ca vous rappelle quelque chose hein ?).
public signifie... qu'elle est publique. Couplé à la variable class pour définir donc que la classe est publique.
Cette variable est suivie de HelloWorld, le nom de la classe donc.
Ensuite : extends Activity ? Ca veux tout simplement dire que cette classe dépends de la classe Activity, souvenez vous, la classe mère (toujours pour expliquer de manière simpliste).
Et les /** ??? C'est quoi ?
Ca, c'est tout simplement une ligne de commentaire. En fait, elle n'apparait pas dans l'application, seulement sur le code source. Pratique pour trier ou expliquer ce que vous faites au cas ou vous êtes amené à y retoucher.
Note : il est possible d'utiliser // pour mettre une ligne en commentaire, sinon pour un bloc de texte en commentaire ça donne :
/** ligne1
* ligne 2
* ligne 3
* ligne 4 */
@Override ?
J'avoue moi même ne pas avoir encore compris le sens de ce petit code. Enfin, il veux textuellement dire Outrepasser, et @ est utilisé généralement pour faire des références.
Admettons... et la suite ?
Alors, ce bloc :
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState) ;
setContentView(R.layout.main) ;
Compliqué nan ?
Un peu, surtout si comme moi vous n'aviez jamais touché à du Java avant de vous lancer dans la prog' Androïd... Mais cela n'empêche rien !
Pour vous expliquer au sens large cet enchainement de code : cette suite dit que lorsque l'application est lancée (onCreate), ça va afficher le contenu main. (setContentView(R.layout.main)
Okay !
Si comme moi vous débutez sur un tuto comme ça, vous vous demandez sûrement ce qu'est ce main, ce R entre parenthèses, ce layout aussi tien...
Alors je vais pouvoir vous éclaircir la chose.
R : ce fameux R... il fait référence au contenu que l'application connait.
Mais encore ?
Quand vous voulez appeler quelque chose défini, utilisez R.
Vous voyez toujours pas ? Roh.... ca va venir avec la suite.
layout...
On à déjà vu ça quelque part, mais ou ??
Hmmm... et oui ! Regardez votre arborescence, les dossiers.... res/layout/... C'est effectivement de ce layout que l'on parle !
main?
Si on suit la logique précédente, main est ou ?
Et la encore bingo ! main est le fameux main.xml détenu par le dossier layout !
Donc, R.layout.main défini quoi ?
Un chemin !
Ok, mais on a pas encore compris pour le R :/
Pourtant, si on suit toujours la même logique : on l'a pas déjà vu quelque part le R ?
Si ! R.java, le fameux fichier auto-généré.
Allons voir ce qui s'y passe justement, comme ça vous comprendez directement le pourquoi du comment.
Voila la bête :D
On retrouve le package comme sur le fichier HelloWorld.java, donc la pas de problèmes.
Par contre, y'a du code encore, et différent en plus de ça...
Toute ce que vous définirez pendant votre codage xml sera enregistré automatiquement dans ce fichier R.java
Il ne faut pas y toucher, de toute façon si vous écrivez quelque chose dedans et que vous sauvegardez, il l'effacera... intelligent hein ?
Qu'est ce qu'on y voit grossièrement ?
Des classes.
Elles correspondent (sauf pour une : attr) à l'arborescence que l'on a expliqué au début du tutoriel.
La classe drawable contient les fichiers images, vous pouvez apercevoir dans votre arboresence des dossiers du même nom avec des icones à l'interieur.
La classe string correspond aux strings établis dans le fichier.... strings.xml bien entendu. Ca coule de source pour le moment. Ne cherchez pas a savoir ce que veulent dire app_name et hello, on verra en temps et en heure :D
La classe layout contient les fichiers xml "affichés sur écran"... Bon, à l'intérieur on a le fameux main.... Qui défini la page main.xml.
Vous comprenez mieux le chemin R.layout.main a présent ?
Il veux dire qu'on va afficher le contenu qui est défini dans le fichier R.java sous la classe Layout qui s'identifie par le nom main. Ce main définissant la page xml main. Hourra !
Mais qu'affiche donc ce fichier alors ?
Vous voulez le savoir, commencez par appuyer sur le bouton dans votre barre d'outils Eclipse "Run" et lancez l'émulation. Vous verrez après avoir déverrouillé l'interface fictive du téléphone fictif (:D) :
"Hello World, HelloWorld!"
D'accord. Donc le main.xml affiche à l'écran ça. Comment, pourquoi ?
C'est ce que nous allons découvrir par la suite.
Effectivemment, ça correspond à ce qui est affiché sur l'écran. Mais surtout, gardez en tête que ce n'est pas affiché tout seul !
N'oubliez pas que si main.xml est affiché sur cet écran quand l'application se lance, c'est grâce à l'événement onCreate qui stipule que main va être affiché ! (Notamment par la fameuse ligne : setContentView(R.layout.main) ; )
Donc c'est par un événement Java que cette page xml est lancée directement, et pas par magie. :)
Ouvrez votre document main.xml, qu'on y jette un oeil...
Vous devriez avoir ça :
Oui !! Mais qu'est ce que c'est que tout ça ??
Du langage xml tout simplement. Go go go explications !
La première ligne correspond au type de la page xml, par défaut on laissera ça.
Ensuite, et la faut bien comprendre cette étape... le LinearLayout... J'ai moi même eu du mal à suivre au début mais finalement c'est plutôt simple.
Prenom séparément cette balise et son code. On a :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</LinearLayout>
Je ne parle pas de suite du TextView, on vois ça après.
LinearLayout correspond à un "bloc" affiché à l'écran. Celui-ci défini précisement le fond de l'écran, soit le rectangle noir qu'on a par défaut en fond d'application.
A SAVOIR : il ne peut-y avoir qu'un seul LinearLayout sur une page xml... mais par contre, il est possible de faire de sous-LinearLayout pour placer des choses... un peu brouillon, mais vous comprendrez mieux au fil des tutos, celui ci ne comportant qu'un objet affiché qui est le TextView...
(En gros, on peut ouvrir des balises LinearLayout dans la balise LinearLayout, mais pas en dehors).
Pourquoi "Linear"Layout ?
Tout simplement parce que le layout va afficher les choses que vous écrirez dans le code de façon linéaire.
Bien, alors ce code ?
- xmlns:android="XXX" c'est ce que va chercher le code pour justement savoir quel genre de code on peux utiliser sur la page, le xml étant très (trop?) souple. Renseignez vous sur Google ou Wikipédia pour "comprendre" en quoi consiste le XML si vous avez envie de vous donner mal a la tête. Si ce n'est pas le cas, dites vous simplement qu'a chaque LinearLayout que vous ouvrez, la ligne est obligatoire.
- android:orientation="XXX" est, comme son nom l'indique, l'orientation du Layout. Ici, Vertical donc. (Correspond a ce qu'on voit sur l'émulation).
- android:layout_width="fill_parent" et height="fill_parent" sont des variables qui permettent de donner une taille à l'objet (ici l'objet étant le Layout hein !) layout_width pour la largeur horizontale, layout_height pour la hauteur (verticale...).
On peux définir en px ou dip ces attributs ("100px" par exemple). Préférez les dip qui s'adaptent à la dimension des écrans de différents smartphones.
"fill_parent" ??
Ca veux dire que ca correspond au parent, donc comme ici c'est le layout de fond, ça englobe tout l'écran jusqu'aux bordures.
Mais si c'était dans un sous layout qu'on aurait défini par pixels au lieu de lui dire fill_parent, les objets dans ce layout a qui on donnerait l'attribut seraient du même nombre de pixels que ce layout. Logique !
Et le TextView ? Késako ?
C'est un objet, qui doit être contenu dans un Layout.
Si on est un poil logique, on comprends que ca parle de texte. Et on peux éventuellement aussi en déduire que View exprime un affichage, donc affichage de texte...
On vois que cet objet est aussi défini par layout_width et height, mais tiens, une autre valeur est repérée : "wrap_content".
Ca défini que la hauteur sera adaptée au contenu.
Quand vous voulez qu'une variable de layout s'adapte au contenu.
(Ici donc a la hauteur des caractères en px ou dip), on entrera donc wrap_content. Good !
Ah ! Et android:text= ?
Besoin vraiment d'expliquer la variable text ?
Ca défini forcément le texte nan ?
Bon, on est d'accord, mais la valeur de cette variable est plutôt étrange... "@string/hello"...
Y'avais pas marqué ça sur l'écran de l'émulateur !
Bonne remarque : comme on l'a expliquer un peu plus haut, @ renvoie à quelque chose.
Ici ça renvoie à string/hello. Rappellez vous qu'on a un fichier strings.xml, et bien ce chemin renvoie à un contenu de ce fichier.
Vous pouvez bien sur écrire directement une valeur textuelle la dedans (HelloWorld, Salut les enfants.... ce que vous voulez ! Chiffres compris) mais c'est le mal... Absolu !
Allez ouvrir le fichier strings.xml et regardez :
Déjà on reconnait le typique code qui défini le type de page xml.
Ensuite, on voit une balise <resources> </resources> : on comprends qu'on entre nos ressources dedans et qu'elles peuvent êtres utilisées ailleurs.
On retrouve le "hello" dans la ligne suivante ! Et observez bien, le texte affiché aussi.
Suivant ce modèle, vous pouvez définir autant de textes que vous voulez, même un simple "OK" pour un bouton.
L'avantage ?
Imaginez que vous devenez un pro en developpement, que vous sortez une application de folie avec 40 boutons OK.
Imaginez que vous souhaitez que les boutons OK changent en OUI.
Vous allez modifier un par un le texte du bouton ? Soit 40 changements ?
Ou alors, grâce au string que vous aviez créé, changer simplement sa valeur de OK par OUI, et donc faire 40 changements en un seul mot changé dans une ligne de code ?
Faut y penser !
Tiens, y'a quelque chose qu'on connais pas la, qu'on a pas vu... app_name ?
Déduisez...
Bien sûr, nom de l'application. Modifiable aussi, c'est ce qui apparait dans la barre grise quand vous êtes sur l'émulateur.
MAINTENANT, A VOUS DE JOUER !