ISIT-Android ISITCom Android Club

Atelier 2: Appplication Prix-Solde

Cration dune interface graphique & Manipulation des activits et Sous-activits

Assist par : Khalil MIGHRI

Atelier 2 ISIT-Android

Page 1

ISITCom H-S Khalil MIGHRI

I- Cration dun Emulateur virtuel :

Window AVD Manager:

New Atelier 2 ISIT-Android ISITCom H-S Khalil MIGHRI

Page 2

Donner un nom du tlphone Android Virtuel, choisir la version dAndroid utiliser. Ce sont les paramtres les plus importants. Create AVD

Atelier 2 ISIT-Android

Page 3

ISITCom H-S Khalil MIGHRI

Le nouvel appareil virtuel est bien ajouter dans la liste, pour tester : slectionner AVD1 Start

Atelier 2 ISIT-Android

Page 4

ISITCom H-S Khalil MIGHRI

Launch

En fonction de vos besoins, vous pouvez crer autant de tlphone virtuel que ncessaires.

Atelier 2 ISIT-Android

Page 5

ISITCom H-S Khalil MIGHRI

II- Application Prix-Solde :

Ouvrir Eclipse file New Other :

Atelier 2 ISIT-Android

Page 6

ISITCom H-S Khalil MIGHRI

Choisir : Android Android Project Next

Next

Atelier 2 ISIT-Android

Page 7

ISITCom H-S Khalil MIGHRI

 Cocher la version dAndroid que vous voulez lutiliser Next

Atelier 2 ISIT-Android

Page 8

ISITCom H-S Khalil MIGHRI

Donner le nom du package qui doit tre sous la forme your.package.namespace

Par convention, le nom d'un package est sous la forme d'une "url l'envers". Vous pouvez mettre votre nom de domaine personnel ou ce que vous voulez.
RQ : Vrifier que la case Create Activity est coch. Finish

Atelier 2 ISIT-Android

Page 9

ISITCom H-S Khalil MIGHRI

Notre projet est bien cre, et on obtient la structure du projet suivante :

Le fichier src/atelier2.prixsolde.isitandroid/PrixsoldeActivity.java par dfaut contient :

Atelier 2 ISIT-Android

Page 10

ISITCom H-S Khalil MIGHRI

Ajoutons le reste des mthodes de base dune activit : onStart(), onRestart(), onResume(), onPause(), onStop() ,onDestroy() Donc, le fichier PrixsoldeActivity.java devient :
package atelier2.prixsolde.isitandroid; import android.app.Activity; import android.os.Bundle; public class PrixsoldeActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } @Override protected void onStart() { // TODO Auto-generated method stub super.onStart(); } @Override protected void onRestart() { // TODO Auto-generated method stub super.onRestart(); } @Override protected void onResume() { // TODO Auto-generated method stub super.onResume(); } @Override protected void onPause() { // TODO Auto-generated method stub super.onPause(); } @Override protected void onStop() { // TODO Auto-generated method stub super.onStop(); } @Override protected void onDestroy() { // TODO Auto-generated method stub super.onDestroy(); } }

Maintenant, on va modifier le fichier res/Layout/main.xml qui va contenir linterface graphique de notre activit : Le contenu par dfaut :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent"

Atelier 2 ISIT-Android

Page 11

ISITCom H-S Khalil MIGHRI

android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>

Ajoutons 2 lments EditText et un bouton le fichier main.xml devient :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/editText1" android:hint="@string/edittext1"> </EditText> <EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/editText2" android:hint="@string/solde"></EditText> <Button android:layout_height="wrap_content" android:id="@+id/button1" android:text="Go" android:layout_width="172dp"> </Button> </LinearLayout>

Atelier 2 ISIT-Android

Page 12

ISITCom H-S Khalil MIGHRI

Linterface graphique devient :

Maintenant, on va modifier le fichier accueil.java pour quon puisse accder aux lments ajouts :
package atelier2.prixsolde.isitandroid; import android.app.Activity; import android.os.Bundle; public class PrixsoldeActivity extends Activity { //dclaration des variables EditText edit1 ; EditText edit2; Button bouton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //appel des composants ajouter dans le fichier "main.xml" edit1=(EditText)this.findViewById(R.id.editText1); edit2=(EditText)this.findViewById(R.id.editText2); bouton =(Button)this.findViewById(R.id.button1); } @Override protected void onStart() { // TODO Auto-generated method stub super.onStart(); } @Override

Atelier 2 ISIT-Android

Page 13

ISITCom H-S Khalil MIGHRI

protected void onRestart() { // TODO Auto-generated method super.onRestart(); } @Override protected void onResume() { // TODO Auto-generated method super.onResume(); } @Override protected void onPause() { // TODO Auto-generated method super.onPause(); } @Override protected void onStop() { // TODO Auto-generated method super.onStop(); } @Override protected void onDestroy() { // TODO Auto-generated method super.onDestroy(); } }

stub

stub

stub

stub

stub

Ensuite, on va ajouter laction au bouton, pour quen cliquant, le prix aprs solde saffich dans une nouvelle interface. Donc le code du fichier PrixsoldeActivity devient :
package atelier2.prixsolde.isitandroid; import import import import import import import android.app.Activity; android.content.Intent; android.os.Bundle; android.view.View; android.view.View.OnClickListener; android.widget.Button; android.widget.EditText;

public class PrixsoldeActivity extends Activity implements OnClickListener { /** Called when the activity is first created. */ //dclaration des variables EditText edit1; EditText edit2; Button bouton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //appel des composants ajouter dans le fichier "main.xml" edit1 = (EditText) this.findViewById(R.id.editText1); edit2 = (EditText) this.findViewById(R.id.editText2); bouton = (Button) this.findViewById(R.id.button);

Atelier 2 ISIT-Android

Page 14

ISITCom H-S Khalil MIGHRI

bouton.setOnClickListener( new View.OnClickListener() { public void onClick(View v) { double r = Double.parseDouble(edit1.getText().toString()) * Double.parseDouble(edit2.getText().toString()); r=r/100; r=Double.parseDouble(edit1.getText().toString())-r; Intent intent = new Intent(getApplicationContext(), affichage.class); intent.putExtra("data", r); startActivity(intent); } }); } @Override protected void onStart() { // TODO Auto-generated method super.onStart(); } @Override protected void onResume() { // TODO Auto-generated method super.onResume(); } @Override protected void onPause() { // TODO Auto-generated method super.onPause(); } @Override protected void onStop() { // TODO Auto-generated method super.onStop(); } @Override protected void onDestroy() { // TODO Auto-generated method super.onDestroy(); } }

stub

stub

stub

stub

stub

Il nous reste que de crer un nouveau le sous activit affichage : Slectionner le nom du package de notre projet clique droite New Class

Atelier 2 ISIT-Android

Page 15

ISITCom H-S Khalil MIGHRI

Atelier 2 ISIT-Android

Page 16

ISITCom H-S Khalil MIGHRI

Donner le nom du classe affichage Finish Mettre le code suivant dans le fichier affichage.java :
package atelier2.prixsolde.isitandroid; import import import import prixsold.isitandroid.club.R; android.app.Activity; android.os.Bundle; android.widget.TextView;

public class affichage extends Activity{ TextView textview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main2);

Atelier 2 ISIT-Android

Page 17

ISITCom H-S Khalil MIGHRI

textview= (TextView) this.findViewById(R.id.textview); Double s = this.getIntent().getExtras().getDouble("data"); textview.setText("Le prix aprs solde est: "+s); } }

Enfin, crer le fichier main2.xml sous le dossier Layout : Slctionner Layout clique droite New Android XML File

Atelier 2 ISIT-Android

Page 18

ISITCom H-S Khalil MIGHRI

Finish Ajouter un lment TextView :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/textview" /> </LinearLayout>

Atelier 2 ISIT-Android

Page 19

ISITCom H-S Khalil MIGHRI

Il faut ajouter lactivit affichage dans le fichier AndroidManifest.xml sous le nud application, ce fichier est plac dans le rpertoire de base du projet.
<activity android:name=".affichage" android:label="Prix aprs Solde"> </activity>

III-Test :
Excution du program :

Atelier 2 ISIT-Android

Page 20

ISITCom H-S Khalil MIGHRI

Atelier 2 ISIT-Android

Page 21

ISITCom H-S Khalil MIGHRI

Atelier 2 ISIT-Android

Page 22

ISITCom H-S Khalil MIGHRI