Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Travaux Pratiques 3 : Systèmes embarqués : Outils Portables intégrés à un SIG E

Travaux Pratiques 3 : Systèmes embarqués : Outils Portables intégrés à un SIG Enseignants : Dr. Mvogo Ngono Joseph Dr. Bondé Lossan Université de Douala Objectif : A la fin de ce TP, les étudiants seront capables de développer une application simple qui sera déployer sur un PDA ou un Smartphone doté du système d'exploitation linux embarqué « Android 1», plus spécifiquement ce TP permettra à l'étudiant de découvrir certains concepts inhérents au développement sous Android. Il s'agit de développer un service qui consiste à présenter à l'utilisateur un écran comportant trois boutons, chacun correspondant à un rayon (en km) de recherche. Lorsque l'utilisateur clique sur un de ces boutons, l'application géolocalise l'appareil et affiche une google Map comportant les emplacements des (hôtels, restaurants, ou autres cibles) dans le rayon souhaité. La description du développement de l'application est divisée en deux parties: Dans la première partie l'étudiant mettra en place son environnement de développement, par la suite il réalisera l'interface Homme/Machine (IHM) de l'application telle que présentée à la figure 1. Ce premier volet permettra d'introduire les concepts de layout, d'activité et d'intent et aussi le passage d'un écran à l'autre au sein de l'application. La seconde partie du TP portera sur l'interrogation d'un service web à l'aide de la méthode SAX et sur le positionnement des objets recherchés sur une carte Google Map. PARTIE I I.1) Mise en place de l'environnement de développement La mise en place de l'environnement nécessite l'installation des outils suivants:  L'environnement de développement intégré Eclipse 3.5 (Galileo), téléchargeable2 gratuitement sur Internet  Le Kit de Développement d'applications Android (SDK) téléchargeable 3 gratuitement sur Internet  Le plugin Eclipse Android Developement Tools (ADT) version 0.9.3 Les étapes de mise en place de l'environnement de développement sous Windows XP. 1) Allez sur le site http://developer.android.com/sdk/installing.html pour des explications sur l’installation de l’environnement de développement Android. De façon détaillée : 2) Télécharger l’IDE Eclipse 3.5 (Galileo) sur le site : http://www.eclipse.org/downloads/ notamment la version Eclipse classic version 3.5.2. (eclipse-SDK-3.5.2-win32) 3) Assurez-vous le JDK 5 ou JDK 6 est installé, sinon l'installer . 4) Télécharger le SDK Android à l’URL http://developer.android.com/sdk/index.html (android-sdk_r10-windows.zip ) 5) Décompactez le fichier (android-sdk_r10-windows.zip ) et lancer le SDK Manager pour finaliser l’installation de la plateforme Android. 6) Ajoutez le répertoire du SDK dans la variable PATH du système 7) Installation dans eclipse de l’environnement de développement Android 1 Android est système d'exploitation libre pour mobile dont la part du marché croît aujourd'hui très vite. 2 Http://www.siteeclipse.org 3 Http://developer.android.com/sdk/1.6_r1/installing.html a) Démarrez eclipse, sélectionnez le menu Help>>Install New Software b) Dans la boîte de Dialogue Available Software, cliquez sur Add, on renseigne le champ Name par exemple par « Android plugin » et le champ Location par : https://dl-ssl.google.com/android/eclipse/ On clique sur OK. c) Cochez la case à cocher Developer Tools, qui comporte deux packages : Android DDMS et Android Development Tools, cliquez ensuite sur Next. d) Cliquez une seconde fois sur Next, acceptez les termes de la licence et cliquez sur Finish e) Redémarrez eclipse 8) Configuration du Plugin Android : a) Sélectionnez Windows >> Preferences, b) Sélectionnez Android dans le panneau gauche, c)Pour sélectionner l’emplacement du SDK, cliquez sur Browse et sélectionnez le répertoire du SDK d) Cliquez sur Apply et ensuite OK Après la configuration on va ajouter les composants dans notre environnement de développement. 9) Sélectionner Windows >>Android SDK and AVD Manager pour tester l'application avant son déploiement plutard dans un PDA ou un smartphone l'environnement de développement intègre un émulateur qu'il est nécessaire de créer en suivants les instructions suivantes. 1) Sélectionnez Windows>>Android SDK and AVD Manager 2) Sélectionnez Virtual Devices dans le panneau gauche de la boîte de Dialogue 3) Cliquez sur New, renseignez le champ Name: par exemple My_AVD et sélectionnez pour le champ Target : Google APIs(Google Inc.)-API Level 4 4) Cliquez enfin sur le bouton Create AVD Maintenant l'environnement est installé et nous allons aborder la première partie du TP qui consiste à réaliser l'IHM de l'application. I.2) Initialisation du projet Nous allons d'abord créer un projet, pour ce faire nous exécutons l'environnement eclipse et on clique sur File>>New>>Project...>>Android>>Android Project. Cliquez sur Next. On appelle le projet « MonApp » (champ project name). Dans Build Target on sélectionne « Google API » dans sa version 1.6. On remplit le champ Application name avec « Mon Application » et Min SDK version avec la valeur « 4 » qui indique le niveau minimum d'API requis pour notre application et le champ Package name avec « com.android.monapp ». On laisse cochée l'option Create activity et on remplit le champ adjacent avec « MyFirstActivity » et on clique sur Finish. Le projet est créé. Dans le Package Explorer, on peut voir que ce projet comporte- outre les fichiers .jar de l'API Google, trois dossiers.  Le dossier src/ contient les sources java notamment la première classe MyFirstActivity.java de l'application.  Le dossier res/ contient les ressources (icônes, layout,..) liées au projet.  Le répertoire gen/ contient des fichiers sources Java mis à jour automatiquement par l'environnement de développement Android. I.3)Réalisation de l'IHM Dans un projet Android, un écran d'action correspond à une activité. Notre application comprend deux écrans (l'affichage du Menu et l'affichage de la carte) et donc deux activités. Une activité est une classe héritant de la classe Activity. La classe MyFirstActivity est la première activité de notre programme. La classe MyFirstActivity comporte une méthode publique onCreate() qui est appelée implicitement lors de la création de l'activité, elle s'exécute automatiquement lorsque l'écran correspondant à l'activité apparaît à l'utilisateur. La méthode onCreate() appelle d'abord la méthode onCreate() de la classe mère Activity pour initialiser certains attributs internes de la classe fille MyFirstActivity (super.onCreate(savedInstanceState)). On remarque par ailleurs que cette méthode comporte un argument de type Bundle qui correspond à un tableau associatif évolué permettant de transmettre des paramètres entre activités. La méthode suivante setContentView(R.layout.main) indique au système qu'il doit utiliser le « layout » main pour cette activité. Le layout d'une activité est un fichier XML permettant de spécifier l'organisation des composants graphiques de l'écran correspondant. Pour savoir quel layout utiliser dans une activité on passe un identifiant (int) à setContentView. La valeur de cet entier se trouve dans une classe R (voir fichier gen/R.java) générée automatiquement. L'ajout de cet identifiant à la classe R a été réalisé lorsque le layout main a été créé à l'initialisation du projet. Il est décrit sous la forme d'un fichier XML à l'emplacement res/layout/main.xml. Le fichier main.xml décrit au stade actuel l'interface par défaut ci-après : Cette interface doit être modifiée en vue d'obtenir l'interface ci-dessous: Figure 1 Pour ce faire nous allons modifier le fichier res/layout/main.xml. On dispose d'une interface qui permet d'une part de concevoir graphiquement le layout, d'autre part d'avoir l'équivalent en XML de celui-ci. Dans ce TP on s'interessera au fichier XML. On clique sur main.xml pour voir le code XML correspondant au layout actuel. On doit pouvoir obtenir le code suivant: <?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" /> </LinearLayout> On trouve dans ce code un layout de type LinearLayout 4 à orientation verticale (android:orientation="vertical"). Question 1: Trouvez les autres types de layout disponibles dans l'environnement Android et donnez leurs caractéristiques principales. Ce code contient un objet TextView: <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> Le TextView affiche le texte contenu dans sa propriété android:text, ce contenu correspond à une chaine constante représentée par @string/hello. Chaque application Android possède des chaînes de caractères constantes qui sont listées dans le fichier res/values/strings.xml. En ouvrant ce fichier on découvre le contenu ci-après: <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, MyFirstActivity!</string> <string name="app_name">Mon Application</string> </resources> Deux constantes sont définies, la première hello et la seconde app_name. Pour supprimer une constante on peut revenir à l'onglet « resources » et selectionner la constante à supprimer, puis on clique sur le bouton « remove ». En utilisant cette méthode supprimer la constante hello. Enregistrez le fichier res/values/strings.xml. On remarque qu'Eclipse y trouve une erreur, c'est normal, la constante qu'il utilisait vient d'être supprimée. 4 Comme en CSS, les objets sont placés en position absolute ou relative , on trouve un AbsoluteLayout, un RelativeLayout ,Etc .., Le LinearLayout à orientation verticale indique que tous les objets qu'il contient sont placés à la suite les uns en dessous des autres. Pour simplifier, on commence par vider main.xml de tout son contenu et on le remplace par le code ci-après: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:id="@+id/titre" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="10sp" android:text="@string/app_name" android:textColor="#0f0" android:textSize="28sp"> </TextView> </RelativeLayout> Les attributs : android:layout_width="fill_parent" android:layout_height="fill_parent" Notamment fill_parent indique que le layout doit remplir le composant parent en l'occurence, il s'agit du layout Android de base. Dans le RelativeLayout, on commence par afficher le titre. Pour cela on utilise un composant TextView, on lui donne un id titre (android:id="@+id/titre"). On précise que la largeur et la hauteur du TextView doivent s'adapter à son contenu. android:layout_width="wrap_content" android:layout_height="wrap_content" Question 2: Expliquez les autres attributs ci-après du TextView: android:layout_centerHorizontal="true" android:layout_marginTop="10sp" android:text="@string/app_name" android:textColor="#0f0" android:textSize="28sp"> On obtient l'écran uploads/Litterature/ tp3-systemeembarques.pdf