Category: Web Design

Intro a Sencha Touch

December 9th, 2010

Sencha Touch es un framework para el desarrollo de aplicaciones mobile centrado en WebKit, Sencha Touch hace uso extensivo de CSS3 para todo lo referente a las animaciones y los styles que por suerte son fácilmente personalizables y mas aun si usan Sass, ya que cambiando el valor de unas cuantas variables podemos modificar totalmente la apariencia de una aplicación, estas características y funcionalidades han sido tremendamente optimizadas para lograr que todo quepa en aproximadamente 80k.

Sencha Touch esta disponible tanto en un versión con licencia comercial como con una licencia Open Source, mas precisamente la GPL v3.

Componentes

Una de las principales ventajas de Sencha Touch es la cantidad de controles que incluye, todos ellos muy fáciles de usar y personalizar.

Touch Events

Sencha Touch incluye los eventos que comúnmente mas se usan en dispositivos touch:

Sencha Touch Events

Layouts

Existe dos conceptos utilizados por Sencha Touch, uno es el de panel, el cual actúa de contenedor de componentes, el otro es el de layout el cual se aplica a un panel y especifica como deben mostrarse lo objetos que se encuentran dentro de el.

Los layouts que incluye Sencha Touch son:

Sencha Touch Layouts

Models, Stores & DataViews

Quizás las características mas poderosas de Sencha Touch son todas aquellas relacionadas con el manejo de datos, por un lado tenemos los Models que nos permiten representar un objeto, las validaciones que se deben aplicar cuando se usa en un formulario y las relaciones que este tiene con otros objetos.

Los Stores son una colección de registros los cuales utilizan un proxy para leer y escribir data, por ultimo los DataView nos permite poblar de data una template con los datos de un Store.

Manos a la obra

En el siguiente ejemplo pueden ver como utilizamos los diferentes elementos antes detallados para crear una simple liste anidada.

index.js
Ext.setup({
    onReady: function() {
        Ext.regModel('Player', {
	    fields: [
		{name : "name"},
		{name : "position"},
		{name : "number"},
		{name : "caps"},
		{name : "age"},
		{name : "picture"}
	    ]
        });

        var itemTemplate = new Ext.XTemplate(
            '<tpl for=".">',
             '{number}',' {name}',
            '</tpl>');
            
        var detailTemplate = new Ext.XTemplate(
            '<div class="detail">',
            	'<img src="{picture}"/><br/>',
                '{number}', ' {name} <br/>',
                'Position: {position} <br/>',
                'Age: {age} ',
                'Caps: {caps} ',
            '</div>'
        );

        var playersStore = new Ext.data.Store({
            model: "Player",
            proxy: {
                type: 'ajax',
                url: 'http://localhost:3000/players.json',
            	reader: {
                	type: 'json',
                	record: 'player'
                }
            },
            autoLoad:true
        });

        var navBar = new Ext.Toolbar({
            itemId: 'navBar',
            ui: 'light',
            dock: 'top',
            items: [
                {
                    text: 'Back',
                    ui: 'back',
                    handler: function(){
                    panel.layout.prev({type: 'slide', direction: 'right'});
                    }
                }
            ]
        });
        
        var detailPanel = new Ext.Panel({
            tpl: detailTemplate,
            dockedItems: [ navBar ]
        });
           
        var showDetail = function(record, btn, index) {
            navBar.setTitle(record.get('name'));
            detailPanel.update(record.data);
            panel.setActiveItem(1);
        }
        
        var listPanel = {
            dockedItems: [
                {
                    title: 'Players',
                    xtype: 'toolbar',
                    ui: 'light',
                    dock: 'top'
                }
            ],
            layout: 'fit',
            scroll: 'vertical',
            items: [
                {
                    xtype: 'list',
                    store: playersStore,
                    itemTpl:itemTemplate,
                    singleSelect: true,
                    onItemDisclosure: showDetail
                }
            ]
        };
        
        panel = new Ext.Panel({
	    fullscreen: true,
	    layout: 'card',
	    cardSwitchAnimation: 'slide',
	    items: [ listPanel, detailPanel ]
	    });
	}
});

Al correr el ejemplo, veremos algo como esto:

Sencha Touch

Sencha Touch, viene con un style por default, que es el que usamos en el ejemplo anterior, pero ademas viene con dos styles mas, uno que se ajusta mejor al look and feel de Android y otro para iOS, cambiar entro uno y otro es solo cuestión de reemplazar la stylesheet.

Sencha Touch styles

Only for WebKit

Sencha Touch tiene muchas cosas a favor, es fácil de usar, es flexible y cuenta con muchas características y funciones interesantes, pero solo funciona con WebKit, y es algo que para mi es molesto, porque muchas de estas funciones y características, podrían funcionar en Firefox, Fennec y en menor medida Opera si ademas de usar las extensiones de WebKit usaran las de los demás fabricantes, o podrían simularse usando Javascript, así que tengan en cuenta esta restricción ante de lanzarse de lleno a desarrollar con el. Quizás en un futuro esto cambie, pero por ahora, si usamos un browser que no se base en WebKit, solo obtendremos este resultado.

Sencha Touch running on Fennec

Recursos

User Interface, Web Design , , , 4 responses

Animación CSS3 con Sencha Animator y Adobe Edge, fácil y rápido

October 28th, 2010

Estos últimos días aparecieron un par de soluciones para crear animaciones usando CSS3 de una manera fácil y rápida, por un lado en el marco de Adobe MAX 2010 se mostró el prototipo de Adobe Edge una herramienta con un uso y funcionalidades básicas parecidas a Adobe Flash pero que utiliza CSS3 para crear las animaciones, a continuación pueden ver un video donde se aprecian sus capacidades, por ahora no hay mucha información acerca de Edge, no se sabe si va a llegar a materializarse como un producto independiente o si esta tecnología va a formar parte de algún otro producto de Adobe, aunque viendo el compromiso que Adobe mostró en la MAX 2010 para con HTML5 no seria raro que dentro de poco tiempo tengamos novedades.

La otra herramienta viene de la mano de la gente de Sencha Labs, la misma corre tanto en Windows, OS X y Linux y su interfaz al igual que Edge tiene un cierto parecido con Adobe Flash (ver screenshot debajo), su instalación es muy fácil, aunque aun es muy inestable y tiene la contra de necesitar una cuenta de los foros de Sencha Labs para poder usarla. El código generado por Sencha Animator esta optimizado para navegadores compatibles con Webkit, por lo que algunas features es posible que no funcionen en Firefox como por ejemplo los keyframes.

Sencha Animator

Pueden descargar Sencha Animator directamente desde aquí, hay disponibles también un par de screencast donde pueden ver el funcionamiento y las cosas que se pueden lograr utilizando Sencha Animator (ver videos abajo).

User Interface, Web Design , , , , No response

Testing mobile sites con Opera Mini & Opera Mobile

July 28th, 2010

Desde hace tiempo Opera Mini es un complemento obligado de los terminales de gama media los cuales en su gran mayoría están equipados con browsers de características muy pobres, en tanto que su hermano mayor Opera Mobile, poco a poco se esta posicionando como una alternativa a Safari en iOS y a Chrome en Android, lo cual hace que sea tarea obligada testear con ellos nuestros desarrollos, por suerte Opera provee de múltiples maneras de emular o simular Opera Mini u Opera Mobile.

Opera Mobile

El emulador de Opera Mobile se encuentra disponible para Windows, OS X y Linux, su instalación es extremadamente simple, y entre sus características mas notables se encuentran, la opción de seleccionar diferentes tamaños y ratios de pantalla, como así también la muy interesante feature de poder hookear el emulador a Opera Dragonfly (el “Firebug” de Opera).

Opera Mobile for Linux

Download

Opera Mini

Con Opera Mini se nos presentan dos opciones, la primera es el simulador web based, tanto para Opera Mini 5 como para Opera Mini 4.2, la otra opción nos permite tener a Opera Mini corriendo en nuestro desktop, para ello necesitamos instalar MicroEmu, que nos posibilita correr una implementación 100% compatible de Java ME, el siguiente paso es bajar la versión de Opera Mini que deseemos utilizar, tanto el archivo .jar como el .jad y guardarlos en un lugar común, para finalizar solo resta abrir el archivo .jad con MicroEmu, para ello vamos al menu, seleccionamos File > Open MIDlet File y en la pantalla principal seleccionamos Opera Mini y ya podemos comenzar a navegar y testear.

Opera Mini Simulator and Emulator

Download y Recursos

Web Design , No response