DÉVELOPPEMENT D'APPLICATIONS MOBILESivmad.free.fr/M2PSIR/Cours-M2PSIR-Android-2016-3.pdf · en Swing de Java2SE. ... 2011-2016 17. Les événements : Bouton et écouteur Développement

DÉVELOPPEMENT D'APPLICATIONS MOBILES

AndroidPartie III

Ivan MADJAROV - 2016

3. Architecture d'une application Android

Développement mobile sous Android IvMad, 2011-2016 2

L'objectif principal de ce cours est de découvrir la programmation sousAndroid, sa plate-forme de développement et les spécificités du développementembarqué sur smartphone et tablette.

Composants Android (1)• Les éléments essentiels du Framework Android :

• Activity : La composante principale d'une application Androidassociée à l'interface utilisateur. Cette couche représentative etvisuelle de l'application peut avoir plusieurs sous-couches quialternent entre elles lors de l'exécution.

• Fragment : C'est une portion d'interface plus souple et dynamique.Donc, une activité peut être constituée de plusieurs fragments.

• Views : Le IHM (GUI) est un "layout" ou des "widgets". La couchehérite des classes "android.view.View" et "android.view.ViewGroups".

• Service : Une opération qui s'exécute en arrière-plan. Un Service nepossède pas d'interface mais permet l’exécution d’un algorithme surun temps indéfini et terminé en tâche de fond. Donc il n'y a pas deView.


Composants Android (2)• Content Provider : Gestionnaire de données qui permet le partage des

données entre applications, via un fournisseur de contenu• photos, contacts, ....

• Intents : Les composants Android (Activity, Service, Broadcast Receiver)communiquent via des messages système que l'on appelle Intent(intention).• Une application peut appeler un service ou une activité (explicite) ou

appeler un service du système Android (implicites).• Broadcast Receiver : Gestionnaire des message systèmes ou applicatifs.

Il réagie à un événement système ou aux "Intents" implicites. Il n'apas d'interface utilisateurs. Il peut afficher un message, lancer uneactivité ou un service.

• Intent-Filter : un filtre d'intention sert à indiquer à une activité, serviceou broadcast receiver quels Intents peuvent implicitement traiter.


Cycle de vie d’une application AndroidDéveloppement mobile sous Android IvMad, 2011-2016 5

publicclassMainActivity extends Activity {publicvoid onCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.acceuil);

}//suspenduedétruit:onDestroy invoquéprotected void onDestroy(){super.onDestroy();

}//actifsuspendue:nedétientpluslefocusprotected void onPause(){

super.onPause();}//suspendueactif:onResume invoquéprotected void onResume(){super.onResume();

}//démarrageactif:détientlefocusetestdémarréprotected void onStart(){super.onStart();

}protected void onStop(){super.onStop();

}}

Architecture d'une application Android• onCreate : La méthode est appelée à la création d'une activité pour

initialiser les données nécessaires à l'exécution de l'application. Al'appel de la méthode un Bundle est passé en argument. Il contient l’étatde sauvegarde enregistré lors de la dernière exécution.

• onStart : La méthode est appelée dans le cas où l'application est enarrière-plan et qu’elle repasse en avant-plan. Si l'activité ne peut paspasser en avant plan alors, l’activité sera transférée à OnStop.

• onResume : La méthode est appelée après OnStart quand l'applicationpasse en background à cause d’une autre application.

• onPause : La méthode met en pause l'application et se relance avec laméthodes OnResume.

• onStop : Appelée quand l'activité n’est plus visible.• onDestroy : Appelée quand l'application est fermée (processus closed).


Contexte d'une application Android• Le contexte relève l'état courant d'une application et les informations

sur son environnement et sert à récupérer des objets transmis pard'autres parties de l'application.

• On dispose de quatre méthodes:• getApplicationContext() : récupère le contexte de l'application en cours;• getContext() : récupère le contexte de la vue (View) courante;• getBaseContext() : récupère le

contexte défini par la méthode setBaseContext()

• this : peut être utilisé quant on hérite directement de la classe Context.


Programmer sous Android• Interface graphique par programmation (partie dynamique)

• Pour faciliter le développement, Android propose un grand nombre de"widgets" : éléments d’interface graphique qu'on peut utiliser dans uneapplication de manière directe et simple.

• On peut utiliser les classiques :• boutons, listes déroulantes, cases à cocher

• mais aussi de composants plus poussés :• des horloges, des sélecteurs de dates, des galeries photos et des afficheurs de

vidéos.

• Interface graphique par fichier XML (partie statique)• Le fichier XML sera lu par le programme et l’interface graphique sera

automatiquement générée en conséquence. Il devient ainsi beaucoup plusfacile de modifier et de faire évoluer une interface graphique déjàexistante, et de pouvoir l'adaptée suivant le contexte (langue, jour, nuit, ...).


Les composants de l'interface graphiqueDéveloppement mobile sous Android IvMad, 2011-2016 9

Le principe de l'interface graphique• Le GUI sous Android est basée sur les View, les Layout et les Widget.• Un Layout (gabarit) est un conteneur de View (vue) ou d'autres Layout .• Le Layout n'est pas destinée à fournir du contenu ou des contrôles à

l'utilisateur.• Les layouts se contentent de

disposer les Views par un gestionnaire de placement.

• Les Views se chargent de mettrele contenu utilisateur en place.

• Une View qui ne peut pas enenglober d'autres est appelée un widget (composant).


Composants graphiques (Java)Développement mobile sous Android IvMad, 2011-2016 11

• La class View est une zone de composant et source d'événement ce qui forme la base du GUI.

Vues et schémas (Java)• Les éléments graphiques héritent de la classe View. On peut regrouper

des éléments graphiques dans une ViewGroup.• ViewGroup : le regroupement est prédéfini sous la forme de schémas

(layout) qui proposent une prédispositions des objets graphiques:• LinearLayout : range les éléments de gauche à droite et du haut vers le bas;• RelativeLayout : range les éléments enfants les uns par rapport aux autres;• TableLayout : disposition en imitant un tableau par lignes et colonnes;• FrameLayout : disposition en haut à gauche en empilant les éléments.

• La classe ViewGroup ressemble à un gestionnaire de placement connuen Swing de Java2SE.

• Les déclarations peuvent se faire aussi en XML, ce qui évite de passerpar les instanciations Java (on verra ça par la suite).


Programmer : Bonjour tout le mondepackage com.example.ivmad.bonjour;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.TextView;public class BonjourMainActivity extends AppCompatActivity {

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);TextView tv = new TextView(this);tv.setText("Bonjour tout le monde, Android!");setContentView(tv);

}}


• LaméthodesetText delaclasseTextViewmetunString dansGUI.

• LaméthodesetContentView affichelachaînedecaractère(String)dansl'interfacegraphique.

Onpasseuneinstancedel'activité

Programmer : Champ de saisieDéveloppement mobile sous Android IvMad, 2011-2016 14

package com.example.ivan.texteditapplication;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.EditText;public class TextEditMainActivity extends AppCompatActivity {


super.onCreate(savedInstanceState);EditText edit = new EditText(this);edit.setText("Texte à éditer");setContentView(edit);

}}

La classe EditText étend la classeTextField pour autoriser l'édition d'untexte.Le curseur du champ de saisie estpositionné au début du texta témoin.

"this" définit le contexte

de l'activité

Layout : Gestionnaire de placementDéveloppement mobile sous Android IvMad, 2011-2016 15

public class LayoutMainActivity extends AppCompatActivity {


super.onCreate(savedInstanceState);// gestionnaire de placementLinearLayout layout = new LinearLayout(this);// centrer les éléments graphiqueslayout.setGravity(Gravity.TOP);// empiler vers le hautlayout.setOrientation(LinearLayout.VERTICAL);TextView txt = new TextView(this);// mettre le texte du champtxt.setText("Entrez votre nom:");// ajouter un texte au Layoutlayout.addView(txt);// Un champ de saisieEditText edit = new EditText(this);edit.setText("ici");layout.addView(edit);// ajouter tout au conteneur et rendre visiblesetContentView(layout);

}}

Au-delà d'un composantgraphique, il faut définir unconteneur et l'ordre deplacement des composants

Layout : Gestionnaire de placementDéveloppement mobile sous Android IvMad, 2011-2016 16

public class ImageMainActivity extends AppCompatActivity {


super.onCreate(savedInstanceState);LinearLayout layout = new LinearLayout(this);// empiler vers le baslayout.setGravity(Gravity.BOTTOM); // centrer les éléments graphiqueslayout.setOrientation(LinearLayout.VERTICAL);// afficher une image au format PNGImageView image = new ImageView(this);// nom du fichier PNG sans extension dans drawableimage.setImageResource(R.drawable.icone_mobile);layout.addView(image);TextView txt = new TextView(this);// mettre le texte du champtxt.setText("Quel est le modèle de votre mobile?");// ajouter un texte au Layoutlayout.addView(txt);// Un champ de saisie avec edition de texteEditText edit = new EditText(this);edit.setText("Répondre ici");layout.addView(edit);// ajouter tout au conteneur et rendre visiblesetContentView(layout);

}}

La classe ImageView() peut charger une image à partir d'un répertoire ou une ressource.Les images utiles au projet sont placées dans le dossier "res/drawable"

Les événements : traitement et écouteur• En général, les composants graphiques émettent des événements, par

exemple un click de bouton. Pour les suivre il faut s'y abonner.• Il y a deux solutions:

• L'activité implémente l'interface listener (installer un écouteur)• S'il y a plusieurs objets de même nature il faut impérativement les étiqueter

pour faire la différence au sein de la méthode onClick() qui sera appeler àl'activation à tout évènement.

• On passe l'instance d'une classe anonyme en paramètre. La méthodeonClick() sera exécuter lors de l'activation de l'événement. Le code:

bouton.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {

// Décrire les action après le click}

});


Les événements : Bouton et écouteurDéveloppement mobile sous Android IvMad, 2011-2016 18

Installer un écouteur de vue

Méthode appelée au click du bouton

Récupérer la saisie d'un texteDéveloppement mobile sous Android IvMad, 2011-2016 19

public void onClick(View view) {// au click changer le texte sur la boutonbtn.setText("Bouton cliqué");// récupérer le texte tapé dans le champString monTxt = edit.getText().toString();// définir un affichage de texteTextView txt = new TextView(this);// mettre le texte du champtxt.setText(monTxt);// ajouter un texte au Layoutlayout.addView(txt);

}

Android - un boutonpackage ivmad.tp.nowdatetime;

import android.os.Bundle;import android.app.Activity;import android.view.View;import android.widget.Button;import java.util.Date;public class MainActivity extends Activity implements View.OnClickListener {

Button btn;public void onCreate(Bundle icicle) {

super.onCreate(icicle);btn = new Button(this);btn.setOnClickListener(this);updateTime();setContentView(btn);

}public void onClick(View v) {

updateTime();}private void updateTime() {

btn.setText(new Date().toString());}

}


Appel d'une méthode suite à l'événement

"click" sur un bouton

Déroulement de l'exemple (1)§ La déclaration de paquetage doit être identique à celle utilisée pour

créer le projet.§ Pour un projet Android il faut importer les classes auxquelles

l'application fait référence.§ La plupart des classes spécifiques à Android se trouvent dans le paquetage

android§ Les classes de Java SE sont utilisables par les programmes Android, mail il

faut consulter le guide de référence des classes Android pour connaitre leurdisponibilité et compatibilité.

§ Les activités sont des classes publiques héritées de la classe de baseandroid.app.Activity.

§ Les widgets sont des éléments d’interface graphique qu'on peut utiliserdans une application.


Déroulement de l'exemple (2)§ L’activité contient un bouton : Button btn;

§ Un bouton est un widget Android et peut être utilisé dans une application.§ Pour capturer tous les clicks de bouton dans l'activité elle-même on

implémente OnClickListener (écouteur d'événement).§ La méthode onCreate() est appelée au lancement de l’activité, alors

on établi un chaînage vers la superclasse afin d’initialiser l’activitéAndroid de base (super.onCreate(<Bundle object>)).

§ L’instance de bouton créée (new Button(this)), on demande l’envoiede tous les clicks sur ce bouton à l’instance de l’activité(setOnClickListener()) qui appelle la méthode onClick(View v).

§ Un appel la méthode privée updateTime() est constitué, et pour finiron configure la vue du contenu de l’activité avec le bouton lui-même(setContentView()).


Déroulement de l'exemple (3)§ Tous les widgets dérivent de la classe de base View.§ Bundle icicle est un gestionnaire opaque, que toutes les activités

reçoivent lors de leur création.§ Avec Android un click sur un bouton fait appel de la méthodeonClick() sur l’instance OnClickListener configurée pour ça.

§ L’écouteur reçoit la vue qui a déclenché le click et on fait alors appel àla méthode privée updateTime().

§ L’ouverture de l’activité (onCreate()) ou un click sur le bouton(onClick()) doit provoquer la mise à jour du label du bouton avec ladate courante.§ On utilise pour cela la méthode setText(), qui fonctionne exactement

comme avec les JButton de Swing.


Toast : popup surgissant§ Afficher un contenu dans un popup surgissant

§ La classe Toast avec la méthode makeText affiche une fenêtre popup pour un délai 'court' ou 'long'. La méthode prend trois paramètres:

// référence vers l'application

Context context = getApplicationContext();

String text = "Bonjour toast!"; // le texte à afficher

int duration = Toast.LENGTH_SHORT; // La durée d'exposition

Toast toast = Toast.makeText(context, text, duration);

toast.show(); // Visualiser

§ Appel direct du Toast pour une durée 'courte'Toast.makeText(this,text,Toast.LENGTH_SHORT).show();

§ Appel direct du Toast pour une durée 'longue'Toast.makeText(this,text,Toast.LENGTH_LONG).show();


Toast : popup surgissant par boutonDéveloppement mobile sous Android IvMad, 2011-2016 25

Button : Gérer deux boutonsDéveloppement mobile sous Android IvMad, 2011-2016 26

Une activité avec deux boutons ou plus pose problème de leur identification dans la méthode onClick():La méthode setId(int) aide à identifier le bouton cliqué

CheckBoxCheckBox cba, cbb, cbc;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);LinearLayout ll = new LinearLayout(this);ll.setGravity(Gravity.TOP);ll.setOrientation(LinearLayout.VERTICAL);

// ajouter buttonButton b = new Button(this);b.setText("Cliquez ici!");b.setOnClickListener(this);ll.addView(b);// ajouter checkboxescba = new CheckBox(this);cba.setText("Bleu");ll.addView(cba);cbb = new CheckBox(this);cbb.setText("Blanc");ll.addView(cbb);cbc = new CheckBox(this);cbc.setText("Rouge");ll.addView(cbc);setContentView(ll);

}

public void onClick(View v) {Toast tst;String answer=""; if (cba.isChecked()) {answer += cba.getText() + " ";

}if (cbb.isChecked()) {answer += cbb.getText() + " ";

}if (cbc.isChecked()) {answer += cbc.getText() + " ";

} tst = Toast.makeText(this, answer,

Toast.LENGTH_LONG).show(); }

}


Afficher avec Toast

Radio boutonprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// Gestionnaire de placementLinearLayout ll = new LinearLayout(this);ll.setGravity(Gravity.TOP);ll.setOrientation(LinearLayout.VERTICAL);// BoutonButton b = new Button(this);b.setText("Affichez votre langage préféré");b.setOnClickListener(this);ll.addView(b);// Radio boutons en grouperg = new RadioGroup(this);rg.setOrientation(RadioGroup.VERTICAL);rba = new RadioButton(this);rba.setText("Java");rg.addView(rba);rbb = new RadioButton(this);rbb.setText("Python");rg.addView(rbb);rbc = new RadioButton(this);rbc.setText("C#");rg.addView(rbc);// Placement dans layoutll.addView(rg);setContentView(ll);

}

public void onClick(View v) {Toast tst; if ( rba.isChecked() ) {

tst = Toast.makeText(this, rba.getText(), Toast.LENGTH_LONG);

tst.show();}if ( rbb.isChecked() ) {

tst = Toast.makeText(this, rbb.getText(), Toast.LENGTH_LONG);

tst.show();}if ( rbc.isChecked() ) {

tst = Toast.makeText(this, rbc.getText(), Toast.LENGTH_LONG);

tst.show();}

}


Afficher avec Toast

Android Spinner (ComboBox)public class SpinnerComBoxActivity extends Activity implements OnClickListener {String colors[] = {"Red","Blue","White","Yellow","Black"};Spinner sp;public class SpinnerComBoxActivity extends Activity implements OnClickListener {protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);LinearLayout ll = new LinearLayout(this);ll.setGravity(Gravity.TOP);ll.setOrientation(LinearLayout.VERTICAL);Button b = new Button(this);b.setText("Affichez votre choix");b.setOnClickListener(this);ll.addView(b);sp = new Spinner(this); // Appliquer une 'Array' pour le 'Spinner' ArrayAdapter<String> spArrayAdapter = new ArrayAdapter<String>

(this,android.R.layout.simple_spinner_item,colors); sp.setAdapter(spArrayAdapter);ll.addView(sp);setContentView(ll);

}public void onClick(View v) {int i = sp.getSelectedItemPosition();Toast.makeText(getBaseContext(),"Votre choix: +colors[i], Toast.LENGTH_SHORT).show();

}}


Android Spinner (ComboBox)• Pour réaliser la liste déroulante avec la classe Spinner dans le fichier

activity_spinner_com_box.xml il faut ajouter le code suivant: <Spinner

android:id="@+id/Spinner01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:drawSelectorOnTop="true">

</Spinner>


Enregistrer la description XML du Spinner dans le layout de l'activité

Android Toggle buttonpublic class ToggleButtonMainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);ScrollView scrl = new ScrollView(this);final LinearLayout ll = new LinearLayout(this);ll.setOrientation(LinearLayout.VERTICAL);scrl.addView(ll);// ajouter un 'Toggle button'ToggleButton tb = new ToggleButton(this);tb.setTextOn("ON");tb.setTextOff("OFF");tb.setChecked(true);tb.setLayoutParams(new LayoutParams

(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

ll.addView(tb); this.setContentView(scrl); } }


Un bouton "ON/OFF"

Android GUI dynamiqueDéveloppement mobile sous Android IvMad, 2011-2016 32

Android : Les flux E/SDéveloppement mobile sous Android IvMad, 2011-2016 33

•

File

RandomAccessFile

BufferedInputStream

DataInputStream

LineNumberInputStream

InputStreamReader

BufferedOutputStream

OutputStreamWriter

PrintStream

ByteArrayInputStream

FileInputStream

FilterInputStream

PipedInputStream

SequenceInputStream

StringBufferInputStream

ByteArrayOutputStream

FileOutputStream

FilterOutputStream

PipedOutputStream

InputStream

Object

OutputStream

Tout ce qu’il faut pour lire

Tout ce qu’il faut pour écrire

Accès en R/W et positionnement

Android : Les méthodes des fichiersDéveloppement mobile sous Android IvMad, 2011-2016 34

Android : Les méthodes des fichiersDéveloppement mobile sous Android IvMad, 2011-2016 35

Android : Ecrire dans un fichierDéveloppement mobile sous Android IvMad, 2011-2016 36

public void WriteData(String data, String nFichier) {FileOutputStream fOut = null; // Flkux de sortie vers un fichierOutputStreamWriter osw = null; // Flux d'ecrituretry{ // create new file or rewrite existing MODE_PRIVATE

// or append to file if MODE_APPENDfOut = getApplicationContext().openFileOutput(nFichier,MODE_PRIVATE);osw = new OutputStreamWriter(fOut);osw.write(data);osw.flush();

} catch (Exception e) {e.printStackTrace(); // exception sur le flux d'erreur standard

}finally {

try {osw.close();fOut.close();

} catch (IOException e) {e.printStackTrace(); // exception sur le flux d'erreur standard

}}

}

Android : Lire dans un fichierDéveloppement mobile sous Android IvMad, 2011-2016 37

public String ReadData(String nFichier) {FileInputStream fIn = null;InputStreamReader isr = null;char[] inputBuffer = new char[2550];String data = null;try {

fIn = getApplicationContext().openFileInput(nFichier);isr = new InputStreamReader(fIn);isr.read(inputBuffer);data = new String(inputBuffer);

} catch (Exception e) {e.printStackTrace(); // l'exception sur le flux d'erreur standard

}return data;

}

Android : Afficher du contenu HTMLDéveloppement mobile sous Android IvMad, 2011-2016 38

• WebView permet d’afficher dans une activité un site web a partir d’un URL ou d’un contenu balisé HTML:WebView webview = new WebView(this);webview.loadUrl("http://www.univ-amu.fr/");setContentView(webview);

• Ou:WebView webview = new WebView(this);String str = "<html><body><p> Bonjour <b>HTML</b></body></html>";webview.loadData(str, "text/html", null);setContentView(webview);

Android : Afficher contenu HTMLDéveloppement mobile sous Android IvMad, 2011-2016 39

public class WebViewerMainActivity extends AppCompatActivity {WebView webview;String contenu = "";@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);// Composer une sequence en HTMLcontenu += "<html><body><h1 style='color:blue;text-

align:center;'>HTML via Android</h1><br />";contenu += "<h2 style='color:red;text-align:center;'>Bonjour tout le monde!</h2></body></html>";// Afficher le contenu HTMLwebview = new WebView(this);webview.loadData(contenu,"text/html",null);setContentView(webview);

}}

Android : Prendre de notes (BlockNote)Développement mobile sous Android IvMad, 2011-2016 40

Documents

DÉVELOPPEMENT D'APPLICATIONS MOBILESivmad.free.fr/M2PSIR/Cours-M2PSIR-Android-2016-3.pdf · en Swing de Java2SE. ... 2011-2016 17. Les événements : Bouton et écouteur Développement