martes, 26 de marzo de 2013

Android: Empezando con JQueryMobile + Phonegap

Empezar con algo nuevo es bastante difícil, al menos con alguien que siempre ha sido autodidacta. En este, casi, nuevo mundo del desarrollo móvil, siempre debemos de aprovecharlos, ya que es el boom actual.
Escribo lo siguiente con la finalidad de tener una idea de la oferta que tiene jquery mobile para un desarrollador novel.
Existen muchos Frameworks que dicen trabajar con Phonegap, pero antes de casarnos con uno hay que tomar en cuenta algunas cosas:

Phonegap es "Casi" lo mismo que Cordova, solo que Phonegap es una marca comercial de Adobe y Cordova es un proyecto de la Fundación Apache que trata de generar una API para todas las plataformas. Adobe donó el proyecto(Phonegap) a Apache Fundation para que sea mantenido como Open Source.

Phonegap/Cordova no es un "Frame", Phonegap es un conjunto de librerías  que busca funcionar con la misma API en todas las plataformas(bastración), esto se logra en al menos un 70%. No confundir cordova/phonegap con el servicio Phonegap Build.

Phonegap no está 100% implementado, aunque el estandar HTML5 es un hecho, todavía falta que este llegue a todas partes. Por lo que algunas cosas que funcionen en un Navegador no funcionarán en Phonegap.

Phonegap/Cordova usa una API similar a Web Storage y que por desgracia ya es no es parte del Estandar. dicho esto, hay que tener en cuenta que esta capacidad no es funcional en Windows8 y limitado en iOS (funcional con librería externa). No sabemos hasta cuando esto dejará de estar soportado.

Jquery Mobile (JQM)  es una framework escrito en javascript que funciona en la mayoría de las plataformas con el estándar HTML5, lo notorio de esto... es que JQM no se comporta de igual manera en un Navegador que en Phonegap, que es en lo que vamos a trabajar.

JQM usa la capacidad de HTML5 para extenderse a través del TAG data, como en data-lo_que_se_me_ocurra .
Aunque JQM solo depende directamente de JQuery, es independiente de otras librerías, y en su mayoría no  causa conflictos con otros.

Empecemos:

Hacks básicos:

function onDeviceReady() { //o donde inicie tu sistema
    $.mobile.allowCrossDomainPages     = true;
    $.mobile.defaultPageTransition     = 'none';
    $.mobile.pushStateEnabled          = false
}

Estructura del DOM Inicial de JQM en Phonegap.



JQM en Phonegap tiene una página principal estructurada completamente y a partir de ello, desde el START DOM hasta el END DOM, va inyectando contenido. El contenido de los scripts js declarados en este Archivo inicial serán GLOBALES. todo lo que esté fuera de los divs data-role="page" en los demás archivos no será leídos, incluidos las funciones de Javascript. La página inicial hace las veces de "contenedor", desde esta se debe llamar a las demás páginas, sucede solo en Android.
Usaremos el término DOM para  el contenido entre START DOM y END DOM.
Ejemplo de página DOM básica.


Algo que se debe tener en cuenta es que la ID del DIV data-role="page" debe ser única en todo le programa, si no es así, JQM tiende a confundir elementos del DOM.
También las funciones javascript declaradas en este DOM serán privadas. puedes hacer un vinculo a un archivo javascript pero solo pueden ser usados en este DOM.

Las páginas de cargan con:

$.mobile.changePage("midirectorio/mi_DOM_basico.html", {}, true, true);

Hasta acá, ya tendremos nuestro entono básico de trabajo.

Espero que hagan unas pruebas y comenten los resultados. A mí me ha costado algo de trabajo entenderlo, muchas veces a base de ensayo y error, es por ello que comparto esto, para que no tropiecen con la misma piedra que yó.

Saludos.

@pata_de_jaguar.

lunes, 18 de marzo de 2013

Una Mirada a ENYO, el Framework de HP.

Enyo es un Framework "patrocinado" por HP, originalmente enfocado a WebOS, pero extendido a muchas plataformas móviles. Este no es un repaso del Framework, de ello existen muchos artículos, la finalidad de esto es probar y conocer un poquito el framework.

Ventajas de Enyo:

Compatibilidad entre plataformas: La compatibilidad de Enyo entre los distintos actores moviles es mayor al 85%. El código que escribas para un SO te servirá para otro.

Características de Enyo:

Lenguaje Javascript. Casi todo es javascript, muy similar a Sencha. Las desventaja que está en que para extenderlo hay que hacerlo en Javascript.

Lenguaje Declarativo:
Crear una página:

enyo.kind({
    name: "MI_PAGINA",
    kind: enyo.Control,
    components: [

/* Aqui va los demás componentes */
]
});

Lenguaje de elementos anidados.

{kind: "onyx.MI_CLASE", components: [
/* contenido nivel 1*/
            {kind: "onyx.PickerButton", content: "Pick One...", style: "width: 200px"},
            {kind: "onyx.Picker", components: [

/* Contenido nievl 2 de anidacion */
                {content: "Fixed (Principal + rate)"},
                {content: "Only Principal"},
                {content: "Only rate"}
            ]}
        ]},


Declaración de elementos HTML:
...
{tag : "br"},
{tag : "div"},
...

Declaración de Texto Cualquiera:

...
{content : "texto cualquiera"},
...

Clonacion de Objetos.
Todo elemento creado como una seudo clase es declarado como tal (una clase) y usada en cualquier contexto. En este sentido, puedes crear "plantillas" de elementos y renderizarlos donde quieras... muy bueno.

Eso es todo por ahora... igual que ustedes, iré probando y tratándome de enamorar de ENYO, antes de usarlo en un proyecto.

@pata_de_jaguar

sábado, 9 de marzo de 2013

DroidMart Android POS

Si siempre has querido tener tu negocio en la Mano, es tu oportunidad de tenerlo. literalmente...
acabo de sacar la versión 1.3 de DroidMart, un sistema de gestión para la pequeña empresa. Como que en México somos el 97% de esas pequeñas empresas y que muchas no cuentan con un control eficiente, este es la oportunidad de trabajarlo.
La Aplicación cuenta con estas características:
Módulos de Manejo de Clientes y proveedores.



 Modulos de Manejo de Productos:



Modulo de Operaciones:
Compras:

Ventas:




Listado de Facturas:

Y lo que lo hace diferente a todo software que existe en Android.
El módulo de ofertas, donde podrás parametrizar ofertas de productos, descuentos por volumen, por item o familia.

Reportes:




Y por supuesto su configuración:


Pueden descargarlo de los siguientes Markets:


Estoy trabajando para hacerlo Cloud, sin perder de vista que aquí en méxico la jugada del internet aún le falta mucho para madurar.

En esencia es el software. Les invito a probar y dar su opinión, siempre con la seguridad que cualquier sugerencia, queja o modificación será contestada:
Soporte: http://support.cosasenmetal.com
Foros: http://www.cosasenmetal.com
Página del producto: http://www.cosasenmetal.com

Saludos.

@pata_de_jaguar

miércoles, 6 de marzo de 2013

Breves Android: La propiedad HINT/Android y placeholder/HTM5

si vienes de HTML sabrás que la propiedad placeholder es usado para mostrar un texto de Fondo.

Algo así:



Equivale a :


Pues en Android y su lenguaje de descripción de Interfaces en XML, la propiedad equivalente es HINT. Algo así:


el Resultado:



Así que ya saben que agregar para que sus interfaces tengas una buena usabilidad...
Saludos

@pata_de_jaguar
P.D. Blogger es una mierda para un programador, tiene mal soporte para

 y codigo embebido.