Los desarrolladores de aplicaciones hardcore suelen preferir mantenerse alejados de las vistas web. Sin embargo, cuando el cliente lo requiere, la inyección de JavaScript en tiempo de ejecución proporciona una forma de hacer que la experiencia del usuario sea más dinámica.
Como alguien que desarrolla aplicaciones nativas para vivir, no soy un gran fan de las vistas web. Si no está familiarizado con el concepto, una vista web es esencialmente un navegador integrado que muestra HTML dentro de una aplicación. No es que no me guste el HTML per se – HTML 5 puede ser bastante impresionante – pero en mi experiencia, las páginas web incrustadas dentro de una aplicación nativa usualmente se ven como….bueno, páginas web incrustadas dentro de una aplicación.
En particular, si está trabajando en una aplicación en la que no tiene control sobre el HTML que se muestra en la vista web, a menudo se encuentra con un problema en el que el HTML que se sirve desde la URL externa sobresale como un pulgar dolorido. Después de todo, lo más probable es que no haya sido diseñado específicamente para tu aplicación. No hay nada más frustrante para un desarrollador móvil que pasar meses creando una experiencia de usuario brillante para tener que lanzar una vista web en medio de ella.
Creo que inyectando JavaScript en la vista web en tiempo de ejecución puedo hacer que estas vistas web bastante estáticas sean más dinámicas. Este tutorial demuestra cómo buscar un elemento mediante un identificador dentro de una vista web y reemplazar su contenido después de que la página se cargue correctamente. Siga el recorrido paso a paso o descargue e importe todo el proyecto directamente en Eclipse.
1. Cree un nuevo proyecto Android en Eclipse dirigido a Android 2.3 (Gingerbread) o superior.
2. En la carpeta /assets, cree un archivo estático llamado index.html para simular el contenido remoto servido desde un servidor web.
index.html <!doctype html> <center> <div id="msg">Hello World!</div> </center>
3. En la carpeta /res/layout, cree nuestro diseño. Queremos un diseño lineal simple con un campo de texto de edición, un botón y una vista web. He utilizado un peso de diseño para hacer fluir la vista web sobre la mayor parte de la pantalla del dispositivo.
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:layout_gravity="center" android:orientation="vertical"> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="id="@+id/edit_text" android:hint="What"Texto> </EditarTexto> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button" android:text="Update Web View"></Button> <WebView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight=".5" android:id="@+id/webview" ></WebView> </LinearLayout>
4. Rellene nuestro archivo ActivityMain.java en la carpeta /src. El on create override hace la mayor parte del trabajo y, en particular, la clase interna anónima que anula la página terminada en el cliente de la vista web. Siempre que recuerde habilitar JavaScript en su cliente de visualización web y configurar el cliente web Chrome, su cliente de visualización web personalizado puede insertar y ejecutar casi cualquier JavaScript que pueda imaginar.
MainAcitivity.java paquete com.authorwjf.javascriptinjection; import android.os.Bundle; import android.view.View.View.OnClickListener; import android.webkit.WebChromeClient; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.EditText; import android.annotation.SuppressLint; import android.app.Actividad; la clase pública MainActivity amplía la actividad implementa OnClickListener { cadena privada estática final URL = "file:////android_asset/index.html"; private WebView mWebView; @SuppressLint("SetJavaScriptEnabled") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webview); mWebView.getSettings(.setJavaScriptEnabled(true); mWebView.setWebChromeClient(new WebChromeClient()); mWebView.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { String user = ((EditText) findViewById(R.id.edit_text).getText(.toString(); if (user.isEmpty()) { user = "World"; } Cadena javascript="javascript: document.getElementById('msg'.innerHTML='Hello "+user+"!';";"; view.loadUrl(javascript); } refreshWebView(); findViewById(R.id.button.setOnClickListener(this); } private void refreshWebView() { mWebView.loadUrl(URL); } @Override public void onClick(View v) { refreshWebView(); } }En este ejemplo, el JavaScript personalizará el mensaje «hola» basándose en el contenido del texto editado. Inténtalo!