Ayuda
Creador de libro (deshabilitar)

Curso de jQuery-Introducción

De WikiEducator
Saltar a: navegación, buscar


Proyecto Android con PhoneGap

Arquitectura

Arquitectura de una aplicación en PhoneGap

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>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/phonegap/jquerymobile&oldid=11613»