Últimamente hay mucho revuelo y movimiento relacionado a lo que es mobile, pero de todo ese ruido muy pocas cosas son realmente originales o proponen un cambio de paradigma, una de esas excepciones es la nueva UI de Windows Phone 7 y aunque posiblemente nunca compre, use o desarrolle para WP7 hay un par de conceptos interesantes que me gustaría tomar prestados, como por ejemplo los controles Panorama (ver imagen abajo) y Pivot para poder usarlos en mis aplicaciones QML.

Vamos a comenzar con el control Panorama, implementarlo no es para nada complicado, como verán hay algunas propiedades para configurar el look and feel, el contenido o el elemento que hará de contenedor de los PanoramaItems, también tenemos un control Flickable que utilizaremos para mover horizontalmente los PanoramaItems hijos y para finalizar tenemos un elemento Text que usaremos para mostrar el titulo del control Panorama y una Grid en donde se irán acomodando los PanoramaItems.

Panorama.qml

import Qt 4.7

Rectangle {
    id: container
    width:parent.width
    height:parent.height
    default property alias content: content.children
    property string title: "panorama"
    property int titleSize:48
    property string titleFont: ""
    property color titleColor:"#fff"
    property color background:"#333"
    property string backgroundImage:""
    property string backgroundFillMode:"Tile"

    color: container.background

    Flickable {
        width:parent.width
        height:parent.height
        contentWidth: content.width;
        contentHeight: container.height
        boundsBehavior: "StopAtBounds"
        Image{
            source: container.backgroundImage
            fillMode: container.backgroundFillMode
            Grid{
                width: content.width
                height: content.height
                rows:2
                Text {
                    id: title
                    text: container.title
                    font.pointSize: container.titleSize
                    font.family: container.titleFont
                    color: container.titleColor
                }
                Grid {
                    id: content
                    spacing:10
                }
            }
        }
    }
}

El control PanoramaItem es aun mas sencillo como se ve en el código a continuación.

PanoramaItem.qml

import Qt 4.7

Item {
    id: container
    default property alias content: content.children
    property string title: "panoramaItem"
    property int titleSize: 21
    property color titleColor: "#fff"

    height: wrapper.height

    Grid{
        id: wrapper
        rows:2
        Text {
            id: title
            width: container.width
            text: container.title
            smooth: true
            wrapMode: "Wrap"
            font.pointSize: container.titleSize
            color: container.titleColor
        }
        Rectangle {
            id: content
            width: container.width
            height: container.height - title.height            
        }
    }
}

Bien, ahora que ya tenemos nuestros controles, es momento de usarlos, para ello solo debemos crear un control Panorama, establecer el titulo, el tipo y tamaño del font, una imagen de fondo si es que vamos a usar una, para luego agregar los PanoramaItems que deseemos con su respectivos contenidos.

PanoramaDemo.qml

import Qt 4.7

Rectangle {
    id: screen
    width: 360
    height: 640

    Panorama{
        id:myPanorama
        title: "my Panorama"
        backgroundImage:"images/bg.jpg"
        PanoramaItem{
            width: screen.width -30
            title:"first item"
            titleSize: 21
            
            // Content here
            
        }
        PanoramaItem{
            width: screen.width
            title:"second Item"
            titleSize: 21
            
            // Content here
            
        }
        PanoramaItem{
            width: screen.width
            title:"third Item"
            titleSize: 21
            
            // Content here
  
        }
    }    
}

En la imagen a continuación pueden ver el resultado de el ejemplo y en el vídeo su funcionamiento.

Como verán duplicar el comportamiento básico de estos controles no fue para nada difícil, aunque esto es solo un simple ejemplo, con muchas cosas aun por pulir y funcionalidades por implementar para lograr una emulación completa de las funcionalidades de los controles originales, aun sirve para demostrar la capacidades de QML y como con poco código se pueden lograr resultados interesantes.

Ayer se libero la Technology Preview de Qt Mobility 1.2, ademas del código fuente, esta versión viene acompañaba de paquetes RPM para dispositivos compatibles con MeeGo (no así de paquetes SIS para Symbian, si desean usar esta TP en Symbian deberán compilarlo ustedes mismos), el objetivo principal de esta versión es el soporte para MeeGo y se espera que este finalizada justo para el lanzamiento de MeeGo 1.2 en abril del año que viene.

Documentación

• http://doc.qt.nokia.com/qtmobility-1.2.0-tp1/

Source

• http://get.qt.nokia.com/qt/add-ons/qt-mobility-opensource-src-1.2.0-tp1.zip
• http://get.qt.nokia.com/qt/add-ons/qt-mobility-opensource-src-1.2.0-tp1.tar.gz

Instalar Qt Mobility 1.2 TP en Meego

sudo zypper addrepo http://download.meego.com/live/devel:/qt-mtf:/qt-mobility:/1.2tp1/testing/  mobility-1.2-tp1
sudo zypper addrepo http://download.meego.com/live/Trunk:/Testing/standard/ trunk-testing
sudo zypper refresh
sudo zypper install qt-mobility
sudo zypper install qt-mobility-examples

Si desean mantenerse actualizados de los cambios, pueden acceder a los repositorios oficiales en:

• Source: http://qt.gitorious.org/qt-mobility/qt-mobility/commits/master
• MeeGo packages: http://download.meego.com/live/devel:/qt-mtf:/qt-mobility:/1.2/testing

Para mas información acerca de las novedades de esta versión y de los problemas conocidos no dejen de leer el anuncio de lanzamiento, en cambio si son nuevos en Qt Mobility el vídeo a continuación es una buena introducción.

Hace unos días escribía sobre como colaborar con Qt, pues a la lista anterior debemos ahora agregar el grupo Qt Latam en Qt Developer Network, la función de grupos fue presentada hoy y aun esta en beta, así que si se unen y encuentran algún problema o tienen alguna idea interesante que puede ser incorporada solo tienen que dejar su feedback.

El grupo de Qt Latam pronto va a contar con su propia sección en los foros de Qt DevNet y si los miembros así lo requieren podemos tener nuestra propia wiki, independiente de la wiki oficial de Qt DevNet, esta es la primera iteración de la función de grupos, mas funcionalidades se irán agregando en el futuro.

Así que ya saben, hay un nuevo espacio para seguir aprendiendo y colaborando, los espero.

Colaborar con un proyecto Open Source puede sonar intimidante, uno se imagina que la única forma de hacerlo es aportando código y que tiene que pasar por el escrutinio de hackers veteranos antes de poder hacer alguna contribución que agregue valor al proyecto, nada mas alejado de la realidad, ya que un proyecto Open Source no todo es código, hay muchas áreas en las que uno puede colaborar, lo importante es tener ganas y saber como y donde hacerlo.

La comunidad que gira en torno a Qt tiene sus años y esta madura y bien organizada pero ello no quita que haya muchas cosas aún por hacer, a continuación tienen un lista de lugares y las respectivas tareas que pueden realizar en ellos.

También puedes colaborar creando un blog, contando tus experiencias, escribiendo tutoriales, aplicaciones de ejemplo, grabando screencasts y participando en grupos locales y asistiendo a charlas.

Como ves hay muchas formas de colaborar con Qt y en el siguiente vídeo Alexandra Leisse repasa estas y otras maneras para comenzar a ayudar y pasar a ser un miembro activo de la comunidad Qt.

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.

• Lists
  • Grouped
  • Sortable
  • Nested
• Carousel
• Picker
• Overlay
• Toolbar & Buttons
• Audio
• Video
• GeoLocation

Touch Events

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

• Tap
• Double Tap
• Tap and Hold
• Swipe
• Rotate
• Drag and Drop

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:

• fit
• card
• vbox
• hbox

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, 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.

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.

Recursos

• Sencha Touch – Homepage
• Sencha Touch – Download
• Sencha Touch – Demos
• Sencha Touch – API Documentation