martes, 14 de mayo de 2013

Phonegap SplashScreen


Un splash screen es una imagen que aparece en la apertura o carga inicial de un juego o programa.
01_ejemploDeSplash
El Splash screen que nos muestra Netbeans a su inicio.
Phonegap nos da la opción de configurar el plugin Splashscreen y de usar los métodos show y hide para mostrar y ocultar un splash screen en nuestras aplicaciones.
En éste artículo vamos a ver como mostrar una splash screen con Phonegap en una aplicación Android.

Armado del Proyecto

A continuación daré los pasos a seguir para crear nuestro proyecto Android en Netbeans y ponerlo a punto para que no falle durante la primera compilación.
Este procedimiento se encuentra muy bien explicado y con mayor detalle en el video PhoneGap Android Tutorial. Aquí no solo se explica como armar la estructura de un nuevo proyecto para que quede funcional y no falle en la primera compilación, sino además te enseña cómo instalar el SDK de Android, cómo configurar las variables de entorno, cómo configurar el emulador de dispositivos móviles en NetBeansAndroid, etc.
Si es la primera vez que creas un proyecto con Phonegap, tenés que ver éste video. A continuación no se explicarán todos los detalles de configuración y puesta en marcha que se mencionan en el video.
Si ya has realizado este procedimiento podes saltarte este paso.

Crear un nuevo proyecto Android en Netbeans

Primero Creamos un proyecto Android en Netbeans:
02_Splash
03_Splash
Vas a ver que en la ventana de Proyectos Netbeans te advierte sobre el paquete creado, indicándote de que contiene archivos con errores. Esta advertencia se debe a que la clase principal en el paquete que se crea, hace referencia a una clase llamada R que aún no ha sido creada. No te preocupes por esta advertencia y avanza al próximo paso.

Armamos la estructura de un proyecto funcional

Una vez creado el proyecto, con el Explorador de Windows (o explorador de archivos de tu sistema operativo) nos dirigimos al lugar donde Netbeans ubicó los archivos y carpetas del proyecto recién creado, y borramos las carpetas: libsres y src
04_Splash
Una vez eliminadas las carpetas libsres y src de nuestro proyecto nos dirigimos al lugar en disco donde tengamos instalado Phonegap, y navegamos la siguiente ruta:
C:\phonegap-2.5.0\lib\android\example\
Dentro de la carpeta example seleccionamos y copiamos las siguientes carpetas y archivos:assetslibsressrc y AndroidManifiest.xml
05prev_Splash
Luego pegamos las carpetas y archivo copiados dentro de nuestro proyecto Netbeans, en la misma ubicación donde habíamos eliminado las carpetas libs res y src.
Windows te advertirá sobre que ya hay un archivo AnddoidManifiest.xml en la ubicación destino (en donde estas pegando). Selecciona la opción Mover y Reemplazar (la primera).
05_Splash
Luego reiniciamos Netbeans para que se actualice el árbol de carpetas y archivos con las nuevas que hemos añadido.

Primera compilación y último ajuste

Una vez reiniciado Netbeans compilamos (botón Play) el proyecto por primera vez. Si todo funciona bien vas a ver que se compila el proyecto sin errores y se ejecuta el emulador con la aplicación de ejemplo.
06_Splash
Por ultimo nos dirigimos a la carpeta donde tenemos nuestro proyecto en disco, y dentro de/assets/www borramos todo el contenido de la carpeta www, a excepción del archivo cordova-2.5.0.js.
07_Splash
Listo! Ya tenemos todo a punto para comenzar con nuestro nuevo proyecto.

Configuración del splash screen

Dar permisos al plugin Splashscreen en config.xml

Lo primero que debemos hacer es habilitar el plugin Splashscreen. Para ello debemos editar el archivo config.xml que se halla en Resources/xml/config.xml en la ventana de proyectos (o en app/res/xml/config.xml, si navegas usando la ventana de archivos) y añadimos la siguiente línea:
<plugin name=”SplashScreen” value=”org.apache.cordova.SplashScreen”/>
NOTA: En nuestro caso esto no será necesario puesto que hemos utilizado la aplicación de ejemplo para Android que viene incluida en Phonegap; y que ya tiene activado al plugin (ver línea nro 54 del archivo xml). Sin embargo,  debemos tener en cuenta de que si creamos un proyecto desde cero, sin el procedimiento seguido en el paso anterior, usando el ejemplo de Android, etc, entonces deberás indicar ésta línea en el archivo config.xml.

Copiar nuestra imagen de splash al proyecto

Nuestro splash screen consistirá en una imagen que se mostrará al inicio de la aplicación. Dicha imagen debe tener la extensión .PNG.
Idealmente deberemos tener además 4 versiones de distinto tamaño:
Extra Large (xhdpi) : de al menos 960 x 720
Large (hdpi): de al menos 640 x 480
Medium (mdpi): de al menos 470 x 320
Small (ldpi): de al menos 426 x 320
, para luego ubicar cada una de ellas, según su resolución, dentro de las carpetas:
Resources/drawable-xhdpi : la imagen Extra Large
Resources/drawable-hdpi : la imagen Large
Resources/drawable-mdpi: la imagen Medium
Resources/drawable-ldpi: la imagen Small

Configuración final del splash screen

En el editor de Netbeans abrimos la clase cordovaExample .java que se encuentra dentro del paquete org.apache.cordova.example.
Dentro del método onCreate de la clase cordovaExample.java agreamos justo antes de la linea super.loadUrl(Config.getStartUrl()); las siguientes dos líneas:
08_Splash
Netbeans nos advertirá de que estamos haciendo referencia a un campo llamado ‘taza_medium’ (este es el nombre de tu archivo de imagen) que no hemos definido dentro del método drawable de la clase R. Para crear dicho campo, cliqueamos en la advertencia y le indicamos a Netbeans que cree dicho campo seleccionando la opción que nos propone: ‘Create field “el nombre de tu imagen” in org.apache.cordova.example.R.drawable’.
09_Splash

¿Qué es lo que hacen esas dos líneas?

super.setIntegerProperty(“splashscreen”, R.drawable.taza_medium);
super.loadUrl(“file:///android_asset/www/index.html”, 10000);
La primera línea super.setIntegerProperty establece la imagen que será mostrada comosplashscreen. Si el nombre de tu imagen es diferente al nombre de la mía ‘taza_medium.png’, tendrás que modificar esta línea.
La segunda línea es la línea normal super.loadUrl que se usa en todos los proyectos phonegap, pero en este caso tiene un segundo parámetro que indica el valor del tiempo que durará la muestra del splash screen. En este ejemplo el splash screen se mostrará por 10 segundos. Si quisiéramos por ejemplo ocultar el splash screen, una véz que obtenemos el evento “deviceready”, entonces deberíamos llamar al método:
navigator.splashscreen.hide()
De la misma forma, para mostrar el splash screen podemos utilizar el método show:
navigator.splashscreen.show()
En nuestro ejemplo el splash será mostrado al inicio de la aplicación. Por lo que no es necesario usar el método show() , puesto que ya hemos indicado la carga en la líneasuper.loadUrl(“file:///android_asset/www/index.html”, 10000);. Pero si quisiéramos mostrarlo de nuevo deberíamos usar el método show.

Programación del splash screen

Lo primero que haremos es crear un nuevo archivo index.html dentro de la carpetaassets/www/ similar al siguiente (presta atención al encabezado sobre todo):
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta name="format-detection" content="telephone-no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1,
              minimum-scale=1, maximum-scale=1, width-device-width,
              height=device-height, target-densitydpi=device-dpi">
                  
        <title>Mostrar un Splash Screen</title>
         
        <script src="cordova-2.5.0.js"></script>
         
        <script>
            // AQUI IRA NUESTRO SCRIPT EN JAVASCRIPT
             
        </script>
         
    </head>
    <body>
        <div>
            <h1>¡Felicitaciones!</h1>
            <h2>Ya sabés como cargar una pantalla de inicio! </h2>
            <p>
                <img src="img/thumbsup.gif" />
            </p>
        </div>
    </body>
</html>
Luego, dentro de las etiquetas del script Javascript insertaremos el siguiente código:
1
2
3
4
5
6
7
8
9
10
11
// AQUI IRA NUESTRO SCRIPT EN JAVASCRIPT
   function init() {
      document.addEventListener("deviceready", onDeviceReady, false);
 
   }
 
   function onDeviceReady() {
      // oculta el splashscreen
      navigator.splashscreen.hide();
 
   }
La función init() nos asegura que el código que queremos ejecutar para mostrar el splash screen corra solo cunado el dispositivo se encuentre listo. Como se puede ver el objeto document del DOM utiliza el método addEventListener() y le pasa como parámetros el evento que debe escuchar (al que debe estar atento), “deviceready” y luego el nombre de la función que se debera ejecutar ejecutar cuando dicho evento ocurra.
Dentro de la función onDeviceReady() indicamos que queremos ocultar el splash screen usando el método hide(). Recordá que el splash se ocultará luego de transcurridos 10 segundos (esto se configuró así en la clase .java).
Por último, para que todo funcione indicamos en la etiqueta <body> del index.html que al cargarse la página se llame al método init().
1
2
3
4
5
6
7
8
9
<body onload="init();">
    <div>
        <h1>¡Felicitaciones!</h1>
        <h2>Ya sabés como cargar una pantalla de inicio! </h2>
        <p>
            <img src="img/thumbsup.gif" />
        </p>
    </div>
</body>

Compilación y Prueba

Si todo está correcto, luego de darle Play a nuestro proyecto, para que Netbeans lo compile, deberías poder iniciar la aplicación y ver el splash de inicio al abrirse la aplicación.
Podes descargarte el ejemplo aquí

No hay comentarios:

Publicar un comentario