31 janvier 2012

Tutoriel Android - Inter Activité

Dans le premier tutoriel, nous avons vu comment préparer l'environnement de développement et créer très simplement un nouveau projet Android sous Eclipse. Eh bien, programmons maintenant !

Aujourd'hui, un petit programme pour apprendre à :
  • Interagir avec l'utilisateur
  • Naviguer entre écrans

Le résultat :

Une activité avec  3 champs de saisie et un bouton.  

Sur l'événement Onclick du bouton, lancement d'une nouvelle activité. 


La seconde activité affiche dans un message les infos saisies dans la première activité.





      ----------------------------------------------------------------------------------------------------------------------------------

      Les étapes :

      1. nouveau projet Android     : TutoAndroidInteractivity


      Build Target         : Android 2.2
      Application name     : Tuto Inter Activité
      Package name         : fr.scherrda.android.tuto.interactivity
      Create Activity     : LoginActivity
      Min SDK Version     : 8
              --> Finish


      1. Modifier le fichier de layout  res/layout/main.xml


      Disposer les composants Texte  <TextView…/> pour les libellés, Champs , Bouton <Button…/> à l'intérieur du composant de layout principal <RelativeLayout>...</RelativeLayout>.

      <?xml version="1.0" encoding="utf-8"?>
      RelativeLayout :
      permet de positionner
      les éléments les uns par rapport aux autres.

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#FFFFFF"
          android:padding="20dp">
         
          <TextView android:id="@+id/hostname_lbl"
              android:text="@string/url"
      Un texte
              android:textColor="#000000"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />
             
          <EditText android:id="@+id/hostname"
      Un champ de saisie
              android:layout_height="wrap_content"
              android:layout_width="fill_parent"
              android:layout_below="@+id/hostname_lbl"
              android:layout_marginBottom="10dp" />
             
          <TextView android:id="@+id/login_lbl"
      Un texte
              android:text="@string/login"
              android:textColor="#000000"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_below="@+id/hostname" />
             
      Un champ de saisie
          <EditText android:id="@+id/login"
              android:layout_height="wrap_content"
              android:layout_width="fill_parent"
              android:layout_below="@+id/login_lbl"
              android:layout_marginBottom="10dp" />
             
          <TextView android:id="@+id/password_lbl"
      Un texte
              android:text="@string/password"
              android:textColor="#000000"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_below="@+id/login" />
             
          <EditText android:id="@+id/password"
      Un champ de saisie
              android:password="true"
              android:layout_height="wrap_content"
              android:layout_width="fill_parent"
              android:layout_below="@+id/password_lbl"
              android:layout_marginBottom="10dp" />
             
      Un bouton
          <Button android:id="@+id/login_btn"
              android:text="@string/loginOk"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerHorizontal="true"
              android:layout_below="@+id/password" />
             
      </RelativeLayout>


      .
      1. Modifier le fichier de valeurs  res/values/strings.xml



      Rajouter les définitions de chaînes pour url, login, password, loginOk :
      <?xml version="1.0"
       encoding="utf-8"?>
      <resources>
      <string name="app_name"> Tuto Inter Activité </string>
      <string name= "login">Login </string>
      <string  name= "password">Password </string>
      <string  name= "urk">Server </string>
      <string  name= "loginOK">GO </string>
      </resources>

      <script src="https://gist.github.com/1911667.js"> </script>


      1. Modifier la méthode onCreate() de l'activité LoginActivity


      Créer un listener sur le bouton login_btn. Lorsque le bouton est cliqué:
      • Récupérer la saisie utilisateur
      • et la transmettre à une autre activité.

      @Override

      public void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.main);
            
         //Récupération du bouton défini dans fichier de layout à partir de son id
         Button button = (Button)findViewById(R.id.login_btn);
            
         //déclaration d'un listener sur l'événement OnClick du bouton
         button.setOnClickListener(new OnClickListener() {    
         @Override
         public void onClick(View v) {


         //récupération des valeurs saisies par l'utilisateur
      EditText loginEdit = (EditText)findViewById(R.id.login);
      String login = loginEdit.getText().toString();

      String password = ((EditText)findViewById(R.id.password))
      .getText().toString();

      String url = ((EditText)findViewById(R.id.hostname)).getText().toString();
         
         //Transmission de ces infos à l'activité ShowActivity
      Bundle objetbunble = new Bundle();
      objetbunble.putString("login", login);
      objetbunble.putString("password", password);
      objetbunble.putString("hostname", url);
         
      Intent intent = new Intent(getApplicationContext(),
      ShowActivity.class);
      intent.putExtras(objetbunble);

         //lancement de l'activité ShowActivity
      startActivity(intent);
      }
      });        
      }




      1. Créer une classe activité ShowActivity héritant de Activity

      a. Déclarer l'activité dans le fichier AndroidManifest.xml !

      <?xml version="1.0" encoding="utf-8"?>

      <manifest xmlns:android="http://schemas.android.com/apk/res/android"

          package="fr.scherrda.android.tuto.interactivity"
          android:versionCode="1"
          android:versionName="1.0">
        <uses-sdk android:minSdkVersion="8" />


        <application android:icon="@drawable/icon" android:label="@string/app_name">
            <activity android:name=".LoginActivity"
                      android:label="@string/app_name">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
         <activity android:name="fr.scherrda.android.tuto.interactivity.ShowActivity">
      </activity>
        </application>
      </manifest>









    • b. Ajouter la méthode onCreate() 

    • (Source + Override/Implement method sous Eclipse) 



      Récupérer les informations transmises et les afficher avec un Toast pendant un certain laps de temps (LENGTH_LONG par exemple)




      @Override

      protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);


         //Récupération des infos transmises
      Bundle objetbunble = this.getIntent().getExtras();
      String login = objetbunble.getString("login");
      String password = objetbunble.getString("password");
      String url = objetbunble.getString("hostname");

         //Affichage d'un message
      Toast.makeText(this, "Hello, " + login + "! Voulez-vous vous connecter à " + url + "?", Toast.LENGTH_LONG).show();


      }




      Ce qu'il faut retenir

        • 2 écrans, 2 activités
        • Intent : un message asynchrone sous Android permettant d'activer une activité (entre autre). Le message peut être porteur d'informations.
        • findViewById : récupération de l'instance d'un composant graphique par son Id.




        Ex :

        //Récupération du composant EditText, d'id login

        EditText loginEdit = (EditText)findViewById(R.id.login);




        Pour aller plus loin




        Layout :



          • Utilisez la complétion automatisque d'Eclipse (Ctrl Espace) pour tester les propriétés des composants.






            • Visualisez rapidement le résultat sous l'onglet Graphical Layout
             
             



          Les composants graphiques en java

          TextView, EditText, Button, … : il est possible d'instancier, gérer la disposition des composants directement en java sans utiliser de fichier xml. (La méthode recommandée reste cependant celle de fichier xml de layout).
                Button button = new Button(this);
                button.setText(R.string.loginOk);
                button.setPadding(0, 0, 10, 15);
                button.setWidth(20);

          Ajoutez un layout pour l'activité ShowActivity :

          Créez un fichier xml de layout : showactivity.xml et associez le à la vue.
          Affichez les infos dans un composant TextView.

          Le cycle de vie des activités
          Que se passe-t-il pour la première activité lorsque la seconde activité se lance ? Elle change d'état !

          Nous avons vu que les activités passe par la méthode OnCreate(). Une activité passe par d'autres transitions : OnPause, OnResume, OnDestroy, OnStart, OnStop
          Ce changement d'état est particulièrement bien adapté au type de terminal. En effet, certaines applications sont plus importantes que d'autres, comme le téléphone ! Il faut donc pouvoir quitter une activité immédiatement pour commencer un autre traitement, et pouvoir y revenir plus tard…ou pas, si le temps écoulé est trop long.

          Le framework Android gère le passage dans les différents états d'une activité.
          Lisez ici :
          http://developer.android.com/guide/topics/fundamentals/activities.html#Lifecycle
          Un développeur Android se doit de connaître et comprendre ce mécanisme.






          Bonne lecture.

          6 commentaires:

          1. Bonjour madame Scherr,
            J'ai essayé, mais je tombe sur plusieurs problèmes...
            Le android:inputType manquent et cela déclenche des warnings.
            Les class ne compilent pas acr Button, View, Intent, etc... ne peuvent être résolues (et je n'ai pas encore trouvé la parade...).
            En fait votre tuto n'est sans doute plus à jour et il mériterait un "update".
            Merci de partager.
            jb

            RépondreSupprimer
          2. Voici le main.xml qui marche avec des corrections pour faire passer le test de rejet du code html

            [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"
            tools:context=".MainActivity" ]

            [TextView android:id="@+id/hostname_lbl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:color="#000000"
            android:text="@string/url" />
            [EditText android:id="@+id/hostname"
            android:inputType="text"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_below="@+id/hostname_lbl"
            android:layout_marginBottom="10dp" />
            [TextView android:id="@+id/login_lbl"
            android:text="@string/login"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/hostname" />
            [EditText android:id="@+id/login"
            android:inputType="text"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_below="@+id/login_lbl"
            android:layout_marginBottom="10dp" />
            [TextView android:id="@+id/password_lbl"
            android:text="@string/password"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/login" />
            [EditText android:id="@+id/password"
            android:inputType="textPassword"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_below="@+id/password_lbl"
            android:layout_marginBottom="10dp" />
            [Button android:id="@+id/login_btn"
            android:text="@string/loginOk"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_below="@+id/password" />
            [/RelativeLayout>

            RépondreSupprimer
          3. Voici les clauses import qu'il faut ajouter

            import android.os.Bundle;
            import android.app.Activity;
            import android.content.Intent;
            import android.view.Menu;
            import android.view.View.OnClickListener;
            import android.widget.Button;
            import android.widget.EditText;
            import android.view.*;
            à la classe main
            Et là ça compile bien.

            Et à la classe ShowActivity
            import android.app.Activity;
            import android.os.Bundle;
            import android.widget.Toast;

            Merci pour le tuto !

            RépondreSupprimer
          4. Voilà, avec les modifications que je vous ai proposées ci-dessus tout marche nickel (as of 19th of December 2012... comme on le lit dans les docs...)
            Encore merci, j'ai appris plein de trucs.
            jb

            RépondreSupprimer
          5. Merci pour ce tuto mais j'ai 2 -3 erreurs ... ce sont celle ci :
            Button button = (Button)findViewById(R.id.login_btn);
            EditText loginEdit = (EditText)findViewById(R.id.login)
            String password = ((EditText)findViewById(R.id.password))
            .getText().toString();
            String url = ((EditText)findViewById(R.id.hostname)).getText().toString();


            En gros c'est le (R.id.CEQUEJEVEUX) qui ne fonctionne pas ...

            Avez vous une idée ? Merci !

            RépondreSupprimer
          6. Super!!! ça m'a vraiment beaucoup aidé !
            merci ;) cet article est parfait, rien à dire ! Je vais tenter le tuto des listes personnalisées !
            Bon courage pour la suite et merci de nous aider (pauvres débutant(e)s que nous sommes!)

            RépondreSupprimer