|
|
| Línea 52: |
Línea 52: |
| | *Nuestro fichero html con el Hola Mundo (cambiando el parámetro src del script por la versión correspondiente): | | *Nuestro fichero html con el Hola Mundo (cambiando el parámetro src del script por la versión correspondiente): |
| | <source lang="html4strict"> | | <source lang="html4strict"> |
| − | <!DOCTYPE HTML> | + | <!DOCTYPE html> |
| | <html> | | <html> |
| − | <head>
| + | <head> |
| − | <title>PhoneGap</title>
| + | <title>Device Properties Example</title> |
| − | <script type="text/javascript" src="cordova-x.y.z.js"></script>
| + | <meta charset='utf-8'> |
| − | <script type="text/javascript">
| + | <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script> |
| − | /** Se llama cuando el script de PhoneGap se haya cargado*/
| + | <script type="text/javascript" charset="utf-8"> |
| − | function onDeviceReady(){
| + | // Wait for Cordova to load |
| − | document.getElementById("helloworld").innerHTML="¡Hola Mundo! ¡Se ha cargado el framework de PhoneGap!";
| + | // |
| − | }
| + | document.addEventListener("deviceready", onDeviceReady, false); |
| − | /**Esta función se llama cuando el usuario haya cargado la página:*/
| + | // Cordova is ready |
| − | function init(){
| + | // |
| − | document.addEventListener("deviceready", onDeviceReady, false);
| + | function onDeviceReady() { |
| − | }
| + | var elemento = document.getElementById('dispositivo'); |
| − | </script>
| + | elemento.innerHTML="¡Hola Mundo!<br/> ¡Se ha cargado el framework de PhoneGap!"; |
| − | </head>
| + | } |
| − | <body onLoad="init()">
| + | </script> |
| − | <h1 id="helloworld">...</h1>
| + | </head> |
| − | </body>
| + | <body> |
| | + | <p id="dispositivo">Cargando primera aplicación de PhoneGap...</p> |
| | + | </body> |
| | </html> | | </html> |
| | </source> | | </source> |
| | </div> | | </div> |
| | </div> | | </div> |
Revisión de 05:22 25 feb 2013
PhoneGap
Tutorial para desarrollar aplicaciones móviles multiplataforma
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:
- 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 org.examples.phonegap.helloworld;
import android.os.Bundle;
import com.phonegap.DroidGap;
public class HelloWorld extends DroidGap {
/** Called when the activity is first created. */
@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>
