{"id":323,"date":"2013-06-23T15:04:40","date_gmt":"2013-06-23T14:04:40","guid":{"rendered":"http:\/\/chezdom.net\/etu\/?p=323"},"modified":"2013-06-23T17:39:50","modified_gmt":"2013-06-23T16:39:50","slug":"tp-android-prise-en-main","status":"publish","type":"post","link":"https:\/\/chezdom.net\/etu\/2013\/06\/23\/tp-android-prise-en-main\/","title":{"rendered":"TP 3 &#8211; Prise en main d&rsquo;Android (Convertisseur d\u00e9cimal\/binaire)"},"content":{"rendered":"<h2>Partie 1 &#8211; Interface graphique<\/h2>\n<p><a href=\"http:\/\/chezdom.net\/etu\/wp-content\/uploads\/sites\/3\/2013\/06\/layout-cours2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-324\" alt=\"layout-cours2\" src=\"http:\/\/chezdom.net\/etu\/wp-content\/uploads\/sites\/3\/2013\/06\/layout-cours2-300x208.png\" width=\"300\" height=\"208\" srcset=\"https:\/\/chezdom.net\/etu\/wp-content\/uploads\/sites\/3\/2013\/06\/layout-cours2-300x208.png 300w, https:\/\/chezdom.net\/etu\/wp-content\/uploads\/sites\/3\/2013\/06\/layout-cours2-220x152.png 220w, https:\/\/chezdom.net\/etu\/wp-content\/uploads\/sites\/3\/2013\/06\/layout-cours2.png 482w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>1. Cr\u00e9ez un projet Android dans eclipse (avec une activit\u00e9 de type BlankActivity). N&rsquo;oubliez pas d&rsquo;indiquez un nom de package (par exemple : <em>mr.univ-nkc.master.convdecbin<\/em>)<\/p>\n<p>2. Ouvrez l&rsquo;\u00e9diteur graphique de <em>layout<\/em>. Supprimez le \u00ab\u00a0Hello World!\u00a0\u00bb puis changez le container principal (RelativeLayout) en LinearLayout vertical (dans la fen\u00eatre \u00ab\u00a0structure\u00a0\u00bb, click droit sur \u00ab\u00a0RelativeLayout\u00a0\u00bb, puis \u00ab\u00a0Change layout&#8230;\u00a0\u00bb.<\/p>\n<p>3. Ins\u00e9rer les widgets n\u00e9cessaires pour notre convertisseur (voir copie d&rsquo;\u00e9cran ci-contre). Pour la premi\u00e8re et la troisi\u00e8me ligne il faut ins\u00e9rer des LinearLayout horizontaux avant de placer un TextView (pour la l\u00e9gende) et un EditText. Le TextView se trouve dans la palette <em>Form Widgets<\/em> (vous pouvez prendre un \u00ab\u00a0Large\u00a0\u00bb), et l&rsquo;EditText dans la palette <em>Text Fields<\/em>.<\/p>\n<p>\u00c9largissez le bouton pour qu&rsquo;il occupe tout l&rsquo;espace de la ligne : click droit sur le bouton, <em>layout width<\/em>, puis choisir <em>match parent<\/em>.<\/p>\n<p>4. Changez les \u00e9tiquettes des 2 TextView et du bouton : click droit, menu \u00ab\u00a0Edit Text&#8230;\u00a0\u00bb en utilisant plut\u00f4t des \u00ab\u00a0Strings\u00a0\u00bb que du directement du texte (cliquez sur le bouton \u00ab\u00a0New string\u00a0\u00bb, dans les 2 champs du haut de la boite de dialogue, ins\u00e9rez le texte et un ID.<\/p>\n<h2>Partie 2 &#8211; Impl\u00e9mentation<\/h2>\n<p>1. Ouvrez le source java (dans le navigateur de projet : cherchez le dossier \u00ab\u00a0src\u00a0\u00bb, puis trouvez le code de l&rsquo;activit\u00e9 (par d\u00e9faut MainActivity.java sauf si vous l&rsquo;avez chang\u00e9 dans l&rsquo;assistant de cr\u00e9ation de projet).<\/p>\n<p>2. Cr\u00e9ez des attributs pour garder une r\u00e9f\u00e9rence sur les 2 champs de texte :<\/p>\n<pre class=\"brush: java; gutter: false\">  private EditText champTextDecimal, champTextBinaire;<\/pre>\n<p>et les associer aux \u00e9l\u00e9ments du layout gr\u00e2ce \u00e0 leurs ID (dans la m\u00e9thode <em>onCreate<\/em>) :<\/p>\n<pre class=\"brush: java; gutter: false\">  champTextDecimal=(EditText) findViewById(R.id.editTextDec);<\/pre>\n<p>On trouve les ID par un click droit sur l&rsquo;objet correspondant dans l&rsquo;\u00e9diteur graphique d&rsquo;\u00e9crans (menu \u00ab\u00a0EditId\u00a0\u00bb).<\/p>\n<p>3. Toujours dans la m\u00e9thode <em>onCreate<\/em>, d\u00e9clarer la classe courante comme <em>listener<\/em> du bouton.<\/p>\n<pre class=\"brush: java; gutter: false; first-line: 1; highlight: []; html-script: false\">  Button b=(Button) this.findViewById(R.id.buttonConv);\r\n  b.setOnClickListener(this);<\/pre>\n<p>Il n&rsquo;est pas n\u00e9cessaire de garder la r\u00e9f\u00e9rence au bouton en attribut (sauf si on a de fr\u00e9quentes mises \u00e0 jour du bouton).<\/p>\n<p>Maintenant il faut que la classe courant (<em>MainActivity<\/em>) impl\u00e9mente l&rsquo;interface <em>OnClickListener<\/em>, et donc impl\u00e9menter la m\u00e9thode :<\/p>\n<pre class=\"brush: java; gutter: false; first-line: 1; highlight: []; html-script: false\">public void onClick(View v)<\/pre>\n<p>.<\/p>\n<p>Dans un premier temps on enverra simplement un \u00ab\u00a0<em>toast<\/em>\u00ab\u00a0, c&rsquo;est \u00e0 dire un message temporaire \u00e0 l&rsquo;utilisateur :<\/p>\n<pre class=\"brush: java; gutter: false; first-line: 1; highlight: []; html-script: false\">Toast.makeText( getApplicationContext(), \r\n                &quot;texte du message&quot;, \r\n                Toast.LENGTH_SHORT).show();<\/pre>\n<p>4. Impl\u00e9mentez la m\u00e9thode de conversion : allez chercher le texte saisi dans le champs correspondant (attention la m\u00e9thode <em>getText()<\/em> de <em>EditText<\/em> ne renvoie pas directement un String, il faut le convertir, par exemple, en utilisant \u00ab\u00a0<em>toString()<\/em>\u00ab\u00a0, puis convertir cette cha\u00eene en entier. On utilisera la m\u00e9thode \u00ab\u00a0<em>setText(&#8230;)<\/em>\u00a0\u00bb pour placer le r\u00e9sultat dans le champ de saisie correct.<\/p>\n<p>5. On remarque que cette application ne fonctionne que dans un sens. Ajoutez un second bouton pour faire la conversion inverse, et impl\u00e9mentez la. Maintenant que nous aurons 2 boutons, la m\u00e9thode de traitement des \u00e9v\u00e9nements (<em>onClick<\/em>) doit faire la diff\u00e9rence entre les 2. Pour cela on utilisera la m\u00e9thode getId() de l&rsquo;objet View pass\u00e9 en argument, et on le comparera \u00e0 l&rsquo;ID du bouton.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Partie 1 &#8211; Interface graphique 1. Cr\u00e9ez un projet Android dans eclipse (avec une activit\u00e9 de type BlankActivity). N&rsquo;oubliez pas d&rsquo;indiquez un nom de package (par exemple : mr.univ-nkc.master.convdecbin) 2. Ouvrez l&rsquo;\u00e9diteur graphique de layout. Supprimez le \u00ab\u00a0Hello World!\u00a0\u00bb puis<span class=\"ellipsis\">&hellip;<\/span> <span class=\"read-more\"><a href=\"https:\/\/chezdom.net\/etu\/2013\/06\/23\/tp-android-prise-en-main\/\">Lire la suite &#8250;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-323","post","type-post","status-publish","format-standard","hentry","category-nouakchott"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9qu1A-5d","_links":{"self":[{"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/posts\/323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/comments?post=323"}],"version-history":[{"count":9,"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/posts\/323\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/posts\/323\/revisions\/346"}],"wp:attachment":[{"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/media?parent=323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/categories?post=323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chezdom.net\/etu\/wp-json\/wp\/v2\/tags?post=323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}