Réaliser un mini navigateur Web

Grâce à ce tutoriel Android, nous allons voir comment utiliser les requêtes HTTP (GET) et les WebView. Les requêtes HTTP de type GET sont intéressantes pour récupérer des informations présentent sur un serveur à partir d'une URL donnée. Les WebViews quant à eux, peuvent faciliter la mise en page de vos applications grâce à des fichiers HTML. 8 commentaires Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Navigateur Web

Nous allons donc réaliser un petit navigateur Web. Grâce à une requête HTTP de type GET, nous allons récupérer le code HTML d'une page et grâce au WebView, nous allons afficher la page correspondante à l'URL que l'on aura saisi.

Créez un projet, nommez-le comme vous le souhaitez, personnellement j'ai utilisé la version 1.6 d'Android.

I-A. Le fichier AndroidManifest.xml

Pour que l'application puisse fonctionner correctement, elle devra avoir accès à Internet. Il faut donc donner l'autorisation d'accès à Internet à l'application. Pour cela, ouvrez le fichier AndroidManifest.xml et rajoutez la ligne suivante :

 
Sélectionnez

<uses-permission android:name="android.permission.INTERNET" />

I-B. Le fichier main.xml

Notre interface sera composée d'un EditText qui jouera le rôle de la barre d'adresse, d'un Button permettant de lancer la requête HTTP en utilisant l'URL que l'on aura indiquée dans l'EditText et un WebView qui se chargera d'afficher la page Web. Voici donc le fichier main.xml :

 
Sélectionnez

<?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"
    >
 
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
	    <EditText android:id="@+id/EditText"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="bottom"
                android:text="http://"
	    	/>
 
	    <Button android:id="@+id/Button"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:text="Go"
	    	/>
    </LinearLayout>
 
    <WebView android:id="@+id/WebView"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
    	/>
 
</LinearLayout>

I-C. Le code JAVA

Comme à mon habitude, j'ai commenté mon code je pense que cela suffira pour comprendre, mais toutes les questions, remarques ou suggestions sont les bienvenues, alors n'hésitez pas à laisser un petit commentaire.

 
Sélectionnez

package com.tutomobile.android.requetehttp;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.URI;

import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class Tutoriel7_Android extends Activity {
	
    private static final String LOG_TAG = "Log : ";
    private final String mimeType = "text/html";
    private final String encoding = "utf-8";
    private String url;
    private String pageWeb;
    private WebView webView;
    private EditText editText;
    private  Button button;

	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        //On récupère l'EditText, le WebView, et le Button grâce au ID
        editText = (EditText) findViewById(R.id.EditText);
        webView = (WebView) findViewById(R.id.WebView);
        button = (Button) findViewById(R.id.Button);
        
        //On affecte un évènement au bouton
        button.setOnClickListener(
			new OnClickListener() {
				@Override
				public void onClick(View v) {
					//création d'un nouveau Thread pour libérer l'UI Thread le plus tôt possible (merci tails)
					new Thread(){
						public void run(){
						
							//on récupère l'url présente dans l'EditText
							url = editText.getText().toString();	
							
							try {
								//on récupère le code HTML associé à l'URL que l'on a indiqué dans l'EditText
								pageWeb = Tutoriel7_Android.getPage(url);
								
								//on autorise le JavaScript dans la WebView
								webView.getSettings().setJavaScriptEnabled(true);
								//on charge les données récupérées dans la WebView
								webView.loadDataWithBaseURL("fake://not/needed", pageWeb, mimeType, encoding, "");
							} catch (ClientProtocolException e) {
								e.printStackTrace();
							} catch (IOException e) {
								e.printStackTrace();
							}
						}
					}.start();
				}
			}
		);
        
        
    }
    
    public static String getPage(String url) throws ClientProtocolException, IOException{
    	StringBuffer stringBuffer = new StringBuffer("");
    	BufferedReader bufferedReader = null;
    	
    	try{
    		//Création d'un DefaultHttpClient et un HttpGet permettant d'effectuer une requête HTTP de type GET
    		HttpClient httpClient = new DefaultHttpClient();
    		HttpGet httpGet = new HttpGet();
    		
    		//Création de l'URI et on l'affecte au HttpGet
    		URI uri = new URI(url);
    		httpGet.setURI(uri);
    		
    		//Execution du client HTTP avec le HttpGet
    		HttpResponse httpResponse = httpClient.execute(httpGet);
    		
    		//On récupère la réponse dans un InputStream
    		InputStream inputStream = httpResponse.getEntity().getContent();
    		
    		//On crée un bufferedReader pour pouvoir stocker le résultat dans un string
    		bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
    		
    		//On lit ligne à ligne le bufferedReader pour le stocker dans le stringBuffer
    		String ligneCodeHTML = bufferedReader.readLine();
    		while (ligneCodeHTML != null){
    			stringBuffer.append(ligneCodeHTML);
    			stringBuffer.append("\n");
    			ligneCodeHTML = bufferedReader.readLine();
    		}    		
    		
    	}catch (Exception e){
    		Log.e(LOG_TAG, e.getMessage());
    	}finally{
    		//Dans tous les cas on ferme le bufferedReader s'il n'est pas null
    		if (bufferedReader != null){
    			try{
    				bufferedReader.close();
    			}catch(IOException e){
    	    		Log.e(LOG_TAG, e.getMessage());    				
    			}
    		}
    	}
    	
    	//On retourne le stringBuffer
    	return stringBuffer.toString();
    }
}

I-D. Résultat

Vous pouvez désormais lancer votre application. Entrez une adresse dans la barre d'adresse et cliquez sur "GO". La page Web devrait s'afficher dans le WebView comme sur la capture d'écran ci-dessous.

Navigateur Web Android

II. Remerciement

Merci à Karzoff et jacques_jean d'avoir pris le temps de relire et de corriger mon tutoriel.

III. Lien

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 RENOUARD. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.