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