BTS Services Informatiques aux Organisations 2014/ ème année Lycée A. Malraux. 1- Descriptif fonctionnel de l'application pour la construction

Transcription

1 Application SIOQuiz 1- Descriptif fonctionnel de l'application pour la construction Objectif Construire une application Android proposant un Quiz sur des noms de films et d'acteurs à retrouver en fonction du nom du rôle du personnage Activité de base Application Name SIO Quiz Package Name org.btssio.sioquiz Minimum Required SDK API 19 :Android 4.4 (KitKat) l'api supportée par votre Android Target SDK API 21 : Android 4.X (L Preview) Compile Width API 21 : Android 4.X (L Preview) Theme Holo Light with Dark Action Bar Create Activity BlankActivity Activity Name MainActivity Layout Name activity_main Navigation Type None Ressources à utiliser Matériel Emulateur ou smartphone physique Fichier sioquiz.zip Créer l'application SIOQuiz en utilisant l'icône (sioquizz.png ) fournie dans la ressource 2. Construction de la page d'accueil Modification de la page d'accueil La page d'accueil va comporter quatre éléments : - une image de fond - un texte demandant à l'utilisateur son prénom - un contrôle de saisie du prénom - un bouton pour le démarrage du Quiz Informations/conseils : Reportez-vous à l'exercice 3_Widgets pour la mise en place de l'image de fond Le conteneur est de type RelativeLayout L'image de fond à pour nom sioquizfond.jpg Le bouton fait appel à un style défini dans le fichier red_button.xml à placer dans le répertoire drawable Les textes du contrôle TextView et Button doivent être issus du fichier strings.xml Le style du bouton fait l'objet d'un ajout dans le fichier général des styles ( styles.xml situé dans le répertoire values) : SLAM4 Conception et adaptation de Solutions applicatives 1

2 <style name="button_go"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textcolor">#ffffff</item> <item name="android:gravity">center</item> <item name="android:layout_margin">3dp</item> <item name="android:textsize">18sp</item> <item name="android:textstyle">bold</item> <item name="android:shadowcolor">#000000</item> <item name="android:shadowdx">1</item> <item name="android:shadowdy">1</item> <item name="android:shadowradius">2</item> </style> Et plus particulièrement avec les références ci-dessous dans le descriptif XML du bouton dans le fichier : activity_main.xml : <Button... style="@style/button_go" android:background="@drawable/red_button"... /> Effectuer les modifications de la page d'accueil Le visuel devrait ressembler à ceci : L'appel d'une activité par un bouton Jusqu'à présent, les manipulations et la construction de l'application ont porté uniquement sur des ressources XML définies dans un fichier, ce qui pour le programmeur pouvait sembler particulier voire frustrant On entre cette fois-ci dans le code Java et le SDK Android avec le principe des intentions. SLAM4 Conception et adaptation de Solutions applicatives 2

3 Littéralement, une intention (intent) lie une demande à un récepteur qui peut être une nouvelle activité ou une opé- -ration dans l'activité, un service ou un composant (comme par exemple une interface de type BroadcastReceiver, autre concept...). Au niveau du SDK Android, un objet intent se déclare classiquement avec l'opérateur new : Intent nom = new Intent(this,classe_à_appeler); Voyons pas à pas, l'implantation d'un bouton et de sa réaction en cas de clic, dans le code Java. Faire hériter la classe MainActivity de Activity et non de ActionBarActivity Déclarer une variable de type Button nommé depart dans le fichier MainActivity.java au niveau de la classe MainActivity Associer la ressource XML de type Button au composant par son id (après la ligne : setcontentview(r.layout.activity_main) : depart = (Button)this.findViewById(R.id.btngo); Note : R.id.btngo représente l'identifiant de bouton, mettre le votre... Des erreurs apparaissent à cause des librairies, faire le nécessaire... Techniquement, vous venez de créez un accesseur pour le contrôle. Il manque la réaction à l'événement correspondant au clic du bouton. Associer la méthode d'écoute au bouton après l'association à la ressource XML : depart.setonclicklistener(this); Les familiers de Java retrouvent le gestionnaire d événements et la notion de listener. Un listener se traduit techniquement par une fonction de type callback vers un événement (ici le clic de la souris), ou plus simplement (et approximativement) l'appel d'une méthode en réaction à une manipulation de l'utilisateur. Le paramètre this fait référence à l'application, origine de la demande (Handler).. Eclipse indique une erreur car vous devez implémenter l'interface OnClickListener dans la classe Main soit Let 'MainActivity' implements 'OnClickListener'. Choisir (double clic) dans l'aide de l'erreur, l'implémentation de l'interface OnClickListener Résoudre l'erreur suivante par l'implémentation de la méthode non implémentée (toujours à partir de l'aide) Quelle est la méthode ajoutée? L'utilisation de l'aide d'eclipse pour effectuer ces opérations est courante, encore faut-il choisir les bonnes options... Création d'une nouvelle intention La création de l'intention se fait à partir du moment où l'on clique sur le bouton et l'appel de la sous-activité se réalise grâce à l'une ou l'autre des deux méthodes suivantes : startactivity() : dans ce cas l'activité principale ne sera pas prévenue de la fin de la sous-activité startactivityforresult() : ajoute en plus un code à définir envoyé à la sous-activité ; l'implémentation de la méthode onactivityresult() retournera un code (et le statut) annonçant la fin de la sous-activité. SLAM4 Conception et adaptation de Solutions applicatives 3

4 Même si pour l'instant le code de retour (on le verra dans une autre application) ne sera pas traité, il est toujours préférable de positionner la méthode startactivityforresult(). Ajouter le code suivant dans la bonne méthode qui réagit dès que le bouton depart a été cliqué etprocéder à l'importation de la librairie : Intent intentjeu = new Intent(this,JeuActivity.class); this.startactivityforresult(intentjeu,10); Noter que la création de l'intention demande comme paramètres le contexte ( this ) et la classe (JeuActivity.class ). Évidement, cette classe JeuActivity manque ce qui entraîne toujours une erreur. 3. Construction de la page Jeu Création de la source Créer un nouveau fichier source par un clic droit sur org.btssio.sioquiz ( dans le répertoire src ), ligne New, puis Other, Android Activity et indication comme nom d'activité : JeuActivity : Faire hériter classiquement la classe d' Activity, supprimer les deux méthodes concernant les menus et ce que cela entraîne dans les autres fichiers Vérifier la bonne création de la déclaration de l'activité dans le fichier «manifeste» de l'application Vérifier le lancement de la deuxième activité après l'appui du bouton «Go!» Transmission d'une valeur de variable entre les activités On a l'obligation de transmettre la valeur prénom d'une intention à l'autre : il ne peut y avoir de saisie vide. Ceci implique : une déclaration d'une variable Java de type EditText et sa liaison avec la ressource XML le test pour savoir si le champ est vide avec affichage d'un message dans ce cas On se base à nouveau maintenant dans la classe MainActivity.java. SLAM4 Conception et adaptation de Solutions applicatives 4

5 Effectuer le travail de déclaration (vous pouvez prendre prenom comme nom de variable) et la liaison pour l'edittext suivant le même principe que le bouton. Le passage d'un ou plusieurs paramètres se réalise grâce à la méthode putextra() d'une intention avec dans ce cas deux paramètres (clé, valeur). La méthode putextra() s'utilise avec l'objet Bundle pour le passage d'une série de paramètres. Ajouter ensuite dans la méthode onclick() le code suivant qui est assez simple à comprendre : String leprenom = prenom.gettext().tostring(); intentjeu.putextra("joueur",leprenom); Un message sous Android se déclare dans le code par un objet au nom particulier de Toast, comme par exemple ceci : Toast.makeText(this,"Ceci est un message!", Toast.LENGTH_LONG).show(); La documentation officielle : A l'aide du widget Toast, faire le nécessaire dans onclick() pour qu'un contenu vide dans leprenom déclenche un message d'alerte et lance la nouvelle intention (JeuActivity) dans le cas contraire. Tester le bon comportement de votre application. Récupération et traitement de la valeur On se base cette fois dans la classe JeuActivity.java. On va placer un TextView en haut de la page qui contiendra le texte suivant : «A vous de jouer» suivi du prénom. Utiliser le code ci-dessous (à mettre après le setcontentview) afin de récupérer la valeur entrée à l'activité précédente et l'affecter au TextView (déclarer aussi les variables nécessaires induites par ce code) : String message = this.getintent().getextras().getstring("joueur"); joueur = (TextView)this.findViewById(R.id.txvTitre); joueur.settext("a vous de jouer "+message+"..."); Créer dans activity_jeu.xml le composant manquant (taille Large) 4. Construction d'un jeu de questions Utilisation d'un contrôle de type bouton radio Il faut maintenant traiter le jeu du Quiz proprement dit. Dans un vrai jeu les séries de questions sont tirées au sort et issues d'une banque de données (ou d'un flux). Ici, on va se contenter de : faire trois séries de questions et non tirées au sort mettre les questions et la réponse dans un simple tableau Par contre, la règle est de ne pas créer autant d'intentions que de série de questions, ce serait beaucoup trop long et fastidieux ; la même intention va être réutilisée avec un contrôle de type boutons radio construit dynamiquement et non statiquement dans le fichier descripteur XML. Il y a quand même des choses à faire dans le fichier activity_jeu.xml. SLAM4 Conception et adaptation de Solutions applicatives 5

6 Effectuer le travail de déclaration (vous pouvez prendre prenom comme nom de variable) et la liaison pour l'edittext suivant le même principe que le bouton. Le passage d'un ou plusieurs paramètres se réalise grâce à la méthode putextra() d'une intention avec dans ce cas deux paramètres (clé, valeur). La méthode putextra() s'utilise avec l'objet Bundle pour le passage d'une série de paramètres. Ajouter ensuite dans la méthode onclick() le code suivant qui est assez simple à comprendre : String leprenom = prenom.gettext().tostring(); intentjeu.putextra("joueur",leprenom); Un message sous Android se déclare dans le code par un objet au nom particulier de Toast, comme par exemple ceci : Toast.makeText(this,"Ceci est un message!", Toast.LENGTH_LONG).show(); La documentation officielle : A l'aide du widget Toast, faire le nécessaire dans onclick() pour qu'un contenu vide dans leprenom déclenche un message d'alerte et lance la nouvelle intention (JeuActivity) dans le cas contraire. Tester le bon comportement de votre application. Récupération et traitement de la valeur On se base cette fois dans la classe JeuActivity.java. On va placer un TextView en haut de la page qui contiendra le texte suivant : «A vous de jouer» suivi du prénom. Utiliser le code ci-dessous (à mettre après le setcontentview) afin de récupérer la valeur entrée à l'activité précédente et l'affecter au TextView (déclarer aussi les variables nécessaires induites par ce code) : String message = this.getintent().getextras().getstring("joueur"); joueur = (TextView)this.findViewById(R.id.txvTitre); joueur.settext("a vous de jouer "+message+"..."); Créer dans activity_jeu.xml le composant manquant (taille Large) 4. Construction d'un jeu de questions Utilisation d'un contrôle de type bouton radio Il faut maintenant traiter le jeu du Quiz proprement dit. Dans un vrai jeu les séries de questions sont tirées au sort et issues d'une banque de données (ou d'un flux). Ici, on va se contenter de : faire trois séries de questions et non tirées au sort mettre les questions et la réponse dans un simple tableau Par contre, la règle est de ne pas créer autant d'intentions que de série de questions, ce serait beaucoup trop long et fastidieux ; la même intention va être réutilisée avec un contrôle de type boutons radio construit dynamiquement et non statiquement dans le fichier descripteur XML. Il y a quand même des choses à faire dans le fichier activity_jeu.xml. SLAM4 Conception et adaptation de Solutions applicatives 6

7 Intégrer un TextView représentant la question en le nommant txvquestion et en laissant la valeur du texte par défaut. Intégrer en dessous un RadioGroup en le nommant rdgquestion et en supprimant les trois RadioButton intégrés par défaut. Intégrer en bas de la page un bouton (même technique et style que vu plus haut) en le nommant BtnReponse. On se base à nouveau dans la classe JeuActivity.java. La mise en place des contrôles dans le jeu est assez complexe parce qu'elle se doit d'être dynamique, c'est à dire construite à la création de la page et modifiée en fonction de la question. Intégrer le code ci-dessous à la suite dans la méthode oncreate() : // Initialisation des contrôles laquestion = (TextView)findViewById(R.id.txvQuestion); laquestion.setminimumwidth(400); groupquestions = (RadioGroup)findViewById(R.id.rdgQuestion); reponses = new RadioButton[3]; // Création des boutons radio reponses[0] = new RadioButton(this); reponses[0].settextcolor(color.parsecolor("#1111ff")); reponses[0].setminimumwidth(400); reponses[1] = new RadioButton(this); reponses[1].settextcolor(color.parsecolor("#1111ff")); reponses[1].setminimumwidth(400); reponses[2] = new RadioButton(this); reponses[2].settextcolor(color.parsecolor("#1111ff")); reponses[2].setminimumwidth(400); // Affectation d'un ID aux boutons radio afin de savoir lequel est sélectionné reponses[0].setid(0); reponses[1].setid(1); reponses[2].setid(2); // Gestion du bouton resultat = (Button)findViewById(R.id.btnReponse); resultat.setonclicklistener(this); // Démarrage du jeu initquestions(numero); Intégrer évidemment les éléments dépendants nécessaires : variables globales, librairies, etc... et le code de la fonction ci-dessous : private void initquestions(int numero) { Log.i("numero",""+numero); laquestion.settext("dans quel film le personnage de "+questions[numero][0]+ " joue?"); reponses[0].settext(questions[numero][1]); groupquestions.addview(reponses[0]); reponses[1].settext(questions[numero][2]); groupquestions.addview(reponses[1]); reponses[2].settext(questions[numero][3]); groupquestions.addview(reponses[2]); Il manque encore le tableau contenant les valeurs, ici ce sera limité à trois questions. SLAM4 Conception et adaptation de Solutions applicatives 7

8 Intégrer le code de la variable tableau et essayer d'en comprendre la structure : String questions[][] = { { "John McLane", "Piège en eaux troubles", "Pulp Fiction", "Piège de Cristal", "3", { "Martin McFly", "Mars Attacks!", "Spin City", "Retour vers le futur", "3", { "Alan Parrish", "Jumanji", "Good Morning, Vietnam", "Popeye", "1" ; Passage d'une question à une autre Selon notre scénario, l'écouteur d événements placé sur le bouton (ce qui doit y avoir dans la méthode onclick() ) doit : déterminer quel bouton radio a été sélectionné afficher un message indiquant une bonne ou une mauvaise réponse afficher la question suivante Les réponses à ce scénario sont les suivantes : utilisation de la méthode getcheckedradiobuttonid() (d où le fait que l'on devait mettre un id) l'utilisation de Toast le retour à l'activité précédente en indiquant un code de retour qui est en fait le numéro de la question suivante Remplacer le code de la méthode onclick() par celui-ci public void onclick(view arg0) { int retour = groupquestions.getcheckedradiobuttonid(); int repok = Integer.parseInt(questions[numero][4]); if (retour+1 == repok ) { Toast.makeText(this,"Bonne réponse!", Toast.LENGTH_LONG).show(); else { Toast.makeText(this,"Mauvaise réponse, c'était : "+questions[numero][repok], Toast.LENGTH_LONG).show(); // Jeu suivant Intent returnintent = new Intent(); returnintent.putextra("numero",numero); setresult(result_ok,returnintent); finish(); Remarquer l'instruction finish() qui comme son nom l'indique, permet de mettre fin à une activité. Comme nous retournons un code à la classe MainActivity.java et que celle-ci doit à nouveau relancer JeuActivity.java, il faut en modifier le code. On se base cette fois dans la classe MainActivity.java. Remplacer le code par celui-ci, à partir de la méthode onclick() : public void onclick(view arg0) { intentjeu = new Intent(this,JeuActivity.class); leprenom = prenom.gettext().tostring(); if (leprenom.equals("")) { Toast.makeText(this,"Vous n'avez pas mis de prénom!", Toast.LENGTH_LONG).show(); else { lancementjeu(0); SLAM4 Conception et adaptation de Solutions applicatives 8

9 @Override protected void onactivityresult(int requestcode, int resultcode, Intent data) { if (requestcode > 1) { // Si l'on veut que l'application s'arrête... // finish(); else { lancementjeu(requestcode+1); public void lancementjeu(int num) { intentjeu.putextra("joueur",leprenom); intentjeu.putextra("numero",num); this.startactivityforresult(intentjeu,??? ); à trouver!!! Il y a volontairement un élément à trouver De plus, des variables sont à déclarer et pour finir l'ajout de la récupération du numéro est à faire dans JeuActivity.java. Attention : c'est un entier et non une chaîne Effectuer les derniers réglages et tester votre application... Exemple de visuel, question n 3 : SLAM4 Conception et adaptation de Solutions applicatives 9

10 5. Bilan et amélioration du Quizz Rapport à faire Rédiger un rapport comportant obligatoirement les points suivants : a) Rappel de la fonctionnalité de l'application b) Difficultés techniques rencontrées c) Solutions apportées (copies écran / code source) d) Avis motivé sur une évolution possible de l'application, critique constructive... Améliorations Intégrer dans le code la totalisation d'un score avec son affichage à la fin. Ajouter d'autres questions au quizz. SLAM4 Conception et adaptation de Solutions applicatives 10