Anteriormente había dado una Guía Para Desarrollar Aplicaciones Para BlackBerry en la cual hablaba de un FrameWork (PhoneGap), el cual nos facilita el desarrollo para los diversas plataformas existentes para los SmartPhone. Lo interesante de este FrameWork es que un solo desarrollo nos sirve para otras plataformas, usando lo que se conoce como WebWorks y tecnologías web que este tipo de desarrollo implica, tales como HTML5, CSS, JavaScript; Ademas de las anteriores tecnologías, usare jquery y jquery mobile para que el ejercicio sea mas completo 😉
Para comenzar tendremos que configurar nuestro entorno de trabajo, el cual estará dotado del SDK de android, NetBeans (Desarrollo Android), Aptana Studio (Desarrollo Web), XAMPP, y el FrameWork; lo anterior esta explicado en una guía para configurar el entorno para el Desarrollo de Aplicaciones para Smartphones, ademas de lo anterior es necesario instalar un plugin para Netbeans, el cual es necesario para desarrollar en Android mediante este IDE. La instalación y configuración de este plugin lo pueden encontrar en el siguiente post, antes de hacer esto es necesario tener descargado, ubicado y configurado el SDK.
1. Crearemos el proyecto web en Aptana Studio 3, compartire con ustedes el proyecto el cual usare de ejemplo, primero veamos como tiene que quedar la estructura del proyecto a realizar:
Cabe aclarar que los archivos que comienzan con jquery* son frameworks usados para el desarrollo web, los pueden descargan haciendo click en cada enlace: jquery y jquery mobile.
2. El archivo index.html ira en la carpeta principal del proyecto, en este caso ira en CalTemp, el código que contendrá el archivo es el siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--Cargando js--> <script type="text/javascript" src="js/jquery1.9.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script> <script type="text/javascript" src="js/scriptJS.js"></script> <!--Cargando css--> <link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" /> <link type="text/css" rel="stylesheet" href="css/estilos.css" /> <title>Cal* Temp*</title> </head> <body > <!-->Comienzo Pagina principal<--> <div data-role="page" id="pageMain" data-position="fixed"> <div data-role="header" data-position="fixed" data-fullscreen="false"> <p class="titHeader">CONVERTIDOR DE TEMPERATURA</p> </div> <div data-role="content" id="content" > <label for="name">Grados C° a Convertir </label> <input type="text" data-role="none" size="15" id="numCen"/> <input type="button" value="Convertir" data-role="none" class="btnPer" id="convertir"> <!--Capa donde se mostraran los resultados--> <div id="capRes"> <h2>CONVERSION</h2> <div class="divL"><label>F°</label> <input type="text" maxlength="2" data-role="none" id="grF" disabled="disabled"/></div> <div class="divL"><label>K°</label> <input type="text" maxlength="2" data-role="none" id="grK" disabled="disabled"/></div> <button data-role="none" id="btnRes" >REINICIAR</button> </div> </div> <div data-role="footer" data-position="fixed"> <div> <a data-role="button" data-theme="b" href="http://www.jagonzalez.org" data-shadow="true">JaGonzalez.org</a> </div> </div> </div> </body> </html> |
3. La ubicación para el archivo estilos.css es en la carpeta css, los estilos que se aplicaron son los siguientes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | .titHeader{ padding: 0 auto; text-align: center; font-family: Verdana; font-weight: 100; font-style: oblique; font-size: 14px; } #content{ width: auto; height: 260px; float: left; clear: both; } .btnPer{ width: auto; font-size: 16px; border-radius: 10px; -moz-transition: all 0.9s; -webkit-transition: all 0.9s; -o-transition: all 0.9s; transition: all 0.9s; } .btnPer:hover{ background-color: #D2CDCC; } #capRes{ visibility: hidden; } input:not([type]), input[type="text"]{ border-radius: 5px; text-align: right; } .divL{ margin: 15px 0 20px 0; } #btnRes{ width: auto; color: #3200DC; font-size: 16px; border-radius: 10px; font-weight: bold; } #btnRes:hover{ background-color: #D2CDCC; } |
4. Para darle dinamismo usamos jquery y javascript, el código esta en el archivo scriptJS.js, este se ubica en la carpeta js, el código es el siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | $(document).ready(function(){//uso de jquery para usar javascript cuando se cargue el DOM $("#convertir").click(function() {//cuando se hace click en el boton CONVERTIR var num = document.getElementById("numCen").value;//obteniendo el valor del campo a convertir if(num=="" || num==null){//validacion si la casilla esta vacia document.getElementById("numCen").style.background='#FFBCD4'; //si esta vacia se sombrea con un color tenuea primera advertencia } else{//si no esta vacia la casilla sigue a la siguiente validacion if(!isNaN(num)){//se valida si es un numero var div = document.getElementById("capRes"); //se almacena en una variable la capa que esta oculta y muestra el resultado document.getElementById("numCen").style.background='#fff';//se quita el color de los errores de las validaciones var far = parseInt(num)*9/5+32;//se hace la conversion para la temperatura F° var kel = parseInt(num) +273.15;//se hace la conversion para la temperatura K° document.getElementById("grF").value= far; //se muestra el resultado F° document.getElementById("grK").value = kel;//se muestra el resultado K° document.getElementById("btnRes").style.visibility = "visible"; //se hace visible el boton reiniciar div.style.visibility= "visible"; //se hace visible la capa que muestra los resultados }else{//si no es un numero se sombrea con un color mas fuerte segunda advertencia document.getElementById("numCen").style.background='#FF6E97';//si no es un numero el que se ingresa se sombre con un color mas fuerte, segunda advertencia } } }); $('#btnRes').click(function() {//cuando se hace click en el boton de reiniciar var div = document.getElementById("capRes"); //se almacena en una variable la capa que muestra el resultado document.getElementById("btnRes").style.visibility = "hidden";//se oculta el boton de reiniicar document.getElementById("grF").value= "";//se elimina el valor en el campo de la temperatura F° document.getElementById("grK").value = "";//se elimina el valor en el campo de la temperatura K° document.getElementById("numCen").value ="";//se elimina el valor en el campo del numero a convertir div.style.visibility="hidden";//se oculta la capa que muestra los resultados }); }); |
En este punto la aplicación debería de verse así:
– La parte de la izquierda es como tiene que quedar la estructura del proyecto, la parte marcada de la derecha es lo único que aparece al inicio, una vez se le de CONVERTIR veremos el resultado en la parte de abajo, este ejercicio tiene dos validaciones 😉
5. Ahora pasaremos a copiar cierta carpeta que viene en la descarga del PhoneGap (espero que hayan leído sobre como configurar el entorno de desarrollo), la carpeta la encontramos en: C:phonegap-2.4.0libandroid, esta es la ubicación que deje para la carpeta del FrameWork; en esta ruta encontramos una carpeta que se llama example, la copiamos (Crtl + C):
6. La carpeta que copiamos en el anterior paso la pegamos en la ruta de los proyectos en NetBeans, C:UsersbelialDocumentsNetBeansProjects (Ctrl + V):
7. Ubicamos la carpeta del proyecto realizado en el punto 1, y copiamos todo el contenido y lo pegamos en la siguiente ruta: C:UsersbelialDocumentsNetBeansProjectsexampleassetswww, antes de pegarlo, podemos eliminar sin preocupación lo que hay en esa carpeta, en este punto debería quedar así:
8. Luego abriremos Netbeans, en el cual buscamos el proyecto de nombre example y lo abrimos, una vez abierto damos click derecho sobre el nombre del proyecto y elegiremos Run para ejecutar nuestra aplicación:
9. Para correr la aplicación tenemos dos opciones, la primera es Ejecutar la Aplicacion Android en el Emulador del SDK y la segunda es usar nuestro SmartPhone con Android, en este caso use la segunda opción:
10. La aplicación quedara instalada en el celular, la encontraremos con el nombre e icono predeterminado del proyecto de PhoneGap:
11. Ejecutada la aplicación veremos que trabaja exactamente igual que en el punto 1, pero con la diferencia de que es ejecutada en Android:
12. Una vez ejecutamos el evento de convertir, se mostrara los resultados en la parte de abajo, si pulsamos reiniciar, veremos que la app volverá al punto anterior:
