{"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":"<p>\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 <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ff941104%28v=VS.92%29.aspx\"  target=\"_blank\">Panorama<\/a> (ver imagen abajo) y <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ff941098%28v=VS.92%29.aspx\"  target=\"_blank\">Pivot<\/a> para poder usarlos en mis aplicaciones QML.<\/p>\n<p><img decoding=\"async\" alt=\"Panorama Control\" src=\"http:\/\/i.msdn.microsoft.com\/dynimg\/IC425813.jpg\" title=\"Panorama Control\" \/><\/p>\n<p>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 <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-flickable.html\" target=\"_blank\">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<h5>Panorama.qml<\/h5>\n<pre>\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: &quot;panorama&quot;\r\n    property int titleSize:48\r\n    property string titleFont: &quot;&quot;\r\n    property color titleColor:&quot;#fff&quot;\r\n    property color background:&quot;#333&quot;\r\n    property string backgroundImage:&quot;&quot;\r\n    property string backgroundFillMode:&quot;Tile&quot;\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: &quot;StopAtBounds&quot;\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<p>El control PanoramaItem es aun mas sencillo como se ve en el c\u00f3digo a continuaci\u00f3n.<\/p>\n<h5>PanoramaItem.qml<\/h5>\n<pre>\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: &quot;panoramaItem&quot;\r\n    property int titleSize: 21\r\n    property color titleColor: &quot;#fff&quot;\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: &quot;Wrap&quot;\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<p>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<h5>PanoramaDemo.qml<\/h5>\n<pre>\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: &quot;my Panorama&quot;\r\n        backgroundImage:&quot;images\/bg.jpg&quot;\r\n        PanoramaItem{\r\n            width: screen.width -30\r\n            title:&quot;first item&quot;\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:&quot;second Item&quot;\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:&quot;third Item&quot;\r\n            titleSize: 21\r\n            \r\n            \/\/ Content here\r\n  \r\n        }\r\n    }    \r\n}\r\n<\/pre>\n<p>En la imagen a continuaci\u00f3n pueden ver el resultado de el ejemplo y en el v\u00eddeo su funcionamiento.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/12\/qml-panorama-blog.jpg\" alt=\"QML Panorama in action\" title=\"QML Panorama in action\" \/><\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/player.vimeo.com\/video\/18281917?title=0&amp;byline=0&amp;portrait=0\" width=\"280\" height=\"498\" frameborder=\"0\"><\/iframe><\/p>\n<p>Como ver\u00e1n duplicar el comportamiento b\u00e1sico de estos controles no fue para nada dif\u00edcil, aunque esto es solo un simple ejemplo, con muchas cosas aun por pulir y funcionalidades por implementar para lograr una emulaci\u00f3n completa de las funcionalidades de los controles originales, aun sirve para demostrar la capacidades de QML y como con poco c\u00f3digo se pueden lograr resultados interesantes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[40,42,43,44,57,58],"class_list":["post-597","post","type-post","status-publish","format-standard","hentry","category-ui","tag-panorama","tag-pivot","tag-qml","tag-qt","tag-ux","tag-wp7"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":1,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"predecessor-version":[{"id":2273,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions\/2273"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}