Para empezar copiamos la carpeta esqueleto que contiene el proyecto base que preparamos en el capítulo anterior. Si queremos modificamos el id y el nombre de la app en el fichero config.xml.
Copiamos el siguiente código en el body del documento index.html, que quedaría así:
<div class="container">
<h1 class="text-center">PhoneGap</h1>
<div id="calculator">
<div class="well result"> 0 </div>
<div class="digits">
<div class="row">
<button class="btn btn-default digit col-xs-3">7</button>
<button class="btn btn-default digit col-xs-3">8</button>
<button class="btn btn-default digit col-xs-3">9</button>
<button class="btn btn-default digit col-xs-3">+</button>
</div>
<div class="row">
<button class="btn btn-default digit col-xs-3">4</button>
<button class="btn btn-default digit col-xs-3">5</button>
<button class="btn btn-default digit col-xs-3">6</button>
<button class="btn btn-default digit col-xs-3">-</button>
</div>
<div class="row">
<button class="btn btn-default digit col-xs-3">1</button>
<button class="btn btn-default digit col-xs-3">2</button>
<button class="btn btn-default digit col-xs-3">3</button>
<button class="btn btn-default digit col-xs-3">×</button>
</div>
<div class="row">
<button class="btn btn-default digit col-xs-3 needsclick">0</button>
<button class="btn btn-danger digit col-xs-3">C</button>
<button class="btn btn-info digit col-xs-3">=</button>
<button class="btn btn-default digit col-xs-3">÷</button>
</div>
</div>
</div>
</div>
Si ejecutamos el index.html en un navegador veremos que tenemos una calculadora, cuya maquetación hemos logrado mediante Bootstrap. Bootstrap maqueta automáticamente la web mediante el uso de ciertas clases en los elementos del html. Todas las clases usadas en los elementos de esta aplicación son para que sean procesados por Bootstrap y ahorrarnos nosotros el escribir CSS. Además, nos facilita enormemente el crear diseños responsive, lo cual es importantísimo para nuestros propósitos, ya que existe una gran variedad pantallas en las que puede ejecutarse nuestra aplicación.
Por su parte, el id calculator, y las clases result, digits y digit servirán para seleccionar elementos en el javascript que añadiremos después. Ignoremos por el momento la clase needsclick que tiene el <button> de contenido 0.
Aplicación en navegador de pc:
A continuación pegamos el siguiente código al index.js:
var app = {
// Application Constructor
initialize: function() {
//this.bindEvents();
}
};
jQuery(function($) {
var digits = $('#calculator .digits .digit');
var leftBuffer = '';
var rightBuffer = '';
var calculator = { left: false, right: false, result: 0, operator: '+' };
function calculate() {
calculator.result = eval(calculator.left + calculator.operator + calculator.right);
$('#calculator .result').text(calculator.result);
calculator.left = null;
calculator.right = null;
leftBuffer = calculator.result + '';
rightBuffer = '';
}
function isDigit(key) {
var digits = "0123456789";
var digit = false;
if(digits.indexOf(key) != -1)
digit = true;
return digit;
}
digits.click(function() {
var key = $(this).text();
console.log(leftBuffer, rightBuffer);
if(isDigit(key)) {
if(calculator.left) {
rightBuffer += key.toString();
$('#calculator .result').text(rightBuffer);
} else {
leftBuffer += key.toString();
$('#calculator .result').text(leftBuffer);
}
} else if(key != '=' && key != 'C') {
switch(key) {
case '÷': key = '/'; break;
case '×': key = '*'; break;
}
calculator.operator = key;
calculator.left = leftBuffer;
} else if(key == 'C'){
leftBuffer = '';
rightBuffer = '';
calculator.left = null;
calculator.right = null;
calculator.result = 0;
$('#calculator .result').text(calculator.result);
} else {
calculator.right = rightBuffer;
if(calculator.left.substring(calculator.left.length-1, 1) == '.')
calculator.left += '0';
if(calculator.right.substring(calculator.right.length-1, 1) == '.')
calculator.right += '0';
calculate();
}
});
});
He mantenido el objeto app para que no se produzcan errores al abrir ahora index.html en el navegador. Si deseamos podemos eliminarlo y comentar en el index.html la línea app.initialize(); Por lo demás, con el código mostrado, simplemente hacemos que la página web reaccione al pulsar las teclas de la calculadora.
Refrescamos la página y vemos que tenemos una aplicación web simple que simula el funcionamiento de una calculadora. No entraremos en detalles sobre el funcionamiento del código javascript, ya que no es el fin de este tutorial. En lo que sí que tenemos que centrarnos es en el hecho de que es una aplicación que puede ejecutarse en cualquier navegador y que en principio no está destinada a móviles. Pero al estar situada dentro de www en nuestro proyecto phonegap, podemos compilar y ya tendremos aplicaciones móviles, sin tener que hacer nada más con el código.
Abrimos en la carpeta esqueleto una consola y escribimos:
phonegap run android
Ahora podremos ver la versión móvil de la aplicación que acabamos de ver en la máquina virtual de Android de nuestro equipo. Si lo deseamos podríamos obtener el .apk para instalar en nuestro móvil desde Phonegap Build, o una vez compilado el proyecto en local, en la carpeta platforms/android/ant-build. Usad en este caso la versión unaligned del .apk.
Aplicación móvil:
No hay comentarios:
Publicar un comentario