Curso de jQuery-Introducción
De WikiEducator
Saltar a: navegación, buscar
PhoneGap
Tutorial para desarrollar aplicaciones móviles multiplataforma
Contenido
Proyecto Android con PhoneGap
Arquitectura
Arquitectura javascript
- Una aplicación mediante PhoneGap tendrá dos partes bien definidas:
- JavaScript para la parte de negocio: Interfaz de usuario y funcionalidad
- Javascript para acceder y controlar el dispositivo
Librerías PhoneGap
- PhoneGap viene con 3 componentes principales:
- Código nativo
- Debemos copiar el jar correspondiente a la carpeta de lib
- Añadir el jar al class path (botón derecho Build Path->Add to build Path)
- Fichero de configuración en XML
- Copiar el directorio XML del directorio Android de PhoneGap a la carpeta res
- Fichero con el JavaScript de PhoneGap
- Creamos una carpeta www dentro del directorio assets
- Ahí colocaremos tanto el javascript como nuestro index.html
Proyecto Hola Mundo
- Creamos un nuevo proyecto en el que situaremos los ficheros anteriores
- En Android una clase llamada actividad representa una pantalla de la aplicación, para usar PhoneGap, cambiaremos la pantalla de Actividad a DroidGap.
- DroidGap es una actividad especial, que nos permite mostrar páginas html.
- Nuestro fichero HolaMundo.java deberá quedar así:
package com.example.holamundophonegap; import org.apache.cordova.DroidGap; import android.os.Bundle; public class HolaMundo extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } }
- Nuestro fichero html con el Hola Mundo (cambiando el parámetro src del script por la versión correspondiente):
<!DOCTYPE html> <html> <head> <title>Device Properties Example</title> <meta charset='utf-8'> <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready // function onDeviceReady() { var elemento = document.getElementById('dispositivo'); elemento.innerHTML="¡Hola Mundo!<br/> ¡Se ha cargado el framework de PhoneGap!"; } </script> </head> <body> <p id="dispositivo">Cargando primera aplicación de PhoneGap...</p> </body> </html>
