On a vue comment installer le "JDK" et "Android Studio", et comment configurer un appareil android virtuel pour exécuter nos projets.
On a essayé d’exécuter le projet créé par défaut par le logiciel Android Studio sans ajouter aucune ligne de commandes, et on a essayé de le modifier juste pour se familiariser avec l'interface du logiciel.
Maintenant on va créer une application simple où on va tapez un peu de code JAVA.
Lancer d'abord Android Studio,
Puis choisir Fichier>New Project
Dans le premier tutoriel on a cliqué sur Next, mais cette fois on va arrêter un moment sur cette fenêtre:
Application name: le nom de l'application (il peut contenir l'espace " ") il s'affiche dans la barre de titre de l'application: ici "My Application"
Module name: c'est le nom du fichier qui contient la configuration de l'application; c'est le fichier principale qui gère tous les autres fichiers (code java ou xml et d'autres modules s'ils y en a) il a l'extension ".iml", il est utilisé par le logiciel Android Studio et il a le même nom que l'application.
Le même nom le prend le répertoire de l'application dans l'ensemble du projet.
Jeter un coup d’œil sur cette arborescence:
Le répertoire qui regroupe tous les nos projets: android (qu'on a créé sur le bureau)
Le répertoire MyApplicationProjet représente le premier projet il contient le dossier de notre application et d'autres fichiers nécessaires.
le dossier MyApplication contient les fichiers propres à l'application
Package name: Un programme Java est généralement développé par une équipe de programmeurs, chaque personne s'occupe d'une Class (un composant du programme) leurs class s'accumulent dans une seul fichier nommé Package (comparables aux bibliothèques du langage C/C++), se package se sert comme identifiant unique pour votre application. Si vous ne changez pas ce nom il sera nommé "com.example.nomdelapplication"
chaque partie du nom représente un répertoire, veuillez jeter un coup d’œil sur l'arborescence en haut:com>example>myapplication.
Pour nous on va commencer le nom de notre package par "androidstudio.cours."
Projet location: c'est le chemin du dossier où se trouvent les fichiers de notre projet.
on va laisser les autres options à un autre tutoriel (choix de la version du système android, le compilateur...)
Veuillez remplir les 4 premiers champs comme indiqué dans l'image suivante, et veuillez respecter la casse des lettres (Le MAJUSCULE et le minuscule) dans tout le projet:
cliquer sur Next, la fenêtre suivante s'ouvre:
cliquer Next:
cliquer sur Next:
Attendre un moment pour générer les fichiers nécessaires pour votre projet:
Puis cliquer sur cette onglet (1 Projet):
Le projet contient ses propres fichiers que vous pouvez les voir en cliquant sur le premier "+", et des autres bibliothèques externes:
Cliquer sur le fichier "FenetrePrincipale" qui contient le code source Java de l'application:
l'onglet du code s'affiche:
Développer le bloc import en cliquant sur "+":
La représentation de notre projet sur le disque dur sera comme ça:
et la fenêtre android s'affiche, on peut y ajouter des objets
sélectionner l'objet "TextView" où est écrit "Hello World", puis taper sur la touche "Suppr" dans ton clavier pour le supprimer:
Maintenant cliquer sur l'icon à gauche "Medium Text" et déplacer la souris sur la fenêtre pour choisir où poser cet objet puis cliquer sur la fenêtre pour y ajouter cet objet, c'est un champ de texte:
dans l'onglet des propriétés glisser la barre de défilement jusqu'à la ligne "id" et modifier là comme suit, pour lui attribuer le nom "txtMsg", je vous rappelle que vous devez respecter la casse:
dans le même onglet, modifier le texte à afficher dans le champ de texte:
Maintenant ajouter une bouton, on cliquant à gauche sur l'icon "Button" puis déplacer la souris sur la fenêtre android, et cliquer sur la fenêtre pour y ajouter le bouton:
Maintenant donner le nom "btnNewMsg" pour ce bouton comme on a fait pour le champ de texte
et changer le texte à afficher sur le bouton:
comme vous le voyer on est dans le mode design, c'est à dire un mode visuel où il y a des objets à déplacer; comme j'ai déjà dit, ce design se traduit dans un langage appelé XML que vous pouvez voir le code en cliquant sur l'onglet "Text":
voilà le code xml de l'interface de notre application, on a ajouté deux objets:le TextView et le Button. chaque objet a son propre code qui détermine ses dimensions, le nom, le contenu...
nous on changer juste deux propriétés de ces deux objets: le "id": le nom, et le "text": le texte à afficher. pour le bouton on veut y afficher "new message" et on veut que son nom soit "btnNewMsg"
Passons maintenant au code java en cliquant sur l'onglet "FenetrePrincipale.java":
Suivez avec moi, et après je vais tous re-expliquer,en plus de détailles, le code:
ajouter ces 2 lignes en respectant le Maj et le min:
la programmation java nécessite l'importation des bibliothèques (class) qu'on veut utiliser dans notre projet avant de les utiliser, c'est pour celà que le logiciel Android Studio nous déclare un erreur (en rouge) et nous suggère la solution: taper sur les touche "Alt+Entrée"
après la combinaison des touches alt+entrée vous constatez qu'une ligne s'est ajoutée dans le bloc d'importation des bibliothèques:
de même vous allez faire pour la classe "Button", il faut importer cette classe avant de l'utiliser; Pour cela cliquez sur le mot en rouge "Button" puis tapez sur le clavier "Alt+Entrée", vous allez constater qu'une ligne s'est ajoutée:
"TextView txtMsg" signifie qu'on veut déclarer un objet nommé "txtMsg" de type "TextView"
"Button btnNewMsg" signifie qu'on veut déclarer un objet nommé "btnNewMsg" de type "Button"
Maintenant veuillez écrire ces 2 lignes en même endroit que l'image l'indique:
"txtMsg=(TextView)" signifie qu'on veut créer une instance de la classe "TextView" portant le nom "txtMsg"
"btnNewMsg=(btnNewMsg)" signifie qu'on veut créer une instance de la classe "Button" portant le nom "btnNewMsg"
(soyez patient et je vais vous expliquer qu'est ce que ça veut dire "classe", "instance"...)
R.id.txtMsg: "R" représente les ressources, dans les ressources on peut accéder aux objets par leurs identifiants "id" (leurs noms), donc on va utiliser le "id" comme filtre pour chercher les objets qu'on a utilisé lors de la création de l'interface, ainsi R.id.txtMsg signifie "chercher un objet qui a l'identifiant txtMsg dans les Ressources de l'application".
findViewById: est une fonction qui sert à lier l'objet créé par le code java avec l'objet recherché dans les ressources (créé dans le design).
TextView txtMsg=(TextView)findViewById(R.id.txtMsg);
ça signifie: déclarer un objet de type TextView et créer une instance nommée txtMsg de la classe TextView puis chercher dans les ressources l'objet qui a l'identifiant txtMsg, et après relier l'instance créé avec cet objet que tous ses propriétés (tailles, couleur, contenu,...) sont définies dans le fichier des Ressources de l'application.
Nous voulons qu'un clique sur le bouton change le contenu du champ de texte en "Enseignez à vos enfants comment être un commerçant":
c'est à dire on va lier l'événement "OnClick" du bouton avec le champ de texte:
écrivez ces lignes dans le même endroit indiqué dans l'image, vous allez constater que le logiciel vous aide, pour utiliser les suggestions utiliser la touche "Tab" de tabulation:
puis ajoutez cette ligne pour afficher le message voulu:
maintenant cliquer sur le bouton exécuter pour voir le résultat:
veuillez attendre un peu pour que l'application soit compilée et prête pour l'exécution sur un appareil android:
choisir l'appareil virtuel qu'on a créé (myPhone):
attendez que l'appareil s’initialise:
l'appareil est prêt à utiliser, s'il est verrouillé cliquer avec la souris et glisser sur l'écran de l'appareil comme vous le faites avec le doit sur votre téléphone:
si l'application n'a pas démarrée, recliquer sur le bouton exécuter (le bouton vert), la fenêtre suivante s'ouvre vous demande si vous voulez utiliser l'appareil myPhone qui est déjà démarré, cliquer sur "OK"
et voilà l'application qui s'exécute bien:
Cliquer sur le bouton et voir la phrase qui s'affiche dans la zone de texte:
vous voyez comme moi des caractères bizarres au lieu des accents, on va voir comment régler ce problème après.
Vous avez vu dans ce tuto:
comment déclarer un variable objet de type TextView ou Button
comment lier l'objet créé à un objet de même type créé lors de la création du design de l'application
comment gérer l'événement onClick du button pour executer un code lorsque le bouton est cliqué
comment utiliser la méthode setText() de l'objet txtMsg pour changer son contenu
essayez d'ajouter un autre bouton et un autre champ de texte, et editez le code pour que votre nouvel champ de texte affiche une phrase lorsque tu clique sur ton nouvel bouton
après la modification de ton design
ajouter la déclaration de vos objets à l'endroit 1
la création de ces objets à l'endroit 2
la gestion de l'événement clique de votre bouton à l'endroit 3
Vous pouvez regarder le video de ce tutoriel:
bon chance.
par Hicham khaddir
On a essayé d’exécuter le projet créé par défaut par le logiciel Android Studio sans ajouter aucune ligne de commandes, et on a essayé de le modifier juste pour se familiariser avec l'interface du logiciel.
Maintenant on va créer une application simple où on va tapez un peu de code JAVA.
Lancer d'abord Android Studio,
Puis choisir Fichier>New Project
Dans le premier tutoriel on a cliqué sur Next, mais cette fois on va arrêter un moment sur cette fenêtre:
Module name: c'est le nom du fichier qui contient la configuration de l'application; c'est le fichier principale qui gère tous les autres fichiers (code java ou xml et d'autres modules s'ils y en a) il a l'extension ".iml", il est utilisé par le logiciel Android Studio et il a le même nom que l'application.
Le même nom le prend le répertoire de l'application dans l'ensemble du projet.
Jeter un coup d’œil sur cette arborescence:
Le répertoire qui regroupe tous les nos projets: android (qu'on a créé sur le bureau)
Le répertoire MyApplicationProjet représente le premier projet il contient le dossier de notre application et d'autres fichiers nécessaires.
le dossier MyApplication contient les fichiers propres à l'application
Package name: Un programme Java est généralement développé par une équipe de programmeurs, chaque personne s'occupe d'une Class (un composant du programme) leurs class s'accumulent dans une seul fichier nommé Package (comparables aux bibliothèques du langage C/C++), se package se sert comme identifiant unique pour votre application. Si vous ne changez pas ce nom il sera nommé "com.example.nomdelapplication"
chaque partie du nom représente un répertoire, veuillez jeter un coup d’œil sur l'arborescence en haut:com>example>myapplication.
Pour nous on va commencer le nom de notre package par "androidstudio.cours."
Projet location: c'est le chemin du dossier où se trouvent les fichiers de notre projet.
on va laisser les autres options à un autre tutoriel (choix de la version du système android, le compilateur...)
Veuillez remplir les 4 premiers champs comme indiqué dans l'image suivante, et veuillez respecter la casse des lettres (Le MAJUSCULE et le minuscule) dans tout le projet:
cliquer sur Next, la fenêtre suivante s'ouvre:
cliquer sur Next:
Attendre un moment pour générer les fichiers nécessaires pour votre projet:
Puis cliquer sur cette onglet (1 Projet):
Le projet contient ses propres fichiers que vous pouvez les voir en cliquant sur le premier "+", et des autres bibliothèques externes:
Cliquer sur le fichier "FenetrePrincipale" qui contient le code source Java de l'application:
Développer le bloc import en cliquant sur "+":
La représentation de notre projet sur le disque dur sera comme ça:
Tout application android contient un code source en langage Java, ce code gère des ressources, ces ressources sont groupées dans le dossier "res" que vous pouvez voir le contenu en cliquant sur "+":
les ressources les plus intéressantes sont: layout, menu, et values:
"layout": le design, l'interface visuelle de l'application. Chaque fenêtre a son design propre sous forme d'un fichier xml qui porte le même nom que la fenêtre.
"menu": le menu, chaque fenêtre a son propre menu dans un fichier xml portant le même nom que la fenêtre.
"values": les valeurs utilisées dans l'interface, sous forme de 3 catégories
dimens:dimensions,
strings: chaines de caractères
style:le theme.
On va ouvrir l'interface pour y ajouter un bouton, pour ce fait cliquer ici:
L'interface se charge
et la fenêtre android s'affiche, on peut y ajouter des objets
sélectionner l'objet "TextView" où est écrit "Hello World", puis taper sur la touche "Suppr" dans ton clavier pour le supprimer:
dans l'onglet des propriétés glisser la barre de défilement jusqu'à la ligne "id" et modifier là comme suit, pour lui attribuer le nom "txtMsg", je vous rappelle que vous devez respecter la casse:
dans le même onglet, modifier le texte à afficher dans le champ de texte:
Maintenant ajouter une bouton, on cliquant à gauche sur l'icon "Button" puis déplacer la souris sur la fenêtre android, et cliquer sur la fenêtre pour y ajouter le bouton:
Maintenant donner le nom "btnNewMsg" pour ce bouton comme on a fait pour le champ de texte
et changer le texte à afficher sur le bouton:
comme vous le voyer on est dans le mode design, c'est à dire un mode visuel où il y a des objets à déplacer; comme j'ai déjà dit, ce design se traduit dans un langage appelé XML que vous pouvez voir le code en cliquant sur l'onglet "Text":
voilà le code xml de l'interface de notre application, on a ajouté deux objets:le TextView et le Button. chaque objet a son propre code qui détermine ses dimensions, le nom, le contenu...
nous on changer juste deux propriétés de ces deux objets: le "id": le nom, et le "text": le texte à afficher. pour le bouton on veut y afficher "new message" et on veut que son nom soit "btnNewMsg"
Passons maintenant au code java en cliquant sur l'onglet "FenetrePrincipale.java":
Suivez avec moi, et après je vais tous re-expliquer,en plus de détailles, le code:
ajouter ces 2 lignes en respectant le Maj et le min:
la programmation java nécessite l'importation des bibliothèques (class) qu'on veut utiliser dans notre projet avant de les utiliser, c'est pour celà que le logiciel Android Studio nous déclare un erreur (en rouge) et nous suggère la solution: taper sur les touche "Alt+Entrée"
après la combinaison des touches alt+entrée vous constatez qu'une ligne s'est ajoutée dans le bloc d'importation des bibliothèques:
"Button btnNewMsg" signifie qu'on veut déclarer un objet nommé "btnNewMsg" de type "Button"
Maintenant veuillez écrire ces 2 lignes en même endroit que l'image l'indique:
"txtMsg=(TextView)" signifie qu'on veut créer une instance de la classe "TextView" portant le nom "txtMsg"
"btnNewMsg=(btnNewMsg)" signifie qu'on veut créer une instance de la classe "Button" portant le nom "btnNewMsg"
(soyez patient et je vais vous expliquer qu'est ce que ça veut dire "classe", "instance"...)
R.id.txtMsg: "R" représente les ressources, dans les ressources on peut accéder aux objets par leurs identifiants "id" (leurs noms), donc on va utiliser le "id" comme filtre pour chercher les objets qu'on a utilisé lors de la création de l'interface, ainsi R.id.txtMsg signifie "chercher un objet qui a l'identifiant txtMsg dans les Ressources de l'application".
findViewById: est une fonction qui sert à lier l'objet créé par le code java avec l'objet recherché dans les ressources (créé dans le design).
TextView txtMsg=(TextView)findViewById(R.id.txtMsg);
ça signifie: déclarer un objet de type TextView et créer une instance nommée txtMsg de la classe TextView puis chercher dans les ressources l'objet qui a l'identifiant txtMsg, et après relier l'instance créé avec cet objet que tous ses propriétés (tailles, couleur, contenu,...) sont définies dans le fichier des Ressources de l'application.
Nous voulons qu'un clique sur le bouton change le contenu du champ de texte en "Enseignez à vos enfants comment être un commerçant":
c'est à dire on va lier l'événement "OnClick" du bouton avec le champ de texte:
écrivez ces lignes dans le même endroit indiqué dans l'image, vous allez constater que le logiciel vous aide, pour utiliser les suggestions utiliser la touche "Tab" de tabulation:
puis ajoutez cette ligne pour afficher le message voulu:
maintenant cliquer sur le bouton exécuter pour voir le résultat:
choisir l'appareil virtuel qu'on a créé (myPhone):
et voilà l'application qui s'exécute bien:
Cliquer sur le bouton et voir la phrase qui s'affiche dans la zone de texte:
Vous avez vu dans ce tuto:
comment déclarer un variable objet de type TextView ou Button
comment lier l'objet créé à un objet de même type créé lors de la création du design de l'application
comment gérer l'événement onClick du button pour executer un code lorsque le bouton est cliqué
comment utiliser la méthode setText() de l'objet txtMsg pour changer son contenu
essayez d'ajouter un autre bouton et un autre champ de texte, et editez le code pour que votre nouvel champ de texte affiche une phrase lorsque tu clique sur ton nouvel bouton
après la modification de ton design
ajouter la déclaration de vos objets à l'endroit 1
la création de ces objets à l'endroit 2
la gestion de l'événement clique de votre bouton à l'endroit 3
Vous pouvez regarder le video de ce tutoriel:
bon chance.
par Hicham khaddir
