Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
Este consejo rápido demostrará cómo puedes incorporar un WebView de Android en tu aplicación con el motor WebKit. Aprenderás a cargar una URL externa y a representar el marcado personalizado que proporciones en la aplicación.
Paso 1: Preparación
Comienza creando un nuevo proyecto de SDK de Android en tu IDE de elección. Puedes nombrar la actividad principal, la raíz del paquete y proyectar lo que quieras. Elige Android 1.6 como tu plataforma para mantener una amplia compatibilidad.
Paso 2: Configurar el widget WebView
El widget WebView funciona como cualquier otro widget SDK de Android: lo declaras en un archivo de diseño y luego puedes acceder a él desde una actividad y decirle qué hacer.
Abra tu archivo de diseño main.xml o créalo si tu IDE aún no lo ha hecho. Después declara el widget WebView como un elemento secundario del elemento LinearLayout, asegurándote de especificar un identificador para que puedas tener acceso al widget más adelante. Como siempre, no olvides declarar el ancho y alto o de lo contrario tu aplicación producirá una excepción. Para fines de demostración, vamos a hacer que el componente llene toda la pantalla configurando los atributos android:layout_width y android:layout_height en fill_parent.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView android:id="@+id/web_engine"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout> Paso 3: Solicitar permiso de Internet desde el manifiesto de Android
Dado que vamos a cargar una URL en el widget WebView, debemos asegurarnos de solicitar permiso para acceder a Internet en AndroidManifest.xml
Ábrelo y declara un elemento de permisos de uso donde especificas android.permission.INTERNET como el atributo android:name, así (línea 6):
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.webkitdemo">
<uses-permission android:name="android.permission.INTERNET" />
<application android:icon="@drawable/icon" android:label="WebKitDemo">
<activity android:name=".WebKitDemo">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest> Si inicias tu aplicación en el emulador de Android ahora, verás una pantalla en blanco. ¿por qué? Bueno, todavía no le hemos dicho a WebView que renderice nada; eso es lo que haremos a continuación.
Paso 4: Cargar una página web
Abre tu actividad principal (com.webkitdemo.WebKitDemo en nuestro caso) y agrega el siguiente código al método onCreate():
WebView engine = (WebView) findViewById(R.id.web_engine);
engine.loadUrl("http://mobile.tutsplus.com"); Este fragmento de código tiene acceso al widget WebView a través de su ID de recurso e invoca loadUrl(). Inicia la aplicación en el emulador y ve el resultado: ¡debería mostrar el sitio en el que se encuentra actualmente!
Paso 5: Renderizar marcado personalizado
Después reemplazaremos la llamada a loadUrl() con loadData(), la cual toma tres argumentos:
- Cadena htmlData
- Cadena mimeType
- Codificación de cadenas
Comenta la línea engine.loadUrl() e inserta el siguiente código debajo de ella:
String data = "<html>" +
"<body><h1>Yay, Mobiletuts+!</h1></body>" +
"</html>";
engine.loadData(data, "text/html", "UTF-8"); Compila y reinicia la aplicación en el emulador y deberías ver esto:
Técnicamente, puedes pasar otro tipo de datos con su respectivo tipo mime a este método, pero la mayoría de las veces usarás text/html con una codificación UTF-8. No olvides que estás utilizando WebKit, un potente motor web; cuando diseñes tus manuales o cualquier cosa que quieras mostrar puedes utilizar CSS3, JavaScript, entre otros.
NOTA: Una de las peculiaridades de WebView es el hecho de que JavaScript está deshabilitado de forma predeterminada. La razón de esto es que en la mayoría de los casos cuando se incorpora un WebView en la aplicación, se usa para un manual de ayuda o para algo que no requiere JavaScript. Sin embargo, es fácil habilitarlo si lo necesitas:
engine.getSettings().setJavaScriptEnabled(true);
Características adicionales
Es posible que hayas notado que el widget no tiene una barra de herramientas. Esto está previsto, ya que normalmente lanzarías la aplicación de navegador web nativa si quieres capacidades de navegación. Sin embargo, hay una manera de controlarlo mediante programación. Intenta invocar uno de los siguientes métodos en la instancia de tu widget:
- reload(): Actualiza y vuelve a renderizar la página.
- goForward(): Avanza un paso en el historial del navegador.
- goBack(): Retrocede un paso en el historial del navegador.
La API tiene mucho más que ofrecer, pero eso excede los límites de este consejo rápido.
Conclusión
Ahora deberías estar familiarizado con el uso básico del muy útil widget WebView de Android. Puedes usarlo para mostrar una página web "acerca de" para tu aplicación o un manual de usuario, todo tipo de cosas. Técnicamente, incluso puedes escribir tu aplicación usando JavaScript, CSS y HTML y mostrarla usando el widget, aunque eso no sería demasiado práctico... ¿O no?
