1. No category

­ ED 3 IHM ­
NFA025
Conservatoire National des Arts et Métiers
lundi 30 mars 2015
Jean­Ferdy SUSINI
Exercice 1 : Layout XML
On donne le fichier main.xml suivant :
<?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" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.01"
android:text="@string/invite" />
<EditText
android:id="@+id/editText1"
android:layout_width="45px"
android:layout_height="wrap_content"
android:layout_weight="0.16" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/invite_motDePasse" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="textPassword" />
</LinearLayout>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/libBouton" />
</LinearLayout>
Question 1
Dessiner l'interface graphique associée à ce fichier.
Question 2
Lors du développement de l'application Android, dans quelle partie de l'application peut on utiliser
l'identificateur button1 de l'objet Button ci­dessus ?
Question 3
A quel endroit de l'application Android sera indiqué le libellé de cet objet Button ? On indiquera ce
que ce bouton affiche comme libellé.
Question 4
Écrire le fichier ressource contenant la définition des chaînes de caractères correspondant.
Exercice 2 : Interface utilisateur
Question 1
Écrivez le code correspondant à l'interface utilisateur suivante :
Quelles ressources utilisez vous pour obtenir ce résultat ?.
Question 2
Cette interface est développée pour l'orientation portrait de l'interface. On souhaite maintenant
proposer une version spécifique pour l'orientation paysage. Cette interface va afficher la vue suivante :
Comment procédez vous ?
Exercice 3 : Une interface pour la classe agenda
On souhaite écrire une interface permettant la saisie d'un objets Rendez­Vous un peu sur le modèle de
celui construit dans l'ED 1.
Question 1
Proposez une spécification XML à l'aide de «widgets» simples de l'interface graphique qui permette de
saisir la description, la date de début et la date de fin du rendez­vous.
Un bouton «Valider» permet de valider les données entrées par l'utilisateur.
Question 2
Au moment de valider un rendez­vous, un test permet de vérifier si l'événement est en cours, dépassé
ou à venir. Produire un retour à l'utilisateur en modifiant la couleur de fond de l'écran.
Exercice 4 : Une interface pour un petit jeu
Question 1
dessiner l'interface correspondant au fichier XML suivant, associé à l'activité d'identification du joueur.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="@+id/pseudo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Pseudo" >
<requestFocus />
</EditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="changePseudo"
android:hint="OK"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="annule"
android:text="Annuler"
/>
</LinearLayout>
Question 2
Donner une description XML pouvant correspondre à cette image
Exercice 5 : interface de saisi d'information judo
Question 1
Écrivez le code XML de l'interface utilisateur ci­dessous correspondant à l'activité de saisie des
informations sur un judoka. Décrire également les ressources que vous utilisez vous pour obtenir ce
résultat.
Question 2
L'interface de saisie de club de judo correspond au fichier XML suivant : Dessinez l'apparence général
(affichage des éléments, mise en page…) correspondant à ce code XML affiché en mode portrait.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text="@string/add_nomclub_lbl"
android:id="@+id/add_nomclub_tv"
/>
<EditText
android:id="@+id/club_name_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/add_nomclub_tv"
android:hint="@string/add_nomclub_hint"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@id/add_nomclub_tv"
android:text="@string/add_villeclub_lbl"
android:id="@+id/add_villeclub_tv"
/>
<EditText
android:id="@+id/club_town_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/add_nomclub_tv"
android:layout_toRightOf="@id/add_villeclub_tv"
android:hint="Town"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="addClub"
android:text="@string/add_club_confirm_lbl"
android:hint="@string/add_club_confirm_hint"
/>
</RelativeLayout>
avec le fichier de chaînes de caractères correspondant.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Ajouter un Club</string>
<string name="add_nomclub_lbl">Nom du Club</string>
<string name="add_club_confirm_lbl">Valider</string>
<string name="add_club_confirm_hint">Presser pour valider</string>
<string name="add_nomclub_hint">Entrer le nom du Club</string>
<string name="add_villeclub_lbl">Ville : </string>
</resources>
Exercice 6 : Mini Navigateur Web
Question 2
Écrivez le code XML de l'interface utilisateur ci­dessous. Décrire également les ressources que vous
utilisez vous pour obtenir ce résultat..
Question 2
L'interface Navigateur correspond au fichier XML suivant :
<?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"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="@drawable/back"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="@drawable/foreward"
/>
</RelativeLayout>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/navigateur_web_wv"
/>
</LinearLayout>
Dessinez l'apparence général (affichage des éléments, mise en page…) correspondant à ce code XML
affiché en mode portrait (l'écran étant plus haut que large). Donnez rapidement les ressources
complémentaires nécessaires.
Jean­Ferdinand.Susini@cnam.fr