Mediante el plugin Splashscreen podemos agregar pantallas de carga personalizadas para nuestras aplicaciones Cordova. El manejo de este plugin requiere más manejo de código a nivel nativo que de tecnología web, desde donde sólo hay que contemplar un par de métodos sencillos (en la práctica, generalmente sólo se utiliza uno, el cual veremos más adelante).
El primer paso será crear un nuevo proyecto de Cordova. Una vez hecho esto, nos situaremos desde consola en el directorio correspondiente del mismo y ejecutaremos el siguiente comando, para instalar el plugin Splashscreen:
Antes de continuar, es indispensable ajustar nuestra imagen de carga al formato 9-patch de Android. Esto podemos hacerlo mediante Android Asset Studio. Cargamos la imagen desde nuestro ordenador, la ajustamos, y podemos descargar un fichero .zip con varias versiones PNG de nuestra imagen, ajustada a las diversas resoluciones estándar de dispositivos Android.
Después tendremos que trasladar estos ficheros al directorio de recursos de nuestro proyecto Android. Además, deberemos especificar el nuevo recurso en el fichero config.xml
Donde "screen" equivale al nombre de nuestro fichero sin la extensión y 10000 es el tiempo de duración de la pantalla de carga en milisegundos. La duración por defecto si no se especifica nada es de 3000 ms
Importamos el proyecto de Cordova al entorno de desarrollo de Android, y nos aseguramos de incluir lo siguiente en el fichero .java principal, dentro del método onCreate()
Donde "hwlef9" es el nombre del recurso, tal como lo hemos especificado en config.xml, y 3000 es, una vez más, el tiempo en ms que tarda en desvanecerse la pantalla de carga.
Debemos asegurarnos muy bien de que el recurso figura en el fichero R.java
Hecho esto tan sólo tendremos que preocuparnos, por último, en la aplicación web, de especificar en Javascript que desaparezca la pantalla una vez haya cargado Apache Cordova, para proceder a la visualización de la aplicación en sí. Es decir, escribiremos la siguiente instrucción dentro de la función lanzada por el manejador del evento deviceready:
Código fuente HTML:
Y ya podemos disponer de una pantalla de carga personalizada en nuestra aplicación Cordova:
El primer paso será crear un nuevo proyecto de Cordova. Una vez hecho esto, nos situaremos desde consola en el directorio correspondiente del mismo y ejecutaremos el siguiente comando, para instalar el plugin Splashscreen:
cordova plugin add org.apache.cordova.splashscreenAntes de continuar, es indispensable ajustar nuestra imagen de carga al formato 9-patch de Android. Esto podemos hacerlo mediante Android Asset Studio. Cargamos la imagen desde nuestro ordenador, la ajustamos, y podemos descargar un fichero .zip con varias versiones PNG de nuestra imagen, ajustada a las diversas resoluciones estándar de dispositivos Android.
Después tendremos que trasladar estos ficheros al directorio de recursos de nuestro proyecto Android. Además, deberemos especificar el nuevo recurso en el fichero config.xml
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
Donde "screen" equivale al nombre de nuestro fichero sin la extensión y 10000 es el tiempo de duración de la pantalla de carga en milisegundos. La duración por defecto si no se especifica nada es de 3000 ms
Importamos el proyecto de Cordova al entorno de desarrollo de Android, y nos aseguramos de incluir lo siguiente en el fichero .java principal, dentro del método onCreate()
super.setIntegerProperty("splashscreen", R.drawable.hwlef9);
super.loadUrl("file:///android_asset/www/index.html", 3000);Donde "hwlef9" es el nombre del recurso, tal como lo hemos especificado en config.xml, y 3000 es, una vez más, el tiempo en ms que tarda en desvanecerse la pantalla de carga.
Debemos asegurarnos muy bien de que el recurso figura en el fichero R.java
Hecho esto tan sólo tendremos que preocuparnos, por último, en la aplicación web, de especificar en Javascript que desaparezca la pantalla una vez haya cargado Apache Cordova, para proceder a la visualización de la aplicación en sí. Es decir, escribiremos la siguiente instrucción dentro de la función lanzada por el manejador del evento deviceready:
navigator.splashscreen.hide();Código fuente HTML:
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Ejemplos de manejador de eventos Apache Cordova</title>
5: <link rel="stylesheet" type="text/css" href="css/index.css" />
6: <script type="text/javascript" charset="utf-8">
7: // Esperar a que carguen las librerias API del dispositivo
8: //
9: function onLoad() {
10: document.addEventListener("deviceready", onDeviceReady, false);
11: }
12: // Las APIs del dispositivo estan disponibles
13: //
14: function onDeviceReady() {
15: navigator.splashscreen.hide();
16: }
17: </script>
18: </head>
19: <body onload="onLoad()">
20: <div class="app">
21: <h1>Pantalla de carga</h1>
22: <div id="deviceready" class="blink">
23: <p class="event listening">Cargando...</p>
24: <p class="event received">LISTO!!!</p>
25: <p>Muestra una pantalla de carga personalizada</p>
26: </div>
27: </div>
28: <script type="text/javascript" src="cordova.js"></script>
29: <script type="text/javascript" src="js/index.js"></script>
30: <script type="text/javascript">
31: app.initialize();
32: </script>
33: </body>
34: </html>
Y ya podemos disponer de una pantalla de carga personalizada en nuestra aplicación Cordova:
No hay comentarios:
Publicar un comentario