Tag browsing: Panorama

QML Panorama

December 30th, 2010

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

Panorama Control

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.

QML Panorama in action

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.

User Interface , , , , , 2 responses