Soluciones para móviles: Sencha Touch y PhoneGap

No es desconocido que cada día que pasa, las empresas y las personas se están volcando cada vez más al uso y desarrollo de apps para móviles. Android y iOS tienen un gran auge, y actualmente existen cientos de miles de aplicaciones para ambas plataformas.

Existen en el mercado varios frameworks para construir éste tipo de programas usando HTML5 y JS, ahorrándonos la tarea de tener que aprender otro lenguaje y plataforma diferentes a los que estamos acostumbrados en Client Side.

Sencha Touch

Éste framework para aplicaciones web, se puede conseguir en

http://www.sencha.com/products/touch/

Sencha se construyó teniendo presentes los últimos standards web. Usando HTML5, CSS3 y JavaScript se pueden construir aplicaciones de todo tipo. La librería sólo tiene 120kb comprimida y minificada, y se pueden deshabilitar features que no se van a utilizar, para hacerla aún más pequeña. Tiene soporte para los nuevos eventos que ofrecen los dispositivos modernos como smartphones y tablets; entre ellos touchstart, touchend, tap, double tap, swipe, tap & hold, pinch y rotate. Actualmente es compatible con iOS 3+, Android 2.1+ y BB 6+.

PhoneGap

http://www.phonegap.com/

PhoneGap es un framework que permite escribir una sóla vez la aplicación y distribuirlo en cualquiera de 6 plataformas móviles: iOS, Android, BB, WebOS, WP7, Symbian y Bada. Las aplicaciones se construyen con HTML y Javascript, y PhoneGap se encarga del deploy y el acceso a APIs en cualquier plataforma. Se pueden usar funciones nativas del device como la cámara o la lista de contactos. Adicional a todo ésto, se tiene a disposición toda una comunidad de developers que han hecho plugins y herramientas para todo tipo de usos.

Para finalizar debemos mencionar que ambos, Sencha y PhoneGap, se complementan de una manera eficiente y natural y en cualquier proyecto móvil que estemos desarrollando, no pueden faltar ambos.

Drop Down Menu, jQuery y CSS

Primero el producto terminado.

La librería jquery la pueden agregar al javascript de ésta forma en la sección <head>:

<script type="text/javascript" 

 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>

Primero un poco de HTML de ejemplo:

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Luego el CSS:

ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: #002244;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.topnav li a:hover{
    background: #003366;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 42px;
    float: left;
    background: #333333 url("drop_down_arrow.gif") 0 10px no-repeat;
}
ul.topnav li span.subhover {cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: left;
    width: 145px;
    background: #333;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background: #222;
}

Finalmente un poco de jQuery:

$(document).ready(function(){

    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.topnav li span").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

Cómo cargar contenido mediante AJAX con YUI3?

La librería YUI ofrece una gama amplia de posibilidades para cargar contenido dinámicamente mediante llamados de http. La clase IO es la encargada de manejar toda la parte de transacciones en YUI.

Primero, ponemos tags html básicas e incluimos YUI3 a nuestra página html:

<html>
<head>
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">
</script>

luego incorporamos nuestro código a la página, mediante otro llamada JavaScript y cerramos el head:


<script type="text/javascript" charset="utf-8"
src="io.js">
</script>
</head>


El resto de la página es un solo un div que va a funcionar de contenedor para el contenido que vamos a invocar mediante AJAX:


<body>
<div class="container"></div>
</body>
</html>


Ahora en nuestro archivo io.js llamamos la función principal YUI.use:

YUI().use("node", "io-base", function(Y) {
//TODO
)};

Vamos a usar las librerías node y io-base.

Seguidamente, dentro de la función use, asignamos el url del recurso a una variable uri, y construimos 2 funciones, una que se va a ejecutar cuando la transacción finalice, y otra que se ejecuta en caso de error, complete y failure:

var uri = "data.xml";

function complete(id, o, args) {
var id = id;
var args = args;
var data = o.responseText;
var container = Y.one(".container");
container.set("innerHTML", data);
};
function failure(id, o, args) {
alert("Transaction Failed");
};

Los parámetros que YUI ofrece a ésta función son id, o y args, que pueden ser cambiados a cualquier otro nombre siempre y cuando se respete la nueva nomenclatura y el orden, por ejemplo, pueden ser llamados complete(transaccion, objeto, argumentos). El primer parámetro id, es el id de la transacción, el segundo es el objeto http que contiene todos los datos del cuerpo del llamado. El último parámetro es un objeto utilitario que podemos usar para enviar otros parámetros a la función.

Para nuestro ejemplo, el objeto o es el que nos interesa, pues contiene la propiedad responseText, que es una representación textual del llamado http. Finalmente escogemos un nodo con Y.one para meter el dato mediante set("innerHTML").

Finalmente, asignamos los eventos complete y failure a las funciones antes declaradas, y hacemos el llamado AJAX:

Y.on('io:complete', complete, Y);
Y.on('io:failure', failure, Y);

var request = Y.io(uri);

Al llamarse la función Y.io con la dirección del recurso (uri) como parámetro, es cuando se hace el llamado http.