|
|
| Línea 1: |
Línea 1: |
| | {{Usuario:juanda/phonegap/nav }} | | {{Usuario:juanda/phonegap/nav }} |
| − | {{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}} | + | {{#widget:Slides}} {{MiTitulo| Curso de PhoneGap}} |
| | <div class="slides layout-regular template-default"> | | <div class="slides layout-regular template-default"> |
| | <div class="slide"> | | <div class="slide"> |
Revisión de 07:16 28 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 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>
- En el fichero AndroidManifest.xml he tenido que modificar la clase que se ejecuta al arrancar la aplicación:
android:name="com.example.holamundophonegap.HolaMundo"
- También he tenido que añadir un permiso (no se la razón)
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.holamundophonegap"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.holamundophonegap.HolaMundo"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
