Réaliser un mini navigateur Web

Axon de Tuto Mobile

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ésentes 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. Commentez ♪

- Titre : Réaliser un mini navigateur Web

- Auteur : Axon de Tuto Mobile

- Parution : 17 novembre 2010

- Licence : 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.

Sommaire

- I. Navigateur Web

- I-A. Le fichier AndroidManifest.xml

- I-B. Le fichier main.xml

- I-C. Le code JAVA

- I-D. Résultat

- II. Remerciement

- III. Lien

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 saisie.

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 :

<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 :

<?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.

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ée 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);

//Exécution 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.

II - Remerciement

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

III - Lien

Tutoriel original sur Tuto Mobile