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.

Lo bueno de QML es que permite que casos de uso como una simple vista Maestro Detalle pueda ser mejorada agregando animaciones y layouts personalizados con muy poco esfuerzo.

El ejemplo a implementar es muy simple, vamos a usar un archivo XML como data source y para presentar los datos vamos a usar un GridView en donde seleccionaremos el item a mostrar en en el ListView que hace las veces de details view.

La acción central ocurren en el delegate usado para poblar el GridView el cual espera a que se haga click en alguno de los items, para pasar el index al ListView y disparar la animación que remueve el GridView de la escena para cambiar la opacidad del ListView de 0 a 1 para poder hacerlo visible, por ultimo hay en elemento Text que hará de botón para volver a la vista original.

import Qt 4.7

Rectangle {
    width: 360
    height: 640
    id:container

    XmlListModel {
        id: oranjeModel
        source: "http://localhost:3002/players.xml"
        query: "/players/player"
        XmlRole {
            name: "name"
            query: "name/string()"
        }
        XmlRole {
            name: "number"
            query: "number/string()"
        }
        XmlRole {
            name: "position"
            query: "position/string()"
        }
        XmlRole {
            name: "picture"
            query: "picture/string()"
        }
        XmlRole {
            name: "bio"
            query: "bio/string()"
        }
    }

    Component {
        id: oranjeDelegate
        Item {
            width: 80
            height: 110
            Image {
                source: picture
                width: parent.width
                height: parent.height
                fillMode: "Stretch"
                opacity: 0.5
            }
            MouseArea {
                anchors.fill: parent
                focus: true
                onClicked: {
                    oranjeDetails.currentIndex = index
                    container.state = "detailsView"
                }
            }
        }
    }

    Component {
        id: oranjeDetailsDelegate
        Grid {
            rows: 3
            spacing: 6

            Row {
                Image {
                    source: picture
                    width: 160
                    height: 230
                    fillMode: "Stretch"
                }

                Column {
                    Text {
                        text: number
                        font.pointSize: 24
                    }
                    Text {
                        text: name
                        font.pointSize: 18
                    }
                    Text {
                        text: position
                        font.pointSize: 14
                    }
                }
            }

            Row {
                Text {
                    text: bio
                    font.pointSize: 8
                    width: container.width
                    wrapMode: "Wrap"
                }
            }

            Row {
                Text {
                    text: "Back"
                    font.pointSize: 12
                    color: "#ed1e24"
                    width: container.width
                    MouseArea {
                        anchors.fill: parent
                        onClicked: container.state = ""
                    }
                }
            }

        }
    }

    GridView {
        id: oranjeList
        model: oranjeModel
        delegate: oranjeDelegate
        width: container.width
        height: container.height
        cellWidth:90
        cellHeight: 120
    }

    ListView{
        id: oranjeDetails
        model: oranjeModel
        delegate: oranjeDetailsDelegate
        opacity: 0
    }

    states: [
        State {
            name: "detailsView"
            PropertyChanges {
                target: oranjeList
                x: -container.width
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "detailsView"
            NumberAnimation {
                properties: "x"
                easing.type: "OutBounce"
            }
            PropertyAnimation {
                target: oranjeDetails
                property: "opacity"
                to: 1
            }
        },
        Transition {
            from: "detailsView"
            to: ""
            NumberAnimation {
                properties: "x"
                easing.type: "OutSine"
                duration: 250
            }
            PropertyAnimation {
                target: oranjeDetails
                property: "opacity"
                to: 0
            }
        }
    ]
}

Consumir XML en QML es algo casi trivial, para ello contamos con el elemento XmlListModel que hará de data source de un ListView en el ejemplo a continuación, el XmlListModel cuenta con una id, un source, que en este caso hace uso de la Weather API de Yahoo, luego vienen los XmlRole los cuales describen los datos expuestos, cada uno de ellos tiene un name que sera usado luego para poder acceder a la data del role.

A continuación tenemos un delegate, en donde especificamos que datos vamos a consumir, el layout y la apariencia que tendran, por ultimo el ListView usa el model y el delegate que previamente configuramos, en este caso solo muestra un item (ver imagen abajo) ya que nuestra query solo devuelve un dato, pero si el data source devolviese mas items, cada uno de ellos poblarían el ListView, como bonus, el ListView cuenta con kinetic scroll, el cual nos da unos puntos extras en el apartado de UX con 0 esfuerzo por parte nuestra.

import Qt 4.7

Rectangle {
    width: 640
    height: 360

    XmlListModel {
        id: weatherModel
        source: "http://weather.yahooapis.com/forecastrss?w=468739&u=c"
        query: "/rss/channel/item"
        XmlRole {
            name: "title"
            query: "title/string()"
        }
        XmlRole {
            name: "description"
            query: "description/string()"
        }
    }

    Component {
        id: weatherDelegate
            Item {
                anchors.fill: parent
                Column {
                    Text {
                        text:title
                    }
                    Text {
                        text:description
                    }
                }
            }
        }

    ListView {
        id: weatherList
        anchors.fill: parent
        model: weatherModel
        delegate: weatherDelegate
    }
}