Tu aplicación híbrida en Android con LungoJS

Vamos a suponer que quieres usar este fantástico framework llamado LungoJS en tu aplicación Android y que además quieres acceder a cualquier característica de la que disponga tu dispositivo móvil. La respuesta fácil la conocemos todos: phonegap. Casi todo el mundo en esta situación habla de integrar mediante phonegap  una cantidad considerable de plataformas y sistemas operativos nada despreciable. De hecho en su web hacen alarde de que son el único framework móvil de código abierto que soporta siete plataformas. Y es cierto, es una opción más, pero personalmente no me gusta añadir capas y capas que me encaminan a un desarrollo que en el futuro puede quedar «sin salida». Por ejemplo, mi móvil tiene capacidad NFC y phonegap, a no ser a través de una libreria .jar que se ha trabajado un tercero, no dispone en su api de acceso a NFC (Sí, es un caso muy concreto, pero a esto me refiero).

Por eso hoy quiero usar Android SDK únicamente junto a LungoJS para probar nuestra webapp híbrida con el mismo ejemplo que venimos viendo, BuscaTuits, ya compilado como paquete apk en Android 2.2 o superior.

Assets: Directorio para añadir los ficheros de tu webapp (html,js,css …)

Éste es el directorio donde vamos a poner nuestra aplicación LungoJS dentro de nuestro proyecto en eclipse. Voy a saltarme los pasos de cómo empezar a crear un proyecto en eclipse, pero sólo decir que debéis especificar la versión del sistema operativo para la que va destinado vuestro desarrollo.

Pondremos toda nuestra aplicación con los ficheros que formarán parte de la vista web desplegada en android (htmls,css,js,recursos gráficos…). Como veréis es muy sencillo abrir una webview en Android aunque no lo es tanto corregir cada detalle o problema que nos va a surgir en nuestra webapp, sobre todo probando en cada dispositivo móvil, pero es cuestión de pulir cada detalle poco a poco.

Características de nuestra aplicación

Si, pero os estaréis preguntando que diferencia hay entre abrir el BuscaTuits1.2 en un navegador móvil o hacerlo como aplicación híbrida desde nuestro escritorio Android. Bien, ése precisamente es el propósito de este post. Como dije antes nos interesa acceder a cada funcionalidad de nuestro dispositivo móvil y desde javascript, a no ser con el intermediario phonegap (o cordova se llama ahora), no es posible. No es posible acceder a todas las funcionalidades hardware que posee neustro dispositivo, aunque HTML5 pueda hacerlo parcialmente. Por eso, creamos una aplicación nativa en Android incorporando nuestra webView. ¿Y qué mas hacemos? Pues vamos a poner dos cosas más: Un botón de salir que se llame cuando pulsemos en el móvil el menu contextual y una forma de comprobar si tenemos conexión a Internet para abrir o no nuestro BuscaTuits, que por cierto ya vimos en alguna entrada anterior.

Empezamos con el AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tunelko.lungojs"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
        <activity
            android:name=".LungoJsActivity"
            android:label="@string/app_name"
            android:screenOrientation="nosensor" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Importante decir que he bloqueado el cambio de orientación del dispositivo porque sólo quiero un modo portrait para mi webapp. Esto se hace añadiendo en el activity lo siguiente:

 android:screenOrientation="nosensor"

Poco más que comentar. Bueno sí, permisos para Internet, que lo vamos a necesitar, minSdkVersion y targetSdkVersion recomendado incorporarlo, es una buena práctica.

WebView en Android: Dándo soporte a Javascript

Una propiedad principal que debemos tener en cuenta a la hora de incorporar LungoJS a nuestra aplicación híbrida en Android es que debemos disponer de una webview compatible con javascript, añadiendo dicha propiedad (y otras que veremos) desde nuestro código.

Nuestro Layout: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.webkit.WebView
        android:id="@+id/webkit"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

Nuestro LungoJsActivity.Java, la parte del webview: 

	@Override
	public void onCreate(Bundle savedInstanceState) {

		if (!verificaConexion(this)) {
			Toast.makeText(getBaseContext(),
					"Comprueba tu conexión a Internet", Toast.LENGTH_SHORT)
					.show();
			this.finish();
		}

		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		mWebView = (WebView) findViewById(R.id.webkit);
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.getSettings().setLoadWithOverviewMode(true);
		mWebView.getSettings().setUseWideViewPort(true);

		// algunas propiedades de la vista web.
		mWebView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
		mWebView.setScrollbarFadingEnabled(false);
		mWebView.setHorizontalScrollBarEnabled(false);
		mWebView.loadUrl("file:///android_asset/index.html");
	}

Varios detalles a destacar aquí. Primero verificamos si tenemos o no conexión llamando a n método que describimos después,  verificaConexion. Después le decimos que nuestro webview es lo que le hemos dicho en el layout, android.webkit.WebView aquí:

 mWebView = (WebView) findViewById(R.id.webkit);

Y al final habilitamos una serie de propiedades de nuestro webView, la más importante, la que permite javascript y la que llama a nuestro index.html del directorio assets:

		// algunas propiedades de la vista web.
		mWebView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
		mWebView.setScrollbarFadingEnabled(false);
		mWebView.setHorizontalScrollBarEnabled(false);
		mWebView.loadUrl("file:///android_asset/index.html");

El menú para salir de la aplicación se invoca creando dos métodos en nuestor Activity:

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		MenuInflater inflater = getMenuInflater();
		inflater.inflate(R.menu.menu_principal, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.MnuOpc1:
			mWebView = null;
			this.finish();
			return true;

		default:
			return super.onOptionsItemSelected(item);
		}
	}

Un menú que se abre, muestra salir y listo. Objetivo conseguido, mostrar funcionalidad disponible sin phonegap mediante aplicaciones híbridas. Eso sí, phonegap despliega en 7 plataformas móviles, eso es a tener muy en cuenta, pero prefiero aprender siete plataformas móviles a repetir un error 7 veces.

Hasta aquí podemos decir que nuestro BuscaTuits, creado con LungoJS1.2, es compatible con android 2.2+ y puede acceder a TODAS las funcionalidades del dispositivo, al ser híbrido.

Bonus Track: lungojs-webapp.zip

Bonus Track II: Bloquear el comportamiento del scroll en el index.html:

		<script type="text/javascript">
		    touchMove = function(event) {
		        event.preventDefault();
		    }
		</script>