{"id":597,"date":"2010-12-30T01:39:13","date_gmt":"2010-12-30T01:39:13","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=597"},"modified":"2013-07-05T23:44:00","modified_gmt":"2013-07-06T02:44:00","slug":"qml-panorama","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/qml-panorama\/","title":{"rendered":"QML Panorama"},"content":{"rendered":"

\u00daltimamente 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\u00eda tomar prestados, como por ejemplo los controles Panorama<\/a> (ver imagen abajo) y Pivot<\/a> para poder usarlos en mis aplicaciones QML.<\/p>\n

\"Panorama<\/p>\n

Vamos a comenzar con el control Panorama, implementarlo no es para nada complicado, como ver\u00e1n hay algunas propiedades para configurar el look and feel, el contenido o el elemento que har\u00e1 de contenedor de los PanoramaItems, tambi\u00e9n tenemos un control Flickable<\/a> 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\u00e1n acomodando los PanoramaItems.<\/p>\n

Panorama.qml<\/h5>\n
\r\nimport Qt 4.7\r\n\r\nRectangle {\r\n    id: container\r\n    width:parent.width\r\n    height:parent.height\r\n    default property alias content: content.children\r\n    property string title: "panorama"\r\n    property int titleSize:48\r\n    property string titleFont: ""\r\n    property color titleColor:"#fff"\r\n    property color background:"#333"\r\n    property string backgroundImage:""\r\n    property string backgroundFillMode:"Tile"\r\n\r\n    color: container.background\r\n\r\n    Flickable {\r\n        width:parent.width\r\n        height:parent.height\r\n        contentWidth: content.width;\r\n        contentHeight: container.height\r\n        boundsBehavior: "StopAtBounds"\r\n        Image{\r\n            source: container.backgroundImage\r\n            fillMode: container.backgroundFillMode\r\n            Grid{\r\n                width: content.width\r\n                height: content.height\r\n                rows:2\r\n                Text {\r\n                    id: title\r\n                    text: container.title\r\n                    font.pointSize: container.titleSize\r\n                    font.family: container.titleFont\r\n                    color: container.titleColor\r\n                }\r\n                Grid {\r\n                    id: content\r\n                    spacing:10\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
El control PanoramaItem es aun mas sencillo como se ve en el c\u00f3digo a continuaci\u00f3n.<\/p>\n
PanoramaItem.qml<\/h5>\n
\r\nimport Qt 4.7\r\n\r\nItem {\r\n    id: container\r\n    default property alias content: content.children\r\n    property string title: "panoramaItem"\r\n    property int titleSize: 21\r\n    property color titleColor: "#fff"\r\n\r\n    height: wrapper.height\r\n\r\n    Grid{\r\n        id: wrapper\r\n        rows:2\r\n        Text {\r\n            id: title\r\n            width: container.width\r\n            text: container.title\r\n            smooth: true\r\n            wrapMode: "Wrap"\r\n            font.pointSize: container.titleSize\r\n            color: container.titleColor\r\n        }\r\n        Rectangle {\r\n            id: content\r\n            width: container.width\r\n            height: container.height - title.height            \r\n        }\r\n    }\r\n}\r\n<\/pre>\n
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\u00f1o del font, una imagen de fondo si es que vamos a usar una, para luego agregar los PanoramaItems que deseemos con su respectivos contenidos.<\/p>\n
PanoramaDemo.qml<\/h5>\n
\r\nimport Qt 4.7\r\n\r\nRectangle {\r\n    id: screen\r\n    width: 360\r\n    height: 640\r\n\r\n    Panorama{\r\n        id:myPanorama\r\n        title: "my Panorama"\r\n        backgroundImage:"images\/bg.jpg"\r\n        PanoramaItem{\r\n            width: screen.width -30\r\n            title:"first item"\r\n            titleSize: 21\r\n            \r\n            \/\/ Content here\r\n            \r\n        }\r\n        PanoramaItem{\r\n            width: screen.width\r\n            title:"second Item"\r\n            titleSize: 21\r\n            \r\n            \/\/ Content here\r\n            \r\n        }\r\n        PanoramaItem{\r\n            width: screen.width\r\n            title:"third Item"\r\n            titleSize: 21\r\n            \r\n            \/\/ Content here\r\n  \r\n        }\r\n    }    \r\n}\r\n<\/pre>\n
En la imagen a continuaci\u00f3n pueden ver el resultado de el ejemplo y en el v\u00eddeo su funcionamiento.<\/p>\n
\"QML<\/p>\n