Objetivo:
Vamos a aprender a crear nuestro primer Webview.
Hay varias formas de hacerlo, pero nos centraremos en la más simple, dando una pautas al final con configuraciones mas avanzadas.
Vemos un resultado final antes.
Código fuente java (/src/com.webview/Principal.java):
[sourcecode language=”java”]
package com.webview;
//importaciones necesarias
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class Principal extends Activity {
//Nuestra vista necesaria para la web
private WebView mWebView;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
//asociamos
mWebView = (WebView) findViewById(R.id.webview);
//cargo un .html que he situado en la carpeta asset/ del proyecto
mWebView.loadUrl("file:///android_asset/ejemploWebview.html");
}
}
[/sourcecode]
Código fuente XML (/res/layout/main.xml):
[sourcecode language=”xml”]
<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="Aplicacion ejemplo de un Webview"
android:padding="4dip"
android:textSize="16sp"
/>
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
/>
</LinearLayout>
[/sourcecode]
Código fuente HTML (/asset/ejemploWebview.html):
[sourcecode language=”html”]
<html>
<!– Los estilos se proyectarán a nuestra aplicacion –>
<body style="text-align:center">
<strong> Ejemplo Webview, Por TutorialAndroid.com </strong> <br>
<p>Este es un ejemplo de página web
con texto e imágenes y links.</p>
<!– Enlace con una imagen de Androide-Feeds –>
<a href="http://www.tutorialandroid.com/feed/">
<img src="http://www.tutorialandroid.com/androidFeed_.png"
height="128" width="128" border="0" alt="RSS"
title="http://www.tutorialandroid.com/feed/"></a>
<p>Link a la web
<a href="http://www.tutorialandroid.com">tutorialandroid.com</a></p>
</body>
</html>
[/sourcecode]
Descárgate el código aquí
Opciones más avanzadas:
- Visionar una web situada en internet (y no en nuestro proyecto).
Para ello debemos sustituir la ruta de carga de la Url por la deseada en el código Java:
[sourcecode language=”java”]
mWebView.loadUrl("http://www.tutorialandroid.com");
[/sourcecode]Y no se puede olvidar proporcionar de conexión a internet a la aplicacion en el Manifest.xml (como hijo del tag <manifest>):
[sourcecode language=”java”]
<uses-permission android:name="android.permission.INTERNET" />
[/sourcecode] - Permitir más compatibilidad con componentes, tal y como Javascript, simulación de cliente Chrome, o aparición de un zoom en caso de ser necesario.
En este caso debemos añadir el siguiente código al método onCreate:
[sourcecode language=”java”]
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);
mWebView.setWebChromeClient(new MyWebChromeClient());
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
[/sourcecode]
Y definimos una clase, dentro de la nuestra (Principal.java):
final class DemoJavaScriptInterface {[sourcecode language=”java”]
final class DemoJavaScriptInterface {DemoJavaScriptInterface() {
}/**
* No es llamada en la interfaz. Crea un runnable para invocar
* loadUrl en la hebra de la interfaz.
*/
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
mWebView.loadUrl("javascript:wave()");
}
});}
}/**
* "alerta" para javascript. Util para depurar javascript.
*/
final class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
result.confirm();
return true;
}
}
[/sourcecode]
