TP N°2 - Éléments d'interfaces graphiques

Ce TP permet de découvrir et manipuler les éléments d'interfaces graphiques dans une application Android. Il enseigne la création et la gestion de composants simples tels que TextView, EditText, Button, ImageView, ainsi que l'utilisation de boutons radio et cases à cocher. Pour réaliser ce TP, il est nécessaire d'avoir un environnement de développement Android configuré avec un projet Android Studio prêt à être modifié.

Objectifs

• Créer une interface graphique simple avec des éléments de base (texte, zone de saisie, bouton, image).
• Configurer les propriétés des composants graphiques via le fichier XML.
• Mettre en place des interactions avec des boutons radio et des cases à cocher.
• Écrire du code Java pour gérer les événements et afficher des messages dynamiques.

Prérequis et configuration

• Environnement Android Studio installé et configuré.
• Connaissance de base du XML pour la définition des interfaces.
• Notions élémentaires de programmation Java pour Android.
• Projet Android avec activité principale prête à être modifiée.

Manipulation 1 : éléments graphiques simples

Cette étape consiste à créer une application nommée TP2Manipulation1 avec une interface principale appelée Accueil, basée sur une activité vide (blank_activity). L'objectif est d'ajouter des éléments graphiques simples dans cette interface.

Étapes :

1. Ouvrir le fichier XML principal situé dans src/res/layout pour accéder à l'interface Accueil.
2. Supprimer le composant TextView par défaut ("Hello World") en le sélectionnant puis en appuyant sur la touche Suppr.
3. Ajouter un nouveau TextView en sélectionnant l'objet "Medium Text" dans la palette, puis en cliquant à l'endroit souhaité dans la fenêtre de l'interface.
4. Dans l'onglet des propriétés, modifier l'attribut id en txtMsg (respecter la casse).
5. Modifier également le texte affiché dans le TextView en remplaçant par « TPandroid ».

Le code XML correspondant sera :

<TextView
android:id="@+id/txtMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/champ de texte simple"
android:layout_gravity="center"
/>

Ensuite, créer les autres éléments :

• Une zone de texte vide avec l’id EditText01 en utilisant l’objet EditText.
• Un bouton avec l’id btnButton0 et le texte « Versions » en utilisant l’objet Button.
• Une image (par exemple l’icône Android Studio) placée sous les autres objets, en utilisant l’objet ImageView.

Manipulation 2 : boutons radio, cases à cocher et boutons

Cette étape consiste à créer une application nommée Enquete avec une interface permettant de sélectionner des options via des cases à cocher et des boutons radio, puis d'afficher un message correspondant aux choix.

Étapes :

1. Créer l'interface graphique avec les composants suivants :
• Cases à cocher chkAndroid et chkMicrosoft.
• Groupe de boutons radio radioGroupSpecialiteType contenant les boutons radDsi, radRsi et radSem.
• Un bouton btnAffich pour afficher le message.
2. Compléter le code Java de l’activité principale pour gérer les événements :

package com.ISETB.DSI.Enquete;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends Activity {
    CheckBox chkAndro;
    CheckBox chkMicro;
    Button btnAffich;
    RadioGroup radSpecialityType;
    RadioButton radDSI;
    RadioButton radRSI;
    RadioButton radSEM;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        chkAndro = (CheckBox) findViewById(R.id.chkAndroid);
        chkMicro = (CheckBox) findViewById(R.id.chkMicrosoft);

        btnAffich = (Button) findViewById(R.id.btnAffich);
        radSpecialityType = (RadioGroup) findViewById(R.id.radioGroupSpecialiteType);
        radDSI = (RadioButton) findViewById(R.id.radDsi);
        radRSI = (RadioButton) findViewById(R.id.radRsi);
        radSEM = (RadioButton) findViewById(R.id.radSem);

        // LISTENER: Lier bouton-events-et-code
        btnAffich.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                String msg = "Spécialité ";
                String option = "club ";
                if (chkAndro.isChecked())
                    option += "Android ";
                if (chkMicro.isChecked())
                    option += "Microsoft ";

                // obtenir le numéro ID boutons radio
                int radioId = radSpecialityType.getCheckedRadioButtonId();

                // comparer les ID sélectionnés avec RadioButtons ID individuellement
                if (radSEM.getId() == radioId)
                    msg = "Spécialité SEM";
                if (radRSI.isChecked())
                    msg = "Spécialité RSI";
                if (radDSI.isChecked())
                    msg = "Spécialité DSI";

                Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Résultats attendus

• Dans la première application, l’interface affiche un texte « TPandroid », une zone de saisie vide, un bouton « Versions » et une image placée correctement.
• Dans la seconde application, après sélection des cases à cocher et d’un bouton radio, le clic sur le bouton affiche un message Toast indiquant la spécialité choisie (DSI, RSI ou SEM) et les options cochées (Android, Microsoft).

Pièges courants

• Ne pas respecter la casse des identifiants id dans le XML et dans le code Java, ce qui empêche la liaison correcte des composants.
• Oublier de supprimer le TextView par défaut, ce qui peut créer un chevauchement d’éléments.
• Ne pas initialiser correctement les variables dans le code Java avec findViewById, ce qui provoque des erreurs à l’exécution.
• Confondre les identifiants des boutons radio dans le code, ce qui empêche de détecter la sélection correcte.
• Utiliser une durée incorrecte dans Toast.makeText (le paramètre doit être Toast.LENGTH_SHORT ou Toast.LENGTH_LONG et non un entier arbitraire).